/*
Theme Name: Loki Sport UK
Theme URI: https://lokisportuk.example
Author: Loki Sport UK
Author URI: https://lokisportuk.example
Description: The UK Loki specialist theme for performance table tennis equipment. Built for WooCommerce, with dynamic best-seller and category modules, an explainable Find Your Setup quiz, and a Build My Bat configurator.
Version: 1.1.101
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loki-sport-uk
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

@font-face{font-family:'Unbounded';font-weight:100 900;font-style:normal;src:url('assets/fonts/unbounded.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Work Sans';font-weight:100 900;font-style:normal;src:url('assets/fonts/worksans.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-style:normal;src:url('assets/fonts/jetbrainsmono.woff2') format('woff2');font-display:swap;}

:root{
  --bg:#ffffff;
  --bg-alt:#f4f4f5;
  --surface:#ffffff;
  --surface-2:#f4f4f5;
  --text:#111111;
  --text-muted:#595959;
  --border:#e5e5e5;
  --accent:#A62C1F;
  --accent-soft:#C4483A;
  --accent-on-ink:#E9846F;
  --accent-ink:#ffffff;
  --jade:#2E6B50;
  --jade-soft:#3F8567;
  --gold:#916B31;
  --shadow:rgba(32,24,10,0.14);
  --scrim:rgba(20,15,7,0.58);
  --scrim-soft:rgba(20,15,7,0.22);

  --font-display:'Unbounded', system-ui, sans-serif;
  --font-body:'Work Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* The theme's tick, as a mask source so it can be tinted with
     currentColor wherever it is used. Same path and 2px stroke as the
     inline SVG in front-page.php's trust strip -- one drawn tick, not a
     per-context glyph. Not redeclared for dark mode: a mask carries no
     colour of its own. */
  --icon-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15130E;
    --bg-alt:#1C1811;
    --surface:#1F1C15;
    --surface-2:#28241A;
    --text:#f4f4f5;
    --text-muted:#a1a1aa;
    --border:#27272a;
    --accent:#DE5C46;
    --accent-soft:#E9846F;
    --accent-on-ink:#A62C1F;
    --accent-ink:#170F0A;
    --jade:#63B08C;
    --jade-soft:#84C6A6;
    --gold:#CBA25C;
    --shadow:rgba(0,0,0,0.45);
    --scrim:rgba(6,4,2,0.66);
    --scrim-soft:rgba(6,4,2,0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15130E;
  --bg-alt:#1C1811;
  --surface:#1F1C15;
  --surface-2:#28241A;
  --text:#f4f4f5;
  --text-muted:#a1a1aa;
  --border:#27272a;
  --accent:#DE5C46;
  --accent-soft:#E9846F;
  --accent-on-ink:#A62C1F;
  --accent-ink:#170F0A;
  --jade:#63B08C;
  --jade-soft:#84C6A6;
  --gold:#CBA25C;
  --shadow:rgba(0,0,0,0.45);
  --scrim:rgba(6,4,2,0.66);
  --scrim-soft:rgba(6,4,2,0.3);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  width:100%;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
@media (max-width:720px){.wrap{padding:0 18px;}}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
[id]{scroll-margin-top:84px;}
.price, .specbar, .specbars, table, .table, .tnum, .comparetile, .lk-compare-table{font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.7rem;
  font-weight:600;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--accent);display:inline-block;}
.eyebrow.jade{color:var(--jade);}
.eyebrow.jade::before{background:var(--jade);}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;z-index:9999;font-family:var(--font-mono);font-size:0.8rem;
  font-weight:600;text-decoration:none;border-radius:0 0 4px 4px;
}
.skip-link:focus, .skip-link:focus-visible{
  left:16px;top:0;outline:2px solid var(--accent-ink);outline-offset:2px;
}

/* ---------- seal motif ---------- */
.seal{
  width:38px;height:38px;border-radius:3px;
  background:var(--accent);
  color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 10px var(--shadow);
}
.seal svg{width:22px;height:22px;}

/* ---------- top bar ---------- */
.topbar{
  background:#0E0C09;
  border-bottom:1px solid rgba(255, 255, 255, 0.08);
  font-family:var(--font-mono);
  font-size:0.76rem;
  letter-spacing:0.04em;
  color:#e5e5e5;
}
.topbar .wrap,
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:8px;
  padding-bottom:8px;
  gap:16px;
}
.topbar-item,
.topbar span{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.topbar-dot,
.topbar .dot{
  color:#DE5C46;
  margin:0 10px;
  display:inline-block;
  font-family:system-ui, -apple-system, sans-serif;
  font-size:0.85rem;
  line-height:1;
  vertical-align:middle;
}
@media (max-width:768px){
  .topbar .wrap,
  .topbar-inner{
    justify-content:center;
    text-align:center;
    gap:0;
    padding-top:7px;
    padding-bottom:7px;
  }
  .topbar-item--main{
    justify-content:center;
    text-align:center;
    font-size:0.72rem;
    line-height:1.4;
    white-space:nowrap;
    width:100%;
  }
  .topbar-dot,
  .topbar .dot{
    margin:0 8px;
    color:#DE5C46;
    display:inline-block !important;
  }
  .topbar-item--guarantee{
    display:none !important;
  }
}
@media (max-width:360px){
  .topbar-item--main{
    font-size:0.68rem;
  }
  .topbar-dot,
  .topbar .dot{
    margin:0 5px;
  }
}

/* ---------- restock banner ----------
   Temporary sitewide notice for the pre-launch restock window — see
   inc/restock-banner.php for removal instructions once stock is back. */
.restock-banner{background:var(--accent);color:var(--accent-ink);}
.restock-banner__inner{
  display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;
  padding-top:12px;padding-bottom:12px;position:relative;padding-right:40px;
}
.restock-banner__msg{font-size:0.86rem;font-weight:600;margin:0;flex:1 1 260px;}
.restock-banner__form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:0 0 auto;}
.restock-banner__hp,
.loki-stock-notify__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.restock-banner__form input[type="email"]{
  padding:9px 12px;border-radius:3px;border:1px solid transparent;
  font-family:var(--font-body);font-size:0.86rem;min-width:220px;
  background:var(--accent-ink);color:var(--text);
}
.restock-banner__form input[type="email"]::placeholder{color:var(--text-muted);}
.restock-banner__form input[type="email"]:focus{outline:2px solid var(--accent-ink);outline-offset:2px;}
.restock-banner__form button{
  padding:9px 18px;border-radius:3px;border:1px solid var(--accent-ink);
  background:transparent;color:var(--accent-ink);font-weight:600;font-size:0.82rem;
  cursor:pointer;white-space:nowrap;transition:background .18s ease, color .18s ease;
}
.restock-banner__form button:hover{background:var(--accent-ink);color:var(--accent);}
.restock-banner__form button:disabled{opacity:0.6;cursor:default;}
.restock-banner__status{margin:0;font-size:0.84rem;font-weight:600;flex:1 1 100%;}
.restock-banner__status.is-error{text-decoration:underline;}
.restock-banner__close{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  background:transparent;border:none;color:var(--accent-ink);cursor:pointer;
  padding:6px;display:flex;align-items:center;justify-content:center;
  opacity:0.75;transition:opacity .18s ease;
}
.restock-banner__close:hover{opacity:1;}
.restock-banner__close svg{width:16px;height:16px;}
@media (max-width:640px){
  .restock-banner__form{width:100%;}
  .restock-banner__form input[type="email"]{flex:1;min-width:0;}
}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:#0E0C09;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255, 255, 255, 0.08);
}
.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;gap:24px;
}
.nav-left{display:flex;align-items:center;gap:14px;min-width:0;flex-shrink:0;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex-shrink:0;}
.brand .seal{
  width:38px;height:38px;border-radius:50%;
  background:#262018;border:1px solid #dfb15b;
  display:flex;align-items:center;justify-content:center;
  color:#dfb15b;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(223, 177, 91, 0.25);
  transition:all .2s ease;
}
.brand .seal svg{width:22px;height:22px;stroke:#dfb15b;}
.brand:hover .seal{
  border-color:#ffffff;color:#ffffff;
  box-shadow:0 0 16px rgba(223, 177, 91, 0.45);
}
.brand:hover .seal svg{stroke:#ffffff;}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.brand-word{
  font-family:var(--font-display);font-weight:900;font-size:1.45rem;
  letter-spacing:-0.01em;color:#ffffff;line-height:1;text-transform:uppercase;
  white-space:nowrap;
}
.brand-sub{
  font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.14em;
  font-weight:700;color:#dfb15b;text-transform:uppercase;line-height:1.2;
  margin-top:3px;white-space:nowrap;
}
.brand-uk{
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.12em;
  color:#A89F8E;border:1px solid rgba(255, 255, 255, 0.15);border-radius:3px;
  padding:2px 6px;white-space:nowrap;align-self:flex-start;
}
@media (max-width:600px){
  .brand-word{font-size:1.18rem;}
  .brand-sub{font-size:0.58rem;letter-spacing:0.12em;}
  .brand-uk{display:none;}
  .nav{gap:8px;padding-top:12px;padding-bottom:12px;}
  .nav-left{gap:8px;}
  .brand{gap:8px;}
  .seal{width:34px;height:34px;}
  .seal svg{width:20px;height:20px;}
  .navactions{gap:8px;}
  .iconbtn, .navtoggle{width:34px;height:34px;}
  .iconbtn svg, .navtoggle svg{width:16px;height:16px;}
}
@media (max-width:360px){
  .nav{gap:6px;}
  .navactions{gap:5px;}
  .brand-word{font-size:1.05rem;}
  .brand-sub{font-size:0.52rem;letter-spacing:0.08em;}
  .seal{width:30px;height:30px;}
  .seal svg{width:18px;height:18px;}
  .iconbtn, .navtoggle{width:32px;height:32px;}
}
.navlinks{display:flex;gap:clamp(10px, 1.3vw, 20px);list-style:none;margin:0;padding:0;flex-wrap:nowrap;align-items:center;}
@media (max-width: 1260px) and (min-width: 1151px){
  .navlinks a, .navdrop-trigger{font-size:0.84rem;}
  .nav{gap:12px;}
}
.navlinks li{display:flex;align-items:center;}
.navlinks a{
  text-decoration:none;font-size:0.95rem;font-weight:700;color:#e5e5e5;
  position:relative;padding-bottom:3px;
  transition:color .2s ease;
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#dfb15b;transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.navlinks a:hover::after, .navlinks .current-menu-item a::after{transform:scaleX(1);}
.navlinks a:hover{color:#dfb15b;}

/* ---------- "Find Your Setup" tools dropdown ---------- */
.navlinks li.has-dropdown{position:relative;}
.navlinks li.has-dropdown > a{display:flex;align-items:center;gap:4px;}
.navdrop-trigger{
  display:flex;align-items:center;gap:4px;
  background:none;border:none;padding:0 0 3px;margin:0;cursor:pointer;
  font-family:inherit;text-decoration:none;font-size:0.95rem;font-weight:700;color:#e5e5e5;
  position:relative;
  transition:color .2s ease;
}
.navdrop-trigger:hover{color:#dfb15b;}
.navdrop-trigger::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#dfb15b;transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.navlinks li.has-dropdown:hover .navdrop-trigger::after,
.navlinks li.has-dropdown:focus-within .navdrop-trigger::after{transform:scaleX(1);}
.navdrop-chevron{width:13px;height:13px;stroke:currentColor;transition:transform .2s ease;}
.navlinks li.has-dropdown:hover .navdrop-chevron,
.navlinks li.has-dropdown:focus-within .navdrop-chevron{transform:rotate(180deg);}
.navdrop{
  list-style:none;margin:0;padding:0.5rem;position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(4px);min-width:220px;
  background:#141210;border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:40;
}
.navlinks li.has-dropdown:hover .navdrop,
.navlinks li.has-dropdown:focus-within .navdrop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.navdrop li{display:block;}
.navdrop a{
  display:block;padding:0.55rem 0.75rem;border-radius:8px;font-size:0.88rem;
  font-weight:500;color:#e5e5e5;text-decoration:none;white-space:nowrap;
}
.navdrop a::after{content:none;}
.navdrop a:hover, .navdrop a:focus-visible{background:rgba(255, 255, 255, 0.06);color:#dfb15b;}
.navdrop-col ul{list-style:none;margin:0;padding:0;}
.navdrop--mega{display:flex;align-items:flex-start;min-width:460px;}
.navdrop--mega .navdrop-col{flex:1;padding:0 0.35rem;}
.navdrop--mega .navdrop-col:first-child{padding-left:0;}
.navdrop--mega .navdrop-col:last-child{padding-right:0;}
.navdrop--mega .navdrop-col + .navdrop-col{
  border-left:1px solid rgba(255, 255, 255, 0.08);margin-left:0.35rem;padding-left:0.65rem;
}
.navdrop-col__label{
  display:block;font-family:var(--font-mono);font-size:0.65rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:#dfb15b;
  padding:0.4rem 0.75rem 0.3rem;
}
.navactions{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.iconbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.14);
  display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.06);
  cursor:pointer;transition:border-color .2s, transform .2s, background .2s;
  text-decoration:none;position:relative;
}
.iconbtn:hover{border-color:#dfb15b;background:rgba(255, 255, 255, 0.12);transform:translateY(-1px);}
.iconbtn svg{width:17px;height:17px;stroke:#e5e5e5;}
.iconbtn:hover svg{stroke:#dfb15b;}
.cart-count{
  position:absolute;top:-6px;right:-6px;background:#B3261E;color:#ffffff;
  font-family:var(--font-mono);font-size:0.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  box-shadow:0 2px 6px rgba(179,38,30,0.5);
}
.navtoggle{display:none;}
@media (max-width:1150px){
  .navlinks{display:none;}
  .navtoggle{
    display:flex;width:38px;height:38px;border-radius:50%;border:1px solid rgba(223, 177, 91, 0.4);
    align-items:center;justify-content:center;background:rgba(223, 177, 91, 0.08);cursor:pointer;
    color:#dfb15b;
    transition:border-color .2s, background .2s, color .2s;
  }
  .navtoggle:hover{border-color:#dfb15b;background:rgba(223, 177, 91, 0.18);color:#ffffff;}
  .navtoggle svg{width:18px;height:18px;stroke:#dfb15b;}
  .navtoggle:hover svg{stroke:#ffffff;}
}

/* ---------- shop-by-category strip (Quick-Grid) ---------- */
.cat-strip, .series-strip {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-strip::-webkit-scrollbar, .series-strip::-webkit-scrollbar {
  display: none;
}
.cat-strip-inner, .series-strip-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}
.cat-strip-head {
  display: none !important;
}
.cat-strip-label, .series-strip-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-strip-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBA25C;
}
.cat-strip-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.8;
}
@media (max-width: 600px) {
  .cat-strip-sub { display: none; }
}

/* 8-Column Desktop / Responsive Quick-Grid */
.cat-quickgrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-quickgrid::-webkit-scrollbar {
  display: none;
}
.cat-quickcard {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.8,.4,1), border-color .18s ease, box-shadow .18s ease, background .18s ease;
  min-height: 44px;
}
.cat-quickcard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.4,1);
}
.cat-quickcard:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.cat-quickcard:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.cat-quickcard:active {
  transform: scale(0.98);
}
.cat-quickcard-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B88E3E;
  transition: color .18s ease, transform .18s ease;
}
.cat-quickcard:hover .cat-quickcard-icon {
  color: #CBA25C;
  transform: scale(1.1);
}
.cat-quickcard-icon svg {
  width: 17px;
  height: 17px;
}
.cat-quickcard-body {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.cat-quickcard-name {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.cat-quickcard-count {
  position: absolute;
  top: 3px;
  right: 5px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}

/* Tablet & Mobile Breakpoints for Quickgrid */
@media (max-width: 1120px) {
  .cat-quickgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .cat-quickcard-name {
    font-size: 0.78rem;
  }
  .cat-quickcard-count {
    position: static;
    margin-left: auto;
    font-size: 0.65rem;
    padding: 1px 5px;
  }
}
@media (max-width: 768px) {
  .cat-strip-inner, .series-strip-inner {
    padding-top: 6px;
    padding-bottom: 8px;
  }
  .cat-strip-head {
    display: none !important;
  }
  .cat-quickcard--desktop-only {
    display: none !important;
  }
  .cat-quickgrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
  }
  .cat-quickcard[data-cat="blades"] { order: 1; }
  .cat-quickcard[data-cat="rubbers"] { order: 2; }
  .cat-quickcard[data-cat="clothing"] { order: 3; }
  .cat-quickcard[data-cat="shoes"] { order: 4; }
  .cat-quickcard {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3px;
    padding: 7px 2px;
    min-height: 54px;
    border-radius: 6px;
  }
  .cat-quickcard-icon {
    width: 20px;
    height: 20px;
  }
  .cat-quickcard-icon svg {
    width: 18px;
    height: 18px;
  }
  .cat-quickcard-body {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
  }
  .cat-quickcard-name {
    font-size: 0.64rem;
    letter-spacing: -0.02em;
    max-width: 100%;
    white-space: nowrap;
  }
  .cat-quickcard-count {
    display: none !important; /* Keep mobile tiles clean and legible */
  }
}

/* Legacy series-strip-row fallback */
.series-strip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;position:relative;}
.series-strip-row::-webkit-scrollbar{display:none;}
.series-chip{
  flex-shrink:0;display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:8px 16px;text-decoration:none;
  transition:border-color .2s ease;
}
.series-chip:hover{border-color:var(--accent);}
.series-chip b{font-family:var(--font-display);font-size:0.82rem;color:var(--text);font-weight:700;}
.series-chip span{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);}

/* ---------- Mobile Sticky Bottom Navigation Bar ---------- */
.mobile-bottom-bar {
  display: none; /* Hidden on desktop */
}
@media (max-width: 768px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(18, 16, 14, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(203, 162, 92, 0.25);
    box-shadow: 0 -1px 0 rgba(203, 162, 92, 0.15), 0 -8px 24px rgba(0,0,0,0.45);
  }
  .mob-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    color: #D4B679; /* Warm readable gold */
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .15s ease;
  }
  .mob-bar-item:hover,
  .mob-bar-item:active {
    color: #ffffff;
  }
  .mob-bar-item.active {
    color: #ffffff;
  }
  .mob-bar-item.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 2px;
    background: #CBA25C;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 2px 8px rgba(203, 162, 92, 0.6);
  }
  .mob-bar-item.mob-bar-deals {
    color: #F0C46B;
  }
  .mob-bar-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: inherit;
  }
  .mob-bar-icon svg {
    width: 20px;
    height: 20px;
  }
  .mob-bar-label {
    font-family: var(--font-display);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    color: inherit;
  }
  .mob-bar-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: #CBA25C;
    color: #12100E;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
}

/* ---------- mobile nav drawer (Nike Inspired Athletic Style) ---------- */
.mobile-drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;overflow:hidden;}
.mobile-drawer.open{visibility:visible;pointer-events:auto;}
.mobile-drawer-scrim{position:absolute;inset:0;background:rgba(10,8,7,0.75);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease;}
.mobile-drawer.open .mobile-drawer-scrim{opacity:1;}
.mobile-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(380px,92vw);
  background:#0E0C09;box-shadow:-20px 0 50px rgba(0,0,0,0.75);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1);
  color:#e5e5e5;border-left:1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0);}

/* Drawer Top Bar */
.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid rgba(255, 255, 255, 0.08);background:#14110E;
  flex-shrink:0;
}
.drawer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.drawer-seal{
  width:34px;height:34px;border-radius:50%;
  background:#262018;border:1px solid #dfb15b;
  display:flex;align-items:center;justify-content:center;color:#dfb15b;flex-shrink:0;
  box-shadow:0 0 10px rgba(223, 177, 91, 0.25);
}
.drawer-seal svg{width:18px;height:18px;stroke:#dfb15b;}
.drawer-brand-text{display:flex;flex-direction:column;}
.drawer-brand-word{font-family:var(--font-display);font-weight:900;font-size:1.15rem;color:#ffffff;line-height:1;text-transform:uppercase;letter-spacing:-0.01em;}
.drawer-brand-sub{font-family:var(--font-mono);font-size:0.55rem;font-weight:700;color:#dfb15b;letter-spacing:.12em;text-transform:uppercase;margin-top:3px;}
.mobile-drawer-close{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.12);
  background:rgba(255, 255, 255, 0.06);display:flex;align-items:center;justify-content:center;
  color:#ffffff;cursor:pointer;flex-shrink:0;transition:all .2s ease;
}
.mobile-drawer-close:hover{border-color:#dfb15b;color:#ffffff;background:rgba(223, 177, 91, 0.18);}
.mobile-drawer-close svg{width:18px;height:18px;}

/* Viewport Slider */
.drawer-viewport{
  position:relative;flex:1;overflow:hidden;
}
.drawer-slider{
  display:flex;width:200%;height:100%;
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-slider.is-drilldown{
  transform:translateX(-50%);
}
.drawer-screen{
  width:50%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 20px 36px;display:flex;flex-direction:column;gap:24px;
}

/* Primary Nav Links (Nike Style Bold Typography) */
.drawer-primary-nav{
  list-style:none;display:flex;flex-direction:column;gap:2px;
}
.drawer-nav-link,
.drawer-nav-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;background:none;border:none;text-align:left;cursor:pointer;
  text-decoration:none;font-family:var(--font-display);font-size:1.32rem;font-weight:800;
  color:#ffffff;letter-spacing:-0.01em;transition:color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.drawer-nav-link:hover,
.drawer-nav-trigger:hover{color:#dfb15b;}
.drawer-nav-trigger svg{
  width:18px;height:18px;color:#736B5E;transition:transform .2s ease, color .15s ease;
}
.drawer-nav-trigger:hover svg{color:#dfb15b;transform:translateX(3px);}

.drawer-nav-link--deals{color:#dfb15b;}
.drawer-deals-tag{
  font-family:var(--font-mono);font-size:0.62rem;font-weight:700;letter-spacing:0.08em;
  padding:2px 7px;background:rgba(223, 177, 91, 0.15);border:1px solid rgba(223, 177, 91, 0.35);
  border-radius:3px;color:#dfb15b;
}

/* Nike Secondary Brand / Series Section */
.drawer-series-block{
  border-top:1px solid rgba(255, 255, 255, 0.08);padding-top:20px;
  display:flex;flex-direction:column;gap:12px;
}
.drawer-series-heading{
  font-family:var(--font-mono);font-size:0.68rem;font-weight:700;
  color:#8C8271;letter-spacing:0.12em;text-transform:uppercase;
}
.drawer-series-list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.drawer-series-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;color:#e5e5e5;font-size:0.95rem;font-weight:600;
  transition:color .15s ease;
}
.drawer-series-list a:hover{color:#dfb15b;}
.drawer-series-list .series-tag{
  font-family:var(--font-mono);font-size:0.6rem;padding:2px 6px;border-radius:2px;
  background:rgba(255, 255, 255, 0.06);color:#A89F8E;border:1px solid rgba(255, 255, 255, 0.08);
}

/* Nike Member / Club CTA Card */
.drawer-member-card{
  background:#181512;border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;
}
.drawer-member-text{font-size:0.86rem;line-height:1.45;color:#A89F8E;}
.drawer-member-text strong{color:#ffffff;font-weight:600;}
.drawer-member-actions{display:flex;align-items:center;gap:10px;margin-top:2px;}
.btn-member-join{
  flex:1;background:#ffffff;color:#111111;font-weight:700;font-size:0.82rem;
  padding:8px 12px;border-radius:20px;text-align:center;text-decoration:none;
  transition:background .2s ease;
}
.btn-member-join:hover{background:#dfb15b;}
.btn-member-account{
  flex:1;background:transparent;color:#ffffff;font-weight:600;font-size:0.82rem;
  padding:7px 12px;border:1px solid rgba(255, 255, 255, 0.2);border-radius:20px;
  text-align:center;text-decoration:none;transition:border-color .2s ease;
}
.btn-member-account:hover{border-color:#ffffff;}

/* Utility Footer Links */
.drawer-utility-links{
  border-top:1px solid rgba(255, 255, 255, 0.08);padding-top:18px;
  display:flex;flex-direction:column;gap:12px;
}
.drawer-util-link{
  display:inline-flex;align-items:center;gap:10px;
  color:#A89F8E;text-decoration:none;font-size:0.88rem;font-weight:500;
  transition:color .15s ease;
}
.drawer-util-link:hover{color:#ffffff;}
.drawer-util-link svg{width:16px;height:16px;color:#736B5E;}

/* Trust Strip */
.drawer-trust-strip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding-top:4px;font-family:var(--font-mono);font-size:0.64rem;color:#736B5E;
}
.drawer-trust-item{display:flex;align-items:center;gap:5px;}
.drawer-trust-item svg{width:12px;height:12px;color:#dfb15b;}
.drawer-trust-sep{color:#3E3529;}

/* Drill-Down Sub-menu Screen */
.drawer-submenu-head{
  padding-bottom:14px;border-bottom:1px solid rgba(255, 255, 255, 0.08);
  margin-bottom:8px;
}
.btn-submenu-back{
  background:none;border:none;color:#ffffff;font-family:var(--font-display);
  font-size:1.22rem;font-weight:800;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;padding:4px 0;transition:color .15s ease;
}
.btn-submenu-back:hover{color:#dfb15b;}
.btn-submenu-back svg{width:18px;height:18px;}

.drawer-submenu-list{list-style:none;display:flex;flex-direction:column;gap:2px;}
.drawer-submenu-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;font-size:1rem;font-weight:600;color:#e5e5e5;
  text-decoration:none;border-bottom:1px solid rgba(255, 255, 255, 0.04);
  transition:color .15s ease;
}
.drawer-submenu-list a:hover{color:#dfb15b;}
.drawer-submenu-list a.view-all{
  color:#dfb15b;
}

body.drawer-open{overflow:hidden;}
@media (min-width:921px){.mobile-drawer{display:none;}}

/* ---------- header search (FiboSearch) ---------- */
/* Third-party plugin (ajax-search-for-woocommerce) — its own JS manages
   position/display/open-state classes, so only cosmetic properties are
   overridden here, never those. See header.php for the [fibosearch] call. */
.loki-search{display:flex;align-items:center;}
.dgwt-wcas-search-wrapp{position:relative;flex-shrink:0;}
.dgwt-wcas-search-wrapp:not(.dgwt-wcas-search-wrapp-mobile){width:38px !important;max-width:38px !important;height:38px;}
.dgwt-wcas-search-wrapp a.dgwt-wcas-search-icon{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255, 255, 255, 0.14);
  display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.06);
  transition:border-color .2s, transform .2s, background .2s;
}
.dgwt-wcas-search-wrapp a.dgwt-wcas-search-icon:hover{border-color:#dfb15b;background:rgba(255, 255, 255, 0.12);transform:translateY(-1px);}
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler svg,
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler img{width:16px;height:16px;}
.dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier-handler{
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  color:#e5e5e5;fill:#e5e5e5;
}
.dgwt-wcas-search-wrapp a.dgwt-wcas-search-icon:hover .dgwt-wcas-ico-magnifier-handler{
  color:#dfb15b;fill:#dfb15b;
}
.dgwt-wcas-search-form{
  background:transparent;box-shadow:none;
}
.dgwt-wcas-sf-wrapp{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
}
.dgwt-wcas-search-input{
  font-family:var(--font-body) !important;font-size:0.92rem !important;color:var(--text) !important;
  background:transparent !important;border:none !important;
}
.dgwt-wcas-search-input::placeholder{color:var(--text-muted);}
.dgwt-wcas-search-input:focus:not(:focus-visible){outline:none;box-shadow:none;}
.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-open .dgwt-wcas-sf-wrapp{
  box-shadow:0 12px 26px -12px var(--shadow);
}
@media (max-width:600px){
  .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-open{
    position:absolute !important;top:100% !important;right:0 !important;left:auto !important;
    margin-top:8px !important;
    width:min(320px, calc(100vw - 36px)) !important;
    max-width:none !important;z-index:60 !important;
  }
  .dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon-open .dgwt-wcas-sf-wrapp{width:100% !important;}
}
/* ---------- header search — mobile overlay (full-width bar, no duplicate icon) ---------- */
.js-dgwt-wcas-om-bar{
  display:flex !important;align-items:center;gap:10px;
  height:56px !important;
  padding:0 14px !important;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.dgwt-wcas-om-bar button.dgwt-wcas-om-return,
.dgwt-wcas-om-bar button.dgwt-wcas-om-return:hover,
.dgwt-wcas-om-bar button.dgwt-wcas-om-return:focus,
.dgwt-wcas-om-bar button.dgwt-wcas-om-return:active{
  flex:0 0 auto;width:38px !important;height:38px !important;border-radius:50% !important;
  display:flex !important;align-items:center;justify-content:center;
  background:var(--surface-2) !important;border:1px solid var(--border);
  box-shadow:none;
}
.dgwt-wcas-om-bar .dgwt-wcas-om-return svg,
.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return svg{
  position:static !important;left:auto !important;top:auto !important;
  width:14px !important;height:14px !important;
}
.dgwt-wcas-om-bar .dgwt-wcas-om-return path,
.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return path{
  fill:var(--text) !important;
}
.dgwt-wcas-search-wrapp-mobile{
  flex:1 1 auto;min-width:0;width:auto !important;max-width:none !important;height:auto !important;
}
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-icon{display:none !important;}
.dgwt-wcas-om-bar .dgwt-wcas-search-form,
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form{
  display:block !important;opacity:1 !important;visibility:visible !important;
  position:static !important;width:100% !important;min-width:0 !important;
  height:auto !important;box-shadow:none !important;background:transparent !important;
}
.dgwt-wcas-om-bar .dgwt-wcas-sf-wrapp,
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp{
  width:100% !important;height:42px !important;border-radius:21px !important;
  background:var(--surface) !important;border:1px solid var(--border) !important;
  display:flex !important;align-items:center !important;padding:0 12px !important;
}
.dgwt-wcas-om-bar .dgwt-wcas-search-input,
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-input{
  display:block !important;width:100% !important;opacity:1 !important;height:100% !important;
  font-family:var(--font-body) !important;font-size:16px !important;color:var(--text) !important;
  background:transparent !important;border:none !important;
}
.dgwt-wcas-om-bar .dgwt-wcas-search-input::placeholder,
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-input::placeholder{
  color:var(--text-muted) !important;
}
.dgwt-wcas-suggestions-wrapp{
  font-family:var(--font-body) !important;
  border:1px solid var(--border) !important;border-radius:6px !important;
  background:var(--surface) !important;box-shadow:0 16px 32px -16px var(--shadow) !important;
}
.dgwt-wcas-suggestion{border-bottom:1px solid var(--border) !important;}
.dgwt-wcas-suggestion-title, .dgwt-wcas-suggestion .dgwt-wcas-st{
  font-family:var(--font-body) !important;color:var(--text) !important;
}
.dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestion-selected{
  background:var(--surface-2) !important;
}
.dgwt-wcas-suggestion-price, .dgwt-wcas-si-price ins{color:var(--accent) !important;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:0.92rem;
  padding:14px 26px;border-radius:2px;cursor:pointer;
  border:1px solid transparent;text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 22px -8px var(--shadow);}
.btn-primary:hover{background:var(--accent-soft);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-ghost:hover{border-color:var(--text);}
.btn-dark{background:var(--text);color:var(--bg);}
.btn-dark:hover{opacity:0.88;}
.btn svg{width:15px;height:15px;}
.btn-sm{padding:11px 20px;font-size:0.82rem;gap:8px;}
.btn-sm svg{width:13px;height:13px;}
.hero-shop-btn{width:100%;justify-content:center;margin-top:16px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:0;padding-bottom:0;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;
  padding-top:40px;
  padding-bottom:64px;
}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero-copy h1{
  /* Sized for the longer product-and-market headline this became. At the
     old clamp (max 4.6rem) it ran to six lines and pushed the CTA and the
     stats strip below the fold on a laptop. */
  font-size:clamp(2rem,3.5vw,3.1rem);font-weight:800;line-height:1.02;
  letter-spacing:-0.015em;margin:18px 0 14px;
}
.hero-copy h1 em{
  font-style:normal;color:var(--accent);display:block;
}
.hero-copy p.lede{
  font-size:1.1rem;color:var(--text-muted);max-width:46ch;margin-bottom:32px;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.btn-primary-sports {
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.94rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 15px 30px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(179, 38, 30, 0.35);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary-sports:hover {
  background: #C42F26;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(179, 38, 30, 0.45);
}
.btn-primary-sports svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.btn-secondary-sports {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.94rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 15px 28px;
  border: 1px solid #111111;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.btn-secondary-sports:hover {
  border-color: var(--text);
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}
.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stats b {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hero-stats span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-visual{position:relative;}
.hero-visual-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 24px 24px;
  box-shadow: 0 8px 24px rgba(26, 22, 18, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-visual-box:hover {
  box-shadow: 0 16px 36px rgba(26, 22, 18, 0.12);
}
.hero-badge-pill {
  position: absolute;
  top: 18px;
  left: 18px;
  background: #0E0C09;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  z-index: 2;
}
.hero-blade-photo {
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  text-decoration: none;
}
.hero-blade-photo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  mix-blend-mode: multiply;
}
.hero-visual-box:hover .hero-blade-photo img {
  transform: scale(1.04) rotate(-1.5deg);
}
.hero-product-meta {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.hero-meta-name h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
}
.hero-meta-name h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-meta-name h3 a:hover {
  color: var(--accent);
}
.hero-meta-name span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
}
.hero-meta-price {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .hero-blade-photo { height: 260px; }
  .hero-visual-box { padding: 24px 18px 18px; }
}

/* ---------- section shell ---------- */
section{padding:88px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;margin-top:14px;max-width:20ch;}
.section-head p{color:var(--text-muted);max-width:42ch;font-size:0.98rem;}
.alt{background:var(--bg-alt);}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
@media (max-width:860px){.values{grid-template-columns:repeat(2,1fr);}}
.value{background:var(--surface);padding:32px 26px;}
.value .num{font-family:var(--font-mono);color:var(--accent);font-size:0.78rem;}
.value h3{font-size:1.08rem;margin:14px 0 10px;font-weight:700;}
.value p{color:var(--text-muted);font-size:0.9rem;}

/* ---------- find your setup ---------- */
.setup{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;
  border:1px solid var(--border);border-radius:8px;overflow:hidden;
  background:var(--surface);
}
@media (max-width:920px){.setup{grid-template-columns:1fr;}}
.setup-controls{padding:44px;border-right:1px solid var(--border);}
@media (max-width:920px){.setup-controls{border-right:none;border-bottom:1px solid var(--border);}}
.setup-controls h2{font-size:1.9rem;margin:14px 0 10px;}
.setup-controls>p{color:var(--text-muted);margin-bottom:28px;font-size:0.95rem;}
.qgroup{margin-bottom:24px;}
.qgroup label.qlabel{
  display:block;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-muted);margin-bottom:10px;
}
.pillrow{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  font-family:var(--font-body);font-size:0.86rem;font-weight:600;
  padding:9px 16px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface-2);cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.pill:hover{border-color:var(--accent);}
.pill.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.setup-result{padding:44px;background:var(--surface-2);}
.result-card{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:26px;
}
.result-why{
  font-size:0.95rem;color:var(--text);line-height:1.6;padding:16px 18px;
  background:var(--bg-alt);border-radius:6px;
  margin-bottom:22px;
}
.result-why b{color:var(--accent);}
.setup-parts{display:flex;flex-direction:column;gap:14px;}
.setup-part{display:flex;align-items:center;gap:14px;}
.setup-part .swatch{
  width:46px;height:46px;border-radius:5px;background:var(--bg-alt);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--border);
  font-family:var(--font-mono);font-size:0.6rem;color:var(--text-muted);text-align:center;
  overflow:hidden;
}
.setup-part .swatch img{width:100%;height:100%;object-fit:contain;padding:4px;}
.setup-part .pt{flex:1;display:flex;flex-direction:column;gap:5px;}
.setup-part .pt .role{font-family:var(--font-mono);font-size:0.66rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
.setup-part .pt .name{font-weight:600;font-size:0.94rem;}
.setup-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- product grid ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media (max-width:920px){.pgrid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr;}}

/* ---------- swipeable mobile carousel for Weekly Deals & Player Picks ----------
   Cards keep the same compact sizing tuned for a ~44%-width card below; the
   container becomes a horizontal scroll-snap row instead of a static 2-up
   grid, so cards 3+ are reachable by swipe with the next card's edge left
   peeking in as the affordance that there's more. */
@media (max-width:600px){
  #weekly-deals .pgrid,
  #products .pgrid{
    display:flex;
    position:relative;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:12px;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scroll-padding-left:18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 -18px;
    padding:0 18px 6px;
  }
  #weekly-deals .pgrid::-webkit-scrollbar,
  #products .pgrid::-webkit-scrollbar{
    display:none;
    height:0;
  }
  #weekly-deals .card,
  #products .card{
    flex:0 0 44%;
    scroll-snap-align:start;
    border-radius:8px;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  #weekly-deals .card-media,
  #products .card-media{
    padding:10px;
    aspect-ratio:1/1;
  }
  #weekly-deals .card-media img,
  #products .card-media img{
    max-width:92%;
    max-height:92%;
    mix-blend-mode:multiply;
  }
  #weekly-deals .card-badge,
  #products .card-badge{
    top:8px;
    left:8px;
    font-size:0.58rem;
    padding:3px 6px;
    letter-spacing:0.06em;
  }
  #weekly-deals .card-body,
  #products .card-body{
    padding:12px 10px 10px;
    display:flex;
    flex-direction:column;
    flex:1;
    gap:6px;
  }
  #weekly-deals .card-cat,
  #products .card-cat{
    font-size:0.6rem;
    letter-spacing:0.08em;
    margin-bottom:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
  }
  #weekly-deals .card-title,
  #products .card-title{
    font-size:0.86rem;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.3em;
  }
  #products .card-for{
    display:none;
  }
  #products .specbars{
    margin-top:2px;
    gap:3px;
  }
  #products .specbar{
    grid-template-columns:42px 1fr 18px;
    gap:4px;
  }
  #products .specbar .lbl{
    font-size:0.54rem;
    letter-spacing:0.04em;
  }
  #products .specbar .track{
    height:4px;
  }
  #products .specbar .val{
    font-size:0.58rem;
  }
  #products .specweight{
    font-size:0.58rem;
    margin-top:2px;
  }
  #products .specsrc{
    font-size:0.56rem;
    letter-spacing:0.04em;
    opacity:0.85;
  }
  #weekly-deals .card-foot,
  #products .card-foot{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding-top:8px;
    margin-top:auto;
    border-top:1px solid var(--border);
  }
  #weekly-deals .price,
  #products .price{
    display:flex;
    flex-direction:column;
    line-height:1.15;
    font-size:0.95rem;
  }
  #weekly-deals .price del,
  #products .price del{
    order:-1;
    font-size:0.72rem;
    margin-right:0;
    opacity:0.8;
  }
  #weekly-deals .price ins,
  #products .price ins{
    text-decoration:none;
    font-weight:800;
    color:var(--accent);
  }
  #weekly-deals .card-link,
  #products .card-link{
    font-size:0.76rem;
    gap:3px;
    padding-bottom:2px;
  }
  #weekly-deals .card-link svg,
  #products .card-link svg{
    width:11px;
    height:11px;
  }
}
@media (max-width:360px){
  #weekly-deals .pgrid,
  #products .pgrid{gap:8px;}
  #weekly-deals .card-body,
  #products .card-body{padding:10px 8px;}
  #weekly-deals .card-title,
  #products .card-title{font-size:0.8rem;}
  #weekly-deals .price,
  #products .price{font-size:0.88rem;}
  #products .specbar{grid-template-columns:38px 1fr 16px;}
  #products .specbar .lbl{font-size:0.50rem;}
  #products .specbar .val{font-size:0.54rem;}
}
.card{
  position:relative;
  background:#FCFAF6;border:1px solid var(--border);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(26,22,18,0.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{
  transform:translateY(-5px);box-shadow:0 16px 36px rgba(26,22,18,0.12);
  border-color:#111111;background:#FFFFFF;
}
.card-media{aspect-ratio:1/1;background:#ffffff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;}
.card-media img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(26,22,18,0.08));transition:transform .35s ease;}
.card:hover .card-media img{transform:scale(1.05);}
.card-badge{
  position:absolute;top:14px;left:14px;background:#0E0C09;color:#ffffff;
  font-family:var(--font-mono);font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 8px;border-radius:3px;z-index:2;
}
.card-badge.red{background:var(--accent);color:#FFF;}
.card-badge.jade{background:var(--jade);color:#FFF;}
.card-badge.muted{background:var(--text-muted);color:#FFF;}
.card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
@media (max-width:600px){
  .card-body{padding:16px;}
  .card-media{padding:0;}
}
.card-cat{font-family:var(--font-mono);font-size:0.7rem;font-weight:600;color:#595959;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px;}
.card-title{font-size:1.12rem;font-weight:800;font-family:var(--font-display);color:var(--text);line-height:1.25;margin:0;}
.card-title a{text-decoration:none;color:inherit;transition:color .2s ease;}
.card-title a:hover{color:var(--accent);}
.card-for{font-size:0.86rem;color:var(--text-muted);line-height:1.5;margin:0;}
.specbars{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.specbar{display:grid;grid-template-columns:68px 1fr 24px;align-items:center;gap:8px;}
.specbar .lbl{font-family:var(--font-mono);font-size:0.62rem;color:var(--text-muted);text-transform:uppercase;white-space:nowrap;}
.specbar .track{height:5px;background:var(--bg-alt);border-radius:3px;overflow:hidden;}
.specbar .fill{height:100%;background:var(--jade);border-radius:3px;}
.specbar .fill.speed{background:var(--accent);}
.specbar .fill.spin{background:var(--jade);}
.specbar .fill.control{background:var(--gold);}
.specbar .fill.stiffness{background:var(--accent-soft);}
.specbar .val{font-family:var(--font-mono);font-size:0.68rem;text-align:right;color:var(--text-muted);}
.specweight{display:block;font-family:var(--font-mono);font-size:0.68rem;color:var(--text-muted);margin-top:4px;}
.specweight .tnum{color:var(--text);font-weight:600;}
.specsrc{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--border);}
.price{font-family:var(--font-mono);font-weight:700;font-size:1.2rem;color:var(--text);}
.price ins{text-decoration:none;}
.price del,
.woocommerce del{opacity:1 !important;color:var(--text-muted);}
.price del{font-size:0.85em;margin-right:6px;}
.card-link{font-family:var(--font-body);font-size:0.88rem;font-weight:700;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s ease;}
.card-link:hover{color:#C42F26;}

/* ---------- build my bat ---------- */
.build{
  border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden;
}
.build-top{padding:44px 44px 0;}
.build-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);margin-top:36px;
}
@media (max-width:860px){.build-steps{grid-template-columns:1fr 1fr;}}
.build-step{padding:30px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
.build-step:last-child{border-right:none;}
@media (max-width:860px){.build-step:nth-child(2n){border-right:none;}}
.build-step .stepnum{font-family:var(--font-mono);font-size:0.68rem;color:var(--accent);letter-spacing:.1em;}
.build-step h4{font-family:var(--font-display);font-size:0.95rem;font-weight:700;margin:8px 0 14px;}
.optrow{display:flex;gap:10px;}
.optchip{
  flex:1;border:1px solid var(--border);border-radius:5px;padding:10px;cursor:pointer;
  background:var(--surface-2);text-align:center;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.optchip img{width:100%;height:52px;object-fit:contain;margin-bottom:6px;}
.optchip .oname{font-size:0.72rem;font-weight:600;display:block;}
.optchip.active{border-color:var(--accent);background:var(--bg-alt);box-shadow:0 0 0 1px var(--accent) inset;}
.optchip-link{
  display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:0.64rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);text-decoration:none;transition:color .18s ease;
}
.optchip-link:hover{color:var(--accent);}
.build-summary{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:28px 44px;background:var(--bg-alt);border-top:1px solid var(--border);
}
.build-total{display:flex;align-items:baseline;gap:10px;}
.build-total .lbl{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
.build-total .amount{font-family:var(--font-mono);font-size:1.9rem;font-weight:700;}
.build-warn{
  font-family:var(--font-mono);font-size:0.76rem;color:var(--gold);display:none;align-items:center;gap:8px;
  border:1px dashed var(--gold);padding:8px 12px;border-radius:5px;
}
.build-warn.show{display:flex;}
.build-warn svg{width:15px;height:15px;flex-shrink:0;}

/* ---------- categories ---------- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;}
@media (max-width:900px){.catgrid{grid-template-columns:repeat(2,1fr);gap:14px;}}
/* Swipeable mobile carousel: same tile styling, horizontal scroll-snap
   instead of a static grid, with the next tile's edge peeking in. */
@media (max-width:600px){
  .catgrid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:10px;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scroll-padding-left:18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 -18px;
    padding:0 18px 6px;
  }
  .catgrid::-webkit-scrollbar{display:none;height:0;}
  .cattile{flex:0 0 42%;scroll-snap-align:start;}
}
.cattile{
  position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;
  background:#0E0C09;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 18px;box-shadow:0 2px 8px rgba(26,22,18,0.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.cattile:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,22,18,0.12);}
.cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;z-index:1;}
.cattile:hover img{transform:scale(1.06);}
.cattile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(17,14,10,0.1) 0%, rgba(17,14,10,0.85) 75%);
  z-index:2;pointer-events:none;
}
.cattile .ctlabel{
  position:relative;z-index:3;color:#FFFFFF;display:flex;flex-direction:column;
}
.cattile .ctlabel .ctname{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  text-transform:uppercase;line-height:1.1;margin-bottom:4px;color:#FFFFFF;
}
.cattile .ctlabel .ctcount{
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;
  text-transform:uppercase;color:#ffffff;opacity:0.88;
}
@media (max-width:480px){
  .cattile{padding:14px 12px;border-radius:6px;}
  .cattile .ctlabel .ctname{font-size:0.96rem;margin-bottom:2px;}
  .cattile .ctlabel .ctcount{font-size:0.62rem;}
}

/* ---------- testing framework ---------- */
.testing-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
@media (max-width:920px){.testing-grid{grid-template-columns:1fr;}}
.legend{display:flex;flex-direction:column;gap:14px;margin-top:26px;}
.legend-item{display:flex;gap:14px;align-items:flex-start;}
.legend-dot{width:11px;height:11px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.legend-dot.spec{background:var(--gold);}
.legend-dot.loki{background:var(--accent);}
.legend-dot.customer{background:var(--jade);}
.legend-dot.editorial{background:var(--text-muted);}
.legend-item b{display:block;font-size:0.92rem;}
.legend-item span{font-size:0.84rem;color:var(--text-muted);}
.testpanel{
  border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:34px;
}
.testpanel .trow{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:0.9rem;gap:16px;}
.testpanel .trow:last-child{border-bottom:none;}
.testpanel .trow .tk{color:var(--text-muted);}
.testpanel .trow .tv{font-family:var(--font-mono);font-weight:600;text-align:right;}
.soon-badge{
  display:inline-block;margin-top:20px;font-family:var(--font-mono);font-size:0.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  border:1px dashed var(--border);padding:6px 12px;border-radius:20px;
}

/* ---------- compare (Loki vs Butterfly Spec for Spec) ---------- */
.section-compare{padding:70px 0;}
.compare-box-sports {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px var(--shadow);
  max-width: 1060px;
  margin: 0 auto;
}
.compare-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table-sports {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.compare-table-sports th {
  background: #0E0C09;
  color: #FFFFFF;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.compare-table-sports th.th-loki {
  background: #B3261E;
  color: #FFFFFF;
}
.compare-table-sports td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 0.94rem;
  color: var(--text);
  vertical-align: middle;
}
.compare-table-sports tr:last-child td {
  border-bottom: none;
}
.compare-table-sports td.td-loki {
  font-weight: 600;
  background: rgba(179, 38, 30, 0.035);
}
.save-tag {
  display: inline-block;
  background: #2E6B50;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.section-head-center {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.section-head-center .eyebrow {
  display: inline-block;
  color: #B3261E;
  margin-bottom: 8px;
}
.section-head-center .eyebrow::before {
  display: none;
}
.section-head-center h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.section-head-center p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 auto;
}
.compare-price-loki {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: #B3261E;
}
.compare-price-competitor {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.comparewrap{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;}
.comparewrap::-webkit-scrollbar{height:6px;}
.comparewrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.comparetile{
  flex:0 0 210px;border:1px solid var(--border);border-radius:6px;padding:22px;
  background:var(--surface);text-decoration:none;transition:border-color .2s, transform .2s;
}
.comparetile:hover{border-color:var(--accent);transform:translateY(-3px);}
.comparetile .vs{font-family:var(--font-mono);font-size:0.66rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;}
.comparetile .cname{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin:10px 0 12px;}
.comparetile .cdesc{font-size:0.82rem;color:var(--text-muted);}

/* ---------- guides ---------- */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:860px){.guides{grid-template-columns:1fr;}}
/* Swipeable mobile carousel: one guide card at a time with the next card's
   edge peeking in, rather than a long vertical stack. */
@media (max-width:600px){
  .guides{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    gap:14px;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scroll-padding-left:18px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 -18px;
    padding:0 18px 6px;
  }
  .guides::-webkit-scrollbar{display:none;height:0;}
  .guide{flex:0 0 82%;scroll-snap-align:start;}
}
.guide{
  border:1px solid var(--border, #e5e5e5);border-radius:8px;padding:28px 24px;background:#ffffff;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;box-shadow:0 2px 8px rgba(26,22,18,0.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.guide:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(26,22,18,0.08);border-color:#111111;}
.guide .gnum{font-family:var(--font-mono);color:var(--accent);font-size:0.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.guide h3{font-size:1.12rem;font-weight:800;font-family:var(--font-display);color:var(--text);line-height:1.25;margin:0;}
.guide p{font-size:0.9rem;color:var(--text-muted);line-height:1.55;margin:0;}
.guide .gread{font-family:var(--font-body);font-size:0.88rem;font-weight:700;color:var(--accent);margin-top:auto;display:inline-flex;align-items:center;gap:4px;}

/* ---------- club ---------- */
.club{
  border-radius:12px;overflow:hidden;background:#0E0C09;color:#ffffff;
  padding:56px 48px;position:relative;border:1px solid rgba(255,255,255,0.08);
}
.club-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:center;}
@media (max-width:860px){
  .club{padding:36px 18px;}
  .club-grid{grid-template-columns:1fr;}
  .club-card{padding:22px 18px;}
  .club-card .cline{font-size:0.88rem;gap:10px;}
}
.club .eyebrow{color:#dfb15b;}
.club .eyebrow::before{background:#dfb15b;}
.club h2{color:#ffffff;font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.05;margin-bottom:14px;}
.club p{color:#d4d4d8;font-size:1.02rem;line-height:1.6;max-width:48ch;margin-bottom:26px;}
.club-feats{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px;}
.club-feats li{display:flex;gap:12px;align-items:center;font-size:0.95rem;color:#f4f4f5;}
.club-feats li svg{width:18px;height:18px;stroke:#dfb15b;stroke-width:2.2;flex-shrink:0;}
.club-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;padding:28px;
}
.club-card .cline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;font-size:0.92rem;border-bottom:1px solid rgba(255,255,255,0.12);color:#ffffff;}
.club-card .cline:last-of-type{border-bottom:none;}
.club-card .cline .ck{color:#a1a1aa;opacity:1;flex-shrink:0;}
.club-card .cline span:last-child{font-weight:700;color:#ffffff;text-align:right;margin-left:auto;}

/* ---------- setup tools promo (racket configurator / shop by level / wei shihao) ---------- */
.setuptiles{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;}
@media (max-width:860px){.setuptiles{grid-template-columns:1fr;}}
.setuptile{
  position:relative;overflow:hidden;border-radius:8px;
  min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:34px 34px 36px;color:#ffffff;isolation:isolate;
  text-decoration:none;background-color:#111111;
}
.setuptile, .setuptile *{text-decoration:none;}
.setuptile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;z-index:-2;}
.setuptile.jade .setuptile-img{object-position:55% 40%;}
.setuptile-scrim{position:absolute;inset:0;z-index:-1;}
.setuptile .setuptile-scrim{background:
  linear-gradient(90deg, rgba(18,13,8,0.88) 0%, rgba(18,13,8,0.5) 38%, rgba(18,13,8,0.3) 68%, rgba(18,13,8,0.2) 100%),
  linear-gradient(0deg, rgba(18,13,8,0.92) 0%, rgba(18,13,8,0.45) 42%, rgba(18,13,8,0.22) 100%);}
.setuptile-kicker{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:#dfb15b;margin-bottom:0.9rem;display:flex;align-items:center;gap:0.55rem;}
.setuptile-kicker.gold{color:#dfb15b;}
.setuptile-kicker .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.setuptile h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.03;margin:0 0 0.6rem;text-wrap:balance;color:#ffffff;}
.setuptile p{font-family:var(--font-body);font-size:1rem;line-height:1.55;color:#e4e4e7;opacity:0.95;max-width:34ch;margin:0 0 1.5rem;}
.setuptile-steps{display:flex;gap:1.1rem;margin-bottom:1.6rem;font-family:var(--font-mono);font-size:0.74rem;color:#d4d4d8;opacity:0.9;}
.setuptile-steps b{color:#ffffff;font-weight:600;}
.setuptile-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  background:#ffffff;
  color:#111111;
  font-family:var(--font-display);
  font-size:0.86rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:13px 26px;
  border-radius:4px;
  text-decoration:none;
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.setuptile-btn:hover,
.setuptile:hover .setuptile-btn{
  background:#f4f4f5;
  color:#000000;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0, 0, 0, 0.3);
}
.setuptile-btn svg{
  width:14px;
  height:14px;
  stroke-width:2.5;
  transition:transform 0.2s ease;
}
.setuptile:hover .setuptile-btn svg{
  transform:translateX(3px);
}
.setuptile-btn.light{background:#ffffff;color:#111111;}
@media (max-width:480px){
  .setuptile-btn{
    font-size:0.8rem;
    padding:12px 20px;
  }
}

/* ---------- Athlete Pro Line: Wei Shihao W81 Carbon Lineup ---------- */
.signature-banner {
  background: #0E0C09;
  color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  padding: 48px;
  position: relative;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5);
}
.signature-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 40px;
}
@media (max-width: 960px) {
  .signature-grid { grid-template-columns: 1fr; gap: 32px; }
  .signature-banner { padding: 32px 24px; }
}

.signature-copy .sig-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #dfb15b;
  margin-bottom: 12px;
  display: block;
}
.signature-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 14px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.signature-copy p {
  color: #d4d4d8;
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 440px;
}
.signature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #111111;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 13px 26px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.signature-btn:hover {
  background: #f4f4f5;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.signature-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sig-thumb-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sig-thumb-card:hover {
  transform: translateY(-4px);
  border-color: rgba(203, 162, 92, 0.45);
  background: rgba(255, 255, 255, 0.1);
}
.sig-thumb-img-wrap {
  width: 100%;
  height: 100px;
  background: #FFFFFF;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 6px;
}
.sig-thumb-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sig-thumb-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.2;
}
.sig-thumb-price {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: #CBA25C;
}
@media (max-width: 768px) {
  .signature-banner { padding: 28px 16px; }
  .signature-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .sig-thumb-card {
    padding: 10px 4px;
    border-radius: 6px;
  }
  .sig-thumb-img-wrap {
    height: 72px;
    margin-bottom: 6px;
    padding: 3px;
  }
  .sig-thumb-name {
    font-size: 0.66rem;
    margin-bottom: 2px;
    white-space: normal;
  }
  .sig-thumb-price {
    font-size: 0.76rem;
  }
}

/* ---------- Flagship Rubber Spotlight Section & Slider ---------- */
.flagship-section {
  background: radial-gradient(circle at 85% 15%, rgba(203, 162, 92, 0.12), transparent 45%), #141210;
  color: #ffffff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flagship-slider-container {
  position: relative;
  min-height: 440px;
}
.flagship-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(6px);
}
.flagship-slide.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.flagship-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
}
.flagship-info {
  display: flex;
  flex-direction: column;
}
.flagship-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #CBA25C;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.flagship-kicker::before {
  content: "";
  width: 16px;
  height: 2px;
  background: #CBA25C;
  display: inline-block;
}
.flagship-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: 1.12;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.flagship-desc {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.62;
  color: #d4d4d8;
  margin-bottom: 24px;
  max-width: 580px;
}
.flagship-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  max-width: 560px;
}
.flagship-spec-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flagship-spec-box .spec-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.flagship-spec-box .spec-lbl {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  font-weight: 600;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.flagship-action {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.flagship-price {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
}
.flagship-price ins {
  text-decoration: none;
  color: #ffffff;
}
.flagship-price del {
  font-size: 0.7em;
  opacity: 0.6;
  margin-right: 8px;
}
.flagship-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #C42F26;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(196, 47, 38, 0.35);
}
.flagship-btn:hover {
  background: #D8372D;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(196, 47, 38, 0.45);
  color: #FFFFFF;
}
.flagship-media {
  display: flex;
  justify-content: center;
}
.flagship-img-frame {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.flagship-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.4s ease;
}
.flagship-img-frame:hover img {
  transform: scale(1.03);
}

/* Nav: Dots and Arrows */
.flagship-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.flagship-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flagship-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease;
}
.flagship-dot.active {
  width: 32px;
  background: #CBA25C;
}
.flagship-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}
.flagship-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.flagship-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Tablet */
@media (max-width: 960px) {
  .flagship-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .flagship-media {
    order: -1;
  }
  .flagship-img-frame {
    max-width: 280px;
    padding: 16px;
  }
}

/* Mobile: Compact & Elegant */
@media (max-width: 600px) {
  .flagship-section {
    padding: 28px 0 20px;
  }
  .flagship-slider-container {
    min-height: auto;
  }
  .flagship-grid {
    gap: 14px;
  }
  /* A 1fr grid track grows to its content's min-content width, so the
     nowrap price + button row pushed the whole slide past the viewport. */
  .flagship-grid > * {
    min-width: 0;
  }
  .flagship-img-frame {
    max-width: 170px;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  }
  .flagship-kicker {
    font-size: 0.68rem;
    margin-bottom: 8px;
    letter-spacing: 0.12em;
    gap: 6px;
  }
  .flagship-kicker::before {
    width: 12px;
  }
  .flagship-title {
    font-size: clamp(1.15rem, 5vw, 1.35rem);
    line-height: 1.16;
    margin-bottom: 8px;
  }
  .flagship-desc {
    font-size: 0.82rem;
    line-height: 1.42;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .flagship-specs {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
    max-width: 100%;
  }
  .flagship-spec-box {
    flex-direction: column;
    padding: 8px 4px;
    text-align: center;
    align-items: center;
    border-radius: 4px;
    gap: 2px;
  }
  .flagship-spec-box .spec-val {
    font-size: 0.84rem;
    line-height: 1.1;
  }
  .flagship-spec-box .spec-lbl {
    font-size: 0.50rem;
    letter-spacing: 0.04em;
    line-height: 1.15;
    order: 0;
  }
  .flagship-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  @media (max-width: 360px) {
    .flagship-action {
      flex-wrap: wrap;
      gap: 8px;
    }
  }
  .flagship-price {
    font-size: 1.35rem;
    line-height: 1;
    white-space: nowrap;
  }
  .flagship-btn {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 10px 14px;
    font-size: 0.76rem;
    white-space: nowrap;
    justify-content: center;
    border-radius: 4px;
  }
  .flagship-nav {
    margin-top: 14px;
    padding-top: 10px;
  }
  .flagship-dot {
    width: 8px;
    height: 8px;
  }
  .flagship-dot.active {
    width: 24px;
  }
  .flagship-arrow {
    width: 32px;
    height: 32px;
  }
}

/* ---------- content page spacing (Jetpack sharing gap) ---------- */
/* Jetpack's sharedaddy block butts straight up against the page's own
   final content element with no gap on every page type (guides, compare
   pages, the racket configurator) since neither the theme nor Jetpack's
   own sharing.css sets any separation. */
.sharedaddy{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--border);}
.lk-note{
  background:var(--bg-alt);border-left:3px solid var(--gold);border-radius:8px;
  padding:1rem 1.2rem;font-size:0.92rem;color:var(--text-muted);margin:0 0 1.1em;
}

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid rgba(255, 255, 255, 0.08);
  padding:60px 0 30px;
  background:#0E0C09;
  color:#e5e5e5;
}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px;margin-bottom:48px;}
@media (max-width:1024px) and (min-width:861px){.fgrid{grid-template-columns:1fr 1fr;gap:32px;}}

/* Footer brand block */
.site-footer .brand{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;text-decoration:none;
}
.site-footer .seal{
  width:38px;height:38px;border-radius:50%;
  background:#262018;border:1px solid #dfb15b;
  display:flex;align-items:center;justify-content:center;
  color:#dfb15b;
  flex-shrink:0;
  box-shadow:0 0 12px rgba(223, 177, 91, 0.25);
  transition:all .2s ease;
}
.site-footer .seal svg{width:22px;height:22px;stroke:#dfb15b;}
.site-footer .brand:hover .seal{
  border-color:#ffffff;color:#ffffff;
  box-shadow:0 0 16px rgba(223, 177, 91, 0.45);
}
.site-footer .brand:hover .seal svg{stroke:#ffffff;}
.site-footer .brand-word{
  font-family:var(--font-display);font-weight:800;font-size:1.45rem;
  letter-spacing:-0.01em;color:#ffffff;white-space:nowrap;
}
.site-footer .fbrand-desc,
.site-footer .fcol p{
  color:#9ca3af !important;font-size:0.9rem !important;line-height:1.6 !important;max-width:320px;margin:0 0 16px;
}

/* The footer column headings are <h2> so the document outline runs
   h1 -> h2 without skipping to h5; they are styled down to caption size
   here rather than being marked up as a lower level. */
.fcol h2{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.12em;
  font-size:0.78rem;font-weight:700;color:#ffffff;margin:0 0 18px;
}
.fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fcol a{
  text-decoration:none;font-size:0.9rem;color:#9ca3af;
  transition:color 0.15s ease;
}
.fcol a:hover{color:#ffffff;}
.fcol-cookie-btn{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-family:inherit;font-size:0.9rem;font-weight:400;color:#9ca3af;
  text-decoration:none;transition:color 0.15s ease;
}
.fcol-cookie-btn:hover{color:#ffffff;}
.footer-series-link{color:var(--jade);font-weight:600;}
.fcol .footer-note{
  font-family:var(--font-mono);font-size:0.75rem;line-height:1.6;color:#9ca3af;
  margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(255, 255, 255, 0.08);
}
.fcol .footer-note a{color:#9ca3af;text-decoration:underline;text-decoration-color:transparent;transition:color .18s ease, text-decoration-color .18s ease;}
.fcol .footer-note a:hover{color:#ffffff;text-decoration-color:#ffffff;}

/* Footer sections are <details>/<summary> so they collapse on mobile;
   on desktop the marker/chevron is hidden and every section stays open. */
.facc summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:default;list-style:none;margin-bottom:18px;}
.facc summary::-webkit-details-marker{display:none;}
.facc summary::marker{content:"";}
.facc .acc-chevron{width:16px;height:16px;color:#8C8271;flex-shrink:0;display:none;transition:transform .2s ease;}
.facc[open] .acc-chevron{transform:rotate(180deg);}
@media (min-width:861px){
  .facc summary{pointer-events:none;}
}
@media (max-width:860px){
  .fgrid{display:flex;flex-direction:column;gap:0;margin-bottom:32px;}
  .site-footer .fcol:first-child{
    margin-bottom:18px;padding-bottom:24px;
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
  }
  .fcol.facc{
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
  }
  .facc summary{
    cursor:pointer;
    padding:18px 0;
    margin-bottom:0;
    border-bottom:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    -webkit-tap-highlight-color:transparent;
  }
  .facc summary h2{
    margin:0;
    font-size:0.84rem;
    letter-spacing:0.1em;
    font-weight:700;
    color:#ffffff;
  }
  .facc .acc-chevron{
    display:block;
    width:18px;
    height:18px;
    color:#A89F8E;
    transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .facc[open] .acc-chevron{
    transform:rotate(180deg);
    color:#ffffff;
  }
  .facc .facc-body{
    padding:4px 0 20px;
  }
  .facc .facc-body ul{
    gap:14px;
  }
  .facc .facc-body a{
    font-size:0.92rem;
    display:inline-block;
    padding:2px 0;
  }
}
.fbottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  border-top:1px solid rgba(255, 255, 255, 0.08);padding-top:24px;
  font-family:var(--font-mono);font-size:0.75rem;color:#9ca3af;
}
.fbottom a{color:#9ca3af;text-decoration:none;transition:color 0.15s ease;}
.fbottom a:hover{color:#ffffff;}

/* Accepted payment methods — only gateways actually enabled at checkout */
.fpay{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0;}
.fpay li{margin:0;padding:0;line-height:0;}
.fpay-icon{width:38px;height:24px;display:block;border-radius:3px;}

.fsocial{display:flex;gap:10px;margin-top:16px;}
.fsocial .iconbtn{
  width:34px;height:34px;border-radius:4px;
  background:#181512;border:1px solid rgba(255, 255, 255, 0.08);color:#A89F8E;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all 0.18s ease;
}
.fsocial .iconbtn:hover{
  background:#241E18;border-color:rgba(255, 255, 255, 0.18);color:#ffffff;
}
.fsocial .iconbtn svg{width:15px;height:15px;}

@media (max-width:600px){
  section{padding:56px 0;}
  .setup-controls,.setup-result{padding:28px;}
  .build-top,.build-summary{padding:28px;}
  .club{padding:38px 26px;}
}

/* =========================================================
   WooCommerce compatibility layer
   Reskins core WooCommerce markup to the theme's design
   tokens instead of shipping default WC styling untouched.
   ========================================================= */
/* =========================================================
   WooCommerce compatibility layer — Nike-Inspired Clean Layout
   Features expansive 1600px width, clean #ffffff background,
   generous 1:1 image scaling, and borderless modern cards.
   ========================================================= */
body.archive.woocommerce,
body.woocommerce-shop,
.woocommerce-page-wrap {
  background: #ffffff !important;
}

.woocommerce-page-wrap {
  padding: 44px 0 88px;
  background: #ffffff;
}

.woocommerce-page-wrap .wrap {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

@media (max-width: 1024px) {
  .woocommerce-page-wrap .wrap {
    padding: 0 24px !important;
  }
}

@media (max-width: 600px) {
  .woocommerce-page-wrap {
    padding: 24px 0 60px;
  }
  .woocommerce-page-wrap .wrap {
    padding: 0 16px !important;
  }
}

.site-main::after { content: ""; display: table; clear: both; }

/* Category header title */
.woocommerce-products-header__title.page-title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: clamp(2rem, 3.2vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #111111 !important;
  margin: 0 0 20px 0 !important;
  text-align: left !important;
}

/* =========================================================
   Nike-Style Shop Navigation, Filter Bar & Pill Rail
   ========================================================= */
.loki-nike-shop-header {
  margin-bottom: 28px;
  width: 100%;
}

/* Category Pill Rail */
.loki-nike-cat-rail-wrap {
  width: 100%;
  margin: 0 0 24px 0;
  position: relative;
}
.loki-nike-cat-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px 2px;
}
.loki-nike-cat-rail::-webkit-scrollbar {
  display: none;
}
.loki-nike-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 9999px;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: #f4f4f5;
  color: #18181b !important;
  text-decoration: none !important;
  border: 1px solid #e4e4e7;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.loki-nike-pill:hover {
  background: #e4e4e7;
  color: #000000 !important;
  border-color: #d4d4d8;
  transform: translateY(-1px);
}
.loki-nike-pill.is-active {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.loki-nike-pill.is-active:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Nike Performance Toolbar */
.loki-nike-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e5e5;
}
.loki-nike-toolbar__left {
  display: flex;
  align-items: center;
}
.loki-nike-product-count {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: #707072;
  letter-spacing: -0.01em;
}
.loki-nike-product-count .count-num {
  font-weight: 700;
  color: #111111;
}

.loki-nike-toolbar__right {
  display: flex;
  align-items: center;
}
.loki-nike-filter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.loki-nike-select-wrap {
  position: relative;
  display: inline-block;
}
.loki-nike-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  color: #111111;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size: 13px;
  border: 1px solid #e5e5e5;
  border-radius: 9999px;
  padding: 8px 36px 8px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.loki-nike-select:hover,
.loki-nike-select:focus {
  border-color: #111111;
  box-shadow: 0 0 0 1px #111111;
}

/* Active Filter Chips */
.loki-nike-active-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -6px 0 20px 0;
  padding: 4px 0;
}
.loki-nike-active-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #707072;
}
.loki-nike-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #111111 !important;
  text-decoration: none !important;
  transition: all 0.18s ease;
}
.loki-nike-active-chip .chip-x {
  font-size: 1.15rem;
  line-height: 1;
  color: #707072;
  margin-left: 2px;
  transition: color 0.18s ease;
}
.loki-nike-active-chip:hover {
  background: #111111;
  color: #ffffff !important;
  border-color: #111111;
}
.loki-nike-active-chip:hover .chip-x {
  color: #ffffff;
}
.loki-nike-clear-all {
  font-size: 0.82rem;
  font-weight: 600;
  color: #707072 !important;
  text-decoration: underline !important;
  margin-left: 6px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.loki-nike-clear-all:hover {
  color: #111111 !important;
}

@media (max-width: 768px) {
  .loki-nike-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .loki-nike-toolbar__right,
  .loki-nike-filter-form {
    width: 100%;
  }
  .loki-nike-select-wrap {
    flex: 1 1 auto;
  }
  .loki-nike-select {
    width: 100%;
  }
}

/* Category filter toolbar */
.tf-toolbar.loki-cat-filters {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  padding: 0 0 18px 0 !important;
  margin: 0 0 24px 0 !important;
  box-shadow: none !important;
}
.tf-toolbar.loki-cat-filters .tf-row {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.tf-toolbar.loki-cat-filters .tf-select {
  background-color: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  color: #111111 !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  font-size: 0.88rem !important;
  padding: 8px 36px 8px 16px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 13px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.tf-toolbar.loki-cat-filters .tf-select:hover,
.tf-toolbar.loki-cat-filters .tf-select:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 1px #111111 !important;
  outline: none !important;
}

/* Result count and orderby */
.woocommerce-result-count {
  float: left;
  margin: 10px 0 28px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: #707072;
}
.woocommerce-ordering {
  float: right;
  margin: 0 0 28px;
}
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: #111111;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size: 13px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  padding: 8px 38px 8px 16px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
  border-color: #111111;
}

@media (max-width: 600px) {
  .woocommerce-result-count, .woocommerce-ordering {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 12px;
  }
  .woocommerce-ordering select.orderby {
    width: 100%;
  }
}

/* Product listing grid — 3 columns on desktop with generous spacing */
.woocommerce ul.products {
  clear: both !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px 24px !important;
  list-style: none !important;
  margin: 0 0 48px 0 !important;
  padding: 0 !important;
}
@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 18px !important;
  }
}
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
  }
}

/* Product Card — Borderless Nike-style card layout */
.woocommerce ul.products li.product {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  position: relative !important;
  box-sizing: border-box !important;
  height: 100% !important;
  transition: transform 0.25s ease !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: none !important;
  border: none !important;
}

.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Picture Media Container — prominent 1:1 square with clean #f6f6f6 surface */
.woocommerce ul.products li.product .loki-card-media,
.woocommerce ul.products li.product a.woocommerce-loop-product__link > img {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}
@media (max-width: 768px) {
  .woocommerce ul.products li.product img {
    padding: 0 !important;
  }
}

/* Sale Badge */
.woocommerce ul.products li.product span.onsale {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  background: #ffffff !important;
  color: #991b1b !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Category Eyebrow */
.woocommerce ul.products li.product .loop-cat {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #9e6d0a !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  display: block !important;
  text-align: left !important;
}

/* Product Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  color: #111111 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
  color: var(--accent, #a62c1f) !important;
}
@media (max-width: 768px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.92rem !important;
    min-height: 2.5em !important;
  }
}

/* Spec Bars & Construction detail */
.woocommerce ul.products li.product .specbars {
  padding: 0 !important;
  margin: 4px 0 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.woocommerce ul.products li.product .specbar {
  display: grid !important;
  grid-template-columns: 68px 1fr 20px !important;
  align-items: center !important;
  gap: 8px !important;
}
.woocommerce ul.products li.product .specbar .lbl {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: #707072 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.woocommerce ul.products li.product .specbar .track {
  height: 4px !important;
  background: #ececec !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.woocommerce ul.products li.product .specbar .track .fill {
  height: 100% !important;
  background: #111111 !important;
  border-radius: 2px !important;
}
.woocommerce ul.products li.product .specbar .val {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-align: right !important;
}
.woocommerce ul.products li.product .specweight,
.woocommerce ul.products li.product .specsrc {
  padding: 0 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.64rem !important;
  color: #595959 !important;
  text-align: left !important;
  margin: 2px 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  text-align: left !important;
}
.woocommerce ul.products li.product .price del {
  font-size: 0.88rem !important;
  color: #666666 !important;
  opacity: 0.8 !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
  font-weight: 800 !important;
  color: #991b1b !important;
}

/* Button CTA — Hidden for clean modern sports store aesthetic (Nike, Adidas) */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: none !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
  margin: 48px 0 0 0 !important;
  text-align: center !important;
}
.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: inline-flex !important;
  gap: 6px !important;
  background: transparent !important;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #111111 !important;
  background: #f6f6f6 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: #111111 !important;
  color: #ffffff !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: #e5e5e5 !important;
}

/* ---------- Nike-style Infinite Scroll for Product Listings ---------- */
body.loki-infinite-scroll-enabled .woocommerce-pagination,
body.loki-infinite-scroll-enabled nav.woocommerce-pagination,
.woocommerce.loki-infinite-scroll-enabled .woocommerce-pagination {
  display: none !important;
}

.loki-infinite-status {
  width: 100%;
  margin: 36px 0 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loki-infinite-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
}

.loki-spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111111;
  animation: lokiDotPulse 1.2s infinite ease-in-out;
}
.loki-spinner-dot:nth-child(2) { animation-delay: 0.2s; }
.loki-spinner-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes lokiDotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.25; }
  40% { transform: scale(1.1); opacity: 1; }
}

.loki-spinner-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #707072;
  text-transform: uppercase;
  margin-left: 8px;
}

.loki-infinite-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 500px;
  padding: 24px 16px;
}

.loki-end-line {
  flex: 1;
  height: 1px;
  background: #e5e5e5;
}

.loki-end-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #888888;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes lokiCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loki-infinite-loaded {
  animation: lokiCardFadeIn 0.35s ease forwards;
}

/* ==============================================================
   HOMEPAGE: NIKE-STYLE PRODUCT DESIGN & WHITE BACKGROUND
   ============================================================== */
body.home,
body.home #main,
body.home #weekly-deals,
body.home #products,
body.home #categories,
body.home #setup-tools-promo,
body.home #guides {
  background: #ffffff !important;
}

body.home section.alt {
  background: #ffffff !important;
}

/* Wide Container for Generous, Bigger Pictures */
body.home #weekly-deals .wrap,
body.home #products .wrap {
  max-width: 1600px !important;
  padding: 0 48px !important;
}
@media (max-width: 1024px) {
  body.home #weekly-deals .wrap,
  body.home #products .wrap {
    padding: 0 24px !important;
  }
}
@media (max-width: 600px) {
  body.home #weekly-deals .wrap,
  body.home #products .wrap {
    padding: 0 16px !important;
  }
}

/* Product Grid: 3 columns on desktop, 2 columns on mobile */
body.home #weekly-deals .pgrid,
body.home #products .pgrid {
  clear: both !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px 24px !important;
  margin: 0 0 36px 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
@media (max-width: 1024px) {
  body.home #weekly-deals .pgrid,
  body.home #products .pgrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 18px !important;
  }
}
@media (max-width: 768px) {
  body.home #weekly-deals .pgrid,
  body.home #products .pgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 12px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}

/* Borderless Card Layout */
body.home #weekly-deals .card,
body.home #products .card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  position: relative !important;
  box-sizing: border-box !important;
  height: 100% !important;
  flex: none !important;
  transition: transform 0.25s ease !important;
}
body.home #weekly-deals .card:hover,
body.home #products .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Bigger Picture: 1:1 Aspect Ratio, No Padding, Clean Surface */
body.home #weekly-deals .card-media,
body.home #products .card-media {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #f6f6f6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}
body.home #weekly-deals .card-media a,
body.home #products .card-media a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
body.home #weekly-deals .card-media img,
body.home #products .card-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.home #weekly-deals .card:hover .card-media img,
body.home #products .card:hover .card-media img {
  transform: scale(1.04) !important;
}

/* Badges */
body.home #weekly-deals .card-badge,
body.home #products .card-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  background: #ffffff !important;
  color: #991b1b !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}
body.home #products .card-badge.jade {
  color: #15803d !important;
}

/* Card Body & Typography */
body.home #weekly-deals .card-body,
body.home #products .card-body {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-align: left !important;
  gap: 0 !important;
}
body.home #weekly-deals .card-cat,
body.home #products .card-cat {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #9e6d0a !important;
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  display: block !important;
  text-align: left !important;
}
body.home #weekly-deals .card-title,
body.home #products .card-title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}
body.home #weekly-deals .card-title a,
body.home #products .card-title a {
  color: #111111 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
body.home #weekly-deals .card-title a:hover,
body.home #products .card-title a:hover {
  color: var(--accent, #a62c1f) !important;
}
@media (max-width: 768px) {
  body.home #weekly-deals .card-title,
  body.home #products .card-title {
    font-size: 0.92rem !important;
    min-height: 2.5em !important;
  }
}

/* Remove description clutter */
body.home #weekly-deals .card-for,
body.home #products .card-for {
  display: none !important;
}

/* Clean Spec Bars */
body.home #products .specbars {
  padding: 0 !important;
  margin: 4px 0 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.home #products .specbar {
  display: grid !important;
  grid-template-columns: 68px 1fr 20px !important;
  align-items: center !important;
  gap: 8px !important;
}
body.home #products .specbar .lbl {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: #707072 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
body.home #products .specbar .track {
  height: 4px !important;
  background: #ececec !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
body.home #products .specbar .track .fill {
  height: 100% !important;
  background: #111111 !important;
  border-radius: 2px !important;
}
body.home #products .specbar .val {
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-align: right !important;
}
body.home #products .specweight,
body.home #products .specsrc {
  padding: 0 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.64rem !important;
  color: #595959 !important;
  text-align: left !important;
  margin: 2px 0 !important;
}

/* Price & Clean Foot */
body.home #weekly-deals .card-foot,
body.home #products .card-foot {
  border-top: none !important;
  padding: 0 !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
}
body.home #weekly-deals .price,
body.home #products .price {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  text-align: left !important;
}
body.home #weekly-deals .price del,
body.home #products .price del {
  font-size: 0.88rem !important;
  color: #666666 !important;
  opacity: 0.8 !important;
  order: 0 !important;
}
body.home #weekly-deals .price ins,
body.home #products .price ins {
  text-decoration: none !important;
  font-weight: 800 !important;
  color: #991b1b !important;
}

/* Remove "View" Buttons inside cards */
body.home #weekly-deals .card-foot .card-link,
body.home #products .card-foot .card-link,
body.home #weekly-deals .card .card-link,
body.home #products .card .card-link {
  display: none !important;
}

/* Explore Weekly Deals Link at Bottom */
.view-all-deals-wrap {
  margin-top: 36px;
  text-align: center;
}
.view-all-deals-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: #111111;
  text-decoration: none;
  border: 1px solid #111111;
  padding: 10px 24px;
  border-radius: 999px;
  transition: all 0.2s ease;
}
.view-all-deals-link:hover {
  background: #111111;
  color: #ffffff;
}

/* ==============================================================
   HOMEPAGE MODERN PURE-WHITE PALETTE & ACCESSIBILITY FIXES
   ============================================================== */
body.home {
  background: #ffffff !important;
  --bg: #ffffff;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --border: #e5e5e5;
  --shadow: rgba(0, 0, 0, 0.05);
}
body.home #series-showcase,
body.home .hero,
body.home #setup-tools-promo,
body.home #weekly-deals,
body.home #products,
body.home #categories,
body.home #compare,
body.home #guides,
body.home #club {
  background: #ffffff !important;
}
body.home #flagship-rubbers.flagship-section {
  background: radial-gradient(circle at 85% 15%, rgba(203, 162, 92, 0.12), transparent 45%), #141210 !important;
}
body.home .flagship-kicker {
  color: #dfb15b !important;
}
body.home .eyebrow {
  color: #B3261E !important;
}
body.home .club .eyebrow,
body.home .setuptile .eyebrow,
body.home .signature-banner .eyebrow {
  color: #dfb15b !important;
}
body.home .btn.btn-ghost {
  border: 1px solid #111111 !important;
  color: #111111 !important;
}
body.home .btn.btn-ghost:hover {
  background: #111111 !important;
  color: #ffffff !important;
}
body.home .compare-box-sports {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
}
body.home .compare-table-sports td {
  border-bottom: 1px solid #e5e5e5 !important;
}
body.home .hero-stats {
  border-top: 1px solid #e5e5e5 !important;
}
body.home .hero-stats span {
  color: #595959 !important;
}
body.home .cattile .ctlabel .ctcount {
  color: #f4f4f5 !important;
}
body.home .guide p {
  color: #555555 !important;
}



/* Two-column product layout (images | summary) — previously missing
   entirely, which let the gallery image stretch across the full page
   width and upscale past its native resolution. */
.woocommerce div.product{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;
  /* WooCommerce renders the .onsale badge as a sibling *before* div.images,
     not nested inside it. Without position:relative here, the badge's
     absolute top/left resolves against the page instead of the product
     box, so it lands top-left of the viewport (worst on mobile, where
     it overlaps the header) instead of on the image. */
  position:relative;
}
/* Explicit placement, so the description tabs sit directly under the gallery
   instead of under the summary.

   With plain auto-placement the two columns share one row, whose height is
   the taller of the pair — the summary, by a long way, since it carries the
   spec panel, the volume ladder and the restock form. That left roughly 500px
   of dead space under the gallery before the tabs began, and pushed the
   description most of a screen further down than it needed to be.

   Spanning the summary across both rows lets the tabs start at the bottom of
   the gallery. The rows stay auto-sized, which is what makes this work: a
   spanning item only contributes the height it needs beyond the rows' own
   content, and it can't push a track past its growth limit while any other
   track can still absorb the space. So row 1 settles at exactly the gallery's
   height, and only a summary genuinely taller than gallery + tabs spills into
   row 2. (A definite minimum here — minmax(0, max-content) — looks like the
   tidier way to pin row 1, but it takes the row out of that distribution
   entirely and dumps the summary's whole height into row 2, which just moves
   the dead space below the description instead of removing it.)

   The upsells and related sections were also sharing that row structure and
   rendering at half width in column 2; they now span the full width. */
.woocommerce div.product > .woocommerce-product-gallery{grid-row:1;grid-column:1;}
.woocommerce div.product > .summary{grid-row:1;grid-column:2;}
.woocommerce div.product > .pdp-modular-wrap{grid-column:1 / -1;width:100%;box-sizing:border-box;}
.woocommerce div.product > .woocommerce-tabs{grid-column:1 / -1;}
.woocommerce div.product > .upsells,
.woocommerce div.product > .related{grid-column:1 / -1;}

@media (max-width:860px){
  /* minmax(0, 1fr), not bare 1fr: a variation <select> can have a wider
     intrinsic min-content than the column, which otherwise inflates the
     whole grid track (and every item sharing it, gallery included) past
     the container's right edge — eating into the page's right padding
     on any variable product. */
  .woocommerce div.product{grid-template-columns:minmax(0,1fr);gap:28px;}
  /* One column: the DOM order (gallery, summary, modular, tabs, upsells) is already
     the right reading order, so hand the sections back to auto-placement. */
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary,
  .woocommerce div.product > .pdp-modular-wrap,
  .woocommerce div.product > .woocommerce-tabs{grid-row:auto;grid-column:auto;}
}
.woocommerce div.product div.images{
  border-radius:6px;overflow:hidden;background:var(--surface-2);position:relative;
}
.woocommerce div.product div.images img{
  width:100%;height:auto;display:block;max-width:100%;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper{position:relative;}

/* Zoom trigger (the "loupe" icon) — needs explicit positioning since this
   theme doesn't load WooCommerce's own gallery stylesheet. */
.woocommerce-product-gallery__trigger{
  position:absolute;top:16px;right:16px;z-index:5;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -4px var(--shadow);
  transition:border-color .18s ease, transform .18s ease;
}
.woocommerce-product-gallery__trigger:hover{border-color:var(--accent);transform:translateY(-1px);}
.woocommerce-product-gallery__trigger img{width:16px;height:16px;}

/* Thumbnail strip */
.woocommerce div.product ol.flex-control-nav.flex-control-thumbs{
  display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:16px 0 0;padding:0;
}
.woocommerce div.product ol.flex-control-thumbs li{
  width:68px;height:68px;cursor:pointer;
}
.woocommerce div.product ol.flex-control-thumbs img{
  width:100%;height:100%;object-fit:cover;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--border);opacity:0.72;background:#ffffff;
  transition:border-color .2s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.woocommerce div.product ol.flex-control-thumbs li:hover img,
.woocommerce div.product ol.flex-control-thumbs img:hover{
  opacity:1;
  border-color:var(--text, #111111);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);
}
.woocommerce div.product ol.flex-control-thumbs img.flex-active{
  border-color:var(--accent);opacity:1;
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(166, 44, 31, 0.22);
}
.woocommerce div.product .flex-direction-nav{list-style:none;margin:0;padding:0;}
.woocommerce div.product .flex-direction-nav a{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  text-indent:-9999px;overflow:hidden;box-shadow:0 4px 14px -4px var(--shadow);
}
.woocommerce div.product .flex-direction-nav a::after{
  content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:2px solid var(--text);border-right:2px solid var(--text);
  text-indent:0;
}
.woocommerce div.product .flex-direction-nav a.flex-next{right:-14px;}
.woocommerce div.product .flex-direction-nav a.flex-next::after{
  transform:translate(-65%,-50%) rotate(45deg);
}
.woocommerce div.product .flex-direction-nav a.flex-prev{left:-14px;}
.woocommerce div.product .flex-direction-nav a.flex-prev::after{
  transform:translate(-35%,-50%) rotate(-135deg);
}

.woocommerce div.product div.summary{padding-left:0;}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family:var(--font-mono);font-size:1.4rem;color:var(--accent);
}
.woocommerce div.product p.stock{
  display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;
  font-family:var(--font-mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:.07em;
  padding:8px 16px;border-radius:20px;
}
.woocommerce div.product p.stock::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;
}
.woocommerce div.product p.stock.in-stock{
  background:color-mix(in srgb, var(--jade) 14%, var(--surface));color:var(--jade);
}
.woocommerce div.product p.stock.out-of-stock{
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));color:var(--accent);
}
.woocommerce div.product p.stock.on-backorder{
  background:color-mix(in srgb, var(--gold) 14%, var(--surface));color:var(--gold);
}

/* ---------- back-in-stock notify form ---------- */
.loki-stock-notify{
  margin:22px 0;padding:20px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);
}
.loki-stock-notify__notice{
  font-size:0.88rem;color:var(--jade);margin-bottom:14px;font-weight:600;
}
.loki-stock-notify__label{
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);margin-bottom:12px;
}
.loki-stock-notify__form{display:flex;flex-wrap:wrap;gap:12px;}
.loki-stock-notify__form input[type="email"]{
  flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:0.92rem;
}
.loki-stock-notify__form input[type="email"]:focus{border-color:var(--accent);}
.loki-stock-notify__form input[type="email"]:focus:not(:focus-visible){outline:none;}
.loki-stock-notify__form button{flex-shrink:0;}
.woocommerce div.product form.cart{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:18px;margin:24px 0;
}
.woocommerce div.product form.cart .quantity{margin:0;}
.woocommerce div.product form.cart .quantity .qty{
  width:64px;padding:14px 10px;text-align:center;
  border:1px solid var(--border);border-radius:2px;
  background:var(--surface);color:var(--text);
  font-family:var(--font-mono);font-size:0.95rem;
}
.woocommerce div.product form.cart .button{
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:2px;
  font-family:var(--font-body);font-weight:600;padding:14px 28px;cursor:pointer;
}

/* AJAX add-to-cart states: a spinner while WooCommerce's own AJAX request is
   in flight, a tick once it succeeds. Shared by the archive/category loop
   button (already AJAX via WooCommerce core -- these classes were already
   being toggled with no visual change before this rule existed) and the
   single-product button (ajaxified by assets/js/single-product-ajax-cart.js). */
.add_to_cart_button.loading,
.single_add_to_cart_button.loading{
  position:relative;color:transparent !important;pointer-events:none;
}
.add_to_cart_button.loading::after,
.single_add_to_cart_button.loading::after{
  content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid var(--accent-ink);border-top-color:transparent;border-radius:50%;
  animation:loki-ajax-cart-spin .6s linear infinite;
}
@keyframes loki-ajax-cart-spin{to{transform:rotate(360deg);}}
.add_to_cart_button.added,
.single_add_to_cart_button.added{
  background:var(--jade) !important;
}
/* The same drawn tick the trust strip uses (front-page.php's $tick_icon), as
   a mask so it inherits the button's own ink -- not a "\2713" glyph, which
   would be a different stroke and weight to every other icon on the site. */
.add_to_cart_button.added::before,
.single_add_to_cart_button.added::before{
  content:"";display:inline-block;vertical-align:-1px;
  width:13px;height:13px;margin-right:8px;
  background-color:currentColor;
  -webkit-mask:var(--icon-tick) center/contain no-repeat;
  mask:var(--icon-tick) center/contain no-repeat;
}

/* "View basket", which WooCommerce core appends after the button once an
   AJAX add succeeds (wc-add-to-cart.js). Core ships it unstyled, so it
   arrived as default underlined 16px body text on both the single product
   page and the category cards. Treated here as the secondary action it is,
   in the same mono/uppercase/muted language as a.reset_variations directly
   above it in this form. */
/* Hide WooCommerce core's raw unstyled "View basket" link on single product form
   in favor of the in-button morph (Option 1). */
.woocommerce div.product form.cart a.added_to_cart{
  display:none !important;
}
.woocommerce ul.products li.product a.added_to_cart{
  font-family:var(--font-mono);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:5px;
  transition:color .18s ease, text-decoration-color .18s ease;
  animation:loki-added-link-in .3s cubic-bezier(.2,.7,.3,1) both;
  display:block;margin:-6px 18px 16px;text-align:center;
}
.woocommerce ul.products li.product a.added_to_cart:hover{
  color:var(--accent);text-decoration-color:var(--accent);
}
.woocommerce ul.products li.product a.added_to_cart:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* In-Button Morph: "Added! View Bag →" */
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag{
  background:var(--jade,#1e824c) !important;
  color:#ffffff !important;
  border-color:var(--jade,#1e824c) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  box-shadow:0 4px 14px rgba(30,130,76,0.3) !important;
  cursor:pointer !important;
  transition:all .2s ease !important;
  text-decoration:none !important;
  letter-spacing:0.04em !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag:hover{
  background:#186a3b !important;
  border-color:#186a3b !important;
  box-shadow:0 6px 18px rgba(30,130,76,0.42) !important;
  transform:translateY(-1px);
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket .loki-btn-tick,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag .loki-btn-tick{
  width:18px;height:18px;stroke:#ffffff;stroke-width:2.5;flex-shrink:0;
  animation:loki-pop-tick .25s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes loki-pop-tick{
  0%{transform:scale(.4);opacity:0;}
  100%{transform:scale(1);opacity:1;}
}
@keyframes loki-added-link-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .woocommerce div.product form.cart a.added_to_cart,
  .woocommerce ul.products li.product a.added_to_cart{animation:none;}
}

/* ---------- variable product picker (e.g. Handle Type: Flare/CS/ST) ---------- */
.woocommerce div.product form.cart.variations_form{
  flex-direction:column;align-items:stretch;gap:0;
}
.woocommerce div.product table.variations{
  width:100%;margin:0 0 18px;border:none;
}
.woocommerce div.product table.variations tr{display:block;margin:0 0 14px;}
.woocommerce div.product table.variations th.label{
  display:block;text-align:left;padding:0 0 8px;font-weight:400;
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
}
.woocommerce div.product table.variations td.value{display:block;padding:0;}
.woocommerce div.product table.variations select{
  width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--font-body);font-size:0.92rem;color:var(--text);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E644F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size:13px;
  border:1px solid var(--border);border-radius:4px;
  padding:13px 40px 13px 16px;cursor:pointer;transition:border-color .2s ease;
}
.woocommerce div.product table.variations select:hover,
.woocommerce div.product table.variations select:focus{border-color:var(--accent);}
.woocommerce div.product table.variations select:focus:not(:focus-visible){outline:none;}
.woocommerce div.product form.cart.variations_form a.reset_variations{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin:4px 0 18px;
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.woocommerce div.product form.cart.variations_form a.reset_variations:hover{
  color:var(--accent);border-color:var(--accent);
}
.woocommerce div.product .woocommerce-variation.single_variation{margin:0 0 18px;}
.woocommerce div.product .woocommerce-variation-price .price{font-size:1.2rem;}
.woocommerce div.product .woocommerce-variation-availability p.stock{margin-top:8px;}
.woocommerce div.product .variations_button{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:18px;
}
/* WooCommerce marks the add-to-cart button .disabled in two situations that
   deserve opposite treatments, so they are split rather than sharing one rule.

   .wc-variation-is-unavailable means the chosen combination cannot be bought.
   It stays muted: the page already carries an OUT OF STOCK line and a Notify
   me CTA, and drawing the eye back to a dead button would compete with them. */
.woocommerce div.product .woocommerce-variation-add-to-cart .button.disabled{
  background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;
}
/* .wc-variation-selection-needed only means "pick an option first", and it is
   the state 91 of the 141 published products open in - every rubber with a
   Colour & Thickness selector and every blade with a Handle Type one. Sharing
   the muted fill put a #FAF4E6 button on a #F2ECDD page at 1.07:1 against the
   backdrop, so on two thirds of product pages the purchase zone first painted
   with nothing in it that reads as a buy button.

   An outline in the accent carries 5.94:1 shape contrast against the page
   while still reading as not-yet-actionable beside the solid fill it becomes.
   The 2px border is paid for out of the padding, so the button does not
   resize the moment a variation is picked. */
.woocommerce div.product .woocommerce-variation-add-to-cart .button.wc-variation-selection-needed{
  background:transparent;color:var(--accent);
  border:2px solid var(--accent);padding:12px 26px;opacity:1;
  /* The base button only transitions background. The class lands from JS after
     first paint, so with background alone the label snapped to the accent while
     the fill was still fading through it - ~200ms of accent-on-accent. Fading
     the three together turns that flash into one legible morph. */
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
/* Keyboard users get the same focal treatment the pointer path already has. */
.woocommerce div.product form.cart .button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

@media (max-width:600px){
  /* The purchase row was right-aligned with an auto-width button: 149x44 on a
     375px viewport, sitting in 339px of row with the quantity box taking the
     visual lead and ~110px of dead space beside it. Stretch the CTA across the
     remaining width so the primary action owns the span a thumb travels, and
     lift it off the 44px tap-target floor. */
  .woocommerce div.product form.cart,
  .woocommerce div.product .variations_button{
    justify-content:stretch;gap:12px;
  }
  .woocommerce div.product form.cart .button{
    flex:1 1 auto;min-height:48px;justify-content:center;
  }
  /* Keeps the desktop right-alignment: the CTA shares this row with the
     quantity box, so its right edge is the row's right edge and the link
     lands flush under it. Centring instead left it 38px off the button's
     centre, related to nothing. The desktop -6px trim is dropped (the row
     gap is already 12px here) and the link is padded to a real thumb
     target -- 17px of text alone is well under the 44px floor the button
     above it already respects. */
  .woocommerce div.product form.cart a.added_to_cart{
    display:none !important;
  }
}

.woocommerce nav.woocommerce-breadcrumb{
  font-family:var(--font-mono);font-size:0.75rem;color:var(--text-muted);margin-bottom:28px;
}
.woocommerce nav.woocommerce-breadcrumb a{color:var(--text-muted);text-decoration:none;}
.woocommerce-shop nav.woocommerce-breadcrumb,
.tax-product_cat nav.woocommerce-breadcrumb,
.tax-product_tag nav.woocommerce-breadcrumb,
.archive.woocommerce nav.woocommerce-breadcrumb,
.woocommerce .term-description,
.woocommerce .page-description {
  display: none !important;
}

/* ---------- "Shop by" filter bar (parsed from category descriptions) ---------- */
.loki-shop-by{
  margin:22px 0 32px;padding:20px 24px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;gap:14px;
}
.loki-shop-by__group{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.loki-shop-by__label{
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);white-space:nowrap;
}
.loki-shop-by__chips{display:flex;flex-wrap:wrap;gap:8px;}
.loki-shop-by__chip{
  font-family:var(--font-body);font-size:0.84rem;font-weight:600;
  padding:6px 14px;border-radius:16px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);text-decoration:none;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.loki-shop-by__chip:hover{border-color:var(--accent);color:var(--accent);}
.loki-shop-by__count{font-family:var(--font-mono);font-weight:400;color:var(--text-muted);font-size:0.78rem;}
.loki-shop-by__note{
  font-size:0.82rem;font-style:italic;color:var(--text-muted);margin:0;
  padding-top:12px;border-top:1px dashed var(--border);
}
.woocommerce span.onsale{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:3px;
}
.woocommerce .star-rating{color:var(--gold);}
.woocommerce-notices-wrapper{margin:0 0 8px;}
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:16px 20px 16px 52px;margin:0 0 28px;position:relative;
  font-family:var(--font-body);font-size:0.92rem;color:var(--text);line-height:1.5;
  list-style:none;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before{
  content:"\2713";
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--jade);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;font-weight:700;line-height:1;
}
.woocommerce-info::before{background:var(--accent);content:"i";font-style:italic;font-family:var(--font-display);}
.woocommerce-error::before{background:var(--accent);content:"!";}
.woocommerce-message a.button, .woocommerce-info a.button{
  margin-left:auto;flex-shrink:0;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button{
  background:var(--accent);color:var(--accent-ink);border-radius:2px;font-family:var(--font-body);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;font-size:0.85rem;text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background:var(--accent-soft);color:var(--accent-ink);
}
.woocommerce table.shop_table{border-color:var(--border);font-family:var(--font-body);}
.woocommerce table.shop_table th{font-family:var(--font-mono);text-transform:uppercase;font-size:0.7rem;letter-spacing:.06em;color:var(--text-muted);}
.woocommerce-cart table.cart img{width:64px;}

/* ---------- product meta (SKU / category / tag / brand) ---------- */
.product_meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--font-mono);font-size:0.76rem;color:var(--text-muted);
  padding:20px 0;border-top:1px solid var(--border);margin-top:26px;
}
.product_meta > span{display:inline-flex;gap:6px;align-items:baseline;}
.product_meta a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);}
.product_meta a:hover{color:var(--accent);border-color:var(--accent);}

/* ---------- product tabs (Description / Additional info / Reviews) ---------- */
.woocommerce-tabs{margin-top:8px;}
.woocommerce-tabs ul.tabs{
  display:flex;gap:30px;list-style:none;margin:0 0 30px;padding:0;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce-tabs ul.tabs li a{
  display:inline-block;padding:0 0 14px;font-family:var(--font-mono);font-size:0.76rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s ease, border-color .2s ease;
}
.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover{
  color:var(--text);border-bottom-color:var(--accent);
}
.woocommerce-tabs .panel{font-size:0.96rem;line-height:1.75;color:var(--text);max-width:70ch;}
.woocommerce-tabs .panel h2{font-family:var(--font-display);font-size:1.4rem;margin-bottom:18px;}

/* ---------- volume discount "tier ladder" (product page + basket) ---------- */
.volume-ladder{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:22px 24px 20px;margin:24px 0;
}
.volume-ladder-head{
  font-family:var(--font-display);font-weight:700;font-size:1rem;margin:0 0 20px;
}
.volume-ladder-head strong{color:var(--accent);}
.volume-ladder-steps{display:flex;justify-content:space-between;gap:0;margin:0 0 10px;}
.vl-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;}
.vl-pct{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:var(--text-muted);
  background:var(--surface);border:2px solid var(--border);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.vl-step.reached .vl-pct{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.vl-amt{font-family:var(--font-mono);font-size:0.64rem;color:var(--text-muted);}
/* Visually-hidden accessible label for the free-delivery step, whose circle
   holds a decorative emoji rather than literal text. */
.vl-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.volume-ladder-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin:0 calc(100% / 12) 16px;}
.volume-ladder-bar-fill{
  width:100%;height:100%;background:var(--accent);border-radius:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.volume-ladder-note{font-size:0.85rem;line-height:1.6;color:var(--text-muted);margin:0;}
.volume-ladder-note strong{color:var(--text);font-weight:700;}
@media (max-width:480px){
  .vl-pct{width:26px;height:26px;font-size:0.62rem;}
  .vl-amt{font-size:0.56rem;}
}

/* ---------- basket page: quick-add cross-sell + trust badges ---------- */
/* Same boxed-section treatment as .volume-ladder above it on this page --
   a filled background + border makes this read as one distinct block on
   the cream page background, rather than blending into the surrounding
   WooCommerce cart content. */
.basket-crosssell{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:22px 24px 24px;margin:24px 0 0;
}
.basket-crosssell__head{
  font-family:var(--font-display);font-weight:700;font-size:0.95rem;margin:0 0 14px;
}
.basket-crosssell__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media (max-width:768px){.basket-crosssell__grid{grid-template-columns:1fr;}}
.bcs-card{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:12px;
  box-shadow:0 6px 16px -10px var(--shadow);
}
.bcs-card__img{width:44px;height:44px;object-fit:contain;background:var(--surface-2);border-radius:4px;flex-shrink:0;}
.bcs-card__body{flex:1;min-width:0;}
.bcs-card__name{font-size:0.82rem;font-weight:700;margin:0 0 2px;line-height:1.3;}
.bcs-card__desc{font-size:0.72rem;color:var(--text-muted);margin:0;line-height:1.3;}
/* Live "N in basket" indicator -- shown once the customer has quick-added
   at least one, so repeat clicks (adding a 2nd, 3rd...) have visible
   feedback without the button itself ever locking up. */
.bcs-card__qty{font-size:0.68rem;font-weight:700;color:var(--jade);margin:4px 0 0;}
.bcs-card__add{
  flex-shrink:0;font-family:var(--font-mono);font-size:0.72rem;font-weight:700;white-space:nowrap;
  padding:8px 12px;border-radius:2px;border:1px solid var(--accent);background:var(--surface);color:var(--accent);
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.bcs-card__add:hover{background:var(--accent);color:var(--accent-ink);}
.bcs-card__add.is-loading{opacity:0.6;cursor:wait;}

/* Single-card variant (the checkout assembly add-on): the base grid is
   repeat(3,1fr) for the basket's three accessories, which would leave a
   lone card occupying one third of the row with two empty columns beside
   it. Forces one column at every width instead of only below 768px. */
.basket-crosssell__grid--single{grid-template-columns:1fr;}
/* Free actions read as jade (this codebase's success/positive colour,
   already used for "added" states) rather than the accent used for paid
   quick-adds, so the £0 nature is visible before the customer even reads
   the label. */
.bcs-card__add--free{border-color:var(--jade);color:var(--jade);}
.bcs-card__add--free:hover{background:var(--jade);color:var(--accent-ink);}

/* Custom Bat Assembly add-on card in basket cross-sell */
.bcs-card--assembly {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-left: 4px solid var(--jade, #1e824c);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(28,24,17,0.04);
}
.bcs-card--assembly .bcs-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bcs-card--assembly .bcs-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bcs-card--assembly .bcs-card__img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--surface-2, #f5f3ef);
  border-radius: 6px;
  flex-shrink: 0;
}
.bcs-card--assembly .bcs-card__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bcs-card--assembly .bcs-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #1c1811);
  margin: 0;
  line-height: 1.25;
}
.bcs-card--assembly .bcs-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  min-width: 0;
}
.bcs-card--assembly .bcs-card__desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-muted, #666);
  line-height: 1.45;
  margin: 0;
}
.bcs-card--assembly .loki-assembly-selector--inline {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(229,229,229,0.8);
}
.bcs-card--assembly .loki-assembly-pills {
  display: flex;
  gap: 12px;
}
.bcs-card--assembly .loki-assembly-pill {
  flex: 1;
}
.bcs-card--assembly .bcs-card__action {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.bcs-card--assembly .bcs-card__add--free {
  padding: 10px 24px;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 4px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--jade, #1e824c);
  color: var(--jade, #1e824c);
  transition: all .2s ease;
  cursor: pointer;
}
.bcs-card--assembly .bcs-card__add--free:hover {
  background: var(--jade, #1e824c);
  color: #fff;
}

@media (max-width: 640px) {
  .bcs-card--assembly {
    padding: 14px;
    gap: 12px;
    margin-bottom: 28px;
  }
  .bcs-card--assembly .bcs-card__meta {
    align-items: center;
    gap: 10px;
  }
  .bcs-card--assembly .bcs-card__img {
    width: 42px;
    height: 42px;
  }
  .bcs-card--assembly .bcs-card__name {
    font-size: 0.94rem;
  }
  .bcs-card--assembly .bcs-card__desc {
    font-size: 0.82rem;
    line-height: 1.4;
  }
  .bcs-card--assembly .loki-assembly-pills {
    flex-direction: column;
    gap: 8px;
  }
  .bcs-card--assembly .loki-assembly-pill {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
  }
  .bcs-card--assembly .bcs-card__action {
    width: 100%;
  }
  .bcs-card--assembly .bcs-card__action .bcs-card__add--free {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
}


/* ---------- Custom Bat Assembly & Forehand Colour Selection ---------- */
.checkout-assembly-included.loki-assembly-card{
  display:flex;flex-direction:column;gap:16px;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e5e5e5);
  border-left:4px solid var(--jade,#1e824c);
  border-radius:12px;padding:18px 22px;
  margin:20px 0;
  box-shadow:0 4px 16px rgba(28,24,17,0.04);
}
.loki-assembly-card__status{
  display:flex;align-items:flex-start;gap:14px;
}
.loki-assembly-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(30,130,76,0.12);color:var(--jade,#1e824c);
  flex-shrink:0;margin-top:2px;
}
.loki-assembly-card__icon svg{
  width:18px;height:18px;stroke:var(--jade,#1e824c);
}
.loki-assembly-card__info{
  flex:1;min-width:0;
}
.loki-assembly-card__heading{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-display);font-size:1.02rem;font-weight:700;
  color:var(--text,#1c1811);
}
.loki-assembly-badge{
  font-family:var(--font-mono);font-size:0.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;
  background:rgba(30,130,76,0.12);color:var(--jade,#1e824c);
  padding:3px 8px;border-radius:999px;
}
.loki-assembly-card__sub{
  font-family:var(--font-body);font-size:0.86rem;color:#666;
  margin:4px 0 0;line-height:1.45;
}
.loki-assembly-selector{
  display:flex;flex-direction:column;gap:8px;
  padding-top:14px;
  border-top:1px dashed var(--border,#e5e5e5);
}
.loki-assembly-selector--inline{
  margin-top:12px;padding-top:12px;
  border-top:1px dashed rgba(229,229,229,0.8);
}
.loki-assembly-selector__label{
  font-family:var(--font-display);font-size:0.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text,#1c1811);
}
.loki-assembly-pills{
  display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;
}
.loki-assembly-pill{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 16px;border-radius:8px;
  background:#fff;border:1.5px solid var(--border,#e5e5e5);
  cursor:pointer;transition:all .18s ease;
  text-align:left;color:var(--text,#1c1811);
  box-shadow:0 1px 4px rgba(28,24,17,0.04);
}
.loki-assembly-pill:hover{
  border-color:#999;background:#f9fafb;
  transform:translateY(-1px);
}
.loki-assembly-pill.is-selected{
  border-color:var(--accent,#ba2525);
  background:#fffbfb;
  box-shadow:0 0 0 2px rgba(186,37,37,0.2), 0 2px 8px rgba(186,37,37,0.08);
}
.loki-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  flex-shrink:0;border:2px solid #fff;
}
.loki-dot--black{
  background:#1a1a1a;box-shadow:0 0 0 1px #555;
}
.loki-dot--red{
  background:#c92a2a;box-shadow:0 0 0 1px #c92a2a;
}
.loki-pill-label{
  display:flex;flex-direction:column;gap:1px;
}
.loki-pill-label strong{
  font-family:var(--font-display);font-size:0.88rem;font-weight:700;
  color:var(--text,#1c1811);line-height:1.2;
}
.loki-assembly-pill.is-selected .loki-pill-label strong{
  color:var(--accent,#ba2525);
}
.loki-pill-label small{
  font-family:var(--font-body);font-size:0.75rem;color:#777;
}
.loki-assembly-status{
  font-family:var(--font-mono);font-size:0.74rem;font-weight:600;
  color:var(--jade,#1e824c);min-height:1.2em;margin:2px 0 0;
  transition:opacity .2s ease;
}
.loki-cart-assembly-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:0.82rem;line-height:1.3;
  color:var(--text,#1c1811);
  background:rgba(186,37,37,0.05);border:1px solid rgba(186,37,37,0.22);
  border-radius:6px;padding:4px 10px;margin-top:6px;
}
.loki-cart-assembly-badge .loki-dot{
  width:10px;height:10px;border-width:1px;
}
@media(max-width:600px){
  .loki-assembly-pills{flex-direction:column;}
  .loki-assembly-pill{width:100%;}
}




/* ---------- "You may also like…" (curated upsells, single product page) ---------- */
.woocommerce div.product .upsells.products{
  margin-top:56px;padding-top:40px;border-top:1px solid var(--border);
}
.woocommerce div.product .upsells.products > h2{
  font-family:var(--font-mono);font-weight:600;font-size:0.7rem;
  text-transform:uppercase;letter-spacing:0.16em;color:var(--accent);
  display:flex;align-items:center;gap:8px;margin-bottom:26px;
}
.woocommerce div.product .upsells.products > h2::before{
  content:"";width:16px;height:1px;background:var(--accent);display:inline-block;flex-shrink:0;
}

/* ---------- star ratings: average display + interactive review input ---------- */
/* Real markup: <div class="star-rating"><span style="width:X%">Rated N out of 5</span></div>
   The span's literal text is for accessibility; text-indent pushes it out of
   view (without touching font-size, so the ::before pseudo still inherits the
   right size) while the absolutely-positioned ::before stars stay visible. */
.woocommerce .star-rating{
  overflow:hidden;position:relative;height:1.2em;line-height:1.2em;
  font-size:0.9rem;width:5.4em;font-family:Arial,sans-serif;
}
.woocommerce .star-rating::before{
  content:"\2605\2605\2605\2605\2605";color:var(--border);position:absolute;top:0;left:0;
}
.woocommerce .star-rating span{
  overflow:hidden;position:absolute;top:0;left:0;height:100%;
  text-indent:-9999px;
}
.woocommerce .star-rating span::before{
  content:"\2605\2605\2605\2605\2605";color:var(--gold);position:absolute;top:0;left:0;
  text-indent:0;
}

/* Interactive review rating input. WooCommerce's DOM order is ascending
   (star-1 ... star-5) and its own JS only ever adds .active to the single
   clicked star — so :has() is used to also light up every earlier star,
   both on hover (preview) and on .active/.selected (the persisted choice),
   rather than only the exact star clicked. */
p.stars{display:flex;gap:3px;margin:10px 0 0;}
p.stars a{font-size:0;line-height:1;text-decoration:none;}
p.stars a::before{
  font-family:Arial,sans-serif;font-size:1.5rem;content:"\2605";color:var(--border);
  transition:color .15s ease;
}
p.stars a:hover::before,
p.stars a:has(~ a:hover)::before,
p.stars a.active::before,
p.stars a:has(~ a.active)::before{
  color:var(--gold);
}

/* ---------- review / comment form ---------- */
#reviews #comments{margin-bottom:32px;}
#reviews .comment-form-rating label,
.comment-form label{
  display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
}
.comment-form p{margin:0 0 22px;}
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{
  width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:0.95rem;
  transition:border-color .2s ease;
}
.comment-form textarea{min-height:140px;resize:vertical;}
.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus{
  border-color:var(--accent);
}
.comment-form textarea:focus:not(:focus-visible),.comment-form input:focus:not(:focus-visible){outline:none;}
#reviews .woocommerce-noreviews{margin-bottom:0;}

/* ---------- jetpack contact form (e.g. Club Programme) ---------- */
.contact-form .grunion-field-label{
  display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
}
.contact-form .grunion-label-required{margin-left:4px;font-weight:400;opacity:0.7;}
.contact-form .grunion-field-wrap{margin:0 0 22px;}
.contact-form input.grunion-field,
.contact-form textarea.grunion-field{
  width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:4px;
  background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:0.95rem;
  transition:border-color .2s ease;appearance:none;
}
.contact-form textarea.grunion-field{min-height:140px;resize:vertical;}
.contact-form input.grunion-field:focus,
.contact-form textarea.grunion-field:focus{
  border-color:var(--accent);
}
.contact-form input.grunion-field:focus:not(:focus-visible),.contact-form textarea.grunion-field:focus:not(:focus-visible){outline:none;}
.contact-form p.contact-submit{margin:8px 0 0;}
.contact-form button.pushbutton-wide{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:0.92rem;
  padding:14px 26px;border-radius:2px;cursor:pointer;
  border:1px solid transparent;
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 22px -8px var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  appearance:none;width:auto;
}
.contact-form button.pushbutton-wide:hover{
  background:var(--accent-soft);transform:translateY(-2px);
}

/* ---------- shop pagination ---------- */
.woocommerce-pagination{margin:48px 0 0;display:flex;justify-content:center;}
.woocommerce-pagination ul.page-numbers{
  display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.woocommerce-pagination ul.page-numbers li{margin:0;}
.woocommerce-pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;box-sizing:border-box;
  border:1px solid var(--border);border-radius:20px;
  font-family:var(--font-mono);font-size:0.85rem;font-weight:600;
  color:var(--text);text-decoration:none;background:var(--surface);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
a.page-numbers:hover{border-color:var(--accent);color:var(--accent);}
.woocommerce-pagination .page-numbers.current{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.woocommerce-pagination .page-numbers.dots{
  border-color:transparent;background:transparent;color:var(--text-muted);
}
.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev{font-size:1rem;}

/* ---------- my account (login / register / dashboard / orders / addresses) ----------
   The account templates render through WooCommerce's own core markup (see
   inc/woocommerce-support.php) with no theme overrides beyond the wrapper hooks,
   so until now they fell back to bare browser form controls instead of the
   site's cream/brick-red design language. Scoped to body.woocommerce-account,
   which WooCommerce adds on every My Account screen (login, dashboard, orders,
   addresses, edit-account, lost password). */
.woocommerce-account .woocommerce > h2{
  font-family:var(--font-display);font-size:1.3rem;margin:0 0 22px;color:var(--text);
}
.woocommerce-account .woocommerce-form-row{margin:0 0 18px;}
.woocommerce-account .woocommerce-form-row label{
  display:block;margin:0 0 6px;font-family:var(--font-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
}
.woocommerce-account .woocommerce-form-row label .required{color:var(--accent);text-decoration:none;}
.woocommerce-account .woocommerce-form-row .woocommerce-input-wrapper{display:block;}
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select{
  width:100%;box-sizing:border-box;
  font-family:var(--font-body);font-size:0.95rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:11px 14px;transition:border-color .2s ease;
}
.woocommerce-account input.input-text:hover, .woocommerce-account textarea:hover, .woocommerce-account select:hover,
.woocommerce-account input.input-text:focus, .woocommerce-account textarea:focus, .woocommerce-account select:focus{
  border-color:var(--accent);
}
.woocommerce-account input.input-text:focus:not(:focus-visible),.woocommerce-account textarea:focus:not(:focus-visible),.woocommerce-account select:focus:not(:focus-visible){outline:none;}

/* Password field's "show/hide" toggle (WordPress core's own button, added via
   JS with no styling of its own — falls back to a bare unstyled button
   sitting below the field instead of an icon overlaid on it). */
.woocommerce-account .password-input{position:relative;display:block;}
.woocommerce-account .password-input input.input-text{padding-right:46px;}
.woocommerce-account .show-password-input{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:34px;height:34px;padding:0;border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.woocommerce-account .show-password-input::before{
  content:"";display:block;width:19px;height:19px;
  background-color:var(--text-muted);
  -webkit-mask:no-repeat center / contain;mask:no-repeat center / contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.woocommerce-account .show-password-input.display-password::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.24 4.24M9.9 4.24A11 11 0 0 1 12 4c7 0 11 7 11 7a13.2 13.2 0 0 1-3.05 3.94M6.1 6.1A13.2 13.2 0 0 0 1 11s4 7 11 7a11 11 0 0 0 4.9-1.14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a3 3 0 0 0 4.24 4.24M9.9 4.24A11 11 0 0 1 12 4c7 0 11 7 11 7a13.2 13.2 0 0 1-3.05 3.94M6.1 6.1A13.2 13.2 0 0 0 1 11s4 7 11 7a11 11 0 0 0 4.9-1.14'/%3E%3C/svg%3E");
}
.woocommerce-account .show-password-input:hover::before{background-color:var(--accent);}
.woocommerce-account form .form-row-first{float:left;width:47%;}
.woocommerce-account form .form-row-last{float:right;width:47%;}
.woocommerce-account form .form-row-first + .form-row-last + *{clear:both;}
@media (max-width:600px){
  .woocommerce-account form .form-row-first, .woocommerce-account form .form-row-last{float:none;width:100%;}
}
.woocommerce-account .woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:8px;margin:0 0 20px;
  font-family:var(--font-body);font-size:0.88rem;color:var(--text);
}
.woocommerce-account .woocommerce-form-login__rememberme input{width:auto;}
.woocommerce-account .woocommerce-LostPassword{
  margin:16px 0 0;font-size:0.86rem;
}
.woocommerce-account .woocommerce-LostPassword a{color:var(--text-muted);text-decoration:underline;}
.woocommerce-account .woocommerce-LostPassword a:hover{color:var(--accent);}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm{
  max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:32px;box-sizing:border-box;
}
.woocommerce-account fieldset{border:1px solid var(--border);border-radius:6px;padding:18px 20px 4px;margin:24px 0;}
.woocommerce-account fieldset legend{
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-muted);padding:0 8px;
}

/* Dashboard shell once logged in: sidebar navigation + content column */
/* The nav is taller than the content on most account screens (Dashboard
   especially), and nothing was clearing it — its floated height was never
   contained by a parent, so the footer started rendering underneath/through
   it instead of below it. :has() targets whichever element actually wraps
   the nav+content pair without needing to know its exact class name. */
.woocommerce-account *:has(> .woocommerce-MyAccount-navigation)::after{
  content:"";display:table;clear:both;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:left;width:240px;box-sizing:border-box;padding-right:28px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--border);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child{border-top:1px solid var(--border);}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:13px 4px;font-family:var(--font-mono);font-size:0.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-decoration:none;
  transition:color .18s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--text);}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color:var(--accent);font-weight:600;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--accent);}
.woocommerce-account .woocommerce-MyAccount-content{
  overflow:hidden;padding-left:28px;border-left:1px solid var(--border);
}
.woocommerce-account .woocommerce-MyAccount-content p{font-size:0.98rem;line-height:1.75;color:var(--text);}
.woocommerce-account .woocommerce-MyAccount-content mark{background:none;color:var(--accent);font-weight:600;}
@media (max-width:780px){
  .woocommerce-account .woocommerce-MyAccount-navigation{float:none;width:100%;padding-right:0;margin-bottom:24px;}
  .woocommerce-account .woocommerce-MyAccount-content{padding-left:0;border-left:none;}
}

/* Dashboard welcome panel — replaces WooCommerce's two bare, unstyled
   paragraphs (see woocommerce/myaccount/dashboard.php override) with a
   branded card: avatar seal + account name, then the three dashboard
   links reworked as quick-action tiles instead of inline text links. */
.account-welcome{
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:26px 28px;margin-bottom:32px;
}
.account-welcome__head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.account-welcome__seal{
  width:44px;height:44px;border-radius:3px;flex-shrink:0;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px var(--shadow);
}
.account-welcome__seal svg{width:24px;height:24px;}
.account-welcome__id{display:flex;flex-direction:column;gap:4px;}
.account-welcome__id h2{font-size:1.3rem;}
.account-welcome__logout{
  margin-left:auto;font-family:var(--font-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.account-welcome__logout:hover{color:var(--accent);border-color:var(--accent);}
.account-welcome__desc{
  margin:18px 0 0 !important;max-width:56ch;color:var(--text-muted) !important;
  font-size:0.94rem !important;line-height:1.7 !important;
}
.account-welcome__actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;
}
.account-welcome__action{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  padding:16px;text-decoration:none;color:var(--text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.account-welcome__action:hover{
  transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 14px 26px -16px var(--shadow);
}
.account-welcome__action svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;}
.account-welcome__action span{display:flex;flex-direction:column;gap:2px;}
.account-welcome__action strong{font-size:0.9rem;font-weight:600;line-height:1.3;}
.account-welcome__action small{font-family:var(--font-mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}
@media (max-width:640px){
  .account-welcome{padding:22px;}
  .account-welcome__logout{margin-left:0;width:100%;}
  .account-welcome__actions{grid-template-columns:1fr;}
}

/* Orders table already inherits .woocommerce table.shop_table; a little extra
   breathing room and right-aligned row actions for the account context. */
.woocommerce-account table.woocommerce-orders-table{width:100%;border-collapse:collapse;}
.woocommerce-account table.woocommerce-orders-table td, .woocommerce-account table.woocommerce-orders-table th{padding:12px 10px;}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{margin:2px 4px 2px 0;font-size:0.76rem;padding:8px 14px;}
.woocommerce-account mark.order-status{font-family:var(--font-mono);font-size:0.78rem;color:var(--jade);background:none;}

/* Addresses (Products → My Account → Addresses) */
.woocommerce-account .woocommerce-Addresses{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
@media (max-width:600px){.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr;}}
.woocommerce-account .woocommerce-Address{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:22px;
}
.woocommerce-account .woocommerce-Address-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
}
.woocommerce-account .woocommerce-Address-title h3{font-family:var(--font-display);font-size:1.05rem;margin:0;}
.woocommerce-account .woocommerce-Address-title .edit{
  font-family:var(--font-mono);font-size:0.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent);text-decoration:none;
}

/* ---------- tournament finder (/tournaments/) ---------- */
.tf-note{
  font-size:0.85rem;color:var(--text-muted);font-family:var(--font-mono);
  border-left:2px solid var(--border);padding-left:12px;margin-bottom:26px;
}
.tf-toolbar{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:22px;margin-bottom:26px;display:flex;flex-direction:column;gap:16px;
}
.tf-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.tf-search, .tf-select{
  font-family:var(--font-body);font-size:0.92rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:11px 14px;
}
.tf-search{flex:1 1 260px;min-width:0;}
.tf-select{flex:0 0 auto;}
.tf-search:focus, .tf-select:focus{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent);}
.tf-pill{
  font-family:var(--font-mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:100px;
  padding:8px 16px;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;
}
.tf-pill:hover{border-color:var(--accent);color:var(--text);}
.tf-pill.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.tf-row-label{
  font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--text-muted);flex-basis:100%;
}
.tf-slider-group{display:flex;flex-direction:column;gap:8px;flex:1 1 220px;min-width:200px;}
.tf-slider-label{
  display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:0.78rem;color:var(--text-muted);
}
.tf-slider-label b{color:var(--text);}
.tf-slider{width:100%;accent-color:var(--accent);height:20px;}
.tf-slider:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;}
.tf-count{
  font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted);margin-bottom:16px;
}
.tf-count b{color:var(--text);}
.tf-results{display:flex;flex-direction:column;gap:14px;margin-bottom:8px;}
.tf-card{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:20px 22px;display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;
}
@media (max-width:760px){.tf-card{grid-template-columns:1fr;}}
.tf-card__date{display:flex;flex-direction:column;gap:4px;}
.tf-card__day{font-family:var(--font-mono);font-size:0.86rem;font-weight:600;color:var(--text);}
.tf-card__star{font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.04em;}
.tf-card__cost{font-family:var(--font-mono);font-size:0.7rem;color:var(--jade);font-weight:600;}
.tf-card__name{font-family:var(--font-display);font-size:1.05rem;margin:0 0 6px;}
.tf-card__place{font-size:0.86rem;color:var(--text-muted);margin:0 0 10px;}
.tf-card__chips{display:flex;flex-wrap:wrap;gap:6px;}
.tf-card__cal{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;
  font-family:var(--font-mono);font-size:0.7rem;
}
.tf-card__cal-label{color:var(--text-muted);}
.tf-card__cal a{color:var(--jade);text-decoration:none;}
.tf-card__cal a:hover{text-decoration:underline;}
.tf-card__nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--font-mono);font-size:0.7rem;
}
.tf-card__nav a{color:var(--accent);text-decoration:none;}
.tf-card__nav a:hover{text-decoration:underline;}
.tf-card__stay{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--font-mono);font-size:0.7rem;
}
.tf-card__stay a{color:var(--gold);text-decoration:none;}
.tf-card__stay a:hover{text-decoration:underline;}
.tf-chip{
  font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--jade);background:var(--bg-alt);border-radius:4px;padding:3px 8px;
}
.tf-card__links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;justify-self:end;}
@media (max-width:760px){.tf-card__links{align-items:flex-start;justify-self:start;}}
.tf-card__link{
  font-family:var(--font-mono);font-size:0.78rem;font-weight:600;color:var(--accent);
  text-decoration:none;white-space:nowrap;
}
.tf-card__link--primary{
  background:var(--accent);color:var(--accent-ink);border-radius:4px;padding:8px 14px;
}
.tf-card__link--primary:hover{background:var(--accent-soft);text-decoration:none;}
.tf-card__link--secondary{font-size:0.72rem;color:var(--text-muted);}
.tf-card__link--secondary:hover{color:var(--accent);text-decoration:underline;}
.tf-empty{
  text-align:center;padding:48px 20px;color:var(--text-muted);font-size:0.94rem;
  border:1px dashed var(--border);border-radius:8px;
}
/* ---------- blade composition benchmark matcher ---------- */
.bc-benchmark-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}
.bc-benchmark-box br,
.bc-benchmark-input-wrap br,
.bc-quick-chips br,
.bc-active-card br {
  display: none !important;
}
.bc-benchmark-box p:empty {
  display: none !important;
}
.bc-benchmark-header {
  margin-bottom: 18px;
}
.bc-benchmark-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c93b2b;
  background: rgba(201, 59, 43, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.bc-benchmark-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.25;
}
.bc-benchmark-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Controls Grid: Clean side-by-side on desktop, stacked on mobile */
.bc-benchmark-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.bc-benchmark-input-wrap {
  position: relative;
  width: 100%;
  display: block;
}
.bc-benchmark-select-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.bc-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* Height & Typography Match between Input and Select */
.bc-benchmark-input,
.bc-benchmark-select {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bc-benchmark-input {
  padding: 10px 38px 10px 42px !important;
  line-height: normal !important;
  display: block !important;
}

.bc-benchmark-input:focus,
.bc-benchmark-select:focus {
  outline: none !important;
  border-color: #c93b2b !important;
  box-shadow: 0 0 0 3px rgba(201, 59, 43, 0.12) !important;
}

.bc-benchmark-select {
  padding: 0 36px 0 14px !important;
  line-height: 44px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  display: block !important;
}

.bc-clear-btn {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  z-index: 3;
}
.bc-clear-btn:hover {
  background: rgba(0, 0, 0, 0.16);
  color: var(--text);
}

.bc-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}
.bc-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.bc-suggestion-item:last-child {
  border-bottom: none;
}
.bc-suggestion-item:hover,
.bc-suggestion-item.is-selected {
  background: var(--surface-2);
}
.bc-sugg-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bc-sugg-brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.bc-sugg-specs {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Quick Chips Container */
.bc-quick-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.bc-chips-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.bc-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}
.bc-chip-btn {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-chip-btn:hover {
  border-color: #c93b2b;
  color: #c93b2b;
  background: rgba(201, 59, 43, 0.04);
}
.bc-chip-btn.is-active {
  background: #c93b2b;
  border-color: #c93b2b;
  color: #fff;
  font-weight: 600;
}

/* Active Match Banner */
.bc-active-card {
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(40, 167, 69, 0.05);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 8px;
  box-sizing: border-box;
}
.bc-active-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.bc-active-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1e7e34;
}
.bc-active-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 3px 0 0;
}
.bc-dismiss-btn {
  background: transparent;
  border: 1px solid rgba(40, 167, 69, 0.4);
  color: #1e7e34;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.bc-dismiss-btn:hover {
  background: rgba(40, 167, 69, 0.15);
  color: #155724;
}
.bc-active-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.bc-spec-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: #fff;
  border: 1px solid rgba(40, 167, 69, 0.25);
  color: #1e7e34;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.bc-active-card__explain {
  font-size: 0.88rem;
  color: var(--text);
  margin: 0;
  line-height: 1.45;
}

.tf-chip--match {
  background: #eaf5ea !important;
  color: #1e7e34 !important;
  border: 1px solid rgba(40, 167, 69, 0.35) !important;
  font-weight: 600 !important;
}
.card-badge.match {
  background: #1e7e34;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

/* Responsive Breakpoints */
@media (max-width: 820px) {
  .bc-benchmark-controls {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .bc-benchmark-box {
    padding: 18px 16px;
  }
  .bc-benchmark-title {
    font-size: 1.15rem;
    line-height: 1.3;
  }
  .bc-benchmark-sub {
    font-size: 0.86rem;
  }
  .bc-quick-chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
  }
  .bc-chips-label {
    margin-bottom: 2px;
  }
  .bc-chips-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bc-chip-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .bc-active-card {
    padding: 14px;
  }
  .bc-active-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .bc-dismiss-btn {
    align-self: flex-start;
  }
}

.tf-contact{
  margin-top:40px;background:var(--bg-alt);border-radius:8px;padding:28px 30px;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
}
.tf-contact h3{font-size:1.1rem;margin:0 0 6px;}
.tf-contact p{font-size:0.9rem;color:var(--text-muted);max-width:46ch;}
.tf-contact .btn{flex-shrink:0;}

/* ---------- racket configurator (/racket-configurator/) ---------- */
.rc-root{display:flex;flex-direction:column;gap:26px;margin-bottom:32px;}
.rc-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:22px;transition:opacity 0.15s;
}
.rc-panel--skipped{opacity:0.55;}
.rc-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;
}
.rc-panel__head h2{font-family:var(--font-display);font-size:1.15rem;margin:0;}
.rc-required{color:var(--accent);margin-left:2px;}
.rc-panel__skiplabel{
  display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.78rem;
  color:var(--text-muted);cursor:pointer;
}
.rc-panel__skip{accent-color:var(--accent);width:16px;height:16px;}
.rc-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;
  max-height:520px;overflow-y:auto;padding-right:4px;margin-top:16px;
}
.rc-card{
  border:1px solid var(--border);border-radius:8px;padding:14px;background:var(--surface-2);
  display:flex;flex-direction:column;gap:6px;
}
.rc-card--selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;}
.rc-card__img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:var(--bg-alt);}
.rc-card__name{font-family:var(--font-body);font-weight:600;font-size:0.88rem;margin:6px 0 0;line-height:1.3;}
.rc-card__variant{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);margin:0;}
.rc-card__price{font-family:var(--font-mono);font-weight:700;font-size:0.92rem;margin:2px 0 4px;}
.rc-card__oos{font-weight:400;color:var(--text-muted);font-size:0.7rem;text-transform:uppercase;}
.rc-card__select{
  font-family:var(--font-mono);font-size:0.78rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:6px;padding:9px 10px;cursor:pointer;
}
.rc-card__select:hover:not(:disabled){background:var(--accent-soft);}
.rc-card__select:disabled{background:var(--bg-alt);color:var(--text-muted);cursor:not-allowed;}
.rc-card--selected .rc-card__select{background:var(--jade);}
.rc-card__details{
  font-family:var(--font-mono);font-size:0.74rem;text-align:center;color:var(--text-muted);
  border:1px solid var(--border);border-radius:6px;padding:7px 10px;text-decoration:none;
}
.rc-card__details:hover{border-color:var(--accent);color:var(--text);}
.rc-empty{grid-column:1/-1;font-family:var(--font-mono);font-size:0.85rem;color:var(--text-muted);padding:20px 0;}
.rc-summary{
  position:sticky;bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 18px rgba(0,0,0,0.12);
}
.rc-summary__line{display:flex;justify-content:space-between;gap:16px;font-size:0.88rem;color:var(--text-muted);}
.rc-summary__line--filled{color:var(--text);}
.rc-summary__label{font-family:var(--font-mono);text-transform:uppercase;font-size:0.72rem;letter-spacing:0.05em;flex-shrink:0;padding-top:2px;}
.rc-summary__value{text-align:right;}
.rc-summary__totalrow{
  display:flex;justify-content:space-between;font-family:var(--font-mono);font-weight:700;font-size:1.1rem;
  border-top:1px solid var(--border);padding-top:10px;margin-top:4px;
}
.rc-summary__add{
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:6px;padding:14px 18px;
  cursor:pointer;font-size:0.92rem;margin-top:6px;
}
.rc-summary__add:hover:not(:disabled){background:var(--accent-soft);}
.rc-summary__add:disabled{background:var(--bg-alt);color:var(--text-muted);cursor:not-allowed;}
.rc-error{color:var(--accent);font-size:0.85rem;margin-top:8px;}
.rc-summary__line--warn{color:var(--accent);}
.rc-assembly__opt{display:inline-flex;align-items:flex-start;justify-content:flex-end;gap:8px;cursor:pointer;}
.rc-assembly__check{accent-color:var(--accent);width:16px;height:16px;margin:2px 0 0;flex-shrink:0;}
.rc-assembly__free{
  font-family:var(--font-mono);font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  background:var(--jade);color:var(--accent-ink);border-radius:4px;padding:2px 7px;flex-shrink:0;
}
@media (max-width:700px){
  .rc-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:420px;}
  .rc-summary{position:static;}
}

/* ---------- find a place to play (/find-a-place-to-play/) ---------- */
.pf-note{
  font-size:0.85rem;color:var(--text-muted);font-family:var(--font-mono);
  border-left:2px solid var(--border);padding-left:12px;margin-bottom:26px;
}
.pf-toolbar{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:22px;margin-bottom:26px;display:flex;flex-direction:column;gap:16px;
}
.pf-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.pf-search, .pf-select{
  font-family:var(--font-body);font-size:0.92rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;
  padding:11px 14px;
}
.pf-search{flex:1 1 260px;min-width:0;}
.pf-select{flex:0 0 auto;}
.pf-search:focus, .pf-select:focus{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent);}
.pf-pill{
  font-family:var(--font-mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:100px;
  padding:8px 16px;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s;
}
.pf-pill:hover{border-color:var(--accent);color:var(--text);}
.pf-pill.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.pf-count{
  font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted);margin-bottom:16px;
}
.pf-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:8px;}
.pf-card{
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:20px 22px;display:flex;flex-direction:column;gap:6px;
}
.pf-card__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;}
.pf-card__name{font-family:var(--font-display);font-size:1.02rem;margin:0;}
.pf-card__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.pf-chip{
  font-family:var(--font-mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--jade);background:var(--bg-alt);border-radius:4px;padding:3px 8px;white-space:nowrap;
}
.pf-card__place{font-size:0.86rem;color:var(--text-muted);margin:2px 0 4px;}
.pf-card__sessions, .pf-card__cost-line, .pf-card__notes{font-size:0.86rem;margin:0 0 4px;}
.pf-card__label{
  font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-muted);
}
.pf-card__contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px;font-size:0.84rem;
}
.pf-card__contact a{color:var(--jade);text-decoration:none;}
.pf-card__contact a:hover{text-decoration:underline;}
.pf-card__contact-name{color:var(--text);font-weight:600;}
.pf-card__dot{color:var(--border);}
.pf-card__nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0;
  font-family:var(--font-mono);font-size:0.7rem;
}
.pf-card__nav a{color:var(--accent);text-decoration:none;}
.pf-card__nav a:hover{text-decoration:underline;}
.pf-card__link{
  font-family:var(--font-mono);font-size:0.76rem;font-weight:600;color:var(--gold);
  text-decoration:none;margin-top:8px;align-self:flex-start;
}
.pf-card__link:hover{text-decoration:underline;}
.pf-empty{
  text-align:center;padding:48px 20px;color:var(--text-muted);font-size:0.94rem;
  border:1px dashed var(--border);border-radius:8px;
}
.pf-contact{
  margin-top:40px;background:var(--bg-alt);border-radius:8px;padding:28px 30px;
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;
}
.pf-contact h3{font-size:1.1rem;margin:0 0 6px;}
.pf-contact p{font-size:0.9rem;color:var(--text-muted);max-width:46ch;}
.pf-contact .btn{flex-shrink:0;}

.woocommerce-account address{font-style:normal;font-size:0.92rem;line-height:1.7;color:var(--text-muted);}

/* Product photo badges — the equipment type (Tacky / Tensor, Inner Carbon /
   Outer Carbon) and the Player Level mark, pinned to the bottom-right of the
   picture in the category grid and on the single-product gallery alike.
   Bottom-right because top-left is WooCommerce's sale flash and top-right is
   the gallery's zoom trigger, and because a label that sits on the photo is
   read as being about the product rather than about the page.
   CHANGED 2026-09-14: the second badge used to be the ITTF Approved /
   Tournament Legal compliance mark (see inc/compliance-badges.php) — that
   claim is still true and still stated in the page's own body copy and
   structured data, it's just no longer the photo badge, in favour of Player
   Level (Beginner/Intermediate/Advanced/Top Players), a signal that actually
   varies SKU to SKU. Jade rather than the accent colour, so it never reads
   as a price promotion — same fill the old compliance badge used, kept for
   Beginner/Intermediate/Advanced. */
.loki-badge-stack{
  position:absolute;right:10px;bottom:10px;z-index:4;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;
  max-width:calc(100% - 20px);pointer-events:none;
}
.loki-badge{
  font-family:var(--font-mono);font-size:0.62rem;line-height:1.25;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:3px;
  white-space:nowrap;
}
.loki-badge--level{background:var(--jade);color:#ffffff;}
/* The dark palette lightens --jade to #63B08C, where cream text drops to
   about 2.2:1. The badge sits on a product photo either way, so the fix is
   to flip the ink rather than the fill. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .loki-badge--level{color:#10201A;}
}
:root[data-theme="dark"] .loki-badge--level{color:#10201A;}
/* Top Players: the top tier of the same Player Level mark, but it gets its
   own fill (--gold) rather than reusing jade — a Top Players SKU should
   read as a different tier at a glance, not just different text in the same
   chip. Same dark-palette ink flip as .loki-badge--level: --gold lightens to
   #CBA25C in dark mode, where cream text fails contrast. */
.loki-badge--top-players{background:var(--gold);color:#ffffff;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .loki-badge--top-players{color:#10201A;}
}
:root[data-theme="dark"] .loki-badge--top-players{color:#10201A;}
/* The spec badge is a surface chip rather than a filled one: it has to stay
   legible both on a white product photo and on the card's own tinted
   background, in both palettes, which a single fill colour can't do. */
.loki-badge--spec{
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  padding:3px 8px;
}
@media (max-width:600px){
  .loki-badge-stack{right:8px;bottom:8px;gap:5px;}
  /* Padding tightens on mobile, the type does not: the previous 0.56rem put
     these labels at 8.96px, small enough that "Inner Basalt GNF Fiber" was
     effectively decoration. Held at the desktop size instead. */
  .loki-badge{font-size:0.62rem;padding:3px 7px;}
  .loki-badge--spec{padding:2px 6px;}
}
/* Category grid: the wrapper the badges anchor to. Without it the nearest
   positioned ancestor is the whole card, and the badges land under the
   add-to-basket button. */
.woocommerce ul.products li.product .loki-card-media{position:relative;display:block;}
/* Single product: the gallery slide is the only box whose height is exactly
   the photo. The inner <a> is made a block so the inline line box doesn't
   add a few pixels of descender space under the image and push the badges
   below its bottom edge. */
.woocommerce div.product .woocommerce-product-gallery__image{position:relative;}
.woocommerce div.product .woocommerce-product-gallery__image > a{display:block;}
.loki-compliance-note{
  display:flex;align-items:baseline;gap:8px;margin:10px 0 0;
  font-size:.9rem;line-height:1.5;color:var(--text-muted);
}
.loki-compliance-tick{color:var(--jade);font-weight:700;}

/* Guide FAQ blocks. Styled here rather than in each guide's own embedded
   <style>, so the pattern stays identical across all 25 guides and a new one
   inherits it for free. Deliberately always visible: inc/faq-schema.php reads
   these blocks to build the page's FAQPage markup, and Google requires the
   marked-up Q&A to be the Q&A a reader can actually see. Tokens and radii
   match .lk-card in the guide stylesheet so it reads as part of the set. */
.lk-faq__item{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1.3rem 1.5rem;margin-bottom:1rem;
}
.lk-faq__item:last-child{margin-bottom:0;}
.lk .lk-faq__q{
  font-size:1.05rem;margin:0 0 0.5em;color:var(--text);
}
.lk .lk-faq__a{color:var(--text-muted);}
.lk .lk-faq__a p{margin:0 0 0.8em;}
.lk .lk-faq__a p:last-child{margin-bottom:0;}
@media (max-width:600px){.lk-faq__item{padding:1.1rem 1.2rem;}}

/* Homepage hero subtitle. Carries the brand tagline that used to be the
   second line of the <h1>, at a weight that still reads as part of the
   headline block without competing with it. */
.hero-copy p.hero-tagline{
  font-family:var(--font-display);font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:600;
  color:var(--text);margin:-6px 0 18px;letter-spacing:-0.01em;
}


/* ---------- Find Your Setup (rule-based advisor page) ---------- */
/* Lines up with the .lk container (980px / 1.5rem side padding) without
   needing to nest inside it -- the_content appends this after the page's
   own .lk block closes, so it matches by value, not by DOM nesting. */
.setup-advisor{max-width:980px;margin:2.5rem auto 0;padding:0 1.5rem 4rem;font-family:var(--font-body);}
.setup-advisor__form{
  display:flex;flex-direction:column;gap:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:24px 26px;
}
.setup-advisor__hp{position:absolute;left:-9999px;}
.setup-advisor__field{border:none;margin:0;padding:0;}
.setup-advisor__field legend{
  font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-muted);padding:0 0 10px;
}
.setup-advisor__options{display:flex;flex-wrap:wrap;gap:8px;}
.setup-advisor__option{position:relative;}
.setup-advisor__option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.setup-advisor__option span{
  display:block;padding:10px 18px;border-radius:100px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text);font-size:0.88rem;transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.setup-advisor__option input:checked + span{border-color:var(--accent);color:var(--accent-ink);background:var(--accent);}
.setup-advisor__option input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
.setup-advisor__form button[type="submit"]{
  align-self:flex-start;display:flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;border:none;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-body);font-weight:600;
  font-size:0.92rem;cursor:pointer;transition:background .15s ease;
}
.setup-advisor__form button[type="submit"]:hover{background:var(--accent-soft);}
.setup-advisor__form button[type="submit"]:disabled{opacity:0.5;cursor:not-allowed;}
.setup-advisor__form button[type="submit"] svg{width:16px;height:16px;}
.setup-advisor__results{margin-top:28px;padding-top:28px;border-top:1px solid var(--border);}
.setup-advisor__explanation{font-size:1.02rem;line-height:1.6;color:var(--text);max-width:70ch;margin:0 0 22px;}
.setup-advisor__group{margin-bottom:22px;}
.setup-advisor__group:last-of-type{margin-bottom:0;}
.setup-advisor__group h3{font-size:0.95rem;margin:0 0 10px;}
.setup-advisor__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.setup-advisor__card{
  display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);text-decoration:none;transition:border-color .15s ease,transform .15s ease;
}
.setup-advisor__card:hover{border-color:var(--accent);transform:translateY(-2px);}
.setup-advisor__card-name{font-weight:600;color:var(--text);font-size:0.92rem;}
.setup-advisor__card-spec{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;}
.setup-advisor__card-price{font-family:var(--font-mono);font-weight:700;color:var(--accent);font-size:0.95rem;margin-top:4px;}
.setup-advisor__empty{
  padding:20px 22px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  font-size:0.94rem;line-height:1.6;color:var(--text);margin:0;
}
.setup-advisor__empty a{color:var(--accent);font-weight:600;}
@media (max-width:600px){
  .setup-advisor{margin-top:1.5rem;padding:0 1.25rem 3rem;}
  .setup-advisor__form{padding:20px;}
  .setup-advisor__form button[type="submit"]{align-self:stretch;justify-content:center;}
}

/* =========================================================
   CookieYes consent banner — contrast override
   The plugin ships its buttons as white on #1578F7, which
   measures 4.15:1 and fails WCAG AA (1.4.3) for its 12px
   label. The banner is the first thing a visitor has to
   act on, so the fill is darkened to #0B62D6 (5.63:1).
   Class-based, so a plugin update keeps the fix.
   ========================================================= */
.cky-btn-accept,
.cky-btn-reject,
.cky-btn-preferences,
.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject,
.cky-modal .cky-btn-preferences{
  background-color:#0B62D6 !important;
  border-color:#0B62D6 !important;
  color:#FFFFFF !important;
}

/* =========================================================
   CookieYes Revisit Button: hidden at every width
   On mobile it hovered over the sticky bottom bar's Home
   button; on desktop it covered the sticky add-to-basket bar.
   Users still manage consent via the Cookie Preferences footer
   link (theme.js clicks this hidden button, or falls back to
   cookieyes._cky.showBanner()).
   ========================================================= */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right,
[data-cky-tag="revisit-consent"],
.cky-btn-revisit {
  display: none !important;
}

/* =========================================================
   Keyboard focus ring (WCAG 2.4.7 / 2.4.11)
   The theme had no global focus style: links and buttons fell
   back to the UA ring, and several component rules below set
   outline:none and replaced it with a border-colour change
   alone -- the search field (.dgwt-wcas-search-input) killed
   its box-shadow too and showed nothing at all on keyboard
   focus. :focus-visible so the ring is keyboard-only and never
   appears on a mouse click. Accent measures 5.94:1 on the page
   ground, well past the 3:1 that 1.4.11 asks of a focus
   indicator, and the 2px offset floats the ring clear of
   accent-filled buttons where an accent ring would vanish.
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Same specificity or higher than the outline:none rules above, and later
   in the cascade, so the ring survives on the fields that cleared it. */
.dgwt-wcas-search-input:focus-visible,
.woocommerce-ordering select.orderby:focus-visible,
.loki-stock-notify__form input[type="email"]:focus-visible,
.woocommerce div.product table.variations select:focus-visible,
.woocommerce-account input.input-text:focus-visible,
.woocommerce-account textarea:focus-visible,
.woocommerce-account select:focus-visible,
.comment-form input:focus-visible,
.comment-form textarea:focus-visible,
.contact-form input.grunion-field:focus-visible,
.contact-form textarea.grunion-field:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* On the club panel the ground is --text, where the accent drops to 2.53:1.
   Same step-up the eyebrow uses. */
.club a:focus-visible,
.club button:focus-visible{outline-color:var(--accent-on-ink);}

/* =========================================================
   Editorial (.lk) hero heading level
   The .lk hero blocks on guides, spotlights and compare pages
   used to carry their own <h1>, which duplicated the <h1> that
   page.php renders from the page title. Where that heading is
   a tagline rather than a repeat of the title it is demoted to
   an <h2> (see the Page Headings and Accessibility Floor notes
   in CLAUDE.md); this keeps it at the hero size so demoting the
   level costs nothing visually. Only applies inside .lk-hero,
   so ordinary .lk h2 section headings are untouched.
   ========================================================= */
.lk .lk-hero h2{font-size:clamp(2rem, 4vw, 2.8rem);margin:0 0 0.6em;}

/* =========================================================
   AI Citation / Key Verdict Definition Block (.lk-verdict)
   Used in /compare/ and /guides/ for GEO / AEO extraction by
   Perplexity, ChatGPT Search, Claude, and Google AI Overviews.
   ========================================================= */
.lk-verdict,
.lk .lk-verdict {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.lk-verdict__label,
.lk .lk-verdict__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.lk-verdict__label svg,
.lk .lk-verdict__label svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}
.lk-verdict__text,
.lk .lk-verdict__text {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text);
  margin: 0;
}
@media (max-width: 600px) {
  .lk-verdict,
  .lk .lk-verdict {
    padding: 1rem 1.15rem;
    margin: 0 0 1.75rem;
  }
  .lk-verdict__text,
  .lk .lk-verdict__text {
    font-size: 0.92rem;
  }
}


/* =========================================================
   Category Archive Filters (.loki-cat-filters)
   ========================================================= */
.tf-toolbar.loki-cat-filters {
  padding: 14px 18px;
  margin: 0 0 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26,22,18,0.04);
}
.loki-cat-filters form.tf-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}
.loki-cat-filters .tf-select {
  width: 100%;
  padding: 10px 32px 10px 12px;
  font-size: 0.84rem;
  font-weight: 500;
  border-radius: 6px;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBA25C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.loki-cat-filters .tf-select:hover,
.loki-cat-filters .tf-select:focus {
  border-color: var(--accent);
}
@media (max-width: 860px) {
  .loki-cat-filters form.tf-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .tf-toolbar.loki-cat-filters {
    padding: 10px 12px;
    margin: 0 0 16px;
  }
  .loki-cat-filters .tf-select {
    font-size: 0.76rem;
    padding: 8px 24px 8px 8px;
    background-position: right 6px center;
    background-size: 10px;
  }
}

/* =========================================================
   PDP Redesign: Performance Story & Modular Narrative
   ========================================================= */

/* Hide raw tag link dump, generic WooCommerce product meta & noisy social shares on PDP */
.single-product .tagged_as,
.single-product .product_meta,
.single-product .sharedaddy,
.single-product .sd-sharing,
.single-product .loki-equipment-summary,
.single-product .loki-compliance-note,
.woocommerce div.product .woocommerce-variation-availability {
  display: none !important;
}

/* Real-Time Stock Status Badge Inline Next to Price */
.pdp-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}
.pdp-price-row p.price {
  margin: 0 !important;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pdp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 20px;
  line-height: 1.2;
}
.pdp-stock-badge.in-stock {
  background: color-mix(in srgb, var(--jade) 14%, var(--surface));
  color: var(--jade);
}
.pdp-stock-badge.out-of-stock {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.pdp-stock-badge .stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Quick attributes pill rail directly under Title/Price */
.pdp-spec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.pdp-spec-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.pdp-spec-chip span {
  color: var(--text-muted);
  margin-right: 4px;
  font-weight: 400;
}

/* Streamlined Multi-Item Setup Savings Callout */
.pdp-volume-callout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px dashed var(--gold);
  border-radius: 6px;
  padding: 6px 12px;
  margin: 8px 0 16px;
  font-size: 0.76rem;
  color: var(--text);
}
.pdp-volume-callout__badge {
  background: var(--gold);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pdp-volume-callout__text {
  font-family: var(--font-body);
  font-weight: 500;
}

/* Handle Type Variation Selector Pills */
.loki-variation-pills {
  display: flex;
  gap: 10px;
  margin: 8px 0 14px;
}
.loki-var-pill {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}
.loki-var-pill:hover {
  border-color: var(--accent);
}
.loki-var-pill.active {
  border-color: var(--accent);
  background: #FFF;
  box-shadow: 0 2px 8px rgba(166,44,31,0.12);
}
.loki-var-pill__name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  display: block;
  color: var(--text);
}
.loki-var-pill__sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* PDP Conversion Trust Strip */
.pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-trust-item svg {
  color: var(--gold);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.pdp-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp-trust-text strong {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.pdp-trust-text span {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Full-Width Modular Performance Narrative */
.woocommerce div.product > .pdp-modular-wrap,
.pdp-modular-wrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 48px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  clear: both !important;
}
.pdp-modular-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 4px 16px rgba(28,24,17,0.03);
}
.pdp-modular-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.pdp-modular-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.pdp-modular-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section 1: Architecture & Wood Layup */
.pdp-architecture-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 32px;
  align-items: center;
}
.pdp-ply-diagram-wrap {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
.pdp-ply-diagram-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: inline-block;
}
.pdp-diagram-caption {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.35;
}
.pdp-ply-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-ply-item {
  display: flex;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  gap: 12px;
}
.pdp-ply-item.is-carbon {
  border-left: 3px solid var(--accent);
  background: #FFF8F6;
}
.pdp-ply-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--border);
  color: var(--text);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.pdp-ply-item.is-carbon .pdp-ply-badge {
  background: var(--accent);
  color: #fff;
}
.pdp-ply-meta strong {
  font-family: var(--font-display);
  font-size: 0.84rem;
  display: block;
  color: var(--text);
}
.pdp-ply-meta span {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: block;
  margin-top: 2px;
}

/* Section 2: Performance Profile */
.pdp-perf-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center;
}
.pdp-playstyle-prose h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 10px;
  color: var(--text);
}
.pdp-playstyle-prose p {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 14px;
}
.pdp-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  padding: 0;
}
.pdp-checklist li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}
.pdp-check-icon {
  color: var(--jade);
  font-weight: 700;
}
.pdp-check-dash {
  color: var(--accent);
  font-weight: 700;
}
.pdp-perf-bars-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdp-perf-row-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.pdp-perf-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.pdp-perf-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.pdp-perf-fill.speed { background: linear-gradient(90deg, #CBA25C, #A62C1F); }
.pdp-perf-fill.control { background: linear-gradient(90deg, #63B08C, #2E6B50); }
.pdp-perf-fill.spin { background: linear-gradient(90deg, #D4AF37, #CBA25C); }
.pdp-perf-fill.stiffness { background: linear-gradient(90deg, #D4AF37, #8B5E3C); }

/* Section 3: Recommended Rubber Pairings */
.pdp-pairings-intro {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.45;
}
.pdp-pairings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pdp-pairing-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}
.pdp-pairing-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.pdp-pairing-card img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  flex-shrink: 0;
}
.pdp-pairing-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  display: inline-block;
  margin-bottom: 4px;
}
.pdp-pairing-badge.backhand {
  background: var(--jade);
}
.pdp-pairing-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}
.pdp-pairing-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Section 4: Specifications Table */
.pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.pdp-specs-table tr {
  border-bottom: 1px solid var(--border-light);
}
.pdp-specs-table td {
  padding: 12px 14px;
}
.pdp-specs-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 32%;
}
.pdp-specs-table td:last-child {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 860px) {
  .pdp-architecture-grid,
  .pdp-perf-grid,
  .pdp-pairings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pdp-modular-card {
    padding: 24px 20px;
  }
}

@media (max-width: 600px) {
  .pdp-trust-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .pdp-trust-item svg {
    width: 16px;
    height: 16px;
  }
  .loki-variation-pills {
    flex-direction: column;
  }
}

/* =========================================================
   WooCommerce Block Cart & Checkout Enhancements
   ========================================================= */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  padding: 16px 24px !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(166,44,31,0.25) !important;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover {
  background: #8e2418 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(166,44,31,0.35) !important;
}
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-cart__totals-title {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}
.wc-block-components-totals-wrapper:not(.slot-wrapper):not(:empty):has(.wc-block-components-totals-item),
.woocommerce .cart-collaterals .cart_totals {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
}
.wp-block-woocommerce-cart-order-summary-totals-block {
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wc-block-components-totals-wrapper.slot-wrapper,
.wc-block-components-totals-wrapper:empty,
.wc-block-components-order-meta {
  display: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
}
.wc-block-components-totals-item--total .wc-block-components-totals-item__value {
  font-family: var(--font-mono) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}
/* =========================================================
   WooCommerce Checkout Order Summary
   Matches Basket Totals: Clean uppercase header, 16px vertical
   rhythm, independent rounded cards, and unified typography.
   ========================================================= */
.wp-block-woocommerce-checkout-order-summary-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.wc-block-components-checkout-order-summary__title {
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  border: none !important;
  display: block !important;
}
.wc-block-components-checkout-order-summary__title-text {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-checkout-order-summary__title-icon {
  display: none !important;
}
.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:not(.slot-wrapper):not(:empty):has(.wc-block-components-totals-item) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  display: block !important;
  box-shadow: none !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value {
  font-family: var(--font-mono) !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-fees .wc-block-components-totals-item__label,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-fees .wc-block-components-totals-item__value {
  color: #2e7d32 !important;
  font-weight: 700 !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-mono) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}
.wp-block-woocommerce-checkout-order-summary-cart-items-block {
  display: none !important;
}

/* =========================================================
   WooCommerce Voucher / Coupon Form Card
   Unified design across Cart & Checkout order summaries:
   independent card, subtle dashed accordion divider,
   side-by-side input and action button.
   ========================================================= */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-cart-order-summary-coupon-form-block {
  display: block !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  height: auto !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-totals-coupon,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon {
  margin: 0 !important;
  padding: 0 !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button:hover,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button:hover {
  color: var(--accent) !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button-icon,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button-icon {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__content,
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__content {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed var(--border) !important;
}
.wc-block-components-totals-coupon__form {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
}
.wc-block-components-totals-coupon__input {
  flex: 1 1 auto !important;
  margin: 0 !important;
  position: relative !important;
}
.wc-block-components-totals-coupon__input input {
  height: 46px !important;
  font-size: 0.9rem !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 16px 12px 4px !important;
  color: var(--text) !important;
  box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__input input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(177, 35, 34, 0.15) !important;
}
.wc-block-components-totals-coupon__input label {
  position: absolute !important;
  left: 12px !important;
  pointer-events: none !important;
  transition: all 0.15s ease !important;
}
.wc-block-components-totals-coupon__input.is-active label {
  top: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #888 !important;
  transform: none !important;
}
.wc-block-components-totals-coupon__input:not(.is-active) label {
  top: 14px !important;
  font-size: 0.88rem !important;
  color: #777 !important;
  transform: none !important;
}
.wc-block-components-totals-coupon__button {
  height: 46px !important;
  padding: 0 18px !important;
  font-family: var(--font-display) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: var(--text) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.wc-block-components-totals-coupon__button:hover:not(:disabled) {
  background: var(--accent) !important;
}

/* =========================================================
   Basket Page Cross-Sells ("You may be interested in...")
   Premium product cards, framed white thumbnail containers,
   bold mono pricing, and aligned full-width action buttons.
   ========================================================= */
.wp-block-woocommerce-product-collection[data-collection="woocommerce/product-collection/cross-sells"],
.wp-block-woocommerce-cart-cross-sells-products-block,
.woocommerce-cart .cross-sells {
  margin-top: 40px !important;
  margin-bottom: 32px !important;
}
.wp-block-woocommerce-product-collection h2.wp-block-heading,
.wp-block-woocommerce-cart-cross-sells-products-block h2,
.woocommerce-cart .cross-sells > h2 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.wp-block-woocommerce-product-collection h2.wp-block-heading::before,
.wp-block-woocommerce-cart-cross-sells-products-block h2::before,
.woocommerce-cart .cross-sells > h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 18px !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
}
.wp-block-woocommerce-product-collection ul.wc-block-product-template,
.wp-block-woocommerce-product-template,
.woocommerce-cart .cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wp-block-woocommerce-product-collection li.wc-block-product,
.wp-block-woocommerce-product-template li.wc-block-product,
.woocommerce-cart .cross-sells ul.products li.product {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 20px 18px 18px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 4px 14px rgba(28, 24, 17, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.wp-block-woocommerce-product-collection li.wc-block-product:hover,
.wp-block-woocommerce-product-template li.wc-block-product:hover,
.woocommerce-cart .cross-sells ul.products li.product:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(166, 44, 31, 0.4) !important;
  box-shadow: 0 8px 24px rgba(28, 24, 17, 0.08) !important;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-image,
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.woocommerce-cart .cross-sells ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #e5e5e5 !important;
  padding: 10px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-template .wc-block-components-product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}
.wp-block-woocommerce-product-collection li.wc-block-product:hover .wc-block-components-product-image img,
.wp-block-woocommerce-product-template li.wc-block-product:hover .wc-block-components-product-image img {
  transform: scale(1.05) !important;
}
.wp-block-woocommerce-product-collection h2.wp-block-post-title,
.wp-block-woocommerce-product-template h2.wp-block-post-title,
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important;
  min-height: 2.7em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-woocommerce-product-collection h2.wp-block-post-title a,
.wp-block-woocommerce-product-template h2.wp-block-post-title a,
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title a {
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.wp-block-woocommerce-product-collection h2.wp-block-post-title a:hover,
.wp-block-woocommerce-product-template h2.wp-block-post-title a:hover {
  color: var(--accent) !important;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.woocommerce-cart .cross-sells ul.products li.product .price {
  margin-bottom: 14px !important;
}
.wp-block-woocommerce-product-collection .wc-block-components-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price,
.woocommerce-cart .cross-sells ul.products li.product .price {
  font-family: var(--font-mono) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button,
.woocommerce-cart .cross-sells ul.products li.product .button {
  margin-top: auto !important;
  width: 100% !important;
}
.wp-block-woocommerce-product-collection .wp-block-button__link,
.wp-block-woocommerce-product-template .wp-block-button__link,
.woocommerce-cart .cross-sells ul.products li.product .button {
  display: block !important;
  width: 100% !important;
  background: #1c1811 !important;
  color: #ffffff !important;
  font-family: var(--font-display) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(28, 24, 17, 0.15) !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.wp-block-woocommerce-product-collection .wp-block-button__link:hover,
.wp-block-woocommerce-product-template .wp-block-button__link:hover,
.woocommerce-cart .cross-sells ul.products li.product .button:hover {
  background: var(--accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(166, 44, 31, 0.3) !important;
  color: #ffffff !important;
}
@media (max-width: 768px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template,
  .wp-block-woocommerce-product-template,
  .woocommerce-cart .cross-sells ul.products {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* =========================================================
   Accessible motion: Honor prefers-reduced-motion (WCAG 2.3.3)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   PDP Redesign: Premium Buy Box, Large CTA Button & Modular Narrative
   ========================================================= */

/* Buy box & cart form */
.woocommerce div.product form.cart {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
  display: block !important;
}
.woocommerce div.product form.cart .variations {
  width: 100% !important;
  margin-bottom: 12px !important;
  border: none !important;
}
.woocommerce div.product form.cart .variations td {
  padding: 0 !important;
  border: none !important;
}
.woocommerce div.product form.cart .variations .label {
  display: none !important;
}
.woocommerce div.product form.cart .single_variation_wrap {
  width: 100% !important;
  display: block !important;
}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0 !important;
}
.woocommerce div.product form.cart .quantity {
  display: none !important;
}
.woocommerce div.product form.cart .reset_variations {
  display: none !important;
}

/* Big prominent Add to Basket CTA */
.woocommerce div.product form.cart .single_add_to_cart_button {
  display: block !important;
  width: 100% !important;
  background: var(--accent, #A62C1F) !important;
  color: #ffffff !important;
  font-family: var(--font-display, "Space Grotesk", sans-serif) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 16px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 14px rgba(166, 44, 31, 0.28) !important;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.is-view-basket) {
  background: #8B2317 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(166, 44, 31, 0.38) !important;
  color: #ffffff !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:active:not(:disabled):not(.is-view-basket) {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(166, 44, 31, 0.25) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* Option 1: In-Button Morph to "Added! View Bag →" */
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag {
  background: var(--jade, #1e824c) !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 14px rgba(30, 130, 76, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket::before,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag::before {
  display: none !important;
  content: none !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag:hover {
  background: #186a3b !important;
  box-shadow: 0 6px 18px rgba(30, 130, 76, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-basket .loki-btn-tick,
.woocommerce div.product form.cart .single_add_to_cart_button.is-view-bag .loki-btn-tick {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  stroke-width: 2.5;
  flex-shrink: 0;
  display: inline-block;
}
.woocommerce div.product form.cart a.added_to_cart,
.woocommerce div.product a.added_to_cart,
.pdp-pairing-card a.added_to_cart {
  display: none !important;
}

/* Suppress WooCommerce core's duplicate stock line (<p class="stock">) below excerpt —
   the live stock status badge is already prominently rendered next to the price. */
.woocommerce div.product .summary p.stock {
  display: none !important;
}

/* Suppress stale WooCommerce add-to-cart notice banner on product pages */
.single-product .woocommerce-notices-wrapper .woocommerce-message {
  display: none !important;
}

/* Handle Selector Pills */
.loki-variation-pills-wrap {
  margin-bottom: 16px;
  width: 100%;
}
.loki-variation-pills-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #767064);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loki-variation-pills {
  display: flex;
  gap: 12px;
  width: 100%;
}
.loki-var-pill {
  flex: 1;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
  outline: none;
}
.loki-var-pill:hover {
  border-color: var(--accent, #A62C1F);
}
.loki-var-pill.active {
  border-color: var(--accent, #A62C1F);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(166, 44, 31, 0.12);
}
.loki-var-pill__name {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  display: block;
  color: var(--text, #1C1811);
  margin-bottom: 2px;
}
.loki-var-pill__sub {
  font-size: 0.72rem;
  color: var(--text-muted, #767064);
  display: block;
  line-height: 1.25;
}

/* Compact Trust Strip */
.pdp-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 18px;
  box-sizing: border-box;
}
.pdp-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-trust-item svg {
  flex-shrink: 0;
  stroke: var(--accent, #A62C1F);
}
.pdp-trust-text {
  display: flex;
  flex-direction: column;
}
.pdp-trust-text strong {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text, #1C1811);
  line-height: 1.2;
}
.pdp-trust-text span {
  font-size: 0.68rem;
  color: var(--text-muted, #767064);
  line-height: 1.2;
}
.pdp-trust-item--link {
  text-decoration: none;
  color: inherit;
}
.pdp-trust-item--link:hover strong {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 600px) {
  .pdp-trust-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* PDP Modular Narrative Sections */
.woocommerce div.product > .pdp-modular-wrap,
.pdp-modular-wrap {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 48px 0 48px !important;
  padding: 0 !important;
  clear: both !important;
}
.pdp-modular-card {
  background: #ffffff;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(28, 24, 17, 0.04);
}
.pdp-modular-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.pdp-modular-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text, #1C1811);
  margin: 0;
}
.pdp-modular-tag {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #A62C1F);
  background: rgba(166, 44, 31, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Section 1: Performance bars */
.pdp-perf-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: start;
}
.pdp-playstyle-prose h3 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 1.15rem;
  margin: 0 0 12px 0;
  color: var(--text, #1C1811);
}
.pdp-playstyle-prose p {
  color: #4A453A;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.pdp-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-checklist li {
  font-size: 0.88rem;
  color: #4A453A;
  line-height: 1.45;
}
.pdp-check-icon {
  color: #137333;
  font-weight: 800;
  margin-right: 6px;
}
.pdp-check-dash {
  color: var(--text-muted, #767064);
  font-weight: 700;
  margin-right: 6px;
}
.pdp-perf-bars-box {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 24px;
}
.pdp-perf-row {
  margin-bottom: 18px;
}
.pdp-perf-row:last-of-type {
  margin-bottom: 8px;
}
.pdp-perf-row-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--text, #1C1811);
}
.pdp-perf-track {
  height: 10px;
  background: #ececec;
  border-radius: 5px;
  overflow: hidden;
}
.pdp-perf-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--accent, #A62C1F);
}
.pdp-perf-fill.control {
  background: #2E7D32;
}
.pdp-perf-fill.spin {
  background: #C25E00;
}
.pdp-perf-fill.flex {
  background: #1976D2;
}
.pdp-spec-source {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--text-muted, #767064);
  text-align: right;
  margin-top: 10px;
}

/* Section 2: Pairings with 1-click Add to Basket */
.pdp-pairings-intro {
  color: #4A453A;
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.pdp-pairings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pdp-pairing-card {
  display: flex;
  gap: 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 20px;
  align-items: center;
}
.pdp-pairing-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  flex-shrink: 0;
}
.pdp-pairing-body {
  flex: 1;
}
.pdp-pairing-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(166, 44, 31, 0.1);
  color: var(--accent, #A62C1F);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
}
.pdp-pairing-badge.backhand {
  background: rgba(46, 125, 50, 0.1);
  color: #2E7D32;
}
.pdp-pairing-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.pdp-pairing-title a {
  color: var(--text, #1C1811);
  text-decoration: none;
}
.pdp-pairing-title a:hover {
  color: var(--accent, #A62C1F);
}
.pdp-pairing-desc {
  font-size: 0.8rem;
  color: #5C5549;
  line-height: 1.4;
  margin-bottom: 12px;
}
.pdp-pairing-action-btn {
  display: inline-block !important;
  background: var(--accent, #A62C1F) !important;
  color: #ffffff !important;
  font-family: var(--font-display, "Space Grotesk", sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(166, 44, 31, 0.2) !important;
}
.pdp-pairing-action-btn:hover:not(.is-view-basket) {
  background: #8B2317 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}
.pdp-pairing-action-btn.loading {
  opacity: 0.75 !important;
  cursor: wait !important;
  pointer-events: none !important;
}
.pdp-pairing-action-btn.is-view-basket,
.pdp-pairing-action-btn.is-view-bag {
  background: var(--jade, #1e824c) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(30, 130, 76, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.pdp-pairing-action-btn.is-view-basket:hover,
.pdp-pairing-action-btn.is-view-bag:hover {
  background: #186a3b !important;
  box-shadow: 0 6px 18px rgba(30, 130, 76, 0.45) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}
.pdp-pairing-action-btn.is-view-basket .loki-btn-tick,
.pdp-pairing-action-btn.is-view-bag .loki-btn-tick {
  width: 15px;
  height: 15px;
  stroke: #ffffff;
  stroke-width: 2.5;
  flex-shrink: 0;
  display: inline-block;
}
.pdp-pairing-action-btn.is-view-basket::before,
.pdp-pairing-action-btn.is-view-bag::before {
  display: none !important;
  content: none !important;
}

/* Section 3: Benchmark Savings Comparison */
.pdp-savings-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.pdp-savings-box {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.pdp-savings-box.loki {
  border-color: var(--accent, #A62C1F);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(166, 44, 31, 0.08);
}
.pdp-savings-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #767064);
  display: block;
  margin-bottom: 6px;
}
.pdp-savings-box.loki .pdp-savings-label {
  color: var(--accent, #A62C1F);
}
.pdp-savings-name {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: var(--text, #1C1811);
}
.pdp-savings-price {
  font-family: var(--font-mono, monospace);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text, #1C1811);
  margin-bottom: 8px;
}
.pdp-savings-box.loki .pdp-savings-price {
  color: var(--accent, #A62C1F);
}
.pdp-savings-sub {
  font-size: 0.8rem;
  color: var(--text-muted, #767064);
  display: block;
  line-height: 1.35;
}
.pdp-savings-badge-col {
  text-align: center;
}
.pdp-savings-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #137333;
  color: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(19, 115, 51, 0.25);
}
.pdp-savings-save {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.9;
}
.pdp-savings-diff {
  font-family: var(--font-mono, monospace);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 4px 0;
}
.pdp-savings-pct {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
}
.pdp-savings-footer-note {
  font-size: 0.78rem;
  color: var(--text-muted, #767064);
  text-align: center;
  margin: 18px 0 0 0;
  line-height: 1.4;
}

/* Section 4: Specs table */
.pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.pdp-specs-table tr {
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.pdp-specs-table tr:last-child {
  border-bottom: none;
}
.pdp-specs-table td {
  padding: 12px 14px;
  font-size: 0.9rem;
}
.pdp-specs-table td:first-child {
  width: 35%;
  font-weight: 600;
  color: var(--text, #1C1811);
  background: var(--surface, #ffffff);
  border-right: 1px solid var(--border, #e5e5e5);
}
.pdp-specs-table td:last-child {
  color: #4A453A;
}

@media (max-width: 768px) {
  .pdp-perf-grid {
    grid-template-columns: 1fr;
  }
  .pdp-pairings-grid {
    grid-template-columns: 1fr;
  }
  .pdp-savings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Guide/compare/legal content wrappers (.lk, .lkp-wrap, .lkp-guide, .stc-guide)
   are per-page embedded styles, each with its own narrower max-width (e.g.
   980px/1040px) than the theme's own main .wrap (1240px). Every one of them
   also centres itself with margin:0 auto, which re-centres the narrower box
   *inside* the already-centred wrap -- so on wide screens the guide's own
   content starts well to the right of the WordPress page title and the
   category tiles above it (both of which use the full 1240px .wrap directly),
   producing a visibly indented, "squeezed" left edge that doesn't match the
   rest of the site. Left-aligning instead of auto-centring fixes this: the
   narrower reading column still exists for line-length, but now starts flush
   with everything else on the page. !important is deliberate here -- there is
   no shared central stylesheet rule for these classes to override normally
   (each page declares its own copy inline), so this is the only way to fix
   the misalignment sitewide without editing every individual page's stored
   content. Only margin is touched; each page's own max-width/padding choice
   is left alone.

   FOUND 2026-09-15, a second and separate part of the same symptom: several
   of these classes' own embedded <style> ALSO sets non-zero horizontal
   padding on top of the margin fix above -- e.g. /compare/'s own `.lk{
   padding:3.5rem 1.5rem 5rem}`, /shop-by-level/'s and /find-by-setup/'s `.lk{
   padding:3rem 1.25rem 5rem}`, and every `.lk-*-hub`/`.lk-custom-bat` page's
   `padding:0 1rem 4rem`. The margin fix above stops the box from being
   RE-CENTRED, but does nothing about this: the box still adds its own 16-24px
   of horizontal padding on top of the theme's own `.wrap` gutter (28px
   desktop / 18px mobile), so the page's H1 (rendered directly inside `.wrap`,
   no extra padding of its own) and the guide/tool/hub content one level down
   (inside `.wrap` AND this class) land at different left edges -- exactly the
   "left and right padding needs to match" symptom, distinct from the
   left-vs-right on the SAME element mismatch fixed elsewhere on this page.
   The already-migrated `.lkp-wrap`/`.lkp-guide` pattern gets this right by
   construction (`padding:2.5rem 0 5rem` -- vertical only, zero horizontal,
   relying entirely on `.wrap`'s own gutter for the side margins); the classes
   below predate that pattern and still carry their own horizontal padding.
   Zeroing it here, the same !important-on-a-shared-rule technique as the
   margin fix, brings all of them in line with the `.lkp-wrap` reference
   without touching every page's stored content individually. Vertical
   padding is untouched -- only the horizontal component was ever wrong. */
.lk,
.lk-guide,
.lkp-wrap,
.lkp-guide,
.stc-guide,
.cwp,
.lk-custom-bat,
.lk-supplier-hub,
.lk-club-hub,
.lk-contact-hub,
.lk-about-hub {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Accessible screen reader text containing block safety */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Player Spotlight & Equipment Reviews Design System
   ========================================================================== */
.ljk-profile {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.65;
  margin: 0 auto;
}

.ljk-profile * {
  box-sizing: border-box;
}

/* Typography & Display Headings */
.ljk-profile h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 0.5em;
  line-height: 1.25;
}

.ljk-profile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 0.4em;
  line-height: 1.3;
}

.ljk-profile p {
  margin: 0 0 1.2em;
  color: var(--text);
}

.ljk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.ljk-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* Hero Showcase Card */
.ljk-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
  margin-bottom: 2.8rem;
  box-shadow: 0 8px 24px var(--shadow);
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .ljk-hero-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1.8rem;
  }
}

.ljk-hero-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.4rem;
}

/* Quick Stats Pills */
.ljk-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.6rem;
}

@media (max-width: 520px) {
  .ljk-stat-grid {
    grid-template-columns: 1fr;
  }
}

.ljk-stat-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.ljk-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.ljk-stat-value {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

/* Anchor Navigation Pills */
.ljk-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ljk-nav-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.ljk-nav-pill:hover {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
  transform: translateY(-1px);
}

/* Athlete Portrait Frame */
.ljk-portrait-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #141210;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px var(--shadow);
}

.ljk-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5.2;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.ljk-portrait-wrap:hover .ljk-portrait-img {
  transform: scale(1.02);
}

.ljk-portrait-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(20, 18, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(203, 162, 92, 0.5);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ljk-portrait-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

/* Product Line Series Panoramic Hero Media (Uncropped 1900x690) */
.ljk-series-media .ljk-portrait-wrap {
  aspect-ratio: 1900 / 690 !important;
}

.ljk-series-media .ljk-portrait-img {
  aspect-ratio: 1900 / 690 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: auto !important;
}

.ljk-series-media .ljk-portrait-badge {
  left: auto !important;
  right: 0.8rem !important;
  top: 0.8rem !important;
}

@media (max-width: 520px) {
  .ljk-series-media .ljk-portrait-badge {
    right: 0.5rem !important;
    top: 0.5rem !important;
    font-size: 0.62rem;
    padding: 0.2rem 0.55rem;
  }
}

/* Sections */
.ljk-section {
  margin: 3.2rem 0;
}

.ljk-section-header {
  margin-bottom: 1.5rem;
}

.ljk-section-sub {
  font-size: 1.02rem;
  color: var(--text-muted);
  max-width: 68ch;
  margin: 0.25rem 0 0;
}

/* Architecture Comparison Box */
.ljk-arch-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem;
  margin-bottom: 2.2rem;
  box-shadow: 0 4px 16px var(--shadow);
}

.ljk-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.2rem;
}

@media (max-width: 720px) {
  .ljk-arch-grid {
    grid-template-columns: 1fr;
  }
}

.ljk-arch-col {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem;
}

.ljk-arch-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.ljk-arch-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--text);
}

.ljk-arch-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* Equipment Grid & Cards */
.ljk-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.2rem;
}

.ljk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
}

.ljk-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px var(--shadow);
}

.ljk-card-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.8rem;
}

.ljk-card-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.ljk-card-title a {
  color: var(--text);
  text-decoration: none;
}

.ljk-card-title a:hover {
  color: var(--accent);
}

.ljk-card-layup {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.ljk-card-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.2rem;
  flex-grow: 1;
}

.ljk-card-footer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ljk-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ljk-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.ljk-btn-link:hover {
  gap: 0.55rem;
  color: var(--accent-soft);
}

/* Featured Rubber Card */
.ljk-rubber-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 8px 24px var(--shadow);
}

@media (max-width: 800px) {
  .ljk-rubber-card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
}

.ljk-rubber-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.2rem 0 1.5rem;
}

@media (max-width: 480px) {
  .ljk-rubber-specs {
    grid-template-columns: 1fr;
  }
}

.ljk-rubber-spec-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}

.ljk-rubber-spec-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ljk-rubber-spec-val {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}

/* Disclosure Callout Note */
.ljk-disclosure-card {
  background: var(--surface);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text);
  margin: 2rem 0;
}

.ljk-disclosure-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.96rem;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

/* Bottom Range CTA */
.ljk-cta-box {
  background: #141210;
  color: #ffffff;
  border: 1px solid rgba(203, 162, 92, 0.35);
  border-radius: 20px;
  padding: 2.6rem 2.2rem;
  text-align: center;
  margin: 3.5rem 0 2rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.ljk-cta-box h2 {
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.ljk-cta-box p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 58ch;
  margin: 0 auto 1.6rem;
  font-size: 1.02rem;
}

.ljk-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.ljk-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ljk-btn-primary:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
  color: #ffffff;
}

.ljk-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.65rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.ljk-btn-outline:hover {
  border-color: #CBA25C;
  color: #CBA25C;
  transform: translateY(-1px);
}

/* Footnote & Sources */
.ljk-footnote {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}

/* ==============================================================
   HOMEPAGE HERO: SERIES SHOWCASE CARD (BUTTONS INSIDE PICTURE)
   ============================================================== */
.hero-visual-card {
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(20, 18, 16, 0.06);
  border: 1px solid #e5e5e5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}
.hero-visual-card:hover {
  box-shadow: 0 28px 70px rgba(20, 18, 16, 0.16);
}
.hero-panel-media {
  position: relative;
  aspect-ratio: 1900 / 690;
  background: #111111;
  overflow: hidden;
}
.hero-panel-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.hero-panel-media img,
.hero-panel-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
  display: block;
}
.hero-visual-card:hover .hero-panel-media img,
.hero-visual-card:hover .hero-panel-img-wrap img {
  transform: scale(1.025);
}
.hero-floating-pills {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 4px;
  border-radius: 999px;
  gap: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-width: calc(100% - 1.5rem);
}
.hero-pill-btn {
  background: transparent;
  border: none;
  color: #555555;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.hero-pill-btn.active {
  background: #111111;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}
.hero-pill-btn:hover:not(.active) {
  color: #111111;
  background: rgba(0, 0, 0, 0.05);
}
.hero-badge-overlay {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 4;
}
.hero-panel-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.hero-tab-panel {
  display: flex;
  flex-direction: column;
}
.hero-panel-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--accent, #b8860b);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.hero-panel-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text, #111111);
  margin-bottom: 0.4rem;
  letter-spacing: -0.015em;
}
.hero-panel-desc {
  font-size: 0.88rem;
  color: var(--text-muted, #5f5b52);
  line-height: 1.52;
  margin-bottom: 1.25rem;
}
.hero-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}
.hero-chip {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  color: #111111;
}
.hero-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5e5e5;
  padding-top: 1.1rem;
}
.hero-panel-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text, #111111);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}
.hero-panel-link:hover {
  color: var(--accent, #b8860b);
  transform: translateX(3px);
}
.hero-panel-price {
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted, #5f5b52);
}

/* ==============================================================
   HOMEPAGE: WIDE BILLBOARD PICTURE SHOWCASE (BUTTONS INSIDE PICTURE)
   ============================================================== */
.wide-picture-section {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #111111;
}
.wide-billboard-card {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: #111111;
  border-left: none;
  border-right: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.billboard-media {
  position: relative;
  aspect-ratio: 1900 / 690;
  width: 100%;
  background: #0d0c0b;
  overflow: hidden;
}
.billboard-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.45s ease-in-out, transform 0.55s ease;
  pointer-events: none;
}
.billboard-slide-img.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.billboard-top-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 4;
}
.billboard-bottom-scrim {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 4;
}
.billboard-top-bar {
  position: absolute;
  top: 1.35rem;
  left: 2rem;
  right: 2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}
.billboard-floating-bar {
  position: absolute;
  bottom: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 5px;
  border-radius: 999px;
  gap: 4px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
  max-width: calc(100% - 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.billboard-floating-bar::-webkit-scrollbar { display: none; }
.billboard-tab-btn {
  background: transparent;
  border: none;
  color: #555555;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
}
.billboard-tab-btn:hover:not(.active) {
  color: #111111;
  background: rgba(0, 0, 0, 0.05);
}
.billboard-tab-btn.active {
  background: #111111;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.billboard-top-bar {
  position: absolute;
  top: 1.35rem;
  left: 2rem;
  right: 2rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
}
.billboard-tag-pill {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  color: var(--accent-bright, #dfb15b);
}
.billboard-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.billboard-link-pill:hover {
  background: #ffffff;
  color: #111111;
  transform: translateY(-1px);
}
.billboard-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.2s ease;
}
.billboard-arrow.prev { left: 1.5rem; }
.billboard-arrow.next { right: 1.5rem; }
.billboard-arrow:hover {
  background: #ffffff;
  color: #111111;
  transform: translateY(-50%) scale(1.08);
}
@media (max-width: 768px) {
  .billboard-arrow { display: none; }
  .billboard-top-scrim {
    height: 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  }
  .billboard-bottom-scrim {
    height: 52px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  }
}
@media (max-width: 600px) {
  .billboard-media {
    aspect-ratio: 1900 / 690;
  }
  .billboard-slide-img {
    object-fit: contain;
    object-position: center;
  }
  .billboard-top-bar {
    top: 6px;
    left: 8px;
    right: 8px;
  }
  .billboard-floating-bar {
    bottom: 5px;
    padding: 2px 3px;
    gap: 2px;
    max-width: calc(100% - 10px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }
  .billboard-tab-btn {
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.22rem 0.52rem;
  }
  .billboard-tag-pill {
    display: none;
  }
  .billboard-link-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    margin-left: auto;
  }
}

/* ==========================================================================
   Nike-style Sticky "Add to Bag" bar on Product Detail Pages (PDP)
   ========================================================================== */
.single-product .mobile-bottom-bar {
	display: none !important;
}

.loki-pdp-sticky-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
	background: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(115%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 10px 16px;
	padding-bottom: max(10px, env(safe-area-inset-bottom));
	will-change: transform;
}

.loki-pdp-sticky-bar.is-visible {
	transform: translateY(0);
}

.loki-pdp-sticky-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.loki-pdp-sticky-bar__info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1 1 auto;
}

.loki-pdp-sticky-bar__thumb {
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	flex-shrink: 0;
}

.loki-pdp-sticky-bar__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.loki-pdp-sticky-bar__title {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.loki-pdp-sticky-bar__variant-price {
	font-size: 13px;
	font-weight: 600;
	color: #dc2626;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.loki-pdp-sticky-bar__variant-price .price-discount {
	color: #dc2626;
	font-weight: 700;
}

.loki-pdp-sticky-bar__variant-price .price-was {
	color: #64748b;
	font-weight: 400;
	font-size: 0.88em;
	text-decoration: line-through;
	margin-left: 3px;
}

.loki-pdp-sticky-bar__variant-price .price-regular {
	color: #0f172a;
	font-weight: 600;
}

.single_add_to_cart_button .btn-was-price {
	color: rgba(255, 255, 255, 0.88) !important;
	font-weight: 400;
	opacity: 1 !important;
	font-size: 0.88em;
	margin-left: 6px;
	text-decoration: line-through !important;
	text-decoration-color: rgba(255, 255, 255, 0.88) !important;
}

.loki-pdp-sticky-bar__action {
	flex-shrink: 0;
}

.loki-pdp-sticky-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #0f172a;
	color: #ffffff !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 12px 24px;
	border-radius: 9999px;
	border: none;
	cursor: pointer;
	min-height: 44px;
	transition: background 0.15s ease, transform 0.1s ease;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.loki-pdp-sticky-bar__btn:hover {
	background: #000000;
	transform: translateY(-1px);
}

.loki-pdp-sticky-bar__btn:active {
	transform: translateY(1px);
}

.loki-pdp-sticky-bar__btn.loading {
	background: #475569;
	cursor: wait;
}

.loki-pdp-sticky-bar__btn.is-view-bag {
	background: #15803d !important;
	color: #ffffff !important;
}

.loki-pdp-sticky-bar__btn .loki-btn-tick {
	width: 18px;
	height: 18px;
}

.loki-pdp-sticky-bar__btn .loki-btn-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: lokiSpin 0.7s linear infinite;
}

@keyframes lokiSpin {
	to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
	.loki-pdp-sticky-bar {
		padding: 8px 12px;
		padding-bottom: max(8px, env(safe-area-inset-bottom));
	}
	.loki-pdp-sticky-bar__thumb {
		width: 38px;
		height: 38px;
	}
	.loki-pdp-sticky-bar__title {
		font-size: 13px;
		max-width: 140px;
	}
	.loki-pdp-sticky-bar__variant-price {
		font-size: 12px;
	}
	.loki-pdp-sticky-bar__btn {
		padding: 10px 18px;
		font-size: 13px;
		min-height: 40px;
	}
}

/* Next-Gen picture markup wrapper */
picture.loki-picture {
	display: contents;
}

/* ==========================================================================
   Loki Modern Floating Toast Notification System
   Replaces native browser alert() dialogs for out-of-stock & selection-needed states
   ========================================================================== */
#loki-toast-container {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
	width: calc(100% - 32px);
	max-width: 460px;
}

.loki-toast {
	pointer-events: auto;
	position: relative;
	width: 100%;
	background: #14100B;
	background: linear-gradient(145deg, #18140E, #0E0C09);
	border: 1px solid rgba(200, 163, 85, 0.45);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	padding: 16px 18px 18px 16px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: #FFFFFF;
	overflow: hidden;
	cursor: pointer;
	animation: lokiToastSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
}

.loki-toast:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
	border-color: rgba(224, 176, 66, 0.7);
}

.loki-toast.is-leaving {
	animation: lokiToastSlideOut 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loki-toast__left {
	flex-shrink: 0;
	margin-top: 2px;
}

.loki-toast__icon {
	width: 22px;
	height: 22px;
	stroke: #E0B042;
	display: block;
}

.loki-toast--error .loki-toast__icon {
	stroke: #E05D5D;
}

.loki-toast--warning .loki-toast__icon {
	stroke: #E0B042;
}

.loki-toast__body {
	flex: 1 1 auto;
	min-width: 0;
}

.loki-toast__kicker {
	font-family: var(--font-mono, 'JetBrains Mono', monospace);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #E0B042;
	margin-bottom: 3px;
	line-height: 1.2;
}

.loki-toast--error .loki-toast__kicker {
	color: #FF8080;
}

.loki-toast__title {
	font-family: var(--font-display, 'Unbounded', sans-serif);
	font-size: 0.94rem;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.25;
	margin-bottom: 5px;
	letter-spacing: -0.01em;
}

.loki-toast__message {
	font-family: var(--font-body, 'Work Sans', sans-serif);
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.84);
	line-height: 1.45;
	margin: 0;
}

.loki-toast__close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	margin-top: -2px;
	transition: color 0.15s ease;
	outline: none;
}

.loki-toast__close:hover {
	color: #FFFFFF;
}

.loki-toast__timer {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, #C8A355, #E0B042);
	border-radius: 0 0 8px 8px;
}

.loki-toast--error .loki-toast__timer {
	background: linear-gradient(90deg, #E05D5D, #FF8080);
}

@keyframes lokiToastSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes lokiToastSlideOut {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to {
		opacity: 0;
		transform: translateY(-16px) scale(0.96);
	}
}

@keyframes lokiToastProgress {
	from {
		width: 100%;
	}
	to {
		width: 0%;
	}
}

/* Gentle shake cue for variation options when selection is needed */
@keyframes lokiOptionShake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.loki-options-need-selection {
	animation: lokiOptionShake 0.4s ease-in-out;
	border: 1px solid #E0B042 !important;
	border-radius: 6px;
}

@media (max-width: 600px) {
	#loki-toast-container {
		top: 16px;
		width: calc(100% - 24px);
	}
	.loki-toast {
		padding: 14px 16px 16px 14px;
	}
	.loki-toast__title {
		font-size: 0.88rem;
	}
	.loki-toast__message {
		font-size: 0.8rem;
	}
}

/* =========================================================
   Player Directory & Sub-Pages — tokenised to match the
   frontpage/guide design system (Unbounded/Work Sans/JetBrains
   Mono, --accent/--surface/--border/--bg-alt), not raw hex.
   ========================================================= */
.lk-player-hub {
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 80px;
  font-family: var(--font-body);
}
.lk-player-hub__hero {
  text-align: center;
  margin-bottom: 40px;
}
.lk-player-hub__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.lk-player-hub__lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 70ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* Athlete Search & Filter Rails */
.lk-roster-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 36px;
}
.lk-roster-search-wrap {
  width: 100%;
  max-width: 540px;
  position: relative;
}
.lk-roster-search {
  width: 100%;
  padding: 12px 20px 12px 46px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23916B31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 18px center;
  background-size: 18px;
  outline: none;
  transition: all 0.2s;
  color: var(--text);
}
.lk-roster-search::placeholder {
  color: var(--text-muted);
  font-family: var(--font-body);
}
.lk-roster-search:focus-visible {
  border-color: var(--accent);
}
.lk-roster-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.lk-roster-pill {
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s ease;
}
.lk-roster-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}
.lk-roster-pill.is-active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Athlete Cards Grid */
.lk-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.lk-athlete-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lk-athlete-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px var(--shadow);
  border-color: var(--accent);
}
.lk-athlete-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--text);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-athlete-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.3s ease;
}
.lk-athlete-card:hover .lk-athlete-card__img {
  transform: scale(1.05);
}
.lk-athlete-card__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  border: 2px solid rgba(255,255,255,0.2);
}
.lk-athlete-card__country-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lk-athlete-card__rank-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--gold);
  color: var(--accent-ink);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lk-athlete-card__body {
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.lk-athlete-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.2;
}
.lk-athlete-card__name small {
  font-family: var(--font-body);
  color: var(--text-muted);
}
.lk-athlete-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lk-athlete-card__tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--bg-alt);
  color: var(--text-muted);
  border-radius: 4px;
}
.lk-athlete-card__tag.is-loki {
  background: var(--gold);
  color: var(--accent-ink);
  font-weight: 700;
}
.lk-athlete-card__desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lk-athlete-card__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 4px;
}
.lk-athlete-card:hover .lk-athlete-card__cta {
  color: var(--gold);
}

/* =========================================================
   Player Single Sub-Page Styles
   ========================================================= */
.lk-player-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 24px 0 80px;
  font-family: var(--font-body);
}
.lk-player-hero-box {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .lk-player-hero-box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
  }
}
.lk-player-portrait-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--text);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-player-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.lk-player-meta-eyebrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .lk-player-meta-eyebrow {
    justify-content: center;
  }
}
.lk-player-flag {
  font-size: 1.1rem;
}
.lk-player-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
}
.lk-player-badge.is-gold {
  background: var(--gold);
  color: var(--accent-ink);
}
.lk-player-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.1;
}
.lk-player-native-name {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 8px;
}
.lk-player-hero-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 12px 0 16px;
}
.lk-player-specs-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .lk-player-specs-row {
    justify-content: center;
  }
}
.lk-player-spec-item {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.lk-player-spec-item strong {
  color: var(--text);
}

/* Equipment 3-Card Grid */
.lk-equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .lk-equip-grid {
    grid-template-columns: 1fr;
  }
}
.lk-equip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.lk-equip-card__role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 8px;
}
.lk-equip-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.lk-equip-card__spec {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Loki Match Section */
.lk-loki-match-section {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 40px;
}
.lk-loki-match-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}
.lk-loki-match-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.lk-loki-match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .lk-loki-match-grid {
    grid-template-columns: 1fr;
  }
}
.lk-loki-match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-decoration: none !important;
  color: inherit !important;
}
.lk-loki-match-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--shadow);
  border-color: var(--accent);
}
.lk-loki-match-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-alt);
  color: var(--text-muted);
  margin-bottom: 12px;
}
.lk-loki-match-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-alt);
  border-radius: 6px;
  margin-bottom: 12px;
}
.lk-loki-match-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.lk-loki-match-card__reason {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 12px;
  flex-grow: 1;
}
.lk-loki-match-card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.lk-loki-match-card__price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
}
.lk-loki-match-card__btn {
  background: var(--accent);
  color: var(--accent-ink) !important;
  padding: 7px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}

/* FAQ Section (per-player page). Matches the foldable .lk-faq__q
   accordion pattern already used on /shop-by-league/ and the guides —
   card-style items with generous padding, closed by default, toggled
   by JS adding .is-open to the parent .lk-faq-item. The double-
   underscore lk-faq__* classes on the same elements stay purely for
   inc/faq-schema.php's FAQPage JSON-LD parser; this block only
   targets the hyphenated classes so it can never affect the guide/
   compare pages' own local .lk-faq__item styling. */
.lk-faq-section {
  margin: 40px 0;
}
.lk-faq-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 20px;
}
.lk-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}
.lk-faq-item:last-child {
  margin-bottom: 0;
}
.lk-faq-q {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.lk-faq-q::after {
  content: "+";
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.lk-faq-item.is-open .lk-faq-q::after {
  content: "\2212";
}
.lk-faq-a {
  display: none;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding-top: 0.8rem;
}
.lk-faq-item.is-open .lk-faq-a {
  display: block;
}
@media (max-width: 600px) {
  .lk-faq-item {
    padding: 1.1rem 1.2rem;
  }
}


/* ============================================================
   Shop by Rubber Hardness (/shop-by-rubber-hardness/)
   Ladder rows sorted on the European figure; a chosen competitor
   is inserted as a marker row at its position.
   ============================================================ */
.rh-field{display:flex;flex-direction:column;gap:6px;flex:0 1 auto;min-width:0;}
.rh-field--grow{flex:1 1 280px;}
.rh-field .tf-select{width:100%;}
.rh-label{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);}
.rh-summary{font-size:0.95rem;line-height:1.6;padding:16px 18px;background:var(--bg-alt);border-left:3px solid var(--gold);border-radius:6px;margin:0 0 18px;}
.rh-summary .rh-note{color:var(--text-muted);font-size:0.86rem;}
.rh-count{font-family:var(--font-mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:0 0 10px;}
.rh-scale-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:0 0 8px;}
.rh-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:8px;}
.rh-row{
  display:grid;grid-template-columns:56px minmax(0,1.6fr) minmax(0,1.3fr) minmax(90px,1fr) 136px;
  align-items:center;gap:16px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
}
.rh-thumb img{width:56px;height:56px;object-fit:contain;border-radius:6px;background:var(--bg-alt);display:block;}
.rh-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.rh-kicker{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);}
.rh-name{font-family:var(--font-display);font-weight:700;font-size:0.95rem;color:var(--text);text-decoration:none;line-height:1.25;}
a.rh-name:hover{color:var(--accent);}
.rh-tags{display:flex;flex-wrap:wrap;gap:6px;}
.rh-rel,.rh-stock,.rh-src{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;border-radius:100px;padding:3px 9px;border:1px solid var(--border);color:var(--text-muted);}
.rh-src{text-transform:none;letter-spacing:0.02em;}
.rh-rel--softer{color:var(--jade);border-color:var(--jade);}
.rh-rel--harder{color:var(--accent);border-color:var(--accent);}
.rh-rel--similar{background:var(--gold);border-color:var(--gold);color:var(--accent-ink);}
.rh-values{display:flex;gap:18px;margin:0;}
.rh-values div{display:flex;flex-direction:column;gap:2px;}
.rh-values dt{font-family:var(--font-mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);}
.rh-values dd{margin:0;font-family:var(--font-mono);font-size:0.86rem;font-variant-numeric:tabular-nums;color:var(--text);}
.rh-gauge{position:relative;display:block;height:8px;border-radius:100px;background:var(--bg-alt);border:1px solid var(--border);}
.rh-gauge__fill{position:absolute;top:-1px;bottom:-1px;border-radius:100px;background:var(--text);}
.rh-price{font-family:var(--font-mono);font-size:0.9rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.rh-row.is-similar{border-color:var(--gold);}
.rh-row--marker{background:var(--bg-alt);border:2px dashed var(--gold);}
.rh-row--marker .rh-gauge__fill{background:var(--gold);width:10px !important;margin-left:-5px;}
.rh-marker-pin{width:56px;height:56px;border-radius:50%;background:var(--gold);display:block;position:relative;}
.rh-marker-pin::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--surface);}
.rh-empty{color:var(--text-muted);}
@media (max-width:760px){
  .rh-row{grid-template-columns:48px minmax(0,1fr) auto;gap:10px 12px;padding:12px;}
  .rh-price{white-space:normal;}
  .rh-thumb img,.rh-marker-pin{width:48px;height:48px;}
  .rh-marker-pin::after{inset:15px;}
  .rh-values{grid-column:2 / 4;gap:14px;}
  .rh-gauge{grid-column:1 / 4;}
  .rh-price{grid-column:3;grid-row:1;align-self:start;}
}
.pdp-specs-note{font-size:0.82rem;color:var(--text-muted);margin:10px 0 0;line-height:1.5;}

/* ---------- Setup "add whole bat to basket" ([loki_setup_buy], inc/setup-buy.php) ---------- */
.lk-setupbuy{
  margin:1.1rem 0 1.4rem;padding:1rem 1.1rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;
}
.lk-setupbuy[hidden]{display:none;}
.lk-setupbuy__opts{display:flex;flex-wrap:wrap;gap:0.75rem 1rem;margin-bottom:0.85rem;}
.lk-setupbuy__field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0;}
.lk-setupbuy__label{
  font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);
}
.lk-setupbuy__select{
  font-family:var(--font-body);font-size:0.92rem;color:var(--text);background:var(--surface);
  border:1px solid var(--border);border-radius:6px;padding:10px 12px;min-height:44px;width:100%;
}
.lk-setupbuy__select:disabled{opacity:1;color:var(--text-muted);background:var(--bg-alt);}
.lk-setupbuy__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lk-setupbuy__assembly{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 0.85rem;font-size:0.9rem;line-height:1.45;cursor:pointer;
}
.lk-setupbuy__asmtext{flex:1 1 auto;min-width:0;}
.lk-setupbuy__assembly[hidden]{display:none;}
.lk-setupbuy__assemble{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--jade);}
.lk-setupbuy__free{
  font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--accent-ink);background:var(--jade);border-radius:4px;padding:2px 7px;margin-left:4px;white-space:nowrap;
}
.lk-setupbuy .lk-setupbuy__btn{min-height:44px;padding:11px 20px !important;font-size:0.86rem !important;cursor:pointer;}
.lk-setupbuy .lk-setupbuy__btn:disabled{
  background:var(--bg-alt) !important;color:var(--text-muted) !important;box-shadow:none !important;cursor:not-allowed;
}
.lk-setupbuy__msg{margin:0.6rem 0 0;font-size:0.86rem;color:var(--text-muted);}
.lk-setupbuy__msg:empty{display:none;}
.lk-setupbuy__msg--warn{color:var(--accent);}
@media (max-width:600px){
  .lk-setupbuy .lk-setupbuy__btn{display:flex !important;width:100%;justify-content:center;}
}