/*
Theme Name: Matty Boy
Theme URI: https://mattyboyofficial.us/
Author: Matty Boy
Author URI: https://mattyboyofficial.us/
Description: Custom classic WooCommerce theme for Matty Boy (mattyboyofficial.us). Converted from the static storefront with WooCommerce URL + SEO parity. SEO head nodes are owned by the SEO Core plugin; this theme emits none. Store configuration lives in inc/config.php.
Version: 1.0.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matty-boy
WC requires at least: 8.0
WC tested up to: 9.4
*/

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

*, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html, :host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family);
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--default-mono-font-family); font-size: 1em; }
small { font-size: 80%; }
sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
sub { bottom: -.25em; }
sup { top: -.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
:-moz-focusring:where(:not(iframe)) { outline: auto; }
progress { vertical-align: baseline; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}
::placeholder { opacity: 1; }
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
  ::placeholder { color: currentColor; }
  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }
  }
}
textarea { resize: vertical; }
::-webkit-search-decoration { -webkit-appearance: none; }
:-moz-ui-invalid { box-shadow: none; }
button, input:where([type=button], [type=reset], [type=submit]) { appearance: button; }
::-webkit-inner-spin-button { height: auto; }
::-webkit-outer-spin-button { height: auto; }
[hidden]:where(:not([hidden=until-found])) { display: none !important; }

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/manrope-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/grenze-gotisch-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Grenze Gotisch";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/grenze-gotisch-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #131211;
  --color-surface: #FFFFFF;
  --color-ink: #F2EFE8;
  --color-ink-dark: #14120F;
  --color-muted: #A7A199;
  --color-muted-dark: #56534D;
  --color-accent: #E5242E;
  --color-accent-ink: #FFFFFF;
  --color-danger: #FF6B6B;
  --color-line: #332F2B;
  --color-line-2: #4A443E;

  --font-display: "Grenze Gotisch", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.35rem;  --text-xl: 1.8rem;
  --text-2xl: 2.4rem;  --text-display: clamp(2.6rem, 7vw, 5.5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space-9: 96px;

  --radius-1: 2px; --radius-2: 4px;
  --shadow-case: 0 24px 60px -30px rgba(0,0,0,.9);
  --dur-fast: 140ms; --dur-base: 300ms; --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); color: var(--color-ink);
  background: var(--color-bg); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; font-weight: 400; }
h1 { font-size: var(--text-2xl); letter-spacing: .01em; }
h2 { font-size: var(--text-xl); letter-spacing: .01em; }
h3 { font-size: var(--text-md); }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.sec { padding-block: var(--space-8); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: var(--color-bg); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }

.ann { border-bottom: 1px solid var(--color-line); font-size: var(--text-xs); }
.ann__in { display: flex; justify-content: center; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.ann__in span { letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); text-align: center; }
.ann__x { background: none; border: 0; color: var(--color-muted); cursor: pointer; line-height: 0; }
.ann__x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.ann__x:hover { color: var(--color-ink); }

.hd { position: sticky; top: 0; z-index: 50; background: rgba(19,18,17,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line); }
.hd__in { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-3); }
.hd__left { display: flex; align-items: center; }
.hd__right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); }
.hd__spacer { display: none; }
.logo { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .02em; display: inline-flex; align-items: center; gap: var(--space-2); }
.logo .mbmark { width: 44px; flex: none; }
.hd__shop { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.hd__shop:hover { color: var(--color-ink); }
.menu-trigger, .icon-btn { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; padding: var(--space-2); }
.menu-trigger svg, .icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.menu-trigger .lbl { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; }

.qstrip { border-bottom: 1px solid var(--color-line); overflow-x: auto; }

.qstrip__in { display: flex; gap: var(--space-5); padding-block: var(--space-3); white-space: nowrap; align-items: center; justify-content: center; }
@media (max-width: 720px) { .qstrip__in { justify-content: flex-start; } }
.qstrip__lbl { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.qstrip a { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); transition: color var(--dur-fast); }
.qstrip a:hover { color: var(--color-ink); }
.qstrip a[aria-current="page"] { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }

.mm { position: fixed; inset: 0; background: var(--color-bg); z-index: 90; padding: var(--space-5); overflow-y: auto; }
.mm__top { display: flex; justify-content: space-between; align-items: center; }
.mm__nav { display: grid; gap: var(--space-3); margin-top: var(--space-7); text-align: center; }
.mm__nav a { font-family: var(--font-display); font-size: var(--text-xl); display: flex; justify-content: center; gap: var(--space-3); align-items: baseline; }
.mm__nav a span { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
.mm__foot { margin-top: var(--space-8); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .1em; text-align: center; }

.thumbbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgba(19,18,17,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--color-line); z-index: 40; }
.thumbbar a, .thumbbar button { flex: 1; display: grid; place-items: center; gap: 3px; padding-block: var(--space-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; cursor: pointer; color: var(--color-muted); }
.thumbbar svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; }
@media (min-width: 768px) { .thumbbar { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.8rem; border: 1px solid var(--color-ink); border-radius: var(--radius-1); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; cursor: pointer; background: transparent; color: var(--color-ink); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.btn:hover { background: var(--color-ink); color: var(--color-bg); }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: transparent; color: var(--color-accent); }
.btn--ghost { border-color: var(--color-line-2); color: var(--color-muted); }
.btn--ghost:hover { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--block { width: 100%; }
.btn-link { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }
.form { display: grid; gap: var(--space-4); max-width: 520px; }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.field input, .field textarea { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line-2); background: transparent; color: var(--color-ink); border-radius: var(--radius-1); font: inherit; }
.field input:focus, .field textarea:focus { border-color: var(--color-ink); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.formmsg { display: none; font-size: var(--text-sm); }
.formmsg.is-on { display: block; }
.formmsg--ok { color: var(--color-ink); }
.formmsg--err { color: var(--color-danger); }
.form__fallback { color: var(--color-muted); font-size: var(--text-sm); }

.sec > h2, .sec-h, .about h2, .related h2, .catintro h2, .prose h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: .02em; }

.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }
@media (min-width: 768px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
.pgrid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .pgrid--4 { grid-template-columns: repeat(4, 1fr); } }
.cats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
@media (min-width: 768px) { .cats-grid { grid-template-columns: repeat(5, 1fr); } }

.tile { display: grid; gap: 0; background: var(--color-bg); transition: background var(--dur-fast); }
.tile:hover { background: #1B1917; }
.tile__fig { display: block; background: var(--color-surface); }
.tile__fig img { aspect-ratio: 1; object-fit: contain; width: 100%; padding: 10%; background: var(--color-surface); }
.tile__b { display: grid; gap: 2px; padding: var(--space-4); text-align: center; }
.tile__title { font-family: var(--font-display); font-size: var(--text-md); }
.tile__count { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }

.card { position: relative; display: block; }
.card__media { position: relative; display: block; background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-case); aspect-ratio: 1; }
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 0 var(--color-accent); transition: box-shadow var(--dur-base) var(--ease-out); }
.card:hover .card__media::after, .card:focus-visible .card__media::after { box-shadow: inset 0 0 0 2px var(--color-accent); }

.card__media::before { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-12deg); opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast); }
.card:hover .card__media::before, .card:focus-visible .card__media::before { transform: translateX(240%) skewX(-12deg); opacity: 1; }
.card .pi { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-out); }
.card .pi-2 { opacity: 0; }
.card:hover .pi-2, .card:focus-visible .pi-2 { opacity: 1; }
.card:hover .pi-1, .card:focus-visible .pi-1 { transform: scale(1.035); }
.card__tag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 4; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted-dark); }
.card__badge { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 4; background: var(--color-ink-dark); color: var(--color-ink); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; }
.card__noimg { display: grid; place-items: center; align-content: center; gap: var(--space-2); aspect-ratio: 1; width: 100%; background: #F6F5F2; color: var(--color-muted-dark); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; text-align: center; }

.card__b { display: grid; gap: 3px; padding-top: var(--space-3); text-align: center; }
.card__title { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card__row { display: flex; justify-content: center; align-items: baseline; gap: var(--space-3); }
.price { font-size: var(--text-sm); letter-spacing: .08em; color: var(--color-accent); font-weight: 600; }
.price del { color: var(--color-muted); margin-inline-end: var(--space-2); font-weight: 400; }
.price ins { text-decoration: none; }
.sku { font-size: .6rem; letter-spacing: .12em; color: var(--color-muted); }

.chead { padding-block: var(--space-7) var(--space-5); border-bottom: 1px solid var(--color-line); text-align: center; }
.chead h1 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); letter-spacing: -.01em; }
.chead .kick { color: var(--color-muted); font-size: var(--text-sm); margin: 0; }
.gtool { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-block: var(--space-6) var(--space-5); flex-wrap: wrap; }
.gtool__count { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.sortwrap { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-muted); }
.sortwrap select { background: transparent; color: var(--color-ink); border: 1px solid var(--color-line-2); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-xs); border-radius: var(--radius-1); }
.shell { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) { .shell { grid-template-columns: 210px 1fr; } }
.rail__box { border: 1px solid var(--color-line); padding: var(--space-5); }
.rail__h { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .2em; color: var(--color-muted); margin-bottom: var(--space-3); }
.rail__nav { display: grid; gap: var(--space-3); }
.rail__nav a { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.rail__nav a:hover { color: var(--color-ink); }
.rail__nav a[aria-current="page"] { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }
.rail__note { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--space-5); line-height: 1.6; }
.sibs { margin-block: var(--space-7); border-top: 1px solid var(--color-line); padding-top: var(--space-5); }
.sibs__lbl { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); margin-inline-end: var(--space-3); }
.sibs__in { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.sibs a { color: var(--color-muted); border-bottom: 1px solid var(--color-line-2); }
.sibs a:hover { color: var(--color-ink); border-color: var(--color-ink); }
.catintro { margin-top: var(--space-8); max-width: 70ch; margin-inline: auto; color: var(--color-muted); }
.catintro h2 { color: var(--color-ink); }

.pager { display: flex; gap: var(--space-3); justify-content: center; align-items: center; margin-top: var(--space-7); font-size: var(--text-sm); }
.pager a, .pager span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-3); border: 1px solid var(--color-line); color: var(--color-muted); }
.pager a:hover { border-color: var(--color-ink); color: var(--color-ink); }
.pager [aria-current="page"] { border-color: var(--color-ink); color: var(--color-ink); }
.pager .is-disabled { opacity: .35; pointer-events: none; }

.crumb { padding-top: var(--space-5); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.crumb a:hover { color: var(--color-ink); }

.hero { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; }
.hero__k { display: grid; justify-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.hero__word { font-family: var(--font-display); font-size: var(--text-display); line-height: .95; letter-spacing: .01em; color: var(--color-ink); }

.mbmark { display: block; height: auto; margin-inline: auto; }
.mbmark--mark { width: 46px; }
.mbmark--full { width: 100%; height: auto; }
.hd .mbmark--mark { width: 68px; }
.mm__top .mbmark--mark { width: 72px; }
.hero__k .mbmark--mark { width: clamp(150px, 21vw, 230px); }
.ft__lock .mbmark--mark { width: clamp(80px, 11vw, 104px); }

.sec--home > h2,
.sec--home .about h2,
.sec--home .prose h2 {
  text-align: center;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-7);
}
.sec--home .prose h2 { margin-top: var(--space-8); }
.sec--home .about,
.sec--home .prose,
.sec--home .home-body { max-width: none; margin-inline: 0; }

.sec--home .about p,
.sec--home .prose p,
.sec--home .prose ul,
.sec--home .prose details { max-width: 78ch; margin-inline: auto; }

.hero-copy h1 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: .02em; color: var(--color-muted); max-width: 34ch; margin: 0 auto; line-height: 1.5; }
.bcard__t, .tile__count, .flyer__title { font-family: var(--font-body); }
.hero-copy p { color: var(--color-muted); max-width: 52ch; margin-inline: auto; font-size: var(--text-sm); }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; justify-content: center; }
.usp-line { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: var(--space-8); background: var(--color-line); border: 1px solid var(--color-line); font-size: var(--text-sm); text-align: left; }
@media (min-width: 768px) { .usp-line { grid-template-columns: repeat(3, 1fr); } }
.usp-line > div { background: var(--color-bg); padding: var(--space-5); display: grid; gap: 3px; }
.usp-line b { display: block; font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.usp-line span { color: var(--color-muted); font-size: var(--text-sm); }
.about { max-width: 66ch; margin-inline: auto; text-align: center; }
.about p { color: var(--color-muted); margin-top: var(--space-4); }
.about a { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }

.pdp { display: grid; gap: clamp(2rem, 5vw, 4.5rem); padding-block: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .pdp { grid-template-columns: 1.05fr .95fr; } }
.pdp__buy { display: grid; gap: 0; align-content: start; }
.pdp__cat { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.pdp h1 { font-size: var(--text-xl); margin: var(--space-3) 0; line-height: 1.15; }
.pdp__price { font-size: var(--text-lg); color: var(--color-accent); letter-spacing: .06em; font-weight: 600; margin: 0 0 var(--space-4); }
.pdp__price del { color: var(--color-muted); font-weight: 400; margin-inline-end: var(--space-2); }
.pdp__short { color: var(--color-muted); max-width: 52ch; font-size: var(--text-sm); }
.pdp__card { margin-top: var(--space-5); }
.pdp__desc { max-width: 70ch; margin-block: var(--space-8) 0; color: var(--color-muted); }
.pdp__desc h2 { color: var(--color-ink); }

.specs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--color-line); padding-top: var(--space-5); }
.specs tbody { display: contents; }
.specs tr { display: block; }
.specs dt, .specs th { display: block; text-align: start; font-weight: 400; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.specs dd, .specs td { display: block; margin: 3px 0 0; font-size: var(--text-sm); }
.related { margin-top: var(--space-8); }

.gal { display: grid; gap: var(--space-4); }
.gal__main { position: relative; background: var(--color-surface); box-shadow: var(--shadow-case); aspect-ratio: 1; overflow: hidden; }
.gal__main img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.gal__noimg { display: grid; place-items: center; aspect-ratio: 1; background: #F6F5F2; color: var(--color-muted-dark); font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; }
.gal__thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gal__thumb { width: 78px; height: 78px; padding: 6px; background: var(--color-surface); border: 1px solid transparent; cursor: pointer; transition: border-color var(--dur-fast); }
.gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gal__thumb[aria-pressed="true"] { border-color: var(--color-accent); }
.gal__thumb:hover { border-color: var(--color-line-2); }

.ndm-pa { margin-block: var(--space-5); }
.ndm-pa-label { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-3); }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { min-width: 52px; height: 48px; padding: 0 .9rem; background: transparent; color: var(--color-ink); border: 1px solid var(--color-line-2); font-family: inherit; font-size: var(--text-sm); letter-spacing: .1em; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.chip:hover { border-color: var(--color-ink); }
.chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.chip[aria-pressed="true"] { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.chip[disabled] { opacity: .3; cursor: not-allowed; }

.buybox { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.buybox__hint { margin: 0; font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .04em; }
.trust { display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }

.ft { border-top: 1px solid var(--color-line); margin-top: var(--space-8); padding-block: var(--space-8) var(--space-5); font-size: var(--text-sm); text-align: center; }
.ft__in { display: grid; gap: var(--space-6); justify-items: center; }
.ft__brand { max-width: 560px; display: grid; gap: var(--space-3); justify-items: center; }
.ft__brand .logo { font-size: var(--text-xl); }
.ft__word { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: .02em; }
.ft__brand p { color: var(--color-muted); margin: 0; font-size: var(--text-sm); }
.ft__contact { margin: 0; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .06em; }
.ft__contact a { border-bottom: 1px solid var(--color-line-2); }
.ft__contact a:hover { color: var(--color-ink); border-color: var(--color-ink); }
.ft__social { display: flex; gap: var(--space-3); }
.ft__social a { color: var(--color-muted); display: inline-flex; align-items: center; justify-content: center; padding: 6px; transition: color var(--dur-fast); }
.ft__social a:hover { color: var(--color-ink); }
.ft__social svg { width: 20px; height: 20px; }
.ft__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6); }
.ft__badges { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: center; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.ft__badges-label { color: var(--color-muted); opacity: .7; letter-spacing: .14em; }
.ft__badge { padding: 4px 10px; border: 1px solid var(--color-line-2); border-radius: 4px; color: var(--color-ink); letter-spacing: .1em; }
.ft__pay { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.ft__cols { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.ft__col { display: contents; }
.ft__col h3 { display: none; }
.ft__col a { color: var(--color-muted); border-bottom: 1px solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); }
.ft__col a:hover { color: var(--color-ink); border-color: var(--color-ink); }
.ft__col p { margin: 0; color: var(--color-muted); }
.ft__base { display: flex; justify-content: center; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .1em; }
.disc { color: var(--color-muted); }

.prose { max-width: 70ch; margin-inline: auto; color: var(--color-muted); }
.prose h2 { margin-top: var(--space-7); color: var(--color-ink); }
.prose h3 { color: var(--color-ink); font-size: var(--text-md); margin-top: var(--space-5); }
.prose a { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }
.prose details { border-bottom: 1px solid var(--color-line); }
.prose summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6) var(--space-4) 0; position: relative; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--color-accent); font-size: 1.2rem; }
.prose details[open] summary::after { content: "–"; }
.prose details p { padding-bottom: var(--space-4); }
.home-body { margin-inline: auto; }
.autolink { color: var(--color-ink); border-bottom: 1px solid var(--color-accent); }

.bloglist { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .bloglist { grid-template-columns: repeat(3, 1fr); } }
.bcard { display: grid; gap: var(--space-3); align-content: start; }
.bcard__img img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.bcard__b { display: grid; gap: var(--space-2); }
.bcard__date { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; }
.bcard__t { margin: 0; font-size: var(--text-md); }
.bcard__d { color: var(--color-muted); margin: 0; font-size: var(--text-sm); }
.blog-empty { color: var(--color-muted); }
.post { max-width: 70ch; margin-inline: auto; }
.post__hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.sitemap-cols { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .sitemap-cols { grid-template-columns: repeat(3, 1fr); } }
.sitemap-cols a { color: var(--color-muted); }
.sitemap-cols a:hover { color: var(--color-ink); }
.acc { display: grid; gap: var(--space-2); }
.gap { display: grid; gap: var(--space-4); }

.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card__media::before { display: none; }
}

.hd__bag { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); display: inline-flex; align-items: baseline; gap: 2px; }
.hd__bag:hover { color: var(--color-ink); }
.hd__bagn { color: var(--color-accent); }

.ndm-pa-select {
  width: 100%; max-width: 320px;
  padding: var(--space-3) var(--space-4);
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line-2); border-radius: var(--radius-1);
  font: inherit; font-size: var(--text-sm); letter-spacing: .06em; cursor: pointer;
}
.ndm-pa-select:focus { border-color: var(--color-ink); outline: none; }
.ndm-pa-select option { background: var(--color-bg); color: var(--color-ink); }
.ndm-pa-price-note { margin-top: var(--space-3); font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-accent); }

.woocommerce-notices-wrapper { display: grid; gap: var(--space-3); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line-2);
  background: #1B1917;
  color: var(--color-ink);
  font-size: var(--text-sm);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-block: var(--space-4);
}
.woocommerce-message { border-inline-start: 2px solid var(--color-accent); }
.woocommerce-error { border-inline-start: 2px solid var(--color-danger); color: var(--color-danger); }
.woocommerce-error li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-inline-start: auto; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before { content: none; }

.woocommerce-error { flex-direction: column; align-items: stretch; gap: var(--space-2); }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.8rem;
  border: 1px solid var(--color-ink); border-radius: var(--radius-1);
  font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  background: transparent; color: var(--color-ink); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--color-ink); color: var(--color-bg);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #payment #place_order, .woocommerce .checkout-button {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .woocommerce .checkout-button:hover {
  background: transparent; color: var(--color-accent);
}
.woocommerce button.button:disabled, .woocommerce button.button[disabled] { opacity: .4; cursor: not-allowed; }

.commerce { max-width: none; margin-inline: 0; color: var(--color-ink); }

.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2,
.woocommerce form .form-row, .woocommerce form .form-row-first,
.woocommerce form .form-row-last, .woocommerce form .form-row-wide,
.woocommerce .cart-collaterals, .woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals, .woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .woocommerce-checkout-review-order {
  float: none; width: auto;
}

.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after,
.woocommerce-billing-fields__field-wrapper::before,
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::before,
.woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-address-fields__field-wrapper::before,
.woocommerce-address-fields__field-wrapper::after,
.woocommerce form .form-row::before,
.woocommerce form .form-row::after,
.woocommerce .cart .coupon::before,
.woocommerce .cart .coupon::after { content: none; }

@media (min-width: 640px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4);
  }
  .woocommerce-billing-fields__field-wrapper > .form-row-wide,
  .woocommerce-shipping-fields__field-wrapper > .form-row-wide,
  .woocommerce-address-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}

.woocommerce-cart-form, .woocommerce-cart .cart-collaterals { color: var(--color-ink); }

.woocommerce-cart .cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--space-6); }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 420px; }
.woocommerce table.shop_table {
  width: 100%; border: 1px solid var(--color-line); border-collapse: collapse;
  font-size: var(--text-sm); margin-bottom: var(--space-6);
}
.woocommerce table.shop_table th {
  text-align: start; padding: var(--space-4);
  font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-muted); font-weight: 600;
  border-bottom: 1px solid var(--color-line);
}
.woocommerce table.shop_table td {
  padding: var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: middle;
}
.woocommerce table.shop_table img { width: 68px; background: var(--color-surface); }
.woocommerce table.shop_table .product-name a { color: var(--color-ink); }
.woocommerce table.shop_table .product-name a:hover { color: var(--color-accent); }
.woocommerce .cart_item .amount, .woocommerce .order-total .amount { color: var(--color-accent); font-weight: 600; }

.woocommerce-cart .product-name dl.variation,
.woocommerce-checkout .product-name dl.variation,
.wc-item-meta {
  display: block; margin: var(--space-2) 0 0; padding: 0;
  font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-muted);
}
.woocommerce-cart .product-name dl.variation dt, .wc-item-meta li strong { font-weight: 600; display: inline; }
.woocommerce-cart .product-name dl.variation dd, .wc-item-meta li p { display: inline; margin: 0; }
.wc-item-meta li { list-style: none; }

.woocommerce .quantity input.qty {
  width: 68px; height: 44px; padding: 0 var(--space-2); text-align: center;
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line-2); border-radius: var(--radius-1);
}
.woocommerce .cart .coupon { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.woocommerce .cart input#coupon_code {
  min-width: 200px; padding: var(--space-3) var(--space-4);
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line-2); border-radius: var(--radius-1);
}
.woocommerce .cart_totals { border: 1px solid var(--color-line); padding: var(--space-5); }
.woocommerce .cart_totals h2 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-4); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--space-5); }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100%; }
.woocommerce .cart-empty, .woocommerce .return-to-shop { text-align: center; }
.woocommerce .cart-empty { color: var(--color-muted); margin-block: var(--space-7) var(--space-5); }

.woocommerce form .form-row { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.woocommerce form .form-row label,
.woocommerce-account label {
  font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.select2-container .select2-selection--single {
  width: 100%; padding: var(--space-3) var(--space-4); min-height: 48px;
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-line-2); border-radius: var(--radius-1);
  font: inherit;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--color-ink); outline: none; }
.woocommerce form .form-row .required { color: var(--color-accent); border: 0; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-ink); line-height: 28px; }
.select2-dropdown { background: #1B1917; border-color: var(--color-line-2); color: var(--color-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--color-accent); }

.woocommerce-checkout h3, .woocommerce-checkout h2, .woocommerce-account h2 {
  font-family: var(--font-display); font-size: var(--text-xl); margin-block: var(--space-6) var(--space-4);
}
.woocommerce-checkout #customer_details { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .woocommerce-checkout #customer_details { grid-template-columns: 1fr 1fr; } }
.woocommerce-checkout-review-order { border: 1px solid var(--color-line); padding: var(--space-5); }
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; padding: 0; border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-5);
}
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: var(--space-3); }
.woocommerce-checkout #payment div.payment_box {
  background: #1B1917; color: var(--color-muted); font-size: var(--text-sm);
  padding: var(--space-4); border-radius: var(--radius-1);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-terms-and-conditions-wrapper { font-size: var(--text-sm); color: var(--color-muted); }

.woocommerce-account .woocommerce { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: 220px 1fr; } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.woocommerce-MyAccount-navigation a {
  display: block; padding: var(--space-2) 0; color: var(--color-muted);
  font-size: var(--text-sm); border-bottom: 1px solid var(--color-line);
}
.woocommerce-MyAccount-navigation a:hover { color: var(--color-ink); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.woocommerce-form-login, .woocommerce-form-register { border: 1px solid var(--color-line); padding: var(--space-5); max-width: 520px; }

.woocommerce .woocommerce-breadcrumb { display: none; }
.woocommerce .star-rating { color: var(--color-accent); }
.woocommerce div.product form.cart { margin: 0; }
.woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text a { color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 767px) {
  body { padding-bottom: 62px; }
}