/* ABAWINA MALL design tokens (oklch). Legacy names kept as aliases at the bottom of :root. */
:root {
  color-scheme: dark;
  --radius: 0.9rem;
  --radius-sm: calc(var(--radius) - 6px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 4px);
  --background: oklch(0.16 0.028 264);
  --foreground: oklch(0.97 0.004 250);
  --surface: oklch(0.21 0.031 264);
  --surface-foreground: oklch(0.97 0.004 250);
  --card: oklch(0.21 0.031 264);
  --card-foreground: oklch(0.97 0.004 250);
  --popover: oklch(0.19 0.03 264);
  --popover-foreground: oklch(0.97 0.004 250);
  --primary: oklch(0.705 0.213 47.604);
  --primary-foreground: oklch(0.16 0.028 264);
  --secondary: oklch(0.27 0.035 262);
  --secondary-foreground: oklch(0.96 0.004 250);
  --muted: oklch(0.25 0.032 262);
  --muted-foreground: oklch(0.72 0.028 258);
  --accent: oklch(0.769 0.188 70.08);
  --accent-foreground: oklch(0.16 0.028 264);
  --destructive: oklch(0.637 0.237 25.331);
  --destructive-foreground: oklch(0.98 0.003 248);
  --success: oklch(0.696 0.17 162.48);
  --success-foreground: oklch(0.16 0.028 264);
  --border: oklch(0.32 0.031 262);
  --input: oklch(0.3 0.031 262);
  --ring: oklch(0.705 0.213 47.604);
  --chart-1: oklch(0.705 0.213 47.604);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.707 0.165 254.624);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.627 0.265 303.9);
  --sidebar: oklch(0.19 0.03 264);
  --sidebar-foreground: oklch(0.96 0.004 250);
  --sidebar-primary: oklch(0.705 0.213 47.604);
  --sidebar-primary-foreground: oklch(0.16 0.028 264);
  --sidebar-accent: oklch(0.27 0.035 262);
  --sidebar-accent-foreground: oklch(0.96 0.004 250);
  --sidebar-border: oklch(0.32 0.031 262);
  --sidebar-ring: oklch(0.705 0.213 47.604);
  /* aliases for the original stylesheet and Tailwind-style names */
  --shadow: 0 16px 40px -18px oklch(0.05 0.02 264 / .7);
  --font-display: "Outfit", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --color-border: var(--border);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}
.dark { --background: oklch(0.16 0.028 264); --foreground: oklch(0.97 0.004 250); }

@layer base {
  * { border-color: var(--color-border); }
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
  }
}

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:140px;-webkit-overflow-scrolling:touch}body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:0.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}img{max-width:100%;display:block}::selection{background:var(--primary);color:var(--primary-foreground)}.announcement{min-height:34px;padding:7px 4.5%;display:flex;justify-content:space-between;gap:15px;background:var(--background);color:color-mix(in oklab,var(--foreground) 88%,transparent);font-size:0.75rem}.announcement span,.announcement a{display:flex;align-items:center;gap:7px}.announcement a{color:var(--accent);font-weight:700}.site-header{z-index:1020;background:rgba(7,13,25,.96);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.header-main{min-height:82px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,color-mix(in oklab,var(--primary),white 18%),var(--primary));display:grid;place-items:center;color:var(--primary-foreground);font-size:1.375rem;box-shadow:0 8px 26px color-mix(in oklab,var(--primary) 17%,transparent)}.brand strong{font:800 1.125rem var(--font-display);letter-spacing:-.7px;display:block;white-space:nowrap}.brand em{font-style:normal;color:var(--primary)}.brand small{font-size:0.6875rem;letter-spacing:2px;color:var(--muted-foreground);display:block;margin-top:1px}.search-box{height:43px;max-width:510px;flex:1;display:flex;align-items:center;border:1px solid var(--border);border-radius:13px;background:var(--card);overflow:hidden;color:var(--muted-foreground)}.search-box>i{font-size:1.0625rem;margin:0 12px}.search-box input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:white;font-size:0.75rem}.search-box input::placeholder{color:var(--muted-foreground)}.search-box button{height:100%;border:0;background:var(--primary);color:var(--primary-foreground);padding:0 18px;font-size:0.75rem;font-weight:800}.header-actions{display:flex;align-items:center;gap:17px;margin-left:auto}.icon-action{position:relative;display:flex;align-items:center;gap:6px;flex-direction:column;background:none;border:0;color:color-mix(in oklab,var(--foreground) 88%,transparent);font-size:0.75rem;white-space:nowrap}.icon-action>i{font-size:1.1875rem}.icon-action:hover,.icon-action:focus{color:var(--primary)}.count-badge{position:absolute;top:-7px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:var(--primary);color:var(--primary-foreground);font-size:0.6875rem;display:grid;place-items:center}.main-nav{display:flex;align-items:center;gap:28px;min-height:45px}.nav-link{padding:12px 0;color:var(--muted-foreground);font-size:0.75rem;font-weight:600;position:relative}.nav-link:hover,.nav-link.active{color:#fff}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary);border-radius:4px}.nav-track{margin-left:auto;color:var(--accent);font-size:0.75rem;font-weight:700;display:flex;gap:7px;align-items:center}.mobile-menu-btn{display:none;background:transparent;border:0;color:white;font-size:1.5rem}.hero-section{overflow:hidden;position:relative;background:radial-gradient(ellipse at 72% 36%,#35405a 0,transparent 42%),radial-gradient(ellipse at 7% 15%,#7c3d1f44,transparent 37%),linear-gradient(120deg,var(--popover),var(--popover) 65%,var(--card));border-bottom:1px solid #ffffff0a}.hero-grid{min-height:505px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px;padding-top:35px;padding-bottom:35px}.hero-copy{padding:15px 0;max-width:590px}.eyebrow{font-size:0.75rem;letter-spacing:2px;color:var(--primary);font-weight:800;display:inline-flex;align-items:center;gap:8px}.hero-copy h1{font:800 clamp(38px,4.6vw,62px)/1.07 var(--font-display);letter-spacing:-2.5px;margin:19px 0 17px}.hero-copy h1 span,.deals-inner h2 span{background:linear-gradient(100deg,var(--primary),#ffd078);background-clip:text;color:transparent}.hero-copy>p{font-size:0.875rem;line-height:1.9;color:var(--muted-foreground);max-width:470px}.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.btn-brand{--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-color:var(--background);--bs-btn-hover-bg:color-mix(in oklab,var(--primary),white 18%);--bs-btn-hover-border-color:color-mix(in oklab,var(--primary),white 18%);--bs-btn-hover-color:var(--background);font-weight:800;border-radius:12px;box-shadow:0 9px 26px color-mix(in oklab,var(--primary) 13%,transparent)}.btn-ghost{border:1px solid color-mix(in oklab,var(--foreground) 35%,transparent);color:color-mix(in oklab,var(--foreground) 88%,transparent);border-radius:12px;font-weight:700}.btn-ghost:hover{background:#ffffff0d;color:white;border-color:color-mix(in oklab,var(--foreground) 35%,transparent)}.hero-proof{display:flex;align-items:center;gap:12px;margin-top:35px}.proof-avatars{display:flex}.proof-avatars span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--card);background:#35435a;color:#b7f3dd;font-size:0.75rem;margin-left:-5px}.proof-avatars span:first-child{margin-left:0;background:#7b482d}.proof-avatars span:last-child{background:#2e6b5a}.hero-proof strong,.hero-proof small{display:block}.hero-proof strong{font-size:0.75rem}.hero-proof small{font-size:0.75rem;color:var(--muted-foreground);margin-top:3px}.hero-visual{height:390px;position:relative;display:grid;place-items:center}.hero-orbit{position:absolute;border:1px solid #f6a15b24;border-radius:50%;aspect-ratio:1}.orbit-one{width:370px}.orbit-two{width:290px;border-style:dashed;border-color:#ffffff17}.hero-product-main{width:min(75%,410px);height:310px;position:relative;z-index:1;overflow:hidden;border-radius:32px 80px 32px 80px;transform:rotate(2deg);box-shadow:0 35px 80px #06091680;border:1px solid #ffffff28}.hero-product-main:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#11172933)}.hero-product-main img{width:100%;height:100%;object-fit:cover}.floating-card{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:13px 16px;background:#272d42ee;border:1px solid #ffffff17;border-radius:14px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:0.75rem}.floating-card small{font-size:0.6875rem;color:var(--muted-foreground);margin-top:4px}.float-icon{width:34px;height:34px;border-radius:10px;background:color-mix(in oklab,var(--primary) 13%,transparent);color:var(--primary);display:grid;place-items:center;font-size:1.0625rem}.float-delivery{top:45px;left:0}.float-quality{bottom:45px;right:-4px}.hero-spark{position:absolute;right:11%;top:15%;font-size:1.75rem;color:var(--accent)}.perks-section{border-bottom:1px solid #ffffff0c;background:var(--popover)}.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:21px;padding-bottom:21px;gap:18px}.perk{display:flex;align-items:center;gap:12px}.perk>span{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:color-mix(in oklab,var(--primary) 9%,transparent);color:var(--primary);font-size:1.1875rem}.perk strong,.perk small{display:block}.perk strong{font-size:0.75rem}.perk small{font-size:0.6875rem;color:var(--muted-foreground);margin-top:5px}.section-space{padding:76px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}.section-heading h2,.trust-inner h2,.newsletter-inner h2{font:700 clamp(25px,3vw,34px)/1.2 var(--font-display);letter-spacing:-1px;margin:10px 0}.section-heading p,.trust-inner p,.newsletter-inner p{color:var(--muted-foreground);font-size:0.75rem;margin:0;line-height:1.8}.text-link{color:var(--accent);font-size:0.75rem;font-weight:700;white-space:nowrap}.text-link:hover{color:#ffd18b}.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.category-card{border:1px solid #ffffff0d;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,var(--muted),var(--card));cursor:pointer;transition:transform .22s,border-color .22s}.category-card:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--primary) 40%,transparent)}.category-image{height:125px;background:radial-gradient(circle at 50% 40%,#3b455d,var(--muted));display:grid;place-items:center;overflow:hidden}.category-image img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.category-card:hover .category-image img{transform:scale(1.05)}.category-fallback{font-size:2.1875rem;color:var(--primary)}.category-info{padding:14px}.category-info strong{font:600 0.875rem var(--font-display);display:block}.category-info small{display:block;color:var(--muted-foreground);font-size:0.75rem;margin-top:5px}.deals-banner{background:linear-gradient(110deg,var(--muted),#312b35 50%,var(--card));border-top:1px solid #ffffff0b;border-bottom:1px solid #ffffff0b;overflow:hidden}.deals-inner{min-height:330px;display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:40px;padding-top:40px;padding-bottom:40px}.deals-inner h2{font:800 clamp(32px,4vw,48px)/1.08 var(--font-display);letter-spacing:-1.8px;margin:15px 0}.deals-inner p{font-size:0.75rem;color:color-mix(in oklab,var(--foreground) 88%,transparent);margin-bottom:23px}.deal-art{height:260px;position:relative;display:flex;justify-content:center;align-items:center}.deal-art img{height:230px;width:300px;object-fit:cover;border-radius:20px;position:relative;z-index:1;transform:rotate(-3deg);box-shadow:var(--shadow)}.deal-circle{position:absolute;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--primary) 27%,transparent),transparent 68%);right:10%;top:-5%}.deal-sticker{position:absolute;z-index:2;right:3%;bottom:5px;background:var(--primary);color:var(--primary-foreground);width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(10deg);box-shadow:0 12px 25px #05071255}.deal-sticker small{font-size:0.6875rem;letter-spacing:1.5px}.deal-sticker strong{font:800 1.0625rem/1 var(--font-display);text-align:center;margin-top:5px}.sort-wrap{display:flex;align-items:center;gap:10px;color:var(--muted-foreground);font-size:0.75rem;white-space:nowrap}.sort-wrap select{width:155px;background-color:var(--muted);border-color:var(--border);color:color-mix(in oklab,var(--foreground) 88%,transparent);border-radius:9px}.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 18px}.filter-chip{border:1px solid var(--border);background:var(--muted);color:color-mix(in oklab,var(--foreground) 88%,transparent);border-radius:20px;padding:6px 10px;font-size:0.75rem}.filter-chip i{margin-left:7px;color:var(--primary)}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.product-card{min-width:0;background:linear-gradient(145deg,var(--card),var(--card));border:1px solid #ffffff0d;border-radius:16px;overflow:hidden;position:relative;transition:transform .2s,border-color .2s;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--primary) 33%,transparent);box-shadow:0 15px 30px #080b1744}.product-media{height:205px;background:var(--muted);position:relative;display:grid;place-items:center;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.product-card:hover .product-media img{transform:scale(1.045)}.product-badge{position:absolute;left:12px;top:12px;border-radius:7px;background:var(--primary);color:var(--primary-foreground);font-size:0.6875rem;font-weight:800;padding:5px 8px}.product-badge.badge-sale{background:#f6c56e}.product-wish{position:absolute;right:10px;top:10px;width:33px;height:33px;border:1px solid #ffffff24;background:#070d19bd;backdrop-filter:blur(8px);border-radius:50%;display:grid;place-items:center;color:white;font-size:1rem}.product-wish.active{color:#ff8b9d;background:#3e2636}.product-wish:hover{color:#ff8b9d}.product-info{padding:14px;display:flex;flex-direction:column;flex:1}.product-brand{color:#f2a05c;font-size:0.6875rem;text-transform:uppercase;letter-spacing:1px;font-weight:800}.product-name{font:600 0.875rem/1.35 var(--font-display);margin:6px 0 7px;color:color-mix(in oklab,var(--foreground) 88%,transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}.product-rating{display:flex;align-items:center;gap:5px;color:#ffc76d;font-size:0.75rem}.product-rating span{color:var(--muted-foreground)}.product-price-row{display:flex;align-items:baseline;gap:8px;margin-top:12px}.product-price{font:800 1.0625rem var(--font-display);color:#fff}.product-old-price{font-size:0.75rem;color:var(--muted-foreground);text-decoration:line-through}.product-stock{font-size:0.6875rem;color:#64d8b1;margin-top:6px}.product-stock.out{color:#ff9a9a}.product-card-footer{display:flex;gap:8px;margin-top:13px}.add-cart-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;background:var(--primary);color:var(--primary-foreground);padding:10px 8px;font-size:0.75rem;font-weight:800}.add-cart-btn:disabled{opacity:.5;cursor:not-allowed}.quick-view-btn{width:38px;display:grid;place-items:center;border:1px solid var(--border);background:transparent;border-radius:9px;color:color-mix(in oklab,var(--foreground) 88%,transparent)}.quick-view-btn:hover{border-color:var(--primary);color:var(--primary)}.loading-state,.empty-state{grid-column:1/-1;text-align:center;padding:45px 20px;color:var(--muted-foreground);border:1px dashed var(--border);border-radius:14px}.loading-state:before{content:"";display:block;width:23px;height:23px;margin:0 auto 12px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.trust-section{background:linear-gradient(110deg,var(--muted),var(--popover));border-block:1px solid #ffffff0b;padding:42px 0}.trust-inner{display:flex;align-items:center;gap:22px}.trust-icon{width:60px;height:60px;flex-shrink:0;display:grid;place-items:center;border-radius:18px;background:color-mix(in oklab,var(--primary) 13%,transparent);color:var(--primary);font-size:1.75rem}.trust-inner>div:nth-child(2){flex:1}.trust-inner h2{font-size:1.5625rem;margin:7px 0}.trust-inner p{max-width:650px}.newsletter-section{padding:55px 0;background:radial-gradient(ellipse at 85% 20%,color-mix(in oklab,var(--primary) 10%,transparent),transparent 40%),var(--background)}.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.newsletter-form{max-width:460px;width:100%;display:grid;grid-template-columns:1fr auto;gap:8px}.newsletter-form .form-control{background:var(--card);border:1px solid var(--border);color:white;border-radius:10px;min-height:44px;font-size:0.75rem}.newsletter-form .form-control::placeholder{color:var(--muted-foreground)}.newsletter-form small{grid-column:1/-1;color:var(--muted-foreground);font-size:0.6875rem}.site-footer{background:var(--background);padding:54px 0 18px;color:var(--muted-foreground)}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .9fr 1.25fr;gap:35px;padding-bottom:40px}.brand-footer strong{color:var(--primary)}.footer-about>p{max-width:280px;line-height:1.9;font-size:0.75rem;margin:17px 0}.social-links{display:flex;gap:9px}.social-links a{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;color:color-mix(in oklab,var(--foreground) 88%,transparent)}.social-links a:hover{color:var(--primary);border-color:var(--primary)}.footer-grid h3{font:700 0.8125rem var(--font-display);color:#fff;margin:5px 0 18px}.footer-grid>div:not(:first-child)>a{display:block;font-size:0.75rem;margin:13px 0;color:var(--muted-foreground)}.footer-grid a:hover{color:var(--primary)}.footer-grid p{font-size:0.75rem;line-height:1.8;margin:10px 0}.footer-grid p i{color:var(--primary);margin-right:6px}.footer-grid p a{color:inherit}.footer-bottom{border-top:1px solid #ffffff12;padding-top:18px;display:flex;justify-content:space-between;gap:12px;font-size:0.6875rem}.footer-bottom a{color:var(--primary)}.view-overlay{position:fixed;z-index:1080;inset:0;background:#080b16a8;backdrop-filter:blur(4px);display:none;justify-content:flex-end}.view-overlay.open{display:flex}.view-panel{height:100%;width:min(100%,510px);background:var(--popover);border-left:1px solid #ffffff16;box-shadow:-20px 0 60px #05071155;display:flex;flex-direction:column;animation:slidein .24s ease-out}.view-panel.wide{width:min(100%,680px)}@keyframes slidein{from{transform:translateX(25px);opacity:.6}to{transform:translateX(0);opacity:1}}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #ffffff12}.panel-header h2{font:700 1.375rem var(--font-display);margin:0}.close-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border);background:var(--muted);color:#fff;font-size:1.125rem}.panel-body{padding:22px 24px;overflow:auto;flex:1}.panel-empty{text-align:center;padding:48px 10px}.panel-empty>i{font-size:2.8125rem;color:#606981}.panel-empty h3{font:700 1.25rem var(--font-display);margin:16px 0 8px}.panel-empty p{font-size:0.75rem;color:var(--muted-foreground)}.panel-line{display:grid;grid-template-columns:76px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid #ffffff10;align-items:center}.panel-line img{width:76px;height:76px;object-fit:cover;background:var(--muted);border-radius:10px}.panel-line h3{font:600 0.8125rem var(--font-display);margin:0 0 7px}.panel-line small{font-size:0.75rem;color:var(--muted-foreground)}.panel-line strong{display:block;font-size:0.8125rem;margin-top:7px}.qty-control{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:9px}.qty-control button{border:0;background:var(--border);color:white;width:27px;height:25px}.qty-control span{width:28px;text-align:center;font-size:0.75rem}.remove-line{border:0;background:none;color:var(--muted-foreground);margin-top:5px;font-size:0.75rem}.cart-summary{border-top:1px solid #ffffff15;padding-top:18px;margin-top:20px}.summary-row{display:flex;justify-content:space-between;gap:10px;margin:10px 0;font-size:0.75rem;color:var(--muted-foreground)}.summary-row.total{font:800 1.1875rem var(--font-display);color:white;border-top:1px solid #ffffff16;padding-top:16px;margin-top:15px}.panel-primary{width:100%;border:0;border-radius:11px;background:var(--primary);color:var(--primary-foreground);padding:13px;font-weight:800;margin-top:12px}.panel-secondary{width:100%;border:1px solid var(--border);border-radius:11px;background:transparent;color:white;padding:12px;font-weight:700;margin-top:9px}.form-label{font-size:0.75rem;color:var(--muted-foreground);font-weight:700;margin-bottom:6px}.form-control,.form-select{background:var(--card);border:1px solid var(--border);color:#fff;border-radius:9px;font-size:0.75rem;padding:11px 12px}.form-control:focus,.form-select:focus{background:var(--muted);color:#fff;border-color:var(--primary);box-shadow:0 0 0 .2rem color-mix(in oklab,var(--primary) 13%,transparent)}.form-control::placeholder{color:var(--muted-foreground)}.form-select option{background:var(--card)}.form-stack{display:grid;gap:13px}.form-note{color:var(--muted-foreground);font-size:0.75rem;line-height:1.7}.form-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-switch{font-size:0.75rem;text-align:center;margin-top:18px;color:var(--muted-foreground)}.auth-switch button{border:0;background:none;color:var(--accent);font-weight:700}.checkout-section-title{font:700 0.9375rem var(--font-display);margin:23px 0 13px}.checkout-summary-line{display:flex;justify-content:space-between;gap:12px;font-size:0.75rem;padding:8px 0;border-bottom:1px solid #ffffff0c}.status-pill{display:inline-flex;border-radius:20px;background:color-mix(in oklab,var(--primary) 13%,transparent);color:#ffc27f;padding:5px 9px;font-size:0.6875rem;font-weight:800;text-transform:uppercase}.status-pill.delivered{background:#1c644e55;color:#79e4bf}.order-card{border:1px solid var(--border);background:var(--card);border-radius:12px;padding:15px;margin-bottom:12px}.order-card-head{display:flex;justify-content:space-between;gap:10px}.order-card h3{font:700 0.8125rem var(--font-display);margin:0}.order-card p{font-size:0.75rem;color:var(--muted-foreground);margin:7px 0}.product-modal-image{width:100%;max-height:300px;object-fit:contain;border-radius:13px;background:var(--muted)}.product-modal-title{font:700 1.5rem var(--font-display);margin:12px 0}.product-modal-price{font:800 1.5625rem var(--font-display);color:var(--primary)}.detail-list{padding-left:17px;color:var(--muted-foreground);font-size:0.75rem;line-height:2}.review-item{padding:13px 0;border-bottom:1px solid #ffffff10}.review-item strong{font-size:0.75rem}.review-item p{font-size:0.75rem;color:var(--muted-foreground);margin:7px 0}.mobile-bottom-bar{display:none}.toast{background:var(--muted);color:white;border:1px solid var(--border)}.toast .btn-close{filter:invert(1)}.toast-success{border-color:color-mix(in oklab,var(--success) 47%,transparent)}.toast-error{border-color:color-mix(in oklab,var(--destructive) 47%,transparent)}.about-copy p,.policy-copy p{font-size:0.75rem;line-height:1.9;color:var(--muted-foreground)}.feature-tile{display:flex;gap:12px;padding:14px;border:1px solid #ffffff10;background:var(--muted);border-radius:12px;margin:10px 0}.feature-tile i{font-size:1.3125rem;color:var(--primary)}.feature-tile strong{font-size:0.75rem;display:block}.feature-tile small{font-size:0.75rem;color:var(--muted-foreground);display:block;margin-top:5px}
@media(max-width:991px){.header-main{gap:18px;min-height:74px}.search-box{max-width:none}.main-nav{gap:20px}.hero-grid{min-height:460px;gap:15px}.hero-visual{height:340px}.hero-product-main{height:270px}.orbit-one{width:320px}.orbit-two{width:250px}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.category-image{height:100px}.footer-grid{grid-template-columns:1.2fr 1fr 1fr;gap:25px}.footer-grid>div:last-child{grid-column:2/4}.header-actions{gap:12px}}
@media(max-width:767px){html{scroll-padding-top:85px}.announcement{justify-content:center;font-size:0.75rem}.announcement>span:nth-child(2){display:none}.header-main{min-height:68px;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}.brand-mark{width:36px;height:36px;font-size:1.1875rem}.brand strong{font-size:1rem}.brand small{font-size:0.625rem}.header-actions{gap:12px}.icon-action{font-size:0}.icon-action>i{font-size:1.25rem}.count-badge{top:-5px;right:-5px}.mobile-menu-btn{display:block;font-size:1.375rem}.search-box{order:5;flex-basis:100%;max-width:none;height:39px}.main-nav{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 13px}.main-nav.open{display:flex}.nav-link{padding:11px 2px;border-top:1px solid #ffffff09}.nav-link.active:after{display:none}.nav-track{margin:8px 0}.hero-grid{grid-template-columns:1fr;padding-top:34px;padding-bottom:24px;gap:0}.hero-copy{padding:0}.hero-copy h1{font-size:2.625rem;letter-spacing:-1.7px;margin:15px 0}.hero-copy>p{font-size:0.75rem}.hero-buttons{margin-top:20px}.hero-buttons .btn{font-size:0.75rem;padding:11px 14px}.hero-proof{margin-top:22px}.hero-visual{height:275px;margin-top:6px}.hero-product-main{width:67%;height:220px;border-radius:25px 55px}.orbit-one{width:270px}.orbit-two{width:215px}.float-delivery{top:27px;left:3px}.float-quality{bottom:23px;right:0}.floating-card{padding:9px 10px;gap:7px}.float-icon{width:28px;height:28px;font-size:0.875rem}.floating-card strong{font-size:0.6875rem}.floating-card small{font-size:0.6875rem}.perks-grid{grid-template-columns:1fr 1fr;gap:18px 10px;padding-top:18px;padding-bottom:18px}.perk{gap:8px}.perk>span{width:34px;height:34px;font-size:1rem}.perk strong{font-size:0.75rem}.perk small{font-size:0.6875rem}.section-space{padding:49px 0}.section-heading{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:21px}.section-heading h2{font-size:1.6875rem}.section-heading p{font-size:0.75rem}.section-heading>.text-link{margin-top:-3px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.category-card:last-child:nth-child(odd){grid-column:1/-1}.category-image{height:112px}.category-info{padding:12px}.category-info strong{font-size:0.8125rem}.deals-inner{grid-template-columns:1fr;gap:12px;padding-top:34px;padding-bottom:20px}.deals-inner h2{font-size:2.25rem}.deal-art{height:225px}.deal-art img{width:250px;height:190px}.deal-sticker{width:82px;height:82px;right:8%;bottom:0}.deal-sticker strong{font-size:0.875rem}.sort-wrap{width:100%;justify-content:space-between}.sort-wrap select{flex:1;max-width:210px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.product-media{height:155px}.product-info{padding:10px}.product-name{font-size:0.75rem;min-height:33px}.product-price{font-size:0.9375rem}.product-old-price{font-size:0.6875rem}.product-card-footer{gap:5px}.add-cart-btn{font-size:0.6875rem;padding:9px 5px}.quick-view-btn{width:33px}.product-badge{left:8px;top:8px;font-size:0.6875rem}.product-wish{right:7px;top:7px;width:29px;height:29px}.trust-inner{align-items:flex-start;flex-wrap:wrap;gap:14px}.trust-icon{width:45px;height:45px;font-size:1.375rem;border-radius:13px}.trust-inner>div:nth-child(2){width:calc(100% - 60px);flex:auto}.trust-inner h2{font-size:1.375rem}.trust-inner p{font-size:0.75rem}.trust-inner>.btn{margin-left:59px;font-size:0.75rem}.newsletter-inner{align-items:flex-start;flex-direction:column}.newsletter-inner h2{font-size:1.5625rem}.newsletter-form{grid-template-columns:1fr auto}.newsletter-form .btn{font-size:0.75rem;padding:10px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px 16px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;font-size:0.6875rem;line-height:1.7}.mobile-bottom-bar{display:flex;position:fixed;z-index:1040;left:0;right:0;bottom:0;min-height:59px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#151929f5;backdrop-filter:blur(15px);border-top:1px solid #ffffff16;justify-content:space-around}.mobile-bottom-bar button{border:0;background:transparent;color:var(--muted-foreground);display:flex;align-items:center;justify-content:center;gap:3px;flex-direction:column;min-width:47px;font-size:0.6875rem}.mobile-bottom-bar button i{font-size:1.125rem}.mobile-bottom-bar button:hover,.mobile-bottom-bar button:focus{color:var(--primary)}.mobile-bottom-bar b{display:inline;color:var(--primary);font-size:0.6875rem}.site-footer{padding-bottom:90px}.view-panel{width:100%;border-left:0}.panel-header{padding:18px}.panel-body{padding:18px}.panel-line{grid-template-columns:62px 1fr auto;gap:9px}.panel-line img{width:62px;height:65px}.panel-line h3{font-size:0.75rem}.form-split{grid-template-columns:1fr}.product-modal-title{font-size:1.3125rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Store administration dashboard */
.view-panel.full{width:min(100%,1180px)}
.adm{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.adm-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:0}
.adm-nav-item{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;border-radius:11px;padding:10px 12px;background:transparent;color:var(--muted-foreground);font-size:0.8125rem;font-weight:600;text-align:left;transition:.15s}
.adm-nav-item .icon{width:16px;height:16px;flex-shrink:0}
.adm-nav-item:hover{background:#ffffff0a;color:#fff}
.adm-nav-item.active{background:color-mix(in oklab,var(--primary) 13%,transparent);border-color:color-mix(in oklab,var(--primary) 33%,transparent);color:var(--accent)}
.adm-main{min-width:0}
.adm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.adm-head h3{font:700 1.5rem var(--font-display);margin:0 0 4px}
.adm-head p{margin:0;font-size:0.75rem;color:var(--muted-foreground)}
.adm-sel{width:auto;min-width:150px;max-width:100%}
.adm-search{max-width:360px;margin-bottom:14px}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.adm-stat,.adm-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;min-width:0;box-shadow:var(--shadow)}
.adm-stat small{display:block;font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.adm-stat strong{display:block;margin-top:5px;font:700 1.25rem var(--font-display);overflow-wrap:anywhere}
.adm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.adm-card h4{font:600 0.875rem var(--font-display);margin:0 0 12px}
.adm-big{font:800 2.125rem var(--font-display);color:var(--primary);margin:4px 0}
.adm-muted,.adm-card small,.adm-row small{color:var(--muted-foreground);font-size:0.75rem}
.adm-card small,.adm-row small{display:block;margin-top:3px}
.adm-svg{width:100%;height:auto;display:block}
.adm-svg text{fill:var(--muted-foreground);font-size:0.75rem}
.adm-svg .g{stroke:#ffffff14;stroke-width:1}
.adm-svg .ln{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linejoin:round}
.adm-svg circle{fill:var(--primary)}
.adm-bars{display:flex;flex-direction:column;gap:10px}
.adm-bar-row{display:grid;grid-template-columns:minmax(70px,120px) 1fr auto;gap:10px;align-items:center;font-size:0.75rem}
.adm-bar-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in oklab,var(--foreground) 88%,transparent)}
.adm-bar{height:9px;border-radius:9px;background:#ffffff12;overflow:hidden}
.adm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:9px}
.adm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:0.75rem}
.adm-list li{display:flex;justify-content:space-between;gap:10px;align-items:center}
.adm-rows{display:flex;flex-direction:column;gap:10px}
.adm-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 14px}
.adm-row strong{font-size:0.8125rem}
.adm-grow{flex:1;min-width:160px}
.adm-thumb{width:84px;height:84px;border-radius:12px;background:var(--muted);overflow:hidden;flex-shrink:0}
.adm-thumb.sm{width:52px;height:52px;border-radius:10px}
.adm-thumb.wide{width:92px;height:52px;border-radius:10px}
.adm-thumb img{width:100%;height:100%;object-fit:cover}
.adm-order-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.adm-order-top strong{font-size:0.875rem;margin-right:6px}
.adm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.adm-lines{list-style:none;margin:10px 0 6px;padding:10px 0 0;border-top:1px solid #ffffff12;display:flex;flex-direction:column;gap:5px;font-size:0.75rem;color:var(--muted-foreground)}
.adm-lines li{display:flex;justify-content:space-between;gap:10px}
.adm-badge{display:inline-flex;align-items:center;border-radius:20px;background:#ffffff12;color:color-mix(in oklab,var(--foreground) 88%,transparent);padding:3px 9px;font-size:0.75rem;font-weight:800;text-transform:capitalize;vertical-align:middle;white-space:nowrap}
.adm-badge.ok{background:#1c644e66;color:#79e4bf}.adm-badge.warn{background:color-mix(in oklab,var(--primary) 15%,transparent);color:#ffc27f}.adm-badge.bad{background:#a8333b55;color:#ff9b9b}
.adm-empty{padding:42px 12px;text-align:center;color:var(--muted-foreground);font-size:0.8125rem;border:1px dashed var(--border);border-radius:14px}
.adm-table-wrap td.adm-empty{border:0}
.adm-error{padding:16px;border:1px solid color-mix(in oklab,var(--destructive) 40%,transparent);background:color-mix(in oklab,var(--destructive) 8%,transparent);color:#ffb3b3;border-radius:12px;font-size:0.8125rem}
.adm-error p{margin:6px 0}.adm-error small{color:#e0a0a0}
.adm-inline{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:14px}
#admStaffForm.adm-inline{grid-template-columns:1fr auto}
.adm-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.adm-filters>*{flex:1 1 150px;min-width:0}
.adm-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:0.75rem;color:var(--muted-foreground)}
.adm-audit{display:block;width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:.15s}
.adm-audit:hover{border-color:color-mix(in oklab,var(--primary) 40%,transparent)}
.adm-chg{display:inline-block;margin-right:12px;font-size:0.75rem;color:color-mix(in oklab,var(--foreground) 88%,transparent)}.adm-chg em{font-style:normal;color:var(--muted-foreground)}
.adm-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.adm-table{width:100%;font-size:0.75rem;border-collapse:collapse}
.adm-table th{padding:11px 14px;text-align:left;font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.adm-table td{padding:11px 14px;border-top:1px solid var(--border);vertical-align:top}
.adm-num{width:110px}
.btn-sm.danger,.btn.danger{color:#ff9b9b}
.adm-icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted-foreground)}
.adm-icon-btn.danger:hover{background:color-mix(in oklab,var(--destructive) 12%,transparent);color:#ff8f8f}
.adm-switch{display:inline-flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--muted-foreground);cursor:pointer;margin:0}
.adm-switch input{position:absolute;opacity:0;pointer-events:none}
.adm-switch i{width:36px;height:20px;border-radius:20px;background:var(--border);position:relative;transition:.2s;flex-shrink:0}
.adm-switch i:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
.adm-switch input:checked+i{background:var(--primary)}
.adm-switch input:checked+i:after{transform:translateX(16px)}
.adm-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.adm-modal{position:fixed;inset:0;z-index:1200;background:#070a14b8;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.adm-modal-card{width:min(100%,680px);max-height:90vh;display:flex;flex-direction:column;background:var(--popover);border:1px solid #ffffff1c;border-radius:18px;box-shadow:0 30px 80px #000a}
.adm-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #ffffff12}
.adm-modal-head h3{font:700 1.25rem var(--font-display);margin:0}
.adm-modal-body{padding:20px 22px;overflow:auto}
.adm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.adm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.adm-field>label{font-size:0.75rem;font-weight:700;color:var(--muted-foreground);margin:0}
.adm-span2{grid-column:1/-1}
.adm-upload{display:flex;align-items:center;gap:14px}
.adm-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:6px 0 10px}
.adm-shot{position:relative;margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.adm-shot.cover{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.adm-shot img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.adm-shot figcaption{font-size:0.6875rem;font-weight:700;padding:4px 8px;color:var(--muted-foreground)}
.adm-shot.cover figcaption{color:var(--primary)}
.adm-shot-tools{position:absolute;top:4px;right:4px;display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end;max-width:calc(100% - 8px)}
.adm-shot-tools button{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:7px;background:rgba(7,13,25,.78);color:#fff;font-size:12px;cursor:pointer}
.adm-shot-tools button:hover{background:var(--primary)}
.adm-gallery-empty{grid-column:1/-1;margin:0;padding:14px;border:1px dashed var(--border);border-radius:12px;text-align:center}
.adm-muted{color:var(--muted-foreground);font-weight:500}
.adm-checks{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:6px}
.adm-check{display:inline-flex;align-items:center;gap:8px;font-size:0.8125rem;margin:0;cursor:pointer}
.adm-check input{accent-color:var(--primary);width:16px;height:16px}
.adm-dl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;font-size:0.75rem;margin:0 0 10px}
.adm-dl dt{color:var(--muted-foreground)}.adm-dl dd{margin:0;overflow-wrap:anywhere}
.adm-sub{font:600 0.75rem var(--font-display);margin:14px 0 6px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em}
.adm-pre{background:var(--popover);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:0.75rem;max-height:180px;overflow:auto;margin:0;color:color-mix(in oklab,var(--foreground) 88%,transparent)}
.mpesa-box{margin-top:12px;padding:12px;border:1px solid color-mix(in oklab,var(--primary) 27%,transparent);background:color-mix(in oklab,var(--primary) 6%,transparent);border-radius:12px}
.mpesa-box .form-note{margin-bottom:10px}
@media(max-width:860px){.adm{grid-template-columns:1fr}.adm-nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:6px}.adm-nav-item{width:auto;white-space:nowrap;flex-shrink:0}.adm-grid2{grid-template-columns:1fr}}
@media(max-width:560px){.adm-fields{grid-template-columns:1fr}.adm-inline,#admStaffForm.adm-inline{grid-template-columns:1fr}.adm-head{flex-direction:column}.adm-modal{padding:0;align-items:flex-end}.adm-modal-card{max-height:94vh;border-radius:18px 18px 0 0}}

/* Hero: category rail + advert carousel */
.hero-section.store-hero{padding:18px 0 8px;background:none}
.hero-layout{display:grid;grid-template-columns:minmax(210px,22%) minmax(0,1fr);gap:16px}
.hero-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:2px;max-height:480px;overflow-y:auto;scrollbar-width:thin}
.hero-rail button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:color-mix(in oklab,var(--foreground) 88%,transparent);padding:11px 12px;border-radius:11px;font:600 0.875rem var(--font-sans);text-align:left;transition:.15s}
.hero-rail button:hover{background:#ffffff0d;color:var(--primary)}
.hero-rail .icon{color:var(--primary);width:20px;height:20px;flex-shrink:0}
.hero-carousel{position:relative;min-height:480px;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.hero-slide{position:absolute;inset:0;display:block;color:#fff;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform .7s ease;pointer-events:none;cursor:pointer}
.hero-slide.active{opacity:1;transform:none;pointer-events:auto;z-index:1}
.hero-slide>img{width:100%;height:100%;object-fit:cover}
.hero-slide .glow{width:100%;height:100%;background:radial-gradient(circle at 15% 20%,color-mix(in oklab,var(--primary) 28%,transparent),transparent 55%),radial-gradient(circle at 85% 10%,color-mix(in oklab,var(--success) 20%,transparent),transparent 50%)}
.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--background) 0,#070d19a8 38%,transparent 80%)}
.hero-caption{position:absolute;left:0;right:0;bottom:0;padding:32px;z-index:2;transform:translateY(14px);opacity:0;transition:.7s .2s}
.hero-slide.active .hero-caption{transform:none;opacity:1}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.hero-chip{border-radius:20px;background:var(--primary);color:#fff;padding:5px 14px;font-size:0.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.hero-chip.red{background:var(--destructive)}
.hero-caption h2{font:800 clamp(24px,3.6vw,40px)/1.1 var(--font-display);margin:14px 0 8px;text-transform:uppercase;letter-spacing:-.5px;max-width:760px}
.hero-caption p{font-size:0.875rem;color:color-mix(in oklab,var(--foreground) 88%,transparent);max-width:560px;margin:0 0 6px}
.hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--primary);color:#fff;border-radius:30px;padding:11px 22px;font-weight:700;font-size:0.9375rem;box-shadow:0 12px 30px -10px color-mix(in oklab,var(--primary) 60%,transparent)}
.hero-dots{position:absolute;top:18px;right:18px;z-index:3;display:flex;gap:7px}
.hero-dots button{height:6px;width:7px;border:0;padding:0;border-radius:6px;background:#ffffff66;transition:.4s}
.hero-dots button.active{width:26px;background:var(--primary)}
@media(max-width:991px){.hero-layout{grid-template-columns:1fr}.hero-rail{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}.hero-rail button{width:auto;white-space:nowrap;padding:9px 12px;font-size:0.8125rem}.hero-carousel{min-height:340px}.hero-caption{padding:20px}}

/* Page routing + homepage product flow */
[data-pages][hidden]{display:none!important}
.flow-section{padding:22px 0 8px}
.flash-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--destructive);color:#fff;border-radius:30px;padding:12px 22px;margin-bottom:16px}
.flash-bar h2{font:700 1.5rem var(--font-display);margin:0}
.flash-bar .icon{width:22px;height:22px}
.flash-bar .flash-next{margin-left:auto;font-weight:700;font-size:0.875rem}
.flash-bar .flash-next b{font-variant-numeric:tabular-nums}
.flow-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.flow-head h2{font:700 1.625rem var(--font-display);margin:0}
.flow-head>.icon{color:var(--primary);width:22px;height:22px}
.flow-head span{font-size:0.8125rem;color:var(--muted-foreground)}
.flow-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important}
@media(max-width:1199px){.flow-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:899px){.flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}}
@media(max-width:600px){.flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.flash-bar{border-radius:20px;padding:8px 12px;gap:6px;flex-wrap:nowrap}.flash-bar .icon{width:15px;height:15px}.flash-bar h2{font-size:0.875rem;white-space:nowrap}.flow-head h2{font-size:1.25rem}.flash-bar .flash-next{margin-left:auto;width:auto;font-size:0.6875rem;white-space:nowrap}}
@media(max-width:400px){.flash-bar{padding:8px 10px}.flash-bar .flash-next-label{display:none}}
.product-badge.badge-sale{background:var(--destructive);color:#fff;border-radius:6px;font-weight:800}
.flash-strip{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--destructive);color:#fff;font-size:0.75rem;font-weight:700;padding:5px;font-variant-numeric:tabular-nums}
.flash-strip .icon{width:14px;height:14px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--muted-foreground);margin-bottom:14px;flex-wrap:wrap}
.crumbs a:hover{color:var(--primary)}.crumbs .icon{width:14px;height:14px}.crumbs span{color:#fff;font-weight:600}


/* ============ UX layer: accessibility, touch targets, hierarchy ============ */
html{scrollbar-color:var(--border) var(--background)}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--radius-sm)}
.form-control:focus-visible,.form-select:focus-visible,.search-box input:focus-visible{outline:0}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 25%,transparent)}
.skip-link{position:absolute;left:12px;top:-64px;z-index:2000;background:var(--primary);color:var(--primary-foreground);padding:10px 16px;border-radius:var(--radius-sm);font-weight:700;transition:top .15s}
.skip-link:focus{top:12px}
main:focus{outline:0}

/* surfaces */
.site-header{background:color-mix(in oklab,var(--background) 92%,transparent)}
.announcement{background:var(--popover)}
.product-card,.category-card,.order-card,.adm-card,.adm-row,.adm-stat{border-radius:var(--radius);border-color:var(--border)}
.category-card{background:var(--card)}
.deals-banner{background:linear-gradient(110deg,var(--muted),color-mix(in oklab,var(--primary) 10%,var(--card)) 50%,var(--card))}

/* labels: sentence case instead of tracked caps */
.eyebrow{font-size:0.8125rem;letter-spacing:0;text-transform:none;font-weight:700}
.product-brand{text-transform:none;letter-spacing:0;font-size:0.75rem;color:var(--accent)}
.hero-caption h2{text-transform:none;letter-spacing:-.02em}
.hero-chip{text-transform:none;letter-spacing:0;color:var(--primary-foreground)}
.hero-chip.red{color:var(--destructive-foreground)}
.status-pill{text-transform:capitalize}
.adm-stat small,.adm-table th,.adm-sub{text-transform:none;letter-spacing:0;font-size:0.75rem}

/* product card: calmer hover, consistent media, readable badges */
.product-card{background:var(--card);transition:border-color .2s,box-shadow .2s}
.product-card:hover{transform:none;border-color:color-mix(in oklab,var(--primary) 55%,var(--border));box-shadow:var(--shadow)}
.product-media{height:auto;aspect-ratio:5/4;background:var(--muted)}
.product-name{font-size:0.9375rem;min-height:40px}
.product-price{font-size:1.125rem;letter-spacing:-.02em}
.product-price-row{flex-wrap:wrap}
.product-stock{font-size:0.75rem}
.product-badge{font-size:0.6875rem;padding:4px 8px}
.product-badge.badge-sale{background:color-mix(in oklab,var(--destructive) 78%,black);color:var(--destructive-foreground)}
.add-cart-btn{min-height:42px;border-radius:var(--radius-sm);font-size:0.8125rem;transition:filter .15s}
.add-cart-btn:hover:not(:disabled){filter:brightness(1.08)}
.quick-view-btn{width:42px;min-height:42px;border-radius:var(--radius-sm)}
.product-wish{width:40px;height:40px}
.hero-cta{color:var(--primary-foreground)}
.hero-slide:after{background:linear-gradient(to top,var(--background) 0,color-mix(in oklab,var(--background) 72%,transparent) 42%,transparent 85%)}

/* touch targets (44px) */
.icon-action{min-width:44px;min-height:44px;justify-content:center}
.close-btn{width:44px;height:44px}
.search-box{height:46px;border-radius:var(--radius-md)}
.search-box button{min-width:84px}
.qty-control button{width:36px;height:34px}
.qty-control span{width:34px}
.remove-line{min-height:32px;padding:0 4px;text-decoration:underline;text-underline-offset:3px}
.mobile-bottom-bar button{min-height:48px;font-size:0.6875rem}
.btn-brand,.btn-ghost,.panel-primary,.panel-secondary{min-height:44px;border-radius:var(--radius-md)}

/* forms */
.form-label{font-size:0.8125rem;color:var(--foreground)}
.form-note{font-size:0.8125rem}
.form-control,.form-select{font-size:0.875rem;padding:12px 14px;min-height:46px;border-radius:var(--radius-sm);background:var(--card);border-color:var(--input)}
.form-control:focus,.form-select:focus{background:var(--muted);box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 25%,transparent)}

/* cart: total and checkout stay visible while the list scrolls */
.panel-body .cart-summary{position:sticky;bottom:-22px;margin:20px -24px -22px;padding:18px 24px 22px;background:var(--popover);border-top:1px solid var(--border);box-shadow:0 -16px 24px -18px oklch(0.05 0.02 264 / .9)}

@media(max-width:767px){
  .form-control,.form-select,.search-box input,.newsletter-form .form-control{font-size:1rem}
  .panel-body .cart-summary{bottom:-18px;margin:20px -18px -18px;padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
  .product-name{font-size:0.875rem;min-height:38px}
  .add-cart-btn{font-size:0.75rem}
}

/* ===== Mobile navigation & accessibility improvements ===== */
html,body{overflow-x:clip}@supports not (overflow:clip){html,body{overflow-x:hidden}}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.menu-head,.menu-group,.menu-backdrop{display:none}
@media(max-width:767px){
  :root{--bottom-bar-h:calc(62px + env(safe-area-inset-bottom))}
  body{padding-bottom:var(--bottom-bar-h)}
  .site-footer{padding-bottom:12px}
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--background)}
  .header-actions .header-dup{display:none}
  .mobile-menu-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
  .mobile-menu-btn[aria-expanded="true"]{background:color-mix(in oklab,var(--primary) 18%,transparent);color:var(--primary)}
  .main-nav{position:fixed;z-index:1062;top:0;right:0;bottom:var(--bottom-bar-h);width:min(86vw,340px);display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 18px 18px;background:var(--popover);border-left:1px solid #ffffff16;box-shadow:-20px 0 60px #05071177;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility .22s}
  .main-nav.open{transform:none;visibility:visible}
  .menu-head{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--border);margin-bottom:6px}
  .menu-head strong{font:800 1.0625rem var(--font-display)}
  .menu-close{width:44px;height:44px;border:0;border-radius:12px;background:var(--card);color:var(--foreground);display:grid;place-items:center;font-size:1.25rem}
  .menu-group{display:block;margin:16px 2px 4px;font-size:0.6875rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted-foreground);font-weight:700}
  .main-nav .nav-link{min-height:46px;display:flex;align-items:center;font-size:0.9375rem;color:var(--foreground);border-top:1px solid #ffffff09}
  .main-nav .nav-link.active{color:var(--primary);font-weight:800}
  .main-nav .nav-link.active:before{content:"";width:4px;height:18px;border-radius:4px;background:var(--primary);margin-right:10px}
  .main-nav .nav-track{min-height:46px;margin:14px 0 0;padding:0 14px;border-radius:12px;border:1px solid var(--border);font-size:0.875rem}
  .menu-backdrop{display:block;position:fixed;z-index:1061;inset:0 0 var(--bottom-bar-h) 0;background:#080b16a8;backdrop-filter:blur(3px)}
  .menu-backdrop[hidden]{display:none}
  body.menu-open{overflow:hidden}
  /* Modal covers the bottom bar: background navigation is inert while aria-modal is active. */
  .view-overlay{bottom:0;z-index:1095}
  .view-panel{height:100%;max-height:100dvh;padding-top:env(safe-area-inset-top)}
  .panel-body{overscroll-behavior:contain;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .panel-body .cart-summary{bottom:calc(-18px - env(safe-area-inset-bottom));margin-bottom:calc(-18px - env(safe-area-inset-bottom));padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .mobile-bottom-bar{z-index:1090;min-height:var(--bottom-bar-h);padding:4px 4px calc(4px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .mobile-bottom-bar button{position:relative;min-width:0;min-height:54px;padding:4px 2px;border-radius:12px;font-size:0.6875rem;font-weight:600;gap:3px}
  .mobile-bottom-bar button>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-bottom-bar button i{font-size:1.25rem}
  .mobile-bottom-bar button:hover,.mobile-bottom-bar button:focus{color:var(--muted-foreground)}
  .mobile-bottom-bar button.active{color:var(--primary);font-weight:800;background:color-mix(in oklab,var(--primary) 12%,transparent)}
  .mobile-bottom-bar button.active:before{content:"";position:absolute;top:-4px;left:28%;right:28%;height:3px;border-radius:0 0 4px 4px;background:var(--primary)}
  .mobile-bottom-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .nav-icon{position:relative;display:inline-flex}
  .mobile-bottom-bar .nav-badge{position:absolute;top:-6px;left:12px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--primary);color:var(--primary-foreground);font-size:0.625rem;font-weight:800;display:grid;place-items:center;line-height:1}
  .mobile-bottom-bar .nav-badge[hidden]{display:none}
  .toast-container{bottom:var(--bottom-bar-h)!important;z-index:1100}
}
@media(max-width:360px){.mobile-bottom-bar button{font-size:0.625rem}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){.main-nav{transition:none}}

/* Compact phone catalogue, matching the approved three-column reference. */
.product-review-short,.add-label-short{display:none}
@media(max-width:767px){
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .product-card{border-radius:18px}
  .product-media{height:auto;aspect-ratio:1}
  .product-info{padding:7px 6px;gap:0}
  .product-brand,.product-stock:not(.out),.product-wish,.quick-view-btn{display:none}
  .product-name{font-size:0.75rem;line-height:1.3;min-height:32px;height:32px;margin:0 0 5px;letter-spacing:0}
  .product-rating{gap:2px;font-size:0.625rem;line-height:16px;color:var(--muted-foreground);white-space:nowrap}
  .product-rating>i{color:var(--accent);font-size:0.6875rem}
  .product-review-full,.add-label-full{display:none}
  .product-review-short,.add-label-short{display:inline}
  .product-price-row{flex-direction:column;align-items:flex-start;gap:2px;margin-top:6px;min-height:34px}
  .product-price{font-size:0.8125rem;line-height:17px;letter-spacing:0;color:var(--primary);white-space:nowrap}
  .product-old-price{font-size:0.625rem;line-height:14px;color:var(--muted-foreground);white-space:nowrap}
  .product-card-footer{margin-top:6px;gap:0}
  .add-cart-btn{width:100%;min-width:0;min-height:32px;padding:5px 3px;border-radius:20px;font-size:0.75rem;font-weight:600;gap:5px}
  .add-cart-btn>i{font-size:1.0625rem;flex-shrink:0}
  .product-badge{top:4px;left:4px;padding:3px 4px;font-size:0.5625rem;line-height:14px;border-radius:4px}
}

/* Narrow phones (<390px): three columns truncate product names and squeeze purchase
   controls, so switch to two columns. 390px+ keeps the approved three-column layout. */
@media(max-width:389px){
  .product-grid,.flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-info{padding:9px 9px}
  .product-name{font-size:0.8125rem;min-height:34px;height:auto;max-height:34px}
  .product-price{font-size:0.875rem}
  .add-cart-btn{min-height:44px;font-size:0.8125rem}
}

/* ===== Responsive UI/UX refinement layer ===== */
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--tap:44px}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.search-box input{color:var(--foreground);font-size:0.875rem}
.search-box button{font-size:0.8125rem;min-width:var(--tap)}
.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 25%,transparent)}
.icon-action,.mobile-bottom-bar button,.close-btn,.menu-close,.mobile-menu-btn{min-height:var(--tap);min-width:var(--tap)}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
.product-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product-grid img{aspect-ratio:1/1;object-fit:cover;width:100%}
.view-panel{max-width:min(460px,100vw)}
@media (max-width:991px){
  .header-main{gap:var(--space-4);min-height:68px}
  .announcement span:nth-child(2){display:none}
}
@media (max-width:767px){
  body{font-size:0.9375rem;padding-bottom:72px}
  .announcement{padding:6px var(--space-4);font-size:0.7188rem}
  .header-main{flex-wrap:wrap;padding:var(--space-2) 0}
  .header-dup{display:none}
  .search-box{order:3;flex:1 1 100%;max-width:none;height:44px}
  .search-box input{font-size:1rem}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .section-heading{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .sort-wrap,.sort-wrap select{width:100%}
  .newsletter-form{flex-direction:column}
  .newsletter-form .btn,.newsletter-form input{width:100%;min-height:var(--tap)}
  .view-panel{max-width:100vw;width:100%}
  .toast-container{bottom:76px!important}
}
@media (max-width:360px){.product-grid{gap:var(--space-2)}.brand small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ============ Light theme ============ */
[data-theme="light"]{
  color-scheme:light;
  --background:oklch(0.985 0.004 250);
  --foreground:oklch(0.24 0.03 264);
  --surface:#ffffff;
  --surface-foreground:oklch(0.24 0.03 264);
  --card:#ffffff;
  --card-foreground:oklch(0.24 0.03 264);
  --popover:oklch(0.965 0.008 258);
  --popover-foreground:oklch(0.24 0.03 264);
  --secondary:oklch(0.93 0.012 258);
  --secondary-foreground:oklch(0.28 0.03 264);
  --muted:oklch(0.945 0.01 258);
  --muted-foreground:oklch(0.47 0.03 258);
  --border:oklch(0.88 0.014 258);
  --input:oklch(0.9 0.012 258);
  --sidebar:oklch(0.965 0.008 258);
  --sidebar-foreground:oklch(0.28 0.03 264);
  --sidebar-accent:oklch(0.93 0.012 258);
  --sidebar-accent-foreground:oklch(0.28 0.03 264);
  --sidebar-border:oklch(0.88 0.014 258);
  --shadow:0 16px 40px -18px oklch(0.5 0.05 264 / .28);
}
[data-theme="light"] .site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--border)}
[data-theme="light"] .search-box input{color:var(--foreground)}
[data-theme="light"] .nav-link:hover,[data-theme="light"] .nav-link.active{color:var(--foreground)}
[data-theme="light"] .mobile-menu-btn{color:var(--foreground)}
[data-theme="light"] .hero-section{background:radial-gradient(ellipse at 72% 36%,oklch(0.92 0.03 258) 0,transparent 42%),radial-gradient(ellipse at 7% 15%,color-mix(in oklab,var(--primary) 12%,transparent),transparent 37%),linear-gradient(120deg,var(--popover),var(--popover) 65%,var(--card));border-bottom:1px solid var(--border)}
[data-theme="light"] .hero-product-main{border-color:var(--border);box-shadow:0 35px 80px oklch(0.5 0.05 264 / .3)}
[data-theme="light"] .hero-orbit{border-color:color-mix(in oklab,var(--primary) 25%,transparent)}
[data-theme="light"] .orbit-two{border-color:oklch(0.85 0.02 258)}
[data-theme="light"] .floating-card{background:color-mix(in oklab,var(--card) 94%,transparent);border-color:var(--border)}
[data-theme="light"] .perks-section,[data-theme="light"] .trust-section,[data-theme="light"] .deals-banner{border-color:var(--border)}
[data-theme="light"] .category-card,[data-theme="light"] .product-card{border-color:var(--border)}
[data-theme="light"] .category-image{background:radial-gradient(circle at 50% 40%,oklch(0.92 0.015 258),var(--muted))}
[data-theme="light"] .product-wish{background:rgba(255,255,255,.88);border-color:var(--border);color:var(--foreground)}
[data-theme="light"] .product-wish.active{color:#e0455a;background:#fdecef}
[data-theme="light"] .product-wish:hover{color:#e0455a}
[data-theme="light"] .product-price{color:var(--foreground)}
[data-theme="light"] .product-card:hover{box-shadow:0 15px 30px oklch(0.5 0.05 264 / .18)}
[data-theme="light"] .newsletter-form .form-control{color:var(--foreground)}
[data-theme="light"] .footer-grid h3{color:var(--foreground)}
[data-theme="light"] .footer-bottom{border-top-color:var(--border)}
[data-theme="light"] .view-overlay{background:rgba(15,23,42,.45)}
[data-theme="light"] .view-panel{border-left-color:var(--border);box-shadow:-20px 0 60px oklch(0.5 0.05 264 / .25)}
[data-theme="light"] .panel-header{border-bottom-color:var(--border)}
[data-theme="light"] .close-btn{color:var(--foreground)}
[data-theme="light"] .panel-line,[data-theme="light"] .review-item{border-bottom-color:var(--border)}
[data-theme="light"] .qty-control button{color:var(--foreground)}
[data-theme="light"] .cart-summary,[data-theme="light"] .summary-row.total{border-top-color:var(--border)}
[data-theme="light"] .summary-row.total{color:var(--foreground)}
[data-theme="light"] .panel-secondary{color:var(--foreground)}
[data-theme="light"] .form-control,[data-theme="light"] .form-select{color:var(--foreground)}
[data-theme="light"] .form-control:focus,[data-theme="light"] .form-select:focus{color:var(--foreground)}
[data-theme="light"] .form-select option{background:#fff}
[data-theme="light"] .toast{color:var(--foreground)}
[data-theme="light"] .toast .btn-close{filter:none}
[data-theme="light"] .mobile-bottom-bar{background:rgba(255,255,255,.96);border-top-color:var(--border)}
[data-theme="light"] .hero-dots button{background:rgba(0,0,0,.25)}
[data-theme="light"] .crumbs span{color:var(--foreground)}
[data-theme="light"] .feature-tile{border-color:var(--border)}
[data-theme="light"] .panel-empty>i{color:var(--muted-foreground)}
[data-theme="light"] .btn-ghost:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent);color:var(--foreground)}
[data-theme="light"] .text-link:hover{color:oklch(0.62 0.17 60)}
[data-theme="light"] .status-pill{color:oklch(0.55 0.15 60)}
[data-theme="light"] .status-pill.delivered{background:#1c644e22;color:#15795c}
[data-theme="light"] .hero-rail button:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent)}
[data-theme="light"] .adm-nav-item:hover{background:color-mix(in oklab,var(--foreground) 6%,transparent);color:var(--foreground)}
[data-theme="light"] .adm-svg .g{stroke:var(--border)}
[data-theme="light"] .adm-bar{background:color-mix(in oklab,var(--foreground) 8%,transparent)}
[data-theme="light"] .adm-badge{background:color-mix(in oklab,var(--foreground) 8%,transparent)}
[data-theme="light"] .adm-badge.ok{background:#1c644e22;color:#15795c}
[data-theme="light"] .adm-badge.warn{color:oklch(0.55 0.15 60)}
[data-theme="light"] .adm-badge.bad{background:#a8333b1e;color:#c0392f}
[data-theme="light"] .adm-lines{border-top-color:var(--border)}
[data-theme="light"] .adm-modal{background:rgba(15,23,42,.45)}
[data-theme="light"] .adm-modal-card{border-color:var(--border);box-shadow:0 30px 80px oklch(0.4 0.05 264 / .35)}
[data-theme="light"] .adm-modal-head{border-bottom-color:var(--border)}
[data-theme="light"] .btn-sm.danger,[data-theme="light"] .btn.danger{color:#c0392f}
[data-theme="light"] .adm-icon-btn.danger:hover{color:#c0392f}
[data-theme="light"] .adm-error{color:#b03a3a}
[data-theme="light"] .adm-error small{color:#c06060}
[data-theme="light"] .nav-link{border-top-color:var(--border)}


/* =====================================================================
   v2 — Inter typography, full-width storefront, redesigned light theme,
   and the standalone store-dashboard page
   ===================================================================== */
:root{
  --font-display:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(14px,1.7vw,28px);
  --hero-h:clamp(400px,31vw,640px);
  --hdr:84px;
  --primary-ink:var(--primary);   /* orange used for TEXT; darkened in light theme */
  --ok-ink:#64d8b1;
  --hero-scrim:5,9,18;
}
[data-theme="light"]{
  --primary-ink:oklch(0.55 0.19 45);
  --accent:oklch(0.56 0.16 55);
  --ok-ink:#0f7a58;
  --background:oklch(0.975 0.005 255);
  --popover:oklch(0.962 0.008 255);
  --border:oklch(0.9 0.012 258);
  --muted-foreground:oklch(0.46 0.03 258);
  --shadow:0 1px 2px oklch(0.3 0.04 264 / .06),0 10px 28px -14px oklch(0.4 0.05 264 / .22);
}
[hidden]{display:none!important}
html{font-family:var(--font-sans)}
body,button,input,select,textarea,.btn{font-family:var(--font-sans)}
h1,h2,h3,h4,h5,h6,.font-display{font-family:var(--font-display)}
body{font-feature-settings:"cv11","ss01";letter-spacing:-.005em}

/* ---- full-width layout (matches the reference) ---- */
.container-xl{max-width:2000px!important;width:100%;padding-inline:var(--gutter)!important}
.announcement{padding-inline:var(--gutter);font-size:0.8125rem}
.header-main{min-height:76px;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px}.brand-mark{display:block;flex:none;width:40px;height:40px;line-height:0}.brand-mark img{width:100%;height:100%;border-radius:11px;object-fit:cover;box-shadow:0 2px 8px #0004}
.brand strong{font:800 clamp(22px,1.9vw,27px)/1 var(--font-display);letter-spacing:-.02em}
.brand small{display:none}
.brand strong{color:var(--primary)}
.brand em{color:var(--foreground)}
.search-box{max-width:none;flex:1;height:48px;border-radius:14px;background:var(--card)}
.search-box input{font-size:0.9375rem}
.search-box button{font-size:0.875rem}
.main-nav{gap:clamp(18px,2.2vw,34px);min-height:56px}
.nav-link{font-size:0.9375rem;font-weight:500;color:var(--muted-foreground)}
.nav-track{font-size:0.875rem}
.header-actions{gap:14px}
.icon-action{font-size:0.75rem;font-weight:500}

/* hero: category rail + advert fill the page width */
.hero-section.store-hero{padding:20px 0 14px}
.hero-layout{grid-template-columns:clamp(220px,19.5vw,320px) minmax(0,1fr);gap:clamp(14px,1.4vw,22px);align-items:stretch}
.hero-rail{height:var(--hero-h);max-height:none;border-radius:24px;padding:10px 4px 10px 10px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--foreground) 28%,transparent) transparent}
.hero-rail button{font:500 1rem/1.25 var(--font-sans);gap:14px;padding:12px 12px;color:var(--foreground)}
.hero-rail button:hover{color:var(--primary-ink)}
.hero-rail .icon{width:22px;height:22px}
.hero-carousel{height:var(--hero-h);min-height:0;border-radius:28px}
.hero-slide{color:#fff}
.hero-slide:after{background:linear-gradient(to top,rgba(var(--hero-scrim),.95) 0,rgba(var(--hero-scrim),.62) 34%,rgba(var(--hero-scrim),.08) 78%,transparent 100%)}
.hero-caption{padding:clamp(20px,2.4vw,40px)}
.hero-chip{font-size:0.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:6px 14px}
.hero-caption h2{font:800 clamp(26px,3.3vw,50px)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:-.015em;color:#fff;max-width:none}
.hero-caption p{font-size:clamp(14px,1.15vw,17px);color:rgba(255,255,255,.78);max-width:720px}
.hero-cta{font-size:1rem;font-weight:700;padding:12px 24px}
.hero-dots button{background:rgba(255,255,255,.5)}
.hero-dots button.active{background:var(--primary)}

/* categories + products: grids that use the whole width */
.category-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))!important;gap:clamp(14px,1.4vw,22px)}
.category-image{height:auto;aspect-ratio:4/3}
.category-card{border-radius:20px}
.category-info strong{font-size:1rem;font-weight:700}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.section-heading h2{font-weight:800}
@media(max-width:991px){
  :root{--hero-h:clamp(300px,56vw,420px)}
  .hero-layout{grid-template-columns:1fr}
  .hero-rail{height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px;border-radius:18px;scrollbar-gutter:auto}
  .hero-rail button{width:auto;white-space:nowrap;padding:10px 14px;font-size:0.875rem;gap:10px}
  .hero-carousel{border-radius:22px}
}
@media(max-width:575px){
  .category-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-card:last-child:nth-child(odd){grid-column:auto}
  .brand strong{font-size:1.375rem}
}

/* ---- buttons: dark ink on orange in both themes ---- */
.btn-brand{--bs-btn-color:var(--primary-foreground);--bs-btn-hover-color:var(--primary-foreground);--bs-btn-active-color:var(--primary-foreground);--bs-btn-disabled-color:var(--primary-foreground);--bs-btn-active-bg:color-mix(in oklab,var(--primary),white 10%);--bs-btn-active-border-color:var(--primary)}
.btn-brand:disabled{opacity:.6}

/* ====================== LIGHT THEME (complete) ====================== */
[data-theme="light"] .announcement{background:oklch(0.2 0.03 264);color:oklch(0.93 0.01 250)}
[data-theme="light"] .announcement a{color:oklch(0.82 0.16 65)}
[data-theme="light"] .site-header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--border)}
[data-theme="light"] .brand strong{color:var(--primary)}
[data-theme="light"] .brand em{color:var(--foreground)}
[data-theme="light"] .search-box{background:#fff;border-color:var(--border)}
[data-theme="light"] .search-box:hover{border-color:color-mix(in oklab,var(--primary) 40%,var(--border))}
[data-theme="light"] .icon-action{color:var(--foreground)}
[data-theme="light"] .icon-action:hover,[data-theme="light"] .icon-action:focus{color:var(--primary-ink)}
[data-theme="light"] .nav-link{color:oklch(0.42 0.03 258)}
[data-theme="light"] .nav-link:hover,[data-theme="light"] .nav-link.active{color:var(--foreground)}
[data-theme="light"] .nav-track,[data-theme="light"] .text-link,[data-theme="light"] .eyebrow,[data-theme="light"] .product-brand,[data-theme="light"] .auth-switch button{color:var(--primary-ink)}
[data-theme="light"] .text-link:hover{color:oklch(0.45 0.17 45)}
[data-theme="light"] .hero-section.store-hero{background:none;border-bottom:0}
[data-theme="light"] .hero-rail{background:#fff;border-color:var(--border);box-shadow:var(--shadow)}
[data-theme="light"] .hero-rail button:hover{background:color-mix(in oklab,var(--primary) 9%,transparent)}
[data-theme="light"] .hero-carousel{border-color:var(--border);box-shadow:var(--shadow);background:oklch(0.22 0.03 264)}
[data-theme="light"] .hero-caption h2{color:#fff}
[data-theme="light"] .hero-dots button{background:rgba(255,255,255,.55)}
[data-theme="light"] .hero-dots button.active{background:var(--primary)}
[data-theme="light"] .perks-section{background:#fff;border-block:1px solid var(--border)}
[data-theme="light"] .perk>span{background:color-mix(in oklab,var(--primary) 12%,white);color:var(--primary-ink)}
[data-theme="light"] .category-card,[data-theme="light"] .product-card{background:#fff;border-color:var(--border);box-shadow:0 1px 2px oklch(0.3 0.04 264 / .05)}
[data-theme="light"] .category-card:hover{border-color:color-mix(in oklab,var(--primary) 55%,var(--border))}
[data-theme="light"] .category-image,[data-theme="light"] .product-media{background:oklch(0.95 0.008 258)}
[data-theme="light"] .product-card:hover{box-shadow:var(--shadow)}
[data-theme="light"] .product-name{color:var(--foreground)}
[data-theme="light"] .product-stock{color:var(--ok-ink)}
[data-theme="light"] .product-stock.out{color:#c0392f}
[data-theme="light"] .product-rating{color:#d98a00}
[data-theme="light"] .product-rating span{color:var(--muted-foreground)}
[data-theme="light"] .product-badge.badge-sale,[data-theme="light"] .flash-bar,[data-theme="light"] .flash-strip{background:#d92d3f;color:#fff}
[data-theme="light"] .add-cart-btn{color:var(--primary-foreground)}
[data-theme="light"] .quick-view-btn{background:#fff;color:var(--foreground);border-color:var(--border)}
[data-theme="light"] .quick-view-btn:hover{color:var(--primary-ink);border-color:var(--primary)}
[data-theme="light"] .trust-section{background:linear-gradient(110deg,color-mix(in oklab,var(--primary) 8%,white),var(--popover))}
[data-theme="light"] .trust-icon{background:color-mix(in oklab,var(--primary) 14%,white);color:var(--primary-ink)}
[data-theme="light"] .newsletter-section{background:var(--background)}
[data-theme="light"] .newsletter-form .form-control{background:#fff}
[data-theme="light"] .site-footer{background:#fff;border-top:1px solid var(--border)}
[data-theme="light"] .footer-grid a:hover,[data-theme="light"] .footer-grid p i,[data-theme="light"] .footer-bottom a{color:var(--primary-ink)}
[data-theme="light"] .social-links a{background:#fff}
[data-theme="light"] .view-panel{background:#fff}
[data-theme="light"] .panel-body .cart-summary{background:#fff;box-shadow:0 -14px 22px -18px oklch(0.4 0.05 264 / .25)}
[data-theme="light"] .panel-line img,[data-theme="light"] .product-modal-image{background:oklch(0.95 0.008 258)}
[data-theme="light"] .qty-control button{background:var(--secondary)}
[data-theme="light"] .filter-chip{background:#fff;color:var(--foreground)}
[data-theme="light"] .order-card,[data-theme="light"] .feature-tile{background:#fff}
[data-theme="light"] .product-modal-price,[data-theme="light"] .filter-chip i{color:var(--primary-ink)}
[data-theme="light"] .status-pill{color:oklch(0.45 0.15 50);background:color-mix(in oklab,var(--primary) 16%,white)}
[data-theme="light"] .form-control,[data-theme="light"] .form-select,[data-theme="light"] .sort-wrap select{background-color:#fff;border-color:var(--input)}
[data-theme="light"] .form-control:focus,[data-theme="light"] .form-select:focus{background:#fff}
[data-theme="light"] .form-control:disabled{background:var(--muted);color:var(--muted-foreground)}
[data-theme="light"] .toast{background:#fff;box-shadow:var(--shadow)}
[data-theme="light"] .mobile-bottom-bar button{color:var(--muted-foreground)}
[data-theme="light"] .mobile-bottom-bar button.active,[data-theme="light"] .mobile-bottom-bar b{color:var(--primary-ink)}
[data-theme="light"] .mpesa-box{background:color-mix(in oklab,var(--primary) 7%,white)}
[data-theme="light"] .loading-state,[data-theme="light"] .empty-state{background:#fff}
[data-theme="light"] .skip-link{color:#111}
@media(max-width:991px){[data-theme="light"] .hero-rail{box-shadow:none}}

/* ====================== STORE DASHBOARD PAGE ====================== */
body[data-page="admin"] .announcement,
body[data-page="admin"] .search-box,
body[data-page="admin"] .main-nav,
body[data-page="admin"] .menu-backdrop,
body[data-page="admin"] .mobile-menu-btn,
body[data-page="admin"] .header-actions [data-view="wishlist"],
body[data-page="admin"] .header-actions [data-view="cart"],
body[data-page="admin"] .mobile-bottom-bar,
body[data-page="admin"] .newsletter-section,
body[data-page="admin"] .site-footer{display:none!important}
body[data-page="admin"] .header-main{min-height:var(--hdr)}
body[data-page="admin"] .header-actions{margin-left:auto}
body[data-page="admin"] #dashLink{color:var(--primary-ink)}
.admin-page{min-height:calc(100vh - var(--hdr))}
.dash-root{width:100%}
.dash{display:grid;grid-template-columns:clamp(250px,17vw,300px) minmax(0,1fr);min-height:calc(100vh - var(--hdr))}
.dash-side{position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:18px 14px;background:var(--sidebar);border-right:1px solid var(--border);scrollbar-width:thin}
.dash-me{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);position:relative;flex-wrap:wrap;transition:border-color .15s}
.dash-me:hover{border-color:color-mix(in oklab,var(--primary) 50%,var(--border))}
.dash-avatar,.prof-avatar{display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:linear-gradient(140deg,var(--primary),oklch(0.78 0.17 75));color:oklch(0.18 0.03 264);font-weight:800;letter-spacing:-.02em}
.dash-avatar{width:44px;height:44px;font-size:1rem}
.dash-me-text{min-width:0;flex:1}
.dash-me-text strong,.dash-me-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-me-text strong{font-size:0.875rem;font-weight:700}
.dash-me-text small{font-size:0.75rem;color:var(--muted-foreground);margin-top:2px}
.dash-me .adm-badge{position:absolute;top:10px;right:10px;padding:2px 8px;font-size:0.6875rem}
.dash-nav{display:flex;flex-direction:column;gap:16px}
.dash-group{display:flex;flex-direction:column;gap:2px}
.dash-group-label{padding:0 12px 6px;font-size:0.75rem;font-weight:600;color:var(--muted-foreground)}
.dash-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:color-mix(in oklab,var(--foreground) 82%,transparent);font-size:0.875rem;font-weight:500;position:relative;transition:background .15s,color .15s}
.dash-nav-item .icon{width:18px;height:18px;flex-shrink:0;opacity:.85}
.dash-nav-item:hover{background:color-mix(in oklab,var(--foreground) 7%,transparent);color:var(--foreground)}
.dash-nav-item.active{background:color-mix(in oklab,var(--primary) 14%,transparent);color:var(--primary-ink);font-weight:700}
.dash-nav-item.active:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--primary)}
.dash-side-foot{margin-top:auto;display:grid}
.dash-body{min-width:0;padding:0 clamp(16px,2.4vw,44px) 56px}
.dash-top{display:flex;align-items:center;gap:14px;padding:20px 0 6px}
.dash-crumb{display:flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--muted-foreground);min-width:0;flex:1}
.dash-crumb .icon{width:14px;height:14px}
.dash-crumb strong{color:var(--foreground);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-burger{display:none;width:42px;height:42px;place-items:center;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--foreground);font-size:1.25rem}
.dash-scrim{position:fixed;inset:0;z-index:1090;background:rgba(5,9,18,.55);backdrop-filter:blur(2px)}
.dash-gate{max-width:460px;margin:12vh auto;padding:40px 28px;text-align:center;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.dash-gate>.icon{font-size:2.375rem;color:var(--primary-ink)}
.dash-gate h2{font:800 1.5rem var(--font-display);margin:14px 0 8px}
.dash-gate p{color:var(--muted-foreground);font-size:0.875rem;margin-bottom:22px}

/* content blocks inside the dashboard */
.adm-main{max-width:1560px}
.adm-head{margin:10px 0 22px;align-items:center}
.adm-head h3{font:800 clamp(24px,2.2vw,30px)/1.15 var(--font-display);letter-spacing:-.02em}
.adm-head p{font-size:0.875rem}
.adm-sel{min-height:42px}
.adm-card,.adm-stat,.adm-row,.adm-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.adm-card{padding:20px 22px}
.adm-card h4{font:700 0.9375rem var(--font-display);margin-bottom:16px}
.adm-stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.adm-stat{padding:18px 20px;position:relative;overflow:hidden}
.adm-stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.adm-stat:nth-child(2):before{background:oklch(0.7 0.15 165)}
.adm-stat:nth-child(3):before{background:oklch(0.7 0.14 250)}
.adm-stat:nth-child(4):before{background:oklch(0.72 0.16 85)}
.adm-stat:nth-child(5):before{background:oklch(0.65 0.2 305)}
.adm-stat small{font-size:0.8125rem;font-weight:500}
.adm-stat strong{font:800 clamp(22px,2vw,28px) var(--font-display);letter-spacing:-.02em;margin-top:8px}
.adm-grid2{gap:20px;margin-bottom:20px}
@media(min-width:1200px){.adm-grid2:first-of-type{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.adm-row{padding:14px 18px;transition:border-color .15s}
.adm-row:hover{border-color:color-mix(in oklab,var(--primary) 45%,var(--border))}
.adm-rows{gap:12px}
.adm-table th{background:var(--muted);font-weight:600;padding:12px 16px}
.adm-table td{padding:13px 16px}
.adm-filters .form-control,.adm-filters .form-select,.adm-search{background:var(--surface)}
.adm-modal-card{background:var(--surface)}
.adm-bar i{background:linear-gradient(90deg,var(--primary),oklch(0.8 0.16 80))}
.adm-svg .ln{stroke:var(--primary)}
[data-theme="light"] .adm-nav-item.active,[data-theme="light"] .adm-badge.warn{color:oklch(0.45 0.15 50)}
[data-theme="light"] .adm-table th{background:oklch(0.955 0.008 258)}
[data-theme="light"] .adm-thumb{background:oklch(0.95 0.008 258)}
[data-theme="light"] .dash-side{background:oklch(0.97 0.007 258)}
[data-theme="light"] .adm-svg text{fill:oklch(0.45 0.03 258)}

/* my profile */
.prof{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:20px;align-items:start}
.prof-left,.prof-right{display:flex;flex-direction:column;gap:20px;min-width:0}
.prof-card{padding:0;overflow:hidden;text-align:center}
.prof-cover{height:96px;background:radial-gradient(circle at 18% 20%,oklch(0.82 0.16 70 / .9),transparent 55%),linear-gradient(120deg,var(--primary),oklch(0.55 0.2 35))}
.prof-avatar{width:92px;height:92px;font-size:2rem;margin:-46px auto 0;border:5px solid var(--surface);position:relative}
.prof-name{font:800 1.375rem var(--font-display);letter-spacing:-.02em;margin:12px 0 2px!important}
.prof-mail{color:var(--muted-foreground);font-size:0.875rem;margin:0 0 12px;overflow-wrap:anywhere;padding-inline:20px}
.prof-badges{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
.prof-facts{list-style:none;margin:0;padding:6px 22px 22px;text-align:left;display:grid;gap:2px;border-top:1px solid var(--border)}
.prof-facts li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.prof-facts li:last-child{border-bottom:0}
.prof-facts .icon{width:18px;height:18px;color:var(--primary-ink);flex-shrink:0}
.prof-facts small{display:block;font-size:0.75rem;color:var(--muted-foreground);margin:0}
.prof-facts span{font-size:0.875rem;font-weight:600;overflow-wrap:anywhere}
.prof-facts em{font-style:normal;font-weight:400;color:var(--muted-foreground)}
.prof-stat{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.prof-stat strong{font:800 2.125rem var(--font-display);letter-spacing:-.03em;color:var(--primary-ink)}
.prof-stat span{font-size:0.875rem;color:var(--muted-foreground)}
.prof-activity{list-style:none;margin:0;padding:0}
.prof-activity li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:0.875rem;font-weight:500}
.prof-activity small{display:block;font-weight:400;color:var(--muted-foreground);margin-top:2px;text-transform:capitalize}
.prof-activity time{font-size:0.75rem;color:var(--muted-foreground);white-space:nowrap}
.prof-pref{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--border)}
.prof-pref:first-of-type{border-top:0;padding-top:0}
.prof-pref strong{display:block;font-size:0.875rem}
.prof-pref small{display:block;font-size:0.8125rem;color:var(--muted-foreground);margin-top:2px;max-width:420px}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--muted);border:1px solid var(--border);gap:2px}
.seg button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted-foreground);font-size:0.8125rem;font-weight:600;padding:8px 14px;border-radius:9px}
.seg button.on{background:var(--surface);color:var(--foreground);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.prof .adm-fields{margin-bottom:10px}

@media(max-width:1100px){.prof{grid-template-columns:1fr}}
@media(max-width:991px){
  .dash{grid-template-columns:1fr}
  .dash-side{position:fixed;z-index:1100;top:0;left:0;bottom:0;height:100%;width:min(86vw,320px);transform:translateX(-102%);transition:transform .22s ease;box-shadow:20px 0 50px rgba(0,0,0,.35)}
  .dash-side.open{transform:none}
  .dash-nav-item.active:before{left:-14px}
  .dash-burger{display:grid}
  .dash-top-link{display:none}
}
@media(max-width:560px){.dash-body{padding-inline:14px}.adm-card{padding:16px}.prof-facts{padding-inline:16px}}

/* Lucide's font CSS matches any class starting with "icon-", which hijacked .icon-action's text font */
.icon-action,.icon-action>span{font-family:var(--font-sans)!important;font-style:normal;font-weight:500}
.category-card{padding:0;display:block;width:100%;color:inherit}

.dash-me .adm-badge{display:none}
.dash-role{display:inline-block;margin-top:6px;font-style:normal;font-size:0.6875rem;font-weight:700;padding:2px 8px;border-radius:20px;background:color-mix(in oklab,var(--primary) 16%,transparent);color:var(--primary-ink)}
.dash-me-text small{margin-top:1px}
.adm-stat strong{font-size:clamp(20px,1.7vw,26px);white-space:nowrap}
.dash-nav{gap:12px}
.dash-nav-item{padding:9px 12px}
.btn .icon{margin-right:6px;vertical-align:-2px}
.btn-sm .icon{margin-right:5px}
.prof-card{padding:0!important}
@media(max-width:560px){.adm-head{align-items:stretch}.adm-head .adm-sel,.adm-head .btn{width:100%}}
@media(max-width:767px){.search-box{flex:1 1 100%;order:5;width:100%}.header-main{gap:10px}}

/* ---- dashboard sidebar: fixed in place; only the nav list and the page scroll ---- */
.dash-side{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));overflow:hidden;gap:14px}
.dash-me,.dash-side-foot{flex-shrink:0}
.dash-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding-right:8px;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--foreground) 25%,transparent) transparent}
.dash-side-foot{padding-top:12px;border-top:1px solid var(--border);margin-top:0}
.dash-nav-item.active:before{left:-14px}
@media(max-width:991px){.dash-side{position:fixed;height:100%;max-height:none;overflow:hidden}}

/* ---- Lucide replacements for text glyphs ---- */
.toast-x{display:grid;place-items:center;width:32px;height:32px;margin:auto 8px auto 0;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.7;flex-shrink:0}
.toast-x:hover{opacity:1;background:color-mix(in oklab,var(--foreground) 10%,transparent)}
.toast-x .icon{font-size:1rem}
.qty-control button{display:grid;place-items:center}
.qty-control button .icon{font-size:0.875rem}
.review-stars{display:inline-flex;gap:2px;color:#e0a100;vertical-align:-2px}
.review-stars .icon{font-size:0.8125rem}
.adm-star{font-size:0.75rem;color:#e0a100;vertical-align:-1px}
.adm-arrow{font-size:0.75rem;vertical-align:-1px;margin:0 2px;color:var(--muted-foreground)}


/* =====================================================================
   v3 — settings, accessibility modes, account deletion, native app shell
   (carried over from the "aba" build and adapted to this design system)
   ===================================================================== */
:root{--success-text:var(--ok-ink);--danger-text:#ff9a9a;--warn-text:#ffc27f}
[data-theme="light"]{--danger-text:oklch(0.48 0.2 25);--warn-text:oklch(0.46 0.12 55)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root[data-text="2"]{font-size:112.5%}
:root[data-text="3"]{font-size:125%}

/* Grayscale: zero-chroma tokens plus a monochrome filter for images and any leftover colour */
:root[data-theme="grayscale"]{
  color-scheme:dark;filter:grayscale(1);
  --primary:oklch(0.93 0 0);--primary-foreground:oklch(0.16 0 0);--accent:oklch(0.82 0 0);--ring:oklch(0.93 0 0);
  --destructive:oklch(0.55 0 0);--success:oklch(0.7 0 0);--border:oklch(0.4 0 0);--input:oklch(0.4 0 0);
}

/* High contrast */
:root[data-contrast="high"]{--muted-foreground:oklch(0.92 0.01 260);--border:oklch(0.72 0.02 260);--input:oklch(0.72 0.02 260);--foreground:oklch(1 0 0)}
:root[data-contrast="high"][data-theme="light"]{--foreground:oklch(0 0 0);--muted-foreground:oklch(0.28 0.02 260);--border:oklch(0.3 0.02 260);--input:oklch(0.3 0.02 260);--accent:oklch(0.42 0.15 48)}
:root[data-contrast="high"] :where(.product-card,.category-card,.order-card,.form-control,.form-select,.search-box,.panel-secondary,.quick-view-btn,.pref-opt span,.pref-switch,.btn-ghost){border-width:2px}
:root[data-contrast="high"] a:not(.brand):not(.hero-slide):not(.btn){text-decoration:underline;text-underline-offset:3px}

/* Reduce motion, underlined links, easier-to-read font */
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before,:root[data-motion="reduce"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-links="underline"] a:not(.brand):not(.hero-slide):not(.hero-cta):not(.btn){text-decoration:underline;text-underline-offset:3px}
:root[data-font="readable"]{--font-sans:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif;--font-display:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif}
:root[data-font="readable"] body{letter-spacing:.015em;word-spacing:.06em;line-height:1.7}

/* Settings panel (class names are prefixed so they never clash with the dashboard's .seg switch) */
.prefs{display:grid;gap:20px}
.pref-group{border:0;padding:0;margin:0;min-width:0}
.pref-group legend{float:none;width:auto;padding:0;margin:0 0 8px;font:700 .9375rem var(--font-display)}
.pref-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.pref-seg-3{grid-template-columns:repeat(3,1fr)}
.pref-opt{position:relative;margin:0;display:block}
.pref-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pref-opt span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--card);font-weight:600;font-size:.875rem;text-align:center;transition:border-color .15s,background .15s}
.pref-opt input:checked+span{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,var(--card))}
.pref-opt input:focus-visible+span{outline:2px solid var(--ring);outline-offset:2px}
.sw{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--border)}
.sw-dark{background:oklch(0.16 0.028 264)}.sw-light{background:oklch(0.985 0.004 250)}.sw-gray{background:linear-gradient(90deg,#222 50%,#bbb 50%)}
.sw-system{background:linear-gradient(90deg,oklch(0.16 0.028 264) 50%,oklch(0.985 0.004 250) 50%)}
.ts{font-family:var(--font-display);line-height:1}.ts1{font-size:14px}.ts2{font-size:18px}.ts3{font-size:23px}
.pref-switches{display:grid;gap:8px}
.pref-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);cursor:pointer}
.pref-switch strong{display:block;font-size:.875rem}
.pref-switch small{display:block;margin-top:2px;color:var(--muted-foreground);font-size:.75rem}
.pref-switch small:empty{display:none}
.pref-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pref-switch i{flex:none;position:relative;width:44px;height:26px;border-radius:26px;background:var(--input);transition:background .2s}
.pref-switch i:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0005;transition:transform .2s}
.pref-switch input:checked~i{background:var(--primary)}
.pref-switch input:checked~i:after{transform:translateX(18px)}
.pref-switch:focus-within{outline:2px solid var(--ring);outline-offset:2px}

/* Account deletion */
.danger-zone{margin-top:26px;padding-top:4px;border-top:1px solid var(--border)}
.danger-zone-card{padding:14px 16px;border:1px solid color-mix(in oklab,var(--destructive) 45%,var(--border));border-radius:var(--radius-md);background:color-mix(in oklab,var(--destructive) 8%,var(--card))}
.danger-zone-card .form-note{font-weight:700;margin:0 0 6px}
.panel-secondary.danger{border-color:var(--destructive);color:var(--danger-text)}
.panel-primary.danger{background:color-mix(in oklab,var(--destructive) 78%,black);color:#fff}

/* Update notice, hero pause, bigger carousel hit areas */
.update-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:1300;display:flex;align-items:center;gap:14px;background:var(--popover);color:var(--foreground);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px 10px 16px;box-shadow:var(--shadow)}
.hero-dots{align-items:center}
.hero-dots button[data-dot]{position:relative}
.hero-dots button[data-dot]:after{content:"";position:absolute;inset:-12px -5px}
.hero-dots .hero-pause{width:28px;height:28px;margin-left:4px;border-radius:50%;display:grid;place-items:center;background:oklch(0.16 0.028 264 / .75);color:#fff;font-size:14px;padding:0}

/* Dashboard link only appears in the phone drawer, where the header icons are hidden */
.main-nav .nav-menu-only{display:none}

/* Native feel + store-required edge-to-edge layout (safe areas are 0 in a normal browser) */
body{-webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);background:var(--background);z-index:1070;pointer-events:none}
.site-header{top:env(safe-area-inset-top)}
a,button,[role="button"],label,select,summary,input{touch-action:manipulation}
.view-panel,.panel-body{overscroll-behavior:contain}
html.is-native{overscroll-behavior-y:none}
html.is-native body,html.is-native button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.is-native input,html.is-native textarea,html.is-native .about-copy,html.is-native .policy-copy,html.is-native .detail-list{-webkit-user-select:text;user-select:text}
@media(max-width:767px){
  .main-nav .nav-menu-only{display:flex}
  .mobile-bottom-bar{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .update-bar{bottom:calc(var(--bottom-bar-h) + 12px);width:calc(100% - 24px)}
}

/* Loading speed: skip rendering of stable sections far below the screen */
.trust-section,.newsletter-section,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 480px}

/* Category icons: database icon (lucide name, emoji or image) with graceful fallbacks */
.cat-emoji{display:inline-grid;place-items:center;width:1.25em;font-style:normal;font-size:1.15em;line-height:1}
.cat-ico-img{width:1.35em;height:1.35em;object-fit:contain;border-radius:6px;flex:none}
.category-fallback.cat-emoji{font-size:3rem;width:auto}
.category-fallback.cat-ico-img{width:64px;height:64px}

/* Crawlable internal links (footer) */
.seo-links{padding-block:0 24px}
.seo-links nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:.8125rem;color:var(--muted-foreground)}
.seo-links a{color:var(--muted-foreground);text-decoration:underline;text-underline-offset:3px}
.seo-links a:hover{color:var(--foreground)}

/* The crawl links point at website-only pages, so hide them inside the store app */
html.is-native .seo-links{display:none}

/* hero previous / next arrows */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:oklch(0.16 0.028 264 / .6);color:#fff;font-size:20px;cursor:pointer;opacity:0;transition:opacity .25s,background .25s}
.hero-arrow.prev{left:12px}.hero-arrow.next{right:12px}
.hero-carousel:hover .hero-arrow,.hero-arrow:focus-visible{opacity:1}
.hero-arrow:hover{background:var(--primary)}
@media(hover:none){.hero-arrow{opacity:.85;width:36px;height:36px;font-size:17px}}