/*
Theme Name: Northbound Custom Drums
Theme URI: https://ncdrums.com
Author: Northbound Custom Drums
Description: Custom theme for Northbound Custom Drums — dark, type-led, with a 3D kit
  builder and scroll-driven motion. Includes WooCommerce styling so the shop, cart,
  checkout and account pages match the rest of the site.
Version: 1.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: northbound
*/

/* ==========================================================
   Northbound Custom Drums — ncdrums.com
   Shared stylesheet. Plain CSS, no build step.
   Brand colour lives in one place: --blue
   ========================================================== */

:root{
  --ink:      #0B0B0C;   /* page */
  --panel:    #151517;   /* raised surface */
  --panel-2:  #1C1C20;   /* deeper surface */
  --line:     #2A2A2E;   /* hairlines */
  --white:    #FFFFFF;
  --mute:     #9A9CA3;   /* secondary text */
  --blue:     #2E6BFF;   /* ACCENT */
  --blue-dim: #1B47B0;
  --blue-glow: rgba(46,107,255,.16);

  --rail: 1180px;
  --gut: clamp(20px, 4.4vw, 60px);
  --head-h: 66px;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
::selection{ background: var(--blue); color: var(--white); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.rail{ width:100%; max-width: var(--rail); margin-inline:auto; padding-inline: var(--gut); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================
   SCROLL ENGINE — every animated element carries --p (0→1)
   Default is 1 so the page is fully readable without JS.
   ========================================================== */

[data-scroll]{ --p: 1; }

.fx-rise    { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 30px)); }
.fx-rise-sm { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 14px)); }
.fx-rule    { transform: scaleX(var(--p)); transform-origin:left center; }
.fx-para    { transform: translateY(calc((var(--p) - .5) * -70px)); }
.fx-grow    { opacity: var(--p); transform: scale(calc(.955 + var(--p) * .045)); }
.fx-fade    { opacity: var(--p); }
.fx-blur    { opacity: var(--p); filter: blur(calc((1 - var(--p)) * 6px)); }

/* headline lines that lift into place */
.wipe{ display:block; overflow:hidden; padding-bottom:.05em; }
.wipe > i{ display:block; font-style:normal; transform: translateY(calc((1 - var(--p)) * 106%)); }

/* words that light up one after another as you scroll */
.fx-words{ --n: 10; }
.fx-words w{
  display:inline-block;
  opacity: clamp(0, calc((var(--p) * (var(--n) + 5)) - var(--i, 0)), 1);
  transition: opacity .06s linear;
}

@media (prefers-reduced-motion: reduce){
  [data-scroll]{ --p: 1 !important; }
  .fx-words w{ opacity:1; }
}

/* reading progress */
.progress{ position:fixed; top: env(safe-area-inset-top, 0px); left:0; right:0;
           height:2px; z-index:90; pointer-events:none; }
.progress i{ display:block; height:100%; width:0%; background: var(--blue); }

/* ==========================================================
   TYPE
   ========================================================== */

h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.024em; line-height:1.03; text-wrap:balance; }
.h2{ font-size: clamp(27px, 3.5vw, 44px); letter-spacing:-.028em; }
.h3{ font-size: clamp(19px, 2.1vw, 25px); letter-spacing:-.02em; }

p{ margin:0; }
.body{ color: var(--mute); font-size: clamp(16px,1.25vw,18px); max-width:62ch; }
.body.lg{ font-size: clamp(18px,1.6vw,22px); line-height:1.5; color: var(--white); max-width:52ch; }
.stack > * + *{ margin-top:18px; }

.tag{ font-family: var(--mono); font-size:12px; color: var(--mute); }
.tag.blue{ color: var(--blue); }
.rule{ height:1px; background: var(--line); border:0; margin:0; }

/* ==========================================================
   LINKS + BUTTONS
   ========================================================== */

.link{
  display:inline-flex; align-items:baseline; gap:.45em;
  text-decoration:none; font-weight:600; font-size:16px;
  padding-bottom:3px; border-bottom:1.5px solid var(--white);
  transition: color .2s ease, border-color .2s ease, gap .25s cubic-bezier(.2,.8,.3,1);
}
.link:hover{ color: var(--blue); border-color: var(--blue); gap:.8em; }
.link.blue{ color: var(--blue); border-color: var(--blue); }
.link.blue:hover{ color: var(--white); border-color: var(--white); }
.link.quiet{ border-color: var(--line); font-weight:500; color: var(--mute); }
.link.quiet:hover{ color: var(--blue); border-color: var(--blue); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background: var(--blue); color: var(--white);
  padding:14px 22px; font-weight:600; font-size:15px;
  text-decoration:none; border:1px solid var(--blue); cursor:pointer;
  font-family: var(--sans);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{ background: var(--blue-dim); border-color: var(--blue-dim); }
.btn:active{ transform: translateY(1px); }
.btn.inv{ background:transparent; color: var(--white); border-color: var(--line); }
.btn.inv:hover{ border-color: var(--white); background: var(--panel); }
.btn.sm{ padding:10px 16px; font-size:14px; }

/* ==========================================================
   HEADER
   ========================================================== */

.site-head{
  position:sticky; top: env(safe-area-inset-top, 0px); z-index:70;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid transparent;
  transition: border-color .25s ease;
}
.site-head.stuck{ border-bottom-color: var(--line); }

.head-in{ display:flex; align-items:center; gap:16px; height: var(--head-h); }

.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.logo svg{ width:20px; height:20px; flex:none; }
.logo b{ font-weight:700; font-size:15px; letter-spacing:-.02em; }
.logo span{ color: var(--mute); font-weight:500; font-size:15px; letter-spacing:-.02em; }

.menu{ display:flex; gap:20px; list-style:none; margin:0; padding:0; align-items:center; }
.menu a{
  text-decoration:none; font-size:15px; font-weight:500; color: var(--mute);
  padding-block:4px; position:relative; transition: color .2s ease;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background: var(--blue); transform: scaleX(0); transform-origin:left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.menu a:hover{ color: var(--white); }
.menu a:hover::after{ transform: scaleX(1); }
.menu a[aria-current="page"]{ color: var(--white); font-weight:600; }
.menu a[aria-current="page"]::after{ transform: scaleX(1); }

.head-actions{ display:flex; align-items:center; gap:10px; }
.cart-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid var(--line); padding:8px 14px;
  transition: border-color .2s ease, color .2s ease;
}
.cart-link:hover{ border-color: var(--blue); color: var(--blue); }

.burger{
  display:none; background:none; border:1px solid var(--line);
  padding:8px 14px; font-family: var(--mono); font-size:13px;
  color: var(--white); cursor:pointer;
}

@media (max-width: 1000px){
  .menu, .cart-link{ display:none; }
  .burger{ display:block; }
  .site-head.open .menu{
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    position:absolute; left:0; right:0; top:100%;
    background: var(--ink); border-bottom:1px solid var(--line);
    padding: 6px var(--gut) 18px;
  }
  .site-head.open .menu a{ display:block; padding-block:13px; font-size:18px; color: var(--white);
                           border-bottom:1px solid var(--line); }
  .site-head.open .menu a::after{ display:none; }
  .site-head.open .cart-link{ display:inline-flex; align-self:flex-start; margin-top:16px; }
}

/* dims the page behind the open mobile menu, and closes it when clicked */
.scrim{
  position:fixed; inset:0; z-index:65;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}
.scrim.on{ opacity:1; pointer-events:auto; }

/* ==========================================================
   SECTIONS
   ========================================================== */

.sec{ padding-block: clamp(62px, 8vw, 112px); }
.sec.tight{ padding-block: clamp(42px, 5.2vw, 70px); }
.sec.bordered{ border-top:1px solid var(--line); }
.sec.panel{ background: var(--panel); border-block:1px solid var(--line); }

.lede-grid{ display:grid; grid-template-columns: minmax(0,.78fr) minmax(0,1fr);
            gap: clamp(22px,5vw,76px); align-items:start; }
@media (max-width:800px){ .lede-grid{ grid-template-columns:1fr; gap:20px; } }

.pin-grid{ display:grid; grid-template-columns:210px minmax(0,1fr); gap: clamp(24px,4vw,64px); align-items:start; }
@media (max-width:880px){ .pin-grid{ grid-template-columns:1fr; gap:18px; } }
.pin-label{ position:sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head-h) + 30px); }
@media (max-width:880px){ .pin-label{ position:static; } }
.pin-label .tag{ display:block; padding-bottom:10px; border-bottom:1px solid var(--line); }

/* ==========================================================
   HERO
   ========================================================== */

.hero{ padding-top: clamp(44px,6.5vw,88px); padding-bottom: clamp(30px,4vw,52px); position:relative; }
.hero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:150%;
  background: radial-gradient(48% 46% at 18% 24%, var(--blue-glow), transparent 70%);
  pointer-events:none;
}
.hero .rail{ position:relative; }
.hero h1{ font-size: clamp(38px,8.4vw,116px); letter-spacing:-.042em; line-height:.93; }
.hero h1 em{ font-style:normal; color: var(--blue); }
.hero-sub{ margin-top: clamp(20px,2.6vw,32px); }

.hero-foot{
  display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center;
  margin-top: clamp(26px,3.2vw,42px); padding-top:18px; border-top:1px solid var(--line);
}
.hero-foot .tag{ display:flex; gap:9px; align-items:center; }
.hero-foot .tag::before{ content:""; width:5px; height:5px; background: var(--blue); flex:none; }

/* ==========================================================
   SCROLL-SCRUBBED CANVAS
   ========================================================== */

.scrub{ background: var(--panel); border-block:1px solid var(--line); }
.scrub-track{ height: 460vh; position:relative; }
@media (max-width:800px){ .scrub-track{ height: 340vh; } }

.scrub-stage{
  position:sticky; top:0; height:100svh; min-height:540px;
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
}
.scrub-head{ padding-top: clamp(76px,9vh,100px); }
.scrub-head h2{ max-width:15ch; }
.scrub-head p{ margin-top:10px; max-width:46ch; }

.scrub-canvas-wrap{ position:relative; min-height:0; }
#kit, .drum-canvas, #builder{ width:100%; height:100%; display:block; }

.scrub-read{
  padding-bottom: clamp(24px,3.5vh,42px);
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap:16px 28px; align-items:end;
  border-top:1px solid var(--line); padding-top:14px;
}
.scrub-read .now{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.scrub-read .now b{ font-size: clamp(21px,3vw,33px); font-weight:700; letter-spacing:-.028em; }
.scrub-read .now .sp{ font-family: var(--mono); font-size:14px; color: var(--blue); }
.scrub-read .cnt{ font-family: var(--mono); font-size:13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.meter{ grid-column:1/-1; height:2px; background: var(--line); position:relative; }
.meter i{ position:absolute; inset:0 auto 0 0; width:0%; background: var(--blue); display:block; }
@media (max-width:700px){ .scrub-read{ grid-template-columns:1fr; } }

.drum-box{ aspect-ratio:1/1; max-width:420px; width:100%; margin-inline:auto; }

/* ==========================================================
   HORIZONTAL BAND
   ========================================================== */

.hband{ overflow:hidden; border-block:1px solid var(--line); background: var(--panel); }
.hband-track{ display:flex; width:max-content; transform: translateX(calc(var(--p) * -42%)); }
.hband-item{
  padding: clamp(26px,3.4vw,44px) clamp(24px,3vw,42px);
  border-right:1px solid var(--line); min-width: min(74vw, 340px);
}
.hband-item .n{ font-family: var(--mono); font-size:12px; color: var(--blue); }
.hband-item h3{ margin:12px 0 8px; }
.hband-item p{ color: var(--mute); font-size:15px; }

/* ==========================================================
   SPEC TABLE
   ========================================================== */

.spec{ width:100%; border-collapse:collapse; }
.spec th,.spec td{ text-align:left; padding:15px 16px 15px 0; border-top:1px solid var(--line);
                   vertical-align:top; font-size:16px; }
.spec th{ font-family: var(--mono); font-weight:400; font-size:13px; color: var(--mute); width:34%; }
.spec td{ font-weight:500; }
.spec td small{ display:block; color: var(--mute); font-weight:400; font-size:14px; margin-top:3px; }
.spec tr:last-child th,.spec tr:last-child td{ border-bottom:1px solid var(--line); }
@media (max-width:560px){ .spec th{ width:42%; font-size:12px; } .spec th,.spec td{ font-size:15px; } }

/* ==========================================================
   COLUMNS
   ========================================================== */

.cols{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3.2vw,44px);
       margin-top: clamp(28px,3.6vw,48px); }
.cols.four{ grid-template-columns: repeat(4,minmax(0,1fr)); }
.cols.two{ grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width:980px){ .cols.four{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .cols,.cols.four,.cols.two{ grid-template-columns:1fr; gap:0; } }

.col{ border-top:2px solid var(--blue); padding-top:16px; }
@media (max-width:860px){
  .col{ border-top:1px solid var(--line); padding-block:22px 24px; }
  .col:first-child{ border-top:2px solid var(--blue); }
}
.col h3{ margin-bottom:9px; }
.col .status{ font-family: var(--mono); font-size:12px; color: var(--mute); display:block; margin-bottom:11px; }
.col .status.on{ color: var(--blue); }
.col p{ color: var(--mute); font-size:16px; }
.col .link{ margin-top:15px; }

/* ==========================================================
   STICKY STACKING CARDS
   ========================================================== */

.stack-cards{ margin-top: clamp(26px,3.4vw,44px); }
.scard{
  position:sticky; background: var(--panel); border:1px solid var(--line);
  padding: clamp(22px,3vw,38px);
  display:grid; grid-template-columns:74px minmax(0,1fr); gap: clamp(14px,2.4vw,32px);
  margin-bottom:16px;
}
.scard:nth-child(1){ top: calc(var(--head-h) + 26px); }
.scard:nth-child(2){ top: calc(var(--head-h) + 46px); }
.scard:nth-child(3){ top: calc(var(--head-h) + 66px); }
.scard:nth-child(4){ top: calc(var(--head-h) + 86px); }
@media (max-width:700px){ .scard{ grid-template-columns:1fr; gap:10px; position:static; } }
.scard .n{ font-family: var(--mono); font-size:13px; color: var(--blue); }
.scard h3{ margin-bottom:8px; }
.scard p{ color: var(--mute); font-size:16px; max-width:56ch; }

/* ==========================================================
   CUSTOMIZER
   ========================================================== */

.builder{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,420px);
  gap: clamp(20px,3vw,44px); align-items:start;
}
@media (max-width: 980px){ .builder{ grid-template-columns:1fr; } }

.builder-stage{
  background: var(--panel); border:1px solid var(--line);
  position:sticky; top: calc(var(--head-h) + 20px);
  aspect-ratio: 4/3; min-height:340px; position:relative;
}
@media (max-width:980px){ .builder-stage{ position:static; aspect-ratio:4/3; } }
.builder-stage .hint{
  position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-family: var(--mono); font-size:11px; color: var(--mute); pointer-events:none;
}
#builder{ cursor: grab; touch-action: pan-y; }
#builder:active{ cursor: grabbing; }

.opts{ display:grid; gap:22px; }
.opt h3{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; }
.opt .hintline{ font-family: var(--mono); font-size:11px; color: var(--mute); margin-bottom:10px; }

.choices{ display:flex; flex-wrap:wrap; gap:8px; }
.choice{
  font-family: var(--sans); font-size:14px; font-weight:500;
  background: var(--panel); color: var(--mute);
  border:1px solid var(--line); padding:9px 14px; cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.choice:hover{ color: var(--white); border-color: var(--mute); }
.choice[aria-pressed="true"]{ background: var(--blue); border-color: var(--blue); color: var(--white); }

.swatches{ display:flex; flex-wrap:wrap; gap:10px; }
.swatch{
  width:52px; height:52px; padding:0; cursor:pointer;
  border:1px solid var(--line); background: var(--panel);
  position:relative; transition: border-color .2s ease, transform .2s ease;
}
.swatch:hover{ transform: translateY(-2px); border-color: var(--mute); }
.swatch[aria-pressed="true"]{ border-color: var(--blue); box-shadow:0 0 0 2px var(--blue); }
.swatch i{ position:absolute; inset:5px; display:block; }

.build-out{ border:1px solid var(--line); margin-top:4px; }
.build-out h3{ font-size:15px; padding:16px 18px 0; }
.build-out .spec{ padding:0 18px; width:auto; }
.build-out .spec th,.build-out .spec td{ font-size:15px; padding:12px 12px 12px 0; }
.build-out .foot{ padding:16px 18px; border-top:1px solid var(--line); display:grid; gap:10px; }
.build-out .foot .tag{ line-height:1.5; }

/* ==========================================================
   SHOP
   ========================================================== */

.products{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,250px),1fr));
           gap:1px; background: var(--line); border:1px solid var(--line);
           margin-top: clamp(26px,3.4vw,46px); }
.pcard{ background: var(--ink); padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px;
        text-decoration:none; transition: background .3s ease; min-height:300px; }
.pcard:hover{ background: var(--panel); }
.pcard .thumb{ aspect-ratio:4/3; width:100%; display:flex; align-items:center; justify-content:center;
               border:1px solid var(--line); background: var(--panel); color: var(--mute); }
.pcard:hover .thumb{ color: var(--blue); }
.pcard .thumb svg{ width:72%; height:72%; }
.pcard .cat{ font-family: var(--mono); font-size:11px; color: var(--mute); }
.pcard h3{ font-size:18px; letter-spacing:-.02em; }
.pcard .row{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pcard .price{ font-weight:700; font-size:18px; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.pcard .go{ font-size:14px; font-weight:600; color: var(--blue); }
.pcard.soon{ opacity:.66; }
.pcard.soon .price{ color: var(--mute); font-weight:500; font-size:15px; }

.shop-note{ display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center;
            border:1px solid var(--line); padding:16px 18px; margin-top:26px; }
.shop-note .tag{ flex:1 1 260px; }

/* ==========================================================
   ACCENT BAND
   ========================================================== */

.band-blue{ background: var(--blue); color: var(--white); }
.band-blue .body{ color: rgba(255,255,255,.82); }
.band-blue .link{ border-color: var(--white); }
.band-blue .link:hover{ color: var(--ink); border-color: var(--ink); }
.band-blue .tag{ color: rgba(255,255,255,.75); }
.band-blue .btn{ background: var(--white); color: var(--blue); border-color: var(--white); }
.band-blue .btn:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }

.band-panel{ background: var(--panel); border-block:1px solid var(--line); }

.quote{ font-size: clamp(23px,3.5vw,45px); font-weight:700; letter-spacing:-.03em; line-height:1.08; max-width:20ch; }

/* ==========================================================
   EVENT
   ========================================================== */

.count-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:1px;
             background: var(--line); border:1px solid var(--line); margin-top: clamp(24px,3vw,40px); }
.count-cell{ background: var(--ink); padding: clamp(16px,2.4vw,26px); text-align:center; }
.count-cell b{ display:block; font-size: clamp(28px,5vw,58px); font-weight:700; letter-spacing:-.04em;
               line-height:1; font-variant-numeric: tabular-nums; }
.count-cell span{ display:block; margin-top:7px; font-family: var(--mono); font-size:11px; color: var(--mute); }

.nights{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,2.6vw,32px);
         margin-top: clamp(26px,3.4vw,44px); }
@media (max-width:760px){ .nights{ grid-template-columns:1fr; } }
.night{ border:1px solid var(--line); padding: clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:12px;
        background: var(--panel); }
.night .n{ font-family: var(--mono); font-size:12px; color: var(--blue); }
.night .when{ font-size: clamp(20px,2.6vw,30px); font-weight:700; letter-spacing:-.03em; }
.night .btn{ margin-top:auto; align-self:flex-start; }

.runsheet{ list-style:none; margin: clamp(22px,3vw,36px) 0 0; padding:0; }
.runsheet li{ display:flex; gap:18px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line); }
.runsheet li:last-child{ border-bottom:1px solid var(--line); }
.runsheet .k{ font-family: var(--mono); font-size:12px; color: var(--blue); flex:none; width:40px; }
.runsheet .v{ font-size:17px; font-weight:500; }
.runsheet .v small{ display:block; font-weight:400; color: var(--mute); font-size:15px; margin-top:2px; }

/* ==========================================================
   EDITORIAL
   ========================================================== */

.feature{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); gap: clamp(24px,5vw,70px); align-items:start; }
.feature.flip{ grid-template-columns: minmax(0,.72fr) minmax(0,1fr); }
@media (max-width:860px){ .feature,.feature.flip{ grid-template-columns:1fr; } }

.aside-list{ list-style:none; margin:0; padding:0; }
.aside-list li{ border-top:1px solid var(--line); }
.aside-list li:last-child{ border-bottom:1px solid var(--line); }
.aside-list a,.aside-list span{ display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:14px 0; text-decoration:none; font-weight:500; font-size:16px; transition: color .2s ease; }
.aside-list a:hover{ color: var(--blue); }
.aside-list em{ font-style:normal; font-family: var(--mono); font-size:13px; color: var(--mute); }

.drop::first-letter{ float:left; font-size:3.1em; line-height:.83; font-weight:700; padding:.06em .09em 0 0; color: var(--blue); }

.mvv{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(20px,3vw,44px); margin-top: clamp(26px,3.4vw,44px); }
@media (max-width:860px){ .mvv{ grid-template-columns:1fr; gap:0; } }
.mvv > div{ border-top:2px solid var(--blue); padding-top:16px; }
@media (max-width:860px){ .mvv > div{ border-top:1px solid var(--line); padding-block:20px 22px; }
                          .mvv > div:first-child{ border-top:2px solid var(--blue); } }
.mvv h3{ margin-bottom:10px; }
.mvv p{ color: var(--mute); font-size:16px; }

/* ==========================================================
   SITEMAP
   ========================================================== */

.map-group{ margin-top: clamp(30px,4vw,54px); }
.map-group > .n{ font-family: var(--mono); font-size:12px; color: var(--blue); display:block; margin-bottom:6px; }
.map-group > h2{ margin-bottom:18px; }
.map-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.map-list li{ border-bottom:1px solid var(--line); }
.map-list a{
  display:grid; grid-template-columns: minmax(0,260px) minmax(0,1fr) auto;
  gap:14px 24px; align-items:baseline; padding:18px 0; text-decoration:none;
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.8,.3,1);
}
.map-list a:hover{ color: var(--blue); padding-left:10px; }
.map-list b{ font-size:19px; font-weight:600; letter-spacing:-.02em; }
.map-list span{ color: var(--mute); font-size:15px; }
.map-list em{ font-style:normal; font-family: var(--mono); font-size:12px; color: var(--mute); }
.map-list a:hover em{ color: var(--blue); }
@media (max-width:760px){
  .map-list a{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
  .map-list em{ display:none; }
}

/* ==========================================================
   FORM
   ========================================================== */

.form{ display:grid; gap:16px; background: var(--panel); border:1px solid var(--line); padding: clamp(20px,3vw,32px); }
.form.bare{ background:transparent; border:0; padding:0; }
.form label{ display:block; }
.form .lbl{ display:block; font-family: var(--mono); font-size:12px; color: var(--mute); margin-bottom:6px; }
.form input,.form select,.form textarea{
  width:100%; background: var(--ink); border:1px solid var(--line);
  padding:12px 14px; font-family: var(--sans); font-size:16px; color: var(--white);
  border-radius:0; transition: border-color .2s ease;
}
.form textarea{ min-height:112px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color: var(--blue); }
.form .note{ font-family: var(--mono); font-size:12px; color: var(--mute); }
.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form .two{ grid-template-columns:1fr; } }

.mailto{ font-size: clamp(21px,3.2vw,40px); font-weight:700; letter-spacing:-.03em;
         text-decoration:none; border-bottom:2px solid var(--line); padding-bottom:4px;
         display:inline-block; word-break:break-word; transition: border-color .25s ease, color .25s ease; }
.mailto:hover{ color: var(--blue); border-color: var(--blue); }

/* ==========================================================
   LONG-FORM
   ========================================================== */

.prose{ max-width:68ch; }
.prose h2{ font-size: clamp(21px,2.4vw,28px); margin:38px 0 12px; letter-spacing:-.024em; }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color: var(--mute); font-size:17px; }
.prose p + p{ margin-top:14px; }
.prose ul{ margin:14px 0 0; padding-left:20px; display:grid; gap:8px; }
.prose a{ color: var(--blue); }
.prose .callout{ border-left:2px solid var(--blue); padding:4px 0 4px 18px; margin-top:22px; }

/* ==========================================================
   PAGE HEAD
   ========================================================== */

.page-head{ padding-top: clamp(38px,5.2vw,70px); padding-bottom: clamp(26px,3.4vw,44px);
            border-bottom:1px solid var(--line); }
.page-head .tag{ display:block; margin-bottom:12px; }
.page-head h1{ font-size: clamp(38px,7.4vw,96px); letter-spacing:-.042em; line-height:.95; }
.page-head h1 em{ font-style:normal; color: var(--blue); }
.page-head p{ margin-top:18px; }

/* ==========================================================
   FOOTER
   ========================================================== */

.site-foot{ border-top:1px solid var(--line); }
.foot-in{ display:grid; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr));
          gap: clamp(20px,3.2vw,42px); padding-block: clamp(40px,5.2vw,66px); }
@media (max-width:820px){ .foot-in{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .foot-in{ grid-template-columns:1fr; } }
.foot-in h4{ font-family: var(--mono); font-size:12px; font-weight:400; color: var(--mute); margin-bottom:13px; }
.foot-in ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-in a{ text-decoration:none; font-size:15px; font-weight:500; color: var(--mute); transition: color .2s ease; }
.foot-in a:hover{ color: var(--blue); }
.foot-note{ color: var(--mute); font-size:15px; max-width:32ch; margin-top:14px; }

.colo{ border-top:1px solid var(--line); padding-block:18px;
       display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center;
       font-family: var(--mono); font-size:12px; color: var(--mute); }
.colo .gap{ margin-left:auto; }
.colo a{ text-decoration:none; }
.colo a:hover{ color: var(--blue); }


/* ==========================================================
   WOOCOMMERCE
   Shop, product, cart, checkout and account, wearing the
   same design as the rest of the site.
   ========================================================== */

.woocommerce, .woocommerce-page{ color: var(--white); }

.woo-wrap{ padding-block: clamp(30px,4vw,54px); }

.woocommerce .woocommerce-breadcrumb{
  font-family: var(--mono); font-size:12px; color: var(--mute);
  margin-bottom: 26px;
}
.woocommerce .woocommerce-breadcrumb a{ color: var(--mute); text-decoration:none; }
.woocommerce .woocommerce-breadcrumb a:hover{ color: var(--blue); }

.woocommerce h1, .woocommerce h2, .woocommerce h3{ color: var(--white); }
.woocommerce .woocommerce-products-header__title,
.woocommerce-products-header{ margin-bottom: 8px; }

/* ---------- result count + sorting ---------- */

.woocommerce .woocommerce-result-count{
  font-family: var(--mono); font-size:12px; color: var(--mute); margin: 0 0 22px;
}
.woocommerce .woocommerce-ordering select,
.woocommerce select, .woocommerce input, .woocommerce textarea{
  background: var(--ink); color: var(--white);
  border:1px solid var(--line); border-radius:0;
  padding:11px 13px; font-family: var(--sans); font-size:15px;
}
.woocommerce select:focus, .woocommerce input:focus, .woocommerce textarea:focus{
  outline:none; border-color: var(--blue);
}

/* ---------- product grid ---------- */

.woocommerce ul.products{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,250px),1fr));
  gap:1px; background: var(--line); border:1px solid var(--line);
  margin:0 0 clamp(30px,4vw,48px); padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none !important; }

.woocommerce ul.products li.product{
  background: var(--ink);
  width:auto !important; float:none !important; margin:0 !important;
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:10px;
  transition: background .3s ease;
}
.woocommerce ul.products li.product:hover{ background: var(--panel); }

.woocommerce ul.products li.product a img{
  margin:0 0 4px; border:1px solid var(--line); background: var(--panel);
  aspect-ratio: 4/3; object-fit: contain; width:100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:18px !important; font-weight:700; letter-spacing:-.02em;
  padding:0 !important; margin:0; color: var(--white);
}
.woocommerce ul.products li.product .price{
  color: var(--white) !important; font-weight:700; font-size:18px;
  letter-spacing:-.02em; margin-top:auto; font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .price del{ color: var(--mute); font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

.woocommerce span.onsale{
  background: var(--blue); color: var(--white);
  border-radius:0; font-family: var(--mono); font-size:11px;
  min-width:auto; min-height:auto; padding:5px 10px; line-height:1;
  top:12px; left:12px; right:auto; margin:0;
}

/* ---------- buttons ---------- */

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt{
  background: var(--blue) !important; color: var(--white) !important;
  border:1px solid var(--blue); border-radius:0;
  font-family: var(--sans); font-weight:600; font-size:15px;
  padding:13px 22px; line-height:1.2;
  text-shadow:none; box-shadow:none;
  transition: background .2s ease, border-color .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background: var(--blue-dim) !important; border-color: var(--blue-dim);
}
.woocommerce a.button.wc-forward,
.woocommerce .cart .button, .woocommerce .cart input.button{ width:auto; }

.woocommerce a.added_to_cart{
  display:inline-block; margin-top:8px;
  font-weight:600; font-size:14px; color: var(--blue); text-decoration:none;
  border-bottom:1.5px solid var(--blue); padding-bottom:2px;
}

/* ---------- single product ---------- */

.woocommerce div.product .product_title{
  font-size: clamp(28px,4vw,46px); letter-spacing:-.03em; margin-bottom:12px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{
  color: var(--white); font-size:24px; font-weight:700; letter-spacing:-.02em;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color: var(--mute); font-size:17px; max-width:56ch;
}
.woocommerce div.product form.cart{ margin-top:22px; }
.woocommerce div.product form.cart div.quantity{ margin-right:10px; }
.woocommerce .quantity input.qty{
  width:78px; text-align:center; background: var(--ink);
  border:1px solid var(--line); color: var(--white); padding:12px 6px;
}
.woocommerce div.product .product_meta{
  font-family: var(--mono); font-size:12px; color: var(--mute);
  border-top:1px solid var(--line); padding-top:18px; margin-top:26px;
}
.woocommerce div.product .product_meta a{ color: var(--mute); }
.woocommerce div.product .product_meta a:hover{ color: var(--blue); }

.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0; margin:0 0 20px; border-bottom:1px solid var(--line);
  display:flex; gap:4px; flex-wrap:wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; margin:0; padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color: var(--mute); font-weight:500; padding:12px 16px; display:block;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color: var(--white); border-bottom-color: var(--blue);
}

/* ---------- cart ---------- */

.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:0; border-collapse:collapse;
}
.woocommerce table.shop_table th{
  font-family: var(--mono); font-size:12px; font-weight:400; color: var(--mute);
  border-bottom:1px solid var(--line); padding:14px 12px;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--line); padding:16px 12px; color: var(--white);
}
.woocommerce table.shop_table tbody tr:hover{ background: var(--panel); }
.woocommerce table.shop_table .product-thumbnail img{
  width:64px; border:1px solid var(--line); background: var(--panel);
}
.woocommerce table.shop_table a{ color: var(--white); text-decoration:none; }
.woocommerce table.shop_table a:hover{ color: var(--blue); }
.woocommerce a.remove{
  color: var(--mute) !important; font-weight:400;
}
.woocommerce a.remove:hover{ background: var(--blue) !important; color: var(--white) !important; }

.woocommerce .cart-collaterals .cart_totals{ width:100%; }
.woocommerce .cart_totals h2{ font-size:22px; margin-bottom:14px; }
.woocommerce-cart .cart-collaterals .cart_totals table{ border:1px solid var(--line); }

.woocommerce .coupon input.input-text{ min-width:180px; }

/* ---------- checkout + account ---------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  font-family: var(--mono); font-size:12px; color: var(--mute); margin-bottom:6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single{
  background: var(--ink) !important; color: var(--white) !important;
  border:1px solid var(--line) !important; border-radius:0 !important;
  padding:12px 13px !important; height:auto !important; font-size:16px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--white) !important; line-height:1.4 !important;
}
.select2-dropdown{ background: var(--panel); border-color: var(--line); color: var(--white); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background: var(--blue); }

.woocommerce-checkout #payment,
.woocommerce #customer_login,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message,
.woocommerce .woocommerce-error{
  background: var(--panel) !important; border-top:2px solid var(--blue);
  border-radius:0; color: var(--white);
}
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message{
  padding:16px 18px 16px 44px;
}
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before{ color: var(--blue); }
.woocommerce .woocommerce-error{ border-top-color:#E0483A; }
.woocommerce .woocommerce-error::before{ color:#E0483A; }

.woocommerce-checkout #payment div.payment_box{
  background: var(--panel-2); color: var(--mute);
}
.woocommerce-checkout #payment div.payment_box::after{ border-bottom-color: var(--panel-2); }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid var(--line); }

.woocommerce-account .woocommerce-MyAccount-navigation{ width:26%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:13px 0; text-decoration:none; color: var(--mute); font-weight:500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ color: var(--blue); }
@media (max-width: 760px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ width:100%; float:none; }
}

/* ---------- pagination ---------- */

.woocommerce nav.woocommerce-pagination ul{ border:0; display:flex; gap:6px; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--line); padding:9px 14px; color: var(--mute);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background: var(--blue); border-color: var(--blue); color: var(--white);
}

/* ---------- cart count in the header ---------- */

.cart-link .count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px;
  background: var(--blue); color: var(--white);
  font-family: var(--mono); font-size:11px; line-height:1;
  border-radius:99px;
}

/* ---------- generic WordPress content ---------- */

.entry-content > * + *{ margin-top:16px; }
.entry-content h2{ font-size: clamp(21px,2.4vw,28px); margin:34px 0 10px; letter-spacing:-.024em; }
.entry-content h3{ font-size:20px; margin:26px 0 8px; }
.entry-content p, .entry-content li{ color: var(--mute); font-size:17px; }
.entry-content a{ color: var(--blue); }
.entry-content ul, .entry-content ol{ padding-left:20px; display:grid; gap:8px; }
.entry-content img{ border:1px solid var(--line); }
.entry-content blockquote{
  border-left:2px solid var(--blue); padding-left:18px; margin-left:0; color: var(--white);
}

/* ==========================================================
   WOOCOMMERCE — belt and braces
   ========================================================== */

body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-error,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-error,
.woocommerce-info, .woocommerce-message, .woocommerce-error,
.woocommerce-notices-wrapper > *{
  background: var(--panel) !important;
  color: var(--white) !important;
  border-top: 2px solid var(--blue) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-error{ border-top-color: #E0483A !important; }

body.woocommerce-page #payment,
body.woocommerce-page .cart_totals,
body.woocommerce-page .cross-sells,
body.woocommerce-page #customer_login,
body.woocommerce-page .woocommerce-MyAccount-content,
body.woocommerce-page .woocommerce-order,
body.woocommerce-page .woocommerce-customer-details,
body.woocommerce-page .shop_table,
body.woocommerce-page .woocommerce-checkout-review-order{
  background: transparent !important;
  color: var(--white);
}

body.woocommerce-page table.shop_table,
body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td,
body.woocommerce-page table.shop_table tbody th,
body.woocommerce-page table.shop_table tfoot td,
body.woocommerce-page table.shop_table tfoot th{
  background: transparent !important;
  color: var(--white);
  border-color: var(--line) !important;
}
body.woocommerce-page table.shop_table th{ color: var(--mute); }

body.woocommerce-page ul.products li.product,
body.woocommerce-page div.product,
body.woocommerce-page .woocommerce-tabs,
body.woocommerce-page .related,
body.woocommerce-page .upsells{ background: transparent; }

body.woocommerce-page .button:not(.btn){
  background: var(--blue) !important;
  color: var(--white) !important;
  border-radius: 0 !important;
}

body.woocommerce-page [style*="background-color: #f7f6f7"],
body.woocommerce-page [style*="background:#f7f6f7"]{
  background: var(--panel) !important;
}

/* ==========================================================
   HOLDING THE PAGE COLOUR
   ========================================================== */

html body,
body[class*="elementor-kit-"],
body[class*="elementor-page"]{
  background: var(--ink) !important;
  color: var(--white) !important;
}

body[class*="elementor-kit-"] .site-head{
  background: color-mix(in srgb, var(--ink) 86%, transparent) !important;
}

html body,
body[class*="elementor-kit-"]{
  font-family: var(--sans) !important;
}
body .site-head, body .site-foot, body main{ font-family: var(--sans); }

/* ==========================================================
   WOOCOMMERCE — PAGE LAYOUTS
   ========================================================== */

.woocommerce div.product{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px,4vw,64px);
  align-items:start;
}
@media (max-width: 860px){ .woocommerce div.product{ grid-template-columns:1fr; } }

.woocommerce div.product div.images{
  margin:0; width:auto; float:none;
  border:1px solid var(--line); background: var(--panel); padding:18px;
}
.woocommerce div.product div.images img{ width:100%; }
.woocommerce div.product div.summary{ margin:0; width:auto; float:none; }

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{ grid-column:1 / -1; margin-top: clamp(30px,4vw,56px); }

.woocommerce div.product form.cart{
  border-top:1px solid var(--line);
  padding-top:22px; margin-top:24px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.woocommerce div.product form.cart .button{ flex:1 1 auto; min-width:180px; justify-content:center; }

.woocommerce-cart table.cart img{ width:72px; }
.woocommerce-cart table.cart td.actions{ padding-top:20px; }
.woocommerce-cart .cart-collaterals{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,420px);
  gap: clamp(20px,3vw,44px); margin-top: clamp(26px,3.4vw,44px);
}
@media (max-width: 860px){ .woocommerce-cart .cart-collaterals{ grid-template-columns:1fr; } }
.woocommerce-cart .cart_totals{
  border:1px solid var(--line); padding: clamp(20px,3vw,30px);
  background: var(--panel); grid-column: 2;
}
@media (max-width: 860px){ .woocommerce-cart .cart_totals{ grid-column:1; } }
.woocommerce-cart .wc-proceed-to-checkout{ padding-top:14px !important; }
.woocommerce-cart .wc-proceed-to-checkout .button{ width:100%; justify-content:center; }

.woocommerce-checkout .col2-set{
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(20px,3vw,44px); width:100%;
}
@media (max-width: 760px){ .woocommerce-checkout .col2-set{ grid-template-columns:1fr; } }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{ width:auto; float:none; }

.woocommerce-checkout h3{
  font-size: clamp(19px,2.1vw,25px); letter-spacing:-.02em;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:18px;
}
.woocommerce-checkout #order_review_heading{ margin-top: clamp(30px,4vw,48px); }
.woocommerce-checkout #order_review{
  border:1px solid var(--line); padding: clamp(20px,3vw,30px); background: var(--panel);
}
.woocommerce-checkout #payment ul.payment_methods{
  padding:0 0 18px; border-bottom:1px solid var(--line); list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{ padding:10px 0; }
.woocommerce-checkout #payment .form-row.place-order{ padding-top:18px; }
.woocommerce-checkout #place_order{ width:100%; justify-content:center; font-size:16px; padding:16px 22px; }

.woocommerce-account .woocommerce{
  display:grid; grid-template-columns: 240px minmax(0,1fr);
  gap: clamp(24px,4vw,56px); align-items:start;
}
@media (max-width: 760px){ .woocommerce-account .woocommerce{ grid-template-columns:1fr; } }

.woocommerce-account .woocommerce-MyAccount-navigation{
  width:auto !important; float:none !important;
  border-top:2px solid var(--blue);
}
.woocommerce-account .woocommerce-MyAccount-content{
  width:auto !important; float:none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  padding:14px 0; display:flex; justify-content:space-between; align-items:center;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a::after{
  content:"\203A"; opacity:0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::after,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after{
  opacity:1; transform:none;
}

.woocommerce #customer_login{
  display:grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(20px,3vw,44px);
}
@media (max-width: 760px){ .woocommerce #customer_login{ grid-template-columns:1fr; } }
.woocommerce #customer_login > div{
  width:auto !important; float:none !important;
  border:1px solid var(--line); padding: clamp(22px,3vw,32px); background: var(--panel);
}
.woocommerce form.login, .woocommerce form.register{
  border:0 !important; padding:0 !important; margin:0 !important;
}
.woocommerce form.login .button, .woocommerce form.register .button{ width:100%; justify-content:center; }
.woocommerce-form-login__rememberme{ display:inline-flex; gap:8px; align-items:center; }

.woocommerce .woocommerce-order{ max-width:820px; }
.woocommerce ul.order_details{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background: var(--line); border:1px solid var(--line);
}
.woocommerce ul.order_details li{
  background: var(--ink); padding:16px 18px; border:0; margin:0; float:none;
  font-family: var(--mono); font-size:11px; color: var(--mute); text-transform:none;
}
.woocommerce ul.order_details li strong{
  display:block; margin-top:6px; font-family: var(--sans);
  font-size:17px; color: var(--white); font-weight:600;
}


/* ==========================================================
   WOOCOMMERCE — CART, CHECKOUT AND ACCOUNT

   These three are ordinary WordPress pages holding a shortcode,
   so they render through page.php, which wraps content in a
   narrow reading column. A shop layout needs the full width.
   ========================================================== */

body.woocommerce-page .prose,
body.woocommerce-cart .prose,
body.woocommerce-checkout .prose,
body.woocommerce-account .prose,
body.woocommerce-page .entry-content{
  max-width: none !important;
}

body.woocommerce-cart .prose > .woocommerce,
body.woocommerce-checkout .prose > .woocommerce,
body.woocommerce-account .prose > .woocommerce{ width: 100%; }

/* ---------- account: sidebar + panel ---------- */

body.woocommerce-account .prose > .woocommerce{
  display: grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap: clamp(26px,4vw,60px);
  align-items: start;
}
@media (max-width: 820px){
  body.woocommerce-account .prose > .woocommerce{ grid-template-columns: 1fr; gap: 26px; }
}

body.woocommerce-account .woocommerce-MyAccount-navigation{
  border-top: 2px solid var(--blue);
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  margin: 0; padding: 0; list-style: none; display: block;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom: 1px solid var(--line); margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 2px; font-size: 16px; font-weight: 500;
  color: var(--mute); text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color: var(--white); padding-left: 8px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  color: var(--blue); font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content{
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(22px,3vw,34px);
  min-height: 280px;
}
body.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  margin-top: 0; font-size: 17px; color: var(--white);
}
body.woocommerce-account .woocommerce-MyAccount-content p{ color: var(--mute); }
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button){
  color: var(--blue); text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover{
  text-decoration: underline;
}

/* ---------- cart and checkout get the room back ---------- */

body.woocommerce-cart .prose table.shop_table,
body.woocommerce-checkout .prose table.shop_table{ width: 100%; }

body.woocommerce-cart .prose .cart-collaterals{ width: 100%; }
body.woocommerce-checkout .prose .col2-set{ width: 100%; }

/* WooCommerce floats the account panel right, which lands it in the
   wrong grid column. Place both explicitly. */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  grid-column: 1; grid-row: 1; float: none !important; width: auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-content{
  grid-column: 2; grid-row: 1; float: none !important; width: auto !important;
}
@media (max-width: 820px){
  body.woocommerce-account .woocommerce-MyAccount-navigation{ grid-column: 1; grid-row: 1; }
  body.woocommerce-account .woocommerce-MyAccount-content{ grid-column: 1; grid-row: 2; }
}


/* ==========================================================
   ACCOUNT — LOGGED OUT (the login page)

   Registration is off, so this page is a single form. It gets
   a centred card instead of a form stretched across 1180px,
   and the account grid is kept away from it.
   ========================================================== */

body.woocommerce-account:not(.logged-in) .prose > .woocommerce{
  display: block !important;
  max-width: 460px;
  margin-inline: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(26px,4vw,40px);
}

body.woocommerce-account:not(.logged-in) .woocommerce > h2{
  font-size: clamp(24px,3vw,32px);
  letter-spacing: -.03em;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-form-login{
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}
.woocommerce-form-login .form-row{
  margin: 0 0 18px; padding: 0; display: block;
}
.woocommerce-form-login label:not(.woocommerce-form-login__rememberme){
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 7px;
}
.woocommerce-form-login .input-text{
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 14px;
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  transition: border-color .2s ease;
}
.woocommerce-form-login .input-text:focus{
  outline: none; border-color: var(--blue);
}
.woocommerce-form-login .password-input{ display: block; position: relative; }
.woocommerce-form-login .show-password-input{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--mute);
}
.woocommerce-form-login__rememberme{
  display: flex !important; align-items: center; gap: 9px;
  margin: 0 0 18px; font-size: 14px; color: var(--mute);
  font-family: var(--sans); cursor: pointer;
}
.woocommerce-form-login__rememberme input{ margin: 0; accent-color: var(--blue); }
.woocommerce-form-login__submit{
  width: 100%; justify-content: center;
  font-size: 16px; padding: 15px 22px; margin: 0;
}
.woocommerce-LostPassword{
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 14px;
}
.woocommerce-LostPassword a{ color: var(--mute); text-decoration: none; }
.woocommerce-LostPassword a:hover{ color: var(--blue); }
.woocommerce .required{ color: var(--blue); border: 0; text-decoration: none; }

/* lost-password and reset forms get the same card */
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword,
body.woocommerce-account:not(.logged-in) .lost_reset_password{
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}

/* ==========================================================
   ACCOUNT — LOGGED IN
   ========================================================== */

body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-of-type{
  font-size: 20px;
  color: var(--white);
  font-weight: 600;
  letter-spacing: -.02em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 18px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p{
  font-size: 16px; line-height: 1.65;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  padding-left: 10px;
  border-left: 2px solid var(--blue);
  margin-left: -2px;
}


/* ==========================================================
   ACCOUNT — IN THE SITE'S OWN LANGUAGE
   ========================================================== */

body.woocommerce-account .page-head .tag,
body.woocommerce-cart .page-head .tag,
body.woocommerce-checkout .page-head .tag{ font-size: 0 !important; }
body.woocommerce-account .page-head .tag::after{
  content: "Your account"; font-size: 12px; font-family: var(--mono); color: var(--mute);
}
body.woocommerce-cart .page-head .tag::after,
body.woocommerce-checkout .page-head .tag::after{
  content: "Shop"; font-size: 12px; font-family: var(--mono); color: var(--mute);
}

body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul{
  counter-reset: ncnav; margin: 0; padding: 0; list-style: none;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li{
  counter-increment: ncnav; border-bottom: 1px solid var(--line); margin: 0;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a{
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 2px; font-size: 17px; font-weight: 500; letter-spacing: -.01em;
  color: var(--mute); text-decoration: none; border-left: 0; margin-left: 0;
  transition: color .2s ease, padding-left .25s cubic-bezier(.2,.8,.3,1);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a::before{
  content: counter(ncnav, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; color: var(--mute); flex: none;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a::after{
  content: "\2192"; margin-left: auto; opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover{
  color: var(--white); padding-left: 8px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover::after{ opacity: 1; transform: none; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a{ color: var(--white); font-weight: 600; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a::before{ color: var(--blue); }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a::after{ opacity: 1; transform: none; color: var(--blue); }

body.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  position: relative; border: 1px solid var(--line); background: var(--panel);
  padding: clamp(46px,5vw,58px) clamp(22px,3vw,34px) clamp(26px,3vw,34px);
  min-height: 300px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content::before{
  content: "Account"; position: absolute; top: 20px; left: clamp(22px,3vw,34px);
  font-family: var(--mono); font-size: 12px; color: var(--blue);
}
body.woocommerce-dashboard .woocommerce-MyAccount-content::before{ content: "Dashboard"; }
body.woocommerce-orders .woocommerce-MyAccount-content::before{ content: "Orders"; }
body.woocommerce-downloads .woocommerce-MyAccount-content::before{ content: "Downloads"; }
body.woocommerce-edit-address .woocommerce-MyAccount-content::before{ content: "Addresses"; }
body.woocommerce-payment-methods .woocommerce-MyAccount-content::before{ content: "Payment methods"; }
body.woocommerce-edit-account .woocommerce-MyAccount-content::before{ content: "Account details"; }

body.woocommerce-account.logged-in .woocommerce-MyAccount-content > p:first-of-type{
  font-size: clamp(21px,2.4vw,27px); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.15; color: var(--white);
  border-bottom: 1px solid var(--line); padding-bottom: 18px; margin: 0 0 20px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content p{
  color: var(--mute); font-size: 16px; line-height: 1.65;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button){
  color: var(--white); text-decoration: none;
  border-bottom: 1px solid var(--blue); padding-bottom: 1px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button):hover{ color: var(--blue); }

body.woocommerce-account .woocommerce-MyAccount-content table{
  width: 100%; border-collapse: collapse; border: 0; margin-top: 4px;
}
body.woocommerce-account .woocommerce-MyAccount-content table th{
  font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--mute);
  text-align: left; padding: 0 14px 12px 0; border: 0; border-bottom: 1px solid var(--line);
}
body.woocommerce-account .woocommerce-MyAccount-content table td{
  padding: 15px 14px 15px 0; border: 0; border-bottom: 1px solid var(--line);
  color: var(--white); font-size: 16px;
}

body.woocommerce-edit-address .woocommerce-Addresses{
  display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(18px,2.6vw,30px);
}
body.woocommerce-edit-address .woocommerce-Address{ width: auto !important; float: none !important; }
body.woocommerce-account .woocommerce-Address address{
  font-style: normal; color: var(--mute); font-size: 15px; line-height: 1.7;
}

body.woocommerce-account .woocommerce-MyAccount-content form .form-row{ margin: 0 0 18px; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-content label{
  display: block; font-family: var(--mono); font-size: 12px; color: var(--mute); margin-bottom: 7px;
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce-MyAccount-content textarea{
  width: 100%; background: var(--ink); border: 1px solid var(--line);
  border-radius: 0; padding: 13px 14px; color: var(--white); font-size: 16px;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset{
  border: 0; border-top: 1px solid var(--line); padding: 22px 0 0; margin: 26px 0 0;
}


/* ==========================================================
   ACCOUNT — MADE TO MATCH THE REST OF THE SITE

   WooCommerce's shortcode output is reshaped into the same
   language as the rest of the pages: mono eyebrows, hairline
   rows, spec-sheet tables, bordered panels.
   ========================================================== */

/* the eyebrow reads "Account", not the site name */
body.woocommerce-account .page-head .tag{ font-size: 0 !important; }
body.woocommerce-account .page-head .tag::before{
  content: "Account";
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}

/* less dead air under the title */
body.woocommerce-account main > .sec{ padding-block: clamp(34px,4vw,58px); }

/* ---------- navigation ---------- */

body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  font-size: 17px;
  letter-spacing: -.012em;
  padding: 16px 2px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a::after{
  content: "\2192";
  font-size: 15px;
}

/* ---------- content panel ---------- */

body.woocommerce-account .woocommerce-MyAccount-content{
  padding: clamp(24px,3.2vw,38px);
}
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3{
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}

/* ---------- orders, downloads, order details: spec-sheet tables ---------- */

.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--downloads,
.woocommerce-table--order-downloads{
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 0;
}
.woocommerce-orders-table th,
.woocommerce-table--order-details th,
.woocommerce-table--downloads th{
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--mute);
  text-align: left;
  padding: 0 14px 14px 0;
  border-bottom: 1px solid var(--line);
  border-top: 0;
}
.woocommerce-orders-table td,
.woocommerce-table--order-details td,
.woocommerce-table--downloads td{
  padding: 16px 14px 16px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.woocommerce-orders-table a:not(.button),
.woocommerce-table--order-details a:not(.button){
  color: var(--blue); text-decoration: none;
}
.woocommerce-orders-table .button{
  padding: 9px 15px; font-size: 14px;
}

/* ---------- the empty states ---------- */

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 22px !important;
  border-top: 2px solid var(--blue) !important;
  font-size: 16px;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before{
  display: none !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button{
  margin-left: auto;
}

/* ---------- addresses ---------- */

.woocommerce-Addresses{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(18px,2.6vw,30px);
  margin-top: 22px;
}
@media (max-width: 700px){ .woocommerce-Addresses{ grid-template-columns: 1fr; } }

.woocommerce-Address{
  width: auto !important; float: none !important;
  border: 1px solid var(--line);
  background: var(--ink);
  padding: 22px;
}
.woocommerce-Address-title{
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3{ font-size: 18px; margin: 0; letter-spacing: -.02em; }
.woocommerce-Address-title a{
  font-family: var(--mono); font-size: 12px; color: var(--blue); text-decoration: none;
}
.woocommerce-Address address{
  font-style: normal; color: var(--mute); font-size: 15px; line-height: 1.7;
}

/* ---------- forms inside the account ---------- */

body.woocommerce-account .woocommerce-MyAccount-content form .form-row{
  margin: 0 0 18px; padding: 0; display: block;
}
body.woocommerce-account .woocommerce-MyAccount-content label{
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 7px;
}
body.woocommerce-account .woocommerce-MyAccount-content legend{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--blue);
  padding: 0 0 4px;
}
body.woocommerce-account .woocommerce-MyAccount-content em{
  display: block; font-style: normal;
  font-size: 13px; color: var(--mute); margin-top: 6px;
}
body.woocommerce-account .woocommerce-MyAccount-content .button{ margin-top: 8px; }


/* You had already relabelled the eyebrow, so mine is withdrawn
   rather than printed alongside it. */
body.woocommerce-account .page-head .tag::before{ content: none !important; }

/* WooCommerce puts the button before the text in the markup;
   read the sentence first, then the action. */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info{
  align-items: center;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button{
  order: 2; margin-left: auto; flex: none;
}


/* ==========================================================
   ACCOUNT DASHBOARD TILES
   Styles the custom dashboard template. Harmless until that
   file is in place.
   ========================================================== */

.nc-account__hello{
  font-size: clamp(21px,2.6vw,27px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--white);
  margin: 0 0 6px;
}
.nc-account__sub{
  color: var(--mute);
  font-size: 16px;
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.nc-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,230px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.nc-tile{
  position: relative;
  background: var(--ink);
  padding: 22px 22px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 132px;
  transition: background .25s ease;
}
.nc-tile:hover{ background: var(--panel-2); }

.nc-tile__label{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--white);
}
.nc-tile:hover .nc-tile__label{ color: var(--blue); }
.nc-tile__desc{
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 28ch;
}
.nc-tile__go{
  margin-top: auto;
  font-size: 16px;
  color: var(--mute);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), color .25s ease;
}
.nc-tile:hover .nc-tile__go{ transform: translateX(5px); color: var(--blue); }

.nc-account__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.nc-account__out{
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.nc-account__out:hover{ color: var(--blue); border-color: var(--blue); }

@media (max-width: 520px){
  .nc-account__foot .btn{ flex: 1 1 100%; justify-content: center; }
  .nc-account__out{ margin: 6px 0 0; }
}


/* Once the tiles exist, WooCommerce's default dashboard sentences
   are redundant. Nothing hides until they are actually there. */
.woocommerce-MyAccount-content:has(.nc-account) > p{ display: none; }