/* ==========================================================================
   Decowill Business - B2B Wholesale Portal
   Design tokens taken from the WoodMart theme in use on decowill.com
   ========================================================================== */
:root{
  --acc:#1C61E7; --acc-h:#1550C9; --acc-soft:#E6EFFD; --acc-link:#3371E9;
  --title:#242424; --txt:#767676; --lnk:#5C6B7A;
  --brd:rgba(0,0,0,.1); --pg:#F6F6F6;
  --ok:#2FA84F; --hot:#E53935; --star:#F5A623;
  --r:8px; --r-pill:99px; --fh:42px; --gap:20px; --pad:20px; --maxw:1440px;
  --font:Lato,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{overflow-x:hidden;max-width:100vw;}
img{max-width:100%;}
body{font-family:var(--font);background:#fff;color:var(--txt);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
button{cursor:pointer;border:none;background:none;}
h1,h2,h3,h4,h5,h6{color:var(--title);font-weight:700;line-height:1.3;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* layout helpers */
.card{background:#fff;border-radius:var(--r);padding:20px 22px;border:1px solid var(--brd);}
.stack{display:flex;flex-direction:column;gap:var(--gap);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.grid-side{display:grid;grid-template-columns:340px 1fr;gap:var(--gap);align-items:start;}
.grid-side>aside{order:-1;}
.mt0{margin-top:0!important;} .mb0{margin-bottom:0!important;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 22px;
  border-radius:var(--r);font-size:14px;font-weight:700;transition:background .15s,border-color .15s,color .15s;}
.btn-sm{height:36px;padding:0 16px;font-size:12px;}
.btn-primary{background:var(--acc);color:#fff;}
.btn-primary:hover{background:var(--acc-h);}
.btn-outline{background:#fff;border:1px solid var(--acc);color:var(--acc);}
.btn-outline:hover{background:var(--acc-soft);}
.btn-ghost{background:#fff;border:1px solid var(--brd);color:var(--title);}
.btn-ghost:hover{border-color:var(--title);}
.btn-white{background:#fff;color:var(--title);}
.btn-white:hover{background:#efefef;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--acc-soft);color:var(--acc);
  font-size:11px;font-weight:700;padding:7px 14px;border-radius:var(--r-pill);}
.pill:hover{background:#d7e5fb;}

/* forms */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--title);margin-bottom:6px;}
.field label .req{color:var(--hot);}
.field .hint{font-size:11px;color:var(--txt);margin-top:5px;}
.inp,select.inp,textarea.inp{width:100%;height:var(--fh);padding:0 14px;background:#fff;
  border:1px solid var(--brd);border-radius:var(--r);color:var(--title);outline:none;transition:border-color .15s;}
textarea.inp{height:auto;padding:11px 14px;min-height:110px;resize:vertical;line-height:1.6;}
.inp::placeholder{color:#a8a8a8;}
.inp:focus{border-color:var(--acc);}
.inp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.check{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--lnk);line-height:1.6;}
.check input{margin-top:2px;flex-shrink:0;}

/* topbar — a clean, premium light grey used site-wide (homepage
   included). A festive campaign still overrides it via .campaign-*. */
.topbar{background:#F2F2F1;color:#5A5A5A;text-align:center;font-size:11px;padding:8px 16px;letter-spacing:.03em;border-bottom:1px solid #E4E4E3;}
.topbar b{color:var(--title);}
.topbar a{color:var(--title);}

/* header */
.hd{background:#fff;border-bottom:1px solid var(--brd);}
.hd-in{display:flex;align-items:center;gap:28px;padding:16px var(--pad);max-width:var(--maxw);margin:0 auto;}
.burger{display:none;width:38px;height:38px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.burger:hover{background:var(--acc-h);}
.brand{display:flex;flex-direction:column;line-height:1.05;flex-shrink:0;}
/* Wordmark: DECOWILL as one plain text run in a high-contrast luxury
   serif, with a polished metallic sweep (bronze -> golden highlight ->
   bronze) as one gradient across the whole word. No per-letter styling. */
.brand .bn{font-family:'Playfair Display',Georgia,serif;font-size:32px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#76501B 0%,#A87525 25%,#D8AD55 50%,#A87525 75%,#704A18 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.brand .bn em{font-style:normal;color:var(--acc);}
.brand .bs{font-size:9.5px;font-weight:700;color:#b0b0b0;letter-spacing:.15em;text-transform:uppercase;margin-top:2px;}
.search{flex:1;max-width:560px;margin-left:auto;height:44px;display:flex;align-items:center;border:1px solid var(--brd);
  border-radius:8px;padding:0 4px 0 18px;background:var(--pg);}
.search input{flex:1;border:none;outline:none;background:none;color:var(--title);font-size:13px;}
.search input::placeholder{color:var(--txt);}
.search button{width:36px;height:36px;border-radius:6px;background:var(--acc);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.search button:hover{background:var(--acc-h);}
.hd-actions{display:flex;align-items:center;gap:26px;flex-shrink:0;}
.hd-act{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--title);font-size:10.5px;font-weight:600;}
.hd-act-icon{position:relative;}
.hd-act-icon i{font-size:22px;color:var(--title);}
.hd-act:hover .hd-act-icon i,.hd-act:hover{color:var(--acc);}
.hd-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--acc);color:#fff;font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;}

/* subnav */
.sub{background:#fff;border-bottom:1px solid var(--brd);}
.sub-in{display:flex;align-items:center;padding:0 var(--pad);max-width:var(--maxw);margin:0 auto;}
.allcat{position:relative;height:46px;display:flex;align-items:center;gap:8px;padding:0 18px 0 0;flex-shrink:0;cursor:pointer;border-right:1px solid var(--brd);margin-right:22px;}
.allcat .dot{width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;}
.allcat .lbl{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--title);white-space:nowrap;}
.megamenu{position:absolute;top:calc(100% + 1px);left:0;z-index:60;min-width:252px;background:#fff;
  border-radius:0 0 var(--r) var(--r);box-shadow:0 6px 24px rgba(0,0,0,.14);padding:8px;display:none;}
.allcat.open .megamenu{display:block;}
.megamenu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--lnk);}
.megamenu a:hover{background:var(--acc-soft);color:var(--acc);}
.megamenu a i{font-size:17px;width:20px;text-align:center;}
.megamenu a span{margin-left:auto;font-size:11px;color:#b0b0b0;}
.sub-links{display:flex;align-items:center;height:46px;}
.sub-links a{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--title);padding:0 15px;height:46px;display:flex;align-items:center;position:relative;white-space:nowrap;}
.sub-links a:hover:after,.sub-links a.on:after{content:'';position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--acc);}
.sub-links a:hover,.sub-links a.on{color:var(--acc);}
.sub-right{margin-left:auto;display:flex;align-items:center;gap:16px;flex-shrink:0;}
.sub-tag{font-size:11px;color:var(--txt);display:flex;align-items:center;gap:5px;}
.cart-amt{font-size:12px;font-weight:800;color:var(--title);white-space:nowrap;}

/* body */
.wrap{max-width:var(--maxw);margin:0 auto;}
.main{padding:var(--pad);display:flex;flex-direction:column;gap:var(--gap);}

.crumb{font-size:12px;color:var(--txt);}
.crumb a{color:var(--lnk);} .crumb a:hover{color:var(--acc);}
.crumb b{color:var(--title);font-weight:400;}

.sec-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.sec-hd h1,.sec-hd h2{font-size:17px;letter-spacing:-.3px;}
.sec-hd .sub-t{font-size:12px;color:var(--txt);margin-top:2px;}
.page-hd{background:#fff;border-radius:var(--r);padding:24px;}
.page-hd h1{font-size:24px;letter-spacing:-.5px;margin-bottom:6px;}
.page-hd p{font-size:13px;color:var(--txt);max-width:640px;line-height:1.7;}

/* product card */
.pgrid{display:grid;gap:16px;}
.pgrid-5{grid-template-columns:repeat(5,1fr);}
.pgrid-4{grid-template-columns:repeat(4,1fr);}
.pgrid-3{grid-template-columns:repeat(3,1fr);}
.pc{position:relative;background:#fff;padding:12px;border:1px solid var(--brd);border-radius:var(--r);
  box-shadow:0 3px 12px rgba(0,0,0,.05);transition:transform .2s,box-shadow .2s;}
.pc:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.1);}
.pc .bdg{position:absolute;top:20px;left:20px;z-index:2;display:flex;flex-direction:column;gap:4px;}
.pc .bdg span{font-size:9px;font-weight:700;color:#fff;padding:3px 8px;border-radius:var(--r-pill);}
.b-new{background:var(--ok);} .b-hot{background:var(--hot);} .b-off{background:var(--acc);}
.pc .im{aspect-ratio:1;background:#fafafa;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;font-size:50px;color:#d8d8d8;margin-bottom:10px;overflow:hidden;}
.pc .im img{width:100%;height:100%;object-fit:cover;}
.pc .nm{font-size:12px;font-weight:700;color:var(--title);line-height:1.35;margin-bottom:3px;}
.pc .ct{font-size:11px;color:var(--txt);margin-bottom:4px;}
.pc .st{color:var(--star);font-size:10px;letter-spacing:1.5px;margin-bottom:4px;}
.pc .ins{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:3px;margin-bottom:5px;}
.pc .pr{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;}
.pc .pr b{font-size:14px;font-weight:700;color:var(--acc);}
.pc .pr s{font-size:11px;color:#bbb;}
.pc .mq{font-size:10px;color:var(--txt);margin-bottom:9px;}
.pc .add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:var(--acc);color:#fff;font-size:11px;font-weight:700;
  padding:9px 0;border-radius:var(--r);text-align:center;}
.pc .add:before{content:'+';display:inline-flex;width:15px;height:15px;border-radius:50%;align-items:center;
  justify-content:center;background:rgba(255,255,255,.25);font-size:12px;line-height:15px;}
.pc .add:hover{background:var(--acc-h);}

/* Custom uploadable hero slider — full-width, replaces default hero
   when active slides exist */
.custom-hero{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/4.4;background:var(--pg);}
.custom-hero.hero-mobile{aspect-ratio:4/3;}
.custom-hero-track{position:relative;width:100%;height:100%;}
.custom-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;display:block;}
.custom-hero-slide.on{opacity:1;z-index:1;}
.custom-hero-slide img{display:block;width:100%;height:100%;object-fit:cover;}
.custom-hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2;}
.custom-hero-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer;padding:0;transition:background .2s,width .2s;}
.custom-hero-dots button.on{background:#fff;width:22px;border-radius:4px;}
/* Belt-and-suspenders CSS fallback for the rare case JS is disabled —
   the JS above is the primary, reliable mechanism (see index.php),
   this just prevents both showing stacked if JS never runs at all. */
@media (min-width:701px){ .custom-hero.hero-mobile{display:none;} }
@media (max-width:700px){ .custom-hero.hero-desktop{display:none;} }

/* category tiles */
.cats{display:flex;gap:14px;}
.cat{flex:1;min-width:0;text-align:center;}
.cat .im{aspect-ratio:1;background:var(--pg);border-radius:50%;border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;align-items:center;
  justify-content:center;font-size:32px;color:#c8c8c8;margin-bottom:10px;transition:transform .2s,box-shadow .2s,background .15s,color .15s;overflow:hidden;}
.cat .im img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.cat:hover .im{background:var(--acc-soft);color:var(--acc);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.cat b{display:block;font-size:11px;font-weight:700;color:var(--title);line-height:1.3;}
.cat span{display:block;font-size:10px;color:var(--txt);}

/* Shop-by-Category carousel — desktop shows 7 tiles at a time with a
   Prev/Next control; tablet & mobile keep the original wrapping grid.
   The nowrap/fixed-width rules only engage once JS adds .dw-ready, so a
   no-JS desktop still gets a (squeezed but visible) single row. */
.cat-carousel{position:relative;}
.cat-viewport{overflow:hidden;}
.cat-nav{position:absolute;top:34%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid var(--brd);box-shadow:0 3px 12px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;color:var(--title);font-size:16px;z-index:3;}
.cat-nav:hover{background:var(--pg);}
.cat-nav-prev{left:-8px;}
.cat-nav-next{right:-8px;}
.cat-nav[hidden]{display:none;}
@media (min-width:1025px){
  .cat-carousel.dw-ready .cats{flex-wrap:nowrap;transition:transform .35s ease;}
  .cat-carousel.dw-ready .cats>.cat{flex:0 0 calc((100% - (6 * 14px)) / 7);}
}

/* Deal of the Day — "Show More" reveal for deals beyond the first five.
   .deal-extra is display:contents so the wrapped .pc still sits directly
   in the grid; .dw-collapsed hides those extras until the button is used. */
.deal-extra{display:contents;}
.pgrid.dw-collapsed .deal-extra{display:none;}
.dw-show-more-row{text-align:center;margin-top:16px;}
button.dw-show-more{border:none;cursor:pointer;font-size:12px;}

/* tier table */
.tierbox{background:var(--acc-soft);border-radius:var(--r);padding:14px 16px;}
.tierbox h4{font-size:13px;display:flex;align-items:center;gap:7px;margin-bottom:11px;}
.tierbox h4 i{color:var(--acc);font-size:16px;}

/* Mobile navigation drawer */
.mdrawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;}
.mdrawer-overlay.open{display:block;}
.mdrawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;background:#fff;z-index:1000;
  overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;}
.mdrawer-overlay.open .mdrawer{transform:translateX(0);}
.mdrawer-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--brd);}
.mdrawer-hd .bn{font-size:22px;} /* inherits the gradient wordmark styling from .brand .bn */
.mdrawer-hd button{width:32px;height:32px;border-radius:50%;background:var(--pg);border:none;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--title);}
.mdrawer-links{display:flex;flex-direction:column;padding:8px;}
.mdrawer-links a{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--title);text-decoration:none;}
.mdrawer-links a i{font-size:18px;color:var(--txt);width:20px;}
.mdrawer-links a.on,.mdrawer-links a:active{background:var(--acc-soft);color:var(--acc);}
.mdrawer-links a.on i{color:var(--acc);}
.mdrawer-divider{padding:14px 20px 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt);border-top:1px solid var(--brd);margin-top:6px;}
.mdrawer-cats{display:flex;flex-direction:column;padding:0 8px;}
.mdrawer-cats a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:8px;font-size:13px;color:var(--lnk);text-decoration:none;}
.mdrawer-cats a i{font-size:16px;width:18px;text-align:center;}
.mdrawer-cats a span{margin-left:auto;font-size:11px;color:#b0b0b0;}
.mdrawer-cats a:active{background:var(--pg);}
@media (min-width:861px){
  .mdrawer-overlay{display:none !important;}
}
.filter-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.filter-hd h3{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--title);margin:0;}
.filter-reset{font-size:11px;font-weight:700;color:var(--acc);text-decoration:none;}
.f-opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;font-size:13px;color:var(--lnk);text-decoration:none;transition:background .15s;}
.f-opt:hover{background:var(--pg);}
.f-opt.on{color:var(--acc);font-weight:700;}
.f-chk{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--brd);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;}
.f-opt.on .f-chk{background:var(--acc);border-color:var(--acc);}
.f-count{margin-left:auto;font-size:11px;color:#b0b0b0;}

/* Active filter chips */
.cat-pill{display:inline-flex;align-items:center;gap:6px;background:var(--acc-soft);color:var(--acc);
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1px solid transparent;}
.cat-pill.active:hover{background:#dde9fc;border-color:var(--acc);}

/* Product detail tabs — pure CSS, no JS, via hidden radio inputs */
.ptab-radio{position:absolute;opacity:0;pointer-events:none;}
.ptab-nav{display:flex;gap:4px;border-bottom:1px solid var(--brd);margin-bottom:20px;flex-wrap:wrap;}
.ptab-nav label{font-size:12.5px;font-weight:700;color:var(--txt);padding:10px 16px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s;}
.ptab-nav label:hover{color:var(--title);}
.ptab-panel{display:none;}
#ptab1:checked ~ .ptab-nav label[for="ptab1"],
#ptab2:checked ~ .ptab-nav label[for="ptab2"],
#ptab3:checked ~ .ptab-nav label[for="ptab3"],
#ptab4:checked ~ .ptab-nav label[for="ptab4"]{color:var(--acc);border-bottom-color:var(--acc);}
#ptab1:checked ~ .ptab-panel#ptab-panel-1,
#ptab2:checked ~ .ptab-panel#ptab-panel-2,
#ptab3:checked ~ .ptab-panel#ptab-panel-3,
#ptab4:checked ~ .ptab-panel#ptab-panel-4{display:block;}
table.tt{width:100%;border-collapse:collapse;}
table.tt th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt);text-align:left;padding:0 0 7px;}
table.tt th:last-child,table.tt td:last-child{text-align:right;}
table.tt td{font-size:13px;color:var(--lnk);padding:6px 0;border-top:1px solid rgba(28,97,231,.14);}
table.tt tr.on td{color:var(--acc);font-weight:700;}

/* data tables */
table.dt{width:100%;border-collapse:collapse;}
table.dt th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--txt);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--brd);}
table.dt td{font-size:13px;color:var(--lnk);padding:12px;border-bottom:1px solid var(--brd);vertical-align:middle;}
table.dt td b{color:var(--title);}
table.dt tr:last-child td{border-bottom:none;}
table.spec{width:100%;border-collapse:collapse;margin-bottom:6px;}
table.spec td{font-size:13px;padding:8px 0;border-bottom:1px solid var(--brd);}
table.spec td:first-child{color:var(--txt);}
table.spec td:last-child{text-align:right;color:var(--title);font-weight:700;}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);}
.chip-ok{background:#e8f6ec;color:#1e7a38;}
.chip-wait{background:#fff4e0;color:#96620a;}
.chip-info{background:var(--acc-soft);color:var(--acc);}
.chip-bad{background:#fdeaea;color:#a82020;}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--brd);border-radius:var(--r);background:#fff;overflow:hidden;flex-shrink:0;}
.qty button{width:34px;height:44px;color:var(--title);font-size:16px;}
.qty button:hover{background:#f2f2f2;}
.qty input{width:52px;height:44px;border:none;outline:none;text-align:center;font-size:15px;font-weight:700;color:var(--title);}
.qty-sm button{height:36px;width:28px;} .qty-sm input{height:36px;width:44px;font-size:13px;}

/* hero + banners */
.hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--gap);}
.slider{grid-row:1/3;border-radius:var(--r);background:linear-gradient(135deg,#3A2A4D,#5D3A6B);padding:30px 34px;
  min-height:240px;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden;}
.slide{display:none;} .slide.on{display:block;}
.slider h1{font-size:26px;color:#fff;letter-spacing:-.5px;margin-bottom:8px;}
.slider p{font-size:12.5px;color:rgba(255,255,255,.75);margin-bottom:14px;}
.slider .art{display:flex;justify-content:center;gap:14px;margin-top:18px;}
.slider .art i{font-size:42px;color:rgba(255,255,255,.22);}
.dots{display:flex;gap:5px;justify-content:center;margin-top:20px;}
.dots button{width:7px;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.3);padding:0;}
.dots button.on{background:#fff;width:16px;}
.tile-lg{border-radius:var(--r);background:#F5E3E6;padding:26px 28px;position:relative;overflow:hidden;
  min-height:180px;display:flex;flex-direction:column;justify-content:center;}
.tile-lg h2{font-size:24px;color:rgba(36,36,36,.5);letter-spacing:-.4px;margin-bottom:14px;}
.tile-lg .art{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:82px;color:rgba(36,36,36,.1);}
.cd{display:flex;gap:8px;margin-bottom:16px;}
.cd div{background:#fff;border-radius:var(--r);padding:7px 0;min-width:46px;text-align:center;}
.cd b{display:block;font-size:17px;color:var(--title);line-height:1.1;}
.cd span{display:block;font-size:9px;color:var(--txt);}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
.tile-sm{border-radius:var(--r);padding:22px;position:relative;overflow:hidden;min-height:130px;}
.tile-sm.blue{background:#2F9EE6;} .tile-sm.gold{background:#F2C744;}
.tile-sm b{display:block;font-size:15px;color:#fff;margin-bottom:3px;}
.tile-sm span{display:block;font-size:12px;color:rgba(255,255,255,.85);margin-bottom:14px;}
.tile-sm.gold b{color:#4A3A08;} .tile-sm.gold span{color:rgba(74,58,8,.75);}
.tile-sm .art{position:absolute;right:14px;bottom:12px;font-size:58px;color:rgba(255,255,255,.28);}
.tile-sm.gold .art{color:rgba(74,58,8,.2);}
.banner{border-radius:var(--r);background:linear-gradient(135deg,#3A2A4D,#5D3A6B);padding:34px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.banner h2{font-size:24px;color:#fff;letter-spacing:-.4px;margin-bottom:8px;}
.banner p{font-size:12px;color:rgba(255,255,255,.7);line-height:1.7;max-width:340px;margin-bottom:18px;}
.tiers{display:flex;gap:10px;flex-shrink:0;}
.tiers div{background:rgba(255,255,255,.1);border-radius:var(--r);padding:16px 22px;text-align:center;}
.tiers div.on{background:var(--acc);}
.tiers span{display:block;font-size:9px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.tiers b{display:block;font-size:26px;color:#fff;line-height:1;}
.tiers em{display:block;font-size:10px;color:rgba(255,255,255,.6);font-style:normal;margin-top:2px;}

/* Explore Our Collections — 4-up on desktop, 2×2 on mobile */
.collections{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.coll-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;transition:box-shadow .15s,transform .15s;}
.coll-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateY(-3px);}
.coll-im{aspect-ratio:16/10;background:var(--pg);display:flex;align-items:center;justify-content:center;}
.coll-im img{width:118px;height:118px;object-fit:contain;}
.coll-bd{display:flex;flex-direction:column;gap:6px;flex:1;padding:15px 16px 17px;}
.coll-bd h3{font-size:15px;color:var(--title);letter-spacing:-.2px;}
.coll-bd p{font-size:12px;color:var(--txt);line-height:1.6;flex:1;}
.coll-cta{margin-top:4px;font-size:12.5px;font-weight:700;color:var(--acc);display:inline-flex;align-items:center;gap:5px;transition:gap .15s;}
.coll-card:hover .coll-cta{gap:8px;}

/* Back to top — fixed lower-right, stacked clearly above the WhatsApp
   FAB and its pulse ring (no overlap/touch). No layout shift
   (position:fixed, toggled by opacity/visibility). */
.back-to-top{position:fixed;right:22px;bottom:100px;width:42px;height:42px;border-radius:50%;
  background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  z-index:499;box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{background:var(--acc-h);}
.back-to-top:focus-visible{outline:2px solid var(--title);outline-offset:2px;}

.trust{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--r);}
.trust>div{display:flex;align-items:center;gap:11px;padding:18px;border-right:1px solid var(--brd);}
.trust>div:last-child{border-right:none;}
.trust i{font-size:26px;color:var(--acc);flex-shrink:0;}
.trust b{display:block;font-size:12px;color:var(--title);}
.trust span{display:block;font-size:11px;color:var(--txt);}

/* footer */
.ft{background:#fff;border-top:1px solid var(--brd);}
.ft-in{max-width:var(--maxw);margin:0 auto;}
.ft-locs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px var(--pad);}
.ft-loc b{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--title);margin-bottom:7px;}
.ft-loc b i{width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ft-loc span{font-size:13px;color:var(--lnk);}
.ft-rule{height:1px;background:var(--brd);margin:0 var(--pad);}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:28px;padding:32px var(--pad) 34px;}
.ft-brand .bn{display:flex;align-items:center;gap:7px;font-size:24px;font-weight:900;color:var(--title);
  letter-spacing:-.8px;margin-bottom:11px;}
.ft-brand .bn em{font-style:normal;color:var(--acc);}
.ft-brand p{font-size:13px;color:var(--lnk);line-height:1.7;margin-bottom:20px;max-width:250px;}
.ft h4{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--title);margin-bottom:14px;}
.ft h5{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--title);margin-bottom:14px;}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.ft ul a{font-size:13px;color:var(--lnk);}
.ft ul a:hover{color:var(--acc);}
.soc{display:flex;gap:9px;}
.soc a{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;}
.s-fb{background:#3B5998;} .s-ig{background:#C13584;} .s-pin{background:#E60023;}
.s-in{background:#0A66C2;} .s-wa{background:#25D366;} .s-yt{background:#FF0000;}
.soc a[href="#"]{opacity:.55;} .soc a[href="#"]:hover{opacity:.8;}
.ft-dl p{font-size:13px;color:var(--lnk);margin-bottom:14px;}
.dlbtn{display:flex;align-items:center;gap:10px;border:1px solid var(--brd);border-radius:var(--r);
  padding:10px 14px;margin-bottom:10px;background:#fff;}
.dlbtn:hover{border-color:var(--acc);}
.dlbtn>i{font-size:22px;color:var(--acc);}
.dlbtn b{display:block;font-size:12px;color:var(--title);line-height:1.3;}
.dlbtn span{display:block;font-size:11px;color:var(--lnk);line-height:1.3;}
.pays{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;}
.pays em{font-size:11px;font-style:normal;color:var(--lnk);border:1px solid var(--brd);padding:4px 10px;border-radius:var(--r-pill);}
.ft-btm{border-top:1px solid var(--brd);padding:16px var(--pad);display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;}
.ft-btm span{font-size:12px;color:#8a8a8a;}
.ft-btm nav{display:flex;gap:16px;}
.ft-btm nav a{font-size:12px;color:var(--lnk);}
.ft-btm nav a:hover{color:var(--acc);}

.wa{position:fixed;bottom:20px;right:20px;z-index:80;width:48px;height:48px;border-radius:50%;
  background:#25D366;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);}
.wa:hover{transform:scale(1.06);}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(140%);z-index:200;
  background:var(--title);color:#fff;font-size:13px;font-weight:700;padding:13px 22px;border-radius:var(--r);
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .25s;display:flex;align-items:center;gap:9px;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* responsive */
@media (max-width:1200px){
  .ft-cols{grid-template-columns:1fr 1fr 1fr;}
  .pgrid-5{grid-template-columns:repeat(4,1fr);}
  .grid-side{grid-template-columns:1fr;}
  .grid-side>aside{order:0;}
}
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto;}
  .slider{grid-row:auto;}
  .trust{grid-template-columns:1fr 1fr;}
  .trust>div:nth-child(2){border-right:none;}
  .ft-locs{grid-template-columns:1fr 1fr;}
  .cats{flex-wrap:wrap;} .cat{flex:0 0 calc(25% - 11px);}
}
@media (max-width:860px){
  :root{--pad:14px;--gap:14px;}
  .sub-links,.sub-right .sub-tag{display:none;}
  .burger{display:flex;}
  .search{max-width:none;}
  .pgrid-5,.pgrid-4{grid-template-columns:repeat(2,1fr);}
  .ft-cols{grid-template-columns:1fr 1fr;}
  .banner{flex-direction:column;align-items:flex-start;}
  .tiers{width:100%;} .tiers div{flex:1;}
  .grid2{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hd-in{flex-wrap:wrap;}
  .search{order:3;flex-basis:100%;margin-left:0;}
  .hd-act span{display:none;}
  .hd-actions{gap:16px;}
  .pair{grid-template-columns:1fr;}
  .cat{flex:0 0 calc(33.333% - 10px);}
  .trust{grid-template-columns:1fr;}
  .trust>div{border-right:none;border-bottom:1px solid var(--brd);}
  .ft-locs,.ft-cols{grid-template-columns:1fr;}
  .inp-row{grid-template-columns:1fr;}
  .pgrid-5,.pgrid-4,.pgrid-3{grid-template-columns:1fr;}
}

/* ── B2C Additions (on top of B2B base styles) ──────────── */

/* Alert boxes */
.alert { padding: 12px 16px; border-radius: var(--r); font-size: 13px; margin-bottom: 16px; }
.alert-success { background: #e8f6ec; color: #1e7a38; border: 1px solid #c3e6cb; }
.alert-danger, .alert-error { background: #fdeaea; color: #a82020; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff4e0; color: #96620a; }

/* Flash messages */
.flash { font-size: 13px; font-weight: 600; }
.flash-container { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--pad); display: flex; align-items: center; justify-content: space-between; }
.flash-success { background: #e8f6ec; color: #1e7a38; border-bottom: 2px solid var(--ok); }
.flash-error { background: #fdeaea; color: #a82020; border-bottom: 2px solid var(--hot); }
.flash-info { background: var(--acc-soft); color: var(--acc); border-bottom: 2px solid var(--acc); }
.flash-close { background: none; border: none; cursor: pointer; font-size: 18px; color: inherit; padding: 0 4px; }

/* Page hero (blue bar for inner pages) */
.page-hd { background: var(--acc); padding: 18px var(--pad); }
.page-hd h1 { font-size: 20px; color: #fff; margin-bottom: 3px; }
.page-hd p { font-size: 12px; color: rgba(255,255,255,.8); }

/* Breadcrumb */
.crumb, .breadcrumb { font-size: 12px; color: var(--txt); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 12px 0; }
.crumb a, .breadcrumb a { color: var(--lnk); }
.crumb a:hover, .breadcrumb a:hover { color: var(--acc); }
.breadcrumb-sep { color: #bbb; }
.breadcrumb-current { color: var(--title); }

/* Product wish button */
.product-wish { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--brd); cursor: pointer; color: var(--txt); z-index: 2; transition: all .15s; }
.product-wish:hover, .product-wish.active { color: var(--hot); border-color: var(--hot); }
.product-wish.active svg { fill: var(--hot); }

/* Stock status */
.stock-ok { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ok); font-weight: 600; margin-bottom: 6px; }
.stock-out { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hot); font-weight: 600; margin-bottom: 6px; }

/* Cart layout */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--gap); align-items: start; }
.cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--brd); align-items: flex-start; }
.cart-item:last-child { border-bottom: none; }
.cart-item-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r); overflow: hidden; background: var(--pg); border: 1px solid var(--brd); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name { font-size: 13px; font-weight: 700; color: var(--title); margin-bottom: 4px; }
.cart-item-sku { font-size: 11px; color: var(--txt); margin-bottom: 8px; }
.cart-item-price { font-size: 15px; font-weight: 700; color: var(--acc); }
.order-summary { position: sticky; top: 80px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.summary-row:last-child { border-bottom: none; }
.summary-total { font-weight: 700; font-size: 16px; color: var(--acc); }
.summary-gst { color: var(--txt); font-size: 11px; margin-top: 4px; }

/* Account layout */
.account-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--gap); align-items: start; }
.account-nav-link { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r); font-size: 13px; font-weight: 600; color: var(--lnk); text-decoration: none; transition: all .15s; margin-bottom: 2px; }
.account-nav-link:hover, .account-nav-link.active { background: var(--acc-soft); color: var(--acc); }

/* Blog */
/* ── Blog — editorial redesign ──────────────────────────────
   Brass/copper accent used deliberately here, and only here:
   this content is literally about the craft, so the metal-tone
   accent ties the design to the subject rather than being
   decoration for its own sake. Everything transactional (cart,
   checkout, nav) stays on the standard brand blue.            */
:root {
    --brass: #A8763E;
    --brass-dark: #8A5F2E;
    --brass-soft: #F5EDE0;
}
.blog-serif { font-family: 'Lato', sans-serif; font-weight: 900; }

.blog-hero-card {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: stretch;
    background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--brd);
    margin-bottom: 28px;
}
.blog-hero-img { position: relative; min-height: 280px; background: var(--brass-soft); overflow: hidden; }
.blog-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-hero-body { padding: 28px 28px 28px 4px; display: flex; flex-direction: column; justify-content: center; }
.blog-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brass-dark); background: var(--brass-soft); padding: 5px 11px; border-radius: var(--r-pill);
    margin-bottom: 14px;
}
.blog-hero-title {
    font-family: 'Lato', sans-serif; font-size: 27px; font-weight: 900; line-height: 1.25;
    letter-spacing: -.3px; margin-bottom: 12px;
}
.blog-hero-title a { color: var(--title); text-decoration: none; }
.blog-hero-title a:hover { color: var(--brass-dark); }
.blog-hero-excerpt { font-size: 14px; color: var(--txt); line-height: 1.7; margin-bottom: 16px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.blog-card { background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--brd); transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.09); transform: translateY(-2px); }
.blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--brass-soft); }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-img img { transform: scale(1.06); }
.blog-body { padding: 18px; }
.blog-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--brass-dark); margin-bottom: 8px; display: block;
}
.blog-meta { font-size: 11.5px; color: var(--txt); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--txt); opacity: .5; }
.blog-title {
    font-family: 'Lato', sans-serif; font-size: 18px; font-weight: 900;
    margin-bottom: 8px; line-height: 1.35; letter-spacing: -.1px;
}
.blog-title a { color: var(--title); text-decoration: none; }
.blog-title a:hover { color: var(--brass-dark); }
.blog-excerpt { font-size: 13px; color: var(--txt); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-readmore {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
    font-size: 12.5px; font-weight: 700; color: var(--brass-dark); text-decoration: none;
}
.blog-readmore:hover { gap: 8px; }
.blog-readmore svg { transition: transform .2s; }

.blog-sidebar-card { background: #fff; border-radius: var(--r); border: 1px solid var(--brd); overflow: hidden; }
.blog-cat-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 16px; font-size: 13.5px; color: var(--lnk); text-decoration: none;
    border-bottom: 1px solid var(--brd); transition: background .15s;
}
.blog-cat-link:last-child { border-bottom: none; }
.blog-cat-link:hover { background: var(--brass-soft); color: var(--brass-dark); }
.blog-cat-link.active { background: var(--brass-soft); color: var(--brass-dark); font-weight: 700; }
.blog-cat-count { font-size: 11px; color: var(--txt); background: var(--pg); padding: 1px 8px; border-radius: var(--r-pill); }
.blog-cat-link.active .blog-cat-count { background: #fff; }

/* Reviews */
.review-card { padding: 16px 0; border-bottom: 1px solid var(--brd); }
.review-card:last-child { border-bottom: none; }
.reviewer-name { font-weight: 700; font-size: 13px; color: var(--title); }
.review-date { font-size: 11px; color: var(--txt); }
.review-stars { color: var(--star); font-size: 13px; margin: 4px 0; }
.review-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; color: var(--title); }
.review-body { font-size: 13px; color: var(--lnk); }
.star-rating { display: flex; gap: 4px; }
.star { font-size: 24px; color: #d8d8d8; cursor: pointer; transition: color .1s; }
.star.active, .star.hover { color: var(--star); }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; color: var(--txt); }
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: .4; }
.empty-state h3 { color: var(--title); margin-bottom: 8px; }

/* Pagination */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.page-btn { padding: 7px 13px; border-radius: var(--r); font-size: 12px; border: 1px solid var(--brd); background: #fff; color: var(--lnk); cursor: pointer; text-decoration: none; transition: all .15s; font-weight: 600; }
.page-btn:hover, .page-btn.active { background: var(--acc); color: #fff; border-color: var(--acc); }

/* Chips / badges */
.chip, .badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
.chip-ok, .badge-success { background: #e8f6ec; color: #1e7a38; }
.chip-wait, .badge-warning { background: #fff4e0; color: #96620a; }
.chip-info, .badge-info { background: var(--acc-soft); color: var(--acc); }
.chip-bad, .badge-danger { background: #fdeaea; color: #a82020; }
.badge-gray { background: #f3f4f6; color: #374151; }
.badge-purple { background: #ede9fe; color: #5b21b6; }

/* Data tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--txt); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--brd); background: #fafafa; }
.data-table td { font-size: 13px; color: var(--lnk); padding: 12px; border-bottom: 1px solid var(--brd); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fafafa; }

/* Qty stepper */
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--brd); border-radius: var(--r); background: #fff; overflow: hidden; flex-shrink: 0; }
.qty-btn { width: 36px; height: 44px; color: var(--title); font-size: 18px; border: none; background: #fff; cursor: pointer; }
.qty-btn:hover { background: #f2f2f2; }
.qty-input { width: 52px; height: 44px; border: none; border-left: 1px solid var(--brd); border-right: 1px solid var(--brd); outline: none; text-align: center; font-size: 15px; font-weight: 700; color: var(--title); }

/* Form group alias */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--title); margin-bottom: 6px; }
.form-control { width: 100%; height: var(--fh); padding: 0 14px; background: #fff; border: 1px solid var(--brd); border-radius: var(--r); color: var(--title); outline: none; transition: border-color .15s; font-family: inherit; font-size: 13px; }
textarea.form-control { height: auto; padding: 11px 14px; min-height: 110px; resize: vertical; }
select.form-control { height: var(--fh); }
.form-control:focus { border-color: var(--acc); }
.form-hint { font-size: 11px; color: var(--txt); margin-top: 5px; }
.form-error { font-size: 11px; color: var(--hot); margin-top: 5px; }

/* Btn aliases */
.btn-full { width: 100%; }
.btn-danger { background: var(--hot); color: #fff; }
.btn-danger:hover { background: #c62828; }
.btn-outline-sm { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r); font-size: 12px; font-weight: 700; border: 1px solid var(--acc); color: var(--acc); background: #fff; text-decoration: none; }
.btn-outline-sm:hover { background: var(--acc-soft); }

/* Footer extras */
.footer-b2b { margin-top: 16px; }
.footer-b2b p { font-size: 12px; color: var(--txt); margin-bottom: 8px; }
.footer-gst { font-size: 12px; color: #8a8a8a; }

/* Responsive additions */
@media (max-width: 860px) {
  .cart-layout { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── Compatibility for secondary pages (cart, checkout, account, etc.) ── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 32px 0; }
.page-hero { background: var(--acc); padding: 22px var(--pad); }
.page-hero h1 { color: #fff; font-size: 21px; margin-bottom: 4px; }
.page-hero p { color: rgba(255,255,255,.85); font-size: 13px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; }

/* ── Add to Cart Modal ────────────────────────────────────── */
.dw-modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,.5);
    align-items: center; justify-content: center;
    padding: 20px;
}
.dw-modal-overlay.show { display: flex; }
.dw-modal {
    background: #fff; border-radius: var(--r); max-width: 380px; width: 100%;
    padding: 28px 24px; text-align: center; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.dw-modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pg); border: none; font-size: 16px; color: var(--txt);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dw-modal-close:hover { background: var(--brd); }
.dw-modal-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #e8f6ec; color: var(--ok);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; margin: 0 auto 14px;
}
.dw-modal h3 { font-size: 17px; margin-bottom: 6px; }
.dw-modal p { font-size: 13px; color: var(--txt); margin-bottom: 20px; }
.dw-modal-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Search autocomplete dropdown ─────────────────────────── */
.search-suggest-item:hover { background: var(--pg); }

/* ── Campaign Banner ─────────────────────────────────────────── */
.campaign-banner { border-radius:var(--r); padding:34px 36px; position:relative; overflow:hidden; }
.campaign-banner h2 { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.4px; margin-bottom:8px; }
.campaign-banner p  { font-size:13px; color:rgba(255,255,255,.85); line-height:1.7; margin-bottom:18px; }
.campaign-banner .camp-circle {
    position:absolute; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none;
}
.campaign-cta {
    display:inline-block; background:rgba(255,255,255,.95); color:#1a1a1a;
    text-decoration:none; padding:12px 26px; border-radius:99px;
    font-size:14px; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.campaign-code {
    display:inline-block; background:rgba(0,0,0,.22); color:#fff;
    padding:10px 18px; border-radius:99px; font-size:13px;
    border:1px solid rgba(255,255,255,.25); letter-spacing:.3px;
}
.campaign-countdown {
    font-size:13px; opacity:.88; display:flex; align-items:center; gap:6px; color:#fff;
}
.campaign-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:6px; }

/* ── Campaign color presets — real CSS classes, not inline gradients.
   Far more reliable than dynamic inline styles, which kept breaking
   due to escaping/caching issues. ─────────────────────────────── */
.campaign-purple { background: linear-gradient(135deg,#3A2A4D,#5D3A6B); }
.campaign-gold    { background: linear-gradient(135deg,#b45309,#d97706); }
.campaign-red      { background: linear-gradient(135deg,#991b1b,#dc2626); }
.campaign-green    { background: linear-gradient(135deg,#065f46,#059669); }
.campaign-blue      { background: linear-gradient(135deg,#1e3a8a,#1C61E7); }

/* ── Account → Wishlist grid ──────────────────────────────────────
   These classes (product-grid / product-card / product-img-wrap /
   product-info / product-name / product-price / price-main /
   price-compare) are used ONLY by account.php's Wishlist tab.
   The storefront product cards use a different family (.pc / .pgrid)
   and are unaffected. Mirrors the .pc card sizing so the wishlist
   looks native without a redesign. ─────────────────────────────── */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; }
.product-card { position:relative; background:#fff; padding:12px; border:1px solid var(--brd);
  border-radius:var(--r); box-shadow:0 3px 12px rgba(0,0,0,.05); overflow:hidden;
  cursor:pointer; transition:transform .2s, box-shadow .2s; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.1); }
.product-img-wrap { position:relative; aspect-ratio:1; background:#fafafa; border-radius:var(--r); overflow:hidden; margin-bottom:10px; }
.product-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.product-info { padding:0; }
.product-name { font-size:12px; font-weight:700; color:var(--title); line-height:1.35;
  margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-price { display:flex; align-items:baseline; gap:6px; }
.price-main { font-size:14px; font-weight:700; color:var(--acc); }
.price-compare { font-size:11px; color:#bbb; text-decoration:line-through; }

@media (max-width:860px) {
  .product-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ── Single product page — CTA buttons ────────────────────────────
   Scoped to product.php's Add-To-Bag (#atc), Buy-Now (#buyNow) and
   the wishlist heart only. The Shop / Wishlist card families
   (.pc / .pgrid / .product-*) are NOT touched. !important is used
   only to beat the per-button inline `background` set in product.php;
   size / position / text / handlers are unchanged. ──────────────── */

/* CTA row layout:  [ Qty ] [ Add To Wishlist ] [ Add To Bag ]
                            [────────── BUY NOW ──────────────]
   Buy Now spans columns 2-3, so it starts at the Wishlist left edge
   and ends at the Add-To-Bag right edge — the Qty stepper (col 1)
   is excluded. Collapses to a single stack on narrow screens. */
.pdp-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}
.pdp-cta #buyNow { grid-column: 2 / -1; }

/* Add To Bag: theme blue (was inline var(--title) black) */
#atc { background: var(--acc) !important; }
#atc:hover { background: var(--acc-h) !important; }

/* Add To Wishlist: red heart icon only — button + text styling unchanged */
form[action="/php/wishlist-toggle.php"] .ti-heart,
form[action="/php/wishlist-toggle.php"] .ti-heart-filled { color: var(--hot); }

/* Buy Now: restrained sunset red -> orange gradient (was inline #b7791f gold) */
#buyNow {
  background: linear-gradient(120deg, #c0392b 0%, #e67e22 100%) !important;
  border-color: transparent !important;
  position: relative;
  overflow: hidden;
}
/* hover: same sunset, a touch deeper */
#buyNow:hover {
  background: linear-gradient(120deg, #a93226 0%, #ca6f1e 100%) !important;
}
/* Subtle premium shine: a narrow diagonal light sweeps left -> right,
   then holds off-screen for the rest of the cycle (~one pass / 7s).
   Clipped by #buyNow overflow:hidden; base gradient stays visible. */
#buyNow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: dwBuyNowShine 7s ease-in-out infinite;
}
@keyframes dwBuyNowShine {
  0%   { left: -60%; }
  14%  { left: 130%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  #buyNow::before { animation: none; }
}
/* narrow screens: stack the CTA controls full-width */
@media (max-width: 860px) {
  .pdp-cta { grid-template-columns: 1fr; }
  .pdp-cta #buyNow { grid-column: 1 / -1; }
}

/* ── Single product page — Amazon-style hover zoom ────────────────
   Desktop only (>=861px, fine pointer). Reuses the current #gal-main
   image URL as the panel background — no duplicate <img>. The panel
   is absolutely positioned and hidden until hover, so it causes no
   layout shift and overlays the details column like Amazon's. Mobile
   / touch keeps the existing tap-to-switch gallery untouched. */
#gal-main-box { cursor: crosshair; }
#gal-zoom-lens {
  position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
  z-index: 3;
}
#gal-zoom-lens.on { opacity: 1; }
#gal-zoom {
  position: absolute; top: 0; left: 100%;
  margin-left: 16px;
  width: 0; height: 0;
  background-repeat: no-repeat;
  background-color: #fff;
  border: 1px solid var(--brd);
  border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .15s ease;
  z-index: 20;
}
#gal-zoom.on { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
  #gal-zoom, #gal-zoom-lens { display: none !important; }
  #gal-main-box { cursor: default; }
}
@media (hover: none), (pointer: coarse) {
  #gal-zoom, #gal-zoom-lens { display: none !important; }
  #gal-main-box { cursor: default; }
}

/* newsletter strip padding kept in CSS so it can flex down on phones */
.nl-strip { padding: 36px 20px; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE STOREFRONT LAYOUT  ·  phones ≤600px
   A proper mobile-commerce layout built ON TOP of the existing
   components / classes / markup — no rebuilt sections, no new
   components, no JS changes. Everything here is scoped to ≤600px, so
   tablet (601–860px) and desktop (≥861px) are completely unchanged.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── 1. HEADER ──  Announcement · Logo row (alone, centred) ·
                      [Menu][Search] row · Hero                        */
  .hd-in { flex-wrap: wrap; gap: 12px 10px; padding: 12px var(--pad); }
  .brand { order: 1; width: 100%; align-items: center; }   /* logo centred to the full viewport */
  .burger { order: 2; }
  .search { order: 3; flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 0; }
  .hd-actions { display: none; }        /* account / wishlist / bag live in the drawer on mobile */

  /* remove the duplicate mobile "☰ ALL CATEGORIES … ₹0" bar — the
     hamburger drawer already provides full navigation on mobile.
     Desktop (≥861px) .sub is untouched. */
  .sub { display: none; }

  /* ── 2. HERO ──  keep the existing slider + swipe; just stop the
     fallback hero stacking into a very tall block. (.custom-hero keeps
     its own admin-set mobile ratio.)                                 */
  .hero { gap: 12px; }
  .slider { min-height: 176px; padding: 22px 20px; }
  .slider h1 { font-size: 20px; }
  .slider p { font-size: 12px; margin-bottom: 12px; }
  .tile-lg { min-height: 116px; padding: 20px; }
  .tile-lg h2 { font-size: 18px; }
  .tile-sm { min-height: 104px; padding: 16px; }

  /* ── section rhythm ── */
  .card { padding: 14px; }
  .sec-hd { margin-bottom: 12px; gap: 8px 10px; }
  .sec-hd h1, .sec-hd h2 { font-size: 15px; }
  .sec-hd .sub-t { font-size: 11px; }
  .sec-hd .pill { flex-shrink: 0; }

  /* ── 3. SHOP BY CATEGORY ──  compact 4-up grid                     */
  .cats { gap: 12px 8px; }
  .cat { flex: 0 0 calc(25% - 6px); }
  .cat .im { border-width: 2px; margin-bottom: 6px; font-size: 20px; }
  /* reserve exactly two lines for every name so 1-line and 2-line
     categories give the same tile height across a row */
  .cat b { font-size: 10px; line-height: 1.25; min-height: 2.5em;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cat b + span { display: none; }      /* drop the "N products" line for density */

  /* Category Spotlights header: let the icon + title use the full first
     line and drop the "Shop …" pill onto its own line below it */
  .spot-hd { align-items: flex-start; }
  .spot-hd > div:first-child { flex: 1 1 100%; min-width: 0; }
  .spot-hd .pill { margin-top: 6px; }

  /* ── 4·5·6. PRODUCT GRIDS ──  2-up compact cards (Deal of the Day,
     Top Rated, New Arrivals, Best Offers, Category Spotlights, and the
     shared shop / category listings). Was 1-up (one giant card/row).  */
  .pgrid { gap: 10px; }
  .pgrid-5, .pgrid-4, .pgrid-3 { grid-template-columns: repeat(2, 1fr); }
  .pc { padding: 8px; border-radius: 8px; }
  .pc .bdg { top: 13px; left: 13px; }
  .pc .im { margin-bottom: 8px; }
  .pc .nm { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
  .pc .ct { font-size: 10px; margin-bottom: 3px; }
  .pc .st { font-size: 9px; margin-bottom: 3px; }
  .pc .ins { font-size: 10px; margin-bottom: 4px; }
  .pc .pr b { font-size: 13px; }
  .pc .pr s { font-size: 10px; }
  .pc .mq { font-size: 9px; margin-bottom: 7px; }
  .pc .add { font-size: 10.5px; padding: 8px 0; }
  #dealCountdown { font-size: 11px; padding: 5px 12px; }

  /* ── 6·8. EDITORIAL BANNER + trust/feature tiers → compact 2×2 ──   */
  .banner { padding: 22px 18px; gap: 14px; }
  .banner h2 { font-size: 19px; }
  .banner p { font-size: 12px; margin-bottom: 14px; }
  .tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .tiers div { padding: 12px 10px; }
  .tiers b { font-size: 20px; }

  /* ── 7. PROMOTIONAL BANNERS / CTA ──  full width, controlled height */
  .campaign-banner { padding: 22px 18px; }
  .campaign-banner h2 { font-size: 19px; }
  .campaign-banner p { font-size: 12px; margin-bottom: 14px; }
  .nl-strip { padding: 24px 16px; }

  /* ── 10. BLOG ──  2-up compact cards                               */
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .blog-body { padding: 10px; }
  .blog-title { font-size: 12.5px; -webkit-line-clamp: 2; }
  .blog-excerpt { font-size: 11px; -webkit-line-clamp: 2; }
  .blog-meta { font-size: 10px; margin-bottom: 5px; }
  .blog-eyebrow { font-size: 9px; }

  /* ── 11·12. FOOTER ──  compact 2-column, centred branding + social  */
  .ft-locs { grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 20px var(--pad); }
  .ft-loc b { font-size: 13px; }
  .ft-loc span { font-size: 12px; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px var(--pad) 26px; }
  .ft-brand, .ft-dl { grid-column: 1 / -1; }
  .ft-brand { text-align: center; }
  .ft-brand .bn { justify-content: center; }
  .ft-brand p { margin-left: auto; margin-right: auto; }
  .soc { justify-content: center; }
  .ft-btm { padding: 14px var(--pad); gap: 10px; flex-direction: column; text-align: center; }
  .ft-btm nav { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }

  /* ── Explore Our Collections ──  2×2 grid, compact                 */
  .collections { grid-template-columns: 1fr 1fr; gap: 12px; }
  .coll-im { aspect-ratio: 1 / 1; }
  .coll-im img { width: 84px; height: 84px; }
  .coll-bd { padding: 12px 12px 14px; gap: 5px; }
  .coll-bd h3 { font-size: 13px; }
  .coll-bd p { font-size: 11px; line-height: 1.5; }
  .coll-cta { font-size: 11.5px; }

  /* Back to top — nudge in from the edge; sit well clear of the mobile
     WhatsApp FAB (bottom:16px, 50px tall) and its 8px pulse ring. */
  .back-to-top { right: 16px; bottom: 92px; width: 38px; height: 38px; font-size: 18px; }
}