/* =====================================================================
   Blackwool redesign — theme override layer
   Loaded AFTER custom.css. Only restyles; touches no cart/checkout logic.
   Palette: Black #000 / White #fff / Blue #2563EB, rating Orange #EA580C,
   Assured Green #15803D. Neutrals are greys.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bw-ink:#111111; --bw-black:#000000; --bw-blue:#2563EB; --bw-blue-d:#1E4FD8;
  --bw-grey:#6B6B6B; --bw-line:#E5E5E5; --bw-inputbd:#BDBDBD;
  --bw-surface:#F5F5F5; --bw-page:#F8F8F8; --bw-orange:#EA580C; --bw-green:#15803D;
  --bw-sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --bw-serif:'Fraunces',Georgia,serif;
}

/* ---- base type ---- */
body,button,input,select,textarea{font-family:var(--bw-sans)!important;}
body{color:var(--bw-ink);}
h1,h2,h3,.header-title,.ui2-heading{font-family:var(--bw-serif)!important;letter-spacing:-.01em;}

/* ---- kill the old purple brand everywhere it leaks in as text/bg ---- */
[style*="#9f2089"],[style*="#9F2089"],[style*="#C53EAD"],[style*="#c53ead"]{}
.theme-color,.brand-purple{color:var(--bw-blue)!important;}

/* ---- header ---- */
.header-title{color:var(--bw-ink)!important;font-weight:600;}
.header__cart-count,.header__cart-count--floating,.bubble-count{
  background:var(--bw-blue)!important;color:#fff!important;border-color:#fff!important;font-weight:700;}
._2dxSCm,._3CzzrP,._38U37R,._1FWdmb{background:#fff!important;}
._1FWdmb{border-bottom:1px solid var(--bw-line);}

/* ---- primary / secondary buttons (all the checkout + product CTAs) ---- */
/* PDF button spec: primary height 52px (range 50-56), compact 40px, min touch 44px,
   radius 10, weight 700, font-size 15-16px. */
.btn.btn-dark,.btn.btn-primary,.buynow-button:not(.buynow-button-white),
.buy_now,.add_cart:not(.buynow-button-white),.save-address,.cart__confirm__order,
.cart__checkout .btn,._1s54Jm{
  background:var(--bw-blue)!important;background-image:none!important;border:none!important;
  color:#fff!important;border-radius:10px!important;font-weight:700!important;
  min-height:52px!important;font-size:16px!important;line-height:1.1!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  text-transform:none!important;letter-spacing:0!important;transition:background .15s ease;}
.btn.btn-dark:hover,.btn.btn-primary:hover,.buynow-button:hover,.save-address:hover,
.cart__confirm__order:hover{background:var(--bw-blue-d)!important;color:#fff!important;}
.btn.btn-primary:active,.buynow-button:active,.save-address:active,
.cart__confirm__order:active{transform:translateY(1px);}

/* outline / secondary CTA (Add to cart on product page uses -white variant) */
.buynow-button-white{
  background:#fff!important;background-image:none!important;color:var(--bw-ink)!important;
  border:1.5px solid var(--bw-ink)!important;border-radius:10px!important;font-weight:700!important;
  min-height:52px!important;font-size:16px!important;line-height:1.1!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.buynow-button-white:hover{background:var(--bw-surface)!important;}

/* generic anchor accents that used to be purple/blue */
a.text-primary,.text-primary{color:var(--bw-blue)!important;}

/* ---- product cards ---- */
.product-card{background:#fff!important;border:1px solid var(--bw-line)!important;
  border-radius:12px!important;overflow:hidden;}
.product-img,.offer-img{background:var(--bw-surface);}
.product-name,.product-details .product-name{color:var(--bw-ink)!important;font-weight:500;}
.product-price,.sell-price{color:var(--bw-ink)!important;font-weight:800!important;}
.mrp-price,.line-through{color:var(--bw-grey)!important;text-decoration:line-through!important;}
/* discount % / "xx% off" */
.discount,.discount-price,.product-discount,.off-price{color:var(--bw-blue)!important;font-weight:700!important;}

/* rating row: small orange pill + assured (NOT a full orange bar) */
.rating-box.bw-rate{background:transparent!important;display:flex!important;align-items:center;
  gap:8px;padding-top:6px!important;padding-bottom:2px!important;justify-content:flex-start!important;}
.bw-rate-chip{display:inline-flex;align-items:center;gap:3px;background:var(--bw-orange)!important;
  color:#fff!important;font-size:11px;font-weight:700;line-height:1;padding:2px 6px;border-radius:4px;}
.bw-rate-chip svg{fill:#fff;}
/* legacy orange bar override guard */
.ratings,.rating{background:var(--bw-orange)!important;color:#fff!important;border-radius:4px!important;}

/* View Product outline button on listing cards */
.bw-view-product{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;
  height:38px;box-sizing:border-box;border:1.5px solid var(--bw-ink);border-radius:8px;background:transparent;
  color:var(--bw-ink)!important;font-size:13px;font-weight:700;}

/* price row order + weights */
.product-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.sell-price{order:1;color:var(--bw-ink)!important;font-weight:800!important;font-size:16px!important;}
.mrp-price.line-through{order:2;color:var(--bw-grey)!important;font-size:12px!important;}
.off-percentage{order:3;color:var(--bw-blue)!important;font-weight:700!important;font-size:12px!important;margin:0!important;}

/* deal / message chips -> neutral surface */
.product-message{background:var(--bw-surface)!important;color:var(--bw-ink)!important;
  border:none!important;font-weight:600!important;border-radius:4px!important;}

/* ---- forms (address etc.) ---- */
.form-control{border:1px solid var(--bw-inputbd)!important;border-radius:8px!important;
  min-height:48px;font-size:16px!important;color:var(--bw-ink)!important;box-shadow:none!important;}
.form-control:focus{border-color:var(--bw-blue)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;outline:none!important;}
label,.form-label{color:var(--bw-ink);font-weight:600;}

/* ---- cart drawer / totals ---- */
.sidenav .drawer__title,.ui2-heading{color:var(--bw-ink)!important;}
.cart__final__price,.cartTotalAmount,.cart__total,.mc_pay__total,.shipping__total{color:var(--bw-ink)!important;}
.cart-product-price{color:var(--bw-ink)!important;font-weight:800!important;}
.cart-product-mrp{color:var(--bw-grey)!important;text-decoration:line-through!important;}

/* ---- checkout stepper (Cart > Address > Payment > Summary) ---- */
.steps .step.active .circle-box{border-color:var(--bw-blue)!important;color:var(--bw-blue)!important;background:#fff!important;}
.steps .step.active .title{color:var(--bw-blue)!important;}
.steps .step .line,.steps .step.done .line{background:var(--bw-blue)!important;}
.steps .step.done .circle-box{background:var(--bw-blue)!important;border-color:var(--bw-blue)!important;color:#fff!important;}

/* ---- payment method card ---- */
.paymentMetod{border:1.5px solid var(--bw-line)!important;border-radius:12px!important;}
.paymentMetod.active,.paymentMetod.selected,.paymentMetod:has(input:checked){
  border-color:var(--bw-blue)!important;background:#F5F8FF!important;}
input[type=radio]{accent-color:var(--bw-blue);}
.order-summary{background:#fff!important;border-radius:12px;}

/* ---- new footer ---- */
.bw-footer{background:#fff;color:var(--bw-ink);border-top:1px solid var(--bw-line);
  font-family:var(--bw-sans);}
.bw-footer .bw-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:20px 16px;border-bottom:1px solid var(--bw-line);max-width:1100px;margin:auto;}
.bw-footer .bw-strip .it{display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;font-size:12px;font-weight:600;color:var(--bw-ink);}
.bw-footer .bw-strip .ic{width:40px;height:40px;border-radius:20px;background:var(--bw-surface);
  display:flex;align-items:center;justify-content:center;}
.bw-footer .bw-strip .ic svg{stroke:var(--bw-blue);}
.bw-footer .bw-cols{max-width:1100px;margin:auto;padding:28px 16px 8px;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;}
.bw-footer .bw-logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--bw-ink);text-decoration:none;}
.bw-footer h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bw-grey);margin:0 0 10px;}
.bw-footer ul{list-style:none;padding:0;margin:0;}
.bw-footer li{margin-bottom:6px;}
.bw-footer a.lnk{color:#444;text-decoration:none;font-size:14px;}
.bw-footer a.lnk:hover{color:var(--bw-blue);}
.bw-footer .bw-bottom{max-width:1100px;margin:auto;padding:16px;border-top:1px solid var(--bw-line);
  display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--bw-grey);}
@media(max-width:640px){.bw-footer .bw-cols{grid-template-columns:1fr 1fr;}
  .bw-footer .bw-bottom{flex-direction:column;gap:6px;text-align:center;}}

/* ---- fixes for live inline styles (override with !important) ---- */
/* discount "% off" was hardcoded green/purple inline -> make it blue */
.off-percentage,.discount,.off-percentage.m-0{color:var(--bw-blue)!important;font-weight:700!important;}
/* category strip had inline pink background (#fee4ff) -> white */
.categories{background:#fff!important;}
.category p{color:var(--bw-ink)!important;}
/* deal chips: force neutral even when inline-colored purple/green */
.product-message,.product-message.top-discount,.product-message.limit-discount,
.product-message.saver-deal,.product-message.few-left,.product-message.one-left,
.product-message.three-left,.product-message.lowest-price,.product-message.bank-offer{
  background:var(--bw-surface)!important;color:var(--bw-ink)!important;}

/* listing card polish (no image cropping — respect original ratios) */
.product-details{padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;}
.product-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px!important;line-height:1.35!important;font-weight:500!important;color:var(--bw-ink)!important;}
.delivery-msg .ghghgh66{font-size:11.5px;color:var(--bw-grey);}

/* ======================================================================
   STEP-3 full page system (matches the Design System PDF)
   ====================================================================== */

/* ---- product image 4:5 cover + wishlist (per PDF product-card spec) ---- */
.product-card{position:relative;}
/* image box: fixed 4:5 ratio, no inherited padding/height/flex from custom.css */
.product-img{position:relative;width:100%!important;height:auto!important;aspect-ratio:4/5;
  overflow:hidden;background:var(--bw-surface);border-radius:12px 12px 0 0;padding:0!important;
  margin:0!important;display:block!important;}
.product-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
/* details fill remaining height so cards are equal (grid stretch) */
.product-card .product-details{flex:1 1 auto;}
.bw-wish{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:17px;background:rgba(255,255,255,.94);
  box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;}
/* wishlist heart used on listing + "Products For You" cards — custom.css leaves
   .css-17c5oi2r unpositioned on the PDP, so it flowed into the layout. Pin it. */
.product-img .css-17c5oi2r{position:absolute!important;top:10px!important;right:10px!important;
  left:auto!important;bottom:auto!important;width:34px;height:34px;border-radius:17px;
  background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;z-index:2;margin:0;padding:0;}
.product-img .css-17c5oi2r svg{width:18px;height:18px;}
/* small promo icon badge (bottom-left) — pin so it can't disturb flow */
.product-img .css-175oi2rd{position:absolute!important;bottom:8px!important;left:8px!important;
  top:auto!important;right:auto!important;height:auto!important;padding:0!important;z-index:2;margin:0;}

/* ---- product grid: 2-col mobile, up per breakpoint (PDF) ---- */
/* ROOT-CAUSE FIX (Products For You collapse):
   custom.css was built for a flex layout — it sets .product-list{display:flex;
   align-items:center} and .product-card{width:50%}. Once .product-list becomes
   a grid, that width:50% means "half of the grid track", so every card shrank to
   half its column, leaving large empty gaps and clipped content. We convert the
   container to grid AND let the grid track own each card's width (reset the
   inherited 50%), and stretch items for equal height. No fixed widths added. */
/* Column count is driven by the CONTAINER, not the viewport. custom.css caps
   `body{max-width:500px}` site-wide (mobile shell), so viewport-based breakpoints
   (min-width:1024px etc.) fired against 1280px while the body stayed 500px and
   crammed 4-5 columns into 500px -> collapsed ~90px cards + empty margins.
   auto-fill + minmax makes the grid fit however wide the container really is:
   ~2 cols in the 500px shell, and it scales up on its own if the cap is lifted. */
.product-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;
  gap:12px!important;padding:0 16px!important;align-items:stretch!important;box-sizing:border-box;}
.product-list>.product-card,.products .product-card{
  width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;
  display:flex!important;flex-flow:column!important;height:100%!important;box-sizing:border-box;}
.products{max-width:1280px;margin:0 auto;box-sizing:border-box;}
/* wider gaps only where the container is genuinely wide (uses viewport as a proxy,
   safe because it only increases the gap, never the column count) */
@media(min-width:1024px){.product-list{gap:16px!important;}}

/* ---- checkout stepper (reusable component) ---- */
.bw-steps{background:#fff;padding:14px 16px;border-bottom:1px solid var(--bw-line);}
.bw-steps-list{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;max-width:760px;}
.bw-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.bw-step-dot{width:26px;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;box-sizing:border-box;border:1.5px solid var(--bw-line);color:var(--bw-grey);background:#fff;}
.bw-step-label{font-size:12px;color:var(--bw-grey);font-weight:500;}
.bw-step.bw-current .bw-step-dot{border:2px solid var(--bw-blue);color:var(--bw-blue);}
.bw-step.bw-current .bw-step-label{color:var(--bw-ink);font-weight:700;}
.bw-step.bw-done .bw-step-dot{background:var(--bw-blue);border-color:var(--bw-blue);color:#fff;}
.bw-step.bw-done .bw-step-label{color:var(--bw-ink);}
.bw-step-line{flex:1 1 auto;height:2px;background:var(--bw-line);margin:0 6px;margin-bottom:22px;}
.bw-step-line.bw-done{background:var(--bw-blue);}

/* ---- forms (address etc.): label above, focus/valid/error (PDF) ---- */
.form-floating>.form-control{height:52px;border:1px solid var(--bw-inputbd)!important;border-radius:8px!important;
  font-size:16px!important;color:var(--bw-ink)!important;box-shadow:none!important;}
.form-floating>.form-control:focus{border-color:var(--bw-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;}
.form-floating>label{color:var(--bw-grey);}
.form-control:focus{border-color:var(--bw-blue)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;}
.form-control.is-valid,.was-validated .form-control:valid{border-color:var(--bw-green)!important;}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#B3261E!important;}

/* ---- order summary / price panels (cart + payment) ---- */
.cart__price__details,.order-summary{background:#fff!important;border:1px solid var(--bw-line)!important;
  border-radius:14px!important;padding:16px!important;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);}
.cart__total,.shipping__total,.mc_pay__total{color:var(--bw-ink)!important;}
.cart__final__price,.cartTotalAmount{color:var(--bw-ink)!important;font-weight:800!important;}

/* ---- payment method card ---- */
.paymentMetod{border:1.5px solid var(--bw-line)!important;border-radius:12px!important;padding:16px!important;background:#fff;}
.paymentMetod.active,.paymentMetod.selected{border-color:var(--bw-blue)!important;background:#F5F8FF!important;}

/* ---- home hero + category (offer.php) ---- */
.categories{background:#fff!important;padding:12px 16px!important;}
.category img{width:70px!important;height:70px!important;border-radius:50%!important;object-fit:cover;border:1px solid var(--bw-line);}
.category p{font-size:12px!important;font-weight:600!important;color:var(--bw-ink)!important;}

/* ---- desktop container cap + section headings ---- */
@media(min-width:1024px){
  .products,.categories,.product-list{max-width:1280px;margin-left:auto;margin-right:auto;}
}
.sc-gswNZR.wDrko,h4.sc-gswNZR{font-family:var(--bw-serif)!important;font-weight:600!important;font-size:22px!important;color:var(--bw-ink)!important;}

/* ======================================================================
   STEP-4 pixel-conformance pass — pin exact PDF design-system values
   (presentation only; no markup/JS/route/tracking changes)
   ====================================================================== */

/* ---- type scale (PDF p.16) ---- */
/* page title = Fraunces 600, 32px mobile / 36px desktop, lh 1.15 */
.header-title{font-size:13px!important;}          /* app-bar label stays small */
.ui2-heading,.page-title,h1{font-family:var(--bw-serif)!important;font-weight:600!important;
  font-size:32px!important;line-height:1.15!important;letter-spacing:-.01em!important;}
@media(min-width:1024px){.ui2-heading,.page-title,h1{font-size:36px!important;}}
/* section heading = Jakarta 700, 16-18px */
h2,.section-title{font-weight:700!important;font-size:18px!important;line-height:1.3!important;}
/* body 15/14 lh1.6, caption 11.5-12.5 */
body{font-size:15px;line-height:1.6;}
.caption,.delivery-msg .ghghgh66,.bw-step-label{font-size:12px!important;}

/* ---- product-detail price block (PDP): sell 800/28-36, mrp grey strike, % blue ---- */
/* PDP markup: .product-price.d-flex holds .sell-price/.mrp-price/.off-percentage.
   Scope the large size to the detail page only (guarded by #image-container sibling
   context via .button-container page) using a body/page hook. */
.product_detail .product-price .sell-price,
.button-container ~ * .sell-price,
.product-detail .sell-price{font-size:28px!important;font-weight:800!important;color:var(--bw-ink)!important;}
@media(min-width:1024px){.product_detail .product-price .sell-price,
  .product-detail .sell-price{font-size:36px!important;}}

/* ---- radii to spec: tags 4 / inputs 8 / buttons 10 / panels 12-14 / hero 20 ---- */
.hero,.banner-hero,.offer-hero{border-radius:20px!important;overflow:hidden;}

/* ---- gutters/gaps already: 16 mobile grid gap12 -> desktop; confirm page pad ---- */
.container,.wrapper,.page-wrap{padding-left:16px;padding-right:16px;}
@media(min-width:1024px){.container,.wrapper,.page-wrap{max-width:1280px;margin:0 auto;
  padding-left:40px;padding-right:40px;}}
@media(min-width:1440px){.container,.wrapper,.page-wrap{padding-left:80px;padding-right:80px;}}

/* ---- mobile sticky CTA bar (PDP) per PDF ---- */
/* Real PDP markup: <div class="button-container flex"> holds the two .buynow-button.
   Pin it to the viewport bottom on mobile, inline it on desktop. */
.button-container.flex{
  position:fixed!important;left:0;right:0;bottom:0;z-index:60;
  display:flex!important;gap:10px!important;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0))!important;
  background:#fff!important;border-top:1px solid var(--bw-line)!important;
  box-shadow:0 -2px 12px rgba(0,0,0,.06)!important;margin:0!important;}
.button-container.flex>.buynow-button{flex:1 1 0!important;margin:0!important;}
@media(min-width:1024px){
  /* on desktop the CTAs sit inline in the product column, not pinned */
  .button-container.flex{position:static!important;box-shadow:none!important;
    border-top:none!important;padding:16px 0 0!important;max-width:520px;}
}

/* ---- View Product / compact buttons = 40px (compact spec) ---- */
.bw-view-product{height:40px!important;font-size:13px!important;}

/* clearance so the fixed mobile CTA bar never covers page-end content */
.bw-cta-spacer{height:78px;}
@media(min-width:1024px){.bw-cta-spacer{display:none;}}

/* ---- ensure single filled-blue emphasis: neutral any leftover accent bgs ---- */
.badge-sale,.sale-tag{background:var(--bw-ink)!important;color:#fff!important;border-radius:4px!important;}