/* Self-hosted fonts — Chillax (display/titles/buttons) + General Sans (body), Fontshare/ITF free license, 2026-07-21. */
@font-face{font-family:'Chillax';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/chillax-variable.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url('../fonts/general-sans-variable.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-style:italic;font-weight:200 700;font-display:swap;src:url('../fonts/general-sans-variable-italic.woff2') format('woff2')}

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
    --primary: #0f172a;
    --accent: #3552c8;
    --accent-hover: #2a43a8;
    --accent-light: rgba(53,82,200,.08);
    --teal: #2a9d8f;
    --green: #2d6a4f;
    --gold: #d4a853;
    --gold-light: rgba(212,168,83,.12);
    --bg: #faf8f5;
    --bg-alt: #f0ebe4;
    --text: #3d3d3d;
    --text-light: #7a7a6e;
    --white: #ffffff;
    --border: #e5ddd3;
    --max-width: 1280px;
    --nav-height: 64px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
    --shadow-md: 0 4px 20px rgba(15,23,42,.08);
    --shadow-lg: 0 12px 40px rgba(15,23,42,.12);
    --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* =============================================
   RESET & BASE
   ============================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;color:var(--text);background:var(--bg);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}
input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4{font-family:'Chillax','General Sans',sans-serif;font-weight:500;color:var(--primary);line-height:1.2}

.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}

/* =============================================
   BUTTONS
   ============================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Chillax','General Sans',sans-serif;font-weight:500;font-size:.875rem;padding:.75rem 1.75rem;border-radius:var(--radius-pill);transition:all var(--transition);cursor:pointer;text-decoration:none;border:2px solid transparent;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.3)}
.btn-primary:active{transform:translateY(0);box-shadow:none;transition-duration:.1s}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);font-size:.875rem;padding:.625rem 1.5rem}
.btn-accent:hover{background:var(--accent-hover)}
.btn-lg{padding:.75rem 2rem;font-size:1rem}

/* =============================================
   NAVIGATION
   ============================================= */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;transition:background .4s ease,box-shadow var(--transition),border-color .4s ease}
.nav.scrolled{box-shadow:var(--shadow-sm)}
/* Transparent nav on landing hero */
.page-landing .nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
.page-landing .nav .nav-link,.page-landing .nav .nav-logo{color:rgba(255,255,255,.85)}
.page-landing .nav .nav-link:hover{color:#fff}
.page-landing .nav .nav-link::after{background:#fff}
.page-landing .nav .nav-hamburger span{background:rgba(255,255,255,.85)}
.page-landing .nav.scrolled{background:rgba(15,23,42,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:rgba(255,255,255,.06)}
.page-landing .nav.scrolled .nav-link,.page-landing .nav.scrolled .nav-logo{color:rgba(255,255,255,.85)}
.page-landing .nav.scrolled .nav-hamburger span{background:rgba(255,255,255,.85)}
/* Landing page — dark hero, warm sections below */
.page-landing{background:#0f172a;color:var(--text)}
/* Featured section — warm layered depth */
.page-landing .popular-products{background:radial-gradient(ellipse at 20% 50%,rgba(53,82,200,.04) 0%,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(212,168,83,.06) 0%,transparent 40%),radial-gradient(circle,rgba(61,61,61,.02) 1px,transparent 1px),linear-gradient(180deg,#f5f0e8 0%,#faf8f5 50%,#f0ebe4 100%);background-size:100%,100%,24px 24px,100%;color:var(--text)}
.page-landing .section-header h2{color:var(--primary)}
.page-landing .section-header p{color:var(--text-light)}
.page-landing .section-tag{color:var(--gold);font-weight:700}
.page-landing .popular-card{background:linear-gradient(180deg,#fff 0%,#faf8f5 100%);border-color:var(--border)}
.page-landing .popular-card-name{color:var(--primary)}
.page-landing .popular-card-brand{color:var(--text-light)}
.page-landing .popular-card-meta{color:var(--text-light)}
.page-landing .popular-card-img{background:var(--bg-alt)}
.page-landing .popular-card:hover{box-shadow:0 8px 32px rgba(53,82,200,.12)}
/* About section — warm gradient with subtle accents */
.page-landing .about{background:radial-gradient(ellipse at 70% 0%,rgba(53,82,200,.05) 0%,transparent 50%),radial-gradient(ellipse at 0% 100%,rgba(212,168,83,.06) 0%,transparent 50%),linear-gradient(180deg,#f0ebe4 0%,#f5f0e8 50%,#ede7de 100%)}
.page-landing .about h2{color:var(--primary)}
.page-landing .about-text{color:var(--text)}
.page-landing .about-card{background:linear-gradient(180deg,#fff 0%,#faf8f5 100%);border-color:var(--border)}
.page-landing .about-card h3{color:var(--primary)}
.page-landing .about-card p{color:var(--text-light)}
.page-landing .about-card-icon{color:var(--accent)}
/* Contact/Footer section — dark premium */
.page-landing .footer{background:radial-gradient(ellipse at 15% 0%,rgba(53,82,200,.1) 0%,transparent 50%),radial-gradient(ellipse at 85% 100%,rgba(212,168,83,.06) 0%,transparent 50%),linear-gradient(180deg,#0b1120 0%,#070d18 100%);border-top-color:#1e293b}
.page-landing .footer p,.page-landing .footer a{color:#94a3b8}
.page-landing .footer h4{color:#f1f5f9}
.page-landing .footer-bottom{border-top-color:#1e293b}
.page-landing .brand-marquee{background:#0b1120}
.page-landing .marquee-item{color:#94a3b8}
.page-landing .marquee-sep{color:#334155}
.page-landing .nav-cta-link{background:var(--accent);color:#fff}
/* (Signed-in account entry on the landing nav reuses the shared
   .nav-user-* component — same as the products page.) */

/* =============================================
   PRODUCTS PAGE — LIGHT THEME (dark nav + header)
   ============================================= */
.page-products{
    --t-bg:#f0ebe4;
    --t-surface:#faf8f5;
    --t-surface-alt:#ede7de;
    --t-border:#e5ddd3;
    --t-text:#3d3d3d;
    --t-text-sec:#7a7a6e;
    --t-text-muted:#a09a90;
    --t-text-heading:#0f172a;
    --t-nav-bg:rgba(15,23,42,.95);
    --t-nav-border:rgba(255,255,255,.06);
    --t-nav-text:rgba(255,255,255,.85);
    --t-nav-text-hover:#fff;
    --t-nav-hamburger:rgba(255,255,255,.85);
    --t-stuck-bg:rgba(250,248,245,.96);
    --t-hover-bg:rgba(15,23,42,.04);
    --t-shadow:0 4px 20px rgba(15,23,42,.08);
    --t-shadow-lg:0 12px 40px rgba(15,23,42,.12);
    --t-chevron-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7a6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --t-skel-from:#f0ebe4;
    --t-skel-mid:#e5ddd3;
    --t-auth-err-bg:#fef2f2;
    --t-auth-err-border:#fecaca;
    --t-auth-err-text:#dc2626;
    --t-auth-tab-active-shadow:0 1px 3px rgba(15,23,42,.06);
    background:radial-gradient(ellipse at 50% 0%,rgba(53,82,200,.04) 0%,transparent 35%),radial-gradient(circle,rgba(61,61,61,.015) 1px,transparent 1px),linear-gradient(180deg,#f5f0e8 0%,#faf8f5 30%,#f0ebe4 100%);background-size:100%,20px 20px,100%;color:var(--t-text)
}
/* Nav */
.page-products .nav{background:var(--t-nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--t-nav-border)}
.page-products .nav .nav-link{color:var(--t-nav-text)}
.page-products .nav .nav-link:hover{color:var(--t-nav-text-hover)}
.page-products .nav .nav-link::after{background:var(--t-nav-text-hover)}
.page-products .nav .nav-hamburger span{background:var(--t-nav-hamburger)}
.page-products .nav-user-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.85)}
.page-products .nav-user-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-products .nav-user-name-btn,.page-landing .nav-user-name-btn{background:none;border:none;color:rgba(255,255,255,.85)}
.page-products .nav-user-avatar,.page-landing .nav-user-avatar{border-color:rgba(255,255,255,.35);color:#fff}
.page-products .nav-user-name-btn:hover .nav-user-avatar,.page-landing .nav-user-name-btn:hover .nav-user-avatar{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}
.page-products .nav-user-chevron,.page-landing .nav-user-chevron{color:rgba(255,255,255,.5)}
.page-products .nav-user-dropdown,.page-landing .nav-user-dropdown{background:#1e293b;border-color:#334155;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.page-products .nav-user-email,.page-landing .nav-user-email{color:#94a3b8;border-bottom-color:#334155}
.page-products .nav-user-logout:hover,.page-landing .nav-user-logout:hover{background:rgba(255,255,255,.05)}
/* Products section */
.page-products .products{background:transparent}
/* Toolbar */
.page-products .products-toolbar.stuck{background:var(--t-stuck-bg);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.page-products .filter-pill{background:var(--t-surface);border-color:var(--t-border);color:var(--t-text-sec)}
.page-products .filter-pill:hover{border-color:var(--accent);color:var(--accent)}
.page-products .filter-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.page-products .toolbar-search input{background:var(--t-surface);border-color:var(--t-border);color:var(--t-text-heading)}
.page-products .toolbar-search input::placeholder{color:var(--t-text-muted)}
.page-products .toolbar-search input:focus{border-color:var(--accent);background:var(--t-surface-alt);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.page-products .toolbar-search svg{color:var(--t-text-muted)}
.page-products .sort-select{background:var(--t-surface);border-color:var(--t-border);color:var(--t-text-heading);background-image:var(--t-chevron-svg);background-repeat:no-repeat;background-position:right .5rem center}
.page-products .sort-select:focus{border-color:var(--accent)}
.page-products .sort-select option{background:var(--t-surface);color:var(--t-text-heading)}
.page-products .products-count{color:var(--t-text-sec)}
.page-products .products-count .count-showing{color:var(--t-text-heading)}
.page-products .search-results-note{color:var(--t-text-sec)}
.page-products .search-results-note strong{color:var(--t-text-heading)}
/* Dropdown */
.page-products .dropdown-trigger{background:var(--t-surface);border-color:var(--t-border);color:var(--t-text-sec)}
.page-products .dropdown-trigger:hover{border-color:var(--accent);color:var(--accent)}
.page-products .dropdown.open .dropdown-trigger{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.page-products .dropdown-panel{background:rgba(250,248,245,.93);border-color:var(--t-border);box-shadow:var(--t-shadow-lg)}
.page-products .dropdown-search{border-bottom-color:var(--t-border)}
.page-products .dropdown-search input{background:var(--t-surface-alt);border-color:var(--t-border);color:var(--t-text-heading)}
.page-products .dropdown-search input:focus{border-color:var(--accent);background:var(--t-surface)}
.page-products .dropdown-search svg{color:var(--t-text-muted)}
.page-products .dropdown-item{color:var(--t-text)}
.page-products .dropdown-item:hover{background:var(--t-hover-bg)}
.page-products .dropdown-item.active{background:rgba(37,99,235,.1);color:var(--accent)}
.page-products .dropdown-item-count{background:var(--t-surface-alt);color:var(--t-text-sec)}
.page-products .dropdown-item.active .dropdown-item-count{background:rgba(37,99,235,.12);color:var(--accent)}
.page-products .dropdown-empty{color:var(--t-text-muted)}
/* Product cards */
.page-products .product-card{background:var(--t-surface);border-color:var(--t-border)}
.page-products .product-card:hover{box-shadow:var(--t-shadow)}
.page-products .product-thumb{background:var(--t-surface-alt)}
.page-products .product-no-image{color:var(--t-text-muted)}
.page-products .product-no-image svg{color:var(--t-text-muted)}
.page-products .product-name{color:var(--t-text-heading)}
.page-products .product-brand{color:var(--t-text-sec)}
.page-products .product-meta{color:var(--t-text-muted)}
.page-products .product-price{color:var(--t-text-heading)}
.page-products .product-price .currency{color:var(--t-text-sec)}
.page-products .grid-qty-val{background:var(--t-surface-alt);color:var(--accent)}
/* Skeleton */
.page-products .skel{background:linear-gradient(90deg,var(--t-skel-from) 25%,var(--t-skel-mid) 50%,var(--t-skel-from) 75%);background-size:200% 100%}
/* Load more / empty */
.page-products .load-more-btn{background:var(--t-surface);color:var(--accent);border-color:var(--accent)}
.page-products .load-more-btn:hover{background:var(--accent);color:#fff}
.page-products .load-more-remaining{color:var(--t-text-sec)}
.page-products .load-more-btn:hover .load-more-remaining{color:rgba(255,255,255,.7)}
.page-products .load-more-end{color:var(--t-text-muted)}
.page-products .products-empty{color:var(--t-text-muted)}
.page-products .products-empty svg{color:var(--t-text-muted)}
.page-products .load-more-spinner{color:var(--t-text-sec)}
.page-products .spinner{border-color:var(--t-border);border-top-color:var(--accent)}
/* Cart drawer */
.page-products .cart-drawer{background:var(--t-surface);box-shadow:-8px 0 32px rgba(0,0,0,.15)}
.page-products .cart-header{border-bottom-color:var(--t-border)}
.page-products .cart-header h3{color:var(--t-text-heading)}
.page-products .cart-summary{color:var(--t-text-sec)}
.page-products .cart-close{color:var(--t-text-sec)}
.page-products .cart-close:hover{background:var(--t-hover-bg)}
.page-products .cart-search{border-bottom-color:var(--t-border)}
.page-products .cart-search input{background:var(--t-surface-alt);border-color:var(--t-border);color:var(--t-text-heading)}
.page-products .cart-search input::placeholder{color:var(--t-text-muted)}
.page-products .cart-search input:focus{border-color:var(--accent);background:var(--t-surface)}
.page-products .cart-search svg{color:var(--t-text-muted)}
.page-products .cart-item{border-bottom-color:var(--t-border)}
.page-products .cart-item-thumb{background:var(--t-surface-alt)}
.page-products .cart-item-thumb svg{color:var(--t-text-muted)}
.page-products .cart-item-brand{color:var(--t-text-sec)}
.page-products .cart-item-name{color:var(--t-text-heading)}
.page-products .cart-item-meta{color:var(--t-text-muted)}
.page-products .qty-control{border-color:var(--t-border)}
.page-products .qty-btn{color:var(--t-text)}
.page-products .qty-btn:hover{background:var(--t-hover-bg)}
.page-products .qty-value{border-color:var(--t-border)}
.page-products .qty-input{border-color:var(--t-border);color:var(--t-text-heading)}
.page-products .qty-input:focus{background:var(--t-hover-bg)}
.page-products .cart-empty{color:var(--t-text-muted)}
.page-products .cart-empty svg{color:var(--t-text-muted)}
.page-products .cart-footer{background:var(--t-surface-alt);border-top-color:var(--t-border)}
/* CBM gauge */
.page-products .cbm-label{color:var(--t-text-sec)}
.page-products .cbm-value{color:var(--t-text-heading)}
.page-products .cbm-bar{background:var(--t-bg)}
.page-products .cbm-ticks{color:var(--t-text-muted)}
.page-products .cbm-missing-text{color:var(--t-text-sec)}
.page-products .cbm-bar-mark span{color:var(--t-text-sec)}
.page-products .cart-cbm{border-bottom-color:var(--t-border)}
/* Checkout modal */
.page-products .modal{background:var(--t-surface);box-shadow:var(--t-shadow-lg)}
.page-products .modal-header{border-bottom-color:var(--t-border)}
.page-products .modal-header h3{color:var(--t-text-heading)}
.page-products .modal-body{color:var(--t-text)}
.page-products .form-group label{color:var(--t-text-sec)}
.page-products .form-group input,.page-products .form-group textarea,.page-products .form-group select{background:var(--t-surface-alt);border-color:var(--t-border);color:var(--t-text-heading)}
.page-products .form-group input:focus,.page-products .form-group textarea:focus{border-color:var(--accent)}
.page-products .form-group input::placeholder,.page-products .form-group textarea::placeholder{color:var(--t-text-muted)}
.page-products .checkout-summary{border-top-color:var(--t-border)}
.page-products .checkout-summary p{color:var(--t-text-sec)}
.page-products .checkout-summary strong{color:var(--t-text-heading)}
.page-products .checkout-estimate-note{color:var(--t-text-muted)}
.page-products .modal-footer{border-top-color:var(--t-border)}
.page-products .modal-cancel{color:var(--t-text-sec);border-color:var(--t-border)}
.page-products .modal-cancel:hover{border-color:var(--t-text-sec)}
.page-products .checkout-user-card{background:var(--t-surface-alt);border-color:var(--t-border)}
.page-products .checkout-user-name{color:var(--t-text-heading)}
.page-products .checkout-user-company{color:var(--t-text)}
.page-products .checkout-user-email{color:var(--t-text-sec)}
/* Product detail modal */
.page-products .product-modal .product-modal-body{background:var(--t-surface)}
.page-products .product-modal .product-modal-name{color:var(--t-text-heading)}
.page-products .product-modal .product-modal-brand{color:var(--t-text-sec)}
.page-products .product-modal .product-modal-meta{color:var(--t-text-muted)}
.page-products .product-modal .product-modal-section-title{color:var(--t-text-sec)}
.page-products .product-modal .product-modal-desc{color:var(--t-text)}
/* Auth tabs & forms in modal */
.page-products .auth-tabs{background:var(--t-surface-alt)}
.page-products .auth-tab{color:var(--t-text-sec)}
.page-products .auth-tab.active{background:var(--t-surface);color:var(--t-text-heading);box-shadow:var(--t-auth-tab-active-shadow)}
.page-products .auth-tab:hover:not(.active){color:var(--t-text)}
.page-products .auth-error{background:var(--t-auth-err-bg);border-color:var(--t-auth-err-border);color:var(--t-auth-err-text)}
.page-products .auth-divider::before,.page-products .auth-divider::after{background:var(--t-border)}
.page-products .auth-divider span{color:var(--t-text-muted)}
.page-products .order-success h3{color:var(--t-text-heading)}
.page-products .order-success p{color:var(--t-text-sec)}

/* =============================================
   FULL-PAGE SCROLL SNAP
   ============================================= */
.page-landing{overflow:hidden;height:100vh;height:100dvh}
.snap-wrapper{height:100vh;height:100dvh;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.snap-wrapper::-webkit-scrollbar{display:none}
.snap-section{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
/* Hero already handles its own flex alignment */
.snap-section.hero-landing{align-items:center;justify-content:flex-start}
/* Products & About — vertically center content */
.snap-section.popular-products{padding:0}
.snap-section.popular-products .container{padding-top:2rem;padding-bottom:2rem;width:100%}
.snap-section.about{padding:0}
.snap-section.about .container{padding-top:2rem;padding-bottom:2rem}
/* Contact — stack CTA on top, footer on bottom */
.snap-section-contact{flex-direction:column;justify-content:space-between;align-items:stretch;background:radial-gradient(ellipse at 25% 20%,rgba(53,82,200,.1) 0%,transparent 50%),radial-gradient(ellipse at 75% 80%,rgba(212,168,83,.06) 0%,transparent 40%),linear-gradient(180deg,var(--primary) 0%,#122040 40%,#0b1120 100%)}
.contact-top{flex:1;display:flex;align-items:center;padding-top:var(--nav-height)}
.contact-top .cta{width:100%;padding:2rem 0}
.contact-bottom{flex-shrink:0}
.snap-section-contact .footer{padding:2rem 0 0}
.snap-section-contact .footer-grid{padding-bottom:1.5rem;gap:1.5rem}
.snap-section-contact .footer-bottom{padding:1rem 0}
.snap-section-contact .brand-marquee{padding:1rem 0}

.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;gap:1.5rem}
.nav-logo{flex-shrink:0}
.nav-logo img{height:44px;width:auto}
.nav-search{flex:1;max-width:480px;position:relative}
.nav-search input{width:100%;padding:.5rem 1rem .5rem 2.5rem;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-alt);font-size:.875rem;outline:none;transition:border-color var(--transition),background var(--transition)}
.nav-search input:focus{border-color:var(--accent);background:var(--white)}
.nav-search svg{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-light);pointer-events:none}
.nav-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav-link{font-family:'Chillax','General Sans',sans-serif;font-size:1rem;font-weight:400;color:var(--text);transition:color var(--transition);white-space:nowrap;position:relative;padding-bottom:2px}
.nav-link::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);border-radius:1px;transition:width .35s cubic-bezier(.16,1,.3,1),left .35s cubic-bezier(.16,1,.3,1)}
.nav-link:hover{color:var(--accent)}
.nav-link:hover::after{width:100%;left:0}
.nav-cta-link{font-family:'Chillax','General Sans',sans-serif;font-size:.9375rem;font-weight:500;color:var(--white);background:var(--accent);padding:.5rem 1.25rem;border-radius:var(--radius-pill);transition:background var(--transition)}
.nav-cta-link:hover{background:var(--accent-hover)}
/* Secondary nav CTA (landing Sign In) — outlined pill beside the filled Shop Now */
.nav-cta-outline{font-family:'Chillax','General Sans',sans-serif;font-size:.9375rem;font-weight:500;color:#fff;border:1.5px solid rgba(255,255,255,.55);padding:calc(.5rem - 1.5px) 1.25rem;border-radius:var(--radius-pill);transition:background var(--transition),border-color var(--transition)}
.nav-cta-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.cart-btn{position:relative;display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;background:var(--accent);color:var(--white);border-radius:var(--radius-pill);font-size:.8125rem;font-weight:600;transition:background var(--transition),transform .2s ease,box-shadow .3s ease}
.cart-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.cart-btn:active{transform:scale(.96);transition-duration:.1s}
.cart-btn svg{width:18px;height:18px}
.cart-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:#ef4444;color:var(--white);font-size:.625rem;font-weight:700;border-radius:9px;display:flex;align-items:center;justify-content:center;line-height:1}
.cart-badge:empty,.cart-badge[data-count="0"]{display:none}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:.5rem;cursor:pointer;z-index:101;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--primary);border-radius:2px;transition:transform var(--transition),opacity var(--transition)}
.nav-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =============================================
   LANDING HERO
   ============================================= */
.hero-landing{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center;color:var(--white)}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem;padding:.5rem 1.25rem;border:1px solid rgba(212,168,83,.35);border-radius:var(--radius-pill);background:rgba(212,168,83,.1)}
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
.hero-landing .btn-lg svg{transition:transform .3s ease}
.hero-landing .btn-lg:hover svg{transform:translateX(3px)}

/* =============================================
   STATS
   ============================================= */
.stats{padding:0;margin-top:-2.5rem;position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:900px;margin:0 auto}
.stat-card{background:var(--white);border-radius:var(--radius);padding:1.75rem 1.5rem;text-align:center;box-shadow:var(--shadow-md);border:1px solid var(--border)}
.stat-number{font-family:'Chillax','General Sans',sans-serif;font-size:2.25rem;font-weight:500;color:var(--accent);line-height:1}
.stat-plus{font-family:'Chillax','General Sans',sans-serif;font-size:1.5rem;font-weight:500;color:var(--teal)}
.stat-label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-light);margin-top:.375rem}

/* =============================================
   SECTION HELPERS
   ============================================= */
.section-header{text-align:center;max-width:560px;margin:0 auto 3rem}
.section-tag{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.section-header h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;margin-bottom:.75rem}
.section-header p{font-size:1rem;color:var(--text-light);line-height:1.7}
.section-cta{text-align:center;margin-top:2.5rem}

/* =============================================
   FEATURED CATEGORIES (Landing)
   ============================================= */
.featured-cats{padding:5rem 0}
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.cat-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:1.75rem;text-align:center;transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-card:active{transform:scale(.97);transition-duration:.1s}
.cat-card-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.cat-card-icon.food{background:rgba(22,163,74,.08);color:var(--green)}
.cat-card-icon.nonfood{background:rgba(139,92,246,.08);color:#8b5cf6}
.cat-card h3{font-family:'Chillax','General Sans',sans-serif;font-size:.9375rem;font-weight:500;color:var(--primary)}
.cat-card .cat-card-count{font-size:.8125rem;color:var(--text-light)}

/* =============================================
   PRODUCTS HEADER (Products page)
   ============================================= */
.products-header{padding:calc(var(--nav-height) + 2.5rem) 0 2rem;background:radial-gradient(ellipse at 30% 100%,rgba(42,157,143,.08) 0%,transparent 40%),radial-gradient(ellipse at 90% 20%,rgba(53,82,200,.12) 0%,transparent 40%),linear-gradient(135deg,#0f172a 0%,#1a2744 60%,#3552c8 100%);color:var(--white);text-align:center;position:relative;overflow:hidden}
.products-header::before{content:'';position:absolute;top:-50%;right:-30%;width:60%;height:200%;background:radial-gradient(circle,rgba(212,168,83,.06) 0%,transparent 60%);pointer-events:none}
.products-header::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;opacity:.6}
.products-header h1{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:500;color:var(--white);margin-bottom:.5rem;position:relative;z-index:1}
.products-header p{font-size:1rem;color:rgba(255,255,255,.6);margin-bottom:1.75rem;position:relative;z-index:1}
.header-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;position:relative;z-index:1}
.header-cat{padding:.35rem .875rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-pill);font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.85);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.header-cat:hover,.header-cat.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:var(--white)}
.header-cat .cat-count{font-size:.6875rem;color:rgba(255,255,255,.5);margin-left:.25rem}

/* =============================================
   PRODUCTS SECTION
   ============================================= */
.products{padding:2.5rem 0 5rem}
.products-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;padding:.75rem 0;transition:background .2s ease,box-shadow .2s ease;position:relative;z-index:40}
.products-toolbar.stuck{position:sticky;top:var(--nav-height);z-index:40;background:rgba(250,251,252,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(15,23,42,.06);margin-left:-1.5rem;margin-right:-1.5rem;padding:.75rem 1.5rem;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
/* While a dropdown is open, the stuck toolbar's own backdrop blur would
   block the panel's frosted-glass blur (nested backdrop roots) — drop it;
   the toolbar's .96 background keeps it looking the same. */
.products-toolbar.stuck:has(.dropdown.open){backdrop-filter:none;-webkit-backdrop-filter:none}
.products-toolbar-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.filter-pill{padding:.375rem 1rem;font-size:.8125rem;font-weight:500;color:var(--text-light);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}
.filter-pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.filter-pill.active{background:var(--accent);color:var(--white);border-color:var(--accent);box-shadow:0 2px 8px rgba(37,99,235,.25)}
.filter-pill:active{transform:scale(.96);transition-duration:.1s}
/* Custom Dropdown */
.dropdown{position:relative}
.dropdown-trigger{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem .375rem 1rem;font-size:.8125rem;font-weight:500;color:var(--text);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.dropdown-trigger:hover{border-color:var(--accent);color:var(--accent)}
.dropdown.open .dropdown-trigger{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.dropdown-label{overflow:hidden;text-overflow:ellipsis;max-width:180px;white-space:nowrap}
.dropdown-chevron{width:14px;height:14px;flex-shrink:0;transition:transform var(--transition)}
.dropdown.open .dropdown-chevron{transform:rotate(180deg)}
.dropdown-panel{position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:50;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;overflow:hidden}
.dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-search{padding:.625rem;border-bottom:1px solid var(--border);position:relative}
.dropdown-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-light);pointer-events:none}
.dropdown-search input{width:100%;padding:.4375rem .625rem .4375rem 2rem;border:1px solid var(--border);border-radius:6px;font-size:.8125rem;outline:none;background:var(--bg-alt);transition:border-color var(--transition)}
.dropdown-search input:focus{border-color:var(--accent);background:var(--white)}
.dropdown-list{max-height:280px;overflow-y:auto;padding:.375rem}
.dropdown-list::-webkit-scrollbar{width:4px}
.dropdown-list::-webkit-scrollbar-track{background:transparent}
.dropdown-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.dropdown-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;font-size:.8125rem;color:var(--text);border-radius:6px;cursor:pointer;transition:background var(--transition)}
.dropdown-item:hover{background:var(--bg-alt)}
.dropdown-item.active{background:rgba(37,99,235,.06);color:var(--accent);font-weight:600}
.dropdown-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-item-count{font-size:.6875rem;color:var(--text-light);background:var(--bg-alt);padding:.125rem .4375rem;border-radius:var(--radius-pill);flex-shrink:0;font-weight:500}
.dropdown-item.active .dropdown-item-count{background:rgba(37,99,235,.1);color:var(--accent)}
.dropdown-empty{padding:1.25rem .75rem;text-align:center;font-size:.8125rem;color:var(--text-light)}
.toolbar-right{display:flex;align-items:center;gap:1rem;margin-left:auto}
/* Grow-on-focus lives on the WRAPPER, not the input: a wider input inside a
   fixed 220px wrapper just paints over the sort select sitting next to it —
   growing the wrapper lets the flex row reflow around it instead. */
.toolbar-search{position:relative;width:220px;transition:width .3s ease}
.toolbar-search:focus-within{width:260px}
.toolbar-search input{width:100%;padding:.4375rem .75rem .4375rem 2.25rem;border:1.5px solid var(--border);border-radius:var(--radius-pill);background:var(--white);font-size:.8125rem;outline:none;transition:border-color var(--transition),box-shadow var(--transition),width .3s ease}
.toolbar-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.toolbar-search input::placeholder{color:var(--text-light);opacity:.7}
.toolbar-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-light);pointer-events:none}
.products-count{font-size:.8125rem;color:var(--text-light);white-space:nowrap}
/* "Search results for …" line between the toolbar and the grid */
.search-results-note{margin:-1rem 0 1.25rem;font-size:.9375rem;color:var(--text-light)}
.search-results-note strong{color:var(--text);font-weight:600}

/* Product Grid */
.products-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}

/* Product Card */
.product-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .3s ease;display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(37,99,235,.15)}
.product-card:active{transform:scale(.97);transition-duration:.1s}
.product-thumb{aspect-ratio:4/3;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-thumb-icon{color:var(--border);opacity:.5}
.product-thumb-icon svg{width:36px;height:36px}
.product-no-image{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;height:100%;color:var(--text-light);opacity:.55}
.product-no-image svg{width:32px;height:32px}
.product-no-image span{font-size:.6875rem;font-weight:500;text-align:center;line-height:1.3;padding:0 .5rem}
.product-badge{position:absolute;top:.375rem;left:.375rem;padding:.125rem .375rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:3px;color:var(--white)}
.product-badge.food{background:var(--green)}
.product-badge.nonfood{background:#8b5cf6}
/* "In your order · N" badge — top-right of the thumb, blue. Marks products
   already on the customer's ongoing order. */
.product-order-badge{position:absolute;top:.375rem;right:.375rem;display:inline-flex;align-items:center;gap:.2rem;padding:.15rem .4rem;font-size:.625rem;font-weight:700;border-radius:9999px;color:#fff;background:var(--accent);box-shadow:0 2px 6px rgba(53,82,200,.35)}
.product-order-badge svg{width:11px;height:11px}
/* Icon quick-add button reflects the "already in order" state with a filled look. */
.add-to-order.in-order{background:var(--accent);color:#fff;border-color:var(--accent)}
.add-to-order.in-order:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.product-body{padding:.75rem;flex:1;display:flex;flex-direction:column}
.product-brand{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light);margin-bottom:.125rem}
.product-name{font-family:'General Sans',sans-serif;font-size:.8125rem;font-weight:500;color:var(--primary);line-height:1.35;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-meta{font-size:.6875rem;color:var(--text-light);margin-bottom:.5rem}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:.375rem}
.product-price{font-weight:700;font-size:.8125rem;color:var(--primary)}
.product-price .currency{font-size:.6875rem;font-weight:500;color:var(--text-light)}
.product-price.quote{font-size:.6875rem;color:var(--accent);font-weight:500}
.add-to-cart{padding:.3rem .625rem;background:var(--accent);color:var(--white);font-size:.6875rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition),transform var(--transition);white-space:nowrap;flex-shrink:0}
.add-to-cart:hover{background:var(--accent-hover);transform:scale(1.04)}
.add-to-cart:active{transform:scale(.96);transition-duration:.1s}
.add-to-cart.added{background:var(--green)}
/* Per-product quick-add to the in-progress order — ICON-ONLY secondary button
   (tooltip "Add to Ongoing Order") so it reads as a clear tappable action
   without competing with the primary Add to Cart. */
.add-to-order{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;background:var(--accent-light);color:var(--accent);border:1px solid rgba(53,82,200,.22);border-radius:var(--radius-sm);transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
.add-to-order svg{width:17px;height:17px;flex-shrink:0}
.add-to-order:hover{background:rgba(53,82,200,.13);border-color:rgba(53,82,200,.42);transform:translateY(-1px);box-shadow:0 3px 10px rgba(53,82,200,.18)}
/* Ongoing order locked for pricing — visible but inert (tap explains why) */
.add-to-order.is-locked{background:var(--bg-alt);color:var(--text-light);border-color:var(--border);cursor:not-allowed;opacity:.75}
.add-to-order.is-locked:hover{background:var(--bg-alt);border-color:var(--border);transform:none;box-shadow:none}
.product-modal-order-btn.is-locked{background:var(--bg-alt);color:var(--text-light);border-color:var(--border);cursor:not-allowed;opacity:.8}
.product-modal-order-btn.is-locked:hover{background:var(--bg-alt)}
.add-to-order:active{transform:translateY(0);transition-duration:.1s}
.add-to-order:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-light),0 0 0 1px var(--accent)}

/* Grid Qty Stepper */
.grid-qty{display:flex;align-items:center;border:1px solid var(--accent);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.grid-qty-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--white);background:var(--accent);border:none;cursor:pointer;transition:background var(--transition);padding:0}
.grid-qty-btn:hover{background:var(--accent-hover)}
.grid-qty-val{width:28px;text-align:center;font-size:.6875rem;font-weight:700;color:var(--accent);background:var(--white);line-height:24px}

/* Load More */
.load-more-wrap{text-align:center;margin-top:2.5rem}
.load-more-btn{padding:.625rem 2.5rem;background:var(--white);color:var(--accent);font-size:.875rem;font-weight:600;border:1.5px solid var(--accent);border-radius:var(--radius-pill);transition:all var(--transition)}
.load-more-btn:hover{background:var(--accent);color:var(--white)}
.load-more-btn:disabled{opacity:.5;cursor:not-allowed}
.load-more-remaining{font-weight:400;color:var(--text-light);font-size:.8125rem}
.load-more-btn:hover .load-more-remaining{color:rgba(255,255,255,.7)}
.load-more-end{font-size:.8125rem;color:var(--text-light);padding:1rem 0}
.load-more-retry{padding:.625rem 1.5rem;background:#fef2f2;color:#991b1b;font-size:.875rem;font-weight:600;border:1px solid #fca5a5;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition)}
.load-more-retry:hover{background:#fee2e2;border-color:#f87171}

/* Go to Top */
.go-top{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,99,235,.35);border:none;cursor:pointer;z-index:90;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease,visibility .3s,background .2s ease}
.go-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.go-top:hover{background:var(--accent-hover);transform:translateY(-4px);box-shadow:0 8px 24px rgba(37,99,235,.4)}
.go-top:active{transform:translateY(-1px);transition-duration:.1s}
.go-top svg{width:20px;height:20px}

/* Products count — showing X of Y */
.products-count .count-showing{color:var(--text);font-weight:600}
.products-count .count-sep{margin:0 .25rem}

/* Empty / loading */
.products-empty{grid-column:1/-1;text-align:center;padding:4rem 1rem;color:var(--text-light)}
.products-empty svg{width:48px;height:48px;color:var(--border);margin:0 auto .75rem}

/* Card Entrance Animation */
@keyframes cardEnter{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.card-enter{animation:cardEnter .5s cubic-bezier(.16,1,.3,1) both}
.card-enter:nth-child(5n+2){animation-delay:.06s}
.card-enter:nth-child(5n+3){animation-delay:.12s}
.card-enter:nth-child(5n+4){animation-delay:.18s}
.card-enter:nth-child(5n+5){animation-delay:.24s}

/* Sort Select */
.sort-select{padding:.375rem .5rem;font-size:.8125rem;font-weight:500;color:var(--text);background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-pill);outline:none;cursor:pointer;transition:border-color var(--transition);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem}
.sort-select:focus{border-color:var(--accent)}

/* Infinite Scroll Spinner */
.load-more-spinner{display:flex;align-items:center;justify-content:center;gap:.625rem;padding:1.5rem 0;font-size:.8125rem;color:var(--text-light)}
.spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Skeleton */
.skeleton{pointer-events:none}
.skel{background:linear-gradient(90deg,var(--bg-alt) 25%,var(--border) 50%,var(--bg-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =============================================
   ABOUT
   ============================================= */
.about{padding:5rem 0;background:radial-gradient(ellipse at 70% 0%,rgba(53,82,200,.05) 0%,transparent 50%),radial-gradient(ellipse at 0% 100%,rgba(212,168,83,.06) 0%,transparent 50%),linear-gradient(180deg,#f0ebe4 0%,#f5f0e8 50%,#ede7de 100%)}
.about .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text{font-size:1rem;line-height:1.8;color:var(--text);margin-bottom:1rem}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-card{background:linear-gradient(180deg,#fff 0%,#fafbfc 100%);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform var(--transition)}
.about-card:hover{transform:translateY(-3px)}
.about-card-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(37,99,235,.08);border-radius:10px;margin-bottom:.75rem;color:var(--accent)}
.about-card-icon svg{width:20px;height:20px;stroke-width:1.5}
.about-card h3{font-family:'Chillax','General Sans',sans-serif;font-size:.9375rem;font-weight:500;margin-bottom:.25rem}
.about-card p{font-size:.8125rem;color:var(--text-light);line-height:1.5}

/* Mission & Vision */
.about-mission-vision{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}
.about-mv-item{padding:1rem 1.25rem;background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
.about-mv-item:nth-child(2){border-left-color:var(--gold)}
.about-mv-item h3{display:flex;align-items:center;gap:.5rem;font-family:'Chillax','General Sans',sans-serif;font-size:.8125rem;font-weight:600;color:var(--primary);margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.05em}
.about-mv-item h3 svg{color:var(--accent);flex-shrink:0}
.about-mv-item:nth-child(2) h3 svg{color:var(--gold)}
.about-mv-item p{font-size:.8125rem;color:var(--text-light);line-height:1.6;margin:0}

/* =============================================
   CTA
   ============================================= */
.cta{padding:5rem 0;background:radial-gradient(ellipse at 30% 100%,rgba(42,157,143,.1) 0%,transparent 45%),radial-gradient(ellipse at 80% 0%,rgba(53,82,200,.12) 0%,transparent 45%),linear-gradient(135deg,var(--primary),#1a2744,var(--accent));position:relative;overflow:hidden}
.snap-section-contact .cta{background:transparent;padding:0}
.cta::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(212,168,83,.08) 0%,transparent 70%);animation:ctaPulse 8s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}
.cta-content{max-width:600px;margin:0 auto;text-align:center;position:relative;z-index:1}
.cta-content h2{color:#fff;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;margin-bottom:.75rem}
.cta-content p{font-size:1rem;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:2rem}

/* =============================================
   FOOTER
   ============================================= */
.footer{background:radial-gradient(ellipse at 15% 0%,rgba(53,82,200,.1) 0%,transparent 50%),radial-gradient(ellipse at 85% 100%,rgba(212,168,83,.06) 0%,transparent 50%),linear-gradient(180deg,#101827 0%,#0b1120 60%,#070d18 100%);color:rgba(255,255,255,.7);padding:4rem 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.footer-brand p{font-size:.875rem;line-height:1.7;margin-top:.75rem;max-width:300px}
.footer-brand img{height:36px;width:auto}
.footer-col h4{color:var(--white);font-family:'Chillax','General Sans',sans-serif;font-size:.875rem;font-weight:500;margin-bottom:1rem}
.footer-col li{margin-bottom:.5rem}
.footer-col a{font-size:.8125rem;color:rgba(255,255,255,.55);transition:color var(--transition)}
/* Touch: footer links padded to ~40px pitch; the mobile menu's Sign Out matches its links. */
@media(max-width:768px){
    .footer-col a{display:inline-block;padding:.55rem 0}
    .footer-col li{margin-bottom:.1rem}
}
/* A <button> in a menu of <a> rows — mirror the .mobile-menu a styling
   exactly (color:inherit resolved to the page's DARK text on the dark
   menu, which made Sign Out look muted/disabled). */
.mobile-menu-signout{background:none;border:0;font:inherit;text-align:left;width:100%;cursor:pointer;display:block;padding:.875rem 0;font-size:1rem;font-weight:400;color:var(--primary);border-bottom:1px solid var(--border)}
.page-landing .mobile-menu-signout,.page-products .mobile-menu-signout{color:#f1f5f9;border-bottom-color:#334155}

.footer-col a:hover{color:var(--teal)}
.footer-social{display:flex;gap:.75rem;margin-top:1.25rem}
.footer-social a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);transition:background .3s cubic-bezier(.16,1,.3,1),color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.footer-social a:hover{background:var(--accent);color:var(--white);transform:translateY(-3px) scale(1.1)}
.footer-social svg{width:16px;height:16px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0;text-align:center;font-size:.75rem;color:rgba(255,255,255,.35)}

/* =============================================
   LEGAL PAGES (privacy-policy / terms-of-service)
   ============================================= */
.legal-header{padding:calc(var(--nav-height) + 2.5rem) 0 2rem}
.legal{padding:2.5rem 0 4rem;background:var(--bg)}
.legal-wrap{max-width:760px}
.legal-wrap p,.legal-wrap li{font-size:1rem;line-height:1.75;color:var(--text);overflow-wrap:break-word}
.legal-updated{font-size:.875rem;color:var(--text-light);margin-bottom:1.5rem}
.legal-wrap h2{font-family:'Chillax','General Sans',sans-serif;font-size:1.375rem;margin:2.5rem 0 .75rem;color:var(--primary);scroll-margin-top:calc(var(--nav-height) + 16px)}
.legal-wrap h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--text)}
.legal-wrap ul{list-style:disc;padding-left:1.25rem;margin:.75rem 0}
.legal-wrap ol{list-style:decimal;padding-left:1.25rem;margin:.75rem 0}
.legal-wrap li{margin-bottom:.5rem}
.legal-wrap a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-toc{background:rgba(53,82,200,.05);border:1px solid rgba(53,82,200,.15);border-radius:var(--radius-sm);padding:1.25rem 1.5rem;margin:2rem 0}
.legal-toc h2{margin:0 0 .5rem;font-size:1rem;font-family:'Chillax','General Sans',sans-serif;color:var(--text);font-weight:500}
.legal-toc ol{margin:0;padding-left:1.25rem;columns:2;column-gap:2rem}
.legal-toc li{margin-bottom:.35rem;break-inside:avoid}
.legal-toc a{color:var(--accent);text-decoration:none;display:inline-block;padding:.15rem 0}
.legal-toc a:hover{text-decoration:underline}
.legal-callout{background:var(--white);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:1rem 1.25rem;margin:1rem 0}
.legal-table-scroll{overflow-x:auto}
/* Small privacy notice under form submit buttons (quote modal etc.) */
.form-privacy-note{font-size:.75rem;color:var(--text-light);margin:.5rem 0 .75rem;text-align:center;line-height:1.5}
.form-privacy-note a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal-wrap table{width:100%;border-collapse:collapse;font-size:.875rem;min-width:480px}
.legal-wrap th{text-align:left;font-weight:600;color:var(--text);border-bottom:2px solid var(--border);padding:.5rem .75rem .5rem 0}
.legal-wrap td{border-bottom:1px solid var(--border);padding:.6rem .75rem .6rem 0;vertical-align:top;color:var(--text)}
.legal-wrap tr:last-child td{border-bottom:none}
@media(max-width:768px){
    .legal-toc ol{columns:1}
    .legal-toc a{padding:.35rem 0}
    .legal-header{padding:calc(var(--nav-height) + 1.75rem) 0 1.5rem}
    .legal{padding:1.75rem 0 3rem}
    /* Legal pages have no hamburger — keep the two nav links visible */
    .page-legal .nav-actions{display:flex;gap:1rem}
    .page-legal .nav-actions .nav-link{display:inline-block;min-height:44px;display:inline-flex;align-items:center}
    /* Tables stack into label/value blocks on phones — a side-scrolling
       table hides its right columns with no visible hint on touch screens. */
    .legal-wrap table{min-width:0}
    .legal-wrap thead{display:none}
    .legal-wrap tr{display:block;padding:.6rem 0}
    .legal-wrap tr + tr{border-top:1px solid var(--border)}
    .legal-wrap tr:first-child{padding-top:0}
    .legal-wrap tr:last-child{padding-bottom:0}
    .legal-wrap td{display:block;border-bottom:none;padding:.25rem 0}
    .legal-wrap td::before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light);margin-bottom:.1rem}
    /* The first cell is the row's name — bold carries it, no label needed */
    .legal-wrap td:first-child{font-weight:600}
    .legal-wrap td:first-child::before{display:none}
}

/* =============================================
   CART DRAWER
   ============================================= */
.cart-overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;transition:opacity var(--transition)}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--white);z-index:201;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(0,0,0,.1)}
.cart-drawer.open{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:.625rem 1rem;border-bottom:1px solid var(--border)}
.cart-header-info{display:flex;flex-direction:column}
.cart-header h3{font-family:'Chillax','General Sans',sans-serif;font-size:.9375rem;font-weight:600}
.cart-summary{font-size:.75rem;color:var(--text-light);font-weight:400}
.cart-summary:empty{display:none}
.cart-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background var(--transition)}
.cart-close:hover{background:var(--bg-alt)}
.cart-close svg{width:20px;height:20px}
.cart-search{position:relative;padding:.375rem 1rem;border-bottom:1px solid var(--border)}
.cart-search svg{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text-light);pointer-events:none}
.cart-search input{width:100%;padding:.3125rem .625rem .3125rem 1.75rem;border:1.5px solid var(--border);border-radius:var(--radius-pill);font-size:.75rem;outline:none;background:var(--bg-alt);transition:border-color var(--transition),background var(--transition)}
.cart-search input:focus{border-color:var(--accent);background:var(--white)}
.cart-items{flex:1;overflow-y:auto;padding:.5rem 1rem}
.cart-item{display:flex;gap:.625rem;padding:.5rem 0;border-bottom:1px solid var(--bg-alt)}
.cart-item:last-child{border-bottom:none}
.cart-item-thumb{width:40px;height:40px;border-radius:6px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cart-item-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item-thumb svg{width:18px;height:18px;color:var(--border)}
.cart-item-thumb.clickable{cursor:pointer;transition:opacity var(--transition)}
.cart-item-thumb.clickable:hover{opacity:.75}
.cart-item-name.clickable{cursor:pointer;transition:color var(--transition)}
.cart-item-name.clickable:hover{color:var(--accent)}
.cart-item-info{flex:1;min-width:0}
.cart-item-brand{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light)}
.cart-item-name{font-size:.75rem;font-weight:600;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-meta{font-size:.625rem;color:var(--text-light);margin-top:.0625rem}
.cart-item-actions{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem;flex-wrap:wrap;row-gap:4px}
.qty-control{display:flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:5px;overflow:hidden}
.qty-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--text);transition:background var(--transition)}
.qty-btn:hover{background:var(--bg-alt)}
.qty-value{width:26px;text-align:center;font-size:.75rem;font-weight:600;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.qty-input{width:36px;text-align:center;font-size:.75rem;font-weight:600;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);outline:none;background:transparent;padding:0;-moz-appearance:textfield;font-family:inherit}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{background:var(--bg-alt)}
.cart-item-remove{font-size:.625rem;color:#ef4444;cursor:pointer;margin-left:.375rem;transition:opacity var(--transition)}
.cart-item-remove:hover{opacity:.7}
.ci-confirm{display:inline-flex;align-items:center;gap:6px;margin-left:.375rem;white-space:nowrap}
.ci-confirm-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--t-text-sec,#7a7a6e)}
.ci-confirm-btn{padding:3px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.68rem;font-weight:600;cursor:pointer;background:var(--white);font-family:inherit;transition:all .15s}
.ci-confirm-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.ci-confirm-btn.danger{color:#ef4444;border-color:#fca5a5}
.ci-confirm-btn.danger:hover{background:#fef2f2;border-color:#ef4444;color:#dc2626}
.cart-empty{text-align:center;padding:3rem 1rem;color:var(--text-light)}
.cart-empty svg{width:40px;height:40px;color:var(--border);margin:0 auto .5rem}
.cart-empty p{font-size:.875rem}
.cart-footer{padding:.75rem 1rem;border-top:1px solid var(--border);background:var(--bg)}
/* CBM Gauge */
.cart-cbm{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.cbm-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.cbm-label{font-size:.6875rem;font-weight:500;color:var(--text-light)}
.cbm-value{font-size:.75rem;font-weight:700;color:var(--primary)}
.cbm-bar{position:relative;height:5px;background:var(--bg-alt);border-radius:3px;overflow:visible}
.cbm-bar-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .4s cubic-bezier(.4,0,.2,1)}
.cbm-bar-fill.good{background:var(--green)}
.cbm-bar-fill.over{background:#ef4444}
.cbm-bar-mark{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--text-light);border-radius:1px;transform:translateX(-1px)}
.cbm-bar-mark span{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:.625rem;font-weight:600;color:var(--text-light);white-space:nowrap}
.cbm-ticks{display:flex;justify-content:space-between;align-items:center;margin-top:.125rem;font-size:.625rem;color:var(--text-light)}
.cbm-container-tag{font-weight:600;color:var(--accent);font-size:.625rem}
.cbm-missing{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin-top:.375rem}
.cbm-missing-text{font-size:.625rem;color:var(--text-light);line-height:1.45}
.cart-footer-buttons{display:flex;gap:.375rem}
.request-quote-btn{flex:1;padding:.5rem;background:var(--teal);color:var(--white);font-size:.8125rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition);display:flex;align-items:center;justify-content:center;gap:.375rem}
.request-quote-btn svg{width:14px;height:14px}
.request-quote-btn:hover{background:#0d9488}
.checkout-btn{flex:1;padding:.5rem;background:var(--accent);color:var(--white);font-size:.8125rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition)}
.checkout-btn:hover{background:var(--accent-hover)}
.checkout-btn:disabled{opacity:.5;cursor:not-allowed}

/* ===== Cart-drawer multi-draft strip (account holder only) ===== */
.cart-drafts{display:flex;align-items:center;gap:6px;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--bg-alt,#f8fafc)}
.cart-drafts-row{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.cart-drafts-row::-webkit-scrollbar{height:4px}
.cart-drafts-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.cart-draft-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.375rem .625rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.75rem;font-weight:500;color:var(--text-light);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.cart-draft-tab:hover{border-color:var(--accent);color:var(--accent)}
.cart-draft-tab.is-active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.cart-draft-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--bg-alt);color:var(--text-light);font-size:.625rem;font-weight:700;font-variant-numeric:tabular-nums}
.cart-draft-tab.is-active .cart-draft-tab-badge{background:rgba(255,255,255,.25);color:#fff}
.cart-drafts-new{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1px dashed var(--border);border-radius:50%;color:var(--text-light);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.cart-drafts-new:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.cart-drafts-new:disabled{opacity:.5;cursor:not-allowed}

.cart-draft-toolbar{padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;gap:.4rem}
.cart-draft-name-row{display:flex;align-items:center;gap:.375rem}
.cart-draft-name{flex:1;font-size:.875rem;font-weight:600;color:var(--text);padding:.2rem .4rem;border-radius:4px;outline:none;border:1px solid transparent;transition:all var(--transition);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-draft-name[contenteditable="true"]{border-color:var(--accent);background:var(--bg);white-space:normal}
.cart-draft-action{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:0;border-radius:4px;color:var(--text-light);cursor:pointer;transition:all var(--transition)}
.cart-draft-action:hover{background:var(--bg-alt);color:var(--text)}
.cart-draft-action svg{width:14px;height:14px}
.cart-draft-action.cart-draft-archive:hover{color:#ef4444}

.cart-draft-target{display:flex;gap:0;background:var(--bg-alt);border-radius:var(--radius-pill);padding:2px;border:1px solid var(--border)}
.cart-draft-target-btn{flex:1;padding:.25rem .5rem;font-size:.6875rem;font-weight:600;color:var(--text-light);background:transparent;border:0;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition);text-transform:uppercase;letter-spacing:.04em}
.cart-draft-target-btn:hover:not(.is-active){color:var(--text)}
.cart-draft-target-btn.is-active{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(53,82,200,.25)}

/* Review overlay */
.review-header{display:flex;align-items:center;gap:12px;padding:.875rem 1.5rem;border-bottom:1px solid var(--border);background:var(--bg)}
.review-header h3{margin:0;font-size:.9375rem;font-weight:700;color:var(--primary)}
.review-header p{margin:0;font-size:.75rem;color:var(--text-light)}
.review-back-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:none;border:1px solid var(--border);cursor:pointer;color:var(--text);transition:all var(--transition);flex-shrink:0}
.review-back-btn:hover{background:var(--bg-alt);border-color:var(--text-light)}
.review-back-btn svg{width:16px;height:16px}
.review-back-link{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;color:var(--accent);margin-bottom:.75rem;transition:opacity var(--transition)}
.review-back-link:hover{opacity:.7}
.review-back-link svg{width:14px;height:14px}
.review-body{padding:1.25rem 1.5rem}
.review-details{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:16px}
.review-agree{display:flex;align-items:center;gap:8px;margin-bottom:16px;cursor:pointer;font-size:.8125rem;color:var(--text);line-height:1.5}
.review-agree input{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.review-agree a{color:var(--accent);text-decoration:underline;font-weight:600}
.review-agree a:hover{color:var(--accent-hover)}
.review-hint{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 12px;font-size:.75rem;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radius-sm);line-height:1.4;transition:opacity .3s ease,max-height .3s ease}
.review-hint svg{width:14px;height:14px;flex-shrink:0}
.review-hint.hidden{opacity:0;max-height:0;margin:0;padding:0;border:none;overflow:hidden}
.review-actions{display:flex}
.review-actions .modal-submit{flex:1}

/* Privacy Policy Modal */
.privacy-modal{max-width:520px;width:90%;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;max-height:80vh}
.privacy-modal-body{padding:1.25rem;overflow-y:auto;flex:1}
.privacy-modal-body>p{margin:0 0 .75rem;font-size:.8125rem;color:var(--text-light);line-height:1.5}
.privacy-list{margin:0;padding:0 0 0 1.125rem;list-style:disc}
.privacy-list li{font-size:.78rem;color:var(--text-light);line-height:1.55;margin-bottom:.5rem}
.privacy-list li:last-child{margin-bottom:0}
.privacy-modal-footer{padding:.75rem 1.25rem;border-top:1px solid var(--border);background:var(--bg)}
.privacy-modal-footer .modal-submit{width:100%}

/* =============================================
   CHECKOUT MODAL
   ============================================= */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition);padding:1rem}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--white);border-radius:var(--radius);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg)}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-header h3{font-family:'Chillax','General Sans',sans-serif;font-size:1.125rem;font-weight:600}
.modal-body{padding:1.25rem 1.5rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.25rem}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.75rem;font-weight:500;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{padding:.625rem .875rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;outline:none;transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:80px}
.checkout-merge-banner{margin:0 0 1.25rem;padding:14px 16px;border-radius:10px;background:linear-gradient(135deg,#eff6ff,#e0f2fe);border:1px solid #bfdbfe}
.checkout-merge-banner.is-locked{background:#f8fafc;border-color:#e2e8f0}
.checkout-merge-banner-title{font-size:.78rem;font-weight:600;color:#1e40af;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.checkout-merge-banner.is-locked .checkout-merge-banner-title{color:#64748b}
.checkout-merge-banner-body{font-size:.86rem;color:#0f172a;line-height:1.5;margin-bottom:10px}
.checkout-merge-banner.is-locked .checkout-merge-banner-body{margin-bottom:0;color:#475569;font-style:italic}
.checkout-merge-banner-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;background:#fff;border:1px solid #2563eb;color:#1e40af;font-weight:600;font-size:.82rem;cursor:pointer;transition:all .18s ease}
.checkout-merge-banner-btn:hover{background:#1e40af;color:#fff;border-color:#1e40af}
.checkout-merge-banner-btn:disabled{opacity:.6;cursor:not-allowed}
.checkout-summary{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.checkout-summary p{font-size:.875rem;color:var(--text-light);display:flex;justify-content:space-between}
.checkout-summary strong{color:var(--primary)}
.checkout-estimate-note{font-size:.8125rem;color:var(--text-light);font-style:italic;margin-top:.5rem;line-height:1.5;display:block}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.75rem;justify-content:flex-end}
.modal-cancel{padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;color:var(--text-light);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all var(--transition)}
.modal-cancel:hover{border-color:var(--text-light)}
.modal-submit{padding:.625rem 1.5rem;background:var(--accent);color:var(--white);font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition)}
.modal-submit:hover{background:var(--accent-hover)}
.modal-submit:disabled{opacity:.5;cursor:not-allowed}

/* =============================================
   NAV USER
   ============================================= */
.nav-user{position:relative}
.nav-user-btn{display:flex;align-items:center;gap:.375rem;padding:.4375rem .875rem;font-size:.8125rem;font-weight:500;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-pill);transition:all var(--transition);background:var(--white);cursor:pointer}
.nav-user-btn:hover{border-color:var(--accent);color:var(--accent)}
.nav-user-btn svg{width:16px;height:16px}
.nav-user-info{position:relative}
.nav-user-name-btn{display:flex;align-items:center;gap:.3rem;padding:0;font-size:.8125rem;font-weight:500;color:var(--text);border:none;background:none;transition:all var(--transition);cursor:pointer}
.nav-user-name-btn:hover .nav-user-avatar{border-color:var(--accent);color:var(--accent)}
.nav-user-avatar{width:48px;height:40px;border-radius:var(--radius-pill);background:none;border:1.5px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;transition:all .2s}
.nav-user-avatar svg{width:16px;height:16px}
.nav-user-avatar .nav-user-chevron{width:9px;height:9px;flex-shrink:0}
.nav-user-chevron{width:14px;height:14px;color:var(--text-light);transition:transform var(--transition)}
.nav-user-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:110;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.nav-user-email{padding:.75rem 1rem;font-size:.75rem;color:var(--text-light);border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-user-logout{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-size:.8125rem;font-weight:500;color:#ef4444;transition:background var(--transition);cursor:pointer;background:none;border:none}
.nav-user-logout:hover{background:var(--bg-alt)}
.nav-user-logout svg{width:16px;height:16px}

/* =============================================
   AUTH HERO & CLOSE
   ============================================= */
.auth-close-btn{position:absolute;top:.75rem;right:.75rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);cursor:pointer;color:rgba(255,255,255,.85);z-index:3;transition:background var(--transition),color var(--transition)}
.auth-close-btn:hover{background:rgba(255,255,255,.3);color:var(--white)}
.auth-close-btn svg{width:16px;height:16px}
#checkout-auth-view{position:relative}
.auth-hero{text-align:center;padding:1rem 1.5rem .75rem;background:radial-gradient(ellipse at 20% 80%,rgba(42,157,143,.08) 0%,transparent 50%),radial-gradient(ellipse at 90% 10%,rgba(53,82,200,.12) 0%,transparent 50%),linear-gradient(135deg,#0f172a 0%,#1a2744 60%,#3552c8 100%);color:var(--white);border-radius:var(--radius) var(--radius) 0 0;position:relative;overflow:hidden}
.auth-hero::before{content:'';position:absolute;top:-40%;right:-30%;width:60%;height:180%;background:radial-gradient(circle,rgba(212,168,83,.08) 0%,transparent 60%);pointer-events:none}
.auth-hero-logo{width:36px;height:36px;margin:0 auto .375rem;position:relative;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}
.auth-hero h3{font-family:'Chillax','General Sans',sans-serif;font-size:1.25rem;font-weight:600;color:var(--white);margin-bottom:.25rem;position:relative}
.auth-hero p{font-size:.8125rem;color:rgba(255,255,255,.6);position:relative}

/* =============================================
   AUTH TABS & FORMS
   ============================================= */
.auth-tabs{display:flex;gap:0;background:var(--bg-alt);border-radius:var(--radius-sm);padding:3px;margin-bottom:.875rem}
.auth-tab{flex:1;padding:.5rem;font-size:.8125rem;font-weight:600;color:var(--text-light);border:none;background:none;border-radius:6px;cursor:pointer;transition:all var(--transition);text-align:center}
.auth-tab.active{background:var(--white);color:var(--primary);box-shadow:var(--shadow-sm)}
.auth-tab:hover:not(.active){color:var(--text)}
.auth-error{padding:.625rem .875rem;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--radius-sm);color:#dc2626;font-size:.8125rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.auth-form-fields{display:flex;flex-direction:column;gap:.625rem}
.auth-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}

/* Input with icon */
.input-icon-wrap{position:relative}
.input-icon-wrap svg{position:absolute;left:.625rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-light);pointer-events:none;transition:color var(--transition)}
.input-icon-wrap input{width:100%;padding:.5rem .75rem .5rem 2.25rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.8125rem;outline:none;transition:border-color var(--transition),box-shadow var(--transition);background:var(--white)}
.input-icon-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.input-icon-wrap input:focus + svg,.input-icon-wrap:focus-within svg{color:var(--accent)}
.input-icon-wrap input::placeholder{color:var(--text-light);opacity:.6}

/* Password toggle */
.pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--text-light);border-radius:6px;transition:color var(--transition),background var(--transition);padding:0}
.pw-toggle:hover{color:var(--accent);background:var(--bg-alt)}
.pw-toggle svg{width:16px;height:16px}
.pw-toggle .eye-hide{display:none}
.pw-toggle.visible .eye-show{display:none}
.pw-toggle.visible .eye-hide{display:block}
.input-icon-wrap .pw-toggle + .autocomplete-list{right:auto}
.input-icon-wrap:has(.pw-toggle) input{padding-right:2.5rem}

/* Submit button */
.auth-submit{width:100%;padding:.625rem;margin-top:.875rem;font-size:.9375rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-sm);font-weight:600;transition:background var(--transition),transform .15s ease}
.auth-submit svg{width:18px;height:18px}
.auth-submit:active:not(:disabled){transform:scale(.98)}

/* Autocomplete */
.autocomplete-wrap{position:relative}
.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-md);z-index:10;max-height:180px;overflow-y:auto;margin-top:-1px;list-style:none;padding:4px 0}
.autocomplete-list:empty{display:none}
.autocomplete-list::-webkit-scrollbar{width:4px}
.autocomplete-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.autocomplete-item{padding:.5rem .75rem .5rem 2.5rem;font-size:.8125rem;color:var(--text);cursor:pointer;transition:background .15s ease}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--bg-alt);color:var(--accent)}
.autocomplete-item strong{font-weight:700;color:var(--accent)}

/* Auth textarea */
.auth-textarea{width:100%;padding:.6rem .75rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;font-family:inherit;resize:vertical;min-height:60px;transition:border-color var(--transition)}
.auth-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* Divider */
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:.625rem 0 .125rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-divider span{font-size:.75rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;font-weight:500}

/* Switch link */
.auth-switch{text-align:center;font-size:.8125rem;color:var(--text-light);margin-top:.5rem}
.auth-switch a{color:var(--accent);font-weight:600;text-decoration:none;transition:color var(--transition)}
.auth-switch a:hover{color:var(--accent-hover);text-decoration:underline}

/* Remember me checkbox */
.remember-me{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}
.remember-me input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.remember-me label{font-size:.8125rem;color:var(--text-light);cursor:pointer;user-select:none}

/* Forgot-password help on the login form */
.auth-forgot{font-size:.8rem;color:var(--text-light);line-height:1.5;margin-top:.85rem}
.auth-forgot a{color:var(--accent);font-weight:600;text-decoration:none;transition:color var(--transition)}
.auth-forgot a:hover{color:var(--accent-hover);text-decoration:underline}

/* =============================================
   CHECKOUT USER INFO CARD
   ============================================= */
.checkout-user-card{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;background:var(--bg-alt);border-radius:var(--radius-sm);margin-bottom:1.25rem;border:1px solid var(--border)}
.checkout-user-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--white);font-size:.8125rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checkout-user-details{min-width:0}
.checkout-user-name{font-size:.875rem;font-weight:600;color:var(--primary)}
.checkout-user-company{font-size:.8125rem;color:var(--text);font-weight:500}
.checkout-user-email{font-size:.75rem;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Order success */
.order-success{text-align:center;padding:2rem 1rem}
.order-success svg{width:56px;height:56px;color:var(--green);margin:0 auto 1rem}
.order-success h3{font-family:'Chillax','General Sans',sans-serif;font-size:1.25rem;margin-bottom:.5rem}
.order-success .order-id{font-size:.875rem;color:var(--accent);font-weight:600;margin-bottom:.5rem}
.order-success p{font-size:.9375rem;color:var(--text-light);line-height:1.6}

/* =============================================
   PRODUCT DETAIL MODAL
   ============================================= */
.product-card{cursor:pointer}
.product-modal{max-width:600px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.product-modal-close{position:absolute;top:.75rem;right:.75rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);border:none;cursor:pointer;color:var(--white);z-index:3;transition:background var(--transition)}
.product-modal-close:hover{background:rgba(0,0,0,.65)}
.product-modal-close svg{width:16px;height:16px}
.product-modal-img{aspect-ratio:4/3;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-modal-img img{width:100%;height:100%;object-fit:contain}
.product-modal-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--text-light);opacity:.55}
.product-modal-placeholder svg{width:56px;height:56px}
.product-modal-placeholder span{font-size:.875rem;font-weight:500}
.product-modal-body{padding:1.25rem 1.5rem 1.5rem}
.product-modal-badge{display:inline-block;padding:.1875rem .5rem;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;color:var(--white);margin-bottom:.5rem}
.product-modal-badge.food{background:var(--green)}
.product-modal-badge.nonfood{background:#8b5cf6}
.product-modal-brand{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-light);margin-bottom:.25rem}
.product-modal-name{font-family:'Chillax','General Sans',sans-serif;font-size:1.25rem;font-weight:600;color:var(--primary);line-height:1.3;margin-bottom:.375rem}
.product-modal-packaging{font-size:.875rem;color:var(--text-light);margin-bottom:.75rem}
.product-modal-price{font-size:1.125rem;font-weight:700;color:var(--primary);margin-bottom:1rem}
.product-modal-price .currency{font-size:.875rem;font-weight:500;color:var(--text-light)}
.product-modal-price.quote{font-size:.9375rem;color:var(--accent);font-weight:600}
.product-modal-actions{display:flex;gap:.5rem}
.product-modal-cart-btn{flex:1;padding:.625rem 1.25rem;background:var(--accent);color:var(--white);font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition);cursor:pointer;border:none}
.product-modal-cart-btn:hover{background:var(--accent-hover)}
.product-modal-cart-btn.added{background:var(--green)}
.product-modal-order-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.625rem 1rem;background:var(--accent-light);color:var(--accent);border:1px solid rgba(53,82,200,.25);font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition);cursor:pointer}
.product-modal-order-btn:hover{background:rgba(53,82,200,.14)}

/* =============================================
   ADD TO ONGOING ORDER — quantity dialog
   Refined B2B confirm dialog, strictly blue-family.
   ============================================= */
.ato-modal{max-width:420px;text-align:left;padding:1.85rem 1.85rem 1.6rem;position:relative}
/* The shared .auth-close-btn is styled translucent-white for the dark image
   header of the product modal — re-skin it for this light dialog so it's a
   visible, tappable × in the corner. */
.ato-modal .auth-close-btn{top:14px;right:14px;width:32px;height:32px;background:transparent;color:var(--text-light);border-radius:8px;transition:background var(--transition),color var(--transition)}
.ato-modal .auth-close-btn:hover{background:var(--bg-alt);color:var(--text)}
/* Header — gradient icon chip + title + destination order */
.ato-head{display:flex;align-items:center;gap:.8rem;margin:0 0 1.15rem;padding-right:2rem}
.ato-head-icon{width:44px;height:44px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3552c8 0%,#2a43a8 100%);color:#fff;box-shadow:0 5px 14px rgba(53,82,200,.30)}
.ato-head-icon svg{width:23px;height:23px}
.ato-head-text{min-width:0}
.ato-title{font-size:1.06rem;font-weight:700;color:var(--primary);margin:0;line-height:1.2;letter-spacing:-.01em}
.ato-target{font-size:.8rem;color:var(--text-light);margin-top:3px;line-height:1.3}
.ato-target strong{color:var(--accent);font-weight:600}
/* Product being added — tinted identity card */
.ato-product{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;background:var(--accent-light);border:1px solid rgba(53,82,200,.14);border-radius:10px;margin:0 0 1.15rem}
.ato-product-icon{width:36px;height:36px;flex-shrink:0;border-radius:8px;background:var(--white);border:1px solid rgba(53,82,200,.18);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.ato-product-icon svg{width:19px;height:19px}
.ato-product-meta{min-width:0}
.ato-product-name{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.25;word-break:break-word}
.ato-product-pkg{font-size:.78rem;color:var(--text-light);margin-top:1px}
/* Heads-up chip — this product is already on the ongoing order */
.ato-already{display:flex;gap:.5rem;align-items:flex-start;padding:.6rem .75rem;margin:0 0 1.15rem;background:#eef4ec;border:1px solid rgba(45,106,79,.22);border-radius:8px}
.ato-already svg{width:15px;height:15px;flex-shrink:0;color:var(--green);margin-top:1px}
.ato-already span{font-size:.78rem;line-height:1.45;color:var(--text)}
.ato-already strong{font-weight:700;color:var(--green)}
/* Quantity — premium − / number / + stepper (centered) */
.ato-qty-block{margin:0 0 1.5rem;text-align:center}
.ato-qty-label{display:block;font-size:.8rem;font-weight:600;color:var(--text);margin:0 0 .6rem}
.ato-stepper{display:flex;align-items:stretch;width:190px;max-width:100%;margin:0 auto;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--white);transition:border-color var(--transition),box-shadow var(--transition)}
.ato-stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.ato-step{width:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-alt);color:var(--accent);transition:background var(--transition);cursor:pointer;border:none}
.ato-step:hover{background:rgba(53,82,200,.12)}
.ato-step:active{background:rgba(53,82,200,.2)}
.ato-step:disabled{color:var(--text-light);opacity:.45;cursor:default;background:var(--bg-alt)}
.ato-step svg{width:16px;height:16px}
.ato-qty-input{flex:1;min-width:0;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;font-size:1.05rem;font-weight:700;color:var(--text);background:var(--white);-moz-appearance:textfield;appearance:textfield}
.ato-qty-input::-webkit-outer-spin-button,.ato-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ato-qty-input:focus{outline:none}
/* Reassurance note — subtle blue info line */
.ato-info{display:flex;gap:.55rem;align-items:flex-start;padding:.6rem .75rem;background:#eef1fb;border-radius:8px;margin:0 0 1.25rem}
.ato-info svg{width:15px;height:15px;flex-shrink:0;color:var(--accent);margin-top:1px}
.ato-info span{font-size:.76rem;line-height:1.45;color:var(--text-light)}
/* Actions — small Cancel, prominent primary */
.ato-actions{display:flex;gap:.6rem}
.ato-btn{flex:1 1 0;padding:.7rem 1rem;font-size:.9rem;font-weight:600;border-radius:var(--radius-sm);transition:background var(--transition),transform var(--transition),box-shadow var(--transition);cursor:pointer;border:1px solid transparent;text-align:center}
.ato-btn-ghost{background:var(--white);color:var(--text-light);border-color:var(--border)}
.ato-btn-ghost:hover{background:var(--bg-alt);color:var(--text)}
.ato-btn-primary{background:var(--accent);color:var(--white);border-color:var(--accent)}
.ato-btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(53,82,200,.3)}
.ato-btn-primary:active{transform:translateY(0);box-shadow:none}
.ato-btn-primary:disabled{opacity:.65;cursor:default;transform:none;box-shadow:none}

/* =============================================
   QUOTE REQUEST MODAL
   ============================================= */
#quote-modal .modal-body{padding:1.25rem 1.5rem 1.5rem}
.quote-guest-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:.5rem}
.quote-guest-grid label{display:block;font-size:.78rem;font-weight:600;color:var(--primary);margin-bottom:.1875rem}
.quote-guest-grid .input-icon-wrap input{width:100%}
@media(max-width:480px){.quote-guest-grid{grid-template-columns:1fr}}
.quote-user-card{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;margin-bottom:1rem}
.quote-user-card-row{font-size:.85rem;color:var(--text);padding:.1875rem 0}
.quote-user-card-row strong{color:var(--text-light);font-weight:500;margin-right:.375rem;display:inline-block;min-width:65px}
.quote-items-summary{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);padding:.75rem 1rem;margin:1rem 0 1.25rem;font-size:.8125rem;color:#1e40af;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.quote-items-summary:hover{background:#dbeafe;border-color:#93c5fd}
.quote-items-summary .quote-items-left{flex:1;min-width:0}
.quote-items-summary .quote-items-title{font-weight:700}
.quote-items-summary .quote-items-link{display:inline-flex;align-items:center;gap:2px;font-size:.75rem;font-weight:600;color:#2563eb}
.quote-items-summary .quote-items-link svg{width:14px;height:14px}
/* Quote confirmation view */
.quote-confirm-header{text-align:center;padding:1.5rem 1rem .75rem}
.quote-confirm-header svg{width:40px;height:40px;color:var(--accent);margin-bottom:.5rem}
.quote-confirm-header h3{font-family:'Chillax','General Sans',sans-serif;font-size:1.125rem;margin:0 0 .25rem;color:var(--text)}
.quote-confirm-header p{font-size:.8125rem;color:var(--text-light);margin:0}
.quote-confirm-details{padding:0 1.5rem;margin-bottom:1rem}
.quote-confirm-row{display:flex;justify-content:space-between;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.8125rem}
.quote-confirm-row:last-child{border-bottom:none}
.quote-confirm-label{color:var(--text-light);font-weight:500;flex-shrink:0;min-width:70px}
.quote-confirm-value{color:var(--text);font-weight:600;text-align:right;word-break:break-word;margin-left:1rem}
.quote-confirm-notes .quote-confirm-value{font-weight:400;font-style:italic;max-height:3.5em;overflow:hidden;text-overflow:ellipsis}
.quote-confirm-actions{display:flex;gap:.75rem;padding:0 1.5rem 1.5rem}
.quote-confirm-back{flex:1;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.625rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--white);color:var(--text);font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--transition)}
.quote-confirm-back:hover{background:var(--bg-alt);border-color:var(--text-light)}
.quote-confirm-back svg{width:16px;height:16px}
.quote-confirm-send{flex:2}

#quote-items-modal{z-index:350}
.qi-modal{display:flex;flex-direction:column;overflow:hidden}
.qi-modal-header{justify-content:flex-start;gap:.85rem;padding:1.1rem 1.25rem;flex-shrink:0}
.qi-back-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border);background:none;cursor:pointer;color:var(--text);transition:all .15s;flex-shrink:0}
.qi-back-btn:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}
.qi-back-btn svg{width:18px;height:18px}
.qi-heading{flex:1;min-width:0}
.qi-heading h3{font-size:1.05rem;line-height:1.25}
.qi-subtitle{font-size:.72rem;color:var(--t-text-sec,#7a7a6e);margin:.2rem 0 0;line-height:1.35}
.qi-count-pill{flex-shrink:0;background:var(--accent-light);color:var(--accent);font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:var(--radius-pill);white-space:nowrap}
.quote-items-modal-body{padding:0;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.qi-header{display:flex;align-items:center;gap:.75rem;padding:.45rem 1.25rem;background:var(--t-surface-alt,#ede7de);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t-text-sec,#7a7a6e);position:sticky;top:0;z-index:1}
.qi-col-cases{flex-shrink:0;width:96px;text-align:center}
.qi-remove-label{flex-shrink:0;width:32px}
.qi-row{position:relative;display:flex;align-items:center;gap:.75rem;padding:.65rem 1.25rem;border-bottom:1px solid var(--t-surface-alt,#f0ebe4);transition:background .15s}
.qi-row:last-child{border-bottom:none}
.qi-row:hover{background:var(--t-hover-bg,rgba(15,23,42,.04))}
.qi-info{flex:1;min-width:0}
.qi-name{font-size:.82rem;font-weight:600;color:var(--t-text-heading,var(--primary));line-height:1.35;word-break:break-word}
.qi-qty{flex-shrink:0;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.qi-qty:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.qi-qty-btn{width:30px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--t-text-sec,#7a7a6e);cursor:pointer;transition:all .15s;padding:0}
.qi-qty-btn:hover{background:var(--accent-light);color:var(--accent)}
.qi-qty-btn svg{width:13px;height:13px}
.qi-qty-input{width:36px;height:32px;text-align:center;border:none;border-left:1px solid var(--t-surface-alt,#f0ebe4);border-right:1px solid var(--t-surface-alt,#f0ebe4);font-size:.8rem;font-weight:700;color:var(--accent);padding:0;font-family:inherit;background:var(--white)}
.qi-qty-input:focus{outline:none}
.qi-qty-input::-webkit-inner-spin-button,.qi-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qi-qty-input{-moz-appearance:textfield}
.qi-remove{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--t-text-muted,#94a3b8);transition:all .15s;background:none;border:none;padding:0}
.qi-remove:hover{background:#fef2f2;color:#ef4444}
.qi-remove svg{width:15px;height:15px}
.qi-excluded .qi-info{opacity:.4}
.qi-removed-tag{flex-shrink:0;font-size:.66rem;font-style:italic;color:var(--t-text-muted,#a09a90)}
.qi-restore-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--accent);color:var(--accent);background:none;border-radius:var(--radius-pill);font-size:.7rem;font-weight:700;padding:.3rem .75rem;cursor:pointer;font-family:inherit;transition:all .15s}
.qi-restore-btn:hover{background:var(--accent-light)}
.qi-restore-btn svg{width:12px;height:12px}
.qi-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1.5rem;text-align:center}
.qi-empty svg{width:36px;height:36px;color:var(--t-text-muted,#a09a90)}
.qi-empty p{font-size:.9rem;font-weight:700;color:var(--t-text-heading,var(--primary));margin:0}
.qi-empty span{font-size:.75rem;color:var(--t-text-sec,#7a7a6e)}
.qi-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.25rem;border-top:1px solid var(--border);background:var(--t-surface,var(--white))}
.qi-totals{display:flex;align-items:center;gap:.9rem}
.qi-total-block{display:flex;align-items:baseline;gap:.4rem}
.qi-total-num{font-size:1.1rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.qi-total-label{font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-text-sec,#7a7a6e)}
.qi-total-sep{width:1px;height:1.25rem;background:var(--border)}
.qi-done-btn{flex-shrink:0;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-pill);padding:.6rem 1.6rem;font-size:.8rem;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s,transform .15s}
.qi-done-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.qi-confirm{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;background:var(--white);padding:5px 8px;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:2;white-space:nowrap}
.qi-confirm-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-text-sec,#7a7a6e)}
.qi-confirm-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;cursor:pointer;background:var(--white);font-family:inherit;transition:all .15s}
.qi-confirm-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.qi-confirm-btn.danger{color:#ef4444;border-color:#fca5a5}
.qi-confirm-btn.danger:hover{background:#fef2f2;border-color:#ef4444;color:#dc2626}
#quote-modal textarea{width:100%;padding:.625rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-family:inherit;transition:border-color var(--transition)}
#quote-modal textarea:focus{outline:none;border-color:var(--accent)}

/* =============================================
   TOAST
   ============================================= */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(100px);padding:.75rem 1.5rem;background:var(--primary);color:var(--white);border-radius:10px;box-shadow:var(--shadow-lg);font-size:.875rem;font-weight:500;z-index:9999;display:flex;align-items:center;gap:.625rem;opacity:0;transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 2rem)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast svg{width:18px;height:18px;color:var(--teal);flex-shrink:0}

/* =============================================
   HERO SLIDESHOW
   ============================================= */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out;animation:kenBurns 18s ease-in-out infinite alternate}
.hero-slide.active{opacity:1}
.hero-slide:nth-child(1){background-image:url('../images/hero-1-1280.webp')}
@media (max-width:768px){.hero-slide:nth-child(1){background-image:url('../images/hero-1-800.webp')}}
/* Slides 2-7 have no CSS background: landing.js injects their WebP URLs after
   window load, so first paint costs one 95KB image instead of 2.6MB of JPGs. */
.hero-slide:not(.active){animation-play-state:paused}
@keyframes kenBurns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.08) translate(-1%,-1%)}}
/* Dark overlay */
.hero-overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 0% 0%,rgba(53,82,200,.15) 0%,transparent 50%),radial-gradient(ellipse at 100% 100%,rgba(212,168,83,.08) 0%,transparent 50%),linear-gradient(135deg,rgba(15,23,42,.88) 0%,rgba(15,23,42,.7) 40%,rgba(15,23,42,.5) 70%,rgba(15,23,42,.4) 100%)}
.hero-landing .container{position:relative;z-index:5;width:100%;display:flex;align-items:center;justify-content:flex-start}
.hero-overlay::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,rgba(15,23,42,.9))}
/* Hero content */
.hero-content{max-width:680px;padding:6rem 0 8rem;position:relative;z-index:5;text-align:left;margin-right:auto;margin-left:0}
.hero-content h1{color:#fff;font-size:clamp(2.5rem,5.5vw,4rem);margin-bottom:1.5rem;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero-content h1 .highlight{color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero-content p{font-size:1.125rem;color:rgba(255,255,255,.75);max-width:540px;margin-bottom:2.5rem;line-height:1.8}
/* Glass button */
.btn-glass{background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2)}
.btn-glass:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);border-color:rgba(255,255,255,.35);box-shadow:0 4px 20px rgba(255,255,255,.1)}
.btn-glass:active{transform:translateY(0);box-shadow:none;transition-duration:.1s}
/* Hero trust strip */
.hero-trust{display:flex;align-items:center;gap:2rem;margin-top:3rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.12)}
.trust-item{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.6);font-size:.8125rem;font-weight:500}
.trust-item svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}
/* Slide indicators */
.hero-indicators{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:.5rem}
.hero-dot{width:32px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;transition:all .4s ease;border:none;padding:10px 0;background-clip:content-box}
.hero-dot.active{background:#fff;width:48px}
/* Floating stats bar */
.hero-stats{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);z-index:10;width:100%;max-width:900px;padding:0 2rem}
.hero-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;box-shadow:0 8px 40px rgba(15,23,42,.12),0 0 0 1px rgba(255,255,255,.8);overflow:hidden}
.hero-stat{padding:1.5rem;text-align:center;position:relative}
.hero-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(15,23,42,.08)}
.hero-stat-number{display:block;font-family:'Chillax','General Sans',sans-serif;font-size:1.75rem;font-weight:500;color:var(--primary);line-height:1}
.hero-stat-label{display:block;font-size:.75rem;color:var(--text-light);font-weight:500;margin-top:.375rem;text-transform:uppercase;letter-spacing:.05em}

/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-child{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.visible .reveal-child{opacity:1;transform:translateY(0)}
.reveal.visible .reveal-child:nth-child(1){transition-delay:.08s}
.reveal.visible .reveal-child:nth-child(2){transition-delay:.16s}
.reveal.visible .reveal-child:nth-child(3){transition-delay:.24s}
.reveal.visible .reveal-child:nth-child(4){transition-delay:.32s}
.reveal.visible .reveal-child:nth-child(5){transition-delay:.4s}
.reveal.visible .reveal-child:nth-child(6){transition-delay:.48s}
.reveal.visible .reveal-child:nth-child(7){transition-delay:.56s}
.reveal.visible .reveal-child:nth-child(8){transition-delay:.64s}

/* =============================================
   SECTION DOT NAV
   ============================================= */
.section-dots{
    position:fixed;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    z-index:1000;
    padding:10px 5px;
    transition:all .5s ease;
}
.section-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    padding:0;
    position:relative;
    transition:all .4s cubic-bezier(.16,1,.3,1);
}
.section-dot::before{
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%;
    border:1px solid transparent;
    transition:all .4s cubic-bezier(.16,1,.3,1);
}
.section-dot::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    opacity:0;
    transition:opacity .3s ease;
}
.section-dot:hover{
    background:rgba(255,255,255,.7);
    box-shadow:0 0 8px rgba(255,255,255,.3);
}
.section-dot:hover::after{
    opacity:1;
}
.section-dot.active{
    width:6px;
    height:6px;
    background:rgba(255,255,255,.95);
    box-shadow:0 0 10px rgba(255,255,255,.4),0 0 20px rgba(255,255,255,.1);
}
.section-dot.active::before{
    border-color:rgba(255,255,255,.3);
}

/* Light background sections */
.section-dots.on-light .section-dot{
    background:rgba(15,23,42,.2);
}
.section-dots.on-light .section-dot::after{
    background:rgba(15,23,42,.04);
}
.section-dots.on-light .section-dot:hover{
    background:rgba(15,23,42,.5);
    box-shadow:0 0 8px rgba(15,23,42,.15);
}
.section-dots.on-light .section-dot.active{
    background:rgba(15,23,42,.65);
    box-shadow:0 0 10px rgba(15,23,42,.2),0 0 20px rgba(15,23,42,.05);
}
.section-dots.on-light .section-dot.active::before{
    border-color:rgba(15,23,42,.15);
}

/* Hide on mobile */
@media(max-width:768px){
    .section-dots{display:none}
}

/* =============================================
   PAGE LOAD ORCHESTRATION
   ============================================= */
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes heroTextReveal{from{opacity:0;transform:translateY(48px) skewY(1.5deg)}to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes heroHighlight{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes subtleBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Landing — orchestrated entrance (replay on scroll) */
.page-landing .nav{opacity:0;animation:fadeSlideDown .8s cubic-bezier(.16,1,.3,1) .15s both}
.page-landing .hero-slides{opacity:0;animation:fadeIn .35s ease both}
/* Hero content — scroll-triggered replay */
.page-landing .hero-content h1{opacity:0;transform:translateY(48px) skewY(1.5deg);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-content p{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-buttons{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-buttons .btn:nth-child(1){opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-buttons .btn:nth-child(2){opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-trust{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.page-landing .hero-trust .trust-item{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
/* When hero section is visible */
.hero-landing.hero-visible .hero-content h1{opacity:1;transform:translateY(0) skewY(0);transition-delay:.3s}
.hero-landing.hero-visible .hero-content p{opacity:1;transform:translateY(0);transition-delay:.7s}
.hero-landing.hero-visible .hero-buttons{opacity:1;transform:translateY(0);transition-delay:1s}
.hero-landing.hero-visible .hero-buttons .btn:nth-child(1){opacity:1;transform:translateY(0);transition-delay:1.1s}
.hero-landing.hero-visible .hero-buttons .btn:nth-child(2){opacity:1;transform:translateY(0);transition-delay:1.3s}
.hero-landing.hero-visible .hero-trust{opacity:1;transform:translateY(0);transition-delay:1.5s}
.hero-landing.hero-visible .hero-trust .trust-item:nth-child(1){opacity:1;transform:translateY(0);transition-delay:1.7s}
.hero-landing.hero-visible .hero-trust .trust-item:nth-child(2){opacity:1;transform:translateY(0);transition-delay:2s}
.hero-landing.hero-visible .hero-trust .trust-item:nth-child(3){opacity:1;transform:translateY(0);transition-delay:2.3s}

/* Products page — cascade entrance */
.page-products .nav{opacity:0;animation:fadeSlideDown .7s cubic-bezier(.16,1,.3,1) .05s both}
.page-products .products-header{opacity:0;animation:fadeIn .9s cubic-bezier(.4,0,.2,1) .15s both}
.page-products .products-header h1{opacity:0;animation:heroTextReveal .9s cubic-bezier(.16,1,.3,1) .25s both}
.page-products .products-header p{opacity:0;animation:fadeSlideUp .7s cubic-bezier(.16,1,.3,1) .4s both}
.page-products .header-cats{opacity:0;animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .5s both}
.page-products .products-toolbar{opacity:0;animation:fadeSlideUp .6s cubic-bezier(.16,1,.3,1) .55s both}

/* Activate page — entrance */
.page-activate .activate-card{opacity:0;animation:fadeSlideUp .8s cubic-bezier(.16,1,.3,1) .15s both}
/* Stats section needs to remain visible for counter observer — override opacity once revealed */
.stats.reveal{will-change:opacity,transform}

/* Hero trust strip — now handled via .hero-visible class above */

/* =============================================
   ENHANCED ANIMATIONS
   ============================================= */

/* --- Keyframes --- */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes underlineDraw{from{width:0}to{width:100%}}
@keyframes goldShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes hoverFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fadeSlideRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleReveal{from{opacity:0;transform:scale(.85) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* --- Section tags — animated underline on reveal --- */
.section-tag{position:relative;display:inline-block}
.section-tag::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:2px;transition:width 1.2s cubic-bezier(.16,1,.3,1) .5s}
.reveal.visible .section-tag::after{width:100%}

/* --- Mission/Vision cards — slide in from left --- */
.about-mv-item{opacity:0;transform:translateX(-60px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.reveal.visible .about-mv-item{opacity:1;transform:translateX(0)}
.reveal.visible .about-mv-item:nth-child(1){transition-delay:.6s}
.reveal.visible .about-mv-item:nth-child(2){transition-delay:1s}

/* --- Trust badges (CTA section) — sequential pop-in --- */
.trust-badges .trust-badge{opacity:0;transform:scale(.4);transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1)}
.snap-section-contact .trust-badges .trust-badge,
.cta .trust-badges .trust-badge{opacity:0;transform:scale(.7)}
/* Trigger via JS scroll or just use animation-delay with viewport entry */
@keyframes trustBadgePop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* --- Featured product cards — hover float --- */
.popular-card:hover{animation:hoverFloat 2s ease-in-out infinite;box-shadow:0 16px 40px rgba(15,23,42,.12)}
.popular-card:not(:hover){animation:none}

/* --- Gold shimmer on REX text & gold icons --- */
.about-text strong[style*="gold"]{background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 40%,#ffe8a3 50%,var(--gold) 60%,var(--gold) 100%);background-size:400% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:goldShimmer 8s ease-in-out infinite}
/* REX call-out — plain white (owner call: gold was hard to spot on the photo).
   Pure #fff + heavier weight lifts it off the .95-white body copy around it.
   An underline was tried and dropped — the weight alone carries it. */
.about-text strong.about-rex{color:#fff;font-weight:700}

/* --- About card icons — pop on reveal --- */
.about-card .about-card-icon{opacity:0;transform:scale(.3) rotate(-12deg);transition:opacity 1s cubic-bezier(.34,1.56,.64,1),transform 1s cubic-bezier(.34,1.56,.64,1)}
.reveal.visible .about-card .about-card-icon{opacity:1;transform:scale(1) rotate(0)}
.reveal.visible .about-card:nth-child(1) .about-card-icon{transition-delay:.4s}
.reveal.visible .about-card:nth-child(2) .about-card-icon{transition-delay:.7s}
.reveal.visible .about-card:nth-child(3) .about-card-icon{transition-delay:1s}
.reveal.visible .about-card:nth-child(4) .about-card-icon{transition-delay:1.3s}

/* --- About cards — scale reveal with stagger --- */
.about-cards .about-card{opacity:0;transform:scale(.85) translateY(30px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible .about-card{opacity:1;transform:scale(1) translateY(0)}
.reveal.visible .about-card:nth-child(1){transition-delay:.3s}
.reveal.visible .about-card:nth-child(2){transition-delay:.5s}
.reveal.visible .about-card:nth-child(3){transition-delay:.7s}
.reveal.visible .about-card:nth-child(4){transition-delay:.9s}

/* --- Featured product cards — staggered scale-up on reveal --- */
.popular-grid .popular-card{opacity:0;transform:translateY(40px) scale(.9);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible .popular-grid .popular-card{opacity:1;transform:translateY(0) scale(1)}
.reveal.visible .popular-grid .popular-card:nth-child(1){transition-delay:.3s}
.reveal.visible .popular-grid .popular-card:nth-child(2){transition-delay:.5s}
.reveal.visible .popular-grid .popular-card:nth-child(3){transition-delay:.7s}
.reveal.visible .popular-grid .popular-card:nth-child(4){transition-delay:.9s}
.reveal.visible .popular-grid .popular-card:nth-child(5){transition-delay:1.1s}

/* --- Featured section heading — dramatic entrance --- */
.popular-products .section-header h2{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.popular-products .section-header p{opacity:0;transform:translateY(25px);transition:opacity 1s cubic-bezier(.16,1,.3,1) .4s,transform 1s cubic-bezier(.16,1,.3,1) .4s}
.reveal.visible .section-header h2,.reveal.visible .section-header p{opacity:1;transform:translateY(0)}

/* --- Button shine effect on hover --- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:none}
.btn-primary:hover::after{left:120%;transition:left .5s ease}

/* --- Respect reduced motion preferences --- */
@media(prefers-reduced-motion:reduce){
    .popular-card:hover{animation:none}
    .about-text strong[style*="gold"]{animation:none;-webkit-text-fill-color:var(--gold);background:none}
    .btn-primary::after{display:none}
    .about-mv-item,.about-card .about-card-icon,.trust-badges .trust-badge{opacity:1;transform:none;transition:none}
    .section-tag::after{width:100%;transition:none}
    .hero-trust,.hero-trust .trust-item{opacity:1;animation:none}
}

/* =============================================
   STAT ICONS & ACCENTS
   ============================================= */
.stat-icon{display:block;font-size:1.5rem;margin-bottom:.375rem;line-height:1}
.stat-card{position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:0 0 var(--radius) var(--radius)}

/* =============================================
   ENHANCED CATEGORY CARDS
   ============================================= */
.cat-card{position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition)}
.cat-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.cat-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.08;transition:opacity var(--transition)}
.cat-card:hover .cat-card-bg{opacity:.14}
.cat-card-count{font-size:.75rem;font-weight:600;color:var(--white);background:var(--accent);padding:.1875rem .625rem;border-radius:var(--radius-pill);display:inline-block}

/* =============================================
   POPULAR PRODUCTS
   ============================================= */
.popular-products{padding:5rem 0}
.popular-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem}
.popular-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.popular-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(15,23,42,.12)}
.popular-card:active{transform:scale(.97);transition-duration:.1s}
.popular-card-inner{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1;opacity:0;transition:opacity .8s ease}
.popular-card-inner.show{opacity:1}
.popular-card-img{aspect-ratio:4/3;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;overflow:hidden}
.popular-card-img img{width:100%;height:100%;object-fit:cover}
.popular-card-img-placeholder{color:var(--border);opacity:.4}
.popular-card-img-placeholder svg{width:36px;height:36px}
.popular-card-body{padding:.875rem;display:flex;flex-direction:column;height:5.5rem}
.popular-card-brand{font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light);margin-bottom:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.popular-card-name{font-family:'General Sans',sans-serif;font-size:.8125rem;font-weight:500;color:var(--primary);line-height:1.35;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0;min-height:2.7em}
.popular-card-meta{font-size:.75rem;color:var(--text-light);margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* Frosted product cards — the ship video reads through them. */
.page-landing .popular-products .popular-card{min-width:0;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 34px -16px rgba(15,23,42,.45);contain:paint}
.page-landing .popular-products .popular-card:hover{background:rgba(255,255,255,.52);box-shadow:0 18px 44px -18px rgba(15,23,42,.45)}
.page-landing .popular-products .popular-card-img{background:rgba(255,255,255,.06)}
.page-landing .popular-products .popular-card-body{background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.6) 100%)}
.popular-products .popular-card-inner{min-width:0}
.popular-products .popular-card-name{overflow-wrap:anywhere}
.page-landing .popular-products .popular-card-name{color:#0f172a}
.page-landing .popular-products .popular-card-brand,
.page-landing .popular-products .popular-card-meta{color:#475569}
/* No wash over the footage — so when the video is up, the section header
   flips to light ink with a soft shadow to stay readable on moving water. */
.popular-products.has-bg-video .section-header h2{color:#fff;text-shadow:0 2px 22px rgba(15,23,42,.55),0 1px 3px rgba(15,23,42,.35)}
.popular-products.has-bg-video .section-header p{color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(15,23,42,.6),0 1px 2px rgba(15,23,42,.4)}
.popular-products.has-bg-video .section-tag{color:#ffd98a;text-shadow:0 1px 10px rgba(15,23,42,.5)}
/* Perf: the blurred glow blobs are the no-video fallback. While the video is
   playing they are completely hidden behind it — keep them out of the frame. */
.popular-products.has-bg-video .popular-bg-glow{display:none}
/* Phones: keep the see-through cards but skip the backdrop blur — real mobile
   GPUs pay a lot for it over a playing video. Slightly milkier to compensate. */
@media (max-width:768px){
  .page-landing .popular-products .popular-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.44)}
  .page-landing .popular-products .popular-card-body{background:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.68) 100%)}
}

/* =============================================
   ABOUT CARD ENHANCEMENTS
   ============================================= */
.about-card{border-left:3px solid transparent;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s ease}
.about-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(15,23,42,.1);border-left-color:var(--accent)}
.about-card:nth-child(2):hover{border-left-color:var(--gold)}
.about-card:nth-child(3):hover{border-left-color:var(--teal)}
.about-card:nth-child(4):hover{border-left-color:var(--green)}

/* =============================================
   CTA ENHANCEMENTS
   ============================================= */
.cta-wave{color:var(--bg-alt);margin-bottom:-1px;line-height:0;background:var(--bg-alt)}
.cta-wave svg{width:100%;height:60px;display:block}
.cta-wave svg path{fill:#0f172a}
.page-landing .cta-wave{background:#0f172a}
.page-landing .cta-wave svg path{fill:#0f172a}
.trust-badges{display:flex;justify-content:center;gap:2rem;margin-top:2rem;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.6)}
.trust-badge svg{width:18px;height:18px;color:var(--gold);flex-shrink:0}

/* =============================================
   BRAND MARQUEE
   ============================================= */
.brand-marquee{padding:1.5rem 0;background:var(--bg-alt);border-top:1px solid var(--border);overflow:hidden}
.marquee-track{position:relative;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-content{display:flex;gap:2rem;animation:marqueeScroll 30s linear infinite;width:max-content;align-items:center}
.marquee-content:hover{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:500;color:var(--text-light);white-space:nowrap;opacity:.6;transition:opacity var(--transition)}
.marquee-item:hover{opacity:1}
.marquee-item img{width:28px;height:28px;border-radius:6px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.05)}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* =============================================
   MOBILE MENU
   ============================================= */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:98;opacity:0;pointer-events:none;transition:opacity var(--transition)}
.mobile-overlay.active{opacity:1;pointer-events:auto}
.mobile-menu{font-family:'Chillax','General Sans',sans-serif;display:none;position:fixed;top:0;right:0;bottom:0;width:min(300px,85vw);background:var(--white);z-index:99;padding:5rem 1.5rem 1.5rem;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:-8px 0 32px rgba(0,0,0,.1);overflow-y:auto}
.page-landing .mobile-menu{background:#1e293b}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu a{display:block;padding:.875rem 0;font-size:1rem;font-weight:400;color:var(--primary);border-bottom:1px solid var(--border)}
.page-landing .mobile-menu a{color:#f1f5f9;border-bottom-color:#334155}
.page-products .mobile-menu{background:#1e293b}
.page-products .mobile-menu a{color:#f1f5f9;border-bottom-color:#334155}
.mobile-menu a:hover{color:var(--accent)}

/* =============================================
   RESPONSIVE — 1024px
   ============================================= */
@media(max-width:1024px){
    .products-grid{grid-template-columns:repeat(4,1fr)}
    .about .container{grid-template-columns:1fr;gap:2.5rem}
    .about-cards{max-width:480px;margin:0 auto}
    .footer-grid{grid-template-columns:1fr 1fr}
    .nav-link{display:none}
    .nav-cta-link,.nav-cta-outline{display:none}
    .nav-hamburger{display:flex}
    .mobile-overlay,.mobile-menu{display:block}
    .nav-user-btn,.nav-user-info{display:none!important}
    .cats-grid{grid-template-columns:repeat(3,1fr)}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .hero-stats{max-width:750px}
    .popular-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .toolbar-search{width:auto;flex:1;min-width:0;max-width:260px}
    .toolbar-search input:focus{width:100%}
}

/* =============================================
   RESPONSIVE — 768px
   ============================================= */
@media(max-width:768px){
    .products-grid{grid-template-columns:repeat(3,1fr)}
    .products-toolbar{flex-direction:column;align-items:stretch}
    .products-toolbar-left{justify-content:center}
    .toolbar-right{width:100%;justify-content:space-between;flex-wrap:wrap}
    .toolbar-search{flex:1;min-width:0;width:auto}
    .toolbar-search input:focus{width:100%}
    .sort-select{font-size:.75rem}
    .about-cards{grid-template-columns:1fr 1fr}
    /* One column stacked the brand + all 3 link sections into ~2.5 screens
       of footer on phones. Balanced 2x2 instead (brand|Shop, Company|Support,
       same shape as the landing footer) — an odd column count would leave
       the last section dangling alone on its row (owner flagged it). */
    .footer{padding:2.5rem 0 0}
    .footer-grid{grid-template-columns:1fr 1fr;gap:1.25rem 2rem;padding-bottom:1.5rem}
    .footer-brand img{height:28px}
    .footer-brand p{font-size:.75rem;line-height:1.6}
    .footer-bottom{padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px))}
    .form-grid{grid-template-columns:1fr}
    .cats-grid{grid-template-columns:repeat(2,1fr)}
    .header-cats{gap:.375rem}
    .hero-buttons{flex-direction:column;align-items:center}
    .hero-buttons .btn-lg{width:100%;max-width:280px}
    .product-modal{max-width:100%}
    .go-top{bottom:1.25rem;right:1.25rem;width:40px;height:40px}
    .go-top svg{width:18px;height:18px}
    .products-toolbar.stuck{margin-left:-1.5rem;margin-right:-1.5rem;padding:.625rem 1.5rem}
    /* Disable snap scroll on mobile — content can't fit in one screen */
    .page-landing{overflow:visible;height:auto}
    .snap-wrapper{height:auto;overflow:visible}
    .snap-section{height:auto;min-height:0;overflow:visible}
    /* Hero stays full screen */
    .snap-section.hero-landing{min-height:100vh;min-height:100dvh}
    .hero-content{max-width:100%;text-align:center;padding:5rem 0 4rem}
    .hero-content p{margin-left:auto;margin-right:auto;font-size:1rem}
    .hero-content h1{font-size:clamp(1.75rem,6vw,2.5rem)}
    .hero-landing .hero-buttons{justify-content:center}
    .hero-overlay{background:linear-gradient(180deg,rgba(15,23,42,.75) 0%,rgba(15,23,42,.55) 40%,rgba(15,23,42,.8) 100%)}
    /* Products */
    .snap-section.popular-products{padding:3.5rem 0}
    .snap-section.popular-products .container{padding-top:0;padding-bottom:0}
    .popular-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
    .popular-card:nth-child(5){display:none}
    .section-header{margin-bottom:2rem}
    .section-header h2{font-size:clamp(1.5rem,5vw,2rem)}
    /* About */
    .snap-section.about{padding:3.5rem 0}
    .snap-section.about .container{padding-top:0;padding-bottom:0}
    .about .container{gap:2rem}
    .about-card{padding:1rem}
    .about-card h3{font-size:.8125rem}
    .about-card p{font-size:.75rem}
    .about-card-icon{width:32px;height:32px;border-radius:8px;margin-bottom:.5rem}
    .about-card-icon svg{width:16px;height:16px}
    .about-mission-vision{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}
    .about-mv-item{padding:.75rem 1rem}
    .about-mv-item h3{font-size:.75rem}
    .about-mv-item p{font-size:.75rem}
    /* Contact — no snap, natural flow */
    .snap-section-contact{min-height:0}
    .contact-top{padding-top:0}
    .contact-top .cta{padding:3rem 0}
    .snap-section-contact .footer-grid{grid-template-columns:1fr 1fr;gap:1rem;padding-bottom:1rem}
    .snap-section-contact .footer{padding:1.5rem 0 0}
    .snap-section-contact .footer-brand p{font-size:.75rem;max-width:220px}
    .snap-section-contact .footer-brand img{height:28px}
    .snap-section-contact .footer-bottom{padding:.75rem 0;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
    .trust-badges{gap:1rem}
    .trust-badge{font-size:.75rem}
}

/* =============================================
   RESPONSIVE — 480px
   ============================================= */
@media(max-width:480px){
    .products-grid{grid-template-columns:1fr 1fr;gap:.75rem}
    .product-body{padding:.75rem}
    .product-name{font-size:.8125rem}
    /* One row: Add to Cart stretches, the round add-to-order button (when an
       unlocked ongoing order exists) sits beside it at the same height. */
    .product-footer{align-items:stretch;gap:.375rem}
    .add-to-cart{flex:1;min-width:0;text-align:center;padding:.5rem .25rem}
    .grid-qty{flex:1;min-width:0;justify-content:center}
    .grid-qty .grid-qty-btn{width:34px}
    .grid-qty-val{flex:1}
    .nav-search{display:none}
    .cats-grid{grid-template-columns:1fr 1fr;gap:.75rem}
    .stats-grid{grid-template-columns:1fr 1fr;gap:.75rem}
    .stat-card{padding:1.25rem 1rem}
    .stat-number{font-size:1.75rem}
    .auth-form-row{grid-template-columns:1fr}
    .auth-hero{padding:1.5rem 1.25rem 1rem}
    .auth-hero-logo{height:30px}
    .auth-hero h3{font-size:1.125rem}
    /* Hero */
    .hero-content{padding:4rem 0 3rem}
    .hero-content h1{font-size:clamp(1.5rem,7vw,2.25rem)}
    .hero-content p{font-size:.875rem;line-height:1.6;margin-bottom:1.5rem}
    .hero-landing .hero-buttons{flex-direction:column;align-items:center}
    .hero-landing .hero-buttons .btn-lg{width:100%;max-width:260px;justify-content:center;padding:.75rem 1.5rem;font-size:.8125rem}
    /* Products */
    .snap-section.popular-products{padding:2.5rem 0}
    .popular-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}
    .popular-card-body{padding:.625rem;height:4.5rem}
    .popular-card-name{font-size:.75rem}
    .popular-card-brand{font-size:.6875rem}
    .popular-card-meta{font-size:.6875rem}
    .hero-trust{flex-wrap:wrap;justify-content:center;gap:.75rem 1.25rem}
    .section-cta{margin-top:1.5rem}
    .section-cta .btn{font-size:.8125rem;padding:.625rem 1.25rem}
    /* About */
    .snap-section.about{padding:2.5rem 0}
    .about-text{font-size:.875rem;line-height:1.6;margin-bottom:.75rem}
    .about-cards{grid-template-columns:1fr 1fr;gap:.75rem}
    .about-card{padding:.75rem}
    .about-card h3{font-size:.75rem}
    .about-card p{font-size:.6875rem}
    .about-card-icon{width:28px;height:28px;margin-bottom:.375rem}
    .about-card-icon svg{width:14px;height:14px}
    .about h2{font-size:clamp(1.25rem,5vw,1.75rem)}
    .about-mission-vision{grid-template-columns:1fr;gap:.625rem}
    .about-mv-item{padding:.625rem .875rem}
    .about-mv-item h3{font-size:.6875rem}
    .about-mv-item p{font-size:.6875rem;line-height:1.5}
    /* Contact */
    .contact-top .cta{padding:2.5rem 0}
    .cta-content h2{font-size:clamp(1.25rem,5vw,1.75rem)}
    .cta-content p{font-size:.875rem;margin-bottom:1.5rem}
    .snap-section-contact .footer-grid{grid-template-columns:1fr 1fr;gap:.75rem}
    .snap-section-contact .footer{padding:1rem 0 0}
    .snap-section-contact .footer-col h4{font-size:.75rem;margin-bottom:.5rem}
    .snap-section-contact .footer-col a{font-size:.75rem}
    .snap-section-contact .footer-col li{margin-bottom:.25rem}
    .snap-section-contact .footer-brand img{height:24px}
    .snap-section-contact .footer-brand p{font-size:.6875rem;max-width:180px}
    .snap-section-contact .footer-social a{width:28px;height:28px}
    .snap-section-contact .footer-social svg{width:14px;height:14px}
    .snap-section-contact .footer-bottom{font-size:.625rem}
    .trust-badges{flex-direction:column;align-items:center;gap:.75rem}
    /* Nav */
    .nav-logo img{height:36px}
    .quote-guest-grid{grid-template-columns:1fr}
}

/* =============================================
   iOS / CROSS-DEVICE FIXES
   ============================================= */

/* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
@media(max-width:768px){
    input,select,textarea{font-size:16px!important}
    /* iOS also zooms on contenteditable focus (cart draft rename) */
    [contenteditable="true"]{font-size:16px!important}
}

/* iOS form input reset — remove default rounded/shadow styling */
input,select,textarea{-webkit-appearance:none;appearance:none}
input[type="checkbox"],input[type="radio"]{-webkit-appearance:auto;appearance:auto}

/* Password dots render as the field's font bullet glyph — the system font's
   disc looks huge at the 16px mobile size (iOS especially). Verdana's bullet
   is much finer, so the dots shrink WITHOUT lowering font-size (16px must
   stay or iOS zooms the page on focus). Placeholder keeps the brand font. */
input[type="password"]{font-family:Verdana,sans-serif;letter-spacing:.08em}
input[type="password"]::placeholder{font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:normal}

/* Branded confirm dialog — replaces the browser's native confirm() popup.
   Mirrors the client portal's mini-modal anatomy (centered icon circle,
   title, sub, full-width paired footer buttons) so confirmations look the
   same across the storefront and the portal. */
/* Values copied verbatim from account.html's .mini/.btn tokens (ink #0c1430,
   bg #f6f8ff, blue-deep #2640a8, pill buttons, Poppins title) so a Sign out
   here is indistinguishable from a Sign out in the portal. */
.bp-confirm{max-width:400px;text-align:center;border-radius:18px}
.bp-confirm-head{padding:28px 28px 4px}
.bp-confirm-icon{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:600;margin:0 auto 14px;background:#eff3ff;color:#3552c8;box-shadow:0 0 0 6px rgba(122,150,255,.18)}
.bp-confirm-icon.is-danger{background:#fef2f2;color:#dc2626;box-shadow:0 0 0 6px rgba(220,38,38,.1)}
.bp-confirm-title{margin:0 0 8px;font-family:'Chillax','General Sans',sans-serif;font-size:1.3rem;font-weight:600;color:#0c1430;letter-spacing:-.01em}
.bp-confirm-msg{margin:0;color:#475569;font-size:.92rem;line-height:1.55}
.bp-confirm-actions{display:flex;gap:10px;padding:18px 28px 24px;background:#f6f8ff;border-top:1px solid rgba(15,23,42,.06);margin-top:18px}
.bp-confirm-actions.is-stacked{flex-direction:column}
.bp-confirm-btn{flex:1;padding:11px 22px;border:1px solid var(--border);border-radius:999px;font-weight:500;font-size:.86rem;min-height:44px;background:#fff;color:#475569;cursor:pointer;font-family:inherit;transition:all .22s ease}
.bp-confirm-btn:hover{background:var(--bg-alt);color:#0c1430}
.bp-confirm-btn.is-primary{background:#0c1430;border-color:#0c1430;color:#fff;font-weight:500}
.bp-confirm-btn.is-primary:hover{background:#2640a8;border-color:#2640a8;color:#fff}
.bp-confirm-btn.is-danger{background:#dc2626;border-color:#dc2626;color:#fff}
.bp-confirm-btn.is-danger:hover{background:#b91c1c;color:#fff}

/* iOS address-bar sizing: the drawer and menu are anchored top:0/bottom:0
   in their base rules (fixed insets track the REAL visible bottom edge) —
   100dvh is NOT used for them because iOS Safari leaves dvh stale while the
   body is scroll-locked, which clipped their footers behind the bottom bar. */
.modal{max-height:90vh;max-height:90dvh}
.privacy-modal{max-height:80vh;max-height:80dvh}

/* Safe area insets for notched devices */
.go-top{bottom:calc(2rem + env(safe-area-inset-bottom,0px));right:calc(2rem + env(safe-area-inset-right,0px))}
.cart-footer{padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
.modal-overlay{padding:calc(1rem + env(safe-area-inset-top,0px)) calc(1rem + env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) calc(1rem + env(safe-area-inset-left,0px))}
.mobile-menu{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))}

/* Touch target sizing for mobile */
@media(max-width:768px){
    .grid-qty-btn{width:40px;height:40px;font-size:.875rem}
    .grid-qty-val{width:40px;line-height:40px;font-size:.8125rem}
    .qty-btn{width:40px;height:40px}
    .qty-input{width:44px;height:40px}
    .qty-value{line-height:40px}
    .qi-qty-btn{width:38px;height:44px}
    .qi-qty-btn svg{width:15px;height:15px}
    .qi-qty-input{width:44px;height:44px;font-size:16px}
    .qi-remove{width:44px;height:44px}
    .qi-remove svg{width:18px;height:18px}
    .qi-row{padding:.65rem 1rem;gap:.5rem}
    .qi-header{padding:.45rem 1rem}
    .qi-col-cases{width:120px}
    .qi-remove-label{width:44px}
    .qi-modal-header{padding:1rem}
    .qi-back-btn{width:44px;height:44px}
    .qi-subtitle{display:none}
    .qi-footer{padding:.75rem 1rem;flex-wrap:wrap;row-gap:.5rem}
    .qi-done-btn{min-height:44px}
    .qi-restore-btn{min-height:40px}
    .qi-confirm{right:.5rem;flex-wrap:wrap;white-space:normal;justify-content:flex-end;max-width:calc(100% - 3.5rem)}
    .qi-confirm-btn{min-height:38px}
    .cart-item-remove{font-size:.75rem;padding:.25rem .5rem;min-height:32px;display:inline-flex;align-items:center}
    .ci-confirm-btn{min-height:38px;padding:.25rem .6rem;font-size:.75rem}
    /* While the row is asking "Remove?", the qty stepper is irrelevant —
       hide it so the question takes its line instead of wrapping below. */
    .cart-item-actions:has(.ci-confirm) .qty-control{display:none}
    .ci-confirm{flex:1 1 100%;display:flex;margin-left:0;gap:8px}
    .ci-confirm-label{margin-right:auto;align-self:center}
    .filter-pill{padding:.5rem 1rem;min-height:40px}
    .cart-btn{min-height:40px}
    .product-brand{font-size:.6875rem}
    .product-badge{font-size:.6875rem}
    .cart-badge{font-size:.6875rem}
    .header-cat{padding:.5rem 1rem}
    .hero-dot{height:5px}
    .go-top{bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));right:calc(1.25rem + env(safe-area-inset-right,0px))}
    .toast{bottom:auto;top:calc(var(--nav-height,.5rem) + .5rem);white-space:normal;text-align:left;line-height:1.4}
    /* While the toolbar is pinned it owns the band right under the nav —
       drop the toast below it (~112px toolbar + breathing room) so add-to-
       cart messages never sit on top of the search/filter strip and swallow
       taps. The landscape block below resets this where nothing is pinned. */
    body:has(.products-toolbar.stuck) .toast{top:calc(var(--nav-height,.5rem) + 120px)}
    /* position:fixed so the panel centers on the VIEWPORT, not on its trigger —
       a trigger at the left of the wrapped pill row would otherwise push half
       the near-full-width panel off-screen. top MUST be reset: the base rule's
       top:calc(100% + 6px) means "below the trigger" for an absolute panel,
       but for a fixed one it's 100% of the VIEWPORT — i.e. off-screen below.
       Pin it just under the fixed navbar instead. */
    .dropdown-panel{display:none;min-width:0;width:calc(100vw - 3rem);position:fixed;left:50%;top:calc(var(--nav-height) + 10px);transform:translateX(-50%);z-index:120}
    .dropdown.open .dropdown-panel{display:block;transform:translateX(-50%);animation:ddPanelIn .18s ease}
    /* Short screens: let the option list shrink and scroll instead of the
       panel's bottom running past the viewport. */
    .dropdown-panel .dropdown-list{max-height:min(280px,55vh);max-height:min(280px,55dvh)}
    /* Phones keep the toolbar pinned while scrolling (owner call, Jul 16):
       the search row and the one-row filter/sort strip stay reachable all
       the way down the list. The count line hides while stuck so the pinned
       chrome stays two rows (~110px under the nav); it reappears at the top. */
    .products-toolbar.stuck .products-count{display:none}
    /* Escape/utility affordances up to tappable size */
    .auth-close-btn,.ato-modal .auth-close-btn,.product-modal-close,.cart-close{width:42px;height:42px}
    .pw-toggle{width:40px;height:40px}
    .input-icon-wrap:has(.pw-toggle) input{padding-right:3rem}
    /* Cart drawer draft controls */
    .cart-draft-action{width:40px;height:40px}
    .cart-draft-action svg{width:16px;height:16px}
    .cart-drafts-new{width:40px;height:40px}
    .cart-draft-target-btn{padding:.6rem .5rem}
    .cart-draft-tab{min-height:38px}
    .cart-item-remove{min-height:38px}
    .checkout-btn{min-height:44px}
    /* Primary purchase actions on the cards + auth/filter controls */
    .add-to-cart{min-height:40px}
    .add-to-order{width:40px;height:40px}
    .dropdown-trigger{min-height:40px}
    .auth-tab{min-height:40px}
    /* Hero slide dots: same bar, bigger hit area */
    .hero-dot{height:5px;padding:14px 8px;width:48px}
    .hero-dot.active{width:56px}
    /* Give the product modal a scroll path (image keeps natural size) */
    .product-modal{overflow-y:auto}
    .product-modal-img{flex-shrink:0}
    /* Sharing one row makes the long ongoing-order label wrap and inflate
       BOTH buttons — stack them full-width instead (one line, ~44px each). */
    .product-modal-actions{flex-direction:column}
    .product-modal-cart-btn,.product-modal-order-btn{width:100%;padding:.7rem 1rem}
    /* Toolbar: ONE swipeable row of filters (All/Food/Non-Food + All
       Categories + Brand A–Z, moved in by placeSortControl), a full-width
       search row below it, then the count. */
    .products-toolbar{flex-direction:column;align-items:stretch;gap:.6rem}
    /* justify-content MUST reset to start here: the tablet rule centers the
       row, and centered content wider than the screen hangs off the LEFT
       edge where no amount of swiping can reach it (scrollLeft stops at 0). */
    .products-toolbar-left{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:.5rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;min-width:0;max-width:100%}
    .products-toolbar-left::-webkit-scrollbar{display:none}
    .products-toolbar-left>*{flex:0 0 auto}
    .products-toolbar-left .dropdown-trigger,.products-toolbar-left .sort-select{min-height:40px}
    .toolbar-right{display:flex;flex-wrap:wrap;gap:.5rem .75rem;width:100%;margin-left:0}
    .toolbar-search{flex:1 1 100%;width:100%;max-width:none}
    .toolbar-search input{width:100%;min-height:40px}
    .toolbar-search input:focus{width:100%}
    .products-count{margin-left:auto;font-size:.75rem;text-align:right}
    /* Modals stay CENTERED on phones (owner call — bottom sheets were tried
       and rejected). The clipped-button bug is fixed by capping height in %
       OF THE FIXED OVERLAY instead of dvh: iOS Safari leaves dvh stale while
       the body is scroll-locked, but a fixed inset:0 overlay always matches
       the real visible viewport. Long content scrolls inside the modal. */
    .modal{max-height:100%}
}
/* Narrow AND short (landscape phones): the stacked toolbar + sticky would
   pin nearly half the viewport — let it scroll away with the page there.
   orientation:landscape is REQUIRED: interactive-widget=resizes-content
   makes the Android keyboard shrink the layout viewport below 600px in
   PORTRAIT too, and without the guard focusing the pinned search box would
   un-pin the toolbar mid-focus. padding mirrors the base non-stuck value
   (.75rem 0) so the class toggling mid-scroll never shifts the layout. */
@media(max-width:768px) and (max-height:600px) and (orientation:landscape){
    .products-toolbar.stuck,.page-products .products-toolbar.stuck{position:static;box-shadow:none;margin-left:0;margin-right:0;padding:.75rem 0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
    .products-toolbar.stuck .products-count{display:block}
    body:has(.products-toolbar.stuck) .toast{top:calc(var(--nav-height,.5rem) + .5rem)}
}
/* Landscape phones (wide but short): the 4/3 modal image alone can outgrow
   90vh — same scroll path as the phone block above. */
@media(max-height:600px){
    .product-modal{overflow-y:auto}
    .product-modal-img{flex-shrink:0;max-height:48vh;object-fit:cover}
}

/* Body scroll lock handled via JS lockBodyScroll()/unlockBodyScroll() for iOS compatibility */

/* ---- Featured section: ambient "warm Filipino daylight" background ----
   Pure CSS: three blurred light blobs drift very slowly behind the product
   cards (transform-only animations, GPU-cheap). They are the fallback shown
   whenever .popular-bg-video is absent (reduced motion / data saver). The
   video itself plays unwashed — the frosted cards provide the contrast. */
.popular-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.popular-products>.container{position:relative;z-index:1}
.popular-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;transform:translateZ(0);opacity:0;transition:opacity 1200ms ease}
.popular-bg-video[data-loaded]{opacity:1}
.popular-bg-video.is-idle{opacity:1}
.popular-bg-glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.popular-bg-glow--gold{width:44vw;height:44vw;left:-8vw;top:-6vw;background:radial-gradient(circle,rgba(212,168,83,.34) 0%,transparent 70%);animation:popularGlowA 46s ease-in-out infinite}
.popular-bg-glow--amber{width:38vw;height:38vw;right:-10vw;bottom:-8vw;background:radial-gradient(circle,rgba(226,178,110,.28) 0%,transparent 70%);animation:popularGlowB 58s ease-in-out infinite}
.popular-bg-glow--leaf{width:30vw;height:30vw;left:36vw;bottom:-12vw;background:radial-gradient(circle,rgba(122,158,96,.2) 0%,transparent 70%);animation:popularGlowC 52s ease-in-out infinite}
@keyframes popularGlowA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes popularGlowB{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-8vw,-9vh) scale(.92)}}
@keyframes popularGlowC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-6vh) scale(1.22)}}

@media (prefers-reduced-motion:reduce){.popular-bg-glow{animation:none}}

/* ---- About section: ambient container-port video ----
   Same recipe as the Featured section: the clip plays unwashed (its grade,
   including a gentle darkening for text contrast, is baked into the file), the
   copy flips to light ink only while the video is up, and the panels become
   frosted glass so the port reads through them. Without the video the section
   keeps its cream gradient and dark ink. */
.about-bg{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
    background:url('../images/hero-3-1280.webp') center 45%/cover no-repeat;
    /* Static image, so this is computed once — no per-frame cost. */
    filter:saturate(1.06) contrast(1.04);
}
/* Scrim: a warm near-black (not navy — that turned the cardboard grey), heavy
   on the left where the paragraphs sit and easing right so the boxes and
   conveyor keep their shape. */
.about-bg::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(14,10,7,.84) 0%,rgba(14,10,7,.66) 38%,rgba(14,10,7,.34) 68%,rgba(14,10,7,.22) 100%);
}
.about>.container{position:relative;z-index:1}

.page-landing .about.has-bg-media h2{color:#fff;text-shadow:0 2px 22px rgba(15,23,42,.6),0 1px 3px rgba(15,23,42,.45)}
.page-landing .about.has-bg-media .about-text{color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(15,23,42,.75),0 1px 2px rgba(15,23,42,.5)}
.about.has-bg-media .section-tag{color:#ffd98a;text-shadow:0 1px 10px rgba(15,23,42,.55)}

/* Mission / Vision panels + the four proof cards → WHITE frosted glass, the same
   language as the Featured product cards: translucent enough to see the
   warehouse through, milky enough to carry dark text. Slightly higher alpha
   than Featured (.5 vs .34) because the photo behind is dark — at .34 the panels
   read as grey and the copy inside them loses contrast. */
.about.has-bg-media .about-mv-item{
    background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    border:1px solid rgba(255,255,255,.7);border-left:3px solid var(--accent);
    contain:paint;
}
.page-landing .about.has-bg-media .about-mv-item h3{color:#0f172a}
.page-landing .about.has-bg-media .about-mv-item p{color:#1b2536}
.page-landing .about.has-bg-media .about-card{
    background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 14px 38px -18px rgba(0,0,0,.5);
    contain:paint;
}
.page-landing .about.has-bg-media .about-card h3{color:#0f172a}
.page-landing .about.has-bg-media .about-card p{color:#1f2b3d}
.about.has-bg-media .about-card-icon{background:rgba(53,82,200,.1)}

@media (max-width:768px){
    /* Phones: keep the translucency, skip the blur (mobile GPUs pay for it). */
    .about.has-bg-media .about-mv-item,
    .page-landing .about.has-bg-media .about-card{
        -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.62);
    }
    /* The copy runs full-width on a phone, so the left-to-right scrim would let
       paragraphs drift over the bright cardboard — even it out instead. */
    .about-bg::after{
        background:linear-gradient(180deg,rgba(14,10,7,.88) 0%,rgba(14,10,7,.8) 55%,rgba(14,10,7,.88) 100%);
    }
}


/* Landscape phones / short windows: same natural-scroll fallback as <=768px —
   100vh snap sections would clip the tall content with no way to reach it. */
@media (max-height:600px){
    .page-landing{overflow:visible;height:auto}
    .snap-wrapper{height:auto;overflow:visible}
    .snap-section{height:auto;min-height:0;overflow:visible}
    .snap-section.hero-landing{min-height:100vh;min-height:100dvh}
    .section-dots{display:none}
}
/* Touch tablets keep the snap engine but the 6px dots are untappable — hide them. */
@media (pointer:coarse){
    .section-dots{display:none}
}

/* Slide only — NO opacity keyframe. A keyframe's from{opacity:0} overrides the
   cascade for as long as the animation runs, so a stalled/frozen animation
   would leave the open panel permanently invisible. Opacity comes from the
   .dropdown.open rule; worst case the panel just skips the 8px slide. */
@keyframes ddPanelIn{from{transform:translateX(-50%) translateY(-8px)}to{transform:translateX(-50%) translateY(0)}}

/* ============ CONTACT INFO (SEO/NAP) — footer address + CTA contact row ============ */
.footer-contact{font-style:normal;font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.55);margin-top:.75rem;max-width:300px}
.footer .footer-contact a{color:rgba(255,255,255,.7);transition:color var(--transition)}
.footer .footer-contact a:hover{color:var(--teal)}
.cta-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.75rem;margin-top:1.75rem}
.cta-contact-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:rgba(255,255,255,.7)}
a.cta-contact-item{transition:color var(--transition)}
a.cta-contact-item:hover{color:#fff}
.cta-contact-item svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}
@media (max-width:768px){
    .cta-contact{margin-top:1.25rem;gap:.4rem 1.25rem}
    .cta-contact-item{font-size:.75rem}
    .footer-contact{font-size:.75rem;line-height:1.6;margin-top:.5rem}
}
@media (min-width:769px) and (max-height:820px){
    .footer .footer-contact{font-size:.75rem;line-height:1.55;margin-top:.5rem}
    .cta-contact{margin-top:1rem}
    .snap-section-contact .footer-grid{padding-bottom:1rem}
}

/* ============ SERVER-RENDERED SEO PAGES (product/category/brand) ============ */
.pd-header .container{padding-top:.5rem}
.pd-breadcrumbs{font-size:.8125rem;color:rgba(255,255,255,.65);margin-bottom:.75rem;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.pd-breadcrumbs a{color:rgba(255,255,255,.85)}
.pd-breadcrumbs a:hover{color:var(--gold)}
.pd-breadcrumbs span[aria-current]{color:rgba(255,255,255,.55);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-main{padding:2.5rem 0 3.5rem;background:var(--bg)}
.pd-grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:2.5rem;align-items:start}
.pd-image{background:#fff;border:1px solid var(--bg-alt);border-radius:12px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd-image img{max-width:100%;max-height:100%;object-fit:contain}
.pd-image-empty{color:var(--text-light);font-size:.875rem;padding:1rem;text-align:center}
.pd-specs{width:100%;border-collapse:collapse;font-size:.9375rem}
.pd-specs th{text-align:left;color:var(--text-light);font-weight:600;padding:.55rem .75rem .55rem 0;white-space:nowrap;vertical-align:top;width:1%}
.pd-specs td{padding:.55rem 0;color:var(--text)}
.pd-specs tr+tr th,.pd-specs tr+tr td{border-top:1px solid var(--bg-alt)}
.pd-specs a{color:var(--accent)}
.pd-pitch{margin:1.25rem 0 1.5rem;color:var(--text);line-height:1.7;font-size:.9375rem}
.pd-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.pd-related{margin-top:3rem}
.pd-related h2,.cat-more h2,.brands-featured-h{font-size:1.25rem;color:var(--primary);margin-bottom:1rem}
.pd-related-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.4rem 1.5rem}
.pd-related-list a,.cat-list a{color:var(--accent)}
.pd-related-list a:hover,.cat-list a:hover{text-decoration:underline}
.pd-rel-pack{color:var(--text-light);font-size:.8125rem;margin-left:.35rem}
.pd-cat-link{color:var(--accent);font-weight:600}
.cat-intro{max-width:70ch;margin:0 0 1.75rem;color:var(--text);line-height:1.75;font-size:1rem}
.cat-list{list-style:none;padding:0;margin:0 0 1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.45rem 1.5rem;font-size:.9375rem}
.cat-pagination{display:flex;align-items:center;gap:1.25rem;margin:0 0 1.75rem;font-size:.9375rem}
.cat-pagination a{color:var(--accent);font-weight:600}
.cat-pagination span{color:var(--text-light)}
.cat-actions{margin-bottom:2.5rem}
.cat-more{border-top:1px solid var(--bg-alt);padding-top:1.75rem}
.cat-others{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem .5rem}
.cat-others a{display:inline-block;padding:.35rem .8rem;background:#fff;border:1px solid var(--bg-alt);border-radius:999px;font-size:.8125rem;color:var(--text);transition:all var(--transition)}
.cat-others a:hover{border-color:var(--accent);color:var(--accent)}
.brands-featured{margin-bottom:2rem}
.brands-featured a{border-color:var(--accent-light);background:var(--accent-light);color:var(--accent);font-weight:600}
.brands-all{list-style:none;padding:0;margin:0 0 1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.35rem 1.5rem;font-size:.875rem}
.brands-all a{color:var(--text)}
.brands-all a:hover{color:var(--accent)}
.brand-disclaimer{margin-top:2rem;font-size:.8125rem;color:var(--text-light);max-width:70ch}
.pd-main h2{font-size:1.25rem;color:var(--primary);margin:1.75rem 0 1rem}
@media (max-width:768px){
    .pd-grid{grid-template-columns:1fr;gap:1.5rem}
    .pd-image{max-width:320px;margin:0 auto}
    .pd-breadcrumbs{font-size:.75rem}
    .pd-breadcrumbs span[aria-current]{max-width:20ch}
    .pd-main{padding:1.75rem 0 2.5rem}
    .cat-list,.pd-related-list,.brands-all{grid-template-columns:1fr}
}
.product-name a.product-name-link{color:inherit;text-decoration:none}
.product-name a.product-name-link:hover{color:var(--accent);text-decoration:underline}
.cat-index{padding:2rem 0 2.5rem;border-top:1px solid var(--bg-alt)}
.cat-index h2{margin-top:0}
/* ============ ABOUT & EXPORT-PROCESS PAGES ============ */
.ab-wrap h2{font-size:1.25rem;color:var(--primary);margin:1.75rem 0 .75rem}
.ab-wrap h2:first-child{margin-top:0}
.ab-wrap .cat-intro{margin-bottom:.5rem}
.ab-creds{list-style:none;padding:0;margin:0 0 .5rem;max-width:70ch}
.ab-creds li{padding:.6rem 0 .6rem 1.5rem;position:relative;line-height:1.65;font-size:.9375rem;color:var(--text)}
.ab-creds li::before{content:'\2713';position:absolute;left:0;color:var(--teal);font-weight:700}
.ab-address{font-style:normal;line-height:1.8;font-size:.9375rem;color:var(--text);margin-bottom:1rem}
.ab-address a{color:var(--accent)}
.ep-steps{list-style:none;padding:0;margin:0 0 2rem;max-width:70ch}
.ep-steps li{padding:.75rem 0;border-bottom:1px solid var(--bg-alt)}
.ep-steps h2{font-size:1.125rem;color:var(--primary);margin:0 0 .35rem}
.ep-steps p{line-height:1.7;font-size:.9375rem;color:var(--text)}
.ep-steps a{color:var(--accent)}
.ep-faq-title{font-size:1.25rem;color:var(--primary);margin:0 0 1rem}
.ep-faq{max-width:70ch;margin:0 0 2rem}
.ep-faq dt{font-weight:700;color:var(--primary);margin-top:1.1rem;font-size:1rem}
.ep-faq dd{margin:.35rem 0 0;line-height:1.7;font-size:.9375rem;color:var(--text)}
.about-more-link{color:var(--gold);font-weight:600;white-space:nowrap}
.about-more-link:hover{text-decoration:underline}
.ab-wrap{max-width:780px;margin:0 auto}

/* =====================================================================
   LIGHT LANDING THEME — 2026-07-20 "Gallery Ivory"
   Owner direction: light, clean, premium. This layer sits LAST in the
   file and overrides the dark landing rules above; products.html and the
   portal are untouched. Featured keeps its ship video (owner call), the
   About section goes light with a framed warehouse photo (still NO video
   there — owner rejected one), hero becomes a light editorial split.
   ===================================================================== */

/* ---- Type: Chillax display voice (site-wide since 2026-07-21; @font-face at top of file) ---- */
.page-landing h1{font-family:'General Sans',sans-serif;font-weight:500;letter-spacing:-.02em}
.page-landing h2{font-family:'Chillax','General Sans',sans-serif;font-weight:500;letter-spacing:-.02em}

/* ---- Page canvas ---- */
.page-landing{background:var(--bg);color:var(--text)}

/* ---- Nav: frosted ivory, dark ink (colored logo finally reads) ---- */
.page-landing .nav{background:rgba(250,248,245,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(15,23,42,.06);box-shadow:none}
.page-landing .nav .nav-link,.page-landing .nav .nav-logo{color:var(--primary)}
.page-landing .nav .nav-link:hover{color:var(--accent)}
.page-landing .nav .nav-link::after{background:var(--accent)}
.page-landing .nav .nav-hamburger span{background:var(--primary)}
.page-landing .nav.scrolled{background:rgba(250,248,245,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:rgba(15,23,42,.08);box-shadow:var(--shadow-sm)}
.page-landing .nav.scrolled .nav-link,.page-landing .nav.scrolled .nav-logo{color:var(--primary)}
.page-landing .nav.scrolled .nav-hamburger span{background:var(--primary)}
.page-landing .nav-cta-outline{color:var(--primary);border-color:rgba(15,23,42,.28)}
.page-landing .nav-cta-outline:hover{background:rgba(15,23,42,.05);border-color:var(--primary);color:var(--primary)}
.page-landing .nav-user-name-btn{color:var(--primary)}
.page-landing .nav-user-avatar{border-color:rgba(15,23,42,.3);color:var(--primary)}
.page-landing .nav-user-name-btn:hover .nav-user-avatar{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.page-landing .nav-user-chevron{color:rgba(15,23,42,.4)}
.page-landing .nav-user-dropdown{background:#fff;border-color:var(--border);box-shadow:var(--shadow-lg)}
.page-landing .nav-user-email{color:var(--text-light);border-bottom-color:var(--border)}
.page-landing .nav-user-logout{color:var(--text)}
.page-landing .nav-user-logout:hover{background:var(--bg-alt)}
.page-landing .mobile-menu{background:#fff}
.page-landing .mobile-menu a{color:var(--primary);border-bottom-color:var(--border)}
.page-landing .mobile-menu-signout{color:var(--primary);border-bottom-color:var(--border)}

/* ---- Hero: light editorial split ---- */
.page-landing .hero-landing{
    color:var(--text);
    background:
        radial-gradient(ellipse at 84% 10%,rgba(53,82,200,.07) 0%,transparent 45%),
        radial-gradient(ellipse at 6% 92%,rgba(212,168,83,.08) 0%,transparent 42%),
        radial-gradient(circle,rgba(61,61,61,.02) 1px,transparent 1px),
        linear-gradient(180deg,#fbf9f6 0%,#faf8f5 55%,#f5f0e8 100%);
    background-size:100%,100%,26px 26px,100%;
}
.hero-landing .hero-overlay{display:none}
.page-landing .hero-landing .container{display:block}
.hero-editorial{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2.5rem,5vw,4.25rem);align-items:center;padding:calc(var(--nav-height) + 1.5rem) 0 1.5rem}
.page-landing .hero-content{max-width:none;padding:0;margin:0}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:'General Sans',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);background:var(--accent-light);border:1px solid rgba(53,82,200,.16);padding:.42rem .95rem;border-radius:var(--radius-pill);margin-bottom:1.4rem}
.page-landing .hero-content h1{color:var(--primary);text-shadow:none;font-size:clamp(2.15rem,3.6vw,3.3rem);letter-spacing:-.03em;line-height:1.12;margin-bottom:1.25rem;text-wrap:balance}
.page-landing .hero-content h1 .highlight{white-space:nowrap}
.page-landing .hero-content h1 .highlight{color:var(--accent);-webkit-text-fill-color:var(--accent);background:linear-gradient(180deg,transparent 88%,rgba(212,168,83,.42) 88%)}
.page-landing .hero-content p{color:var(--text);font-size:1.0625rem;line-height:1.75;max-width:520px;margin-bottom:2rem}
.page-landing .hero-buttons{align-items:center;gap:1.25rem}
.hero-link-quiet{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9375rem;color:var(--primary);padding:.6rem .25rem;transition:color .25s ease}
.hero-link-quiet:hover{color:var(--accent)}
.hero-link-quiet svg{transition:transform .3s ease}
.hero-link-quiet:hover svg{transform:translateX(3px)}
.page-landing .hero-content p.hero-reassure{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-light);max-width:none;margin:1rem 0 0}
.hero-reassure svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

/* Stats row — kills the old absolute floating bar */
.page-landing .hero-stats{position:static;left:auto;bottom:auto;z-index:auto;width:auto;max-width:none;display:flex;gap:clamp(1.75rem,4vw,3.25rem);margin-top:2.1rem;padding:1.5rem 0 0;border-top:1px solid rgba(15,23,42,.09)}
.page-landing .hero-stat{padding:0;text-align:left}
.page-landing .hero-stat:not(:last-child)::after{content:none}
.page-landing .hero-stat-number{font-family:'Chillax','General Sans',sans-serif;font-size:clamp(1.7rem,2.2vw,2.15rem);font-weight:500;letter-spacing:-.02em;color:var(--primary)}
.page-landing .hero-stat-label{font-size:.7rem;letter-spacing:.09em;color:var(--text-light);margin-top:.35rem}

/* Framed slideshow */
.hero-visual{position:relative}
.hero-frame{position:relative;height:clamp(400px,58vh,540px);border-radius:20px;overflow:hidden;background:var(--bg-alt);box-shadow:0 32px 70px -30px rgba(15,23,42,.35),0 12px 30px -18px rgba(53,82,200,.16)}
.hero-frame::after{content:'';position:absolute;inset:0;border-radius:20px;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);pointer-events:none;z-index:2}
.hero-frame .hero-slides{position:absolute;inset:0}
.page-landing .hero-slide{filter:saturate(1.06) brightness(1.06) contrast(1.02)}
.hero-frame-badge{position:absolute;left:1.1rem;bottom:1.1rem;display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(15,23,42,.07);border-radius:14px;padding:.7rem 1rem;box-shadow:0 18px 44px -18px rgba(15,23,42,.32);z-index:3}
.hero-frame-badge-icon{width:38px;height:38px;border-radius:10px;background:var(--gold-light);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-frame-badge-icon svg{width:20px;height:20px}
.hero-frame-badge-text{display:flex;flex-direction:column;line-height:1.3}
.hero-frame-badge-text strong{font-size:.8125rem;font-weight:700;color:var(--primary)}
.hero-frame-badge-text span{font-size:.71rem;color:var(--text-light)}

/* Hero entrance choreography (replays with the existing .hero-visible toggle) */
.page-landing .hero-eyebrow{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hero-landing.hero-visible .hero-eyebrow{opacity:1;transform:translateY(0);transition-delay:.15s}
.hero-landing.hero-visible .hero-content p.hero-reassure{transition-delay:1.2s}
.page-landing .hero-stats{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.hero-landing.hero-visible .hero-stats{opacity:1;transform:translateY(0);transition-delay:.9s}
.page-landing .hero-visual{opacity:0;transform:translateX(36px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.hero-landing.hero-visible .hero-visual{opacity:1;transform:translateX(0);transition-delay:.45s}
.page-landing .hero-frame-badge{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1)}
.hero-landing.hero-visible .hero-frame-badge{opacity:1;transform:translateY(0);transition-delay:1.5s}

/* ---- Featured band: soft feathered edges into the ivory sections ---- */
.popular-bg::before,.popular-bg::after{content:'';position:absolute;left:0;right:0;height:64px;z-index:2;pointer-events:none}
.popular-bg::before{top:0;background:linear-gradient(180deg,rgba(245,240,232,.85),transparent)}
.popular-bg::after{bottom:0;background:linear-gradient(0deg,rgba(240,235,228,.85),transparent)}
/* Card text no longer clips mid-letter: let the body grow past 2 name lines,
   and always stretch to the card bottom so pack-size rows align across a row */
.page-landing .popular-products .popular-card-body{height:auto;min-height:5.5rem;flex:1}
.page-landing .popular-products .popular-card{border-radius:16px;background:rgba(255,255,255,.42)}
.page-landing .popular-products .popular-card:hover{background:rgba(255,255,255,.58)}

/* ---- About: light editorial with framed warehouse photo ---- */
.page-landing .about{background:
    radial-gradient(ellipse at 88% 8%,rgba(53,82,200,.05) 0%,transparent 45%),
    radial-gradient(ellipse at 4% 96%,rgba(212,168,83,.06) 0%,transparent 45%),
    linear-gradient(180deg,#f0ebe4 0%,#f5f0e8 55%,#faf8f5 100%)}
.page-landing .about .container{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.page-landing .about h2{color:var(--primary);text-shadow:none;margin:.4rem 0 1rem}
.page-landing .snap-section.about .container{padding-top:calc(var(--nav-height) + 2rem);padding-bottom:2rem}
.page-landing .about .about-text{color:var(--text);text-shadow:none}
.page-landing .about-text strong.about-rex{color:var(--accent)}
.page-landing .about-more-link{color:var(--accent)}
.page-landing .about .section-tag{color:var(--accent)}

/* ---- Contact: ivory canvas, one navy statement panel (the peak) ---- */
.snap-section-contact{background:linear-gradient(180deg,#faf8f5 0%,#f5f0e8 70%,#f0ebe4 100%)}
.snap-section-contact .cta::before{display:none}
/* Light contact ink — no panel card (owner call), content sits on the ivory
   canvas; the base .cta rules assume a dark background */
.snap-section-contact .cta-content h2{color:var(--primary)}
.snap-section-contact .cta-content p{color:var(--text)}
.snap-section-contact .trust-badge{color:var(--text-light)}
.snap-section-contact .cta-contact-item{color:var(--text)}
.snap-section-contact a.cta-contact-item:hover{color:var(--accent)}

/* Short desktops (laptops at 768-820px tall): compact the contact stack so
   panel + footer + copyright all fit inside the 100vh snap section. */
@media(min-width:769px) and (max-height:820px){
    .contact-top .cta{padding:1rem 0}
    .cta-content h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.5rem}
    .cta-content p{margin-bottom:1.4rem}
    .trust-badges{margin-top:1.1rem}
    .snap-section-contact .footer{padding:1.1rem 0 0}
    .snap-section-contact .footer-brand p{font-size:.75rem;line-height:1.55;margin-top:.5rem}
    .snap-section-contact .footer-brand img{height:30px}
    .snap-section-contact .footer-grid{padding-bottom:1rem;gap:1.25rem}
    .snap-section-contact .footer-bottom{padding:.6rem 0}
}

/* ---- Responsive: new light-layer components ---- */
@media(max-width:1024px){
    .hero-editorial{gap:2rem}
    .hero-frame{height:clamp(360px,52vh,480px)}
}
@media(max-width:1024px){
    .page-landing .about .container{grid-template-columns:1fr}
}
@media(max-width:768px){
    .hero-editorial{grid-template-columns:1fr;gap:2rem;padding:calc(var(--nav-height) + 1.75rem) 0 2.25rem;text-align:center}
    .page-landing .hero-content{padding:0;text-align:center}
    .page-landing .hero-content p{margin-left:auto;margin-right:auto}
    .hero-eyebrow{margin-bottom:1.1rem}
    .hero-reassure{justify-content:center}
    .page-landing .hero-stats{justify-content:center;gap:2.25rem;margin-top:1.6rem;padding-top:1.2rem}
    .page-landing .hero-stat{text-align:center}
    .hero-frame{height:min(46vh,380px)}
    .hero-frame-badge{left:.75rem;bottom:.75rem;padding:.55rem .8rem}
    .page-landing .popular-products .popular-card-body{height:auto;min-height:4.5rem}
}
@media(max-width:600px){
    .hero-eyebrow-sub{display:none}
}
@media(max-width:480px){
    .page-landing .hero-content h1{font-size:clamp(1.6rem,7vw,2.15rem)}
    .page-landing .hero-stat-number{font-size:1.55rem}
    .hero-frame{height:min(40vh,320px)}
    .hero-frame-badge-text span{display:none}
}

/* ---- Reduced motion: everything lands settled ---- */
@media(prefers-reduced-motion:reduce){
    .page-landing .hero-eyebrow,.page-landing .hero-stats,.page-landing .hero-visual,.page-landing .hero-frame-badge{opacity:1;transform:none;transition:none}
    .page-landing .hero-slide{animation:none}
}

/* =============================================
   LIGHT PRODUCTS HEADER — 2026-07-21
   Products page nav + header band converted to the landing
   "Gallery Ivory" light theme (owner: consistent with homepage).
   Overrides the dark --t-nav-* tokens and .products-header band above.
   ============================================= */
.page-products{--t-nav-bg:rgba(250,248,245,.86);--t-nav-border:rgba(15,23,42,.06);--t-nav-text:var(--primary);--t-nav-text-hover:var(--accent);--t-nav-hamburger:var(--primary)}
.page-products .nav .nav-link::after{background:var(--accent)}
.page-products .nav.scrolled{background:rgba(250,248,245,.95)}
.page-products .nav-user-btn{background:none;border-color:rgba(15,23,42,.28);color:var(--primary)}
.page-products .nav-user-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(15,23,42,.05)}
.page-products .nav-user-name-btn{color:var(--primary)}
.page-products .nav-user-avatar{border-color:rgba(15,23,42,.3);color:var(--primary)}
.page-products .nav-user-name-btn:hover .nav-user-avatar{border-color:var(--accent);background:var(--accent-light);color:var(--accent)}
.page-products .nav-user-chevron{color:rgba(15,23,42,.4)}
.page-products .nav-user-dropdown{background:#fff;border-color:var(--border);box-shadow:var(--shadow-lg)}
.page-products .nav-user-email{color:var(--text-light);border-bottom-color:var(--border)}
.page-products .nav-user-logout{color:var(--text)}
.page-products .nav-user-logout:hover{background:var(--bg-alt)}
.page-products .cart-btn,.page-products .nav-user-btn{font-family:'Chillax','General Sans',sans-serif;font-weight:500}
.page-products .mobile-menu{background:#fff}
.page-products .mobile-menu a{color:var(--primary);border-bottom-color:var(--border)}
.page-products .mobile-menu-signout{color:var(--primary);border-bottom-color:var(--border)}
/* Header band: transparent — the body's single ivory canvas runs seamlessly from nav to footer */
.products-header{background:transparent;color:var(--text)}
.products-header::before,.products-header::after{display:none}
.products-header h1{color:var(--primary)}
.products-header p{color:var(--t-text-sec,#7a7a6e)}
.header-cat{background:var(--t-surface,#faf8f5);border-color:var(--t-border,#e5ddd3);color:var(--t-text-sec,#7a7a6e)}
.header-cat:hover{background:var(--t-surface,#faf8f5);border-color:var(--accent);color:var(--accent)}
.header-cat.active{background:var(--accent);border-color:var(--accent);color:#fff}
.header-cat .cat-count{color:var(--t-text-muted,#a09a90)}
.header-cat:hover .cat-count{color:var(--accent)}
.header-cat.active .cat-count{color:rgba(255,255,255,.72)}

/* ---- Products header polish + grid micro-interactions — 2026-07-21 ---- */
.products-header h1{margin-bottom:1.5rem}
/* Header chips → toolbar: single tight gap instead of three stacked paddings */
.products-header{padding-bottom:.75rem}
.page-products .products{padding-top:1rem}
.header-cat-more{background:transparent;border-style:dashed;color:var(--t-text-muted,#a09a90)}
.header-cat-more:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.product-thumb img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.product-card:hover .product-thumb img{transform:scale(1.05)}
.page-products .product-card:hover{box-shadow:var(--t-shadow-lg);border-color:rgba(53,82,200,.22)}
.product-name{transition:color .2s ease}
.product-card:hover .product-name{color:var(--accent)}
@media(prefers-reduced-motion:reduce){
    .product-thumb img{transition:none}
    .product-card:hover .product-thumb img{transform:none}
}

/* Breadcrumbs on the (now light) header bands — dark ink instead of the old white-on-navy */
.pd-breadcrumbs{color:var(--t-text-sec,#7a7a6e)}
.pd-breadcrumbs a{color:var(--primary)}
.pd-breadcrumbs a:hover{color:var(--accent)}
.pd-breadcrumbs span[aria-current]{color:var(--t-text-muted,#a09a90)}