/*
Theme Name: WAFA Atelier
Theme URI: https://wafalifestyle.com
Author: WAFA Lifestyle
Author URI: https://wafalifestyle.com
Description: Custom premium WooCommerce theme for WAFA Lifestyle — editorial menswear e-commerce. Built from the approved design mockups (homepage, shop, product detail, cart & checkout).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 7.0
WC tested up to: 9.0
Text Domain: wafa-atelier
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600&display=swap');

/* ============ DESIGN TOKENS ============
   2026-09: redesigned to a bold black/white/rust look (riggcaps.com-inspired,
   approved via mockup). Single committed light theme — dark-mode variant
   removed on purpose to keep the CSS light and the palette intentional. */
:root{
  --ground:#FFFFFF; --surface:#F4F2EE; --surface-2:#FFFFFF;
  --ink:#0D0D0D; --ink-soft:#6C6A66;
  --accent:#9C4630; --accent-ink:#FFFFFF; --accent-soft:#F1E4DE; --whatsapp:#25D366;
  --brass:#9C4630; --line:#E4E1DA; --shadow: 0 1px 0 rgba(13,13,13,.06);
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  font-size:15px;
}
img{max-width:100%; height:auto;}
.wrap{max-width:1180px; margin:0 auto; padding-inline:24px;}
h1,h2,h3{font-family:'Inter',sans-serif; font-weight:800; text-wrap:balance; margin:0;}
.display{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em;}
.eyebrow{font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
a{color:inherit;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ============ HEADER ============ */
header.site-header{position:sticky; top:0; z-index:20; background:var(--ground); border-bottom:1px solid var(--line);}
.bar-top{background:var(--ink); color:#fff;}
.bar-top .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:7px; font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:.04em; flex-wrap:wrap; gap:4px;}
nav.main{display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:20px;}
.logo{display:flex; align-items:baseline; gap:8px; font-family:'Anton',sans-serif; font-size:26px; letter-spacing:.01em; text-decoration:none; color:var(--accent);}
.logo span{font-family:'Inter',sans-serif; font-size:10px; font-weight:700; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase;}
/* Uploaded custom-logo image has no size cap by default, so it renders at its
   full uploaded resolution (440x120) — nearly 10x the nav link text size and
   most of the header's height. Cap it to a normal header logo height and let
   width scale proportionally. */
.custom-logo-link{display:flex; align-items:center;}
.custom-logo-link img.custom-logo{height:44px; width:auto; max-width:100%;}
.links{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
.links a{color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding-bottom:3px; border-bottom:2px solid transparent;}
.links a:hover,.links a.on{border-color:var(--accent); color:var(--accent);}
.navicons{display:flex; gap:18px; align-items:center; color:var(--ink-soft);}
.navicons .nav-search{display:flex; align-items:center; background:none; border:0; padding:0; margin:0; color:var(--ink); cursor:pointer;}
.navicons .nav-search svg{width:20px; height:20px;}
.navicons .nav-search:hover{color:var(--accent);}
.navicons .cart{position:relative; display:flex; align-items:center; color:var(--ink); text-decoration:none;}
.navicons .cart svg{width:21px; height:21px;}
.navicons .cart:hover{color:var(--accent);}
.navicons .cart .cart-count{position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-family:'Inter',sans-serif; font-size:10px; font-weight:700; line-height:16px; text-align:center;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brass); display:inline-block;}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:4px; width:20px; cursor:pointer; background:none; border:none; padding:0;}
.menu-toggle i{display:block; height:1.5px; background:var(--ink); border-radius:1px;}
.mobile-links{display:none; list-style:none; margin:0; padding-block:14px; border-top:1px solid var(--line); flex-direction:column; gap:14px;}
.mobile-links.open{display:flex;}
.mobile-links a{color:var(--ink); text-decoration:none; font-size:15px;}

.btn{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 22px; border-radius:0; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:2px solid var(--ink); background:none; cursor:pointer; color:var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn.solid{background:var(--ink); color:var(--ground);}
.btn.ghost{color:var(--ink);}
.btn.solid:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn.outline{background:none; color:var(--ink); border-color:var(--ink);}
.btn.wa{background:var(--whatsapp); color:var(--accent-ink); border-color:var(--whatsapp);}
.btn.wa svg{width:15px; height:15px; flex:none;}
.btn.block{width:100%;}
.btn.small{padding:8px 14px; font-size:11px;}

/* ============ HOMEPAGE: HERO (text-only black banner) ============ */
.hero{background:var(--ink); color:#fff; text-align:center;}
.hero-inner{max-width:640px; margin:0 auto; padding-block:clamp(56px,9vw,100px); display:block;}
.hero h1{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:clamp(40px,6.4vw,84px); line-height:.96; color:#fff;}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p.lede{margin:18px auto 26px; max-width:42ch; color:#cfcdc9; font-size:16px; line-height:1.6;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.hero .btn{border-color:#fff; color:#fff;}
.hero .btn.solid{background:var(--accent); border-color:var(--accent); color:#fff;}

/* ============ MARQUEE TICKER ============ */
.marquee{background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; border-top:1px solid #2a2a2a;}
.marquee-track{display:inline-flex; align-items:center; padding:14px 0; animation:wafa-scroll 26s linear infinite;}
.marquee-track span{font-size:13px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:0 24px; display:inline-flex; align-items:center; gap:24px;}
.marquee-track span::after{content:'\2726'; color:var(--accent); font-size:12px;}
@keyframes wafa-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ============ CATEGORY RAIL (home) ============ */
.rail{padding-block:40px; border-bottom:1px solid var(--line);}
.rail-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.rail-track{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;}
.swatch{border:1px solid var(--line); border-radius:4px; padding:12px 14px; display:flex; align-items:center; gap:12px; background:var(--surface-2); text-decoration:none; transition:border-color .15s, transform .15s;}
.swatch:hover{border-color:var(--accent); transform:translateY(-1px);}
.swatch .chip{width:38px; height:38px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center;}
.swatch h3{font-size:13.5px; font-weight:600; color:var(--ink);}
.swatch p{margin:2px 0 0; font-size:10.5px; color:var(--ink-soft); font-family:'Inter',sans-serif; letter-spacing:.03em;}

/* ============ PRODUCT GRID / CARD (shared: home, rails, shop archive) ============ */
.products{padding-block:48px;}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px; margin-top:26px;}
.prod-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card{position:relative; background:transparent; display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.card .art{aspect-ratio:1/1; background:var(--surface); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card .art img{width:100%; height:100%; object-fit:contain;}
.card .art svg{width:52%; opacity:.82;}
.badge{position:absolute; top:10px; left:10px; background:var(--accent); color:var(--accent-ink); font-family:'Inter',sans-serif; font-size:10px; letter-spacing:.06em; padding:4px 7px; border-radius:2px; text-transform:uppercase;}
.badge.sale{background:var(--brass);}
/* Scoped to .card — this is the product-grid thumbnail overlay badge only.
   Was a bare .stock selector, which also matched WooCommerce's own injected
   <p class="stock"> on the single-product variation area and flung it into
   this absolute-positioned corner treatment (the "stock overlaps" bug). */
.card .stock{position:absolute; bottom:10px; left:10px; font-family:'Inter',sans-serif; font-size:10px; color:var(--ink-soft); background:color-mix(in srgb, var(--surface-2) 82%, transparent); padding:3px 7px; border-radius:2px;}
.card .stock::before{content:"● "; color:var(--accent);}
.card .info{padding:13px 14px 15px; display:flex; flex-direction:column; gap:5px;}
.card .cat{font-family:'Inter',sans-serif; font-size:10.5px; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase;}
.card h3{font-size:14px; font-weight:600; line-height:1.35;}
.price-row{display:flex; align-items:baseline; gap:8px; margin-top:2px;}
.price{font-family:'Inter',sans-serif; font-weight:800; color:var(--brass); font-size:16px;}
.price.was{font-weight:400; color:var(--ink-soft); text-decoration:line-through; font-size:12.5px;}
/* WooCommerce's own price markup, reskinned to match .price / .price.was */
.price-row .woocommerce-Price-amount{font-family:'Inter',sans-serif; font-weight:800; color:var(--brass); font-size:16px;}
.price-row del .woocommerce-Price-amount{font-weight:400; color:var(--ink-soft); font-size:12px;}
.price-row ins{text-decoration:none;}
.pinfo .price-row .woocommerce-Price-amount{font-size:26px;}
.pinfo .price-row del .woocommerce-Price-amount{font-size:16px; text-decoration:line-through;}
.sizes{display:flex; gap:5px; margin-top:6px; flex-wrap:wrap;}
.sizes span{font-family:'Inter',sans-serif; font-size:10px; border:1px solid var(--line); border-radius:2px; padding:2px 6px; color:var(--ink-soft);}

/* ============ TRUST BAND (home) ============ */
.trust{background:var(--surface); border-block:1px solid var(--line); padding-block:44px;}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.trust-item{padding:0 22px; border-left:1px dashed var(--line);}
.trust-item:first-child{border-left:none; padding-left:0;}
.trust-item .num{font-family:'Inter',sans-serif; color:var(--brass); font-size:12px;}
.trust-item h3{font-size:16px; margin-top:8px;}
.trust-item p{font-size:13px; color:var(--ink-soft); line-height:1.55; margin:8px 0 0;}

/* ============ BREADCRUMB (single product) ============ */
.crumb{font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); letter-spacing:.03em;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--accent);}

/* ============ SHOP/CATEGORY: CATEGORY NAV BAND ============
   Black band with back-arrow + big title + horizontal-scroll category strip. */
.cat-nav-band{background:var(--ink); color:#fff; padding:30px 0 22px;}
.cat-nav-top{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.cat-nav-back{
  color:#fff; text-decoration:none; font-size:18px; line-height:1; flex:none;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid #3a3a3a; border-radius:50%;
}
.cat-nav-top h1{font-size:clamp(28px,4.6vw,50px); margin:0; color:#fff;}
.cat-nav-list{display:flex; gap:30px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
.cat-nav-list::-webkit-scrollbar{display:none;}
.cat-nav-item{flex:none; text-decoration:none; color:#fff; white-space:nowrap; padding-bottom:14px; border-bottom:2px solid transparent;}
.cat-nav-item.on{border-bottom-color:var(--accent);}
.cat-nav-item .lbl{display:flex; align-items:center; gap:5px; font-family:'Inter',sans-serif; font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;}
.cat-nav-item em{display:block; font-style:normal; font-family:'Inter',sans-serif; font-size:11.5px; color:#8f8d88; margin-top:4px;}

/* ============ SHOP ARCHIVE: LAYOUT / FILTERS ============ */
.shop{padding-block:36px 60px;}
.shop-grid{display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start;}
.filters{display:flex; flex-direction:column; gap:28px; position:sticky; top:96px;}
.fgroup h4{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px;}
.fgroup ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.fgroup label{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer;}
.fgroup input[type=checkbox]{appearance:none; width:15px; height:15px; border:1px solid var(--line); border-radius:2px; background:var(--surface-2); flex:none; position:relative; cursor:pointer;}
.fgroup input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent);}
.fgroup input[type=checkbox]:checked::after{content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg);}
.fgroup .count{color:var(--ink-soft); font-family:'Inter',sans-serif; font-size:11px; margin-left:auto;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.toolbar .count{font-size:14px; color:var(--ink-soft);}
.toolbar .count b{color:var(--ink);}
.sortbox select{
  font-family:'Inter',sans-serif; font-size:11.5px; border:1px solid var(--line); border-radius:2px; padding:9px 12px;
  color:var(--ink); background:var(--surface-2); appearance:none; cursor:pointer;
}
.pagination,.woocommerce-pagination nav,nav.woocommerce-pagination{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:40px; font-family:'Inter',sans-serif; font-size:12.5px;}
.woocommerce-pagination ul{display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0;}
.pagination .page-numbers,.woocommerce-pagination .page-numbers{width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:2px; text-decoration:none; color:var(--ink);}
.pagination .page-numbers.current,.woocommerce-pagination .page-numbers.current{background:var(--ink); color:var(--ground); border-color:var(--ink);}
.pagination .page-numbers.dots,.woocommerce-pagination .page-numbers.dots{border:none;}
.woocommerce-products-header__title{display:none;}

/* ============ PRODUCT DETAIL ============ */
.pdp{padding-block:8px 60px; display:grid; grid-template-columns:1fr 1fr; column-gap:56px; row-gap:24px; align-items:start; grid-template-areas:"gallery pinfo" "gallery sizechart" "gallery delivery" "desc desc" "reviews reviews";}
.pdp-grid{display:contents;}
.gallery{grid-area:gallery; align-self:stretch;}
.gallery-sticky{position:sticky; top:96px;}
.main-shot{aspect-ratio:1/1; background:var(--surface-2); border:1.5px solid color-mix(in srgb, var(--ink-soft) 45%, var(--line)); border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.main-shot img{width:100%; height:100%; object-fit:contain;}
.main-shot svg{width:44%;}
.main-shot .badge{position:absolute; top:16px; left:16px;}
.thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px;}
.thumb{aspect-ratio:1; background:var(--surface); border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:0;}
.thumb img{width:100%; height:100%; object-fit:contain;}
.thumb.on{border-color:var(--accent); border-width:2px;}
.thumb svg{width:50%; opacity:.8;}

.pinfo{grid-area:pinfo;}
.pinfo .cat{font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase;}
.pinfo h1{font-size:22px; margin-top:8px; line-height:1.25;}
.rating{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--ink-soft);}
.stars{color:var(--brass); font-family:'Inter',sans-serif; letter-spacing:1px;}
.pinfo .price-row{display:flex; align-items:baseline; gap:12px; margin-top:18px;}
.pinfo .price{font-family:'Inter',sans-serif; font-weight:700; color:var(--brass); font-size:26px;}
.pinfo .price.was{font-weight:400; color:var(--ink-soft); text-decoration:line-through; font-size:16px;}
.save-tag{font-family:'Inter',sans-serif; font-size:11px; background:var(--accent-soft); color:var(--accent); padding:3px 8px; border-radius:2px;}
.pinfo .desc{margin:18px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.7; max-width:48ch;}

.optgroup{margin-top:26px;}
.optgroup h4{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px; display:flex; justify-content:space-between;}
.optgroup h4 a{color:var(--accent); text-decoration:underline; text-transform:none; letter-spacing:0; font-family:'Inter',sans-serif; font-size:12.5px;}
.colour-opts{display:flex; gap:10px; flex-wrap:wrap;}
.colour-opts a,.colour-opts span{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); cursor:pointer; display:inline-block;}
.colour-opts .on{outline:2px solid var(--accent); outline-offset:2px;}
/* Size pills — same visual language as the CTA buttons below (2px ink border,
   bold, square corners, 48px tall) so size picker and Add to Cart read as one family. */
.size-opts{display:flex; gap:8px; flex-wrap:wrap;}
.size-opts button,.size-opts a{
  min-width:42px; height:42px; padding:0 12px; border:2px solid var(--ink); border-radius:0;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em;
  color:var(--ink); background:var(--ground); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.size-opts .on{background:var(--ink); color:var(--ground); border-color:var(--ink);}
.size-opts .disabled{border-color:var(--line); color:var(--line); text-decoration:line-through; cursor:not-allowed;}

.buy-row{display:flex; flex-direction:column; gap:8px; margin-top:28px;}
.buy-row .row1{display:flex; gap:10px;}
.qty{display:flex; align-items:center; border:1px solid var(--ink); border-radius:2px; flex:none;}
.qty button{background:none; border:none; width:38px; height:48px; font-size:16px; cursor:pointer; color:var(--ink);}
.qty input[type=number]{width:40px; height:46px; border:none; background:none; text-align:center; font-family:'Inter',sans-serif; color:var(--ink); font-size:14px; -moz-appearance:textfield;}
.qty input[type=number]::-webkit-inner-spin-button,.qty input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.btn.solid.add-cart{flex:1; height:48px; transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;}
/* .block (checkout summary cards) and .wa (floating chat widget) are generic,
   same-specificity classes reused elsewhere on the site with much bigger padding /
   smaller font — scope back to the CTA sizing here so Order Now / WhatsApp match
   Add to Cart's height exactly instead of inheriting those unrelated rules. */
/* .block (checkout summary cards) also carries margin-bottom:22px, which was
   stacking on top of .buy-row's own flex gap — that's what made the space
   after Order Now (and after WhatsApp) look bigger than the gap before it.
   Zero it here so every gap in the buy-row matches. */
.buy-row .btn.block{height:48px; padding:13px 22px; font-size:12.5px; margin-bottom:0; transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;}
/* Order Now (.btn.outline) previously only swapped border/text colour on hover —
   too subtle to read as a hover state. Give it the same filled-accent hover as
   Add to Cart / the solid buttons so it visibly reacts to a pointer. */
.btn.outline:hover{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
/* Add to Cart / Order Now are disabled by theme.js until a size is chosen. */
.btn:disabled,.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none;}

.stockline{display:flex; align-items:center; gap:8px; margin-top:10px; font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft);}
.stockline::before{content:"●"; color:var(--accent);}
.policies{margin-top:28px; padding-top:22px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:12px;}
.policy{display:flex; gap:12px; font-size:13px; color:var(--ink-soft);}
.policy b{color:var(--ink); font-weight:600; font-family:'Inter',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.04em; min-width:110px; flex:none;}

/* accordion (description / size chart / reviews / delivery) — each section is its
   own native <details>, closed by default; opening one doesn't require closing
   the others. Replaces the old always-one-open radio-tab layout. */
.accordion{display:contents;}
.acc-sizechart{grid-area:sizechart;}
.acc-delivery{grid-area:delivery;}
.acc-desc{grid-area:desc; margin-top:40px; border-top:1px solid var(--line); max-width:64ch;}
.acc-reviews{grid-area:reviews; max-width:64ch;}
.acc-item{border-bottom:1px solid var(--line);}
.acc-item summary{
  list-style:none; cursor:pointer; user-select:none; padding:18px 0;
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary::after{content:"+"; font-family:'Inter',sans-serif; font-size:16px; font-weight:400; color:var(--ink-soft); flex:none;}
.acc-item[open] summary{color:var(--ink);}
.acc-item[open] summary::after{content:"–";}
.acc-panel{padding-block:0 22px; color:var(--ink-soft); font-size:14.5px; line-height:1.8;}
.acc-panel table{border-collapse:collapse; font-family:'Inter',sans-serif; font-size:12.5px; margin-top:6px;}
.acc-panel td{border:1px solid var(--line); padding:8px 14px; color:var(--ink);}
.acc-panel th{border:1px solid var(--line); padding:8px 14px; background:var(--surface); text-align:left;}
.acc-panel ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; list-style:disc;}
.review{padding-block:14px; border-top:1px dashed var(--line);}
.review:first-child{border-top:none; padding-top:2px;}
.review .rmeta{display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); margin-bottom:6px;}
.review .rstars{color:var(--brass); letter-spacing:1px;}
.review p{margin:0; color:var(--ink);}

.related{padding-block:50px; border-top:1px solid var(--line);}

/* variable-product attribute dropdowns */
.wafa-variation-select{
  width:100%; border:1px solid var(--line); border-radius:3px; background:var(--surface-2); color:var(--ink);
  padding:10px 12px; font-family:'Inter',sans-serif; font-size:14px; cursor:pointer;
}
.woocommerce-variation-price .price{font-family:'Inter',sans-serif; font-weight:700; color:var(--brass); font-size:20px;}
/* WooCommerce's own copy of the stock line still renders inside .single_variation_wrap
   (core populates it on every variation match) — hidden here since theme.js now moves
   the same content up next to the price instead. display:none takes it fully out of
   flow so there's no leftover gap where it used to sit under the size buttons. */
.single_variation_wrap .woocommerce-variation-availability{display:none !important;}
/* The stock badge now lives inline in .price-row, to the right of the price
   (theme.js fills it from WooCommerce's found_variation event). Reuses the same
   checkmark-pill look the badge always had, just relocated. */
.price-row .stock-badge{align-self:center; margin-top:6px;}
.price-row .stock-badge p.stock{margin-top:0;}
/* WooCommerce injects <p class="stock"> here on variation select. It used to also
   match the generic, absolutely-positioned .stock badge meant for product-grid
   cards (now scoped to .card .stock), which flung this text off into a corner of
   the page — the "stock overlapping" bug. Now styled as a small checkmark pill
   instead of a plain bulleted line. */
.woocommerce-variation-availability p.stock{
  position:static; display:inline-flex; align-items:center; gap:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:4px 11px 4px 9px; margin-top:10px;
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink);
}
.woocommerce-variation-availability p.stock::before{content:"✓"; color:var(--accent); font-weight:700;}
.woocommerce-variation-availability p.out-of-stock{background:#FBEEEC; border-color:#EBC9C3; color:#a33;}
.woocommerce-variation-availability p.out-of-stock::before{content:"✕"; color:#a33;}
.single_variation_wrap{margin-top:8px;}

/* product reviews (WooCommerce default reviews.php, inside the accordion) */
#reviews #comments{list-style:none; margin:0; padding:0;}
#reviews .commentlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
#reviews .comment_container{padding-block:14px; border-top:1px dashed var(--line); display:flex; gap:12px;}
#reviews li:first-child .comment_container{border-top:none; padding-top:2px;}
#reviews .avatar{width:36px; height:36px; border-radius:50%; flex:none;}
#reviews .comment-text{flex:1;}
#reviews .comment-text .star-rating{margin-bottom:4px;}
#reviews .meta{font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); margin-bottom:4px;}
#reviews .description p{margin:0; color:var(--ink);}
#reviews #review_form_wrapper{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
#reviews #reply-title{font-size:16px;}
#reviews .comment-form-rating select{width:auto;}
#reviews .comment-form-author,#reviews .comment-form-email{display:inline-block; width:48%;}
#reviews .form-submit input{
  font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 20px; border-radius:2px; border:1px solid var(--ink); background:var(--ink); color:var(--ground); cursor:pointer;
}
p.stock.out-of-stock{color:#a33; font-size:13px;}

/* ============ CART & CHECKOUT ============ */
.steps{display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft);}
.steps .on{color:var(--ink); font-weight:700;}
.steps b{color:var(--accent);}
.checkout{padding-block:36px 70px;}
.co-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:start;}
.block{border:1px solid var(--line); border-radius:6px; background:var(--surface-2); padding:26px 26px 28px; margin-bottom:22px;}
.block h2{font-size:16px; display:flex; align-items:center; gap:10px;}
.block h2 .n{width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--ground); font-family:'Inter',sans-serif; font-size:11.5px; display:flex; align-items:center; justify-content:center; flex:none;}
.fields{display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px;}
.fields .full{grid-column:1/-1;}
.wafa-hidden-field{display:none !important;}
label{display:block; font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
input:not([type=checkbox]):not([type=radio]):not(.qty),select,textarea{
  width:100%; border:1px solid var(--line); border-radius:3px; background:var(--ground); color:var(--ink);
  padding:11px 12px; font-family:'Inter',sans-serif; font-size:14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
textarea{resize:vertical; min-height:64px;}
.pay-opts{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.pay-opt{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:4px; padding:14px 16px; cursor:pointer;}
.pay-opt.on,.pay-opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.pay-opt .radio{width:16px; height:16px; border-radius:50%; border:1px solid var(--ink-soft); flex:none; position:relative;}
.pay-opt.on .radio,.pay-opt:has(input:checked) .radio{border-color:var(--accent);}
.pay-opt.on .radio::after,.pay-opt:has(input:checked) .radio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent);}
.pay-opt strong{font-size:14px; display:block;}
.pay-opt span.sub{font-size:12.5px; color:var(--ink-soft);}
.pay-opt input[type=radio]{position:absolute; opacity:0; width:0; height:0;}
.lines{display:flex; flex-direction:column; gap:16px;}
.line{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center;}
.line .thumb{width:64px; height:64px;}
.line h4{font-size:14.5px; font-weight:600; margin:0;}
.line .meta{font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); margin-top:4px;}
.line .price{font-family:'Inter',sans-serif; font-weight:700; color:var(--brass); font-size:14px; text-align:right;}
.line .qty{display:flex; align-items:center; gap:8px; margin-top:6px; justify-content:flex-end; border:none;}
.line .qty button{width:22px; height:22px; border:1px solid var(--line); background:var(--ground); border-radius:2px; cursor:pointer; color:var(--ink); font-size:13px; line-height:1;}
.line .qty input[type=number]{width:30px; height:22px; font-size:11.5px; padding:0;}
.line .remove{font-family:'Inter',sans-serif; font-size:10.5px; color:var(--ink-soft); text-decoration:underline; margin-top:6px; display:inline-block;}
.promo{display:flex; gap:10px; margin-top:20px;}
.promo input{flex:1;}
.summary{position:sticky; top:96px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); padding:24px;}
.summary h3{font-size:15px; font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:700;}
.srow{display:flex; justify-content:space-between; font-size:14px; margin-top:14px; color:var(--ink-soft);}
.srow b{color:var(--ink); font-weight:600;}
.srow.total{border-top:1px solid var(--line); margin-top:16px; padding-top:16px; font-size:17px; color:var(--ink);}
.srow.total b{font-family:'Inter',sans-serif; color:var(--brass); font-size:20px;}
.place-btn{width:100%; margin-top:20px; padding-block:15px; font-size:13px;}
.secure{display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; font-size:11.5px; color:var(--ink-soft); font-family:'Inter',sans-serif;}
.co-note{margin-top:16px; font-size:12.5px; color:var(--ink-soft); line-height:1.6; background:var(--surface); border:1px dashed var(--line); border-radius:4px; padding:12px 14px;}

/* ============ BLOCKS CHECKOUT (/checkout/) ============
 * WooCommerce's Blocks Checkout — a Gutenberg/React block, not the classic
 * PHP template the .checkout/.block/.fields rules above target. Reduced to
 * the approved field set (Full name, Mobile number, District, Complete
 * address, Order notes) with pure CSS: hide + flex `order` on the address
 * form's own flex children, so a future React re-render can't undo it.
 * Text relabelling and the dynamic delivery-charge hint can't be done in
 * CSS and live in theme.js instead. */
body.woocommerce-checkout{background:var(--surface) !important;}
.wp-block-woocommerce-checkout-contact-information-block{display:none !important;}
.wp-block-woocommerce-checkout-shipping-methods-block{display:none !important;}
.wc-block-checkout__use-address-for-billing{display:none !important;}
.wc-block-components-address-form__country{display:none !important;}
.wc-block-components-address-form__last_name{display:none !important;}
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-form__address_2-hidden-input,
.wc-block-components-address-form__city,
.wc-block-components-address-form__postcode{display:none !important;}

.wc-block-components-address-form__first_name{order:1; flex-basis:100% !important;}
.wc-block-components-address-form__phone{order:2; flex-basis:100% !important;}
.wc-block-components-address-form__state{order:3;}
.wafa-delivery-hint{order:4; flex-basis:100%; margin:8px 0 0;}
.wafa-delivery-hint-pill{display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink); background:none; padding:0; border-radius:0;}
.wafa-delivery-hint-pill::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--ink-soft); flex-shrink:0;}
.wafa-delivery-hint-pill b{font-weight:800; font-variant-numeric:tabular-nums; margin:0 3px;}
.wc-block-components-address-form__address_1{order:5; flex-basis:100% !important;}

/* WooCommerce Blocks' default text-input renders its <label> as an
 * absolutely-positioned "floating placeholder" centered inside the input
 * (see core .wc-block-components-text-input label rule: position:absolute;
 * top:25px; transform:translateY(-50%)). Combined with the native Bengali
 * placeholder set by theme.js, that put two lines of text on top of each
 * other inside Full name / Mobile number / Complete address. Force those
 * three fields' label to sit statically above the input instead, matching
 * the plain label{} styling used everywhere else on the form. Scoped to
 * just these three (compound class selectors) so it never touches the
 * hidden last_name/city/postcode fields, which share the same
 * .wc-block-components-text-input wrapper class. */
.wc-block-components-address-form__first_name.wc-block-components-text-input,
.wc-block-components-address-form__phone.wc-block-components-text-input,
.wc-block-components-address-form__address_1.wc-block-components-text-input{
	display:flex !important;
	flex-direction:column-reverse !important;
	height:auto !important;
	justify-content:flex-end !important;
}
.wc-block-components-address-form__first_name.wc-block-components-text-input label,
.wc-block-components-address-form__phone.wc-block-components-text-input label,
.wc-block-components-address-form__address_1.wc-block-components-text-input label{
	position:static !important;
	left:auto !important;
	top:auto !important;
	max-width:none !important;
	transform:none !important;
	margin:0 0 6px !important;
	padding:0 !important;
	font-size:10.5px !important;
	line-height:1.3 !important;
	text-transform:uppercase !important;
	letter-spacing:.06em !important;
	color:var(--ink-soft) !important;
	font-family:'Inter',sans-serif !important;
	font-weight:400 !important;
	cursor:default !important;
}

/* Each checkout "step" (address, shipping options, payment options, order
 * notes) rendered flat with no visual grouping at all — wrap each in the
 * same card treatment used elsewhere on the site (.block: border, radius,
 * surface background, soft shadow). theme.js adds the .wafa-checkout-heading
 * class to the two native WC step titles (Shipping options / Payment
 * options) so they match the BILLING & SHIPPING / ADDITIONAL INFORMATION
 * headings instead of sitting at WC's larger default size.
 *
 * WC core's packages-style.css ships a fieldset-reset rule targeting the
 * exact same elements — `.wc-block-components-form .wc-block-components-
 * checkout-step` (two classes, specificity 0,2,0) — that zeroes background/
 * border/padding back to `initial`/`none`/`0`. That beat our original single-
 * class selector (0,1,0) outright regardless of load order, so none of these
 * four cards were actually rendering their border/background/padding live —
 * confirmed via computed-style inspection. Compounded with
 * .wc-block-components-checkout-step (matches WC's specificity) plus
 * !important (belt-and-braces, matches the pattern already used for the
 * radio-control overrides below) so the card treatment always wins. */
.wp-block-woocommerce-checkout-shipping-address-block.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-shipping-methods-block.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-order-note-block.wc-block-components-checkout-step{
	border:1px solid var(--line) !important;
	border-radius:6px !important;
	background:var(--surface-2) !important;
	box-shadow:0 1px 2px rgba(13,13,13,.04) !important;
	padding:32px !important;
}
@media (max-width:860px){
	.wp-block-woocommerce-checkout-shipping-address-block.wc-block-components-checkout-step,
	.wp-block-woocommerce-checkout-payment-block.wc-block-components-checkout-step,
	.wp-block-woocommerce-checkout-order-note-block.wc-block-components-checkout-step{
		padding:24px 20px !important;
	}
}

/* WC's own radio rows (Shipping options / Payment options) use a plain
 * inset box-shadow with no accent/selected state — restyle to match the
 * site's rounded, accent-highlighted option-card look (same idea as
 * .pay-opt on the classic checkout template). */
.wc-block-components-radio-control__option{
	box-shadow:0 0 0 1px var(--line) inset !important;
	border-radius:4px !important;
	background:var(--surface-2) !important;
	cursor:pointer;
	transition:box-shadow .15s;
}
.wc-block-components-radio-control__option:hover{
	box-shadow:0 0 0 1px var(--ink-soft) inset !important;
}
.wc-block-components-radio-control__option-checked{
	box-shadow:0 0 0 1.5px var(--ink) inset !important;
	background:var(--surface-2) !important;
}
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input{
	border-color:var(--ink) !important;
}
.wc-block-components-radio-control__option-checked .wc-block-components-radio-control__input::before{
	background-color:var(--ink) !important;
}

/* Order notes: theme.js auto-checks this on load so the textarea always
   renders, then this hides the now-redundant checkbox + its own label */
.wc-block-checkout__add-note .wc-block-components-checkbox{display:none !important;}

/* "BILLING & SHIPPING" / "ADDITIONAL INFORMATION" headings theme.js inserts */
.wafa-checkout-heading{
	font-family:'Inter',sans-serif; font-size:11px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:var(--ink-soft); margin:0 0 24px;
}

/* Order summary heading, product typography, CTA + trust row —
 * matches the approved checkout mockup's sidebar treatment. */
.wc-block-components-checkout-order-summary__title-text{
	font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important;
	text-transform:uppercase !important; color:var(--ink-soft) !important; margin:0 !important;
}
.wc-block-components-order-summary-item .wc-block-components-product-name{
	font-size:13.5px !important; font-weight:600 !important; line-height:1.35 !important;
}
.wc-block-components-product-metadata__description p{
	font-size:12px !important; color:var(--ink-soft) !important; margin:3px 0 0 !important;
}
.wc-block-components-checkout-place-order-button{
	text-transform:uppercase !important; letter-spacing:.14em !important;
	font-size:13px !important; font-weight:600 !important; border-radius:4px !important;
	transition:background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.wc-block-components-checkout-place-order-button:hover{
	transform:translateY(-1px); box-shadow:0 6px 16px rgba(13,13,13,.16);
}
.wafa-trust-row{
	display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
	margin-top:16px; font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft);
}
.wafa-trust-row .wafa-trust-item{display:flex; align-items:center; gap:5px;}
.wafa-trust-row svg{width:12px; height:12px; stroke:currentColor; flex-shrink:0;}
.wafa-trust-row .wafa-trust-dot{opacity:.55;}

/* ============ WOOCOMMERCE DEFAULT ELEMENT RESKIN ============ */
.woocommerce-message,.woocommerce-error,.woocommerce-info{
  border-top-color:var(--accent) !important; background:var(--surface-2); color:var(--ink);
  font-size:14px; padding:14px 18px; border-radius:4px; list-style:none;
}
.woocommerce-error{border-top-color:#a33 !important;}
.woocommerce-message a.button,.woocommerce-error a.button{background:var(--ink); color:var(--ground); padding:6px 12px; border-radius:2px; text-decoration:none; font-size:12px;}
/* The "X has been added to your cart" banner is redundant with the AJAX
 * cart drawer (theme.js opens the drawer on add-to-cart) and was showing up
 * at the top of unrelated pages after a stale add-to-cart session notice.
 * Hide it site-wide; keep .woocommerce-error / .woocommerce-info visible. */
.woocommerce-message{display:none !important;}
table.shop_table{width:100%; border-collapse:collapse; font-size:14px;}
table.shop_table th{font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); text-align:left; padding:10px 8px; border-bottom:1px solid var(--line);}
table.shop_table td{padding:14px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
.woocommerce-cart-form .product-thumbnail img{width:64px; height:64px; object-fit:contain; border:1px solid var(--line); border-radius:4px;}
.woocommerce-cart-form .product-name a{color:var(--ink); text-decoration:none; font-weight:600;}
.woocommerce-cart-form .quantity .qty{width:60px; padding:8px;}
.woocommerce-cart-form .product-remove a{color:var(--ink-soft); font-size:18px; text-decoration:none;}
.cart-collaterals .cart_totals{border:1px solid var(--line); border-radius:6px; background:var(--surface-2); padding:24px;}
.cart-collaterals .cart_totals h2{font-size:15px; font-family:'Inter',sans-serif; text-transform:uppercase; letter-spacing:.08em;}
.cart-collaterals table.shop_table th,.cart-collaterals table.shop_table td{border:none; padding:10px 0;}
.wc-proceed-to-checkout .checkout-button{width:100%; text-align:center; margin-top:10px;}
.coupon{display:flex; gap:10px; align-items:center;}
.coupon .input-text{width:auto; flex:1;}
#customer_details .col-1,#customer_details .col-2{width:100%; float:none;}

/* ============ MY ACCOUNT ============ */
.woocommerce-MyAccount-navigation ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; border-bottom:1px solid var(--line); padding-bottom:16px;}
.woocommerce-MyAccount-navigation-link a{display:inline-block; padding:8px 16px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); border-radius:20px;}
.woocommerce-MyAccount-navigation-link a:hover{border-color:var(--accent); color:var(--accent);}
.woocommerce-MyAccount-navigation-link.is-active a{background:var(--ink); color:var(--ground); border-color:var(--ink);}
.woocommerce-MyAccount-content p,.woocommerce-MyAccount-content address{color:var(--ink-soft); line-height:1.6; font-size:14.5px;}
.woocommerce-MyAccount-content a{color:var(--accent);}
.woocommerce-MyAccount-content strong{color:var(--ink);}
/* our own .block h2 already carries the section heading */
.woocommerce-billing-fields > h3,.woocommerce-additional-fields > h3,.woocommerce-billing-fields__title{display:none;}
.woocommerce-checkout .form-row{margin-bottom:14px;}
.woocommerce-additional-fields{margin-top:6px;}
#order_review{border:1px solid var(--line); border-radius:6px; background:var(--surface-2); padding:24px; position:sticky; top:96px;}
#order_review table.shop_table{margin-bottom:16px;}
.woocommerce-checkout-payment{background:transparent !important; border:none !important;}
.woocommerce-checkout-payment ul.payment_methods{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.woocommerce-checkout-payment li.wc_payment_method{border:1px solid var(--line); border-radius:4px; padding:14px 16px;}

/* Order confirmation page: WooCommerce core hooks the order-details table and
 * customer/billing-address sections onto woocommerce_thankyou (the same hook
 * used on My Account > View Order) rather than us calling their templates
 * directly — style the raw sections it outputs to match our .block cards. */
.checkout .woocommerce-order-details,
.checkout .woocommerce-customer-details{
	border:1px solid var(--line); border-radius:6px; background:var(--surface-2);
	padding:26px 26px 28px; margin-bottom:22px;
}
.checkout .woocommerce-order-details__title,
.checkout .woocommerce-column__title{
	font-size:16px; margin-bottom:18px;
}
.checkout .woocommerce-customer-details address{
	font-style:normal; line-height:1.7; color:var(--ink-soft); font-size:14px;
}
.checkout .woocommerce-customer-details .woocommerce-column{width:100%;}
.checkout .woocommerce-columns--addresses{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:640px){
	.checkout .woocommerce-columns--addresses{grid-template-columns:1fr;}
}
.woocommerce-checkout-payment li.wc_payment_method label{display:inline; font-family:'Inter',sans-serif; font-size:14px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600;}
.woocommerce-checkout-payment .payment_box{font-size:12.5px; color:var(--ink-soft); margin-top:8px; padding:0;}
#place_order{width:100%; padding-block:15px; font-size:13px; margin-top:10px;}
.woocommerce-error{list-style:none; padding-left:18px !important;}
.star-rating{color:var(--brass); font-family:'Inter',sans-serif;}

/* ============ FOOTER ============ */
footer.site-footer{padding-block:44px 34px; border-top:1px solid var(--line);}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;}
footer h4{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
footer a{color:var(--ink); text-decoration:none; font-size:14px;}
footer a:hover{color:var(--accent);}
.foot-bottom{margin-top:38px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:'Inter',sans-serif; font-size:11px; color:var(--ink-soft); flex-wrap:wrap; gap:8px;}
.wa{display:inline-flex; align-items:center; gap:7px; background:var(--whatsapp); color:var(--accent-ink); padding:8px 14px; border-radius:2px; text-decoration:none; font-family:'Inter',sans-serif; font-size:12px;}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .links{display:none;}
  .menu-toggle{display:flex;}
  .nav-search{display:none;}
  .hero-inner{padding-block:34px 26px;}
  .cat-nav-top h1{font-size:30px;}
  .rail-track{grid-template-columns:repeat(2,1fr);}
  .prod-grid,.prod-grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .trust-item:nth-child(3){border-left:none;}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:26px;}
  .shop-grid{grid-template-columns:1fr;}
  .filters{position:static; flex-direction:row; flex-wrap:wrap; gap:18px;}
  .fgroup{min-width:150px;}
  .pdp{grid-template-columns:1fr; row-gap:30px; grid-template-areas:"gallery" "pinfo" "sizechart" "desc" "delivery" "reviews";}
  .gallery-sticky{position:static;}
  .acc-bar{gap:20px; overflow-x:auto;}
  .co-grid{grid-template-columns:1fr;}
  .summary,#order_review{position:static;}
  .fields{grid-template-columns:1fr;}
  .steps span:not(.on){display:none;}
  .steps b{display:none;}
  /* Checkout/confirmation header: on mobile the Cart → Checkout → Confirmation
     steps squeezed in between the logo and the icons and pushed the menu /
     search / cart icons onto a second line. Hide the steps on mobile and keep
     the header on one line, same as every other page. (2026-09-26) */
  nav.main{flex-wrap:nowrap;}
  nav.main .steps{display:none;}
}
/* Nav dropdown */ .links li{position:relative;} .links li.menu-item-has-children>a{display:flex;align-items:center;gap:5px;} .links li.menu-item-has-children>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;} .links .sub-menu{position:absolute;top:100%;left:0;min-width:210px;margin:0;padding:10px 0;list-style:none;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 12px 28px rgba(13,13,13,.1);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;z-index:200;} .links li.menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);} .links .sub-menu li{padding:0;} .links .sub-menu a{display:block;padding:9px 20px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:none;border-bottom:0;color:var(--ink);white-space:nowrap;} .links .sub-menu a:hover{background:var(--accent-soft);color:var(--accent);} .mobile-links li.menu-item-has-children>.sub-menu{list-style:none;margin:6px 0 4px 14px;padding:0;border-left:1px solid var(--line);} .mobile-links .sub-menu li{padding:0;} .mobile-links .sub-menu a{display:block;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);}
/* Slide-out cart drawer */
#wafa-cart-drawer-overlay{position:fixed; inset:0; background:rgba(13,13,13,.45); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:998;}
#wafa-cart-drawer-overlay.open{opacity:1; visibility:visible;}
#wafa-cart-drawer{position:fixed; top:0; right:0; height:100%; width:min(400px,92vw); background:var(--ground); box-shadow:-12px 0 32px rgba(13,13,13,.14); transform:translateX(100%); transition:transform .3s ease; z-index:999; display:flex; flex-direction:column;}
#wafa-cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line);}
.cart-drawer-head h3{font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0; color:var(--ink);}
.cart-drawer-close{background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--ink-soft); padding:0;}
#wafa-cart-drawer-body{flex:1; overflow-y:auto; padding:8px 24px; min-height:0;}
#wafa-cart-drawer-footer{flex:none;}
.cart-drawer-item{display:flex; gap:14px; padding-block:16px; border-bottom:1px solid var(--line);}
.cart-drawer-item img{width:64px; height:64px; object-fit:cover; border-radius:4px; border:1px solid var(--line); flex:none;}
.cdi-info{flex:1; min-width:0;}
.cdi-name{font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; display:block;}
.cdi-meta{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.cdi-qty{font-size:12.5px; color:var(--ink-soft); margin-top:5px;}
.cdi-remove{font-size:12px; color:var(--ink-soft); text-decoration:underline; cursor:pointer; margin-top:7px; display:inline-block; background:none; border:none; padding:0;}
/* Quantity +/- stepper for cart drawer item rows, added alongside the
   existing "Remove" link. Scaled down from the product page's .qty
   stepper (same border/radius language, smaller footprint for the
   compact drawer row) rather than introducing a new visual style. */
.cdi-qty-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;}
.cdi-qty-stepper{display:flex; align-items:center; border:1px solid var(--ink); border-radius:2px; flex:none; transition:opacity .15s ease;}
.cdi-qty-stepper button{background:none; border:none; width:26px; height:26px; font-size:14px; line-height:1; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0;}
.cdi-qty-value{min-width:22px; text-align:center; font-size:12.5px; color:var(--ink);}
.cdi-qty-stepper.is-loading{opacity:.5; pointer-events:none;}
.cdi-subtotal{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}

.cart-drawer-empty{color:var(--ink-soft); font-size:14px; text-align:center; padding-block:60px;}
.cart-drawer-foot{border-top:1px solid var(--line); padding:20px 24px; display:flex; flex-direction:column; gap:10px;}
/* The drawer's View Cart / Checkout links reuse the generic .block
 * ("full width") utility class, which collides with an unrelated
 * .block card-styling rule elsewhere (border, background, ~26-28px
 * padding meant for content boxes) and made the buttons balloon in
 * height. Restore the normal .btn box model just for these two,
 * scoped to the drawer footer so the shared .block class elsewhere
 * on the site is untouched. */
#wafa-cart-drawer-footer .btn.block{padding:13px 22px; border-radius:0; border-width:2px; border-style:solid; background-image:none; margin-bottom:0;}

.cart-drawer-subtotal{display:flex; justify-content:space-between; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:4px;}
.single_add_to_cart_button.is-loading, .add-cart.is-loading{opacity:.6; pointer-events:none;}
@media (max-width:480px){ #wafa-cart-drawer{width:100vw;} }


/* Size chart image popup (button next to the Size attribute selector) */
.optgroup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.optgroup-head h4{margin:0;}
.wafa-sizechart-btn{border:1px solid currentColor;background:transparent;padding:6px 14px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:2px;line-height:1.2;}
.wafa-sizechart-btn:hover{background:rgba(0,0,0,.05);}
.wafa-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;}
.wafa-modal[hidden]{display:none;}
.wafa-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.wafa-modal-inner{position:relative;background:#fff;max-width:min(560px,92vw);max-height:88vh;overflow:auto;padding:16px;border-radius:4px;}
.wafa-modal-inner img{display:block;width:100%;height:auto;}
.wafa-modal-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border:none;background:#fff;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2);}


/* Fix: mobile 2-column product grid can overflow horizontally when a card's
   title or size-list is long (CSS Grid 1fr tracks default to minmax(auto,1fr),
   so a long unbreakable content width grows the track past its fair share). */
.prod-grid > a.card{min-width:0;}

.wafa-sizechart-btn--price{display:inline-block;margin-top:8px;margin-bottom:4px;}

/* Flash Sale campaign landing page */
.wafa-fs-banner{
	position:relative; overflow:hidden; text-align:center;
	padding:40px 24px 34px; margin-bottom:32px; border-radius:8px;
	background:linear-gradient(155deg,#171412 0%,#221b17 55%,#171412 100%);
	box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(13,13,13,.45);
}
.wafa-fs-banner::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:
		radial-gradient(480px 200px at 15% -10%, rgba(156,70,48,.35), transparent 60%),
		radial-gradient(480px 220px at 85% 110%, rgba(156,70,48,.22), transparent 60%);
}
.wafa-fs-title{
	position:relative; font-family:'Anton',sans-serif; font-weight:400;
	font-size:clamp(28px,4.4vw,42px); line-height:1.05; margin:0 0 16px;
	color:#FFFFFF; text-transform:uppercase; letter-spacing:.01em;
}
.wafa-fs-status{
	position:relative; display:flex; flex-direction:column; align-items:center;
	justify-content:center; gap:14px; flex-wrap:wrap;
}
.wafa-fs-badge{
	display:inline-flex; align-items:center; gap:8px;
	padding:6px 16px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
	font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:#F1E4DE; background:rgba(255,255,255,.05);
}
.wafa-fs-badge::before{
	content:""; width:6px; height:6px; border-radius:50%;
	background:#E8734F; box-shadow:0 0 0 3px rgba(232,115,79,.25);
	animation:wafaFsPulse 1.6s ease-in-out infinite;
}
.wafa-fs-badge--ended{
	color:#F4C7BC; border-color:rgba(179,38,30,.5); background:rgba(179,38,30,.14);
}
.wafa-fs-badge--ended::before{ background:#E5453A; box-shadow:0 0 0 3px rgba(229,69,58,.25); animation:none; }
@keyframes wafaFsPulse{
	0%,100%{ opacity:1; } 50%{ opacity:.35; }
}
.wafa-fs-countdown{
	display:flex; align-items:stretch; gap:8px; font-variant-numeric:tabular-nums;
}
.wafa-fs-countdown .u{
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	min-width:58px; padding:10px 6px 8px; border-radius:6px;
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
	backdrop-filter:blur(2px);
}
.wafa-fs-countdown .n{
	font-family:'Anton',sans-serif; font-weight:400; font-size:26px; line-height:1;
	color:#FFFFFF;
}
.wafa-fs-countdown .l{
	margin-top:5px; font-size:9px; font-weight:700; letter-spacing:.12em;
	text-transform:uppercase; color:#9C948C;
}
.wafa-fs-countdown .sep{
	align-self:center; font-family:'Anton',sans-serif; font-size:20px; color:#5C554F;
	margin:0 -2px;
}
@media (max-width:480px){
	.wafa-fs-banner{ padding:32px 16px 28px; }
	.wafa-fs-countdown .u{ min-width:48px; padding:8px 4px 6px; }
	.wafa-fs-countdown .n{ font-size:21px; }
}

/* Flash Sale listing (archive — linked from the footer) */
.wafa-fs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.wafa-fs-list-card{display:block;padding:20px;border:1px solid #e5e0d8;border-radius:4px;text-decoration:none;color:inherit;transition:border-color .15s;}
.wafa-fs-list-card:hover{border-color:#111;}
.wafa-fs-list-card h3{margin:0 0 6px;font-size:16px;text-transform:uppercase;letter-spacing:.02em;}
.wafa-fs-list-card span{font-size:13px;color:var(--ink-soft,#767267);}

/* =====================================================
   Product page (mobile) — minimal / quiet-luxury pass
   Scoped overrides on top of the existing design tokens.
   ===================================================== */

/* Announcement bar — single clean line, no WhatsApp repeat */
.bar-top .wrap{justify-content:center; text-align:center; font-weight:500; letter-spacing:.05em;}

/* Product title — lighter geometric weight instead of the site's bold 800 heading style */
.pinfo h1{
	font-family:'General Sans','Inter',sans-serif;
	font-weight:500;
	letter-spacing:-0.01em;
}
.pinfo .cat{letter-spacing:.08em;}
.pinfo .price{font-variant-numeric:tabular-nums;}

/* Size Chart / Size Guide — minimal underlined text link instead of a bordered box */
.wafa-sizechart-btn{
	all:unset;
	display:inline-flex;
	align-items:center;
	gap:6px;
	cursor:pointer;
	font-family:'Inter',sans-serif;
	font-size:12.5px;
	font-weight:500;
	letter-spacing:.03em;
	color:var(--ink);
	border-bottom:1px solid currentColor;
	padding-bottom:1px;
	line-height:1.3;
}
.wafa-sizechart-btn:hover{opacity:.6;}
.wafa-sizechart-icon{width:13px; height:13px; flex-shrink:0;}
.wafa-sizechart-btn--price{margin-top:10px; margin-bottom:0;}

/* Sale / New badge — muted dark pill instead of the accent-rust rectangle */
.badge{
	background:var(--ink);
	color:#fff;
	border-radius:999px;
	font-weight:600;
	padding:4px 10px;
}
.badge.sale{background:#1a1a1a;}

/* Stock line — dot reflects actual stock state instead of always using the accent colour */
.stockline.is-instock::before{content:"●"; color:#4a7c59;}
.stockline.is-outofstock::before{content:"●"; color:var(--ink-soft);}


/* Sticky "Confirm Order" bar (checkout only) -- WooCommerce locks the
 * Actions block inside the main form and it cannot be moved next to the
 * Total in the sidebar, so this bar appears at the bottom of the screen
 * once the real button scrolls out of view; theme.js keeps its total in
 * sync and forwards clicks to the real button. */
.wafa-sticky-confirm{
	position:fixed; left:0; right:0; bottom:0; z-index:60;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	background:var(--ground); border-top:1px solid var(--line);
	padding:14px 20px; box-shadow:0 -4px 16px rgba(13,13,13,.10);
	transform:translateY(100%); transition:transform .25s ease;
}
.wafa-sticky-confirm.is-visible{transform:translateY(0);}
.wafa-sticky-confirm__total{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--ink);}
.wafa-sticky-confirm__btn{
	background:var(--ink); color:var(--ground); border:none; border-radius:4px;
	padding:13px 30px; font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
	text-transform:uppercase; letter-spacing:.1em; cursor:pointer;
}
.wafa-sticky-confirm__btn:hover{background:var(--accent);}


/* ============================================================
 * WAFA Landing Pages (wafa_landing CPT) — single-wafa_landing.php
 * Reuses the site's own tokens (--ground/--surface/--ink/--accent/…)
 * declared in :root above. --gold is scoped locally to .wl-wrap only.
 * ============================================================ */
.wl-wrap{ --gold:#C79A56; }

.wl-hero{ position:relative; padding:52px 24px 44px; background:linear-gradient(155deg,#171412 0%,#221b17 55%,#171412 100%); overflow:hidden; text-align:center; }
.wl-hero::before{ content:''; position:absolute; top:-140px; left:-100px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(156,70,48,.45),transparent 70%); }
.wl-hero::after{ content:''; position:absolute; bottom:-160px; right:-100px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(199,154,86,.28),transparent 70%); }
.wl-hero-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.wl-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:10px; }
.wl-hero-title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(28px,5vw,44px); color:#F5F1EA; letter-spacing:.01em; margin:0 0 12px; text-wrap:balance; }
.wl-hero-sub{ color:#D8D2C6; font-size:14px; margin:0 0 22px; }
.wl-combo-tiles{ display:flex; justify-content:center; gap:18px; margin-bottom:26px; flex-wrap:wrap; }
.wl-tile{ position:relative; width:200px; padding:20px 16px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); }
.wl-tile-best{ background:linear-gradient(180deg,#2a2018,#1c1712); border:1px solid var(--gold); }
.wl-tile-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gold); color:#171412; font-size:10px; font-weight:800; letter-spacing:.06em; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.wl-tile-qty{ font-size:13px; color:#D8D2C6; font-weight:600; margin-bottom:6px; }
.wl-tile-price{ font-family:'Anton',sans-serif; font-size:32px; color:#F5F1EA; }
.wl-hero-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--gold); color:#171412; font-weight:700; font-size:14px; padding:13px 28px; border-radius:3px; text-decoration:none; border:none; cursor:pointer; }

.wl-trust{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); }
.wl-trust-item{ padding:14px 16px; border-right:1px solid var(--line); font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.wl-trust-item:last-child{ border-right:none; }
.wl-trust-item b{ display:block; color:var(--ink); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }

.wl-section{ padding:36px 24px; max-width:1180px; margin:0 auto; }
.wl-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.wl-section-title{ font-family:'Anton',sans-serif; font-weight:400; font-size:20px; color:var(--ink); }
.wl-counter{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.wl-counter b{ color:var(--accent); font-size:14px; }

.wl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.wl-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--ground); position:relative; }
.wl-card.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.wl-check{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; opacity:0; transition:opacity .15s; }
.wl-card.sel .wl-check{ background:var(--accent); border-color:var(--accent); color:#fff; opacity:1; }
.wl-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--surface); }
.wl-card-body{ padding:10px 12px 12px; }
.wl-card-name{ font-size:12.5px; font-weight:600; color:var(--ink); }
.wl-card-price{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.wl-size-row{ display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 12px; }
.wl-size-chip{ min-width:28px; text-align:center; padding:5px 4px; border:1px solid var(--line); border-radius:4px; font-size:11px; font-weight:600; color:var(--ink); background:var(--ground); cursor:pointer; }
.wl-size-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.wl-confirm-cta{ margin:6px 0 0; text-align:center; }
.wl-confirm-cta-btn{ width:100%; max-width:420px; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:15px 20px; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease; }
.wl-confirm-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.22); }
.wl-confirm-cta-btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.16); }

.wl-combo-bar{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--accent-soft); border:1px solid #e6c9bd; border-radius:8px; padding:16px 22px; flex-wrap:wrap; }
.wl-combo-l1{ font-size:14px; font-weight:700; color:var(--accent); }
.wl-combo-l2{ font-size:12px; color:#8a5942; margin-top:2px; }

.wl-reviews .wl-section-head{ justify-content:center; }
.wl-reviews{ background:var(--surface); padding:36px 24px; }
.wl-reviews-carousel{ position:relative; max-width:380px; margin:0 auto; overflow:hidden; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.12); }
.wl-reviews-track{ display:flex; transition:transform .5s ease; }
.wl-review-slide{ flex:0 0 100%; aspect-ratio:4/5; }
.wl-review-img{ width:100%; height:100%; display:block; object-fit:cover; }
.wl-reviews-dots{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.wl-reviews-dots span{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.wl-reviews-dots span.on{ background:var(--accent); transform:scale(1.25); }

.wl-order-wrap{ padding:40px 24px; max-width:1180px; margin:0 auto; }
.wl-order-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start; }
.wl-panel{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; }
.wl-field{ margin-bottom:14px; }
.wl-field label{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.wl-field input, .wl-field select, .wl-field textarea{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:5px; font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--ground); }
.wl-field textarea{ resize:vertical; min-height:64px; }
.wl-pay-row{ display:flex; gap:12px; }
.wl-pay-opt{ position:relative; flex:1; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); background:var(--surface-2); border-radius:8px; padding:13px 16px; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.wl-pay-opt.on{ border-color:var(--accent); background:var(--accent-soft); }
.wl-pay-opt input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.wl-pay-radio{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; border:2px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease; }
.wl-pay-opt.on .wl-pay-radio{ border-color:var(--accent); }
.wl-pay-radio::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .15s ease; }
.wl-pay-opt.on .wl-pay-radio::after{ transform:scale(1); }
.wl-pay-label{ color:var(--ink); }
.wl-error{ color:#b3261e; background:#fbe9e7; border:1px solid #f3c2bc; border-radius:6px; padding:10px 14px; font-size:12.5px; margin-top:6px; }

.wl-summary-title{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.wl-empty-hint{ font-size:12.5px; color:var(--ink-soft); margin:0; }
.wl-summary-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.wl-summary-line img{ width:42px; height:42px; border-radius:4px; object-fit:cover; }
.wl-summary-meta{ flex:1; font-size:12.5px; }
.wl-summary-name{ font-weight:600; color:var(--ink); }
.wl-summary-size{ color:var(--ink-soft); font-size:11.5px; }
.wl-totals{ margin-top:12px; }
.wl-total-row{ display:flex; justify-content:space-between; font-size:13px; padding:5px 0; color:var(--ink-soft); }
.wl-total-row.grand{ font-size:16px; font-weight:800; color:var(--ink); border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }
.wl-submit-btn{ width:100%; margin-top:14px; background:var(--accent); color:#fff; border:none; border-radius:6px; padding:15px; font-size:14.5px; font-weight:700; cursor:pointer; }
.wl-submit-btn:disabled{ opacity:.6; cursor:default; }

.wl-wa-strip{ background:var(--whatsapp); color:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13.5px; font-weight:600; text-align:center; }

@media (max-width: 780px){
	.wl-order-grid{ grid-template-columns:1fr; }
	.wl-trust{ grid-template-columns:repeat(2,1fr); }
	.wl-trust-item:nth-child(2){ border-right:none; }
}

@media (max-width: 600px){
	.wl-hero{ padding:38px 18px 32px; }
	.wl-section{ padding:26px 18px; }
	.wl-reviews{ padding:26px 18px; }
	.wl-order-wrap{ padding:28px 18px; }
	.wl-combo-tiles{ gap:12px; }
	.wl-tile{ width:calc(50% - 6px); padding:16px 12px; }
	.wl-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
	.wl-panel{ padding:18px; }
	.wl-section-title{ font-size:17px; }
	.wl-counter{ padding:6px 12px; font-size:11.5px; }
	.wl-combo-bar{ padding:14px 16px; }
	.wl-reviews-carousel{ max-width:none; margin:0 -18px; border-radius:0; box-shadow:none; }
	.wl-wa-strip{ padding:13px 16px; font-size:12.5px; }
	.wl-confirm-cta-btn{ font-size:14px; padding:14px 18px; }
}

@media (max-width: 380px){
	.wl-tile{ width:100%; }
	.wl-combo-tiles{ flex-direction:column; align-items:center; }
}