:root{
  /* THAY MÀU LOGO TẠI ĐÂY */
  /* Brand palette — see AGENTS.md + design system doc.
     Chủ đạo (CTA/logo/bao bì): #D9622B (cam đất).
     Phụ / tin cậy (bảo hành tag, "chính hãng", secondary CTA): #0E5C57 (teal).
     Nền (web, khoảng trắng): #F5EEF4 (trắng hồng nhạt).
     Text / outline: #1C1C1A (gần đen).
     Success / warn / danger giữ chuẩn semantic để không bị lẫn với brand. */
  --brand-primary:#D9622B; --brand-trust:#0E5C57;
  --brand-background:#F5EEF4; --brand-ink:#1C1C1A;
  --bg:var(--brand-background); --surface:#FFFFFF; --fg:var(--brand-ink); --muted:#6B6B6B;
  --border:#E8DFE3;
  /* Interactive orange is intentionally darker than the logo orange so
     white button text and orange links meet WCAG AA. */
  --accent:#B54718; --accent-80:#B54718cc; --accent-06:#B547180F; --accent-15:#B5471826;
  --brand-secondary:var(--brand-trust); --brand-secondary-80:#0E5C57cc; --brand-secondary-04:#0E5C570A; --brand-secondary-06:#0E5C570F; --brand-secondary-10:#0E5C571A; --brand-secondary-15:#0E5C5726;
  --success:var(--brand-trust); --warn:#EAB308; --danger:#DC2626;
  --shadow-card:0 1px 2px rgba(84,45,30,.05),0 8px 22px rgba(84,45,30,.08);
  --font:'Inter','Inter-fallback',-apple-system,system-ui,sans-serif;
  /* Single typeface site-wide: --mono aliases Inter (tabular-nums keeps
     numbers column-aligned without a second font). */
  --mono:'Inter','Inter-fallback',-apple-system,system-ui,sans-serif;
  --max:1200px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:14px;
  --motion-fast:.15s; --motion-base:.22s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
.prose p,.pdp-description-main p{text-wrap:pretty}
:where(.btn,.addcart,.buynow,.filter-toggle,.tabbar__btn):active{transform:translateY(1px)}
/* Shared image box used by non-card sections (hero, tiles, blog, PDP...). */
.ph{position:relative;background:#fff;display:grid;place-items:center;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== TOPBAR ===== */
.topbar{background:var(--fg);color:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.topbar a{color:#cfcfcf}
.topbar a:hover{color:#fff}
.topbar .links{display:flex;gap:18px}
@media(max-width:640px){.topbar .links{display:none}}

/* ===== HEADER ===== */
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.hdr{display:flex;align-items:center;gap:clamp(12px,3vw,32px);height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.02em;flex-shrink:0;color:var(--fg);text-decoration:none;line-height:1}
.logo .mark{width:34px;height:34px;border-radius:8px;background:var(--brand-primary);display:grid;place-items:center;color:#fff;font-size:18px}
/* Custom logo image (Appearance → Customize → Logo). Cap width, keep ratio. */
.logo img,.logo .custom-logo{display:block;max-width:150px;height:auto;width:auto;object-fit:contain}
.logo:hover{opacity:.85}
@media(max-width:560px){.logo{font-size:19px}.logo .mark{width:30px;height:30px;font-size:16px}.logo img,.logo .custom-logo{max-width:120px}}
/* The wordmark is 16 chars; trim it on very small phones so 4×44px tap
   targets + wordmark fit inside 360px without horizontal overflow. */
@media(max-width:400px){.logo{font-size:15px;letter-spacing:-.01em}.logo .mark{width:28px;height:28px;font-size:14px}}
/* Smallest phones (≤360px): the 4 actions + wordmark must share ~328px.
   Drop the wordmark to a single-line lockup that prioritises the actions. */
@media(max-width:360px){.logo{font-size:13px;letter-spacing:-.005em;gap:6px}.logo .mark{width:24px;height:24px;font-size:12px;border-radius:6px}.logo .wordmark{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}}
/* .hdr-search — NOT .search: WP adds body.search on search results and that
   would match a bare .search rule (display:flex) and collapse the whole layout. */
.hdr-search{flex:1;display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;min-width:0}
.hdr-search input{flex:1;border:0;padding:10px 14px;font:inherit;font-size:14px;min-width:0;outline:none}
.hdr-search input:focus{outline:none}
.hdr-search:focus-within{border-color:var(--accent)}
.hdr-search button{border:0;background:var(--accent);color:#fff;padding:0 18px;cursor:pointer;font-weight:600;font-size:14px}
.hdr-actions{display:flex;gap:18px;align-items:center;flex-shrink:0}
.ha{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);gap:2px;cursor:pointer;position:relative;border:0;background:transparent;font-family:inherit}
.ha svg{width:22px;height:22px;stroke:var(--fg);fill:none;stroke-width:1.6}
.ha:hover{color:var(--accent)}
.ha:hover svg{stroke:var(--accent)}
.ha:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ha .badge{position:absolute;top:-6px;right:2px;background:var(--accent);color:#fff;font-size:10px;
  min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
@media(max-width:860px){.ha span{display:none}.ha .badge{right:-10px}}
/* Apple HIG: minimum 44x44 tap target for every header action. Applied at
   the same breakpoint that hides labels so icon-only buttons stay tappable. */
@media(max-width:860px){.ha{min-width:44px;min-height:44px;justify-content:center;gap:0}}
/* Mobile search overlay (toggled by .mob-search-btn). Hidden by default; slides
   in from the top of the viewport when body has .mob-search-open. */
.hdr-search-overlay{display:none;position:fixed;top:0;left:0;right:0;z-index:90;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:14px 16px;transform:translateY(-100%);transition:transform .22s ease;
  box-shadow:0 8px 24px rgba(17,17,17,.08)}
body.mob-search-open .hdr-search-overlay{display:block;transform:translateY(0)}
body.mob-search-open{overflow:hidden}
.hdr-search-overlay form{display:flex;gap:8px;align-items:center;max-width:1280px;margin:0 auto}
.hdr-search-overlay input[type=search]{flex:1;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:15px;outline:none;min-width:0;font-family:inherit}
.hdr-search-overlay input[type=search]:focus{border-color:var(--accent)}
.hdr-search-overlay .ov-submit{background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:0 20px;height:44px;font-weight:600;font-size:14px;cursor:pointer;flex:none}
.hdr-search-close{width:44px;height:44px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);font-size:24px;color:var(--fg);display:grid;place-items:center;
  cursor:pointer;flex:none;line-height:1;padding:0}
.hdr-search-close:hover{color:var(--accent);border-color:var(--accent)}
@media(min-width:641px){.hdr-search-overlay{display:none!important}}
@media(max-width:640px){
  .hdr-search{display:none}
  .mob-search-btn{display:flex!important}
  .hdr-burger{display:flex!important}
  .hdr{gap:8px;justify-content:space-between}
  /* Tighten the actions cluster so 4×44px buttons + logo fit at 360px. */
  .hdr-actions{gap:4px;margin-left:auto}
  /* Keep the menu trigger as the right-most header action on mobile. */
  .hdr-actions .hdr-burger{order:99}
  /* Wishlist is reachable from the account menu; hide it on small screens to
     free horizontal space for the remaining 4×44px tap targets. */
  .ha.is-wishlist{display:none}
  /* On mobile, the nav becomes a fullscreen drawer toggled by the burger. */
  nav.cat{
    display:none;
    position:fixed;inset:0;z-index:80;background:var(--surface);
    overflow-y:auto;padding:64px 0 32px;
  }
  body.nav-open{overflow:hidden}
  body.nav-open nav.cat{display:block}
  nav.cat .wrap{padding:0 16px}
  /* Stack menu items vertically with a clear tap target. */
  .cat-list{flex-direction:column;gap:0;overflow:visible}
  .cat-list>li{width:100%;border-bottom:1px solid var(--border)}
  .cat-list>li:last-child{border-bottom:0}
  .cat-list>li>a{
    padding:18px 8px;font-size:16px;color:var(--fg);
    border-bottom:0;border-radius:8px;
  }
  .cat-list>li>a:hover{background:var(--bg);color:var(--accent)}
  .menu-icon{filter:none}
  /* Caret icon stays visible; mega stays hidden (was already hidden ≤1024px). */
  .cat-list>li .caret{width:18px;height:18px}
  /* The X close button only shows inside the open drawer. */
  .hdr-burger-close{
    display:flex;position:absolute;top:16px;right:16px;z-index:1;
    width:40px;height:40px;border:1px solid var(--border);border-radius:8px;
    background:var(--surface);align-items:center;justify-content:center;
    color:var(--fg);cursor:pointer;padding:0;
  }
  .hdr-burger-close svg{width:22px;height:22px;stroke:currentColor}
  .hdr-burger-close:hover{color:var(--accent);border-color:var(--accent)}
}

/* ===== MINI CART (hover / focus dropdown) ===== */
.cart-wrap{position:relative}
.cart-wrap .mini-cart{position:absolute;top:calc(100% + 12px);right:0;width:340px;max-width:88vw;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(17,17,17,.12);padding:14px;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.cart-wrap:hover .mini-cart,.cart-wrap:focus-within .mini-cart{opacity:1;visibility:visible;transform:none}
/* Bridge the gap so the panel doesn't close when moving the cursor to it. */
.cart-wrap .mini-cart::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
/* Empty state: centered message + a cart glyph above it. */
.mini-cart .woocommerce-mini-cart__empty-message{margin:0;color:var(--muted);font-size:14px;
  text-align:center;padding:28px 12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mini-cart .woocommerce-mini-cart__empty-message::before{content:"";width:40px;height:40px;
  background:var(--bg);border-radius:50%;display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='1.6'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13h11l2.6-9H6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:22px}
.mini-cart ul.cart_list{list-style:none;margin:0 0 8px;padding:0;max-height:320px;overflow-y:auto}

/* Woo mini-cart item DOM: <li> > a.remove + a(img + product name) + span.quantity.
   The image lives inside the product link, so make that link a flex row
   [image | name]; the <li> stacks link + quantity, remove pinned top-right. */
.mini-cart ul.cart_list li{position:relative;padding:12px 26px 12px 0;border-bottom:1px solid var(--border)}
.mini-cart ul.cart_list li:last-child{border-bottom:0}
.mini-cart ul.cart_list li a:not(.remove){display:flex;align-items:center;gap:12px;
  color:var(--fg);text-decoration:none;font-size:13px;font-weight:600;line-height:1.35}
.mini-cart ul.cart_list li img{width:52px;height:52px;object-fit:cover;border-radius:8px;
  background:#f2f2f2;flex-shrink:0;margin:0}
.mini-cart .quantity{display:block;margin-top:6px;padding-left:64px;color:var(--muted);font-size:12.5px;font-weight:500}
.mini-cart .quantity .amount{color:var(--fg);font-weight:600}

.mini-cart a.remove{position:absolute;top:10px;right:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--bg);color:var(--muted)!important;
  font-size:15px;line-height:1;text-decoration:none;transition:.15s}
.mini-cart a.remove:hover{background:var(--danger);color:#fff!important}

.mini-cart .woocommerce-mini-cart__total{display:flex;justify-content:space-between;align-items:center;
  font-size:14px;font-weight:700;margin:4px 0 12px;padding-top:12px;border-top:1px solid var(--border)}
.mini-cart .woocommerce-mini-cart__total .amount{color:var(--accent)}
.mini-cart .woocommerce-mini-cart__buttons{display:flex;gap:8px;margin:0}
.mini-cart .woocommerce-mini-cart__buttons .button{flex:1;text-align:center;border-radius:8px;padding:10px;
  font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--accent);color:var(--accent);background:transparent;transition:.15s}
.mini-cart .woocommerce-mini-cart__buttons .button:hover{background:var(--accent);color:#fff}
.mini-cart .woocommerce-mini-cart__buttons .checkout{background:var(--accent);color:#fff}
.mini-cart .woocommerce-mini-cart__buttons .checkout:hover{filter:brightness(.92)}
.mob-search-btn{display:none}

/* Mobile burger menu — hidden on desktop. */
.hdr-burger{display:none}
.hdr-burger-close{display:none}

/* ===== NAV / MEGA MENU ===== */
nav.cat{background:var(--brand-secondary);border-bottom:1px solid var(--brand-secondary);position:relative;z-index:30}
.cat-list{display:flex;gap:4px;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-list::-webkit-scrollbar{display:none}
.cat-list>li{position:static}
.cat-list>li>a{display:flex;align-items:center;gap:6px;padding:13px 16px;font-size:14px;font-weight:600;color:rgba(255,255,255,.92);white-space:nowrap;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
.menu-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1)}
.cat-list>li:hover>a,.cat-list>li.open>a{color:#fff;border-bottom-color:var(--accent)}
.cat-list>li.current-menu-item>a,.cat-list>li.current-menu-ancestor>a{color:#fff;border-bottom-color:var(--accent)}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 8px 24px rgba(17,17,17,.08);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.15s;padding:28px 0}
.cat-list>li:hover .mega,.cat-list>li.open .mega{opacity:1;visibility:visible;transform:none}
/* Columns auto-fit to however many top-level submenu groups exist. */
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px}
.mega h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:12px}
.mega h4 a{color:inherit;text-decoration:none}
.mega h4 a:hover{color:var(--accent)}
.mega ul,.mega-links{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.mega li a{font-size:14px;color:var(--fg);text-decoration:none}
.mega li a:hover{color:var(--accent)}
/* Top item with a mega panel: caret + hover intent. */
.cat-list>li.has-mega{position:static}
.cat-list>li .caret{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .2s;flex-shrink:0}
.cat-list>li.has-mega:hover .caret,.cat-list>li.open .caret{transform:rotate(180deg);opacity:1}
.mega-promo{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.mega-promo .ph{height:120px;border:0;border-radius:0}
.mega-promo .txt{padding:14px}
.mega-promo .txt b{font-size:14px}
.mega-promo .txt p{font-size:12px;color:var(--muted);margin-top:4px}
@media(max-width:1024px){.mega{display:none}}

/* ===== HERO ===== */
.hero{padding:24px 0}
.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:stretch}
/* Slider height follows the side column (two banners + gap), not a fixed ratio. */
.slider{position:relative;border-radius:14px;overflow:hidden;background:var(--fg);min-height:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:grid}
.slide.on{opacity:1}
.slide .ph{border-radius:0;border:0;height:100%}
/* Slide image fills the slider box (cover, no distortion). */
.slide-img,.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide .cap{position:absolute;left:0;bottom:0;padding:clamp(20px,4vw,40px);max-width:60%;
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent);color:#fff}
.slide .cap .kick{font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.slide .cap h1,.slide .cap h2{font-size:clamp(22px,3vw,40px);font-weight:700;letter-spacing:-.02em;margin:6px 0 12px;line-height:1.15}
.slide .cap .btn{display:inline-block;background:#fff;color:var(--accent);padding:10px 22px;border-radius:8px;font-weight:600;font-size:14px;border:1.5px solid var(--accent)}
.slide .cap .btn:hover{background:var(--accent);color:#fff}
.slider-controls{position:absolute;right:16px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px}
.dots{display:flex;align-items:center;gap:8px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.2s}
.dots button.on{background:#fff;width:24px;border-radius:5px}
.slider-toggle{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(20,20,20,.38);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.slider-toggle:hover{background:rgba(20,20,20,.62)}
.slider-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.slider-toggle .icon-play{display:none}
.slider-toggle[aria-pressed="true"] .icon-pause{display:none}
.slider-toggle[aria-pressed="true"] .icon-play{display:block}
/* Side banners define the hero height: each is a fixed 4:3, so two of them
   plus the gap set the column height — the slider then stretches to match. */
.hero-side{display:grid;grid-template-columns:1fr;gap:16px}
/* Card height follows the image's real ratio — no crop, no stretch. */
.hero-side .card{position:relative;border-radius:14px;overflow:hidden;display:block;background:#f2f2f2}
/* Side banner image fills the card without stretching (cover + centered). */
.hero-side .card img{width:100%;height:100%;display:block;object-fit:cover}
.hero-side .ph{height:100%;border-radius:0;border:0}
.hero-side .lbl{position:absolute;top:14px;left:14px;background:var(--surface);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;z-index:2}
/* Stacked below the slider → cards need their own ratio (no slider to match).
   The slider also needs an explicit ratio here (≤900px), because once it stops
   sitting beside the side column it has no intrinsic height — the slide is
   position:absolute, so without aspect-ratio the slider collapses to 0px on
   tablet portrait (768–900px) where the side column is still visible.
   Side cards: 4:3 matches the natural ratio of the uploaded side banners
   (1280×960 / 1280×958), so no crop — just letterbox-free fit. */
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:18px}.hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:12px}.hero-side .card{aspect-ratio:4/3}.slider{aspect-ratio:16/9;height:auto}}
/* Phones: cap full-width, slide text full-bleed, side stays 2-col but tighter. */
@media(max-width:560px){.slide .cap{max-width:100%}.hero-side{gap:10px}}
/* Tiny phones: stack side banners 1-col so each gets full width + impact. */
@media(max-width:380px){.hero-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* ===== FEATURE STRIP ===== */
.strip{border-block:1px solid var(--border);background:var(--surface)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip .item{display:flex;align-items:center;gap:12px;padding:18px 16px;border-left:1px solid var(--border)}
.strip .item:first-child{border-left:0}
.strip svg{width:26px;height:26px;stroke:var(--brand-secondary);fill:none;stroke-width:1.5;flex-shrink:0}
.strip b{font-size:13px;display:block;color:var(--brand-secondary)}
.strip small{font-size:12px;color:var(--muted)}
@media(max-width:760px){.strip .wrap{grid-template-columns:1fr 1fr}.strip .item:nth-child(odd){border-left:0}.strip .item:nth-child(n+3){border-top:1px solid var(--border)}}

/* ===== CATEGORY TILES ===== */
section{padding:clamp(36px,6vw,56px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:16px}
.sec-head h2{font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.01em}
.sec-head a{font-size:14px;color:var(--accent);font-weight:600}
.sec-head a::after{content:" \2192"}
.sec-head a:hover{text-decoration:underline}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);transition:.15s;color:inherit;text-decoration:none}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile .ph{height:150px;border-radius:0;border:0}
.tile img{width:100%;height:150px;object-fit:cover;display:block;background:#f2f2f2}
.tile .t{padding:14px}
.tile .t b{font-size:15px}
.tile .t p{font-size:12px;color:var(--muted);margin-top:3px}
@media(max-width:880px){.tiles{grid-template-columns:1fr 1fr}}

/* ----- Category slider (home: "Danh mục nổi bật") ----- */
.cat-slider{position:relative;padding:0 40px}
.cat-slider__track.tiles{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:4px 2px 12px;
  -webkit-overflow-scrolling:touch
}
.cat-slider__track.tiles::-webkit-scrollbar{display:none}
.cat-slider__track .tile{
  flex:0 0 220px;
  scroll-snap-align:start
}
.cat-slider__nav{
  position:absolute;
  top:90px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--fg);
  transition:opacity .15s,transform .15s,box-shadow .15s;
  z-index:2
}
.cat-slider__nav svg{width:18px;height:18px}
.cat-slider__nav:hover{box-shadow:0 4px 12px rgba(0,0,0,.12);transform:translateY(-50%)}
.cat-slider__nav--prev{left:0;transform:translateY(-50%)}
.cat-slider__nav--next{right:0;transform:translateY(-50%)}
.cat-slider__nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:640px){
  .cat-slider{padding:0}
  .cat-slider__nav{display:none}
  .cat-slider__track .tile{flex:0 0 160px}
  .cat-slider__track .tile img{height:120px}
  .cat-slider__track .tile .t{padding:10px}
  .cat-slider__track .tile .t b{font-size:14px}
}

/* ===== PRODUCT LAYOUT: FILTER + GRID ===== */
/* woocommerce_content() skips before/after_main_content so .woo-content never
   wraps shop/search — give .shop-wrap its own bottom gap from the footer. */
.shop-wrap{padding-bottom:clamp(40px,6vw,64px)}
.shop{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.filters{border:1px solid var(--border);border-radius:12px;background:var(--surface);position:sticky;top:120px}
.fgroup{padding:20px 18px;border-bottom:1px solid var(--border)}
.fgroup:last-child{border-bottom:0}
.fgroup h5{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:2px 0 18px}
.fopt{display:flex;align-items:center;gap:9px;font-size:14px;padding:5px 0;cursor:pointer;color:var(--fg);text-decoration:none}
.fopt input{accent-color:var(--accent);width:16px;height:16px}
.fopt .ct{margin-left:auto;font-size:12px;color:var(--muted)}
/* Fake checkbox for the <a>-based category filters (FilterHook). */
.fopt .fopt-box{width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;flex-shrink:0;position:relative;transition:.15s}
.fopt:hover .fopt-box{border-color:var(--accent)}
.fopt.on{color:var(--fg);font-weight:600}
.fopt.on .fopt-box{background:var(--accent);border-color:var(--accent)}
.fopt.on .fopt-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.price-row{display:flex;gap:8px;align-items:center}
.price-row input{flex:1;border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit;font-size:13px;min-width:0}
.woocommerce .fgroup-price .filter-apply{margin-top:1rem;width:100%;border:0;background:var(--accent);color:#fff;border-radius:8px;padding:8px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:.15s}
.woocommerce .fgroup-price .filter-apply:hover{filter:brightness(.92)}
.filter-reset{display:inline-block;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}
.filter-reset:hover{text-decoration:underline}
.filter-toggle{display:none}
@media(max-width:860px){
  .shop{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;display:none;min-width:0;max-width:100%}
  .filters.open{display:block;max-height:min(70vh,620px);overflow:auto;overscroll-behavior:contain;box-shadow:var(--shadow-card);scrollbar-color:var(--accent) var(--border)}
  .filter-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);
    padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;margin-bottom:16px;font-family:inherit}
}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:400px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
#productGrid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1200px){#productGrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){#productGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){#productGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){#productGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid.list{grid-template-columns:1fr;gap:12px}
.grid.list .pcard{flex-direction:row}
.grid.list .pcard .imgwrap{width:200px;flex-shrink:0}
.grid.list .pcard .body{justify-content:center}
.grid.list .pcard .name{-webkit-line-clamp:1;min-height:0}
@media(max-width:560px){.grid.list .pcard{flex-direction:column}.grid.list .pcard .imgwrap{width:auto}}

.pcard{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .2s,transform .2s;position:relative}
.pcard:hover{border-color:var(--accent);box-shadow:var(--shadow-card)}
@media(hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-2px)}}
/* Image box: 1:1 (no CLS). Image sits directly inside (no .ph wrapper).
   cover fills the box edge-to-edge (crops overflow) for a clean, borderless card. */
.pcard .imgwrap{position:relative;aspect-ratio:1/1;background:#fff;display:block;overflow:hidden;color:inherit;text-decoration:none}
.pcard .imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(8px,1vw,14px);
  transition:transform .4s ease;z-index:2;animation:pxc-fade .4s ease both}
@keyframes pxc-fade{from{opacity:0}to{opacity:1}}
/* Badge + wishlist above the image. */
.pcard .badges,.pcard .wish{z-index:4}
/* Subtle zoom on hover. */
.pcard:hover .imgwrap img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){
  .pcard .imgwrap img{animation:none;transition:none}
  .pcard:hover .imgwrap img{transform:none}
}
.badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.bd{font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;color:#fff}
.bd.sale{background:var(--accent)}
.bd.new{background:var(--brand-secondary)}
.bd.hot{background:var(--warn);color:var(--fg)}
.wish{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;z-index:2}
.wish svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.6;transition:.15s}
.wish:hover svg{stroke:var(--accent)}
.wish.on svg{stroke:var(--accent);fill:var(--accent)}
.wish[aria-busy="true"]{cursor:wait;opacity:.65}
.pcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1;gap:4px}
/* Brand is a sub-label of the name → sit it tight above, not evenly spaced. */
.pcard .brand{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;line-height:1;margin-bottom:2px}
.pcard .name{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.pcard .spec{font-size:12px;color:var(--muted);line-height:1.3}
.price{margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price{font-variant-numeric:tabular-nums}
.price .now{font-size:15px;font-weight:700;color:var(--accent)}
.price .old{font-size:12px;color:var(--muted);text-decoration:line-through}
/* Add-to-cart button (Woo outputs <a> in the loop → style both a/button). */
.woocommerce .pcard .addcart{margin-top:8px;display:block;width:100%;text-align:center;border:1px solid var(--accent);
  color:var(--accent);background:transparent;border-radius:8px;padding:9px;font:inherit;font-weight:600;
  font-size:13px;line-height:1.2;text-decoration:none;cursor:pointer;transition:.15s}
.woocommerce .pcard .addcart:hover{background:var(--accent);color:#fff}
/* Woo toggles .added + .loading during AJAX; reflect both. */
.woocommerce .pcard .addcart.added{background:var(--success);border-color:var(--success);color:#fff}
.woocommerce .pcard .addcart.loading{opacity:.6;pointer-events:none}
/* Woo appends a "View cart" link after an AJAX add — hide it in cards. */
.pcard .added_to_cart{display:none}

/* ===== BRANDS ===== */
.brands{background:var(--surface);border-block:1px solid var(--border)}
.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand-grid .b{border:1px solid var(--border);border-radius:10px;height:72px;display:grid;place-items:center;
  font-weight:700;font-size:16px;color:var(--muted);transition:.15s;letter-spacing:-.01em}
.brand-grid .b:hover{border-color:var(--accent);color:var(--fg)}
@media(max-width:880px){.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.brand-grid{grid-template-columns:1fr 1fr}}

/* ===== BANNER CTA ===== */
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-80));border-radius:16px;color:#fff;
  padding:clamp(28px,5vw,48px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.01em}
.cta p{opacity:.9;margin-top:8px;max-width:480px}
.cta .btn{background:#fff;color:var(--accent);padding:12px 26px;border-radius:8px;font-weight:700;white-space:nowrap}
.cta .btn:hover{opacity:.9}

/* ===== FOOTER ===== */
footer{background:var(--fg);color:#cfcfcf;padding:48px 0 24px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:32px;margin-bottom:32px}
footer .foot-heading{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.02em}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer a:hover{color:#fff}
.foot-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:#fff;margin-bottom:14px}
.foot-logo .mark{width:32px;height:32px;border-radius:8px;background:var(--accent);display:grid;place-items:center;font-size:16px}
/* Brand text-logo (used directly in section-brand.php) */
.foot-logo-text{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:700;text-decoration:none;margin-bottom:14px}
.foot-logo-text .mark{width:32px;height:32px;border-radius:8px;background:var(--accent);display:grid;place-items:center;font-size:16px;line-height:1;color:#fff}
.foot-logo-text:hover{color:var(--accent)}
.foot-desc{max-width:360px;color:#9a9a9a;line-height:1.6;margin-bottom:14px}
/* Business info (MST/issued/rep) shown under the description in the brand column */
.foot-biz-brand{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.5}
.foot-biz-brand li{display:flex;gap:8px;align-items:baseline}
.foot-biz-brand .k{flex:0 0 64px;color:#9a9a9a;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.foot-biz-brand .v{color:#cfcfcf;flex:1;min-width:0}
.foot-biz-brand .by{color:#888}

/* Footer — social icons (Brand column) */
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;flex-direction:row}
.foot-social-link{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#262626;color:#cfcfcf;transition:.15s;text-decoration:none}
.foot-social-link svg{width:18px;height:18px;display:block}
.foot-social-link:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}

/* Footer — lists (Products, Support) */
.foot-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-list a{color:#cfcfcf;text-decoration:none;transition:.15s}
.foot-list a:hover{color:var(--accent)}

/* Footer — contact (Contact column) */
.foot-contact{gap:10px;margin-bottom:18px}
.foot-contact li{display:flex;align-items:flex-start;gap:10px;color:#cfcfcf;line-height:1.5}
.foot-contact .k{flex-shrink:0;width:18px;height:20px;display:grid;place-items:center;color:#bdbdbd}
.foot-contact .k svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot-contact .v a{color:#cfcfcf;text-decoration:none}
.foot-contact .v a:hover{color:#fff;text-decoration:underline}

/* Footer — payment methods */
.foot-payments-label{font-family:var(--mono);font-size:11px;color:#888;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.foot-payment-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
/* Icon payment: small white card with image */
.foot-payment.has-icon{display:flex;align-items:center;justify-content:center;width:48px;height:30px;background:#fff;border-radius:6px;padding:3px;text-decoration:none;transition:.15s;overflow:hidden;flex:0 0 auto}
.foot-payment.has-icon img{width:100%;height:100%;object-fit:contain;display:block}
.foot-payment.has-icon:hover{background:#f0f0f0;transform:translateY(-1px)}
/* Text payment: subtle dark chip, no icon */
.foot-payment.is-text{display:inline-block;font-size:12px;color:#cfcfcf;background:#262626;border:1px solid #333;border-radius:6px;padding:5px 10px;text-decoration:none;line-height:1.2}
.foot-payment.is-text:hover{color:#fff;border-color:var(--accent)}

/* Footer — bottom bar (copyright + business info) */
.foot-bottom{border-top:1px solid #333;padding-top:18px;margin-top:8px;font-size:13px;color:#888}
.foot-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-copy{color:#9a9a9a}
.foot-biz{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0;color:#888}
.foot-biz li{font-size:12.5px}
.foot-biz .k{color:#666;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.foot-biz .v{color:#9a9a9a}

@media(max-width:760px){
    .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
    .foot-bottom-inner{flex-direction:column;align-items:flex-start;gap:12px}
    .foot-biz{flex-direction:column;gap:4px}
}
@media(max-width:440px){
    .foot-grid{grid-template-columns:1fr;gap:28px}
    .foot-col--brand{order:1}
    .foot-col--contact{order:2}
    .foot-col--products{order:3}
    .foot-col--support{order:4}
}

/* ===== TOAST ===== */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--fg);color:#fff;
  padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== BREADCRUMB ===== */
.crumb{font-size:13px;color:var(--muted);padding:14px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--accent);font-weight:500}.crumb a:hover{color:var(--accent-80);text-decoration:underline}
.crumb .sep{color:var(--border)}
.crumb .cur{color:var(--accent);font-weight:600}

/* ===== PAGE HEAD ===== */
.page-head{padding-block:8px 24px}
.page-head h1{font-size:clamp(24px,3.5vw,34px);font-weight:700;letter-spacing:-.02em}
.page-head .meta{color:var(--muted);font-size:14px;margin-top:6px}
/* Category / tag description: rendered full, no collapse. */
.page-head .meta--full{max-height:none;overflow:visible;margin-top:6px}
.page-head .meta--full p:last-child{margin-bottom:0}
.page-head .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font-size:13px;border:1px solid var(--border);background:var(--surface);padding:6px 12px;border-radius:99px;
  cursor:pointer;color:var(--fg);font-family:inherit;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--fg);color:#fff;border-color:var(--fg)}
/* Active-filter chips above the shop grid. */
.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.active-filters .af-label{font-size:13px;color:var(--muted);font-weight:600}
.af-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  border:1px solid var(--accent);color:var(--accent);background:transparent;padding:5px 10px;
  border-radius:99px;text-decoration:none;transition:.15s}
.af-chip:hover{background:var(--accent);color:#fff}
.af-chip .af-x{font-size:15px;line-height:1;opacity:.8}
.af-clear{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;margin-left:2px}
.af-clear:hover{text-decoration:underline}

/* ===== SORT BAR ===== */
.sortbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);margin-bottom:16px;font-size:14px}
.sortbar .res{color:var(--muted)}.sortbar .res b{color:var(--fg)}
.sortbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Sort select + view toggle: equal height in the sortbar. */
.sortbar .woocommerce-ordering{margin:0}
.sortbar select,.sortbar .woocommerce-ordering select,.sortbar .orderby{height:38px;border:1px solid var(--border);border-radius:8px;padding:0 12px;font:inherit;font-size:13px;background:var(--surface);cursor:pointer;line-height:normal;box-sizing:border-box}
.view-toggle{display:flex;height:38px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.view-toggle button{border:0;background:var(--surface);padding:0 10px;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.view-toggle button.on{background:var(--fg);color:#fff}
.view-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ===== PAGINATION ===== */
.pager{display:flex;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
/* Load-more: shown only when JS enhances the shop; the numeric pager then hides
   (still in DOM for no-JS + crawlers). */
.loadmore-wrap{display:none;justify-content:center;margin-top:28px}
.shop.js-loadmore .loadmore-wrap{display:flex}
.shop.js-loadmore .pager{display:none}
.woocommerce .loadmore.button{border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:10px;
  padding:12px 28px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:.15s;
  display:inline-flex;align-items:center;gap:8px}
.woocommerce .loadmore.button:hover{background:var(--accent);color:#fff}
.woocommerce .loadmore.button:disabled{opacity:.6;cursor:default}
.woocommerce .loadmore.button.is-loading::before{content:"";width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:pxc-spin .7s linear infinite}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);
  border-radius:8px;font-size:14px;font-weight:600;color:var(--fg);background:var(--surface);padding:0 12px;transition:.15s}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager .cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .gap{border:0;background:transparent;color:var(--muted)}

/* ===== BLOG GRID ===== */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
@media(max-width:980px){.blog-layout{grid-template-columns:minmax(0,1fr)}}

.featured{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);overflow:hidden;margin-bottom:32px;align-items:stretch;transition:.15s}
.featured > *{min-width:0}  /* allow grid children to shrink below content (img) */
.featured:hover{border-color:var(--accent)}
.featured__media{display:block;aspect-ratio:16/9;background:#f2f2f2;overflow:hidden;position:relative;width:100%}
.featured__media img{width:100%;height:100%;max-width:100%;object-fit:cover;display:block;transition:transform .4s ease}
.featured:hover .featured__media img{transform:scale(1.04)}
.featured__media--empty{display:flex;align-items:center;justify-content:center;color:#bdbdbd}
.featured__placeholder-icon{width:64px;height:64px}
.featured .ph{aspect-ratio:16/9;border:0;border-radius:0;min-height:100%}
.featured .body{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.featured .cat-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);background:var(--accent-06);padding:4px 10px;border-radius:6px;align-self:flex-start}
.featured h2{font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.featured h2 a:hover{color:var(--accent)}
.featured p{color:var(--muted);font-size:14.5px;line-height:1.6}
.featured .meta{display:flex;gap:14px;color:var(--muted);font-size:13px;margin-top:4px;flex-wrap:wrap}
@media(max-width:720px){.featured{grid-template-columns:minmax(0,1fr)}.featured .ph{min-height:0}}

.blog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:640px){.blog-grid{grid-template-columns:minmax(0,1fr)}}
/* Author posts page has no sidebar, so the default 2-col cards render
   too wide (~590px). Bump to 3-col on desktop for tighter, more balanced
   cards (~380px). Scoped to `.author-posts` so the main /tin-tuc/ grid
   (which shares the `.blog-grid` class) keeps its 2-col layout. */
@media(min-width:1025px){
  .author-posts .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.bcard{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;display:flex;
  flex-direction:column;transition:.15s}
.bcard:hover{border-color:var(--accent)}
.bcard__media{display:block;aspect-ratio:16/9;overflow:hidden;background:#f2f2f2;position:relative}
.bcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bcard:hover .bcard__media img{transform:scale(1.04)}
.bcard__media--empty{display:flex;align-items:center;justify-content:center;color:#bdbdbd}
.bcard__placeholder-icon{width:42px;height:42px}
.bcard .ph{aspect-ratio:16/9;border:0;border-radius:0}
.bcard .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard .cat-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);align-self:flex-start}
.bcard h3{font-size:16px;font-weight:600;line-height:1.35}
.bcard h3 a:hover{color:var(--accent)}
.bcard p{color:var(--muted);font-size:13.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard .meta{display:flex;gap:12px;color:var(--muted);font-size:12.5px;margin-top:auto;padding-top:4px}

/* ===== BLOG SIDEBAR ===== */
.bside{display:flex;flex-direction:column;gap:24px;position:sticky;top:120px}
.bside .block{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:20px}
.bside h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:14px}
.bside .pop{display:flex;flex-direction:column;gap:14px}
.bside .pop-item{display:flex;gap:12px;align-items:flex-start}
.bside .pop-item .ph{width:64px;height:64px;flex-shrink:0;border-radius:8px}
.bside .pop-item b{font-size:13.5px;font-weight:600;line-height:1.35;display:block}
.bside .pop-item b:hover{color:var(--accent)}
.bside .pop-item small{color:var(--muted);font-size:12px;margin-top:4px;display:block}
.bside .pop-item .num{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--border);min-width:24px;line-height:1}
.tags-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tags-cloud a{font-size:12.5px;background:var(--bg);border:1px solid var(--border);padding:5px 10px;border-radius:6px;color:var(--muted);transition:.15s}
.tags-cloud a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:980px){.bside{position:static}}

/* ===== ARTICLE / BLOG POST ===== */
.post-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 240px;gap:64px;align-items:start}
@media(max-width:1100px){.post-layout{grid-template-columns:minmax(0,1fr) 240px}.post-layout .post-share{display:none}}
@media(max-width:860px){.post-layout{grid-template-columns:1fr}.post-toc{display:none}}

/* No-TOC: article expands to fill the slot where TOC would be. */
.post-layout.no-toc{grid-template-columns:220px minmax(0,1fr)}
@media(max-width:1100px){.post-layout.no-toc{grid-template-columns:minmax(0,1fr)}}

.post-hero{padding:8px 0 24px}
.post-cat{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);background:var(--brand-secondary-15);padding:5px 12px;border-radius:6px;margin-bottom:14px}
.post-hero h1{font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.post-hero .sub{color:var(--muted);font-size:clamp(15px,1.5vw,18px);margin-top:14px;max-width:60ch;line-height:1.55}
.post-meta{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap}
.post-author{display:flex;align-items:center;gap:10px}
.post-author .av{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.post-author b{font-size:14px;display:block}.post-author small{color:var(--muted);font-size:12.5px}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border)}
.post-meta .item{color:var(--muted);font-size:13.5px;display:flex;gap:6px;align-items:center}
.post-cover{aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin:24px 0 36px}
.post-cover .ph{height:100%;border:0;border-radius:0}

.post-share{position:sticky;top:120px;display:flex;flex-direction:column;gap:10px}
.post-share h5{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.share-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);cursor:pointer;font:inherit;font-size:13.5px;color:var(--fg);transition:.15s;text-decoration:none}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Mobile share bar (hidden on desktop). */
.post-share-mobile{display:none}
@media(max-width:860px){
  .post-share-mobile{
    display:flex;gap:8px;margin-bottom:24px;padding:12px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    position:sticky;top:64px;z-index:5;
  }
  .post-share-mobile .share-btn--icon{
    flex:1;justify-content:center;padding:8px 6px;font-size:12px;font-weight:600;
  }
}

.post-toc{position:sticky;top:120px;border:1px solid var(--border);border-radius:12px;padding:18px 20px;background:var(--surface)}
.post-toc h5{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.post-toc ol{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:toc}
.post-toc li{font-size:13.5px;line-height:1.4;counter-increment:toc}
.post-toc li::before{content:counter(toc, decimal-leading-zero) ".";font-family:var(--mono);font-size:11px;color:var(--muted);margin-right:8px}
.post-toc a{color:var(--fg);transition:.15s}
.post-toc a:hover,.post-toc a.active{color:var(--accent)}

/* prose */
.prose{font-size:16.5px;line-height:1.75;color:var(--fg);max-width:68ch}
/* Cart / checkout render inside .prose (page.php) but need the full width for
   their 2-column layout — drop the reading-column cap when they're present. */
.prose:has(.cart-layout),.prose:has(.co-layout),.prose:has(.woocommerce){max-width:none}
/* Default WP pages (privacy, warranty, terms) — `.prose` wraps the body. Drop
   the 68ch reading cap so the policy content fills the 1200px container. */
body.newsdtpage .prose{max-width:none}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.01em;margin-top:1.8em;line-height:1.25;scroll-margin-top:120px}
.prose h3{font-size:clamp(18px,2vw,22px);font-weight:700;margin-top:1.5em;line-height:1.3;scroll-margin-top:120px}
.prose p{color:#2a2a2a}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{font-weight:700;color:var(--fg)}
.prose ul,.prose ol{padding-left:1.4em;display:flex;flex-direction:column;gap:.4em}
.prose li::marker{color:var(--accent)}
.prose blockquote{border-left:3px solid var(--accent);padding:8px 0 8px 22px;font-style:italic;color:#333;font-size:18px;line-height:1.6}
.prose blockquote cite{display:block;margin-top:10px;font-size:13px;color:var(--muted);font-style:normal}
.prose figure{margin:1.6em 0}
.prose figure .ph{aspect-ratio:16/9;border-radius:10px;border:0}
.prose figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--bg);border:1px solid var(--border);padding:2px 6px;border-radius:5px}
.prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}

/* callout */
.callout{border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--surface);
  border-radius:10px;padding:18px 20px;display:flex;gap:14px}
.callout .ico{width:32px;height:32px;border-radius:8px;background:var(--brand-secondary-10);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0;font-weight:700}
.callout b{display:block;margin-bottom:4px;font-size:14px}
.callout p{font-size:14.5px;color:var(--muted);margin:0}

/* post footer / tags */
.post-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;border-block:1px solid var(--border);margin:32px 0 0}
.post-tags{display:flex;gap:8px;flex-wrap:wrap}
.post-tags a{font-size:13px;background:var(--bg);border:1px solid var(--border);padding:6px 12px;border-radius:6px;color:var(--muted);transition:.15s}
.post-tags a:hover{border-color:var(--accent);color:var(--accent)}
.post-react{display:flex;gap:8px}
.post-react button{display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);
  padding:7px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;color:var(--fg)}
.post-react button:hover{border-color:var(--accent);color:var(--accent)}

/* author bio */
.author-bio{display:flex;gap:18px;align-items:flex-start;margin-top:32px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.author-bio .av{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:22px;flex-shrink:0}
.author-bio b{display:block;font-size:15.5px;margin-bottom:2px}
.author-bio small{color:var(--muted);font-size:13px}
.author-bio p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.6}

/* === POST HEAD (sforum-style single post hero) ===============
   Mobile : image edge-to-edge, darkened filter, red category tag +
            title overlaid on the image, white card overlapping the
            image bottom with author + "Ngày cập nhật" row.
   Desktop: image normal, white card below with H1 + author row. */
.post-head{margin-block:8px 0;position:relative}
.post-head .post-cover{position:relative;aspect-ratio:16/9;overflow:hidden;
  margin:0;border-radius:14px;background:#f2f2f2}
.post-head .post-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* Mobile overlay: hidden on desktop, shown on mobile */
.post-cover__overlay{display:none}

/* Brand sforum-style category tag */
.post-tag{display:inline-block;background:var(--accent);color:#fff;font-size:14px;
  font-weight:600;padding:5px 8px;border-radius:5px;text-decoration:none;
  line-height:1.2;letter-spacing:.01em}
.post-tag:hover,.post-tag:focus-visible{background:var(--accent-80);color:#fff}

/* White card overlapping the image (desktop) */
.post-card{background:var(--surface);border-radius:14px;padding:18px 20px;
  margin:-30px 16px 0;position:relative;z-index:2;box-shadow:0 -1px 0 rgba(0,0,0,.04)}
.post-card__head .post-tag--inline{margin-bottom:12px}
.post-card__title{font-size:clamp(26px,3.4vw,40px);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 12px}
.post-card__sub{color:var(--muted);font-size:clamp(15px,1.5vw,18px);
  margin:0 0 16px;max-width:60ch;line-height:1.55}

/* Author row inside the card (overrides the older .post-author defaults) */
.post-head .post-author{display:flex;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--border);margin:0}
.post-author__av{display:inline-flex;width:42px;height:42px;border-radius:50%;
  background:#fff;flex-shrink:0;align-items:center;justify-content:center;
  border:0;padding:0;overflow:hidden}
.post-author__img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:50%;background:#f2f2f2}
.post-author__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.post-author__name{font-size:14px;font-weight:600;display:block;color:var(--fg);
  line-height:1.2;text-decoration:none;transition:color .15s}
.post-author__name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-author__date{color:#656565;font-size:12px;font-weight:300;
  display:inline-flex;align-items:center;gap:4px;line-height:1.3}
.post-author__date svg{color:var(--brand-secondary);flex-shrink:0}

/* Tighter overlap on wider screens */
@media(min-width:1000px){
  .post-card{margin-top:-80px}
}

/* === MOBILE === */
@media(max-width:600px){
  .post-head{margin-block:0}
  /* Image breaks out of the .wrap gutter to become edge-to-edge */
  .post-head .post-cover{aspect-ratio:16/9;border-radius:0;
    margin:0 calc(-1 * clamp(16px,4vw,24px));
    width:calc(100% + clamp(16px,4vw,24px) * 2)}
  .post-head .post-cover img{filter:brightness(.5)}

  /* Overlay: red tag (top) + title (bottom) on the darkened image */
  .post-cover__overlay{
    display:block;
    position:absolute;left:0;right:0;bottom:18px;
    padding:0 12px;
  }
  .post-cover__title{
    color:#fff;font-size:18px;font-weight:700;line-height:1.3;margin:10px 0 0;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }

  /* White card overlapping the image */
  .post-head .post-card{
    margin:-20px 8px 0;
    border-radius:10px;
    padding:14px 14px 16px;
  }
  /* Hide desktop-only bits on mobile */
  .post-card__head .post-tag--inline{display:none}
  .post-card__title{display:none}
  .post-card__sub{display:none}

  /* Author row mobile — red ring avatar + red author + gray date.
     No top padding here (card's own padding handles top spacing from cover),
     only bottom padding so the row reads as a unit. */
  .post-head .post-author{padding:0 0 4px;border-top:0}
  .post-author__av{width:35px;height:35px;border:1px solid var(--accent);padding:2px;background:#fff}
  .post-author__img{border-radius:50%}
  .post-author__name{color:var(--accent);font-size:14px;font-weight:600}
  .post-author__date{color:#656565;font-size:10px;font-weight:300}
  .post-author__date svg{width:11px;height:11px}
}

/* related */
.related{margin-top:48px}
.related h3{font-size:20px;font-weight:700;margin-bottom:18px;letter-spacing:-.01em}
/* Cross-sells below the cart (full width, only shown when products have them). */
.cross-sells-section{margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
.cross-sells-section .cross-sells>h2,.cross-sells-section>.wrap>.cross-sells h2{font-size:22px;font-weight:700;margin-bottom:20px;letter-spacing:-.01em}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:780px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.related-grid{grid-template-columns:minmax(0,1fr)}}

/* comments */
.comments{margin-top:48px}
.comments h3{font-size:20px;font-weight:700;margin-bottom:20px;letter-spacing:-.01em}
.cm-form{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:18px;margin-bottom:24px}
.cm-form textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:12px;font:inherit;font-size:14px;resize:vertical;min-height:90px;outline:none}
.cm-form textarea:focus{border-color:var(--accent)}
.cm-form .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px;flex-wrap:wrap}
.cm-form small{color:var(--muted);font-size:12.5px}
.cm-form button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 22px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.cm-form button:hover{filter:brightness(1.08)}
.cm-list{display:flex;flex-direction:column;gap:20px}
.cm{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cm:last-child{border-bottom:0}
.cm .av{width:38px;height:38px;border-radius:50%;background:var(--border);color:var(--fg);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.cm-body b{font-size:14px}.cm-body .time{color:var(--muted);font-size:12.5px;margin-left:8px}
.cm-body p{font-size:14px;color:#333;margin-top:4px;line-height:1.55}
.cm-body .act{margin-top:8px;display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.cm-body .act a{color:var(--muted)}.cm-body .act a:hover{color:var(--accent)}

/* ===== PRODUCT DETAIL (PDP) ===== */
.pdp-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:900px){.pdp-layout{grid-template-columns:minmax(0,1fr);gap:28px}}

/* Gallery */
.pdp-gallery{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;position:sticky;top:120px}
@media(max-width:900px){.pdp-gallery{position:static;grid-template-columns:minmax(0,1fr);gap:10px}}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px;order:0}
@media(max-width:900px){.pdp-thumbs{flex-direction:row;order:2;overflow-x:auto;padding-bottom:4px}}
.pdp-thumb{width:72px;height:72px;border:1.5px solid var(--border);border-radius:8px;background:transparent;padding:0;cursor:pointer;flex-shrink:0;overflow:hidden;transition:.15s}
.pdp-thumb .ph{height:100%;border:0;border-radius:0;font-size:9px}
.pdp-thumb:hover{border-color:var(--muted)}
.pdp-thumb.on{border-color:var(--accent)}
.pdp-main{border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative;background:var(--surface)}
.pdp-main .ph{aspect-ratio:4/3;border:0;border-radius:0;font-size:14px}
.pdp-main .zoom{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);cursor:pointer}
.pdp-main .zoom:hover{color:var(--accent);border-color:var(--accent)}
.pdp-main .nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--fg);font-size:18px;opacity:0;transition:.2s}
.pdp-main:hover .nav{opacity:1}
.pdp-main .nav.prev{left:14px}.pdp-main .nav.next{right:14px}
.pdp-main .nav:hover{color:var(--accent);border-color:var(--accent)}
.pdp-badges{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:2}

/* Info column */
.pdp-info .brand{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600}
.pdp-info h1{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-top:6px}
.pdp-info .sku{color:var(--muted);font-size:13px;margin-top:6px;font-family:var(--mono)}
.pdp-info .rate-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.pdp-info .rate-row .stars{color:var(--warn);font-size:14px;letter-spacing:1px}
.pdp-info .rate-row .stars span{color:var(--border)}
.pdp-info .rate-row .num{color:var(--muted);font-size:13px}
.pdp-info .rate-row .sep{color:var(--border)}

.pdp-price{margin:18px 0;padding:16px 18px;background:var(--bg);border-radius:10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pdp-price .now{font-family:var(--mono);font-size:clamp(24px,2.6vw,30px);color:var(--accent);font-weight:700;letter-spacing:-.01em}
.pdp-price .old{color:var(--muted);text-decoration:line-through;font-family:var(--mono);font-size:15px}
.pdp-price .save{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-15);padding:3px 8px;border-radius:6px;letter-spacing:.02em}

/* Variants */
.variant-group{margin-top:18px}
.variant-group .lbl{font-size:13px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.variant-group .lbl .sel{color:var(--muted);font-weight:400}
.variant-group .opts{display:flex;flex-wrap:wrap;gap:8px}
.variant-chip{border:1.5px solid var(--border);background:var(--surface);padding:10px 14px;border-radius:8px;cursor:pointer;color:var(--fg);font-family:inherit;font-size:13.5px;font-weight:500;transition:.15s;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;position:relative;min-width:96px}
.variant-chip small{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:400}
.variant-chip:hover{border-color:var(--muted)}
.variant-chip.on{border-color:var(--accent);background:var(--accent-06)}
.variant-chip.on::after{content:'';position:absolute;top:-1px;right:-1px;width:0;height:0;border-top:18px solid var(--accent);border-left:18px solid transparent;border-top-right-radius:8px}
.variant-chip.on::before{content:'✓';position:absolute;top:0;right:2px;color:#fff;font-size:9px;font-weight:700;z-index:1;line-height:1}
.variant-chip.out{color:var(--muted);background:var(--bg);cursor:not-allowed;text-decoration:line-through}
.variant-chip.out:hover{border-color:var(--border)}

/* Stock + qty */
.pdp-stock{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px}
.pdp-stock .dot{width:8px;height:8px;border-radius:50%;background:var(--brand-secondary);box-shadow:0 0 0 3px var(--brand-secondary-15)}
.pdp-stock b{font-weight:600}
.pdp-stock .muted{color:var(--muted)}

.qty-row{display:flex;align-items:center;gap:16px;margin-top:18px}
.qty-row .lbl{font-size:13px;font-weight:600}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;overflow:hidden}
.qty-stepper button{border:0;background:var(--surface);width:38px;height:38px;font-size:18px;cursor:pointer;color:var(--fg);font-family:inherit;display:grid;place-items:center}
.qty-stepper button:hover{background:var(--bg)}
.qty-stepper button:disabled{color:var(--border);cursor:not-allowed;background:var(--surface)}
.qty-stepper input{width:48px;height:38px;border:0;border-left:1.5px solid var(--border);border-right:1.5px solid var(--border);text-align:center;font:inherit;font-size:14px;font-weight:600;font-family:var(--mono);background:var(--surface);outline:none;-moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* CTAs */
.cta-row{display:grid;grid-template-columns:1fr 1fr 48px;gap:10px;margin-top:22px}
@media(max-width:480px){.cta-row{grid-template-columns:1fr 48px;grid-auto-rows:auto}.cta-row .buy{grid-column:1/-1}}
.cta-row button{font:inherit;font-weight:700;font-size:14px;border-radius:10px;cursor:pointer;padding:14px 18px;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.cta-row .buy{background:var(--accent);color:#fff;border:0}
.cta-row .buy:hover{filter:brightness(1.08)}
.cta-row .buy small{display:block;font-size:11.5px;font-weight:500;opacity:.85;margin-top:1px}
.cta-row .buy span{display:flex;flex-direction:column;line-height:1.15}
.cta-row .add{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.cta-row .add:hover{background:var(--accent-06)}
.cta-row .add.added{background:var(--accent);color:#fff}
.cta-row .ic{background:var(--surface);color:var(--muted);border:1.5px solid var(--border);padding:0;width:48px;height:48px}
.cta-row .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.cta-row .ic:hover{color:var(--accent);border-color:var(--accent)}
.cta-row .ic.on{color:var(--accent);border-color:var(--accent);background:var(--accent-06)}
.cta-row .ic.on svg{fill:var(--accent)}

/* Shipping / warranty info */
.pdp-perks{margin-top:22px;border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:14px 16px}
.pdp-perks .perk{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px dashed var(--border);font-size:13.5px}
.pdp-perks .perk:last-child{border-bottom:0}
.pdp-perks .perk svg{width:20px;height:20px;stroke:var(--brand-secondary);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:1px}
.pdp-perks .perk img{filter:brightness(0) saturate(100%) invert(28%) sepia(29%) saturate(1281%) hue-rotate(127deg) brightness(93%) contrast(94%)}
.pdp-perks .perk b{display:block;font-weight:600;margin-bottom:2px;color:var(--brand-secondary)}
.pdp-perks .perk small{color:var(--muted);font-size:12.5px;line-height:1.45}

/* Gifts (PDP) */
.pdp-gifts{margin-top:18px;border:1px dashed var(--accent);border-radius:10px;background:var(--accent-06);padding:14px 16px}
.gift-head{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.gift-head svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.6;flex-shrink:0}
.gift-head .gift-total{margin-left:auto;color:var(--accent);font-weight:600;font-size:12.5px}
.gift-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gift-list li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.45}
.gift-list li::before{content:"✓";position:absolute;left:1px;top:0;color:var(--accent);font-size:13px;font-weight:700}
.gift-list li small{color:var(--muted)}

/* Tabs */
/* Bought-together slider (ngang, cuộn) */
.bought-slider{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.bought-slider .pcard{flex:0 0 230px;scroll-snap-align:start}
.bought-slider::-webkit-scrollbar{height:6px}
.bought-slider::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media(max-width:560px){.bought-slider .pcard{flex-basis:160px}}

.pdp-tabs{margin-top:48px}
/* Horizontal pill tab bar (vjshop-style). */
.pdp-tabs .tabbar{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border);padding:12px 0 0;overflow-x:auto;scrollbar-width:none}
.pdp-tabs .tabbar::-webkit-scrollbar{display:none}
.pdp-tabs .tabbar__btn{
  border:1px solid var(--border);background:var(--surface);color:var(--fg);
  font:inherit;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:10px 18px;border-radius:8px;cursor:pointer;
  margin-bottom:-1px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.pdp-tabs .tabbar__btn:hover{border-color:var(--brand-secondary);color:var(--brand-secondary)}
.pdp-tabs .tabbar__btn.on{background:var(--brand-secondary);border-color:var(--brand-secondary);color:#fff}
.pdp-tabs .tabbar__btn .count{color:inherit;opacity:.75;font-weight:500;font-size:12.5px;margin-left:5px}
.pdp-tabs .panel{padding:28px 0;display:none}
.pdp-tabs .panel.on{display:block}
.pdp-tabs .panel .prose{max-width:740px}
.pdp-tabs .panel h3{font-size:18px;font-weight:700;margin:24px 0 10px;letter-spacing:-.01em}
.pdp-tabs .panel h3:first-child{margin-top:0}
.pdp-tabs .panel p{font-size:15px;line-height:1.7;color:#333;margin:8px 0}
.woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-product-attributes th,.woocommerce-product-attributes td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.woocommerce-product-attributes th{font-weight:600;color:var(--muted);width:35%;background:var(--bg)}
.woocommerce-product-attributes tr:last-child th,.woocommerce-product-attributes tr:last-child td{border-bottom:0}

.pdp-tabs .panel ul{margin:8px 0 8px 20px;font-size:14.5px;line-height:1.7;color:#333}

/* Product overview: editorial content with a live WooCommerce spec sidebar. */
.pdp-description-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:clamp(32px,4vw,56px);align-items:start}
.pdp-description-main{min-width:0;max-width:760px}
/* Hide the WC "Mô tả" h2 — the tab is already named "Mô tả sản phẩm",
   so the heading is redundant. The next h2 (if any) is the real title. */
.pdp-description-main>h2:first-child{display:none}
/* All selectors below are scoped to `.pdp-tabs .panel .pdp-description-main ...`
   so they out-specify the generic `.pdp-tabs .panel p/h2/h3` rules above
   (which would otherwise lock the description to the older 15px / 18px
   metrics). Without the longer chain, browsers keep the older style. */
/* First visible h2 (the 2nd h2 of type) = editorial section title.
   Promote it slightly so it reads as a hero heading, not a sub-heading
   competing with the page product title. */
.pdp-tabs .panel .pdp-description-main>h2:nth-of-type(2){font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:4px 0 18px;color:var(--fg)}
/* All subsequent h2 + any h3/h4 = sub-section heading. More breathing room
   above so each block starts with a clear "pivot" line. */
.pdp-tabs .panel .pdp-description-main h2:not(:nth-of-type(2)),.pdp-tabs .panel .pdp-description-main h3,.pdp-tabs .panel .pdp-description-main h4{font-size:17px;font-weight:700;margin:36px 0 12px;letter-spacing:-.01em;line-height:1.4;color:var(--fg)}
/* Paragraphs: comfortable reading rhythm — slightly larger + more line
   height + more vertical air between blocks. text-wrap:pretty (line 35)
   already prevents orphans; this just tunes the metrics. */
.pdp-tabs .panel .pdp-description-main p{font-size:15.5px;line-height:1.75;color:#2a2a2a;margin:14px 0}
/* Lists inside the editorial body: indent less, breathe more. */
.pdp-tabs .panel .pdp-description-main ul,.pdp-tabs .panel .pdp-description-main ol{margin:14px 0;padding-left:22px;font-size:15.5px;line-height:1.75;color:#2a2a2a}
.pdp-tabs .panel .pdp-description-main li{margin:7px 0}
/* Inline emphasis: keep semibold for readability; the bold default reads
   too heavy against the lighter body color. */
.pdp-tabs .panel .pdp-description-main strong,.pdp-tabs .panel .pdp-description-main b{font-weight:600;color:var(--fg)}
/* Images: rounded corners + breathing room, so they feel like part of the
   editorial flow rather than dropped in. */
.pdp-tabs .panel .pdp-description-main img{max-width:100%;height:auto;border-radius:10px;margin:24px auto;display:block;background:#fff}
/* Blockquotes (used by some RTE setups): indent + left bar. */
.pdp-tabs .panel .pdp-description-main blockquote{margin:20px 0;padding:6px 0 6px 18px;border-left:3px solid var(--accent-15);color:var(--muted);font-style:italic}
/* Code (rare but possible from RTE): stay readable. */
.pdp-tabs .panel .pdp-description-main code{font-family:var(--mono);font-size:.92em;background:var(--bg);padding:1px 6px;border-radius:4px}
.pdp-faq{margin-top:40px}
.pdp-tabs .panel .pdp-faq__title{font-size:21px;margin:0 0 16px}
.pdp-faq__items{display:grid;gap:10px}
.pdp-faq__item{border:1px solid var(--border);border-radius:9px;background:var(--surface);overflow:hidden}
.pdp-faq__item summary{position:relative;display:block;cursor:pointer;list-style:none;padding:14px 48px 14px 42px;color:var(--fg);font-size:15px;font-weight:600;line-height:1.55}
.pdp-faq__item summary::-webkit-details-marker{display:none}
.pdp-faq__item summary::before{content:"+";position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:25px;font-weight:400;line-height:1}
.pdp-faq__item[open] summary::before{content:"−"}
.pdp-faq__answer{padding:0 20px 16px 42px;border-top:1px solid var(--border)}
.pdp-tabs .panel .pdp-faq__answer p{margin:12px 0 0}
.pdp-tabs .panel .pdp-faq__answer p:first-child{margin-top:12px}
.pdp-description-sidebar{min-width:0;display:grid;gap:20px}
.pdp-spec-card,.pdp-package-card,.pdp-related-posts-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:22px;box-shadow:0 2px 10px rgba(17,17,17,.035)}
.pdp-tabs .panel .pdp-sidebar-card__title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;line-height:1.25;margin:0 0 12px;color:var(--fg)}
.pdp-sidebar-card__title svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pdp-tabs .panel .pdp-package-card__list{list-style:none;margin:0;padding:0;color:var(--fg);font-size:13.5px;line-height:1.55}
.pdp-package-card__list li{position:relative;margin:0;padding:9px 0 9px 18px;border-top:1px solid var(--border)}
.pdp-package-card__list li::before{content:"";position:absolute;left:1px;top:17px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pdp-spec-card .woocommerce-product-attributes{display:table;margin:0;border:0;background:transparent;font-size:13px}
.pdp-spec-card .woocommerce-product-attributes tr{display:table-row;border:0}
.pdp-spec-card .woocommerce-product-attributes th,.pdp-spec-card .woocommerce-product-attributes td{display:table-cell;padding:10px 0;border:0;border-top:1px solid var(--border);vertical-align:top;background:transparent;line-height:1.45}
.pdp-spec-card .woocommerce-product-attributes th{width:43%;padding-right:14px;color:var(--muted);font-size:12.5px;font-weight:600}
.pdp-spec-card .woocommerce-product-attributes td{color:var(--fg);font-size:13px}
.pdp-tabs .panel .pdp-spec-card .woocommerce-product-attributes p{margin:0;padding:0;color:inherit;font-size:inherit;line-height:inherit}
.pdp-tabs .panel .pdp-related-posts-card__list{list-style:none;margin:0;padding:0}
.pdp-related-posts-card__item{border-top:1px solid var(--border)}
.pdp-related-posts-card__link{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;color:var(--fg);text-decoration:none}
.pdp-related-posts-card__item:first-child .pdp-related-posts-card__link{padding-top:4px}
.pdp-related-posts-card__item:last-child .pdp-related-posts-card__link{padding-bottom:0}
.pdp-related-posts-card__media{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:7px;background:var(--bg)}
.pdp-related-posts-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.pdp-related-posts-card__name{font-size:14px;font-weight:650;line-height:1.4;transition:color .15s}
.pdp-related-posts-card__link:hover .pdp-related-posts-card__name{color:var(--brand-secondary)}
@media(max-width:900px){
  .pdp-description-layout{grid-template-columns:1fr;gap:32px}
  .pdp-description-main{max-width:none}
  .pdp-description-sidebar{position:static}
  .pdp-spec-card{max-width:none}
}
@media(max-width:560px){
  .pdp-description-layout{gap:24px}
  .pdp-spec-card,.pdp-package-card,.pdp-related-posts-card{padding:18px 16px;border-radius:10px}
  .pdp-faq{margin-top:32px}
  .pdp-faq__item summary{padding:13px 38px 13px 38px;font-size:14px}
  .pdp-faq__item summary::before{left:14px}
  .pdp-faq__answer{padding:0 16px 14px 38px}
  .pdp-spec-card .woocommerce-product-attributes th{width:42%;padding-right:12px}
}

/* Review summary block */
.review-summary{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:28px}
@media(max-width:640px){.review-summary{grid-template-columns:1fr;gap:18px}}
.review-summary .score{text-align:center}
.review-summary .score .big{font-size:48px;font-weight:700;font-family:var(--mono);line-height:1;letter-spacing:-.02em}
.review-summary .score .out{color:var(--muted);font-size:13px;margin-top:2px}
.review-summary .score .stars{color:var(--warn);font-size:16px;letter-spacing:2px;margin-top:8px}
.review-summary .score .total{color:var(--muted);font-size:13px;margin-top:6px}
.review-summary .bars{display:flex;flex-direction:column;gap:8px;justify-content:center}
.review-summary .bar{display:grid;grid-template-columns:32px 1fr 44px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.review-summary .bar .track{height:6px;background:var(--bg);border-radius:99px;overflow:hidden}
.review-summary .bar .fill{height:100%;background:var(--warn);border-radius:99px}
.review-summary .bar .n{text-align:right;font-family:var(--mono)}

.review-list{display:flex;flex-direction:column;gap:0}
.review-item{padding:20px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:48px 1fr;gap:14px}
.review-item:last-child{border-bottom:0}
.review-item .av{width:48px;height:48px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:grid;place-items:center;font-weight:700;color:var(--fg)}
.review-item .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review-item .head b{font-size:14px;font-weight:600}
.review-item .head .ver{font-size:11px;font-weight:600;color:var(--brand-secondary);background:var(--brand-secondary-15);padding:2px 7px;border-radius:5px}
.review-item .head .time{color:var(--muted);font-size:12.5px}
.review-item .stars{color:var(--warn);font-size:13px;letter-spacing:1.5px;margin-top:4px}
.review-item .stars span{color:var(--border)}
.review-item p{font-size:14px;color:#333;line-height:1.6;margin-top:8px}
.review-item .var-tag{display:inline-block;font-size:12px;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:5px;margin-top:8px}

/* ===== PDP REVIEWS (custom summary + cards) ===== */
.pxc-reviews{margin:0}
.pxc-reviews .comment-reply-title,
.pxc-reviews .woocommerce-Reviews-title{display:none}
/* --- Summary block --- */
.pxc-review-summary{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;padding:28px;border:1px solid var(--border);border-radius:14px;background:var(--surface);margin-bottom:32px}
.pxc-rs-left{text-align:center;min-width:140px}
.pxc-rs-avg{font-family:var(--mono);font-size:48px;font-weight:700;line-height:1;color:var(--fg);letter-spacing:-.02em}
.pxc-rs-on{font-size:12px;color:var(--muted);margin-top:4px}
.pxc-rs-stars{display:flex;justify-content:center;gap:2px;margin-top:8px;color:var(--accent)}
.pxc-rs-stars .on{color:var(--accent)}
.pxc-rs-stars .off{color:var(--border)}
.pxc-rs-stars svg{width:16px;height:16px}
.pxc-rs-count{font-size:13px;color:var(--muted);margin-top:6px}
.pxc-rs-right{display:flex;flex-direction:column;gap:8px}
.pxc-rs-row{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:10px;font-size:13px}
.pxc-rs-label{color:var(--muted);font-family:var(--mono);font-size:12.5px}
.pxc-rs-bar{display:block;height:8px;background:var(--bg);border-radius:999px;overflow:hidden}
.pxc-rs-fill{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}
.pxc-rs-num{text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
/* --- Review cards --- */
.pxc-review-list{display:flex;flex-direction:column;gap:24px}
.pxc-review-card{display:flex;gap:14px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.pxc-review-card:last-child{border-bottom:0}
.pxc-rc-avatar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--fg);font-weight:600;font-size:14px;display:grid;place-items:center;border:1px solid var(--border);letter-spacing:.02em}
.pxc-rc-body{flex:1;min-width:0}
.pxc-rc-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.pxc-rc-name{font-weight:600;color:var(--fg)}
.pxc-rc-verified{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--success);background:color-mix(in srgb, var(--success) 12%, transparent);padding:3px 8px;border-radius:999px;font-weight:500}
.pxc-rc-time{font-size:12.5px;color:var(--muted)}
.pxc-rc-stars{display:flex;gap:1px;margin-top:6px;color:var(--accent)}
.pxc-rc-stars .on{color:var(--accent)}
.pxc-rc-stars .off{color:var(--border)}
.pxc-rc-stars svg{width:14px;height:14px}
.pxc-rc-text{margin-top:8px;font-size:14.5px;line-height:1.65;color:#333}
.pxc-rc-text p{margin:0 0 6px}
.pxc-rc-text p:last-child{margin:0}
.pxc-rc-variant{margin-top:10px;font-size:12.5px;color:var(--muted)}
.pxc-rc-variant b{color:var(--fg);font-weight:600}
/* --- Pagination --- */
.pxc-review-pagination{margin-top:16px}
.pxc-review-pagination ul{display:flex;gap:6px;justify-content:center;list-style:none;margin:0;padding:0}
.pxc-review-pagination li a,.pxc-review-pagination li span{display:inline-block;padding:6px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--fg);text-decoration:none;background:var(--surface)}
.pxc-review-pagination li .current,.pxc-review-pagination li a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* --- Empty state --- */
.pxc-review-empty{text-align:center;color:var(--muted);padding:32px 12px;background:var(--bg);border-radius:12px}
/* --- Review form (collapsible) --- */
.pxc-review-form-wrap{margin-top:32px;text-align:center}
.pxc-review-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:13px 26px;font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;transition:background .15s, transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pxc-review-toggle:hover{background:var(--accent-80)}
.pxc-review-toggle:active{transform:scale(.98)}
.pxc-review-form{margin-top:20px;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 2px 8px rgba(17,17,17,.04)}
.pxc-rf-header{padding:24px 28px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, var(--bg) 0%, transparent 100%)}
.pxc-rf-title{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;color:var(--fg)}
.pxc-rf-sub{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.pxc-rf-trust{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 28px;background:var(--bg);border-bottom:1px solid var(--border)}
.pxc-rf-trust-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500}
.pxc-rf-trust-item svg{color:var(--success);flex-shrink:0}
.pxc-rf{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 28px 20px}
.pxc-rf .pxc-rf-cell{grid-column:span 1}
.pxc-rf .pxc-rf-cell.pxc-rf-rate-cell{grid-column:1/-1;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.pxc-rf .pxc-rf-cell.pxc-rf-text-cell{grid-column:1/-1}
.pxc-rf .pxc-rf-cell label{display:block;font-size:13.5px;font-weight:600;color:var(--fg);margin-bottom:8px;letter-spacing:-.005em}
.pxc-rf .pxc-rf-cell .req{color:var(--danger);font-weight:700}
.pxc-rf .pxc-rf-cell input[type=text],
.pxc-rf .pxc-rf-cell input[type=email],
.pxc-rf .pxc-rf-cell textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;background:var(--surface);color:var(--fg);transition:border-color .15s, box-shadow .15s}
.pxc-rf .pxc-rf-cell input:focus,
.pxc-rf .pxc-rf-cell textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.pxc-rf .pxc-rf-cell input::placeholder,
.pxc-rf .pxc-rf-cell textarea::placeholder{color:var(--muted);opacity:.7}
.pxc-rf .pxc-rf-cell textarea{min-height:120px;resize:vertical;line-height:1.55}
.pxc-rf-rate-label{display:flex;align-items:center;gap:6px;margin-bottom:10px!important}
.pxc-rf-stars{display:flex;align-items:center;gap:6px;color:var(--border);flex-wrap:wrap}
.pxc-rf-stars button{background:transparent;border:0;padding:4px;cursor:pointer;color:inherit;display:inline-flex;border-radius:6px;transition:color .15s, transform .1s, background .15s}
.pxc-rf-stars button:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.pxc-rf-stars button:active{transform:scale(.92)}
.pxc-rf-stars button.on{color:var(--accent)}
.pxc-rf-stars button svg{width:28px;height:28px;display:block}
.pxc-rf-rate-hint{margin-left:8px;font-size:13px;color:var(--muted);font-weight:500;transition:color .15s}
.pxc-rf-stars:focus-within + .pxc-rf-rate-hint,
.pxc-rf-rate-hint:has(+ #pxc_rating[value]:not([value=""])){color:var(--accent)}
.pxc-rf-tips{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.5}
.pxc-rf-tips b{color:var(--fg);font-weight:600}
.pxc-rf .form-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding-top:8px}
.pxc-rf-submit{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:10px!important;padding:14px 32px!important;font-weight:600!important;font-size:15px!important;cursor:pointer;font-family:inherit;transition:background .15s, transform .1s;min-width:160px}
.pxc-rf-submit:hover{background:var(--accent-80)!important}
.pxc-rf-submit:active{transform:scale(.98)}
.pxc-rf-cancel{background:transparent;color:var(--muted);border:0;padding:14px 18px;font:inherit;font-size:14px;cursor:pointer;border-radius:10px}
.pxc-rf-cancel:hover{color:var(--fg);background:var(--bg)}
/* Hide WC's default "comment-notes" and "logged-in-as" leftovers (we render our own header) */
.pxc-rf .comment-notes,.pxc-rf .logged-in-as,.pxc-rf .comment-form-cookies-consent{display:none}
/* Belt-and-braces: if WC's JS still injects <p class="stars"> somehow, hide it. */
.pxc-rf #respond p.stars{display:none}
.pxc-review-locked{color:var(--muted);font-size:13px;padding:14px 16px;background:var(--bg);border-radius:10px}
/* Mobile */
@media(max-width:640px){
  .pxc-rf{grid-template-columns:1fr;padding:20px;gap:16px}
  .pxc-rf-header{padding:20px 20px 14px}
  .pxc-rf-trust{padding:10px 20px}
  .pxc-rf-stars button svg{width:24px;height:24px}
  .pxc-rf-rate-hint{width:100%;margin-left:0;margin-top:4px}
}
/* Mobile stack */
@media(max-width:640px){
  .pxc-review-summary{grid-template-columns:1fr;gap:20px;padding:20px}
  .pxc-rs-left{min-width:0}
}
/* Related products */
.pdp-related{margin-top:56px}
.pdp-related h2{font-size:20px;font-weight:700;margin-bottom:18px;letter-spacing:-.01em}

/* ===== HOMEPAGE BLOG TEASER ===== */
.home-blog{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:stretch}
@media(max-width:900px){.home-blog{grid-template-columns:minmax(0,1fr);gap:22px}}

.hb-lead{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:.15s}
.hb-lead:hover{border-color:var(--accent)}
/* Lead image: 16:9 wrapper holds the aspect, img fills it. Consistent with
   blog archive featured + post-cover so the whole site has one rhythm. */
.hb-lead__img{display:block;aspect-ratio:16/9;overflow:hidden;background:#f2f2f2}
.hb-lead__img img{width:100%;height:100%;object-fit:cover;display:block}
.hb-lead .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.hb-lead .cat-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-06);padding:4px 10px;border-radius:6px;align-self:flex-start}
.hb-lead h3{font-size:22px;font-weight:700;line-height:1.28;letter-spacing:-.01em;margin:0}
.hb-lead h3 a{color:var(--fg);text-decoration:none}
.hb-lead h3 a:hover{color:var(--accent)}
.hb-lead p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.hb-lead .meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12.5px;margin-top:4px;font-family:var(--mono)}

.hb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;height:100%;justify-content:space-between}
.hb-list li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s;align-items:stretch}
.hb-list li:hover{border-color:var(--accent)}
.hb-list .ph{aspect-ratio:auto;border:0;border-radius:0;min-height:100%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px;text-align:center}
/* List post thumbnail: fills the 130px column, cover, full row height. */
.hb-list li img{grid-row:1;grid-column:1;width:130px;height:100%;min-height:96px;object-fit:cover;display:block;background:#f2f2f2}
/* Keep the text block in column 2 even when a post has no thumbnail. */
.hb-list li .meta-block{grid-column:2}
.hb-list .meta-block{padding:13px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;justify-content:center}
.hb-list .cat-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);align-self:flex-start}
.hb-list h4{font-size:14.5px;font-weight:600;line-height:1.38;margin:0}
.hb-list h4 a{color:var(--fg);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-list h4 a:hover{color:var(--accent)}
.hb-list small{color:var(--muted);font-size:12px;font-family:var(--mono)}
@media(max-width:600px){.hb-list li{grid-template-columns:100px minmax(0,1fr)}.hb-list h4{font-size:14px}}

/* ===== ABOUT PAGE ===== */
.about-hero{padding:48px 0 40px;border-bottom:1px solid var(--border)}
.about-hero .kicker{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.about-hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:20ch;margin:0 0 18px}
.about-hero .lead{font-size:clamp(15px,1.4vw,17.5px);color:var(--muted);line-height:1.65;max-width:64ch}
.about-hero .pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.about-hero .pill{font-family:var(--mono);font-size:12.5px;border:1px solid var(--border);padding:6px 12px;border-radius:999px;color:var(--fg);background:var(--surface)}
.about-hero .pill b{color:var(--accent);font-weight:600}

.ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid var(--border)}
.ab-stats .stat{padding:36px 24px;border-right:1px solid var(--border)}
.ab-stats .stat:last-child{border-right:0}
.ab-stats .stat .n{font-family:var(--mono);font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-.02em;color:var(--fg);line-height:1}
.ab-stats .stat .n sup{font-size:.5em;font-weight:500;color:var(--accent);margin-left:2px;top:-.6em}
.ab-stats .stat .l{margin-top:8px;color:var(--muted);font-size:13.5px}
@media(max-width:720px){.ab-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-stats .stat{border-bottom:1px solid var(--border)}.ab-stats .stat:nth-child(2n){border-right:0}.ab-stats .stat:nth-last-child(-n+2){border-bottom:0}}

.ab-section{padding:64px 0}
.ab-section + .ab-section{padding-top:0}
.ab-section .head{margin-bottom:32px;max-width:64ch}
.ab-section .head .eyebrow{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.ab-section .head h2{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.01em;margin-top:8px;line-height:1.2}
.ab-section .head p{color:var(--muted);font-size:15px;line-height:1.65;margin-top:10px}

.ab-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
@media(max-width:900px){.ab-story{grid-template-columns:minmax(0,1fr);gap:28px}}
.ab-story .text p{color:#333;font-size:15.5px;line-height:1.75;margin-bottom:14px}
.ab-story .text p:last-child{margin-bottom:0}
.ab-story .photo{aspect-ratio:4/3;display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--muted);border-radius:12px;overflow:hidden}

.ab-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media(max-width:840px){.ab-values{grid-template-columns:minmax(0,1fr)}}
.ab-values .v{border-top:2px solid var(--fg);padding:22px 4px 0}
.ab-values .v .n{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.04em}
.ab-values .v h4{font-size:18px;font-weight:600;margin:10px 0 10px;letter-spacing:-.01em}
.ab-values .v p{color:var(--muted);font-size:14.5px;line-height:1.65}

.ab-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:900px){.ab-team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ab-team{grid-template-columns:minmax(0,1fr)}}
.ab-team .mem{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:6px}
.ab-team .mem .av{width:56px;height:56px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:18px;letter-spacing:.02em;margin-bottom:10px}
.ab-team .mem .name{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ab-team .mem .role{font-family:var(--mono);font-size:11.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.ab-team .mem .bio{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:6px}

.ab-showroom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:840px){.ab-showroom{grid-template-columns:minmax(0,1fr)}}
.ab-showroom .room{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ab-showroom .room .ph{aspect-ratio:16/9;border:0;border-radius:0}
.ab-showroom .room .body{padding:22px 24px}
.ab-showroom .room .city{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.ab-showroom .room h4{font-size:18px;font-weight:600;margin:6px 0 14px}
.ab-showroom .room .info{display:flex;flex-direction:column;gap:10px;font-size:14px;color:#333}
.ab-showroom .room .info .row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:start}
.ab-showroom .room .info .row .k{color:var(--muted);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding-top:3px}
.ab-showroom .room .actions{display:flex;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.ab-showroom .room .btn-sm{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}
.ab-showroom .room .btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.ab-showroom .room .btn-sm.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.ab-showroom .room .btn-sm.primary:hover{background:var(--accent-80);border-color:var(--accent-80);color:#fff}

/* ===== SHARED PAGE COMPONENTS (forgot-password / order-detail / compare) ===== */
.page-main{padding-block:clamp(28px,4vw,56px)}
.breadcrumb{font-size:13px;color:var(--accent);margin-bottom:12px}
.breadcrumb a{color:var(--accent);font-weight:500}
.breadcrumb a:hover{color:var(--accent-80);text-decoration:underline}
.page-title{font-family:var(--font);font-size:clamp(28px,4vw,38px);letter-spacing:-.02em;margin-bottom:6px}
.page-lead{color:var(--muted);margin-bottom:28px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:.15s;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-80)}
.btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}

/* empty / placeholder state */
.empty-state{text-align:center;padding:80px 20px;max-width:100%;overflow-wrap:break-word}
.empty-state .es-title{font-size:20px;margin-bottom:10px}
.empty-state .es-sub{color:var(--muted);margin-bottom:20px;max-width:60ch;margin-inline:auto}
.empty-state--bordered{border:1px dashed var(--border);border-radius:12px}

/* ===== AUTH (forgot-password) ===== */
.auth-narrow {
    max-width: 440px !important;
    margin-inline: auto !important;
    padding: 20px 0 !important;
}
.auth-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.auth-steps .step {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
}
.auth-steps .step.on {
    background: var(--accent);
}
.auth-narrow h1,
.auth-narrow h2 {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--fg) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
}
.woocommerce form .password-input{display:block;position:relative}
.woocommerce form .password-input input{padding-right:48px}
.woocommerce form .show-password-input{appearance:none;position:absolute;top:0;right:0;width:44px;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.woocommerce form .show-password-input::before{content:"";display:block;width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Zm11 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Zm11 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E") center/contain no-repeat}
.woocommerce form .show-password-input:hover,.woocommerce form .show-password-input:focus-visible{color:var(--accent)}
.auth-narrow .auth-register-heading {
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--fg) !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
}
.auth-sub {
    text-align: center !important;
    font-size: 14px !important;
    color: var(--muted) !important;
    margin-bottom: 24px !important;
    line-height: 1.6 !important;
}
.field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}
.field-label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin-bottom: 0 !important;
}
.field input {
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 9px !important;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--fg) !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, background-color 0.15s !important;
}
.field input:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    background: var(--surface) !important;
}

/* Specific WooCommerce form overrides in auth-narrow */
.woocommerce form.login, 
.woocommerce form.register,
.woocommerce form.lost_reset_password {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: 14px !important;
    padding: 32px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    display: grid !important;
    gap: 20px !important;
    text-align: left !important;
}
.auth-narrow .field input,
.auth-narrow .woocommerce-Input.input-text {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 9px !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: border-color .15s, background-color .15s !important;
}
.auth-narrow .field input:focus,
.auth-narrow .woocommerce-Input.input-text:focus {
    border-color: var(--accent) !important;
    outline: none !important;
    background: var(--surface) !important;
}
.auth-narrow .field-label {
    font-weight: 600 !important;
    color: var(--fg) !important;
    font-size: 13.5px !important;
}
.auth-narrow .auth-form {
    margin: 0 !important;
}
.auth-narrow .woocommerce-form-row,
.auth-narrow p.form-row {
    margin: 0 !important;
    padding: 0 !important;
}
.field-err {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
}
.field-err.on {
    display: block;
}
.auth-back {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}
.auth-back:hover {
    color: var(--accent);
}
.auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 32px 0 !important;
    color: var(--muted) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}
.auth-divider::before,
.auth-divider::after {
    content: "" !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--border) !important;
}
.field-pw {
    position: relative !important;
    display: block !important;
}
.field-pw input {
    padding-right: 64px !important;
}
.pw-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    padding: 6px 8px !important;
    z-index: 10 !important;
}

/* Auth Row spacing: remember check & forgot pw link alignment */
.auth-narrow .auth-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    margin: 4px 0 !important;
}
.auth-narrow .auth-row label.checkbox {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    color: var(--muted) !important;
    font-size: 13.5px !important;
    margin: 0 !important;
}
.auth-narrow .auth-row label.checkbox input {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--accent) !important;
    cursor: pointer !important;
}
.auth-narrow .auth-link {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
}
.auth-narrow .auth-link:hover {
    text-decoration: underline !important;
}

/* Dynamic social style buttons */
.auth-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.social-btn {
    font-weight: 500;
}

/* Button style overrides for login / register */
.auth-narrow button.btn {
    height: 48px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin: 10px 0 0 0 !important;
    border: 0 !important;
}
.auth-narrow button.woocommerce-form-login__submit {
    background: var(--accent) !important;
    color: #fff !important;
}
.auth-narrow button.woocommerce-form-login__submit:hover {
    background: var(--accent-80) !important;
}
.auth-narrow button.woocommerce-form-register__submit {
    background: var(--accent) !important;
    color: #fff !important;
}
.auth-narrow button.woocommerce-form-register__submit:hover {
    background: var(--accent-80) !important;
}

/* Privacy policy text style rules */
.woocommerce-privacy-policy-text {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: var(--muted) !important;
    margin: 10px 0 0 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 16px !important;
}
.woocommerce-privacy-policy-text a {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.woocommerce-privacy-policy-text a:hover {
    text-decoration: underline !important;
}

.auth-foot {
    text-align: center !important;
    font-size: 14px !important;
    color: var(--muted) !important;
    margin-top: 24px !important;
}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px;flex-wrap:wrap;gap:8px}
.checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--fg)}
.checkbox input{width:16px;height:16px;accent-color:var(--accent)}
.auth-link{color:var(--accent);font-weight:600}
.auth-link:hover{text-decoration:underline}
.auth-foot{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}

/* ===== ORDER DETAIL ===== */
.od-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:28px}
.od-code{font-family:var(--mono);font-size:12px;color:var(--muted)}
.od-head h1{font-family:var(--font);font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin-top:4px}
.od-date{font-size:13px;color:var(--muted);margin-top:4px}
.od-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:6px 14px;border-radius:99px;
  background:oklch(95% .05 145/.15);color:oklch(45% .12 145)}
.od-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}
.od-card{border:1px solid var(--border);border-radius:12px;padding:20px;background:var(--surface)}
.od-card h2{font-family:var(--font);font-size:16px;font-weight:700;margin-bottom:16px}
.od-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;color:var(--muted)}
.od-row.total{font-size:17px;font-weight:700;color:var(--fg);padding-top:12px;margin-top:6px;border-top:1px solid var(--border)}
.od-row.total span:last-child{color:var(--accent)}
.od-aside{display:flex;flex-direction:column;gap:20px}
.od-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.od-line .ph{width:80px;height:80px;border-radius:10px;flex-shrink:0}
.od-line .li-body{flex:1;min-width:0}
.od-line .li-name{font-size:15px;font-weight:600}
.od-line .li-meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:3px}
.od-line .li-qty{font-size:13px;color:var(--muted);margin-top:6px}
.od-line .li-price{font-weight:600;white-space:nowrap}
.od-timeline{list-style:none;position:relative;padding-left:28px;margin:0}
.od-timeline li{position:relative;padding:0 0 22px}
.od-timeline .dot{position:absolute;left:-23px;top:3px;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--border);background:var(--surface);box-sizing:border-box}
.od-timeline li.done .dot{border-color:var(--accent);background:var(--accent)}
.od-timeline .tl-label{font-size:14px;font-weight:600}
.od-timeline .tl-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
@media(max-width:760px){.od-grid{grid-template-columns:1fr}}

/* ===== COMPARE TABLE ===== */
.cmp-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;min-width:720px}
.cmp-foot{margin-top:32px;padding:20px;border:1px dashed var(--border);border-radius:12px;text-align:center;background:var(--surface)}
.cmp-foot p{margin-bottom:12px;color:var(--muted)}
.cmp-table th{padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.cmp-table th .ph{aspect-ratio:1;width:100%;max-width:200px;margin-bottom:12px}
.cmp-th-brand{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.cmp-th-name{font-size:15px;font-weight:600;margin-bottom:6px}
.cmp-th-price{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:10px}
.cmp-th-remove{font-size:12px;color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline}
.cmp-table tbody tr{border-bottom:1px solid var(--border)}
.cmp-table .cmp-field{padding:14px 20px;font-family:var(--mono);font-size:11px;font-weight:400;text-align:left;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap;min-width:140px}
.cmp-table td{padding:14px 20px;font-size:14px}

/* ===== POLICY ===== */
.pol-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
.pol-toc{position:sticky;top:20px}
.pol-toc h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:14px}
.pol-toc ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pol-toc a{font-size:14px;color:var(--fg)}
.pol-toc a:hover{color:var(--accent)}
.pol-sec{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--border);scroll-margin-top:20px}
.pol-sec:last-child{border-bottom:0}
.pol-sec h2{font-size:clamp(20px,2.5vw,26px);letter-spacing:-.01em;margin-bottom:14px}
.pol-sec>p{color:#444;line-height:1.7;max-width:72ch;margin-bottom:16px}
.pol-list{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:#444;line-height:1.6;max-width:72ch}
.pol-sec .item{border:1px solid var(--border);border-radius:10px;padding:16px 18px;background:var(--surface)}
.pol-sec .item summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--fg);gap:12px}
.pol-sec .item summary::-webkit-details-marker{display:none}
.pol-sec .item summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--accent);font-weight:400;line-height:1;flex-shrink:0}
.pol-sec .item[open] summary::after{content:'−'}
.pol-sec .item .answer{color:#333;font-size:14px;line-height:1.7;padding-top:12px;max-width:72ch}
@media(max-width:760px){.pol-layout{grid-template-columns:1fr;gap:24px}.pol-toc{position:static}}

/* ===== CART / CHECKOUT ===== */
.breadcrumb{font-size:13px;color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.cart-layout #cartItems{min-width:0}
.cart-item{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
/* Cart thumbnail (real Woo image, sized square). */
.ci-thumb{width:88px;height:88px;flex-shrink:0;border-radius:10px;overflow:hidden;background:#f2f2f2}
.ci-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Cart qty uses the JS .qty-stepper (Woo .quantity wrapper); strip its border. */
.ci-qty .quantity{margin:0}
.ci-qty .qty-stepper{border:0}
/* Coupon + update row under the items. */
.cart-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.cart-actions .coupon{display:flex;gap:8px;flex:1;min-width:220px}
.cart-actions .coupon input{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font:inherit;font-size:14px;min-width:0}
.cart-summary .continue-shopping{width:100%;justify-content:center;margin-top:10px;display:flex}
/* Checkout order review (Woo table) inside .co-summary. */
.co-summary .shop_table{width:100%;border-collapse:collapse;font-size:14px}
.co-summary .shop_table th,.co-summary .shop_table td{padding:10px 0;text-align:left;border-bottom:1px solid var(--border)}
.co-summary .shop_table td{text-align:right}
.co-summary .order-total th,.co-summary .order-total td{font-size:17px;font-weight:700;color:var(--fg);border-bottom:0}
.co-summary #payment{margin-top:18px}
.co-summary #place_order,.co-summary .wc-proceed-to-checkout .button{width:100%;margin-top:14px}
/* Cart summary: full-width proceed button + spacing to match the design. */
.cart-summary h3{font-size:18px;margin-bottom:18px}
.cart-summary .wc-proceed-to-checkout{margin-top:16px}
.cart-summary .wc-proceed-to-checkout .button,.cart-summary .checkout-button{width:100%;justify-content:center}
.cart-summary .continue-shopping{background:transparent;color:var(--fg);border:1px solid var(--border)}
.cart-summary .continue-shopping:hover{border-color:var(--accent);color:var(--accent)}
.cart-item:first-child{padding-top:0}
.ci-info{flex:1;min-width:0}
.ci-brand{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ci-name{font-weight:600;font-size:15px;margin:2px 0 4px}
.ci-price{font-size:13px;color:var(--muted)}
.ci-qty{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;padding:4px 8px}
.qty-btn{width:26px;height:26px;border:none;background:var(--bg);border-radius:6px;font-size:16px;cursor:pointer;line-height:1}
.qty-btn:hover{background:var(--accent);color:#fff}
.ci-total{font-weight:700;font-size:15px;min-width:120px;text-align:right}
.ci-remove{border:none;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:6px}
.ci-remove:hover{color:var(--danger)}
.cart-summary,.co-summary{border:1px solid var(--border);border-radius:14px;padding:24px;background:var(--surface);position:sticky;top:20px}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--muted)}
.sum-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:14px;font-size:17px;font-weight:700;color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:9px;font-weight:600;font-size:14px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-80)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.voucher{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.vch-row{display:flex;gap:8px}
.trust-mini{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--muted)}
.trust-mini .ti{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:var(--brand-secondary-10);color:var(--brand-secondary)}
.trust-mini b{color:var(--fg)}
/* checkout */
.co-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.co-section{border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--surface);margin-bottom:18px}
.co-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.co-num{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:14px;line-height:1}
.co-head h2{font-size:17px;font-weight:600;line-height:1;margin:0;min-height:28px;display:flex;align-items:center}
.co-fields{display:grid;gap:14px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.field span{font-weight:600}
.field input,.field select{padding:11px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.ship-options,.pay-options{display:grid;gap:10px}
.ship-opt,.pay-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.ship-opt:has(:checked),.pay-opt:has(:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ship-info,.pay-opt span{display:flex;flex-direction:column}
.ship-opt small,.pay-opt small{font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.cart-layout,.co-layout{grid-template-columns:1fr}.cart-summary,.co-summary{position:static}.co-row{grid-template-columns:1fr}}
@media(max-width:560px){.cart-item{flex-wrap:wrap}.ci-total{min-width:auto}}

/* ===== ACCOUNT (account / account-orders) ===== */
.acc-layout{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.acc-side{position:sticky;top:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.acc-user{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.acc-avatar{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px}
.acc-info,
.acc-user > div {
    min-width: 0;
    flex-grow: 1;
}
.acc-user b {
    display: block;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acc-user small {
    color: var(--muted);
    font-size: 12.5px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acc-nav{list-style:none;padding:8px;display:flex;flex-direction:column;gap:2px}
.acc-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--fg)}
.acc-nav a:hover{background:var(--bg)}
.acc-nav a.on{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}
.acc-nav a.danger{color:var(--danger)}
.acc-nav svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.acc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.acc-stat{border:1px solid var(--border);border-radius:12px;padding:18px;background:var(--surface)}
.acc-stat .k{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.acc-stat .v{font-size:24px;font-weight:700;margin-top:6px}
.order-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:16px;overflow:hidden}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg)}
.order-top .oc-code{font-family:var(--mono);font-size:12px;color:var(--muted)}
.order-top .oc-date{font-size:13px;color:var(--muted);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:99px}
.pill.delivered{background:oklch(95% .05 145/.2);color:oklch(45% .12 145)}
.pill.shipping{background:oklch(95% .06 250/.2);color:oklch(48% .14 250)}
.pill.pending{background:oklch(96% .06 80/.25);color:oklch(50% .12 70)}
.pill.cancelled{background:oklch(95% .04 25/.2);color:var(--danger)}
.order-body{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.order-line{display:flex;align-items:center;gap:14px}
.order-line .ph{width:56px;height:56px;border-radius:8px;flex-shrink:0}
.order-line .ol-name{font-size:14px;font-weight:600}
.order-line .ol-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--border)}
.order-foot .of-total{font-size:14px;color:var(--muted)}
.order-foot .of-total b{font-size:16px;color:var(--accent)}
.acc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:22px;overflow-x:auto}
.acc-tabs a{padding:10px 14px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.acc-tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:820px){.acc-layout{grid-template-columns:1fr}.acc-side{position:static}.acc-cards{grid-template-columns:1fr}}

/* ===== WOOCOMMERCE BRIDGE (map Woo core markup → Pixel Cam) ===== */
/* Shop page: 5-col grid on the custom .grid wrapper that WooHook outputs
   (overrides the generic .grid 3-col default in core.css). */
.shop .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.shop .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){.shop .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.shop .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
/* Fallback if a template still emits the raw Woo loop (no .grid wrapper) */
.woocommerce ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.woocommerce ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.woocommerce ul.products>li{margin:0}
/* Shop container padding */
.woo-content{padding-block:clamp(24px,4vw,40px)}
/* Breadcrumb */
.woocommerce-breadcrumb{font-size:13px;color:var(--accent);padding:14px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.woocommerce-breadcrumb a{color:var(--accent);font-weight:500}
.woocommerce-breadcrumb a:hover{color:var(--accent-80);text-decoration:underline}
/* Result count + ordering bar */
.woocommerce-result-count{color:var(--muted);font-size:14px;margin:0 0 16px}
.woocommerce-ordering{margin:0 0 16px}
.woocommerce-ordering select{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;background:var(--surface);cursor:pointer}
/* Pagination: WP outputs .current — alias to the .cur look */
.pager .current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .dots{border:0;background:transparent;color:var(--muted)}
/* Page title on shop */
.woocommerce-products-header__title{font-size:clamp(24px,3.5vw,34px);font-weight:700;letter-spacing:-.02em;margin:8px 0 16px}
.shop-main{min-width:0;position:relative;transition:opacity .15s}
@media(min-width:861px){.shop-main .sortbar{position:sticky;top:72px;z-index:5;box-shadow:0 8px 18px rgba(84,45,30,.08)}}
/* AJAX loading: dim + block interaction + spinner. */
.shop-main.is-loading{opacity:.5;pointer-events:none}
.shop-main.is-loading::after{content:"";position:absolute;top:80px;left:50%;width:34px;height:34px;
  margin-left:-17px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;
  animation:pxc-spin .7s linear infinite;z-index:5}
@keyframes pxc-spin{to{transform:rotate(360deg)}}
.shop--no-filters{grid-template-columns:1fr}
/* Woo widgets inside the filters aside */
.filters .widget{padding:16px;border-bottom:1px solid var(--border)}
.filters .widget:last-child{border-bottom:0}
.filters .widget-title,.filters h5{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:12px}
.filters .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.filters .widget ul li{font-size:14px}
.filters .widget ul li a{color:var(--fg)}
.filters .widget ul li a:hover{color:var(--accent)}
.filters .widget .count{color:var(--muted);font-size:12px}
.filters .price_slider_wrapper .price_slider{margin:16px 0}
.filters .price_slider_amount .button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer}
.filters .chosen{color:var(--accent)}
/* YITH wishlist button on product card */
.pcard .yith-wcwl-add-to-wishlist{position:absolute;top:10px;right:10px;z-index:3;margin:0}
.pcard .yith-wcwl-add-to-wishlist a{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--muted);text-decoration:none;font-size:0}
.pcard .yith-wcwl-add-to-wishlist a::before{content:"\2661";font-size:18px;line-height:1}
.pcard .yith-wcwl-wishlistaddedbrowse a::before,.pcard .yith-wcwl-wishlistexistsbrowse a::before{content:"\2665";color:var(--accent)}
.pcard .yith-wcwl-add-to-wishlist a:hover{border-color:var(--accent);color:var(--accent)}
.pcard .yith-wcwl-add-to-wishlist .feedback{display:none}
/* YITH wishlist page table reuses .shop_table styles */
.wishlist_table .product-remove a{color:var(--danger)}
.woocommerce .wishlist-title h2{font-size:clamp(22px,3vw,30px);font-weight:700;margin-bottom:16px}

/* ----- Single product (PDP) bridge ----- */
.pdp-layout .pdp-gallery-col{position:sticky;top:1rem}
.pdp-stock .dot--out{background:var(--accent);box-shadow:0 0 0 3px var(--accent-15)}
@media(max-width:900px){.pdp-layout .pdp-gallery-col{position:static}}

/* Force Woo columns to fill PDP grid */
.pdp-layout .pdp-gallery-col .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}
.pdp-layout .pdp-info.summary {
    width: 100% !important;
    float: none !important;
}

/* Woo gallery grid override */
.woocommerce-product-gallery{display:grid !important;grid-template-columns:72px minmax(0,1fr) !important;gap:14px !important;position:relative !important;min-height:clamp(446px,42vw,508px)}
.woocommerce-product-gallery img{border-radius:14px;border:1px solid var(--border)}
.woocommerce-product-gallery__wrapper{display:flex;flex-wrap:nowrap;overflow:hidden}
.woocommerce-product-gallery__image{flex:0 0 100%;min-width:0}
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image{flex:0 0 auto}
.woocommerce-product-gallery__image a{display:grid;place-items:center;aspect-ratio:1;background:#fff}
.woocommerce-product-gallery__image img{display:block;width:100% !important;height:auto !important;object-fit:contain !important}
/* Before FlexSlider initializes, Woo renders every gallery image in one
   vertical wrapper. Keep only the lead image in flow so the product summary
   does not jump by several viewports during startup. Once initialized the
   wrapper moves inside .flex-viewport and this direct-child rule no longer
   matches. */
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child){display:none}
.woocommerce-product-gallery .flex-viewport{border-radius:14px !important;overflow:hidden !important;order:1 !important;width:100% !important}

/* High specificity thumbnail styling */
.woocommerce-product-gallery .flex-control-thumbs{display:flex !important;flex-direction:column !important;gap:10px !important;margin:0 !important;padding:0 !important;list-style:none !important;order:0 !important;max-height:446px !important;overflow-y:auto !important;scrollbar-width:thin !important;scrollbar-color:var(--border) transparent !important;padding-right:4px !important}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{width:4px !important;height:4px !important;display:block !important}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track{background:transparent !important}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb{background:var(--border) !important;border-radius:4px !important}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb:hover{background:var(--muted) !important}
.woocommerce-product-gallery .flex-control-thumbs li{width:72px !important;height:72px !important;flex:0 0 72px !important;float:none !important;margin:0 !important}
.woocommerce-product-gallery .flex-control-thumbs img{width:100% !important;height:100% !important;object-fit:cover !important;border:1.5px solid var(--border) !important;border-radius:8px !important;cursor:pointer !important;opacity:.75 !important;transition:.15s !important}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1 !important;border-color:var(--accent) !important}

.woocommerce-product-gallery__trigger{position:absolute;right:14px;top:14px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pdp-gallery-col .pdp-badges{position:absolute;top:14px;left:100px;display:flex;gap:6px;z-index:2}
@media(max-width:900px){
  .woocommerce-product-gallery{grid-template-columns:minmax(0,1fr) !important;gap:10px !important;min-height:calc(min(100vw - 32px, 460px) + 86px)}
  .woocommerce-product-gallery .flex-viewport{order:0 !important}
  .woocommerce-product-gallery__image a{min-height:0}
  .woocommerce-product-gallery__image img{width:auto !important;max-width:100% !important;max-height:min(54vh,460px) !important;margin-inline:auto}
  .woocommerce-product-gallery .flex-control-thumbs{flex-direction:row !important;order:2 !important;overflow-x:auto !important;max-height:none !important;padding-bottom:4px !important;margin-top:10px !important;flex-wrap:nowrap !important}
  .woocommerce-product-gallery .flex-control-thumbs li{width:72px !important;height:72px !important;flex:0 0 72px !important}
  .pdp-gallery-col .pdp-badges{left:14px}
}
/* Info column */
.pdp-info .product_title{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 6px}
.pdp-info .price{margin:18px 0;padding:16px 18px;background:var(--bg);border-radius:10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:var(--mono)}
/* Variable product: hide the summary price range (<p class="price">); the
   variation price (below the swatches) shows the real price of the chosen
   option — avoids the duplicate .price. */
.product-type-variable .pdp-info > p.price{display:none}
.pdp-info .woocommerce-variation-price .price{margin:14px 0;padding:16px 18px;background:var(--bg);border-radius:10px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pdp-info .price ins{text-decoration:none !important;order:1 !important}
.pdp-info .price ins .amount{font-size:clamp(22px,2.4vw,28px) !important;color:var(--accent) !important;font-weight:700 !important}
.pdp-info .price del{opacity:1 !important;order:2 !important}
.pdp-info .price del .amount{font-size:15px;color:var(--muted);font-weight:500;text-decoration:line-through}
.pdp-info .price > .amount{font-size:clamp(22px,2.4vw,28px) !important;color:var(--accent) !important;font-weight:700 !important;order:1 !important}
.pdp-info .price .save{font-size:12px !important;font-weight:700 !important;color:var(--accent) !important;background:var(--accent-15) !important;padding:3px 8px !important;border-radius:6px !important;letter-spacing:.02em !important;order:3 !important}
.pdp-info .price-install{font-size:13px !important;color:var(--muted) !important;margin-top:-10px !important;margin-bottom:18px !important;display:block !important}
.pdp-info .price-install b{color:var(--fg) !important;font-family:var(--mono) !important}
/* Hide Woo's default "Sale!" flash — we render our own .pdp-badges. */
.pdp-gallery-col .onsale,.woocommerce-product-gallery .onsale{display:none}
.pdp-info .price del{color:var(--muted);font-size:15px;opacity:1}
.pdp-info .price ins{text-decoration:none}
.pdp-info .stock{margin-top:8px;font-size:13.5px}
.pdp-info .stock.in-stock{color:var(--brand-secondary)}
.pdp-info .stock.out-of-stock{color:var(--danger)}
.woocommerce div.product p.stock.in-stock{color:var(--brand-secondary)}
/* Quantity + add to cart */
.pdp-info form.cart:not(.variations_form),
.pdp-info form.cart .woocommerce-variation-add-to-cart {
    display: grid !important;
    grid-template-columns: 1fr 1fr 48px !important;
    gap: 10px !important;
    margin-top: 22px !important;
    width: 100% !important;
}

/* Quantity row layout */
.pdp-info form.cart .qty-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}
.pdp-info form.cart .qty-row .lbl {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    min-width: 64px !important;
}
.pdp-info form.cart .qty-row .muted-limit {
    font-size: 12.5px !important;
    color: var(--muted) !important;
}

.pdp-info form.cart .qty-row .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--surface) !important;
    margin: 0 !important;
    width: auto !important;
}
.pdp-info form.cart .qty-row .qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
}
.pdp-info form.cart .qty-row .qty-stepper button {
    border: 0 !important;
    background: var(--surface) !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    color: var(--fg) !important;
    font-family: inherit !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pdp-info form.cart .qty-row .qty-stepper button:hover {
    background: var(--bg) !important;
}
.pdp-info form.cart .qty-row .qty-stepper input {
    width: 48px !important;
    height: 38px !important;
    border: 0 !important;
    border-left: 1.5px solid var(--border) !important;
    border-right: 1.5px solid var(--border) !important;
    text-align: center !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--mono) !important;
    background: var(--surface) !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Add to Cart button (brand-primary outline) */
.pdp-info form.cart .single_add_to_cart_button {
    grid-column: 2 !important;
    order: 2 !important;
    background: var(--surface) !important;
    color: var(--accent) !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 10px !important;
    font: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: .15s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    min-width: 0 !important;
}
.pdp-info form.cart .single_add_to_cart_button:hover {
    background: var(--accent-15) !important;
}
.pdp-info form.cart .single_add_to_cart_button.disabled {
    background: var(--bg) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed !important;
}

/* Buy Now button (brand accent) */
.pdp-info form.cart .buynow {
    grid-column: 1 !important;
    order: 1 !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    transition: .15s !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1.15 !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    min-width: 0 !important;
    text-decoration: none !important;
}
.pdp-info form.cart .buynow small {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    margin-top: 1px !important;
}
.pdp-info form.cart .buynow:hover {
    filter: brightness(1.08) !important;
}
.pdp-info form.cart .buynow.disabled {
    background: var(--border) !important;
    color: var(--muted) !important;
    cursor: not-allowed !important;
}

/* Wishlist button inside PDP form */
.pdp-info form.cart .wish.ic {
    grid-column: 3 !important;
    order: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--surface) !important;
    color: var(--muted) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: .15s !important;
}
.pdp-info form.cart .wish.ic svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8 !important;
}
.pdp-info form.cart .wish.ic:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.pdp-info form.cart .wish.ic.on {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: var(--accent-15) !important;
}
.pdp-info form.cart .wish.ic.on svg {
    fill: var(--accent) !important;
}

/* Responsive CTAs layout */
@media(max-width:480px) {
    .pdp-info form.cart:not(.variations_form),
    .pdp-info form.cart .woocommerce-variation-add-to-cart {
        grid-template-columns: 1fr 48px !important;
        grid-auto-rows: auto !important;
    }
    .pdp-info form.cart .buynow {
        grid-column: 1 / -1 !important;
    }
    .pdp-info form.cart .single_add_to_cart_button {
        grid-column: 1 !important;
    }
    .pdp-info form.cart .wish.ic {
        grid-column: 2 !important;
    }
}

/* Hide default YITH button completely */
.pdp-info .yith-wcwl-add-to-wishlist,
.pdp-info .yith-add-to-wishlist-button-block {
    display: none !important;
}
.pdp-info .variations{display:block !important;width:100% !important;margin:18px 0 !important;border:0 !important}
.pdp-info .variations tbody{display:block !important}
.pdp-info .variations tr{display:flex !important;flex-direction:column !important;gap:8px !important;margin-bottom:18px !important;border:0 !important}
.pdp-info .variations th.label{display:block !important;padding:0 !important;text-align:left !important;width:100% !important}
.pdp-info .variations th.label label{font-size:14px !important;font-weight:700 !important;color:var(--fg) !important;margin:0 !important;padding:0 !important;text-transform:none !important}
.pdp-info .variations td.value{display:block !important;padding:0 !important;width:100% !important}
.pdp-info .variations select{border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;font:inherit;background:var(--surface)}
/* Variation swatch buttons (colour) — hide the native select when swatches active. */
.pdp-info .variations .swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.pdp-info .has-swatches select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pdp-info .reset_variations{display:none !important}
.pdp-info .woocommerce-variation-price{display:none !important}
.swatch.variant-chip{padding:10px 14px}
.swatch.variant-chip.is-disabled{color:var(--muted) !important;background:var(--bg) !important;border-color:var(--border) !important;cursor:not-allowed !important;text-decoration:line-through !important;opacity:.6 !important}
.swatch.variant-chip.is-disabled::after,.swatch.variant-chip.is-disabled::before{display:none !important}
/* Version chips row (storage/config siblings). */
.pdp-versions{margin:18px 0}
.pdp-versions .variant-chip{text-decoration:none}
.pdp-versions .variant-chip small .amount{color:var(--muted)}
.pdp-versions .variant-chip.on small .amount{color:var(--accent)}
.pdp-info .product_meta{margin-top:18px;font-size:13px;color:var(--muted)}
.pdp-info .product_meta>span{display:block;margin-bottom:4px}
/* SKU already shown under the title (sku_line) → hide Woo's duplicate in meta. */
.pdp-info .product_meta .sku_wrapper{display:none}
/* Woo tabs → Pixel Cam tab look.
   The WC plugin ships a default ".woocommerce div.product .woocommerce-tabs ul.tabs li"
   rule with a 1px box border, gray background, and ::before/::after pseudo
   triangles. We strip that out so the tabs are flat (only the 2px bottom
   border on the active state) — matching the product-detail.html reference. */
.woocommerce-tabs{margin-top:56px}
.woocommerce-tabs ul.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;list-style:none;margin:0;padding:0;position:static}
.woocommerce-tabs ul.tabs::before{display:none}
.woocommerce-tabs ul.tabs li{margin:0;border:0!important;background:transparent!important;color:inherit;display:block;position:static;z-index:auto}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce-tabs ul.tabs li.active{background:transparent!important;border:0!important;color:inherit}
.woocommerce-tabs ul.tabs li a{display:block;font-size:14.5px;font-weight:600;color:var(--muted);padding:14px 22px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.15s;text-decoration:none}
.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* "(N)" count appended to review/QA tab labels (set via WooHook::product_tabs) */
.woocommerce-tabs ul.tabs li a .count{color:var(--muted);font-weight:500;font-size:13px;margin-left:5px}
/* Description panel → prose look (matches product-detail.html .pdp-tabs .panel .prose) */
.woocommerce-tabs .panel{padding:28px 0}
.woocommerce-tabs .panel .prose,
.woocommerce-tabs .panel.woocommerce-Tabs-panel--description{max-width:740px}
/* The WC default "Description" h2 is redundant (the tab is already named
   "Mô tả sản phẩm"); hide it on the description panel only. */
.woocommerce-tabs .panel.woocommerce-Tabs-panel--description>h2:first-child{display:none}
.woocommerce-tabs .panel h2,
.woocommerce-tabs .panel h3,
.woocommerce-tabs .panel h4{font-size:18px;font-weight:700;margin:24px 0 10px;letter-spacing:-.01em}
.woocommerce-tabs .panel h2:first-child,
.woocommerce-tabs .panel h3:first-child,
.woocommerce-tabs .panel h4:first-child{margin-top:0}
.woocommerce-tabs .panel p{font-size:15px;line-height:1.7;color:#333;margin:8px 0}
.woocommerce-tabs .panel ul{margin:8px 0 8px 20px;font-size:14.5px;line-height:1.7;color:#333}
.woocommerce-tabs .panel li{margin:4px 0}
/* Related / upsells reuse .grid via loop_start filter.
   Desktop follows the shop's 5-card rhythm; phones keep two cards visible
   and expose the remaining products as a native, keyboard-safe snap slider. */
.related.products,.upsells.products{padding:0;margin-top:48px;margin-bottom:clamp(48px,6vw,64px)}
.upsells.products + .related.products{margin-top:0}
.related.products>h2,.upsells.products>h2{font-size:20px;font-weight:700;margin:0 0 18px;letter-spacing:-.01em}
.related.products .grid,.upsells.products .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.related.products .grid,.upsells.products .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:780px){.related.products .grid,.upsells.products .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){
  .related.products>h2,.upsells.products>h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .related.products>h2::after,.upsells.products>h2::after{content:"Vuốt để xem thêm →";color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;white-space:nowrap}
  .related.products .grid,.upsells.products .grid{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;
    padding:2px 2px 12px;scroll-padding-inline:2px;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:var(--accent) var(--border);
    -webkit-overflow-scrolling:touch
  }
  .related.products .grid>.pcard,.upsells.products .grid>.pcard{
    flex:0 0 calc((100% - 14px)/2);min-width:0;scroll-snap-align:start;scroll-snap-stop:always
  }
  .related.products .grid::-webkit-scrollbar,.upsells.products .grid::-webkit-scrollbar{height:4px}
  .related.products .grid::-webkit-scrollbar-track,.upsells.products .grid::-webkit-scrollbar-track{background:var(--border);border-radius:999px}
  .related.products .grid::-webkit-scrollbar-thumb,.upsells.products .grid::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
}

/* ----- Cart ----- */
.woocommerce-cart .woo-content,.woocommerce-checkout .woo-content,.woocommerce-account .woo-content{padding-block:clamp(24px,4vw,40px)}
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.woocommerce table.shop_table th{text-align:left;padding:14px 16px;font-size:13px;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--border)}
.woocommerce table.shop_table td{padding:16px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.woocommerce table.shop_table img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.woocommerce .cart .quantity input{width:56px;height:38px;border:1px solid var(--border);border-radius:8px;text-align:center;font:inherit;font-family:var(--mono)}
.woocommerce a.remove{color:var(--danger);font-weight:700}
.woocommerce .cart-collaterals,.woocommerce-cart .cart-collaterals{margin-top:24px}
.woocommerce .cart_totals h2{font-size:17px;font-weight:700;margin-bottom:14px}
.woocommerce .cart_totals table{border-radius:12px}
.woocommerce .actions .button,.woocommerce .checkout-button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:1px solid transparent;border-radius:9px;padding:12px 20px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s}
.woocommerce .button.alt,.woocommerce .checkout-button,.woocommerce #place_order{background:var(--accent)}
.woocommerce button.button:hover,.woocommerce a.button:hover{filter:brightness(1.06)}
.woocommerce .button.wc-backward{background:var(--surface);color:var(--fg);border-color:var(--border)}

/* ----- Checkout ----- */
.woocommerce-checkout .col2-set,.woocommerce-checkout #customer_details{margin-bottom:24px}
.woocommerce form .form-row{margin-bottom:14px}
.woocommerce form .form-row label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection{width:100%;border:1.5px solid var(--border);background:var(--bg);padding:11px 12px;border-radius:8px;font:inherit;font-size:14px}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{border-color:var(--accent);background:var(--surface);outline:none}
.woocommerce-checkout #order_review,.woocommerce-checkout-review-order{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:22px}
.woocommerce-checkout #payment{background:transparent;border:0}
.woocommerce-checkout #payment ul.payment_methods{border:1px solid var(--border);border-radius:10px;padding:14px 16px;list-style:none;margin:0 0 16px}
.woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before{display:none !important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-left:3px solid var(--accent);background:var(--surface);border-radius:8px;padding:12px 16px;list-style:none;margin-bottom:16px;font-size:14px}
.woocommerce-error{border-left-color:var(--danger)}
.woocommerce-message{border-left-color:var(--success)}

/* ----- My Account ----- */
.woocommerce-account .woocommerce{display:block}
.woocommerce-MyAccount-navigation{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:8px}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--fg);text-decoration:none}
.woocommerce-MyAccount-navigation li a:hover{background:var(--bg)}
.woocommerce-MyAccount-navigation li.is-active a{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:600}
.woocommerce-MyAccount-content{min-width:0}
/* My Account 2-column layout (nav | content). */
.account-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:820px){.account-layout{grid-template-columns:1fr}}
/* Register block heading under the login form. */
.auth-register-heading{font-size:20px;font-weight:700;margin:0 0 14px}
.auth-note{font-size:13px;color:var(--muted);margin:0 0 14px}
.woocommerce-account:not(.logged-in) .woocommerce{display:block;max-width:960px;margin-inline:auto}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:24px}

/* ----- Blog pagination (the_posts_pagination / .page-numbers) ----- */
.pager .nav-links,.pager.pagination .nav-links{display:contents}
.pager .page-numbers{min-width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:8px;font-size:14px;font-weight:600;color:var(--fg);background:var(--surface);padding:0 12px;transition:.15s;text-decoration:none}
.pager a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pager .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager .page-numbers.dots{border:0;background:transparent}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Post tags */
.post-tags a{font-size:13px;background:var(--bg);border:1px solid var(--border);padding:6px 12px;border-radius:6px;color:var(--muted);margin-right:6px;text-decoration:none}
.post-tags a:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   IMAGE FIT — partials emit raw <img> (no .ph wrapper), so the
   .ph aspect/object-fit rules never applied. Constrain each image
   slot directly: cover fill so nothing stretches, fixed ratio/
   height so there's no CLS.
   ============================================================ */
/* (Hero side banners intentionally left as height:auto — follow the real image
   ratio, no crop, per earlier decision.) */
/* Home featured blog lead. */
.featured{overflow:hidden}
/* Blog card grid. */
.bcard{overflow:hidden}
/* Single post cover (16:9 box). */
.post-cover img{width:100%;height:100%;object-fit:cover;display:block;background:#f2f2f2}
/* About: story photo (4:3) + showroom rooms (16:9). */
.ab-story .photo img{width:100%;height:100%;object-fit:cover;display:block}
.ab-showroom .room img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#f2f2f2}
/* About: team avatar (square crop). */
.ab-team .mem .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Brand logos: contain inside the 72px cell (don't crop a logo). */
.brand-grid .b img{max-width:70%;max-height:44px;width:auto;height:auto;object-fit:contain;display:block}
/* Feature strip icon + PDP perk icon: small, contain. */
.strip .item img{width:32px;height:32px;object-fit:contain;flex-shrink:0;filter:brightness(0) saturate(100%) invert(28%) sepia(29%) saturate(1281%) hue-rotate(127deg) brightness(93%) contrast(94%)}
.pdp-perks .perk img{width:20px;height:20px;object-fit:contain;flex-shrink:0}

/* ============================================================
    SINGLE POST — RELATED SECTIONS
    ============================================================ */
.post-related,
.post-related-products {
    padding: 32px 0;
}

.post-related > h2,
.post-related-products > h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.post-related .blog-grid {
    margin-top: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.post-related-products .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.post-related-products .pcard .imgwrap {
    aspect-ratio: 1 / 1;
}

.post-related .bcard > a > img,
.post-related .bcard > img {
    aspect-ratio: 16 / 9;
}

@media (max-width: 1024px) {
    .post-related .blog-grid,
    .post-related-products .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .post-related .blog-grid,
    .post-related-products .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .post-related-products .pcard .body {
        padding: 10px 12px 12px;
    }
    .post-related-products .pcard .name {
        font-size: 13px;
        min-height: 0;
    }
    .post-related-products .pcard .price {
        font-size: 13px;
    }
    .post-related-products .pcard .addcart {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* WooCommerce Cart Page Alignment */
.cart-actions .coupon {
    display: none !important;
}

.cart-summary .checkout-button {
    background: var(--accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 48px !important;
    text-decoration: none !important;
    transition: .15s !important;
}

.cart-summary .checkout-button:hover {
    background: var(--fg) !important;
}

.cart-summary .shipping-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.cart-summary .shipping-row ul#shipping_method {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

.cart-summary .shipping-row ul#shipping_method li {
    margin-bottom: 6px !important;
    font-size: 13px !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.cart-summary .shipping-row ul#shipping_method li input[type="radio"] {
    margin: 0 !important;
}

/* Hide shipping destination text & calculator on cart page */
.cart-summary .shipping-row .woocommerce-shipping-destination,
.cart-summary .shipping-row .woocommerce-shipping-calculator,
.shipping-row .woocommerce-shipping-destination,
.shipping-row .woocommerce-shipping-calculator,
.cart_totals .woocommerce-shipping-destination,
.cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .woocommerce-shipping-calculator {
    display: none !important;
}

/* Fallback: style the shipping calculator form if it becomes visible */
.cart-summary .shipping-calculator-form,
.shipping-row .shipping-calculator-form {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 0 0 !important;
}
.cart-summary .shipping-calculator-form select,
.cart-summary .shipping-calculator-form input,
.shipping-row .shipping-calculator-form select,
.shipping-row .shipping-calculator-form input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
.cart-summary .shipping-calculator-form .form-row,
.shipping-row .shipping-calculator-form .form-row {
    width: 100% !important;
    float: none !important;
    padding: 4px 0 !important;
}
.cart-summary .shipping-calculator-form button,
.shipping-row .shipping-calculator-form button {
    margin-top: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* Update Cart button — teal accent, override WooCommerce disabled gray */
.woocommerce button.update-cart,
.woocommerce button[name="update_cart"],
.woocommerce-cart button.update-cart {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: background 0.15s !important;
}
.woocommerce button.update-cart:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce-cart button.update-cart:hover {
    background: var(--fg) !important;
}
.woocommerce button.update-cart:disabled,
.woocommerce button.update-cart[disabled],
.woocommerce button[name="update_cart"]:disabled,
.woocommerce button[name="update_cart"][disabled] {
    background: var(--accent) !important;
    color: #fff !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Cart collaterals pass-through and width overrides */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    position: sticky !important;
    top: 20px !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.cart-summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* WooCommerce Checkout Page Alignment */
@media (min-width: 600px) {
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .woocommerce-billing-fields__field-wrapper .form-row-wide,
    .woocommerce-shipping-fields__field-wrapper .form-row-wide {
        grid-column: 1 / -1 !important;
    }
}

.woocommerce-checkout .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
    float: none !important;
    width: 100% !important;
}
.woocommerce-checkout .form-row label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--fg) !important;
    margin-bottom: 0 !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    padding: 11px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: var(--surface) !important;
    color: var(--fg) !important;
    width: 100% !important;
    transition: .15s !important;
    box-sizing: border-box !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 0 !important;
    border-color: var(--accent) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: grid !important;
    gap: 10px !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    background: var(--surface) !important;
    transition: .15s !important;
    list-style-type: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--fg) !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box {
    flex-basis: 100% !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    font-size: 12.5px !important;
    color: var(--muted) !important;
    background: var(--bg) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li .payment_box::before {
    display: none !important;
}

.checkout-item-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
}
.checkout-item-thumb {
    width: 56px !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f2f2f2 !important;
    border: 1px solid var(--border) !important;
}
.checkout-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.checkout-item-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.checkout-item-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    line-height: 1.35 !important;
}
.checkout-item-qty {
    font-size: 12px !important;
    color: var(--muted) !important;
    margin-top: 2px !important;
}

.woocommerce-checkout #place_order {
    background: var(--accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 16px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 54px !important;
    cursor: pointer !important;
    transition: .15s !important;
    margin-top: 14px !important;
}
.woocommerce-checkout #place_order:hover {
    background: var(--fg) !important;
}

.co-summary .woocommerce-checkout-review-order-table th,
.co-summary .woocommerce-checkout-review-order-table td {
    padding: 12px 0 !important;
    border-bottom: 1.5px solid var(--border) !important;
    background: transparent !important;
}
.co-summary .woocommerce-checkout-review-order-table tbody td.product-total {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--fg) !important;
    text-align: right !important;
    vertical-align: middle !important;
}
.co-summary .woocommerce-checkout-review-order-table thead,
.co-summary .woocommerce-checkout-review-order-table .product-name strong.product-quantity {
    display: none !important;
}

/* Shipping Methods Layout and Overrides
 *
 * The child theme's review-order.php dumps wc_cart_totals_shipping_html()
 * directly into <tfoot> without wrapping it in <tr class="shipping">, so
 * the OLD tr.shipping selector below never matched. The shipping markup
 * is actually a loose <span class="shipping-label"> + <ul id="shipping_method">
 * inside <tfoot>. We hide both here.
 */
.co-summary .woocommerce-checkout-review-order-table tr.shipping,
.co-summary .shipping-label,
.co-summary #shipping_method,
.co-summary .woocommerce-shipping-methods {
    display: none !important;
}
.ship-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
}
@media (max-width: 600px) {
    .ship-options {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}
.ship-opt {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    background: var(--surface) !important;
    transition: .15s !important;
}
.ship-opt:has(input:checked) {
    border-color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}
.ship-opt input[type="radio"] {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
.ship-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 13px !important;
    color: var(--fg) !important;
}
.ship-info b {
    font-weight: 600 !important;
    font-size: 14px !important;
}
.ship-info small {
    color: var(--muted) !important;
    font-size: 12px !important;
}

/* Order Received / Thank You Page Styling */
@media (min-width: 860px) {
    .woocommerce-order {
        display: grid !important;
        grid-template-columns: 1fr 360px !important;
        gap: 28px !important;
        align-items: start !important;
    }
    /* Full width elements */
    .woocommerce-order > .woocommerce-notice,
    .woocommerce-order > .woocommerce-order-overview {
        grid-column: 1 / -1 !important;
    }
    /* Right column elements */
    .woocommerce-order > .woocommerce-customer-details {
        grid-column: 2 !important;
        grid-row: 3 / span 20 !important;
    }
    /* Left column elements */
    .woocommerce-order > :not(.woocommerce-notice):not(.woocommerce-order-overview):not(.woocommerce-customer-details) {
        grid-column: 1 !important;
    }
}

.woocommerce-order-overview {
    list-style: none !important;
    padding: 18px 24px !important;
    margin: 0 0 28px 0 !important;
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    font-size: 13.5px !important;
    color: var(--muted) !important;
}
.woocommerce-order-overview li {
    flex: 1 !important;
    min-width: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-right: 1px solid var(--border) !important;
}
.woocommerce-order-overview li:last-child {
    border-right: 0 !important;
}
@media (max-width: 600px) {
    .woocommerce-order-overview li {
        border-right: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        padding-bottom: 12px !important;
    }
    .woocommerce-order-overview li:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}
.woocommerce-order-overview li strong {
    font-size: 15px !important;
    color: var(--fg) !important;
    font-weight: 600 !important;
}

p.woocommerce-notice.woocommerce-thankyou-order-received {
    background: color-mix(in srgb, var(--success) 8%, transparent) !important;
    border: 1.5px solid var(--success) !important;
    color: var(--success) !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 24px !important;
}

.woocommerce-order-details {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin: 0 0 28px 0 !important;
}
.woocommerce-order-details__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin-bottom: 18px !important;
    border-bottom: 1.5px solid var(--border) !important;
    padding-bottom: 10px !important;
}
.woocommerce-order-details table.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 0 !important;
    margin: 0 !important;
}
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--fg) !important;
    font-size: 14px !important;
    text-align: left !important;
}
.woocommerce-order-details table.shop_table tbody td {
    font-weight: 600 !important;
}
.woocommerce-order-details table.shop_table tbody td a {
    color: var(--fg) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.woocommerce-order-details table.shop_table tbody td a:hover {
    color: var(--accent) !important;
}
.woocommerce-order-details table.shop_table tfoot th {
    font-weight: 500 !important;
    color: var(--muted) !important;
}
.woocommerce-order-details table.shop_table tfoot td {
    text-align: right !important;
    font-weight: 600 !important;
}
.woocommerce-order-details table.shop_table tfoot tr:last-child th,
.woocommerce-order-details table.shop_table tfoot tr:last-child td {
    border-bottom: 0 !important;
    font-size: 16px !important;
}
.woocommerce-order-details table.shop_table tfoot tr:last-child td span.amount {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.woocommerce-customer-details {
    background: var(--surface) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin: 0 !important;
}
.woocommerce-customer-details h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin-bottom: 18px !important;
    border-bottom: 1.5px solid var(--border) !important;
    padding-bottom: 10px !important;
}
.woocommerce-customer-details address {
    font-style: normal !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--fg) !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.woocommerce-columns--addresses,
.woocommerce-columns.addresses,
.woocommerce-account .woocommerce-columns--addresses,
.woocommerce-checkout .woocommerce-columns--addresses,
.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-top: 24px !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
}
.woocommerce-columns--addresses::before,
.woocommerce-columns--addresses::after,
.woocommerce-Addresses::before,
.woocommerce-Addresses::after {
    display: none !important;
    content: none !important;
}
@media (max-width: 600px) {
    .woocommerce-columns--addresses,
    .woocommerce-columns.addresses,
    .woocommerce-account .woocommerce-columns--addresses,
    .woocommerce-checkout .woocommerce-columns--addresses,
    .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }
}
.woocommerce-columns--addresses .woocommerce-column,
.woocommerce-columns--addresses .col-1,
.woocommerce-columns--addresses .col-2,
.woocommerce-columns.addresses .col-1,
.woocommerce-columns.addresses .col-2,
.woocommerce-account .woocommerce-columns--addresses .woocommerce-column,
.woocommerce-checkout .woocommerce-columns--addresses .woocommerce-column,
.woocommerce-Addresses .woocommerce-Address,
.woocommerce-Addresses .col-1,
.woocommerce-Addresses .col-2 {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    float: none !important;
    clear: none !important;
}
.woocommerce-columns--addresses .woocommerce-column h2,
.woocommerce-columns--addresses .woocommerce-column h3,
.woocommerce-columns.addresses .col-1 h2,
.woocommerce-columns.addresses .col-2 h2,
.woocommerce-Addresses .woocommerce-Address h2,
.woocommerce-Addresses .col-1 h2,
.woocommerce-Addresses .col-2 h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin: 0 0 8px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
}
.woocommerce-columns--addresses .woocommerce-column address,
.woocommerce-columns.addresses .col-1 address,
.woocommerce-columns.addresses .col-2 address,
.woocommerce-Addresses .woocommerce-Address address,
.woocommerce-Addresses .col-1 address,
.woocommerce-Addresses .col-2 address {
    font-style: normal !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--fg) !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Fix button text color and underlines being overridden by .prose styling */
.prose a.btn {
    text-decoration: none !important;
}
.prose a.btn-primary,
.prose a.btn-primary:hover {
    color: #fff !important;
}
.prose a.btn-ghost,
.prose a.btn-ghost:hover {
    color: var(--fg) !important;
}

/* WooCommerce My Account Styling overrides */
.woocommerce-account .woocommerce {
    max-width: 1200px !important;
    margin-inline: auto !important;
}

/* Sidebar & Info Card overrides */
.acc-side .woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    float: none !important;
}
.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.woocommerce-MyAccount-navigation li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: var(--fg) !important;
    text-decoration: none !important;
    transition: .15s !important;
}
.woocommerce-MyAccount-navigation li a:hover {
    background: var(--bg) !important;
}
.woocommerce-MyAccount-navigation li.is-active a {
    background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}
/* Style customer-logout link text as danger red */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--danger) !important;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
}

/* Dashboard Greeting Block overrides */
.woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
}
.woocommerce-MyAccount-content > p:first-of-type {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    color: var(--fg) !important;
    display: block !important;
}
.woocommerce-MyAccount-content > p:first-of-type strong {
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* Grid layout for Login / Register page */
.woocommerce .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-bottom: 24px !important;
}
@media (max-width: 768px) {
    .woocommerce .col2-set {
        grid-template-columns: 1fr !important;
    }
}

/* Forms inside My Account (Login, register, edit account, edit address) */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper {
    display: grid !important;
    gap: 16px !important;
}
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: 14px !important;
    padding: 32px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}
.woocommerce-EditAccountForm fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    display: grid !important;
    gap: 16px !important;
}
.woocommerce-EditAccountForm legend {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
}
.woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    margin-top: 14px !important;
}
@media (max-width: 600px) {
    .woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }
}
.woocommerce-Address {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    border-radius: 14px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    float: none !important;
}
.woocommerce-Address header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}
.woocommerce-Address header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    margin: 0 !important;
}
.woocommerce-Address header a.edit {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}
.woocommerce-Address header a.edit:hover {
    color: var(--accent-80) !important;
}
.woocommerce-form-row,
.woocommerce-address-fields__field-wrapper .form-row {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.woocommerce-form-row label,
.woocommerce-address-fields__field-wrapper .form-row label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--fg) !important;
    margin: 0 !important;
}
.woocommerce-form-row input.input-text,
.woocommerce-address-fields__field-wrapper .form-row input.input-text,
.woocommerce-address-fields__field-wrapper .form-row select {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 9px !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: border-color .15s !important;
    box-sizing: border-box !important;
}
.woocommerce-form-row input.input-text:focus,
.woocommerce-address-fields__field-wrapper .form-row input.input-text:focus,
.woocommerce-address-fields__field-wrapper .form-row select:focus {
    border-color: var(--accent) !important;
    outline: 0 !important;
}

/* Desktop layout for side-by-side edit account / address form fields */
@media (min-width: 600px) {
    .woocommerce-EditAccountForm .woocommerce-form-row--first,
    .woocommerce-address-fields__field-wrapper .form-row-first {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce-EditAccountForm .woocommerce-form-row--last,
    .woocommerce-address-fields__field-wrapper .form-row-last {
        width: 100% !important;
        float: none !important;
    }
}

/* Edit Address / Account Buttons styling */
.woocommerce-form-login button.button,
.woocommerce-form-register button.button,
.woocommerce-EditAccountForm button.button,
.woocommerce-address-fields button.button {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: .15s !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    align-self: start !important;
}
.woocommerce-form-login button.button:hover,
.woocommerce-form-register button.button:hover,
.woocommerce-EditAccountForm button.button:hover,
.woocommerce-address-fields button.button:hover {
    background: var(--accent-80) !important;
}

/* Orders Table styling overrides */
table.my_account_orders {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
table.my_account_orders th,
table.my_account_orders td {
    padding: 16px 20px !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--border) !important;
    text-align: left !important;
    color: var(--fg) !important;
}
table.my_account_orders th {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important;
    font-weight: 600 !important;
    color: var(--fg) !important;
    border-bottom: 2px solid var(--border) !important;
}
table.my_account_orders tr:last-child td {
    border-bottom: 0 !important;
}
table.my_account_orders td.woocommerce-orders-table__cell-order-actions a.button {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: var(--surface) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    text-decoration: none !important;
    transition: .15s !important;
}
table.my_account_orders td.woocommerce-orders-table__cell-order-actions a.button:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--bg) !important;
}

/* Status Pills inside order table */
table.my_account_orders mark.order-status {
    background: var(--bg) !important;
    color: var(--fg) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
}
table.my_account_orders mark.order-status.status-processing {
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    color: var(--accent) !important;
}
table.my_account_orders mark.order-status.status-completed {
    background: color-mix(in srgb, var(--success) 15%, transparent) !important;
    color: var(--success) !important;
}
table.my_account_orders mark.order-status.status-on-hold {
    background: color-mix(in srgb, var(--warning) 15%, transparent) !important;
    color: var(--warning) !important;
}
table.my_account_orders mark.order-status.status-cancelled,
table.my_account_orders mark.order-status.status-failed {
    background: color-mix(in srgb, var(--danger) 15%, transparent) !important;
    color: var(--danger) !important;
}

/* Ensure the registration submit button matches the login button color */
.auth-narrow button.woocommerce-form-register__submit,
.woocommerce-form-register button.woocommerce-form-register__submit {
    background: var(--accent) !important;
    color: #fff !important;
}
.auth-narrow button.woocommerce-form-register__submit:hover,
.woocommerce-form-register button.woocommerce-form-register__submit:hover {
    background: var(--accent-80) !important;
    color: #fff !important;
}

/* ============================================================ *
 * 404 — camera "out of focus" / aperture concept
 * ============================================================ */
.e404{
  max-width:640px;margin-inline:auto;text-align:center;
  padding-block:clamp(24px,6vw,64px);
}
.e404-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
/* 4 [aperture] 4 — mono/tabular so the digits sit even with the iris */
.e404-code{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);
  line-height:1;margin-bottom:28px;
}
.e404-digit{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(88px,20vw,180px);font-weight:800;letter-spacing:-.04em;
  color:var(--fg);
  /* subtle "defocus" bloom in the brand teal */
  text-shadow:0 8px 40px var(--accent-80);
}
/* the 0 = a 6-blade camera iris built from clipped teal segments */
.e404-aperture{
  --sz:clamp(84px,19vw,172px);
  position:relative;width:var(--sz);height:var(--sz);flex:none;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#fff 0 22%,transparent 23%),
    conic-gradient(from 0deg,var(--accent),var(--accent-80),var(--accent));
  box-shadow:0 10px 40px var(--accent-80),inset 0 0 0 4px var(--surface);
  overflow:hidden;
  animation:e404-iris 8s ease-in-out infinite;
}
/* six blade edges radiating from centre — thin surface-coloured wedges */
.e404-aperture span{
  position:absolute;top:50%;left:50%;width:50%;height:2px;
  background:var(--surface);opacity:.55;transform-origin:left center;
}
.e404-aperture span:nth-child(1){transform:rotate(0deg)}
.e404-aperture span:nth-child(2){transform:rotate(60deg)}
.e404-aperture span:nth-child(3){transform:rotate(120deg)}
.e404-aperture span:nth-child(4){transform:rotate(180deg)}
.e404-aperture span:nth-child(5){transform:rotate(240deg)}
.e404-aperture span:nth-child(6){transform:rotate(300deg)}
@keyframes e404-iris{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(30deg) scale(.94)}
}
/* Respect users who don't want motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .e404-aperture{animation:none}
}
.e404-title{
  font-family:var(--font);font-size:clamp(22px,3.4vw,32px);font-weight:700;
  letter-spacing:-.02em;margin-bottom:12px;color:var(--fg);
}
.e404-lead{
  font-size:16px;line-height:1.7;color:var(--muted);
  max-width:44ch;margin:0 auto 28px;
}
.e404-search{max-width:440px;margin:0 auto 22px}
/* Self-contained: header .hdr-search is display:none on mobile and relies on
   a flex parent, so re-declare here instead of leaning on it. */
.e404-search .hdr-search{display:flex !important;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.e404-search .hdr-search input{flex:1;border:0;padding:10px 14px;font:inherit;font-size:14px;min-width:0;outline:none}
.e404-search .hdr-search button{flex:none;border:0;background:var(--accent);color:#fff;padding:0 18px;cursor:pointer;font-weight:600;font-size:14px}
.e404-search .hdr-search:focus-within{border-color:var(--accent)}
.e404-search .hdr-search button:hover{background:var(--accent-80)}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.search-results .main {margin-bottom: 2rem;}

/* ===== UTILITY CLASSES (replaces inline styles) ===== */
/* Section padding modifiers — used when a section needs to sit flush
   against the previous element. Default `section` has 36–56px top pad. */
.section--flush{padding-top:0}
.section--no-y{padding-block:0}

/* Cart coupon block (WooCommerce cart-totals) */
.cart-coupon-row{display:flex;gap:8px;margin-bottom:14px}
.cart-coupon-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.cart-coupon-input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:14px}
.cart-coupon-btn{padding:10px 14px}

/* Newsletter signup block (blog sidebar) — accent-gradient CTA card */
.block--newsletter{background:linear-gradient(135deg,var(--accent),var(--accent-80));color:#fff;border-color:transparent}
.block--newsletter h4{color:#fff;opacity:.85}
.block--newsletter p{font-size:14px;opacity:.95;margin-bottom:14px}
.block--newsletter input{width:100%;padding:10px 12px;border-radius:8px;border:0;font:inherit;font-size:14px;margin-bottom:8px}
.block--newsletter button{width:100%;background:#fff;color:var(--accent);border:0;border-radius:8px;padding:10px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.block--newsletter .ok{display:block;text-align:center;margin-top:8px;font-size:12.5px;opacity:.9;min-height:16px}

/* Sitemap (template-sitemap.php) */
.sitemap-section{margin-bottom:36px}
.sitemap-section h2{font-size:18px;margin-bottom:14px;margin-top:0}
.sitemap-list{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
.sitemap-list--spaced{gap:10px}

/* Active filter label (WooHook sel span) */
.sel{font-weight:500;color:var(--muted);margin-left:4px}

/* Admin menu icon picker (MenuHook) */
.pxc-icon-preview{display:inline-block;vertical-align:middle;margin-right:8px}
.pxc-icon-preview img{width:24px;height:24px;object-fit:contain}
/* Utility: hide element entirely (used by JS toggles + initial states) */
.is-hidden{display:none}
.pxc-icon-remove.is-hidden{display:none}
.pxc-icon-remove{color:#b32d2e;margin-left:6px}

/* SEO intro/outro (collapsible content blocks on term archives)
 * No fixed max-width — inherit from the parent .wrap (1200px sitewide) so
 * the block spans the same width as the product / post grid above it.
 * The block's own padding handles the gap to the parent's edge on small
 * screens; the parent .wrap supplies the side padding on larger ones. */
.seo-block{margin:24px 0;padding:0;position:relative}
/* The .prose class on .seo-block__inner brings the typography (h2/h3/p/a) but
 * also the 68ch reading-column cap. We want the typography but NOT the cap
 * here — the block already lives in a constrained container, and the cap
 * would indent long body copy from the rest of the archive. */
.seo-block__inner.prose{max-width:none}
.seo-block__inner{display:-webkit-box;-webkit-line-clamp:var(--clamp,4);-webkit-box-orient:vertical;overflow:hidden;line-height:1.7;color:var(--fg);font-size:15px}
.seo-block--intro .seo-block__inner{-webkit-line-clamp:3}
.seo-block--outro .seo-block__inner{-webkit-line-clamp:4}
.seo-block.is-expanded .seo-block__inner{display:block;overflow:visible;-webkit-line-clamp:unset}
.seo-block__inner p{margin:0 0 1em}
.seo-block__inner p:last-child{margin-bottom:0}
.seo-block__inner img{max-width:100%;height:auto;border-radius:8px;margin:1em auto;display:block}
.seo-block__inner h2,.seo-block__inner h3{font-size:18px;font-weight:700;margin:1.2em 0 .5em}
.seo-block__inner a{color:var(--accent);text-decoration:underline}
.seo-block__toggle{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:9px 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.seo-block__toggle:hover{border-color:var(--accent);color:var(--accent)}
.seo-block__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seo-block__toggle-icon{transition:transform .2s}
.seo-block.is-expanded .seo-block__toggle-icon{transform:rotate(180deg)}
.seo-block__toggle .seo-block__toggle-text{line-height:1}
.seo-block--no-toggle .seo-block__toggle{display:none}