/* Final responsive polish layer: mobile-first fixes without changing the visual identity. */
:root{
  --tap-size:48px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}
*,*::before,*::after{min-width:0;}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:clip;max-width:100vw;}
main,.site-shell,.container{min-width:0;}
a,button,input,select,textarea{touch-action:manipulation;}
button,.btn,.lang-switch,.cart-icon-btn,.floating-cart,.nav-toggle{min-height:var(--tap-size);}
input,select,textarea{max-width:100%;}
p,h1,h2,h3,h4,span,strong,small,a,button,label{overflow-wrap:anywhere;}
img,svg,video,canvas{max-width:100%;}
.bean-canvas{height:100dvh;}
body.nav-open,html.modal-lock{overflow:hidden;overscroll-behavior:none;}
body.nav-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:91;
  background:rgba(28,18,10,.28);
  backdrop-filter:blur(4px);
}
.site-header,.announcement-modern,.cart-modal,.messages,.floating-cart{isolation:isolate;}
.nav-toggle:focus-visible,.cart-icon-btn:focus-visible,.floating-cart:focus-visible,.lang-switch:focus-visible,.btn:focus-visible,.message-close:focus-visible{outline:3px solid rgba(109,75,131,.38);outline-offset:3px;}

/* Timed toast messages */
.messages{
  position:fixed;
  z-index:1200;
  inset:auto 0 auto 0;
  top:calc(96px + var(--safe-top));
  display:grid;
  gap:10px;
  pointer-events:none;
}
.message{
  pointer-events:auto;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  width:min(430px,100%);
  margin-inline-start:auto;
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,250,242,.94);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 18px 48px rgba(34,20,11,.18);
  transform-origin:top;
  animation:toastIn .34s var(--ease) both;
}
.message.success,.message.error,.message.warning,.message.info{border-left:1px solid rgba(255,255,255,.78);border-right:1px solid rgba(255,255,255,.78);}
.message.success{border-inline-start:4px solid var(--green);}
.message.error{border-inline-start:4px solid #b7372d;}
.message.warning{border-inline-start:4px solid #d9951d;}
.message.info{border-inline-start:4px solid var(--purple);}
.message-text{line-height:1.7;}
.message-close{
  width:34px;
  height:34px;
  min-height:34px;
  border:0;
  border-radius:999px;
  background:rgba(32,61,45,.08);
  color:var(--green);
  font-weight:950;
  cursor:pointer;
}
.message-timer{
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--green),var(--coffee),var(--purple));
  transform-origin:left center;
  animation:toastTimer var(--toast-duration,5.2s) linear forwards;
}
.rtl .message-timer{transform-origin:right center;}
.message.is-paused .message-timer{animation-play-state:paused;}
.message.is-leaving{animation:toastOut .28s var(--ease) forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96);filter:blur(4px)}}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Header/navigation precision */
.header-wrap{max-width:100%;}
.main-nav{z-index:94;}
.main-nav a{white-space:nowrap;}
.header-actions{flex:0 0 auto;}
.brand-modern{min-width:0;}
.brand-copy{min-width:0;}
.brand-copy strong,.brand-copy small{min-width:0;}

/* Product/card behavior */
.product-card,.motion-card,.blog-card,.category-orb,.brand-note,.track-card,.contact-card,.glass-panel,.cart-summary,.order-summary{backface-visibility:hidden;}
.product-grid,.blog-grid,.brand-notes,.track-grid,.recovered-orders-grid,.motion-strip,.category-orbits{align-items:stretch;}
.product-card{height:100%;}
.product-body{min-height:0;}
.product-actions{min-width:0;}
.quick-add-form{min-width:0;}
.quick-add-btn{white-space:normal;}
.price-row strong,.summary-total strong,.modal-total b{white-space:normal;text-align:end;}
.filters-card,.panel-form,.contact-card,.detail-info,.cart-summary,.order-summary,.footer-card{max-width:100%;}
.panel-form label{min-width:0;}
.panel-form input,.panel-form select,.panel-form textarea,.filters-form input,.filters-form select{width:100%;}

/* Cart modal/base */
.cart-modal{z-index:1100;}
.cart-panel{display:flex;flex-direction:column;max-width:calc(100vw - 24px);}
.cart-panel-head,.cart-panel-foot{flex:0 0 auto;}
.cart-panel-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.cart-modal-item{min-width:0;}
.cart-modal-info{min-width:0;}
.cart-modal-info strong,.cart-modal-info small{display:block;overflow:hidden;text-overflow:ellipsis;}
.cart-modal-note{width:100%;min-height:42px;}
.cart-panel-foot{padding-bottom:max(18px,calc(14px + var(--safe-bottom)));background:linear-gradient(180deg,rgba(255,250,241,.86),rgba(255,250,241,.98));}
.floating-cart{z-index:1000;}
.cart-modal.is-open ~ .floating-cart{opacity:0;pointer-events:none;}
.cart-fly{will-change:transform,opacity;}

@media (min-width:1021px){
  .main-nav{max-width:min(58vw,680px);overflow:hidden;}
  .main-nav a{padding-inline:clamp(10px,1vw,15px);}
}

@media (max-width:1180px){
  .container{width:min(100% - 30px,1040px);}
  .header-wrap{gap:10px;}
  .brand-modern{min-width:150px;}
  .brand-copy small{max-width:120px;}
  .main-nav a{font-size:.84rem;padding-inline:11px;}
}

@media (max-width:1020px){
  .container{width:calc(100% - 28px);}
  .header-wrap{position:relative;z-index:95;}
  .nav-toggle{display:grid;place-items:center;align-content:center;}
  .main-nav{
    position:fixed;
    top:calc(82px + var(--safe-top));
    left:14px;
    right:14px;
    max-height:min(calc(100dvh - 106px),520px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
    border-radius:28px;
    background:rgba(255,248,236,.96);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 28px 90px rgba(30,18,10,.28);
    backdrop-filter:blur(24px);
    transform:translateY(-16px) scale(.98);
    opacity:0;
    pointer-events:none;
  }
  .main-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .main-nav:before{display:none;}
  .main-nav a{
    white-space:normal;
    min-height:52px;
    border-radius:18px;
    background:rgba(255,255,255,.66);
    border:1px solid rgba(32,61,45,.08);
  }
  .site-header.is-scrolled .main-nav{top:calc(72px + var(--safe-top));}
  .hero-cinema-grid{gap:28px;}
  .hero-copy{max-width:720px;}
  .hero-stage{overflow:hidden;}
  .motion-strip,.product-grid,.blog-grid,.brand-notes,.track-grid,.recovered-orders-grid{gap:18px;}
  .product-card,.blog-card,.brand-note,.track-card{border-radius:28px;}
  .checkout-grid,.order-track-modern,.product-detail-grid,.cart-layout,.contact-grid,.roast-story-grid,.about-block{gap:20px;}
  .order-summary,.cart-summary,.detail-info,.detail-gallery{position:relative!important;top:auto!important;}
}

@media (max-width:840px){
  .section-head{display:grid;justify-items:center;text-align:center;}
  .section-head .btn,.section-head .text-link{width:100%;justify-content:center;}
  .product-grid,.blog-grid,.brand-notes,.track-grid,.recovered-orders-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .order-track-modern{grid-template-columns:1fr;}
  .contact-grid,.checkout-grid,.cart-layout,.product-detail-grid{grid-template-columns:1fr;}
  .footer-main,.footer-links{display:grid;grid-template-columns:1fr;}
  .footer-bottom{display:grid;text-align:center;justify-items:center;}
  .gallery-main{min-height:0;}
}

@media (max-width:760px){
  :root{--tap-size:48px;--radius:22px;--radius-sm:15px;}
  body{background-attachment:scroll;}
  .noise-layer{opacity:.10;}
  .bean-canvas{opacity:.28;}
  .ambient{opacity:.24;filter:blur(44px);}
  .container{width:calc(100% - 22px);}
  .announcement-modern{padding-block:8px;}
  .announcement-inner{min-height:25px;gap:8px;}
  .announcement-icon{width:24px;height:24px;flex:0 0 24px;}
  .announcement-item{font-size:.8rem;line-height:1.7;}
  .site-header{top:0;padding:7px 0;}
  .header-wrap{padding:7px;border-radius:22px;gap:6px;}
  .brand-modern{gap:8px;min-width:0;flex:1 1 auto;}
  .brand-logo,.brand-mark{width:40px;height:40px;border-radius:14px;flex:0 0 40px;}
  .brand-copy strong{display:block;max-width:38vw;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand-copy small{display:none;}
  .header-actions{gap:6px;}
  .lang-switch,.cart-icon-btn,.nav-toggle{width:42px;min-width:42px;height:42px;min-height:42px;}
  .nav-toggle{padding:13px;}
  .cart-icon-btn b,.floating-cart b{min-width:20px;height:20px;font-size:.68rem;}
  .main-nav{
    top:calc(72px + var(--safe-top));
    left:11px;
    right:11px;
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
    border-radius:24px;
    max-height:calc(100dvh - 94px - var(--safe-bottom));
  }
  .site-header.is-scrolled .main-nav{top:calc(66px + var(--safe-top));}
  .main-nav a{min-height:48px;font-size:.95rem;}
  .messages{
    top:calc(74px + var(--safe-top));
    width:100%;
    padding-inline:11px;
  }
  .message{
    width:100%;
    margin-inline:auto;
    border-radius:18px;
    padding:12px 13px;
    font-size:.91rem;
  }
  .message-close{width:32px;height:32px;min-height:32px;}
  .section-pad{padding-block:56px;}
  .section-pad.slim{padding-block:42px;}
  .section-pad.compact{padding-block:32px;}
  .page-hero{padding-top:52px!important;padding-bottom:38px!important;text-align:center;}
  .page-hero .eyebrow,.hero-kicker,.eyebrow{justify-content:center;}
  .hero-cinema{padding-top:26px;padding-bottom:50px;min-height:auto;}
  .hero-cinema-grid{grid-template-columns:1fr;gap:18px;}
  .hero-stage{order:-1;min-height:clamp(265px,76vw,380px);}
  .hero-pack-wrap{width:min(260px,70vw);}
  .hero-product-img{max-height:285px;}
  .hero-chip{display:none!important;}
  .orbit-ring{opacity:.55;}
  .ring-a{width:82%;}
  .ring-b{width:56%;}
  .coffee-steam{transform:scale(.64);top:4px;}
  .bean-satellite{width:30px;height:20px;}
  .hero-copy{text-align:center;}
  .hero-copy h1,.page-hero h1{font-size:clamp(2.12rem,11.6vw,3.55rem);line-height:1.08;letter-spacing:-.025em;}
  .hero-copy p,.page-hero p,.section-head p{font-size:.94rem;line-height:1.9;}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px;}
  .hero-actions .btn{width:100%;min-height:50px;padding:13px 14px;}
  .hero-micro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;}
  .hero-micro span,.detail-chips span,.shipping-clean-list span{font-size:.78rem;padding:8px 10px;text-align:center;}
  .motion-strip{
    display:flex!important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:11px;
    gap:12px;
    padding:4px 11px 18px;
    margin-inline:-11px;
    transform:none!important;
  }
  .motion-strip::-webkit-scrollbar,.category-orbits::-webkit-scrollbar,.thumb-grid::-webkit-scrollbar{display:none;}
  .motion-card{flex:0 0 min(82vw,340px);min-height:260px;scroll-snap-align:center;border-radius:26px;}
  .motion-card img{height:185px;width:78%;}
  .motion-card h2{font-size:1.45rem;bottom:18px;}
  .motion-card span{font-size:1.35rem;top:18px;left:18px;}
  .category-orbits{
    display:flex!important;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:11px;
    gap:12px;
    padding:6px 11px 18px;
    margin-inline:-11px;
  }
  .category-orb{flex:0 0 42vw;scroll-snap-align:center;}
  .category-circle{width:min(132px,38vw);height:min(132px,38vw);}
  .product-grid,.blog-grid,.blog-grid.wide,.brand-notes,.track-grid,.recovered-orders-grid{grid-template-columns:1fr;gap:15px;}
  .product-card{border-radius:26px;}
  .product-media{aspect-ratio:1.15/1;}
  .product-media img{padding:15px;}
  .product-body{padding:16px;gap:10px;}
  .product-topline{display:grid;grid-template-columns:1fr auto;align-items:center;}
  .price-row{display:grid;grid-template-columns:1fr;gap:2px;}
  .price-row strong{text-align:start;}
  .boxed-actions,.product-actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .quick-add-form,.quick-add-btn,.product-actions .text-link{width:100%;justify-content:center;}
  .filters-card{padding:14px;border-radius:22px;}
  .filters-form{display:grid;grid-template-columns:1fr;gap:10px;}
  .filters-form input,.filters-form select,.filters-form button,.panel-form input,.panel-form select,.panel-form textarea,.cart-note input,.cart-modal-note{font-size:16px;min-height:var(--tap-size);}
  .form-row,.form-two-col{display:grid;grid-template-columns:1fr!important;gap:10px;}
  .panel-form,.contact-card,.detail-info,.cart-summary,.order-summary,.success-card,.order-main-panel,.order-side-panel,.track-card,.footer-card{padding:18px;border-radius:24px;}
  .product-detail-modern{padding-top:34px;}
  .gallery-main{border-radius:24px;}
  .main-product-image{max-height:310px;}
  .thumb-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;}
  .thumb-grid button{flex:0 0 74px;scroll-snap-align:center;}
  .detail-info h1{font-size:clamp(1.75rem,8vw,2.35rem);}
  .detail-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .add-cart-box{padding:14px;border-radius:22px;}
  .quantity-control,.quantity-control.mini{display:grid;gap:8px;}
  .quantity-control > div{justify-content:space-between;width:100%;}
  .quantity-control input{width:70px;}
  .detail-tabs{display:grid;gap:16px;}
  .spec-list div,.summary-line,.summary-total,.summary-total.large,.modal-total,.manage-item,.order-info-list div{display:grid;grid-template-columns:1fr;gap:4px;text-align:start;}
  .cart-layout{display:grid;gap:16px;}
  .cart-list{display:grid;gap:12px;}
  .cart-item{grid-template-columns:1fr!important;gap:14px;border-radius:24px;padding:14px;}
  .cart-product{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;}
  .cart-product img,.mini-placeholder{width:66px;height:66px;}
  .cart-note{display:grid;gap:8px;}
  .text-danger{width:100%;min-height:44px;}
  .cart-actions{display:grid;}
  .cart-actions .btn{width:100%;}
  .cart-panel,.rtl .cart-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:max(8px,var(--safe-bottom));
    width:auto;
    height:min(86dvh,690px);
    max-width:none;
    border-radius:28px 28px 24px 24px;
    transform:translateY(112%);
  }
  .cart-modal.is-open .cart-panel,.rtl .cart-modal.is-open .cart-panel{transform:translateY(0);}
  .cart-panel::before{
    content:"";
    width:44px;
    height:5px;
    border-radius:999px;
    background:rgba(32,61,45,.22);
    margin:10px auto 0;
    flex:0 0 auto;
  }
  .cart-panel-head{padding:12px 16px;}
  .cart-panel-head button{width:40px;height:40px;min-height:40px;}
  .cart-panel-body{padding:12px;}
  .cart-modal-item{grid-template-columns:60px 1fr;gap:10px;border-radius:20px;padding:10px;}
  .cart-modal-media img,.cart-modal-media b{width:60px;height:60px;border-radius:16px;}
  .cart-modal-side{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;justify-items:stretch;}
  .modal-qty{justify-self:start;}
  .modal-remove{justify-self:end;min-height:36px;}
  .floating-cart{right:14px;left:auto;bottom:calc(14px + var(--safe-bottom));width:54px;min-width:54px;height:54px;border:1px solid rgba(255,255,255,.8);}
  .rtl .floating-cart{left:14px;right:auto;}
  .blog-card img{height:190px;}
  .about-block{display:grid!important;grid-template-columns:1fr!important;gap:14px;padding:14px;border-radius:24px;}
  .about-block:nth-child(even){direction:inherit;}
  .about-block img,.image-placeholder.tall{height:230px;border-radius:20px;}
  .shipping-clean{display:grid;text-align:center;gap:16px;}
  .shipping-clean-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .footer-brand-block{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;}
  .footer-links a{min-height:38px;display:flex;align-items:center;justify-content:center;}
  .success-actions{display:grid;gap:10px;}
  .success-actions .btn{width:100%;}
  .status-timeline{grid-template-columns:repeat(2,minmax(0,1fr));}
  .track-card-head{display:grid;justify-items:center;text-align:center;}
  .track-card-head>span{margin:auto;}
}

@media (max-width:430px){
  .container{width:calc(100% - 18px);}
  .header-wrap{padding:6px;border-radius:20px;}
  .brand-logo,.brand-mark{width:38px;height:38px;}
  .brand-copy strong{max-width:31vw;font-size:.82rem;}
  .lang-switch,.cart-icon-btn,.nav-toggle{width:40px;min-width:40px;height:40px;min-height:40px;}
  .cart-icon-btn svg{width:19px;}
  .main-nav{left:9px;right:9px;top:calc(68px + var(--safe-top));}
  .hero-copy h1,.page-hero h1{font-size:clamp(2rem,10.6vw,3rem);}
  .hero-stage{min-height:250px;}
  .hero-pack-wrap{width:min(238px,67vw);}
  .hero-micro{grid-template-columns:1fr;}
  .motion-card{flex-basis:86vw;min-height:245px;}
  .motion-card img{height:170px;}
  .category-orb{flex-basis:47vw;}
  .detail-chips,.shipping-clean-list{grid-template-columns:1fr;}
  .cart-modal-item{grid-template-columns:54px 1fr;}
  .cart-modal-media img,.cart-modal-media b{width:54px;height:54px;}
  .modal-qty input{width:38px;}
}

@media (max-width:360px){
  .brand-copy{display:none;}
  .header-wrap{gap:5px;}
  .hero-copy h1,.page-hero h1{font-size:2.02rem;}
  .hero-pack-wrap{width:218px;}
  .category-orb{flex-basis:56vw;}
  .motion-card{flex-basis:90vw;}
  .footer-card{padding-inline:14px;}
}

@media (orientation:landscape) and (max-height:500px) and (max-width:930px){
  .announcement-modern{display:none;}
  .main-nav{top:62px;max-height:calc(100dvh - 70px);grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero-cinema{padding-top:18px;}
  .hero-stage{min-height:220px;}
  .hero-pack-wrap{width:210px;}
  .messages{top:66px;}
  .cart-panel,.rtl .cart-panel{height:calc(100dvh - 18px);}
}

@media (hover:none),(pointer:coarse){
  [data-tilt],.magnetic,.tilt-active{transform:none!important;will-change:auto!important;}
  .cursor-orb{display:none!important;}
  .product-card:hover,.motion-card:hover,.blog-card:hover{transform:none!important;}
  .btn:hover{transform:none!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important;}
  .message-timer{animation:none!important;transform:scaleX(0);}
}
@supports selector(body:has(.cart-modal.is-open)){
  body:has(.cart-modal.is-open) .floating-cart{opacity:0;pointer-events:none;transform:translateY(14px) scale(.92);}
}

/* Mobile navigation hotfix: clear hamburger icon, no full-page blur, stable stacked panel. */
.nav-toggle{
  position:relative;
  place-items:center;
  align-content:center;
  justify-content:center;
  gap:4.5px;
  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,var(--green),#25543d 54%,var(--coffee))!important;
  box-shadow:0 14px 34px rgba(31,20,12,.18),inset 0 1px 0 rgba(255,255,255,.22)!important;
  color:#fff;
  flex:0 0 auto;
  overflow:hidden;
}
.nav-toggle::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.34),transparent 34%);
  opacity:.8;
  pointer-events:none;
}
.nav-toggle .nav-line,.nav-toggle span{
  position:relative;
  display:block!important;
  width:21px!important;
  height:2.4px!important;
  min-width:21px!important;
  max-width:21px!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 1px 8px rgba(0,0,0,.16);
  opacity:1;
  transform:none;
  transition:transform .24s var(--ease),opacity .18s var(--ease),width .2s var(--ease);
}
.nav-toggle .nav-line:nth-child(2),.nav-toggle span:nth-child(2){width:16px!important;min-width:16px!important;max-width:16px!important;}
.nav-toggle.is-active .nav-line:nth-child(1),.nav-toggle.is-active span:nth-child(1){transform:translateY(6.9px) rotate(45deg)!important;}
.nav-toggle.is-active .nav-line:nth-child(2),.nav-toggle.is-active span:nth-child(2){opacity:0!important;transform:scaleX(.1)!important;}
.nav-toggle.is-active .nav-line:nth-child(3),.nav-toggle.is-active span:nth-child(3){transform:translateY(-6.9px) rotate(-45deg)!important;}
body.nav-open::before{
  z-index:80!important;
  background:rgba(28,18,10,.10)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.site-header{z-index:1000!important;}
.header-wrap{position:relative;z-index:1002!important;}
.main-nav{z-index:1001!important;}
@media (max-width:1020px){
  .main-nav{
    top:calc(84px + var(--safe-top))!important;
    left:max(12px,env(safe-area-inset-left,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px) scale(.985)!important;
    filter:none!important;
  }
  .main-nav.is-open{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
    filter:none!important;
  }
  .main-nav a{filter:none!important;}
}
@media (max-width:760px){
  .nav-toggle{width:42px;min-width:42px;height:42px;min-height:42px;border-radius:14px!important;gap:4px;}
  .nav-toggle .nav-line,.nav-toggle span{width:19px!important;min-width:19px!important;max-width:19px!important;height:2.2px!important;}
  .nav-toggle .nav-line:nth-child(2),.nav-toggle span:nth-child(2){width:14px!important;min-width:14px!important;max-width:14px!important;}
  .nav-toggle.is-active .nav-line:nth-child(1),.nav-toggle.is-active span:nth-child(1){transform:translateY(6.2px) rotate(45deg)!important;}
  .nav-toggle.is-active .nav-line:nth-child(3),.nav-toggle.is-active span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)!important;}
  .main-nav{top:calc(70px + var(--safe-top))!important;}
}
@media (max-width:430px){
  .nav-toggle{width:40px;min-width:40px;height:40px;min-height:40px;}
  .main-nav{top:calc(66px + var(--safe-top))!important;}
}

/* Ultra mobile finishing pass: centered mobile typography, reliable nav links, auto-carousel polish. */
@media (max-width:760px){
  html,body{scroll-padding-top:88px;}
  .main-nav,
  .main-nav *{pointer-events:auto!important;}
  .main-nav a{
    position:relative;
    z-index:2;
    display:flex!important;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(32,61,45,.10);
  }
  body.nav-open::before{pointer-events:none!important;}

  .hero-copy,
  .hero-copy p,
  .section-head,
  .minimal-head,
  .story-copy,
  .story-copy p,
  .shipping-clean,
  .brand-note,
  .product-body,
  .product-topline,
  .price-row,
  .footer-card,
  .footer-brand-block,
  .contact-card,
  .track-card,
  .empty-state{
    text-align:center!important;
  }
  .hero-kicker,
  .eyebrow,
  .hero-actions,
  .hero-micro,
  .product-actions,
  .boxed-actions,
  .quick-add-form,
  .shipping-clean-list,
  .story-metrics,
  .footer-links a,
  .price-row,
  .product-topline,
  .product-body{
    justify-content:center!important;
    justify-items:center!important;
  }
  .product-topline{grid-template-columns:1fr!important;gap:8px;}
  .price-row strong,.price-row small{width:100%;text-align:center!important;}
  .story-copy{display:grid;justify-items:center;}
  .story-copy h2,.story-copy p{max-width:32rem;margin-inline:auto;}

  .motion-strip-section{overflow:hidden;}
  .motion-strip,
  .category-orbits{
    direction:ltr;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    justify-content:flex-start!important;
    align-items:center!important;
    mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .motion-card,
  .category-orb{
    direction:rtl;
    text-align:center!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .motion-card{
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    flex:0 0 min(84vw,330px)!important;
    margin-inline:auto;
  }
  .motion-card img{margin-inline:auto;object-fit:contain;}
  .motion-card h2{left:0!important;right:0!important;text-align:center!important;margin:auto;}
  .motion-card span{inset-inline-start:18px!important;inset-inline-end:auto!important;}
  .category-orb{
    display:grid!important;
    justify-items:center!important;
    align-content:start!important;
  }
  .category-orb strong{display:block;width:100%;text-align:center!important;margin-top:10px;}
  [data-auto-carousel] > .is-carousel-active{transform:translateY(-3px) scale(1.015)!important;}
  .category-orbits[data-auto-carousel] > .is-carousel-active .category-circle{
    box-shadow:0 22px 44px rgba(31,20,12,.20),0 0 0 7px rgba(255,255,255,.42);
  }
}

@media (max-width:430px){
  .motion-strip{padding-inline:calc(50vw - min(42vw,165px));}
  .category-orbits{padding-inline:calc(50vw - min(23.5vw,92px));}
  .motion-card{flex-basis:min(84vw,330px)!important;}
  .category-orb{flex-basis:47vw!important;}
}


/* Mobile center + no page-jump carousel final pass */
@media (max-width:760px){
  .section-pad{overflow-x:hidden;}
  .section-pad > .container:not(.motion-strip):not(.category-orbits),
  .hero-cinema-grid,
  .roast-story-grid,
  .shipping-clean,
  .brand-notes,
  .product-grid,
  .blog-grid,
  .footer-main,
  .footer-bottom{
    text-align:center!important;
    justify-items:center!important;
    align-items:center!important;
  }
  .hero-copy,
  .story-copy,
  .section-head,
  .minimal-head,
  .shipping-clean > div,
  .brand-note,
  .product-card,
  .blog-card,
  .contact-card,
  .track-card,
  .empty-state{
    width:100%;
    margin-inline:auto!important;
    text-align:center!important;
  }
  .hero-copy > *,
  .story-copy > *,
  .section-head > *,
  .minimal-head > *,
  .shipping-clean > *{
    margin-inline:auto!important;
  }
  .hero-kicker,
  .eyebrow{
    display:inline-flex!important;
    width:auto!important;
    margin-inline:auto!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }
  .hero-copy p,
  .story-copy p,
  .section-head p,
  .page-hero p{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  .product-body,
  .product-topline,
  .price-row,
  .product-actions,
  .boxed-actions,
  .quick-add-form,
  .detail-info,
  .panel-form,
  .cart-summary,
  .order-summary{
    text-align:center!important;
    justify-items:center!important;
    align-items:center!important;
  }
  .product-body > *,
  .detail-info > *,
  .panel-form > *,
  .cart-summary > *,
  .order-summary > *{
    margin-inline:auto!important;
  }
  .price-row strong,.price-row small,
  .product-topline h3,
  .product-topline a,
  .product-body p{
    width:100%;
    text-align:center!important;
  }

  .motion-strip-section,
  .category-strip-section{
    width:100%;
    overflow:hidden;
  }
  .motion-strip,
  .category-orbits{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth;
    scroll-padding-inline:0!important;
    justify-content:flex-start!important;
    align-items:center!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    touch-action:pan-x pan-y;
  }
  .motion-strip{
    --slide-size:min(84vw,330px);
    gap:14px!important;
    padding-left:max(16px,calc((100vw - var(--slide-size)) / 2))!important;
    padding-right:max(16px,calc((100vw - var(--slide-size)) / 2))!important;
    padding-top:8px!important;
    padding-bottom:24px!important;
  }
  .motion-card{
    flex:0 0 var(--slide-size)!important;
    max-width:var(--slide-size)!important;
    min-height:252px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    text-align:center!important;
    scroll-snap-align:center!important;
  }
  .motion-card img{
    width:min(72%,210px)!important;
    height:170px!important;
    margin:0 auto!important;
    object-fit:contain!important;
  }
  .motion-card h2{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:8px auto 0!important;
    width:100%!important;
    text-align:center!important;
  }
  .motion-card span{
    top:18px!important;
    inset-inline-start:18px!important;
    inset-inline-end:auto!important;
  }

  .category-orbits{
    --cat-size:min(58vw,188px);
    gap:14px!important;
    padding-left:calc((100vw - var(--cat-size)) / 2)!important;
    padding-right:calc((100vw - var(--cat-size)) / 2)!important;
    padding-top:10px!important;
    padding-bottom:28px!important;
  }
  .category-orb{
    flex:0 0 var(--cat-size)!important;
    max-width:var(--cat-size)!important;
    margin:0!important;
    display:grid!important;
    justify-items:center!important;
    align-content:start!important;
    text-align:center!important;
    scroll-snap-align:center!important;
  }
  .category-circle{
    width:min(142px,44vw)!important;
    height:min(142px,44vw)!important;
    margin-inline:auto!important;
  }
  .category-orb strong{
    text-align:center!important;
    width:100%!important;
    margin:10px auto 0!important;
  }
  [data-auto-carousel] > .is-carousel-active{
    transform:translateY(-2px) scale(1.01)!important;
  }
}
@media (max-width:380px){
  .motion-strip{--slide-size:min(86vw,310px);}
  .category-orbits{--cat-size:min(62vw,180px);}
  .motion-card img{height:158px!important;}
}

/* Mobile menu + auth final pass: visible at any scroll position, cleaner login flow. */
@media (max-width:1020px){
  body.nav-open::before{
    z-index:1390!important;
    background:rgba(24,17,11,.22)!important;
    -webkit-backdrop-filter:blur(6px)!important;
    backdrop-filter:blur(6px)!important;
    pointer-events:none!important;
  }
  .site-header{z-index:1450!important;}
  .header-wrap{z-index:1452!important;}
  .main-nav{
    position:fixed!important;
    inset:auto max(12px,env(safe-area-inset-right,0px)) max(12px,calc(12px + var(--safe-bottom))) max(12px,env(safe-area-inset-left,0px))!important;
    top:auto!important;
    z-index:1448!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    max-height:min(74dvh,560px)!important;
    overflow:auto!important;
    padding:14px!important;
    border-radius:30px!important;
    background:
      radial-gradient(circle at 15% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 28%),
      linear-gradient(145deg,rgba(255,250,241,.98),rgba(239,224,202,.96))!important;
    border:1px solid rgba(255,255,255,.82)!important;
    box-shadow:0 -22px 70px rgba(30,18,10,.28), inset 0 1px 0 rgba(255,255,255,.7)!important;
    -webkit-backdrop-filter:blur(26px)!important;
    backdrop-filter:blur(26px)!important;
    transform:translate3d(0,24px,0) scale(.985)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .24s var(--ease),transform .24s var(--ease)!important;
  }
  .main-nav::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:8px!important;
    left:50%!important;
    width:46px!important;
    height:4px!important;
    border-radius:99px!important;
    background:rgba(32,61,45,.22)!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  .main-nav.is-open{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  .main-nav .nav-link,
  .main-nav a{
    min-height:58px!important;
    padding:12px 13px!important;
    border-radius:20px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    text-align:center!important;
    font-size:.96rem!important;
    font-weight:950!important;
    line-height:1.45!important;
    color:#2f271f!important;
    background:rgba(255,255,255,.66)!important;
    border:1px solid rgba(32,61,45,.09)!important;
    box-shadow:0 10px 26px rgba(42,25,13,.08)!important;
    -webkit-tap-highlight-color:rgba(32,61,45,.12)!important;
  }
  .main-nav .nav-link::before,
  .main-nav a::before{
    content:attr(data-icon);
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:var(--green);
    background:linear-gradient(135deg,rgba(32,61,45,.10),rgba(111,68,40,.08));
    font-size:1rem;
    font-weight:950;
  }
  .main-nav .nav-auth-link{
    color:#fff!important;
    background:linear-gradient(135deg,var(--green),#245940 58%,var(--coffee))!important;
    border-color:rgba(255,255,255,.34)!important;
    box-shadow:0 16px 34px rgba(32,61,45,.25)!important;
  }
  .main-nav .nav-auth-link::before{
    color:var(--green)!important;
    background:rgba(255,255,255,.88)!important;
  }
  .nav-toggle{
    background:linear-gradient(135deg,var(--green),#245940)!important;
    box-shadow:0 14px 30px rgba(32,61,45,.23)!important;
  }
}

@media (max-width:520px){
  .main-nav{
    grid-template-columns:1fr!important;
    max-height:min(78dvh,620px)!important;
    padding:15px 12px max(14px,calc(14px + var(--safe-bottom)))!important;
    border-radius:28px 28px 24px 24px!important;
  }
  .main-nav .nav-link,
  .main-nav a{
    min-height:54px!important;
    justify-content:flex-start!important;
    padding-inline:14px!important;
  }
  .rtl .main-nav .nav-link,
  .rtl .main-nav a{justify-content:flex-start!important;}
}

/* Cleaner centered OTP/auth pages. */
.auth-layout-single{
  grid-template-columns:1fr!important;
  justify-items:center;
}
.auth-card-centered{
  width:min(100%,480px);
  text-align:center;
  padding:clamp(22px,4.8vw,34px)!important;
}
.auth-card-centered .auth-step-badge{
  margin-inline:auto;
  margin-bottom:14px;
}
.auth-card-centered h2{
  text-align:center;
  margin:0 0 18px!important;
  font-size:clamp(1.45rem,4.5vw,2rem);
}
.auth-card-centered label{
  text-align:right;
}
.ltr .auth-card-centered label{text-align:left;}
.auth-card-centered input{
  text-align:center;
  min-height:54px;
  border-radius:18px;
  font-weight:900;
}
.auth-card-centered .btn{
  min-height:54px;
  margin-top:2px;
  box-shadow:0 18px 42px rgba(32,61,45,.25);
}
.auth-note{
  margin-top:14px;
  color:rgba(73,59,48,.74);
  line-height:1.9;
  font-weight:800;
  text-align:center;
}
.test-otp-box-minimal{
  justify-items:center;
  text-align:center;
  border-style:solid!important;
  border-color:rgba(32,61,45,.12)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(239,224,202,.62))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 28px rgba(42,25,13,.06);
}
.test-otp-box-minimal span{
  color:var(--muted);
  font-weight:950;
}
.test-otp-box-minimal strong{
  letter-spacing:.24em!important;
  margin-inline-start:.24em;
}
@media (max-width:680px){
  .auth-hero-clean .container,
  .auth-card-centered,
  .auth-card-centered label,
  .auth-card-centered .form-error{
    text-align:center!important;
  }
  .auth-section-clean{padding-top:28px!important;}
  .auth-card-centered{border-radius:28px!important;}
}

/* 2026 final mobile navigation + typography stability pass
   Fixes invisible nav links catching taps, keeps the menu visible at any scroll position,
   and makes page titles/cards calmer on mobile without changing the animated background. */
@media (max-width:1020px){
  .site-header{position:sticky!important;top:0!important;z-index:2200!important;}
  .header-wrap{position:relative!important;z-index:2202!important;}
  .nav-toggle{
    position:relative!important;
    z-index:2210!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    user-select:none!important;
  }
  .main-nav{
    position:fixed!important;
    top:auto!important;
    left:max(12px,env(safe-area-inset-left,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    bottom:max(12px,calc(12px + env(safe-area-inset-bottom,0px)))!important;
    z-index:2190!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(0,22px,0) scale(.985)!important;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s!important;
    max-height:min(76dvh,620px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .main-nav:not(.is-open),
  .main-nav:not(.is-open) *{
    pointer-events:none!important;
    visibility:hidden!important;
  }
  .main-nav.is-open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s!important;
  }
  .main-nav.is-open,
  .main-nav.is-open *{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.nav-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2180!important;
    display:block!important;
    background:rgba(22,15,10,.18)!important;
    -webkit-backdrop-filter:blur(4px)!important;
    backdrop-filter:blur(4px)!important;
    pointer-events:none!important;
  }
}

@media (max-width:760px){
  .main-nav{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:15px 12px max(14px,calc(14px + env(safe-area-inset-bottom,0px)))!important;
    border-radius:28px!important;
    background:linear-gradient(145deg,rgba(255,251,244,.98),rgba(238,222,198,.97))!important;
    box-shadow:0 -20px 60px rgba(31,19,10,.25),inset 0 1px 0 rgba(255,255,255,.78)!important;
  }
  .main-nav .nav-link,
  .main-nav a{
    width:100%!important;
    min-height:52px!important;
    padding:11px 13px!important;
    justify-content:flex-start!important;
    border-radius:18px!important;
    font-size:.92rem!important;
    line-height:1.45!important;
    letter-spacing:0!important;
  }
  .rtl .main-nav .nav-link,
  .rtl .main-nav a{justify-content:flex-start!important;}
  .main-nav .nav-link::before,
  .main-nav a::before{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
    border-radius:11px!important;
    font-size:.94rem!important;
  }
  .main-nav .nav-auth-link{
    min-height:56px!important;
    justify-content:center!important;
    margin-top:2px!important;
  }
  .page-hero{padding-top:42px!important;padding-bottom:30px!important;}
  .hero-copy h1,
  .page-hero h1,
  .order-manage-head h1,
  .success-card h1{
    font-size:clamp(1.82rem,8.9vw,2.72rem)!important;
    line-height:1.18!important;
    letter-spacing:-.015em!important;
  }
  .section-head h2,
  .minimal-head h2,
  .story-copy h2,
  .shipping-clean h2,
  .detail-tabs h2,
  .cart-summary h2,
  .order-summary h2,
  .contact-card h2,
  .track-card h2,
  .account-head h2,
  .detail-info h1{
    font-size:clamp(1.36rem,6.4vw,2rem)!important;
    line-height:1.24!important;
    letter-spacing:-.01em!important;
  }
  .motion-card h2{font-size:1.28rem!important;line-height:1.2!important;}
  .hero-copy p,
  .page-hero p,
  .section-head p,
  .story-copy p,
  .contact-card p,
  .track-card p,
  .product-body p,
  .footer-brand-block p{
    font-size:.92rem!important;
    line-height:1.85!important;
  }
  .eyebrow,.hero-kicker{font-size:.82rem!important;}
  .btn,.quick-add-btn,.text-link{font-size:.9rem!important;}
}

@media (max-width:430px){
  .hero-copy h1,
  .page-hero h1,
  .order-manage-head h1,
  .success-card h1{font-size:clamp(1.68rem,8.5vw,2.28rem)!important;}
  .section-head h2,
  .minimal-head h2,
  .story-copy h2,
  .shipping-clean h2,
  .detail-tabs h2,
  .cart-summary h2,
  .order-summary h2,
  .contact-card h2,
  .track-card h2,
  .account-head h2,
  .detail-info h1{font-size:clamp(1.24rem,6vw,1.72rem)!important;}
  .main-nav{left:10px!important;right:10px!important;bottom:max(10px,calc(10px + env(safe-area-inset-bottom,0px)))!important;}
}

/* 2026 final-final mobile nav: top glass drawer, scroll-safe, no hidden-tap bugs. */
@media (max-width:1020px){
  body.nav-open,
  html.nav-open{
    overflow:hidden!important;
    overscroll-behavior:contain!important;
  }
  body.nav-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2990!important;
    display:block!important;
    background:linear-gradient(180deg,rgba(37,23,13,.18),rgba(37,23,13,.08))!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    pointer-events:auto!important;
  }
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:3100!important;
    isolation:isolate!important;
  }
  .header-wrap{
    position:relative!important;
    z-index:3110!important;
  }
  .nav-toggle{
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    position:relative!important;
    z-index:3130!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.30)!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,var(--green),#285f46)!important;
    box-shadow:0 16px 36px rgba(32,61,45,.25),inset 0 1px 0 rgba(255,255,255,.20)!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .nav-toggle .nav-line,
  .nav-toggle span{
    display:block!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
    background:#fff!important;
    opacity:1!important;
    transform:none!important;
    transition:transform .22s var(--ease),opacity .18s var(--ease),width .18s var(--ease)!important;
  }
  .nav-toggle .nav-line:nth-child(2),
  .nav-toggle span:nth-child(2){width:14px!important;min-width:14px!important;max-width:14px!important;justify-self:end!important;}
  .nav-toggle.is-active .nav-line:nth-child(1),
  .nav-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;}
  .nav-toggle.is-active .nav-line:nth-child(2),
  .nav-toggle.is-active span:nth-child(2){opacity:0!important;transform:scaleX(.15)!important;}
  .nav-toggle.is-active .nav-line:nth-child(3),
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;}

  .main-nav{
    position:fixed!important;
    inset:auto auto auto auto!important;
    top:calc(76px + env(safe-area-inset-top,0px))!important;
    left:clamp(12px,3.8vw,22px)!important;
    right:clamp(12px,3.8vw,22px)!important;
    bottom:auto!important;
    z-index:3120!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:auto!important;
    max-width:520px!important;
    max-height:calc(100svh - 92px - env(safe-area-inset-top,0px))!important;
    margin-inline:auto!important;
    padding:14px!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:28px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    background:
      radial-gradient(circle at 92% 0%,rgba(255,255,255,.98),rgba(255,255,255,0) 31%),
      linear-gradient(145deg,rgba(255,250,241,.985),rgba(239,224,202,.975))!important;
    box-shadow:0 28px 80px rgba(30,18,10,.30),inset 0 1px 0 rgba(255,255,255,.78)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    backdrop-filter:blur(18px)!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(0,-10px,0) scale(.985)!important;
    transform-origin:top center!important;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s!important;
  }
  .main-nav::before{
    content:""!important;
    display:block!important;
    grid-column:1/-1!important;
    width:44px!important;
    height:4px!important;
    margin:0 auto 2px!important;
    border-radius:999px!important;
    background:rgba(32,61,45,.18)!important;
    position:static!important;
    transform:none!important;
    pointer-events:none!important;
  }
  .main-nav:not(.is-open),
  .main-nav:not(.is-open) *{
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .main-nav.is-open,
  body.nav-open .main-nav{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s!important;
  }
  .main-nav.is-open *,
  body.nav-open .main-nav *{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .main-nav .nav-link,
  .main-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    min-height:56px!important;
    width:100%!important;
    padding:11px 13px!important;
    border-radius:18px!important;
    color:#30261f!important;
    text-align:start!important;
    font-size:.94rem!important;
    font-weight:900!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    background:rgba(255,255,255,.64)!important;
    border:1px solid rgba(32,61,45,.08)!important;
    box-shadow:0 10px 24px rgba(42,25,13,.07)!important;
    -webkit-tap-highlight-color:rgba(32,61,45,.08)!important;
    transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)!important;
  }
  .main-nav .nav-link:active,
  .main-nav a:active{transform:scale(.985)!important;background:rgba(255,255,255,.88)!important;}
  .main-nav .nav-link::before,
  .main-nav a::before{
    content:attr(data-icon)!important;
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    color:var(--green)!important;
    background:linear-gradient(135deg,rgba(32,61,45,.12),rgba(111,68,40,.08))!important;
    font-size:1rem!important;
    font-weight:950!important;
  }
  .main-nav .nav-auth-link{
    grid-column:1/-1!important;
    min-height:58px!important;
    justify-content:center!important;
    color:#fff!important;
    background:linear-gradient(135deg,var(--green),#245940 58%,var(--coffee))!important;
    border-color:rgba(255,255,255,.34)!important;
    box-shadow:0 18px 38px rgba(32,61,45,.24)!important;
  }
  .main-nav .nav-auth-link::before{
    color:var(--green)!important;
    background:rgba(255,255,255,.90)!important;
  }
}

@media (max-width:760px){
  .main-nav{
    top:calc(70px + env(safe-area-inset-top,0px))!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    max-height:calc(100svh - 84px - env(safe-area-inset-top,0px))!important;
    padding:13px 11px max(13px,calc(13px + env(safe-area-inset-bottom,0px)))!important;
    border-radius:24px!important;
  }
  .main-nav .nav-link,
  .main-nav a{
    min-height:51px!important;
    padding:10px 12px!important;
    font-size:.90rem!important;
    border-radius:16px!important;
  }
  .main-nav .nav-auth-link{min-height:54px!important;}
  .nav-toggle{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;border-radius:14px!important;}
  .page-hero h1,
  .hero-copy h1,
  .detail-info h1,
  .order-manage-head h1,
  .success-card h1{font-size:clamp(1.72rem,8vw,2.42rem)!important;line-height:1.18!important;letter-spacing:-.02em!important;}
  .section-head h2,
  .minimal-head h2,
  .story-copy h2,
  .shipping-clean h2,
  .detail-tabs h2,
  .cart-summary h2,
  .order-summary h2,
  .contact-card h2,
  .track-card h2,
  .account-head h2{font-size:clamp(1.20rem,5.8vw,1.62rem)!important;line-height:1.35!important;}
  .page-hero p,
  .hero-copy p,
  .section-head p,
  .contact-card p,
  .track-card p,
  .product-body p,
  .panel-form p,
  .footer-brand-block p{font-size:.91rem!important;line-height:1.85!important;}
}

@media (max-width:430px){
  .main-nav{left:10px!important;right:10px!important;top:calc(66px + env(safe-area-inset-top,0px))!important;}
  .main-nav .nav-link,
  .main-nav a{font-size:.88rem!important;min-height:49px!important;}
  .main-nav .nav-link::before,
  .main-nav a::before{width:28px!important;height:28px!important;flex-basis:28px!important;font-size:.92rem!important;}
}

/* 2026 instant-close fix: the dim layer is visual only; JS safely closes outside taps. */
@media (max-width:1020px){
  body.nav-open::before{
    pointer-events:none!important;
  }
  .nav-toggle,
  .nav-toggle *{
    pointer-events:auto!important;
  }
  .main-nav.is-open,
  body.nav-open .main-nav{
    pointer-events:auto!important;
  }
  .main-nav:not(.is-open),
  .main-nav:not(.is-open) *{
    pointer-events:none!important;
  }
}


/* =========================================================
   FINAL MOBILE SIDE DRAWER NAVIGATION
   Clean override for mobile menu: opens from the side,
   stable on scroll, touch-friendly, and isolated from old rules.
   ========================================================= */
@media (max-width: 1020px){
  :root{
    --mobile-nav-width:min(340px,86vw);
    --mobile-nav-gap:14px;
  }

  .site-header{z-index:1400!important;}
  .header-wrap{
    position:relative!important;
    z-index:1500!important;
    gap:8px!important;
    border-radius:22px!important;
    padding:8px 10px!important;
  }

  .header-actions .account-pill{display:none!important;}

  .nav-toggle{
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin-inline-start:auto!important;
    border-radius:15px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:linear-gradient(180deg, rgba(24,61,47,.96), rgba(15,44,33,.96))!important;
    box-shadow:0 18px 34px rgba(22, 43, 34, .24)!important;
    position:relative!important;
    z-index:1701!important;
    isolation:isolate;
  }
  .nav-toggle::before{display:none!important;}
  .nav-toggle .nav-line,
  .nav-toggle span{
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:2.1px!important;
    background:#fff!important;
    border-radius:999px!important;
    margin:0!important;
    justify-self:center!important;
  }
  .nav-toggle .nav-line:nth-child(2),
  .nav-toggle span:nth-child(2){width:14px!important;min-width:14px!important;max-width:14px!important;justify-self:end!important;}
  .nav-toggle.is-active .nav-line:nth-child(1),
  .nav-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;}
  .nav-toggle.is-active .nav-line:nth-child(2),
  .nav-toggle.is-active span:nth-child(2){opacity:0!important;transform:scaleX(.2)!important;}
  .nav-toggle.is-active .nav-line:nth-child(3),
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;}

  body.nav-open,
  html.nav-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.nav-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(12,16,14,.28)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    z-index:1490!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .main-nav{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    width:var(--mobile-nav-width)!important;
    max-width:var(--mobile-nav-width)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
    margin:0!important;
    padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0!important;
    border:none!important;
    background:linear-gradient(180deg, rgba(252,247,239,.98), rgba(247,239,227,.98))!important;
    box-shadow:-26px 0 60px rgba(22, 18, 14, .16)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(104%,0,0)!important;
    transition:transform .32s cubic-bezier(.22,.9,.32,1), opacity .22s ease, visibility .22s step-end!important;
    z-index:1600!important;
  }
  .ltr .main-nav{
    left:0!important;
    right:auto!important;
    transform:translate3d(-104%,0,0)!important;
    box-shadow:26px 0 60px rgba(22, 18, 14, .16)!important;
  }
  .rtl .main-nav{
    right:0!important;
    left:auto!important;
  }

  .main-nav.is-open,
  body.nav-open .main-nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .34s cubic-bezier(.22,.9,.32,1), opacity .22s ease, visibility .22s step-start!important;
  }

  .main-nav:not(.is-open),
  .main-nav:not(.is-open) *{
    pointer-events:none!important;
  }

  .main-nav::before{
    content:"";
    display:block;
    width:54px;
    height:5px;
    border-radius:999px;
    background:rgba(32,61,45,.12);
    margin-inline:auto;
    margin-bottom:12px;
    flex:0 0 auto;
  }

  .main-nav .nav-link,
  .main-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    min-height:54px!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(32,61,45,.08)!important;
    color:#243127!important;
    font-size:.98rem!important;
    font-weight:860!important;
    line-height:1.45!important;
    box-shadow:0 8px 18px rgba(36, 31, 24, .06)!important;
    text-align:start!important;
    white-space:normal!important;
    transform:none!important;
    filter:none!important;
  }
  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus-visible,
  .main-nav a:hover,
  .main-nav a:focus-visible{
    background:#fff!important;
    color:var(--green)!important;
    border-color:rgba(32,61,45,.12)!important;
    box-shadow:0 12px 22px rgba(36, 31, 24, .08)!important;
  }
  .main-nav .nav-link:active,
  .main-nav a:active{transform:scale(.985)!important;}

  .main-nav .nav-link::before,
  .main-nav a::before{
    content:attr(data-icon);
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    font-size:.98rem!important;
    color:var(--green)!important;
    background:linear-gradient(180deg, rgba(32,61,45,.10), rgba(111,68,40,.08))!important;
  }

  .main-nav .nav-auth-link{
    margin-top:4px!important;
    background:linear-gradient(135deg, var(--green), var(--coffee))!important;
    color:#fff!important;
    border:none!important;
    box-shadow:0 18px 34px rgba(32,61,45,.2)!important;
  }
  .main-nav .nav-auth-link::before{
    color:#fff!important;
    background:rgba(255,255,255,.16)!important;
  }

  .rtl .main-nav .nav-link,
  .rtl .main-nav a{justify-content:flex-start!important;text-align:right!important;}

  /* smoother typography on small screens */
  .hero-copy h1,
  .page-hero h1,
  .detail-info h1,
  .order-manage-head h1,
  .success-card h1{font-size:clamp(1.72rem,7.4vw,2.32rem)!important;line-height:1.18!important;}

  .section-head h2,
  .story-copy h2,
  .shipping-clean h2,
  .detail-tabs h2,
  .cart-summary h2,
  .contact-card h2,
  .order-summary h2,
  .auth-card h2,
  .payment-card h1,
  .account-panel h2{font-size:clamp(1.34rem,6vw,1.86rem)!important;line-height:1.24!important;}

  .product-card h3,
  .motion-card h2,
  .account-head h3,
  .footer-links h4{font-size:clamp(1rem,4.8vw,1.22rem)!important;line-height:1.35!important;}

  .hero-copy p,
  .page-hero p,
  .section-head p,
  .product-excerpt,
  .auth-side-card p,
  .payment-side p,
  .payment-side small,
  .footer-links a,
  .footer-brand-block p,
  .contact-card p,
  .track-card p{font-size:.95rem!important;line-height:1.9!important;}
}

@media (max-width: 640px){
  .brand-copy small{display:none!important;}
  .header-actions{gap:6px!important;}
  .lang-switch,.cart-icon-btn,.nav-toggle{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;}
  .main-nav{width:min(312px,88vw)!important;max-width:min(312px,88vw)!important;padding-inline:14px!important;}
  .main-nav .nav-link,
  .main-nav a{min-height:52px!important;font-size:.94rem!important;padding:13px 14px!important;}
  .main-nav .nav-link::before,
  .main-nav a::before{width:32px!important;height:32px!important;min-width:32px!important;border-radius:11px!important;}
}

@media (max-width: 390px){
  .header-wrap{padding:7px 8px!important;}
  .brand-logo,.footer-brand-block img,.brand-mark,.footer-brand-block span{width:42px!important;height:42px!important;border-radius:14px!important;}
  .brand-copy strong{font-size:.92rem!important;}
  .main-nav{width:min(292px,90vw)!important;max-width:min(292px,90vw)!important;}
  .main-nav .nav-link,
  .main-nav a{font-size:.9rem!important;}
}


/* =========================================================
   BAOBAB FINAL GLASS MOBILE DRAWER + FIXED MOBILE HEADER
   This block intentionally overrides all older mobile-nav experiments.
   ========================================================= */
.mobile-nav-head{display:none;}
.mobile-nav-close{display:none;}

@media (max-width:1020px){
  :root{
    --mobile-header-h:74px;
    --drawer-w:min(354px,88vw);
    --drawer-bg:rgba(250,244,234,.78);
    --drawer-border:rgba(255,255,255,.56);
  }

  .site-shell{
    padding-top:calc(var(--mobile-header-h) + env(safe-area-inset-top,0px))!important;
  }

  .site-header{
    position:fixed!important;
    top:max(8px, env(safe-area-inset-top,0px))!important;
    left:0!important;
    right:0!important;
    z-index:2400!important;
    width:100%!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    pointer-events:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .site-header .header-wrap{
    pointer-events:auto!important;
    width:min(100% - 20px, var(--container))!important;
    margin-inline:auto!important;
    min-height:58px!important;
    padding:7px 9px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.52)!important;
    background:linear-gradient(135deg,rgba(255,250,241,.75),rgba(255,246,232,.56))!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
    box-shadow:0 18px 46px rgba(31,22,14,.12), inset 0 1px 0 rgba(255,255,255,.74)!important;
    gap:7px!important;
  }

  .brand-modern{
    min-width:0!important;
    max-width:calc(100vw - 178px)!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .brand-logo,.brand-mark{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:15px!important;
  }
  .brand-copy{min-width:0!important;}
  .brand-copy strong{
    display:block!important;
    max-width:120px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.92rem!important;
    line-height:1.25!important;
  }
  .brand-copy small{display:none!important;}

  .header-actions{
    gap:6px!important;
    flex:0 0 auto!important;
  }
  .header-actions .account-pill{display:none!important;}

  .lang-switch,
  .cart-icon-btn,
  .nav-toggle{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:15px!important;
    box-shadow:0 12px 24px rgba(31,22,14,.12)!important;
  }

  .nav-toggle{
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:4px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:linear-gradient(145deg,rgba(22,66,49,.98),rgba(14,43,32,.98))!important;
    color:#fff!important;
    position:relative!important;
    z-index:2410!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  .nav-toggle::before{display:none!important;}
  .nav-toggle .nav-line,
  .nav-toggle span{
    display:block!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:2px!important;
    margin:0!important;
    background:#fff!important;
    border-radius:999px!important;
    transition:transform .22s ease, opacity .2s ease, width .22s ease!important;
  }
  .nav-toggle .nav-line:nth-child(2),
  .nav-toggle span:nth-child(2){
    width:13px!important;
    min-width:13px!important;
    max-width:13px!important;
    justify-self:end!important;
  }
  .nav-toggle.is-active .nav-line:nth-child(1),
  .nav-toggle.is-active span:nth-child(1){transform:translateY(6px) rotate(45deg)!important;}
  .nav-toggle.is-active .nav-line:nth-child(2),
  .nav-toggle.is-active span:nth-child(2){opacity:0!important;transform:scaleX(.12)!important;}
  .nav-toggle.is-active .nav-line:nth-child(3),
  .nav-toggle.is-active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important;}

  html.nav-open,
  body.nav-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.nav-open::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:2500!important;
    background:
      radial-gradient(circle at 22% 12%, rgba(255,248,235,.22), transparent 34%),
      rgba(21,18,14,.38)!important;
    backdrop-filter:blur(5px) saturate(1.08)!important;
    -webkit-backdrop-filter:blur(5px) saturate(1.08)!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  .main-nav{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    width:var(--drawer-w)!important;
    max-width:var(--drawer-w)!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
    margin:0!important;
    padding:calc(16px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0!important;
    border:1px solid var(--drawer-border)!important;
    background:
      linear-gradient(180deg, rgba(255,252,247,.82), rgba(246,236,222,.74)),
      radial-gradient(circle at 28% 10%, rgba(255,255,255,.7), transparent 30%)!important;
    backdrop-filter:blur(26px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.16)!important;
    box-shadow:-34px 0 80px rgba(18,13,8,.22), inset 1px 0 0 rgba(255,255,255,.62)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:2600!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(105%,0,0)!important;
    transition:transform .38s cubic-bezier(.2,.86,.26,1), opacity .24s ease, visibility .24s step-end!important;
  }

  .rtl .main-nav{
    right:0!important;
    left:auto!important;
    transform:translate3d(105%,0,0)!important;
    border-left:1px solid rgba(255,255,255,.62)!important;
  }
  .ltr .main-nav{
    left:0!important;
    right:auto!important;
    transform:translate3d(-105%,0,0)!important;
    box-shadow:34px 0 80px rgba(18,13,8,.22), inset -1px 0 0 rgba(255,255,255,.62)!important;
    border-right:1px solid rgba(255,255,255,.62)!important;
  }

  .main-nav.is-open,
  body.nav-open .main-nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .38s cubic-bezier(.2,.86,.26,1), opacity .22s ease, visibility .22s step-start!important;
  }

  .main-nav:not(.is-open),
  .main-nav:not(.is-open) *{
    pointer-events:none!important;
  }

  .mobile-nav-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:5px 4px 14px!important;
    border-bottom:1px solid rgba(32,61,45,.09)!important;
    margin-bottom:6px!important;
  }
  .mobile-nav-brand{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
  }
  .mobile-nav-brand img,
  .mobile-nav-brand>span{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:15px!important;
    object-fit:contain!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(145deg,var(--green),var(--coffee))!important;
    color:#fff!important;
    font-weight:950!important;
  }
  .mobile-nav-brand strong{
    display:block!important;
    color:#213127!important;
    font-size:.98rem!important;
    line-height:1.3!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:165px!important;
  }
  .mobile-nav-brand small{
    display:block!important;
    color:rgba(58,47,38,.62)!important;
    font-size:.78rem!important;
    font-weight:850!important;
    margin-top:2px!important;
  }
  .mobile-nav-close{
    display:grid!important;
    place-items:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border:0!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.64)!important;
    color:#28342b!important;
    font-size:1.45rem!important;
    font-weight:500!important;
    line-height:1!important;
    box-shadow:0 10px 22px rgba(31,22,14,.08)!important;
    cursor:pointer!important;
  }

  .main-nav .nav-link,
  .main-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
    min-height:55px!important;
    padding:13px 14px!important;
    border-radius:19px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.73),rgba(255,250,242,.5))!important;
    border:1px solid rgba(255,255,255,.68)!important;
    color:#26352c!important;
    font-size:.96rem!important;
    font-weight:900!important;
    line-height:1.45!important;
    text-align:start!important;
    white-space:normal!important;
    box-shadow:0 11px 24px rgba(31,22,14,.07), inset 0 1px 0 rgba(255,255,255,.68)!important;
    transform:none!important;
    filter:none!important;
    transition:transform .18s ease, background .2s ease, box-shadow .2s ease!important;
  }
  .main-nav .nav-link::before,
  .main-nav a::before{
    content:attr(data-icon)!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    border-radius:13px!important;
    display:grid!important;
    place-items:center!important;
    color:var(--green)!important;
    background:linear-gradient(145deg,rgba(32,61,45,.12),rgba(111,68,40,.08))!important;
    font-size:1rem!important;
  }
  .main-nav .nav-link:hover,
  .main-nav a:hover,
  .main-nav .nav-link:focus-visible,
  .main-nav a:focus-visible{
    background:rgba(255,255,255,.88)!important;
    color:var(--green)!important;
    box-shadow:0 15px 30px rgba(31,22,14,.1), inset 0 1px 0 rgba(255,255,255,.78)!important;
  }
  .main-nav .nav-link:active,
  .main-nav a:active{transform:scale(.985)!important;}

  .main-nav .nav-auth-link{
    margin-top:5px!important;
    color:#fff!important;
    background:linear-gradient(135deg,rgba(28,82,61,.98),rgba(104,66,39,.96))!important;
    border-color:rgba(255,255,255,.18)!important;
    box-shadow:0 18px 38px rgba(31,82,61,.23)!important;
  }
  .main-nav .nav-auth-link::before{
    color:#fff!important;
    background:rgba(255,255,255,.17)!important;
  }

  .rtl .main-nav .nav-link,
  .rtl .main-nav a{text-align:right!important;direction:rtl!important;}
  .ltr .main-nav .nav-link,
  .ltr .main-nav a{text-align:left!important;direction:ltr!important;}

  .section-pad{padding-top:72px!important;padding-bottom:72px!important;}
  .hero-cinema{padding-top:36px!important;}

  .hero-copy h1,
  .page-hero h1,
  .detail-info h1,
  .order-manage-head h1,
  .success-card h1{
    font-size:clamp(1.74rem,7.6vw,2.42rem)!important;
    line-height:1.18!important;
    letter-spacing:-.018em!important;
  }

  .section-head h2,
  .story-copy h2,
  .shipping-clean h2,
  .detail-tabs h2,
  .cart-summary h2,
  .contact-card h2,
  .order-summary h2,
  .auth-card h2,
  .payment-card h1,
  .account-panel h2{
    font-size:clamp(1.34rem,5.8vw,1.92rem)!important;
    line-height:1.26!important;
    letter-spacing:-.01em!important;
  }

  .hero-copy p,
  .page-hero p,
  .section-head p,
  .product-excerpt,
  .auth-side-card p,
  .payment-side p,
  .payment-side small,
  .footer-brand-block p,
  .contact-card p,
  .track-card p{
    font-size:.94rem!important;
    line-height:1.9!important;
  }
}

@media (max-width:640px){
  :root{--mobile-header-h:70px;--drawer-w:min(326px,89vw);}
  .site-header .header-wrap{width:calc(100% - 16px)!important;min-height:56px!important;border-radius:20px!important;}
  .brand-copy strong{max-width:105px!important;font-size:.88rem!important;}
  .lang-switch,.cart-icon-btn,.nav-toggle{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:14px!important;}
  .main-nav{padding-inline:13px!important;}
  .main-nav .nav-link,
  .main-nav a{min-height:53px!important;font-size:.92rem!important;padding:12px 13px!important;border-radius:17px!important;}
  .mobile-nav-brand strong{max-width:145px!important;}
}

@media (max-width:390px){
  :root{--drawer-w:min(300px,91vw);}
  .site-header .header-wrap{width:calc(100% - 12px)!important;padding:6px 7px!important;}
  .brand-logo,.brand-mark{width:39px!important;height:39px!important;min-width:39px!important;}
  .brand-copy strong{max-width:92px!important;font-size:.84rem!important;}
  .lang-switch,.cart-icon-btn,.nav-toggle{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;}
  .main-nav .nav-link,
  .main-nav a{font-size:.88rem!important;}
}

@media (min-width:1021px){
  .mobile-nav-head,.mobile-nav-close{display:none!important;}
  .main-nav{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important;}
}


/* =========================================================
   HOTFIX: DRAWER LAYERING / Z-INDEX
   The drawer lives inside .site-header. Therefore the header's
   stacking context must stay above the page dim layer.
   ========================================================= */
@media (max-width:1020px){
  .site-header{
    z-index:5200!important;
    isolation:isolate!important;
  }

  .site-header .header-wrap{
    z-index:5210!important;
    position:relative!important;
  }

  body.nav-open::before{
    z-index:5000!important;
    background:
      radial-gradient(circle at 22% 12%, rgba(255,248,235,.16), transparent 34%),
      rgba(21,18,14,.34)!important;
    backdrop-filter:blur(4px) saturate(1.04)!important;
    -webkit-backdrop-filter:blur(4px) saturate(1.04)!important;
    pointer-events:none!important;
  }

  .main-nav{
    z-index:5300!important;
  }

  .main-nav.is-open,
  body.nav-open .main-nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
  }

  .nav-toggle{
    z-index:5350!important;
  }

  .mobile-nav-close{
    z-index:5360!important;
    position:relative!important;
  }
}

/* FINAL MANUAL FIX - Mobile menu must stay above everything */
@media (max-width: 1020px){

  /* این لایه باعث تار شدن و قایم شدن منو شده؛ فعلاً کامل حذفش کن */
  body.nav-open::before{
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* هدر موبایل همیشه بالا و قابل کلیک باشد */
  .site-header{
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999998 !important;
    pointer-events: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header .header-wrap{
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  /* خود منو از همه چیز بالاتر باشد */
  .main-nav{
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(340px, 88vw) !important;
    max-width: min(340px, 88vw) !important;
    height: 100dvh !important;
    z-index: 1000000 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(105%) !important;

    background: rgba(250, 244, 234, 0.88) !important;
    backdrop-filter: blur(24px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;

    border-left: 1px solid rgba(255,255,255,.6) !important;
    box-shadow: -30px 0 80px rgba(0,0,0,.22) !important;
  }

  html[dir="ltr"] .main-nav,
  .ltr .main-nav{
    left: 0 !important;
    right: auto !important;
    transform: translateX(-105%) !important;
  }

  /* وقتی منو باز شد، حتماً دیده شود */
  .main-nav.is-open,
  body.nav-open .main-nav{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .main-nav.is-open *,
  body.nav-open .main-nav *{
    pointer-events: auto !important;
  }

  /* دکمه منو هم از همه بالاتر */
  .nav-toggle{
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }
}