/* Shared device refinements. Loaded last so the original desktop design stays intact. */
.nav-toggle{display:none}
.rg__swipe,.rg__pagination{display:none}
.mobile-menu{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100%);max-width:100%;height:100%;height:100dvh;max-height:100dvh;padding:0;border:0;background:#F7F7F2;color:#111;overflow:auto;overscroll-behavior:contain;font-family:"Figtree",var(--font)}
.mobile-menu::backdrop{background:rgba(17,17,17,.4);backdrop-filter:blur(7px)}
.mobile-menu[open]{display:flex;flex-direction:column;animation:mobile-menu-in .3s cubic-bezier(.22,.61,.36,1)}
.mobile-menu__head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #DDDDD6}
.mobile-menu__brand{color:inherit}
.mobile-menu__brand .wordmark{height:30px;width:auto;display:block}
.mobile-menu__close,.nav-toggle{align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #E1E1DB;border-radius:14px;background:#F3F3EF;color:#111;cursor:pointer}
.menu-glyph{position:relative;display:block;width:20px;height:16px}
.menu-glyph::before,.menu-glyph::after{content:"";position:absolute;height:1.7px;background:currentColor;border-radius:2px;transition:transform .25s,width .25s;left:0}
.menu-glyph::before{width:20px;top:4px}
.menu-glyph::after{width:13px;top:11px}
.nav-toggle:hover .menu-glyph::after{width:20px}
.nav-toggle[aria-expanded="true"] .menu-glyph::before,.mobile-menu__close .menu-glyph::before{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .menu-glyph::after,.mobile-menu__close .menu-glyph::after{width:20px;transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu__close{display:flex;background:transparent;border-color:#D6D6CF}
.mobile-menu__body{padding:28px 24px 24px;flex:1}
.mobile-menu__eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#6B6B62;margin-bottom:14px}
.mobile-menu__links{list-style:none}
.mobile-menu__links li{border-bottom:1px solid #DDDDD6}
.mobile-menu__links a{display:grid;grid-template-columns:24px 1fr 22px;gap:12px;align-items:center;min-height:68px;padding:14px 0;text-decoration:none;color:inherit;font-size:clamp(22px,5.8vw,28px);letter-spacing:-.045em}
.mobile-menu__links a:hover,.mobile-menu__links a[aria-current="page"]{color:#526021}
.mobile-menu__number{font-size:10px;letter-spacing:0;color:#838379}
.mobile-menu__links svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s}
.mobile-menu__links a:hover svg{transform:translate(2px,-2px)}
.mobile-menu__feature{display:flex;align-items:center;gap:16px;margin-top:26px;padding:18px;border-radius:16px;background:#E8EBCF;color:#111;text-decoration:none}
.mobile-menu__feature img{width:56px;height:90px;object-fit:contain;flex:none;transform:rotate(8deg)}
.mobile-menu__feature b{display:block;font-size:18px;font-weight:500;letter-spacing:-.035em}
.mobile-menu__feature small{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#51563B}
.mobile-menu__feature span span{display:inline-block;margin-top:12px;font-size:12px;border-bottom:1px solid;padding-bottom:3px}
.mobile-menu__foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:20px 24px max(24px,env(safe-area-inset-bottom));border-top:1px solid #DDDDD6}
.mobile-menu__foot button{min-height:48px;border:1px solid #D6D6CF;border-radius:12px;background:transparent;font:500 13px "Figtree",var(--font);cursor:pointer;color:#111}
.mobile-menu__foot button:hover{background:#EAEAE2}
.mobile-menu :focus-visible,.nav-toggle:focus-visible{outline:2px solid #526021;outline-offset:4px}
@keyframes mobile-menu-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

/* Flexible grid children prevent long content from widening their entire page. */
:where(.pd-top,.fo-hero,.fo-scale,.fo-exp,.fo-comp,.rw-hero,.rw-sim,.rw-ref,.ab-hero,.ab-rules,.ft__top,.fn__grid)>*{min-width:0}
.fo-anat{overflow:hidden;overflow:clip}
.fo-anat__halo{max-width:100%}
.pd-crumbs,.art-crumbs{flex-wrap:wrap}
.fo-sources a,.art-sources a{overflow-wrap:anywhere}
.drawer__body{min-height:0;overscroll-behavior:contain}
.drawer{height:100dvh}

@media (max-width:1000px){
  /* Keep the decorative glow contained after the sticky card stacks on mobile. */
  .fo-not{position:relative;top:auto}
}

@media (max-width:1100px){
  .phead .nav{grid-template-columns:1fr auto 1fr;gap:8px;height:64px;padding:0 10px}
  .phead .nav__links,.phead .menu{display:none}
  .phead .nav-toggle{display:flex;justify-self:start}
  .phead .nav__logo{justify-self:center}
  .phead .nav__right{gap:2px;margin:0;justify-self:end}
  .phead .nav__right>a{width:44px;height:44px}
  .phead .nav__right>[data-panel="account"]{display:none}
  .phead .cart__count{top:1px;right:0}
  .phead .nav__logo .wordmark{height:28px}
  .cta__card{max-width:100%}
}
@media (max-width:860px){
  .rg__title{font-size:clamp(28px,7.8vw,34px);text-align:center}
  .rg__tag{max-width:340px;margin:10px auto 0;padding:0;line-height:1.65;letter-spacing:.22em;text-align:center}
  .rg__tabs{display:flex;width:fit-content;max-width:100%;margin:24px auto 0}
  .rg__track{grid-template-columns:repeat(3,100%);gap:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .rg__track::-webkit-scrollbar{display:none}
  .rg__card{min-width:0;text-align:center;scroll-snap-stop:always}
  .rg__tags{max-width:280px}
  .rg__swipe{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;min-height:44px;margin:22px auto 0;padding:10px 15px;border:1px solid #E5E5DE;border-radius:999px;background:#F7F7F2;color:#555;font:400 12px "Figtree",var(--font);cursor:pointer}
  .rg__swipe svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:swipe-cue 2.4s ease-in-out infinite;animation-play-state:paused}
  .rg__swipe.is-visible svg{animation-play-state:running}
  .rg__swipe.is-used svg{animation:none}
  .rg__swipe b{padding-left:10px;border-left:1px solid #DADAD2;font-size:10px;font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .rg__swipe:focus-visible,.rg__pagination button:focus-visible{outline:2px solid #526021;outline-offset:3px}
  .rg__pagination{display:flex;justify-content:center;gap:0;margin-top:10px}
  .rg__pagination button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer}
  .rg__pagination button::after{content:"";width:6px;height:6px;border-radius:999px;background:#D4D4CD;transition:width .25s,background .25s}
  .rg__pagination button[aria-current="true"]::after{width:22px;background:#111}
  .rg__all{margin-top:12px}
  .ft__side{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 0 0;border-top:1px solid rgba(255,255,255,.14)}
  .ft__copy{margin:0;line-height:1.6}
  .ft__tag{max-width:32ch;margin:12px auto 0;letter-spacing:.22em}
  .ft__cert{flex-direction:column;justify-content:center;gap:12px;margin-top:24px}
  .ft__cert-txt{max-width:240px;line-height:1.6}
  .phead{padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .hero__actions,.ab-hero__cta,.ab-end__cta,.rw-hero__cta,.fn__actions{flex-wrap:wrap;gap:16px}
  .hero__cta,.ab-btn,.jr-btn,.fn__buy{min-height:46px;height:auto;padding-top:12px;padding-bottom:12px}
  .hero__title{font-size:clamp(42px,8vw,64px)}
  .hero__eyebrow{line-height:1.6}
  .fn__benefits b{font-size:14px}
  .fn__benefits p{font-size:13px;line-height:1.6}
  .fn__when button{min-height:44px;height:auto;padding:8px;font-size:13px}
  .fn__nav button,.rg__arrow,.pd-arrow{width:44px;height:44px}
  .fn__tabs button,.rg__tabs button,.pd-formula button,.fo-flav button,.rw-switch button{min-height:44px;height:auto}
  .fo-flav,.rw-switch{max-width:100%;flex-wrap:wrap;border-radius:22px}
  .fo-exp__tabs{max-width:100%;overscroll-behavior-x:contain}
  .pd-plan__name{flex-wrap:wrap;min-width:0}
  .pd-plan__every{flex-wrap:wrap}
  .pd-plan__every select{max-width:100%;min-height:44px;height:auto}
  .pd-qty button{width:44px}
  .qty button,.modal__close,.fld__eye{width:44px;height:44px}
  .line__rm,.search__chips button{min-height:44px}
  .drawer__foot{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .ft__top{padding-bottom:36px}
  .ft__cols{gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft__col ul{gap:3px;margin-top:12px}
  .ft__col a{display:inline-flex;align-items:center;min-height:44px}
  .ft__social{gap:16px}
  .ft__social a{min-width:44px;min-height:44px;display:grid;place-items:center}
  .ft__tag{white-space:normal;line-height:1.8}
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
}
@media (max-width:480px){
  .phead .nav{gap:4px;padding:0 8px}
  .phead .nav__logo .wordmark{height:25px}
  .hero__actions{align-items:flex-start;flex-direction:column}
  .hero__copy{padding:28px 20px 36px}
  .fn__actions{gap:12px}
  .fn__all{font-size:11px}
  .fn__actifs li{padding-left:8px;padding-right:8px}
  .pd-buy{flex-wrap:wrap}
  .pd-add{flex-basis:100%;gap:12px}
  .pd-qty{width:132px;justify-content:space-between}
  .pd-flavs{gap:5px}
  .pd-flav{padding-left:4px;padding-right:4px}
  .pd-flav__name{font-size:12px;gap:4px}
  .pd-plan__row{padding:14px 10px;gap:8px}
  .pd-plan__price{font-size:13px}
  .pd-why{gap:12px}
  .pd-why img{width:64px;height:76px}
  .fo-flav{display:flex;gap:3px;padding:4px}
  .fo-flav button{flex:1;justify-content:center;padding:0 9px;font-size:12px;gap:5px}
  .fo-call{width:82px}
  .fo-call span{font-size:9px;letter-spacing:.07em}
  .fo-anat__stick{max-width:36%;object-fit:contain}
  .ab-sec,.fo-sec,.ab-origin,.rw-ref{margin-top:64px}
  .ab-end__cta{align-items:flex-start;flex-direction:column}
  .rw-card{padding:22px;min-height:190px}
  .rw-sim__in,.rw-sim__out{padding:24px 18px}
  .rw-ref{padding:24px 16px}
  .rw-code{padding:18px 12px}
  .rw-code__box{padding-left:10px;gap:8px}
  .rw-code__box b{font-size:16px;letter-spacing:.06em}
  .rw-rew li{grid-template-columns:52px minmax(0,1fr) 20px;gap:4px 8px}
  .art-related__head{flex-wrap:wrap}
  .jr-news__form,.rg__soon-form{flex-wrap:wrap;height:auto;border-radius:18px;gap:8px;padding:6px}
  .jr-news__form input,.rg__soon-form input{height:44px;flex-basis:150px;padding:0 12px}
  .jr-news__form button,.rg__soon-form button{min-height:44px;justify-content:center;flex-grow:1}
  .ft__form{height:auto;min-height:54px;border-radius:18px;flex-wrap:wrap;gap:8px;padding:6px}
  .ft__form input{height:44px;flex-basis:150px;padding:0 12px}
  .ft__form button{min-height:44px;justify-content:center;flex-grow:1}
  .drawer__close{width:44px;height:44px}
  .line{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .line__img{width:64px;height:82px}
  .line__end{grid-column:2;flex-direction:row;align-items:center;gap:12px}
  .search__results a{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:10px}
  .search__results .thumb{width:44px}
}
@media (prefers-reduced-motion:reduce){
  .rg__swipe svg{animation:none}
  .rg__pagination button::after{transition:none}
  .mobile-menu[open]{animation:none}
  .menu-glyph::before,.menu-glyph::after,.mobile-menu__links svg{transition:none}
}
@keyframes swipe-cue{0%,15%,70%,100%{transform:translateX(3px);opacity:.55}40%{transform:translateX(-4px);opacity:1}}
