/* ==========================================================
   Pioneer Powersports — design tokens
   ========================================================== */
:root{
  --bg:#f6f3ec; --surface:#ffffff; --surface-2:#efece2; --surface-3:#e6e1d3;
  --ink:#181c22; --ink-soft:#565c6b; --ink-faint:#8890a0;
  --border:#e3ddcd; --border-strong:#d3cbb5;
  --accent:#d8431e; --accent-deep:#b0350f; --accent-ink:#fff6f0;
  --navy:#1b2431; --navy-2:#242f3f; --navy-ink:#f3f1e9;
  --gold:#b9822b; --gold-soft:#f3e6cb;
  --good:#2c7a4b; --good-soft:#e2f0e5;
  --danger:#c0272d; --danger-soft:#fbe4e2;
  --focus:#1c6fd8;
  --shadow: 0 1px 2px rgba(20,16,8,.06), 0 8px 24px -12px rgba(20,16,8,.18);
  --radius: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; margin:0;
}
h1,h2,h3,h4{font-family:'Oswald',system-ui,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.02em; margin:0;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;}
button{font-family:inherit;}
img{max-width:100%; height:auto;}
.wrap{max-width:1240px; margin-inline:auto; padding-inline:20px;}
@media (max-width:640px){ .wrap{padding-inline:16px;} }
/* iOS Safari zooms the whole page in when a focused text input has a
   font-size under 16px — that's what made tapping the mobile search
   box zoom in and break the layout. Every text-entry field on the
   theme is under 16px for the tighter desktop type scale, so bump
   them all back up to 16px on phones specifically, where the zoom
   bug actually applies. */
@media (max-width:640px){
  input[type=text], input[type=email], input[type=tel], input[type=search],
  input[type=number], input[type=password], input[type=url], textarea, select{
    font-size:16px!important;
  }
}
[hidden]{display:none!important;}
.pp-section{padding-block:52px;}

/* ---------- utility bar ---------- */
.utility{background:var(--navy); color:var(--navy-ink); font-size:12.5px;}
.utility .wrap{display:flex; align-items:center; justify-content:flex-end; height:34px; gap:12px;}
.utility a{text-decoration:none; opacity:.9; color:inherit;}
.utility a:hover{opacity:1; text-decoration:underline;}
.utility-right{display:flex; gap:14px; align-items:center;}
.utility-right a{display:flex;align-items:center;gap:5px;}
.utility-right .fin-link{color:var(--gold); font-weight:700; opacity:1;}
@media (max-width:480px){ .utility-right .pp-call{display:none;} }

/* ---------- header (navy, full-bleed — "Bold Split" direction) ---------- */
header.site{position:sticky; top:0; z-index:40; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);}
.header-row{display:flex; align-items:center; gap:22px; height:76px;}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto;}
.logo img{max-height:48px; width:auto; display:block;}
.logo-text{font-family:'Oswald'; font-weight:700; font-size:17px; color:#fff;}
.logo-tagline{font-family:'Inter'; font-weight:600; font-size:10px; letter-spacing:.14em; color:#9aa3b4; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.18); padding-left:12px; line-height:1.4;}
@media (max-width:760px){ .logo-tagline{display:none;} }

nav.primary ul.primary-menu{display:flex; gap:2px; list-style:none; margin:0; padding:0;}
nav.primary{flex:1;}
nav.primary a{
  display:block; text-decoration:none; color:#cfd4dc; font-weight:600; font-size:13.5px;
  padding:10px 13px; border-radius:8px; letter-spacing:.01em;
}
nav.primary a:hover{background:rgba(255,255,255,.08); color:#fff;}
nav.primary .current-menu-item > a{color:var(--accent); background:rgba(255,255,255,.08);}

.header-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{
  background:none;border:1px solid transparent; cursor:pointer; color:#fff; text-decoration:none;
  width:38px;height:38px;border-radius:8px; display:flex;align-items:center;justify-content:center; position:relative;
}
.icon-btn:hover{background:rgba(255,255,255,.1);}
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--accent); color:var(--accent-ink);
  font-size:10.5px; font-weight:700; border-radius:999px; min-width:17px; height:17px; display:flex;align-items:center;justify-content:center; padding:0 3px;
}
.search-wrap{position:relative; flex:0 1 260px;}
.search-box{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 14px;}
.search-box svg{color:#9aa3b4;}
.search-box input{background:none;border:none;outline:none;color:#fff;font-size:13.5px;width:100%;}
.search-box input::placeholder{color:#8a93a4;}
.search-dropdown{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); max-height:70vh; overflow-y:auto; z-index:55; padding:6px;}
.search-item{display:flex; align-items:center; gap:10px; padding:7px; border-radius:8px; cursor:pointer; background:none; border:none; width:100%; text-align:left; font:inherit; color:inherit; text-decoration:none;}
.search-item:hover, .search-item:focus{background:var(--surface-2); outline:none;}
.search-item .thumb{width:42px;height:34px;border-radius:7px; flex:0 0 auto; display:flex;align-items:center;justify-content:center; overflow:hidden;}
.search-item .thumb svg{width:60%; color:#fff;}
.search-item .thumb img{width:100%;height:100%;object-fit:cover;}
.search-item .info{flex:1; min-width:0;}
.search-item .info b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-item .info span{font-size:11px; color:var(--ink-faint);}
.search-item .price{font-family:'IBM Plex Mono'; font-size:12px; font-weight:600; flex:0 0 auto; white-space:nowrap;}
.search-footer{border-top:1px solid var(--border); margin-top:4px; padding-top:4px;}
.search-footer button{width:100%; background:none;border:none;color:var(--accent);font-weight:700;font-size:12.5px;padding:9px 7px;cursor:pointer;text-align:left; border-radius:8px;}
.search-footer button:hover{background:var(--surface-2);}
.search-empty{padding:20px 10px; text-align:center; color:var(--ink-faint); font-size:12.5px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:8px; border:1px solid transparent; font-weight:700; font-size:13.5px;
  padding:11px 20px; cursor:pointer; letter-spacing:.02em; text-decoration:none;
}
.btn-accent{background:var(--accent); color:var(--accent-ink);}
.btn-accent:hover{background:var(--accent-deep); color:var(--accent-ink);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-dark{background:var(--navy); color:var(--navy-ink);}
.btn-dark:hover{background:var(--navy-2); color:var(--navy-ink);}
.btn-gold{background:var(--gold); color:#211603;}
.btn-gold:hover{background:#a3761f; color:#211603;}
.btn-sm{padding:8px 14px; font-size:12.5px;}
.btn-block{width:100%;}
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.header-fin-btn{display:inline-flex;}
@media (max-width:560px){ .header-fin-btn{display:none;} }
.hamburger{display:none;}
.mobile-search-toggle{display:none;}
@media (max-width:980px){
  nav.primary{display:none;}
  .hamburger{display:flex; order:1;}
  .mobile-search-toggle{display:flex; order:2; margin-left:auto;}

  /* Mobile header: hamburger on the left, store name pinned dead-center
     regardless of what's on either side, search icon + cart grouped on
     the right — search becomes an icon that drops the search box down
     as a full-width panel instead of a permanent inline field. */
  .header-row{position:relative;}
  .header-row > .logo{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); order:0;}
  .header-actions{order:3;}

  .search-wrap{display:none; order:4;}
  .search-wrap.mobile-open{
    display:block; position:absolute; top:100%; left:0; right:0;
    background:var(--navy); padding:14px 16px; border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:60;
  }
  .search-wrap.mobile-open .search-box{width:100%;}
}

/* ---------- mobile drawer ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:60;}
.drawer{position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw); background:var(--surface); z-index:61; padding:20px; overflow-y:auto;}
.drawer h3{font-size:13px; color:var(--ink-faint); margin-bottom:10px; margin-top:22px;}
.drawer-nav-list{list-style:none; margin:0; padding:0;}
.drawer-nav-list li{border-bottom:1px solid var(--border);}
.drawer-nav-list a, .drawer a.nav-item{display:block; text-decoration:none; color:var(--ink); font-family:'Oswald'; font-size:17px; text-transform:uppercase; padding:12px 2px;}
.drawer a.nav-item{font-size:14px; border-bottom:1px solid var(--border);}

/* ---------- trust strip ---------- */
/* Trust strip — a section of its own below the hero (not visually fused
   to it): dark "console" background with glowing accent bleed, and each
   item is its own bordered card rather than a continuous divided bar,
   so it reads as a separate block instead of an extension of the hero. */
.trust-strip{background:linear-gradient(180deg,#0d1420,#0a0f18); padding-block:40px; position:relative; overflow:hidden;}
.trust-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 12% 0%, rgba(255,90,31,.14), transparent 60%),radial-gradient(600px 220px at 88% 100%, rgba(212,163,55,.12), transparent 60%);pointer-events:none;}
.trust-grid{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .trust-grid{grid-template-columns:1fr;} }
.trust-card{background:#131b28; border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; text-decoration:none; transition:transform .15s ease, border-color .15s ease, background .15s ease;}
.trust-card:hover{transform:translateY(-3px); border-color:rgba(255,140,66,.5); background:#182233;}
/* Solid, crisp icon badge — no blur/glow, so the line-art icon inside
   stays sharp instead of reading as soft/hazy. */
.trust-icon{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;}
.trust-icon svg{shape-rendering:geometricPrecision;}
.trust-card b{font-family:'Oswald'; font-size:13px; letter-spacing:.02em; color:#fff; text-transform:uppercase;}
.trust-card span{color:#9aa3b4; font-size:12px; line-height:1.4;}

/* ---------- hero ---------- */
/* "Bold Split" hero: diagonal navy-to-accent color block, single column,
   full width — no boxed decorative graphic (that's now the category
   strip right below instead). */
.hero.hero-split{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(115deg, var(--navy) 0%, var(--navy) 46%, var(--accent-deep) 46%, var(--accent) 100%);
}
.hero.hero-split .wrap{padding-block:56px 48px; max-width:900px;}
.eyebrow{display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:16px;}
.hero h1{font-size:clamp(32px,5vw,58px); line-height:.99; margin-bottom:16px; color:#fff;}
.hero h1 em{font-style:normal; color:#ffd9c9;}
.hero p.lead{color:#e7d9cf; font-size:16px; max-width:46ch; margin-bottom:26px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;}
.hero-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.hero-ghost-light:hover{background:rgba(255,255,255,.1);}
.hero-stats{display:flex; gap:28px; flex-wrap:wrap;}
.hero-stats div b{display:block; font-family:'Oswald'; font-size:22px; color:#fff;}
.hero-stats div span{color:#c9b9ae; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;}

/* category strip — sits right under the hero, replacing a decorative box
   with a functional "jump to category" row. */
.cat-strip-section{border-bottom:1px solid var(--border); background:var(--surface);}
.cat-strip{display:flex; gap:14px; overflow-x:auto; padding-block:24px; justify-content:center;}
.cat-strip-item{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:9px; width:118px; text-align:center; text-decoration:none; padding:14px 8px; border-radius:12px;}
.cat-strip-item:hover{background:var(--surface-2);}
.cat-strip-item .ic{width:56px;height:56px;border-radius:15px; display:flex;align-items:center;justify-content:center; color:#fff; transition:transform .12s ease;}
.cat-strip-item:hover .ic{transform:translateY(-2px);}
.cat-strip-item b{font-family:'Oswald'; font-size:12.5px; letter-spacing:.02em; color:var(--ink); text-transform:uppercase;}
.cat-strip-item span{color:var(--ink-faint); font-size:11.5px;}

/* ---------- section head / category grid ---------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.section-head h2{font-size:26px;}
.section-head p{color:var(--ink-faint); font-size:13px; margin-top:4px;}
.link-more{font-weight:700; font-size:12.5px; text-decoration:none; color:var(--accent); white-space:nowrap;}
.link-more:hover{text-decoration:underline;}

.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
.cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:10px; cursor:pointer; text-align:left; width:100%;
  transition:transform .12s ease, border-color .12s ease; text-decoration:none;
}
.cat-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.cat-icon{width:48px;height:48px;border-radius:10px; display:flex;align-items:center;justify-content:center; color:#fff; flex:0 0 auto;}
.cat-card b{font-family:'Oswald'; font-size:14.5px; letter-spacing:.02em; color:var(--ink);}
.cat-card span{color:var(--ink-faint); font-size:12px;}

/* ---------- product grid / card ---------- */
.prod-grid, ul.products{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; list-style:none; margin:0 0 24px; padding:0;}
/* WooCommerce's base stylesheet puts a `content:" "; display:table`
   clearfix on .products::before/::after for its old float-based grid.
   Under display:grid that clearfix becomes a real (invisible) grid
   item and silently eats the first cell, pushing every product over
   by one and leaving the first row one short — confirmed live via
   getComputedStyle(ul, '::before'). Strip it so only real products
   are grid items. */
.prod-grid::before, .prod-grid::after, ul.products::before, ul.products::after{content:none;}
@media (max-width:980px){ .prod-grid, ul.products{grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .prod-grid, ul.products{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .prod-grid, ul.products{grid-template-columns:1fr;} }
ul.products li.product{list-style:none;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; position:relative;}
.card-media{aspect-ratio:4/3; position:relative; width:100%; flex:0 0 auto;}
.card-media > a{width:100%; height:100%; display:block;}
.card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.card-badges{position:absolute; top:9px; left:9px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2;}
.badge{font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:5px; letter-spacing:.02em; text-transform:uppercase;}
.badge-sale{background:var(--accent); color:var(--accent-ink);}
.badge-store{background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(3px);}
.badge-out{background:var(--danger); color:#fff;}
.card-body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-cat{font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase;}
.card-title{font-size:13.5px; font-weight:600; line-height:1.35; text-decoration:none; color:var(--ink);}
.card-title:hover{color:var(--accent);}
.card-price{margin-top:auto; padding-top:6px; font-family:'IBM Plex Mono'; font-weight:600; font-size:16px;}
.card-price del{font-size:12px; color:var(--ink-faint); font-weight:400; margin-right:6px;}
.card-price ins{text-decoration:none;}
.est-pay{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.est-pay a{color:var(--accent);font-weight:700;text-decoration:underline;}
.card-add{margin-top:9px; width:100%; padding:9px; font-size:12px; text-align:center;}

/* ---------- financing band / callouts ---------- */
.fin-band{background:linear-gradient(120deg,var(--navy),#33231a); color:var(--navy-ink); border-radius:16px; padding:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.fin-band h3{font-size:24px; margin-bottom:8px; color:#fff;}
.fin-band p{color:#c9cdd6; max-width:52ch; font-size:14px;}
.fin-figures{display:flex; gap:22px;}
.fin-figures div{text-align:center;}
.fin-figures b{display:block; font-family:'Oswald'; font-size:26px; color:var(--gold);}
.fin-figures span{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#a9adb8;}
.fin-callout{background:var(--gold-soft); border:1px solid var(--gold); border-radius:12px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.fin-context{display:inline-flex; align-items:center; gap:8px; background:var(--gold-soft); border:1px solid var(--gold); color:var(--ink); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:8px; margin-bottom:22px;}
.float-fin{position:fixed; right:18px; bottom:22px; z-index:50; display:flex; align-items:center; gap:8px; background:var(--gold); color:#211603; border:none; padding:13px 18px; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; box-shadow:var(--shadow); text-decoration:none;}
@media (max-width:640px){
	.float-fin{bottom:16px; right:16px; padding:11px 15px; font-size:12.5px;}
	/* On mobile product pages the sticky add-to-cart bar (.sticky-buy, z-index 45)
	   sits flush with the bottom edge — the floating pill would land on top of
	   its button. The product page already surfaces Get Pre-Approved inline
	   (financing estimate + summary link), so hide the duplicate pill there. */
	.single-product .float-fin{display:none;}
}

.brand-strip{display:flex; gap:34px; overflow-x:auto; padding-block:6px;}
.brand-strip a{font-family:'Oswald'; font-weight:600; font-size:15px; color:var(--ink-faint); white-space:nowrap; text-decoration:none;}
.brand-strip a:hover{color:var(--ink);}

/* ---------- financing page ---------- */
.lender-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:18px; display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap;}
.lender-icon{width:52px;height:52px;border-radius:12px;background:var(--navy); display:flex;align-items:center;justify-content:center; flex:0 0 auto; color:var(--gold);}
.lender-body{flex:1; min-width:240px;}
.lender-body h3{font-size:19px; text-transform:none; margin-bottom:8px;}
.lender-body > p{color:var(--ink-soft); font-size:13.5px; line-height:1.7; margin-bottom:14px; max-width:64ch;}
.lender-list{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px;}
.lender-list li{font-size:13px; color:var(--ink-soft); padding-left:20px; position:relative;}
.lender-list li::before{content:"✓"; position:absolute; left:0; color:var(--good); font-weight:700;}
.lender-fine{font-size:10.5px; color:var(--ink-faint); line-height:1.6; margin-top:14px; max-width:70ch;}
.lender-actions{display:flex; gap:10px; flex-wrap:wrap;}
.fin-perks{display:flex; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap;}
.fin-perks div{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft);}
.fin-perks svg{color:var(--good); flex:0 0 auto;}
.lead-panel{background:var(--navy); color:var(--navy-ink); border-radius:16px; padding:32px; margin-top:36px;}
.lead-panel h2{color:#fff; font-size:22px; margin-bottom:8px;}
.lead-panel p{color:#b9bec9; font-size:13.5px; margin-bottom:22px; max-width:60ch;}
.lead-panel .field label{color:#c9cdd6;}
.lead-panel .field input, .lead-panel .field select, .lead-panel .field textarea{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff;}
.lead-panel .field input::placeholder, .lead-panel .field textarea::placeholder{color:#7c8494;}

/* ---------- breadcrumb ---------- */
.crumb, nav.woocommerce-breadcrumb{font-size:12px; color:var(--ink-faint); padding-block:14px; display:block;}
.crumb a, nav.woocommerce-breadcrumb a{color:var(--ink-faint); text-decoration:none;}
.crumb a:hover, nav.woocommerce-breadcrumb a:hover{color:var(--accent);}

/* ---------- shop layout / filters ---------- */
.shop-layout{display:grid; grid-template-columns:240px 1fr; gap:28px; align-items:start;}
@media (max-width:860px){ .shop-layout{grid-template-columns:1fr;} }
.filters{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; position:sticky; top:88px;}
@media (max-width:860px){ .filters{position:static;} }
.filters h4{font-size:11.5px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:10px; margin-top:18px; text-transform:uppercase;}
.filters h4:first-child{margin-top:0;}
.filter-row{display:flex; align-items:center; gap:9px; font-size:13.5px; padding:5px 0; cursor:pointer;}
.filter-row input{accent-color:var(--accent); width:15px;height:15px;}
.filter-row .count{margin-left:auto; color:var(--ink-faint); font-size:11.5px;}
.range-row{display:flex; align-items:center; gap:8px;}
input[type=range]{width:100%; accent-color:var(--accent);}
.clear-filters{font-size:12px; color:var(--accent); background:none;border:none;cursor:pointer; font-weight:600; padding:0; text-decoration:none;}

.shop-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.shop-toolbar .count, .woocommerce-result-count{color:var(--ink-faint); font-size:13px; margin:0;}
select, .woocommerce-ordering select{background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:8px; padding:9px 12px; font-size:12.5px; font-weight:600;}
.empty-state, .woocommerce-info{padding:60px 20px; text-align:center; color:var(--ink-faint); border:1px dashed var(--border-strong); border-radius:var(--radius); list-style:none;}

.woocommerce-pagination{margin-top:12px;}
.woocommerce-pagination ul.page-numbers{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.woocommerce-pagination ul.page-numbers li{margin:0;}
.woocommerce-pagination .page-numbers{display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--ink-soft); font-weight:600; font-size:13px; text-decoration:none;}
.woocommerce-pagination .page-numbers:hover{background:var(--surface-2); color:var(--ink);}
.woocommerce-pagination .page-numbers.current{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.woocommerce-pagination .page-numbers.dots{border:none; background:none;}

/* ---------- product detail (real WooCommerce markup) ----------
   div.product's real direct children (in DOM order) are: span.onsale
   (optional), div.images, div.summary, div.woocommerce-tabs, and
   section.related/.upsells — five siblings, not just two. A plain
   2-column grid on div.product itself auto-places all five into a
   2-per-row grid, scrambling everything after the summary. Flex +
   flex-basis:100% on the "full width" ones keeps gallery/summary side
   by side while forcing tabs/related onto their own row below. */
.single-product div.product{position:relative; display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start;}
.single-product div.product > span.onsale{position:absolute; top:14px; left:14px; z-index:2; order:-1; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:5px 10px; border-radius:6px;}
.single-product div.product > div.images{flex:0 1 580px; min-width:280px; max-width:580px;}
.single-product div.product > div.summary{flex:1 1 420px; min-width:280px;}
.single-product div.product > div.woocommerce-tabs,
.single-product div.product > section.related,
.single-product div.product > section.upsells{flex-basis:100%; width:100%;}
@media (max-width:900px){ .single-product div.product > div.images, .single-product div.product > div.summary{flex-basis:100%; max-width:none;} }
.single-product div.product div.images{margin:0;}
.single-product div.product div.images img{border-radius:14px;}
/* Product photos get uploaded at all kinds of native sizes/shapes (some
   square, some wide, some tall) — without a fixed ratio here, the main
   gallery image's height (and WooCommerce's own flex-viewport, which
   caches that height in an inline style via JS) came straight from
   whatever the uploaded photo's dimensions happened to be, so the gallery
   box was a different size on every product page. Forcing a square crop
   makes it the same box everywhere, matching the shop grid's consistent
   4:3 cards (.card-media). Confirmed live: this also makes WooCommerce's
   own gallery JS recompute a matching height instead of using its stale
   cached one, since it measures the image's rendered size. */
.woocommerce-product-gallery__image img{aspect-ratio:4/3; object-fit:cover; width:100%; height:auto;}
.woocommerce-product-gallery{position:relative;}
.pp-gallery-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:36px; height:36px; border-radius:50%; border:none; background:rgba(24,28,34,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease;}
.pp-gallery-nav:hover{background:rgba(24,28,34,.8);}
.pp-gallery-prev{left:12px;}
.pp-gallery-next{right:12px;}
.pp-gallery-prev svg{transform:rotate(180deg);}
.single-product div.product div.images .flex-viewport{height:auto!important;}
.single-product div.product .summary{padding:0;}
.single-product div.product .product_title{font-size:26px; text-transform:none; margin-block:8px 12px;}
.single-product div.product p.price, .single-product div.product span.price{font-family:'IBM Plex Mono'; font-size:26px; font-weight:600; color:var(--ink);}
.single-product div.product p.price del, .single-product div.product span.price del{font-size:15px; color:var(--ink-faint); opacity:1;}
.single-product div.product p.price ins, .single-product div.product span.price ins{text-decoration:none;}
.single-product div.product .woocommerce-product-details__short-description{color:var(--ink-soft); font-size:14px; line-height:1.7; margin-block:14px;}
.single-product div.product form.cart{margin-block:20px 10px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.single-product div.product form.cart .quantity{margin:0;}
.single-product div.product form.cart input.qty{width:64px; padding:10px; border:1px solid var(--border-strong); border-radius:8px; font-family:'IBM Plex Mono';}
.single-product div.product form.cart button.single_add_to_cart_button{background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; font-weight:700; font-size:13.5px; padding:13px 26px; cursor:pointer; letter-spacing:.02em;}
.single-product div.product form.cart button.single_add_to_cart_button:hover{background:var(--accent-deep);}
.single-product div.product .product_meta{font-size:12px; color:var(--ink-faint); border-top:1px solid var(--border); padding-top:14px; margin-top:18px;}
.single-product div.product .product_meta a{color:var(--ink-soft);}
.pp-est-pay{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 16px; font-size:13px; color:var(--ink-soft); margin-block:14px;}

/* ---------- YITH WooCommerce Product Add-Ons (verified live markup:
   #yith-wapo-container > .yith-wapo-block > .yith-wapo-addon, each
   with a select or text input depending on the field type chosen in
   YITH's admin). Selects/text inputs get clean, on-brand styling here;
   switching a field to YITH's "Radio/Button" or "Color" type instead
   of "Select"/"Text" is what unlocks the pill-button / swatch look —
   ask me to style those once you've made that switch on a product. ---------- */
#yith-wapo-container{
  display:flex; flex-direction:column; gap:0; margin-block:14px;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.yith-wapo-block{display:contents;}
.yith-wapo-addon{background:var(--surface); border:none; border-bottom:1px solid var(--border); border-radius:0; padding:10px 14px;}
.yith-wapo-addon:last-of-type{border-bottom:none;}
.yith-wapo-addon .addon-header{margin-bottom:5px;}
.yith-wapo-addon .wapo-addon-title{font-family:'Oswald'; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);}
.yith-wapo-addon select.yith-wapo-option-value,
.yith-wapo-addon input.yith-wapo-option-value[type="text"]{
  width:100%!important; border:1px solid var(--border-strong); border-radius:7px; padding:8px 10px;
  font-size:13px; background:var(--surface); color:var(--ink); font-family:inherit;
}
.yith-wapo-addon .options-container .options{width:100%!important;}
.yith-wapo-addon select.yith-wapo-option-value:focus,
.yith-wapo-addon input.yith-wapo-option-value[type="text"]:focus{outline:2px solid var(--focus); outline-offset:1px;}
.yith-wapo-addon .option-description{font-size:11px; color:var(--ink-faint); margin-top:4px;}

#wapo-total-price-table{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-top:10px;}
#wapo-total-price-table table{width:100%; border-collapse:collapse;}
#wapo-total-price-table th{font-weight:500; color:var(--ink-soft); font-size:12.5px; text-align:left; padding:3px 0;}
#wapo-total-price-table td{font-family:'IBM Plex Mono'; font-weight:600; font-size:13px; text-align:right; padding:3px 0; color:var(--ink);}
#wapo-total-price-table tr.wapo-total-order{border-top:1px solid var(--border-strong);}
#wapo-total-price-table tr.wapo-total-order th, #wapo-total-price-table tr.wapo-total-order td{padding-top:7px; font-size:14px; font-weight:700; color:var(--ink);}
.pp-est-pay strong{color:var(--gold); font-family:'IBM Plex Mono';}
.pp-est-pay a{color:var(--accent); font-weight:700;}
.pd-trust{display:flex; flex-direction:column; gap:9px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);}
.pd-trust div{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft);}
.pd-trust svg{flex:0 0 auto; color:var(--good); margin-top:1px;}
.pd-trust a{color:var(--accent); font-weight:700;}

.woocommerce-tabs{margin-top:44px;}
.woocommerce-tabs ul.tabs{display:flex; gap:22px; border-bottom:1px solid var(--border); margin:0 0 20px; padding:0; list-style:none;}
.woocommerce-tabs ul.tabs li{margin:0;}
.woocommerce-tabs ul.tabs li a{font-family:'Oswald'; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; display:block; padding:12px 0; border-bottom:2px solid transparent;}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink); border-color:var(--accent);}
.woocommerce-tabs .panel{color:var(--ink-soft); font-size:14px; line-height:1.7; max-width:70ch;}
.woocommerce-tabs table.shop_attributes{width:100%; max-width:520px; border-collapse:collapse; font-size:13px;}
.woocommerce-tabs table.shop_attributes tr{border-bottom:1px solid var(--border);}
.woocommerce-tabs table.shop_attributes th, .woocommerce-tabs table.shop_attributes td{padding:9px 4px; font-weight:400;}
.woocommerce-tabs table.shop_attributes th{color:var(--ink-faint); width:40%; text-align:left;}

.related.products, .upsells.products{margin-top:44px;}
.related.products > h2, .upsells.products > h2{font-family:'Oswald'; font-size:20px; margin-bottom:20px;}

.sticky-buy{position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); padding:10px 16px; display:none; align-items:center; justify-content:space-between; gap:12px; z-index:45; box-shadow:0 -6px 18px rgba(0,0,0,.08);}
@media (max-width:640px){ .sticky-buy.show{display:flex;} }
.sticky-buy strong{font-family:'IBM Plex Mono'; font-size:16px;}

/* ---------- cart page (real WooCommerce markup) ---------- */
.woocommerce-cart .cart-collaterals, .woocommerce-cart form.woocommerce-cart-form{margin-bottom:20px;}
table.shop_table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
table.shop_table th{background:var(--surface-2); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); text-align:left; padding:12px;}
table.shop_table td{padding:14px 12px; border-top:1px solid var(--border); font-size:13.5px;}
table.shop_table td.product-thumbnail img{width:64px; border-radius:8px;}
table.shop_table td.product-remove a{color:var(--ink-faint); font-size:18px; text-decoration:none;}
table.shop_table .quantity input.qty{width:56px; padding:8px; border:1px solid var(--border-strong); border-radius:6px;}
.cart_totals{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-top:20px; max-width:420px; margin-left:auto;}
.cart_totals h2{font-size:15px; margin-bottom:14px;}
.cart_totals table{width:100%; border-collapse:collapse;}
.cart_totals table th, .cart_totals table td{padding:9px 0; border-top:1px solid var(--border); font-size:13px;}
.cart_totals .order-total td, .cart_totals .order-total th{font-weight:700; font-size:15px;}
.wc-proceed-to-checkout a.checkout-button{display:block; text-align:center; background:var(--accent); color:var(--accent-ink); border-radius:8px; font-weight:700; padding:13px; text-decoration:none; margin-top:14px;}
.wc-proceed-to-checkout a.checkout-button:hover{background:var(--accent-deep);}
.woocommerce-cart-form .coupon{display:flex; gap:8px; align-items:center;}
.woocommerce-cart-form .coupon input#coupon_code{border:1px solid var(--border-strong); border-radius:8px; padding:10px 12px;}
.woocommerce-cart-form .coupon button{background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:10px 16px; cursor:pointer; font-weight:600;}
button[name="update_cart"]{background:var(--navy); color:#fff; border:none; border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer;}
.pp-fin-cart-cta{display:block; text-align:center; background:var(--gold); color:#211603; border-radius:8px; font-weight:700; padding:12px; text-decoration:none; margin-top:10px;}

/* ---------- checkout ---------- */
.woocommerce-checkout #customer_details{max-width:640px;}
.woocommerce-checkout .form-row{margin-bottom:14px;}
.woocommerce-checkout .form-row label{display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--ink-soft);}
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{width:100%; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:8px; padding:11px 12px; font-size:13.5px;}
#order_review{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-top:24px;}
#order_review table.shop_table{border:none;}
.wc_payment_methods{list-style:none; margin:0; padding:0;}
.wc_payment_methods li{border:1px solid var(--border-strong); border-radius:10px; padding:14px; margin-bottom:10px;}
#place_order{background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; font-weight:700; font-size:14px; padding:15px 24px; cursor:pointer; width:100%;}
#place_order:hover{background:var(--accent-deep);}

/* ---------- cart/checkout step pill (page-cart.php / page-checkout.php) ---------- */
.pp-steps{display:flex; align-items:center; gap:10px; justify-content:center; padding-block:8px 28px; flex-wrap:wrap;}
.pp-steps-lock{color:var(--ink-faint); margin-right:2px;}
.pp-step{padding:12px 24px; border-radius:999px; border:1px solid var(--border-strong); font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--ink-faint); background:var(--surface);}
.pp-step.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.pp-step.done{color:var(--good); border-color:var(--good);}
.pp-step-arrow{color:var(--ink-faint); font-size:16px;}

/* ---------- classic cart/checkout polish (see the "cart page (real
   WooCommerce markup)" and "checkout" rules above — these extend them
   to match the reference layout more closely) ---------- */
.cart_totals h2, #order_review h3, .wc-proceed-to-checkout{text-transform:uppercase; letter-spacing:.04em; font-size:13px;}
table.shop_table th{text-transform:uppercase; letter-spacing:.05em;}
.woocommerce-cart-form table.shop_table td.product-name a{color:var(--ink); font-weight:600; text-decoration:none;}
.woocommerce-cart-form table.shop_table td.product-name a:hover{color:var(--accent);}
.woocommerce-cart-form table.shop_table td.product-name dl.variation, .woocommerce-cart-form table.shop_table td.product-name .wc-item-meta{font-size:12px; color:var(--ink-faint); margin-top:4px;}
.woocommerce-cart-form table.shop_table td.product-name dl.variation dt, .wc-item-meta .wc-item-meta-label{font-weight:700; color:var(--ink-soft); display:inline;}
.woocommerce-cart-form table.shop_table td.product-name dl.variation dd{display:inline; margin:0;}
#payment .payment_methods{list-style:none; margin:0; padding:0;}
#payment .payment_methods li{border:1px solid var(--border-strong); border-radius:10px; padding:14px; margin-bottom:10px;}
#payment .payment_methods li img{max-height:24px; vertical-align:middle; margin-left:8px;}

/* ---------- cart & checkout BLOCKS (this store's Cart/Checkout pages
   use the WooCommerce block editor, not the classic shortcode templates
   the rules above target — different markup entirely, so it needs its
   own selectors here rather than being reachable via the classic ones). ---------- */
/* page-cart.php / page-checkout.php already wrap this block in a `.wrap`
   div with its own side padding — this rule was adding a SECOND layer of
   side padding on top of that, needlessly narrowing the whole cart/
   checkout column (confirmed live: only 303px of a 375px phone screen
   was left for content). Center/cap width only; no padding of its own. */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{max-width:1240px; margin-inline:auto;}
.wc-block-components-sidebar-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:32px; align-items:start;}
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar{width:auto; max-width:none; flex:none;}
@media (max-width:860px){ .wc-block-components-sidebar-layout{grid-template-columns:1fr;} }

.wc-block-components-product-name{font-weight:600; color:var(--ink); text-decoration:none; font-size:13.5px;}
a.wc-block-components-product-name:hover{color:var(--accent);}
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img{border-radius:8px;}
.wc-block-cart-items{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden;}
.wc-block-cart-items__header{background:var(--surface-2); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
.wc-block-cart-items__row{border-top:1px solid var(--border); padding-block:16px;}
.wc-block-cart-items__header, .wc-block-cart-items__row{padding-inline:16px;}

.wc-block-components-quantity-selector{border:1px solid var(--border-strong); border-radius:8px; overflow:hidden;}
.wc-block-components-quantity-selector__button{color:var(--ink-soft);}
.wc-block-components-quantity-selector__input{font-family:'IBM Plex Mono'; color:var(--ink);}

.wc-block-components-totals-item, .wc-block-components-totals-footer-item{font-size:13px; color:var(--ink-soft);}
.wc-block-components-totals-footer-item{font-weight:700; font-size:15px; color:var(--ink);}
.wc-block-components-totals-wrapper{border-top:1px solid var(--border);}
/* The coupon-form block is the FIRST wrapper inside the totals card, so
   the divider above meant to separate it from the line items just floats
   under empty top padding instead — drop it there and let the card's
   own top edge be the top of the content. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block.wc-block-components-totals-wrapper{border-top:none;}
/* Checkout's collapsed "Order summary" panel ships its own border-top +
   top margin on the title row (meant to sit below notices/messages) —
   with no notices present it reads as a stray divider floating in dead
   space at the top of the card, so remove it there too. */
.wc-block-components-checkout-order-summary__title{border-top:none!important; margin-top:0!important;}
.wc-block-components-panel, .wc-block-components-totals-coupon-link{color:var(--accent); font-weight:600;}

.wc-block-components-sidebar{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.wc-block-components-sidebar .wc-block-cart__totals-title, .wc-block-components-order-summary .wc-block-components-panel__button{font-family:'Oswald'; font-size:15px; text-transform:uppercase;}

/* Checkout duplicates "Order summary" below 700px wide (confirmed live):
   its own collapsible sidebar card up top, AND a second full summary
   WooCommerce injects into the form itself right above Place Order —
   the sidebar only ever holds that one summary block on this page (no
   payment/place-order controls in it), so hide it there and keep the
   one by the button, which is the more useful spot right before paying. */
@media (max-width:700px){
  .woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar{display:none;}
}

/* Order-summary item name: give it room to wrap normally instead of
   being squeezed by the image/quantity badge in the same flex row. */
.wc-block-components-order-summary-item{align-items:flex-start;}
.wc-block-components-order-summary-item__description{flex:1 1 auto; min-width:0; overflow-wrap:break-word; word-break:normal;}
.wc-block-components-order-summary-item__image{flex:0 0 auto;}

/* Cart line-item row on narrow screens: WooCommerce's own "is-mobile"
   layout (a container-query-driven state, not a viewport media query)
   places the Total cell via CSS grid auto-placement with no track
   defined to hold it, which pushes it into an unconstrained implicit
   column and overflows the row past the viewport (confirmed live —
   the row's right edge sat ~18px past the page on a 375px screen).
   Give the row an explicit 2-column x 2-row layout instead: image+name
   on row 1, quantity+total on row 2, so nothing needs an implicit track. */
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
.is-small table.wc-block-cart-items .wc-block-cart-items__row{
  grid-template-columns:80px 1fr!important;
}
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{
  grid-column:2!important;
}
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
  grid-column:1!important; grid-row-start:2!important;
}
.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{
  grid-column:2!important; grid-row-start:2!important;
  display:flex!important; justify-content:flex-end!important; align-items:flex-end!important;
}
.wc-block-cart-item__product, .wc-block-cart-item__total{min-width:0!important;}

/* The floating "Get Pre-Approved" pill is a purchase-adjacent nudge —
   on Cart/Checkout it has nothing to add (financing is decided before
   checkout) and it was overlapping form fields and the totals card at
   narrow widths, so hide it on both pages entirely. */
.woocommerce-cart .float-fin, .woocommerce-checkout .float-fin{display:none;}

.wc-block-components-button, .wp-element-button{background:var(--accent)!important; color:var(--accent-ink)!important; border-radius:8px!important; font-weight:700!important; text-transform:none!important; border:none!important;}
.wc-block-components-button:hover, .wp-element-button:hover{background:var(--accent-deep)!important;}
.wc-block-components-button.wp-block-woocommerce-cart-cross-sells-block, .wc-block-cart__submit-container{margin-top:14px;}

.wc-block-components-text-input input, .wc-block-components-address-form input, .wc-block-checkout__form input[type=text], .wc-block-checkout__form input[type=email], .wc-block-checkout__form input[type=tel]{
  border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13.5px;
}
.wc-block-components-text-input label{color:var(--ink-faint);}
.wc-block-components-radio-control__option{border:1px solid var(--border-strong); border-radius:10px; margin-bottom:8px; padding:12px;}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked{border-color:var(--accent); background:var(--surface-2);}
.wc-block-components-radio-control-accordion-option{border-radius:10px;}

.wc-block-components-order-summary-item__description, .wc-block-components-order-summary-item__individual-prices{font-size:12px; color:var(--ink-faint);}
.wc-block-components-product-metadata{font-size:11.5px; color:var(--ink-faint);}

/* ---------- forms (generic — contact / financing / track order) ---------- */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--ink-soft);}
.field input, .field select, .field textarea{width:100%; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:8px; padding:11px 12px; font-size:13.5px; font-family:inherit;}
.wpcf7-form .wpcf7-form-control-wrap{display:block; margin-bottom:14px;}
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea{width:100%; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:8px; padding:11px 12px; font-size:13.5px;}
.wpcf7-form input[type=submit]{background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; font-weight:700; padding:11px 20px; cursor:pointer;}

/* ---------- track order ---------- */
.track-form{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:28px;}
.track-form .field{flex:1; min-width:200px; margin-bottom:0;}
.track-steps{display:flex; margin:28px 0 6px;}
.track-step{flex:1; text-align:center; position:relative;}
.track-step .dot{width:16px;height:16px;border-radius:999px;background:var(--surface-2);border:2px solid var(--border-strong); margin:0 auto 8px; position:relative; z-index:1;}
.track-step.done .dot{background:var(--good); border-color:var(--good);}
.track-step.active .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--gold-soft);}
.track-step .line{position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--border-strong); z-index:0;}
.track-step:first-child .line{display:none;}
.track-step.done .line{background:var(--good);}
.track-step span{font-size:11px; font-weight:600; color:var(--ink-faint);}
.track-step.done span, .track-step.active span{color:var(--ink);}
.track-result{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;}
.track-hint{font-size:12px; color:var(--ink-faint); margin-top:-16px; margin-bottom:28px;}
.order-summary{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:18px; font-size:13px;}
.order-summary .row{display:flex; justify-content:space-between; padding:5px 0;}
.order-summary .row.total{border-top:1px solid var(--border-strong); margin-top:6px; padding-top:10px; font-weight:700; font-size:15px;}

/* ---------- about / contact ---------- */
.page-hero{background:var(--navy); color:var(--navy-ink); padding-block:44px;}
.page-hero h1{color:#fff; font-size:34px;}
.page-hero p{color:#b9bec9; max-width:60ch; margin-top:10px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-block:0 40px;}
@media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center;}
.stat-card b{display:block; font-family:'Oswald'; font-size:28px; color:var(--accent);}
.stat-card span{font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .svc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px;}
.svc-card .cat-icon{margin-bottom:12px;}
.svc-card h4{font-size:14.5px; margin-bottom:6px;}
.svc-card p{color:var(--ink-soft); font-size:13px; line-height:1.55;}

.contact-layout{display:grid; grid-template-columns:.8fr 1.2fr; gap:36px; align-items:start;}
@media (max-width:860px){ .contact-layout{grid-template-columns:1fr;} }
.info-card{display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--border);}
.info-card svg{color:var(--accent); flex:0 0 auto; margin-top:2px;}
.info-card b{display:block; font-size:13px; margin-bottom:3px;}
.info-card span{color:var(--ink-soft); font-size:13px;}
.map-box{aspect-ratio:16/9; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--border); overflow:hidden; margin-top:20px;}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:13px 20px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:80; display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}
.toast svg{color:var(--good);}

/* ---------- footer ---------- */
footer{background:var(--navy); color:var(--navy-ink); margin-top:20px;}
footer .wrap{padding-block:44px 28px; display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:32px;}
@media (max-width:820px){ footer .wrap{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ footer .wrap{grid-template-columns:1fr;} }
footer h4{font-size:12px; color:#8b94a3; margin-bottom:14px; letter-spacing:.08em;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
footer a{text-decoration:none; color:#d7dae1; font-size:13px;}
footer a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:16px; font-size:12px; color:#8b94a3;}
.foot-bottom .wrap{display:flex; justify-content:space-between; width:100%; flex-wrap:wrap; gap:8px; padding-block:0;}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important;} }