/* Mobile reference layout. Desktop presentation is unchanged. */
.mobile-cart-link,.footer-support,.footer-app-options,.ref-faq-select{display:none}
@media(min-width:768px){.bleed,.ref-invite-hero{width:var(--ref-page-width,100%);margin-left:calc(50% - var(--ref-page-width,100%)/2)}}
@media(max-width:767px){
  .site-header,.member-view .site-header,.site-header:has(#notifications-link:not([hidden])){
    display:grid;grid-template-columns:32px minmax(0,1fr) 32px;grid-template-rows:49px 40px;
    height:89px;min-height:0;max-width:none;padding:0 12px;gap:0 8px;align-items:center;
  }
  .site-header .menu-trigger{grid-column:1;grid-row:1;width:30px;height:40px;padding:0;justify-content:flex-start;font-size:26px}
  .site-header .brand,.member-view .site-header .brand{grid-column:2;grid-row:1;justify-self:center;font-size:31px;line-height:1;gap:3px;letter-spacing:-1.3px}
  .site-header .brand-name{font-size:5.5px;letter-spacing:3px;line-height:1}
  .site-header .header-actions,.member-view .site-header .header-actions{grid-column:3;grid-row:1;display:flex;margin:0;gap:0;align-items:center}
  .site-header .header-actions #notifications-link,.site-header .header-actions #account-link{display:none}
  .site-header .mobile-cart-link{display:flex;align-items:center;justify-content:center;position:relative;width:32px;height:40px;font-size:27px;color:#555}
  body:not(.member-signed-in) .site-header .mobile-cart-link{display:none}
  body:not(.member-signed-in) .site-header .header-actions #account-link{display:flex;width:32px;height:40px;align-items:center;justify-content:center;color:#888}
  .mobile-cart-link span{position:absolute;right:-2px;top:1px;background:#333;color:white;border-radius:12px;min-width:16px;padding:0 4px;font-size:9px;text-align:center;line-height:16px}
  .mobile-cart-link span[hidden]{display:none}
  .site-header .main-nav,.member-view .site-header .main-nav{grid-column:1/-1;grid-row:2;order:initial;display:flex;align-items:stretch;gap:17px;height:40px;width:calc(100% + 24px);max-width:none;margin:0 -12px;padding:0 12px;overflow-x:auto;scrollbar-width:none;border-top:1px solid #f7f7f7;font-size:11px;line-height:17px;font-weight:400;justify-content:flex-start}
  .site-header .main-nav::-webkit-scrollbar{display:none}
  .site-header .main-nav>a{padding:12px 0 10px;flex-shrink:0;white-space:nowrap}
  .site-header .main-nav>a[aria-current]{border-bottom:1px solid #222;color:#222}
  .site-header .main-nav>a[aria-current]:after{display:none}
  .site-header .main-nav small{top:2px;font-size:5px;line-height:7px}
  .benefit-strip>div{min-height:49px;padding:7px 12px;gap:12px}
  .benefit-strip strong{font-size:11px;line-height:1.5}
  .member-benefit>div{min-height:54px;padding:6px 32px}
  .member-benefit strong{font-size:12px}
  .member-benefit #benefit-close{top:13px}
  .environment{white-space:normal;line-height:13px;min-height:20px;font-size:8px;padding:4px 8px}
  main{padding-right:12px;padding-left:12px}
  .bleed{width:100%;margin-left:0;margin-right:0}
  body[data-screen=home] .ref-hero,body[data-screen=pass] .ref-promo-hero,.ref-fortune,.ref-night.bleed,.ref-invite-hero{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px}
  .ref-hero{height:auto;aspect-ratio:5/3;max-height:none;min-height:0}
  .ref-hero img{width:100%;height:100%;object-fit:cover}
  .ref-notice-line{height:43px;gap:8px;font-size:10px}
  .ref-delivery{margin:12px -4px 0;padding:10px;border-radius:5px;font-size:10px;line-height:1.5}
  .ref-home-section{margin-top:45px}
  .ref-home-section .section-head{margin-bottom:20px}
  .ref-home-section .section-head h2{font-size:15px;font-weight:500}
  .ref-carousel .ref-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none;gap:24px 8px}
  .ref-carousel .ref-box-card{width:auto}
  #home-boxes .ref-box-card:has(a[href="/boxes/bronze/"]){order:-1}
  .ref-slide{display:none}
  .ref-box-grid{gap:24px 14px}
  .ref-box-card h3{font-size:12px;margin:9px 0 3px}
  .ref-box-card p{font-size:9px;min-height:0;line-height:1.5;margin-bottom:4px}
  .ref-box-card strong{font-size:13px}
  .ref-mini-banner{margin:15px -12px 20px;min-height:0;height:auto;aspect-ratio:5/2}
  .ref-mini-banner img{width:100%;height:100%;min-height:0;object-fit:contain}
  .ref-pass-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ref-promo-hero{max-height:none;height:auto;aspect-ratio:5/6;object-fit:cover}
  .ref-pass-grid article{padding:12px 8px}
  .ref-framed{padding:24px 12px;margin:35px 0;border-radius:10px}
  .ref-calendar{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .ref-calendar>div{font-size:9px;padding:8px 2px}
  .ref-calendar small{font-size:7px}
  .ref-fortune{aspect-ratio:2/3;min-height:0}
  .ref-fortune>img{object-fit:contain}
  .ref-fortune #fortune-open{left:18%;top:45%;width:64%;height:43%;padding-bottom:8px}
  .ref-night:not(.ref-tutorial-open){min-height:485px}
  body[data-screen=ranking] .ref-night>div{padding:125px 12px 65px}
  body[data-screen=ranking] .ref-night h1{font-size:20px}
  .ref-ranking-tabs{margin-top:-50px;border-radius:10px}
  .ref-ranking-tabs button{flex-direction:column;gap:5px;padding:13px 5px;font-size:10px}
  .ref-ranking-tabs .ph{font-size:29px}
  .detail-layout{gap:25px}
  .detail-image{border-radius:0}
  .detail-layout .page-title,.ref-pending-detail h1{font-size:21px}
  .ref-product-story{margin:50px 0;width:100%}
  .ref-tutorial{margin:0 -12px}
  .ref-board{margin-top:25px}
  .ref-board>h1{font-size:20px;margin-bottom:60px}
  .ref-faq-tabs{display:none}
  .ref-faq-select{display:block;width:100%;height:34px;border:1px solid #e5e5e5;border-radius:3px;background:#f1f1f1;text-align:center;font-size:11px;padding:6px 12px;margin-bottom:15px}
  #faq-rows summary{min-height:49px;padding:15px 10px;font-size:10px;gap:10px}
  #faq-rows summary span{min-width:53px;font-size:10px}
  .ref-auth.narrow{width:100%;margin:55px auto 15px;max-width:340px}
  .ref-auth .auth-heading{margin-bottom:48px}
  .ref-auth .auth-heading h1{font-size:25px}
  .ref-auth .form input:not([type=checkbox]){min-height:44px}
  .ref-social-preparing button{min-height:40px}
  .site-footer,.member-view .site-footer{max-width:none;margin:15px 0 0;padding:24px 12px 38px;border-top:1px solid #eee}
  .site-footer .footer-columns,.member-view .footer-columns{display:grid;grid-template-columns:1fr;gap:44px;padding:0 0 38px;margin:0;border:0}
  .footer-columns section:first-child>.brand{display:none}
  .footer-columns section>a.footer-support{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#ffe500;color:#111;width:164px;height:33px;margin:0 0 12px;font-size:11px;border-radius:3px}
  .footer-support .ph{font-size:17px}
  .footer-columns p{font-size:10px;line-height:1.9;margin:2px 0}
  .footer-columns h2{font-size:12px;font-weight:600;margin:0 0 15px}
  .footer-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .footer-links a{padding:6px 2px;font-size:11px;line-height:16px}
  .footer-columns section>a.footer-mobile{display:none}
  .footer-app-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .footer-app-options button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #eee;border-radius:3px;height:42px;background:white;color:#555;padding:5px;font:inherit}
  .footer-app-options .ph{font-size:25px;color:#777}
  .footer-app-options span{font-size:12px;font-weight:600;line-height:1.1;text-align:left}
  .footer-app-options small{display:block;font-size:8px;font-weight:400;margin-bottom:3px;color:#999}
  .site-footer .footer-bottom{display:grid;grid-template-columns:auto auto 1fr;gap:15px;margin:0 -12px 28px;padding:25px 12px 0;border-top:1px solid #eee;font-size:10px}
  .footer-bottom>a:last-child{display:none}
  .site-footer>p{line-height:1.9;margin:3px 0;font-size:10px}
  .site-footer>small{font-size:9px}
  .mobile-tabs{padding:5px 8px max(6px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:white;box-shadow:0 -2px 6px #0000000a}
  .mobile-tabs a{min-height:43px;gap:3px;font-size:8px;font-weight:400;color:#999}
  .mobile-tabs .ph{font-size:24px}
  .mobile-tabs a[aria-current]{color:#55bddc;font-weight:500}
  body.member-view{padding-bottom:0}
  .member-view .mobile-tabs{display:none}
  .member-view.menu-is-open .mobile-tabs{display:grid}
  .member-view main{padding-top:24px;min-height:385px}
  .member-wallet{padding-top:9px;padding-bottom:7px;font-size:11px}
  .member-recent{margin-top:34px}
  .member-recent h1{font-size:18px;margin-bottom:10px}
  .member-order{padding:15px 12px;gap:13px;min-height:85px}
  .member-order-photo{width:49px;height:49px}
  .member-order-info h3{font-size:12px;font-weight:400;margin-bottom:7px}
  .member-order-meta{font-size:11px;line-height:1.5;gap:1px 5px}
  .member-heading h1{font-size:19px;font-weight:400}
  body[data-screen=account] main{padding-bottom:95px}
  body[data-screen=orders] .member-heading,body[data-screen=refunds] .member-heading{margin-bottom:5px}
  .member-filter{position:relative;padding:12px 0;gap:16px}
  .member-filter label{width:calc((100% - 16px)/2)}
  .member-filter>a{font-size:9px;line-height:1.3}
  .member-cart .member-heading{margin:19px 0 45px}
  .member-cart-toolbar{padding-bottom:5px}
  .member-cart-row{padding:12px 20px;min-height:108px}
  .member-cart-row p{margin:3px 0;line-height:1.4}
  .member-cart-totals{margin:4px 0;padding-top:6px}
  .member-cart-totals>div{margin:4px 0;font-size:11px}
  .member-cart-totals .total{padding-top:14px;margin-top:14px}
  .member-cart form{margin-top:16px}
  .member-cart form>.member-count{display:block;font-size:9px;margin:0;line-height:1.5}
  .member-cart form>.member-black{margin-top:16px;height:41px;padding:10px}
  .member-cart>p.member-count{font-size:9px;margin-top:12px}
  .member-entry .member-heading{margin-top:20px}
  .member-entry .member-policy{min-height:110px}
  .member-consent{margin-top:41px;margin-bottom:90px}
  #member-box-section{margin-top:38px}
  #member-item-section{margin-top:85px}
  .member-inventory-title{font-size:16px}
  .member-boxes article{max-width:145px}
  .member-inventory-policy{margin-top:80px}
  .menu-drawer{width:245px;max-width:calc(100vw - 60px);padding:12px 12px 75px}
  .drawer-head{margin-bottom:15px}
  .drawer-head h2{font-size:14px}
  .drawer-shortcuts{gap:2px}
  .drawer-shortcuts a{font-size:9px}
  .menu-drawer summary{font-size:15px;padding:14px 4px}
  .member-drawer-extra{gap:23px;padding:0 4px;font-size:12px}
}
@media(min-width:768px){.site-footer .footer-columns section>.footer-support{display:none}}
@media(max-width:767px){
  body[data-screen=pass] .ref-framed{border-color:#b9d9e8;background:#fcfdff;box-shadow:0 0 4px #a9d4e2}
  .ref-promo-hero+.ref-framed{position:relative;margin-top:-15px}
  body[data-screen=pass] .ref-framed>h2{width:90%;margin:-38px auto 25px;border-radius:24px;background:#82c4fb;color:#fff;padding:7px 8px;font-size:16px}
}

@media(max-width:767px){.ref-promo-hero>img{width:100%;height:100%;object-fit:contain}.ref-night.ref-fortune{min-height:0}.ref-night.ref-fortune>div{padding:0}}
@media(min-width:375px) and (max-width:767px){
  .site-header,.member-view .site-header,.site-header:has(#notifications-link:not([hidden])){grid-template-rows:60px 49px;height:109px;padding:0 15px}
  .site-header .brand,.member-view .site-header .brand{font-size:37px}
  .site-header .brand-name{font-size:6.5px;letter-spacing:3.4px}
  .site-header .main-nav,.member-view .site-header .main-nav{height:49px;width:calc(100% + 30px);margin:0 -15px;padding:0 15px;gap:20px;font-size:13px;line-height:20px}
  .site-header .main-nav>a{padding-top:16px}
  .site-header .main-nav small{font-size:6px;top:5px}
  .benefit-strip>div{min-height:60px}
  .benefit-strip strong{font-size:13px}
  .member-benefit>div{min-height:65px}
  .member-benefit #benefit-close{top:18px}
  .ref-box-card h3{font-size:14px}
  .ref-box-card p{font-size:11px}
  .ref-box-card strong{font-size:15px}
  .ref-home-section .section-head h2{font-size:17px}
  .ref-notice-line{height:50px;font-size:12px}
  .ref-delivery{font-size:12px}
  .ref-pass-grid h3{font-size:13px}
  .ref-pass-grid p,.ref-pass-grid small{font-size:11px}
  .ref-night:not(.ref-tutorial-open):not(.ref-fortune){min-height:595px}
  body[data-screen=ranking] .ref-night>div{padding-top:155px}
  .ref-ranking-tabs button{font-size:12px}
  .ref-ranking-tabs .ph{font-size:34px}
  .ref-faq-select{height:40px;font-size:13px}
  #faq-rows summary{font-size:12px;min-height:60px}
  #faq-rows summary span{font-size:12px;min-width:65px}
  .footer-columns p,.site-footer>p{font-size:11px}
  .footer-columns section>a.footer-support{width:200px;height:40px;font-size:13px}
  .footer-links a{font-size:12px}
  .member-order-info h3{font-size:14px}
  .member-order-meta{font-size:12px}
}