/* ============================================================
   MOBILE REDESIGN — fresh site-wide mobile (≤768px) visual layer.
   Loaded LAST (after page css + minimal-theme.css) on every page,
   so it wins the cascade. Touches ONLY ≤768px — desktop/tablet
   layout, markup and JS are completely untouched.

   Design tokens reused from minimal-theme.css (--warm-brown, --card-bg,
   --border, --text-primary, etc.) so light/dark mode keep working.

   New tokens for this layer:
   --mr-radius-lg : 20px   card / sheet corner radius
   --mr-radius-md : 14px   button / input corner radius
   --mr-radius-sm : 10px   chip / small element radius
   --mr-gap       : 1rem   base rhythm unit
   ============================================================ */

@media (max-width: 768px){

  :root{
    --mr-radius-lg:14px;
    --mr-radius-md:10px;
    --mr-radius-sm:8px;
    --mr-gap:1rem;
  }

  /* ---------- 1. Base rhythm & type ---------- */
  html{ font-size:15.5px; }
  body{ letter-spacing:0.005em; }
  .container{ padding:0 1.1rem !important; }
  .section-pad{ padding:3.4rem 0 !important; }
  .section-pad-sm{ padding:2.2rem 0 !important; }
  .section-header{ margin-bottom:2rem !important; }
  .section-title{ font-size:clamp(1.5rem,6.5vw,2rem) !important; line-height:1.18 !important; }
  .section-label{ font-size:.68rem !important; }
  .section-subtitle{ font-size:.92rem !important; line-height:1.65 !important; }

  /* ---------- 2. Navbar — floating rounded pill instead of a
     full-width hard-edged bar ---------- */
  #navbar{
    top:0.6rem !important;
    left:0.6rem !important;
    right:0.6rem !important;
    width:auto !important;
    border-radius:999px !important;
    border:1px solid var(--border-light) !important;
    box-shadow:0 8px 28px var(--shadow) !important;
    background:var(--nav-bg) !important;
  }
  #navbar.scrolled{ box-shadow:0 10px 30px var(--shadow-md) !important; }
  .nav-inner{ height:56px !important; padding:0 .5rem 0 1.1rem !important; }
  .nav-logo{ font-size:1.05rem !important; gap:.4rem !important; }
  .nav-logo-img{ height:26px !important; }
  .nav-actions{ gap:.4rem !important; }
  .theme-toggle,.wishlist-btn{ width:36px !important; height:36px !important; background:var(--beige) !important; box-shadow:none !important; }
  #loginBtn{
    width:36px !important;
    height:36px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0 !important;
    font-size:1rem !important;
    background:#ffffff !important;
    color:#111111 !important;
    border:1px solid #111111 !important;
  }
  #loginBtn:hover{ background:#f2f2f2 !important; color:#111111 !important; }
  #loginBtn #loginBtnText{ display:none !important; }
  #loginBtn #loginBtnIcon,#loginBtn i{ display:inline-block !important; color:inherit !important; }
  .menu-toggle{
    width:36px; height:36px; margin-left:.1rem;
    display:flex; align-items:center; justify-content:center;
    background:none; border-radius:0;
    color:var(--text-primary); font-size:1.15rem;
    transition:color .25s ease;
  }
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"]{ background:none; color:var(--warm-brown); }

  /* push page content down for the floating pill navbar */
  .hero{ padding-top:.5rem; }
  /* offer banner now handled globally as a full-width top strip (see minimal-theme.css) */

  /* ---------- 3. Mobile menu → slide-in drawer from the right,
     with a soft backdrop, instead of a dropdown panel ---------- */
  .mobile-menu{
    display:block !important;
    top:0 !important;
    left:auto !important;
    right:0 !important;
    width:min(78vw,340px) !important;
    height:100vh !important;
    height:100dvh !important;
    border-radius:var(--mr-radius-lg) 0 0 var(--mr-radius-lg) !important;
    border-bottom:none !important;
    border-left:1px solid var(--border-light) !important;
    box-shadow:-16px 0 50px rgba(0,0,0,0.18) !important;
    padding:5.2rem 1.6rem 2rem !important;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,1,.36,1);
    visibility:hidden;
    z-index:950;
  }
  .mobile-menu.open{
    transform:translateX(0);
    visibility:visible;
  }
  /* backdrop behind the drawer */
  .mobile-menu::before{
    content:"";
    position:fixed;
    inset:0;
    right:min(78vw,340px);
    background:rgba(10,10,10,0.35);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .mobile-menu.open::before{ opacity:1; pointer-events:auto; }

  /* close (X) button pinned inside the drawer */
  .mobile-menu-close{
    position:absolute;
    top:1.1rem;
    right:1.1rem;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--beige);
    color:var(--text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    transition:background .2s ease,color .2s ease,transform .2s ease;
    z-index:2;
  }
  .mobile-menu-close:hover{
    background:var(--warm-brown);
    color:#fff;
    transform:rotate(90deg);
  }

  .mobile-menu a{
    border-bottom:none !important;
    border-radius:var(--mr-radius-sm);
    padding:.85rem 1rem !important;
    margin-bottom:.3rem;
    font-size:.85rem !important;
    transition:background .2s ease,color .2s ease,transform .15s ease;
  }
  .mobile-menu a:hover,.mobile-menu a:active{
    background:var(--beige);
    color:var(--warm-brown);
    transform:translateX(3px);
  }

  /* ---------- 3b. Shop / Blog collapsible groups — caret toggles submenu ---------- */
  .mm-group{ margin-bottom:.3rem; }
  .mm-group-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius:var(--mr-radius-sm);
  }
  .mm-group-row .mm-group-link{
    flex:1;
    margin-bottom:0 !important;
  }
  .mm-group-toggle{
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:.72rem;
    cursor:pointer;
    transition:transform .3s ease,color .2s ease;
  }
  .mm-group-toggle:hover{ color:var(--warm-brown); }
  .mm-group.mm-open .mm-group-toggle{
    transform:rotate(180deg);
    color:var(--warm-brown);
  }
  .mm-submenu{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s cubic-bezier(.22,1,.36,1);
  }
  .mm-group.mm-open .mm-submenu{
    max-height:260px;
  }
  .mm-submenu a{
    font-size:.8rem !important;
    padding-left:1.6rem !important;
  }

  /* ---------- 4. Buttons — soft pill language everywhere ---------- */
  .btn-primary,.btn-outline,.detail-cta,.detail-cta-outline,
  .form-submit,.modal-btn,.filter-btn,.hero-search-btn,
  .btn-add-cart,.btn-buy-now-new{
    border-radius:var(--mr-radius-md) !important;
  }
  .btn-primary,.btn-outline{
    border-width:1px !important;
    box-shadow:none !important;
  }
  .btn-primary:active,.btn-outline:active,.detail-cta:active,
  .filter-btn:active,.btn-buy-now-new:active,.btn-add-cart:active{
    transform:scale(.96) !important;
  }

  /* ---------- 5. Cards — one consistent rounded, soft-shadow
     language across product / blog / value / contact / cs / fd cards ---------- */
  .product-card,.blog-card,.value-card,.why-item,.contact-link,
  .cs-card,.fd-card,.tstack-card,.tmob-card,.pr-review-card,
  .expand-card{
    border-radius:var(--mr-radius-lg) !important;
    border-width:1px !important;
    box-shadow:0 3px 16px var(--shadow) !important;
  }
  .product-img{ border-radius:12px !important; }
  .blog-img,.fd-card-img{ border-radius:0 !important; }
  .product-card:active{ transform:scale(.985) !important; }
  .product-name{ font-size:.92rem !important; }
  .product-price{ font-size:.95rem !important; }

  /* ---------- 5b. "Our Collections" — minimal/clean stack.
     One tall photo per row with a plain card body underneath: no dark
     scrim, no floating numeral, no gradient. The photo is just the
     photo; the title, copy and a simple text link with an arrow sit
     on the card's own background below it. No markup changes. ---------- */
  .coll-carousel-nav{ display:none !important; }
  .coll-carousel-dots{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.5rem !important;
    margin-top:.5rem !important;
  }
  .coll-swipe-hint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.4rem !important;
    margin-top:.6rem !important;
    font-size:.75rem !important;
    color:var(--text-muted) !important;
  }
  .coll-carousel{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .coll-carousel::-webkit-scrollbar{ display:none !important; }
  .coll-slide{
    scroll-snap-align:start !important;
    flex:0 0 100% !important;
    width:100% !important;
    height:auto !important;
    border-radius:var(--mr-radius-lg) !important;
    border-width:1px !important;
    box-shadow:none !important;
    overflow:hidden !important;
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .coll-slide-img{
    position:relative !important;
    aspect-ratio:5/4 !important;
    width:100% !important;
  }
  .coll-slide-img img{ filter:saturate(1.02); }
  .coll-slide::after{ content:none !important; }
  /* small caps label above the title, no chip/pill */
  .coll-slide-tag{
    position:static !important;
    order:1 !important;
    margin:1.1rem 1.2rem 0 !important;
    z-index:auto !important;
    font-family:"Space Mono",monospace !important;
    font-style:normal !important;
    font-size:.68rem !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
    color:var(--warm-brown) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .coll-slide-info{
    position:static !important;
    order:2 !important;
    z-index:auto !important;
    padding:.45rem 1.2rem 1.3rem !important;
  }
  .coll-slide-info h3{
    font-size:1.15rem !important;
    color:var(--text-primary) !important;
    margin-bottom:.3rem !important;
  }
  .coll-slide-info p{
    font-size:.8rem !important;
    color:var(--text-muted) !important;
    line-height:1.5 !important;
    margin-bottom:1rem !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* CTA is a plain text link with an arrow, sitting on a hairline
     divider instead of a floating round button */
  .coll-slide-cta{
    position:static !important;
    z-index:auto !important;
    width:auto !important;
    height:auto !important;
    padding-top:.6rem !important;
    border-top:1px solid var(--border-light) !important;
    border-radius:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    background:none !important;
    color:var(--text-primary) !important;
    box-shadow:none !important;
    font-size:.76rem !important;
    gap:.45rem !important;
  }
  .coll-slide-cta i{ font-size:.68rem !important; }



  /* ---------- 5c. Newsletter — "Stay in the Loop" was a hard black
     block; drop it for a warm beige card matching the rest of the
     site's alternate-section tone (not plain white, not black). ---------- */
  .newsletter-section{
    background:var(--beige) !important;
    border:none !important;
    border-radius:0 !important;
    margin:0 !important;
    padding:2.6rem 0 !important;
    width:100% !important;
  }
  .newsletter-section::before{ display:none !important; }
  .newsletter-label{ color:var(--warm-brown) !important; }
  .newsletter-title{ color:var(--text-primary) !important; }
  .newsletter-sub{ color:var(--text-secondary) !important; }
  .newsletter-input{
    background:var(--card-bg) !important;
    border:1px solid var(--border) !important;
    color:var(--text-primary) !important;
  }
  .newsletter-input::placeholder{ color:var(--text-muted) !important; }
  .newsletter-submit{
    background:var(--warm-brown) !important;
    color:#fff !important;
    border-color:var(--warm-brown) !important;
  }
  .newsletter-submit:hover{ background:var(--dark-brown) !important; }

  /* ---------- 6. Hero — tighter, calmer mobile hero ---------- */
  .hero-content{ padding-top:5.2rem !important; gap:1.6rem !important; }
  .hero-headline{ font-size:clamp(1.9rem,8vw,2.5rem) !important; }
  .hero-label{ transform:none !important; border-radius:var(--mr-radius-sm) !important; }
  .hero-actions{ gap:.7rem !important; }
  .hero-stats{ gap:1.2rem !important; }

  /* ---------- 7. Forms & inputs — rounded, calmer focus ring ---------- */
  .form-input,.modal-input,.search-bar,.gate-input,#cwTextarea,.newsletter-input{
    border-radius:var(--mr-radius-md) !important;
  }
  .form-input:focus,.modal-input:focus{
    box-shadow:0 0 0 3px color-mix(in srgb, var(--warm-brown) 22%, transparent) !important;
  }
  .contact-form,.modal-box,.gate-card{ border-radius:var(--mr-radius-lg) !important; }

  /* ---------- 8. Bottom sheets (buy-now / free-design / review) —
     consistent rounded sheet with a drag-handle feel ---------- */
  .buynow-box,.fdp-box,.review-box{
    border-radius:var(--mr-radius-lg) var(--mr-radius-lg) 0 0 !important;
  }

  /* ---------- 9. Footer — simplified single-column rhythm ---------- */
  footer{ padding:2.6rem 0 1.6rem !important; border-radius:var(--mr-radius-lg) var(--mr-radius-lg) 0 0 !important; }
  .footer-grid{ gap:1.6rem !important; }
  .footer-col h5{ margin-bottom:.8rem !important; }
  .footer-col a{ margin-bottom:.5rem !important; }
  .footer-bottom{ padding-top:1.2rem !important; }

  /* ---------- 10. Motion — keep it GPU-only and purposeful ---------- */
  .product-card,.blog-card,.fd-card,.value-card,.why-item,.contact-link,
  .collection-card{
    transition:transform .18s ease,box-shadow .18s ease !important;
  }

  /* ---------- 11. Scroll-top / chat FAB — align to the new rhythm ---------- */
  #scrollTop{ left:auto !important; right:1.2rem !important; border-radius:50% !important; box-shadow:0 6px 20px var(--shadow-md) !important; }
  #chatFab{ left:auto !important; right:1.2rem !important; box-shadow:0 8px 24px var(--shadow-md) !important; }
}

@media (max-width: 480px){
  html{ font-size:14.5px; }
  .container{ padding:0 .95rem !important; }
  .section-title{ font-size:clamp(1.35rem,7vw,1.7rem) !important; }
  .nav-inner{ height:52px !important; padding:0 .4rem 0 .9rem !important; }
  #navbar{ left:.4rem !important; right:.4rem !important; top:.45rem !important; }
  .hero-content{ padding-top:4.6rem !important; }
  .hero-headline{ font-size:clamp(1.6rem,9vw,2.1rem) !important; }
  .products-grid{ gap:.8rem !important; }
  .product-card,.blog-card,.value-card,.fd-card,.contact-link{
    border-radius:var(--mr-radius-md) !important;
  }
}