/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* Design tokens */
    --bg:           #ffffff;
    --fg:           #0a0a0a;
    --muted:        #6b6b6b;
    --line:         #e6e6e6;
    --soft:         #f6f5f2;
    --accent:       #69b07a;
    --accent-dark:  #4f9362;
    --accent-soft:  #eaf3ec;
    --radius:       0px;
    --pad:          28px;
    --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
    --font-ui:      'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Legacy aliases for cart/checkout/forms pages */
    --text:         var(--fg);
    --text-mid:     var(--muted);
    --text-light:   #888888;
    --bg-warm:      #faf9f6;
    --bg-light:     var(--soft);
    --bg-mid:       #eae9e3;
    --border:       var(--line);
    --border-mid:   #ccccc4;
    --shadow-sm:    0 1px 4px rgba(0,0,0,.05);
    --shadow:       0 4px 20px rgba(0,0,0,.07);
    --shadow-hover: 0 8px 36px rgba(0,0,0,.11);
    --transition:   0.2s ease;
    --font-serif:   var(--font-display);
    --font-sans:    var(--font-ui);
    --green:        var(--accent);
    --green-dark:   var(--accent-dark);
    --green-light:  #5aad65;
    --accent-light: var(--green-light);
}

html { scroll-behavior: smooth; height: 100%; }
body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
::selection { background: #0a0a0a; color: #fff; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    color: var(--fg);
    margin-top: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
    text-decoration: none;
    border-radius: 0;
}
.btn-primary  {
    background: var(--fg); color: #fff; border-color: var(--fg);
    border-bottom: 2px solid var(--accent);
}
.btn-primary:hover  { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline  { background: transparent; color: var(--fg); border: 1px solid var(--fg); }
.btn-outline:hover { background: var(--fg); color: #fff; }
.btn-sm  { padding: 8px 16px; font-size: .7rem; }
.btn-lg  { padding: 16px 32px; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: #c0392b; border-color: #c0392b; color: #fff; border-bottom: 2px solid #922b21; }
.btn-danger:hover { background: #a93226; border-color: #a93226; color: #fff; }

/* ── Site Header (non-homepage sticky bar) ─────────────────────────────────── */
.site-header {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex;
    align-items: center;
    padding: 16px var(--pad);
    gap: 28px;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity .2s;
    margin-right: auto;
}
.site-logo:hover { opacity: 0.7; }
.site-logo-img { max-height: 32px; width: auto; display: block; }
.site-logo-wordmark {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.site-navlinks {
    display: flex;
    gap: 22px;
}
.site-navlinks a {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s;
}
.site-navlinks a:hover  { color: var(--fg); }
.site-navlinks a.is-active {
    color: var(--fg);
    position: relative;
}
.site-navlinks a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--accent);
}

/* ── Header Controls ───────────────────────────────────────────────────────── */
.header-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Search toggle */
.search-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 38px;
}
.search-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg);
    transition: opacity .15s, color .15s;
}
.search-toggle__btn:hover { opacity: 0.65; }
.search-toggle.is-open .search-toggle__btn { color: var(--accent-dark); opacity: 1; }

/* Input is in normal flex flow so it pushes sibling items when it expands */
.search-toggle__input {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    height: 32px;
    padding: 0;
    border: 0;
    border-bottom: 1.5px solid transparent;
    background: transparent;
    outline: 0;
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--fg);
    flex-shrink: 0;
    transition: width .3s ease, max-width .3s ease, opacity .25s ease, padding .3s ease, border-color .25s ease;
    pointer-events: none;
}
.search-toggle.is-open .search-toggle__input {
    width: clamp(180px, 26vw, 320px);
    max-width: clamp(180px, 26vw, 320px);
    opacity: 1;
    padding: 0 8px;
    border-bottom-color: var(--fg);
    pointer-events: auto;
}
.search-toggle.is-open .search-toggle__input:focus { border-bottom-color: var(--accent); }
.search-toggle__input::placeholder { color: #b8b8b8; }

/* Language switcher */
.lang { position: relative; }
.lang__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    transition: opacity .15s;
    line-height: 1;
    text-transform: uppercase;
}
.lang__trigger:hover { opacity: 0.65; }
.lang__caret { color: var(--muted); transition: transform .2s; }
.lang__trigger.is-open .lang__caret { transform: rotate(180deg); color: var(--fg); }

.lang__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--fg);
    list-style: none;
    margin: 0;
    padding: 4px;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.lang__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 9px 10px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13px;
    text-align: left;
    color: var(--fg);
    transition: background .12s;
    text-decoration: none;
}
.lang__opt:hover { background: var(--soft); }
.lang__opt.is-current { background: #f0efeb; }
.lang__opt-check { margin-left: auto; color: var(--accent-dark); }

/* Cart icon button */
.cart-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg);
    transition: opacity .15s;
    text-decoration: none;
}
.cart-icon-btn:hover { opacity: 0.65; }
.cart-icon-btn__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    background: var(--fg);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/* Search suggestions */
.search-suggestions {
    position: absolute;
    left: auto; right: 0;
    top: calc(100% + 4px);
    min-width: 320px;
    background: var(--bg);
    border: 1px solid var(--fg);
    list-style: none;
    margin: 0; padding: 4px 0;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 340px;
    overflow-y: auto;
}
.search-suggestions li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    color: var(--fg);
    font-size: .82rem;
    text-decoration: none;
    transition: background .15s;
}
.search-suggestions li a:hover { background: var(--soft); }
.search-suggestions li .sug-price {
    font-family: var(--font-mono);
    color: var(--accent-dark);
    font-size: .72rem;
}

/* ── Hero (full-viewport homepage split) ───────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: 67% 33%;
    height: 100vh;
    width: 100vw;
    background: var(--bg);
    color: var(--fg);
    position: relative;
    overflow: hidden;
}

.hero__left {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--pad);
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.hero__nav {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.hero__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--fg);
    transition: opacity .2s;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: auto;
}
.hero__logo:hover { opacity: 0.7; }
.hero__logo svg { display: block; }
.hero__logo-wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.hero__navlinks {
    display: flex;
    gap: 22px;
    min-width: 0;
    overflow: hidden;
}
.hero__navlinks a {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s;
}
.hero__navlinks a:hover { color: var(--fg); }

.hero__center {
    align-self: center;
    justify-self: center;
    width: min(720px, 90%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--muted);
    text-transform: uppercase;
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 104px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}
.hero__title em {
    font-style: italic;
    color: var(--accent-dark);
}

.hero__search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    border: 1px solid var(--fg);
    background: #fff;
    padding: 6px 6px 6px 16px;
    gap: 10px;
    transition: box-shadow .2s;
    position: relative;
}
.hero__search:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
.hero__search svg { color: var(--fg); flex-shrink: 0; }
.hero__search input[type=search],
.hero__search input[type=text] {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    padding: 12px 0;
    color: var(--fg);
    -webkit-appearance: none;
}
.hero__search input::placeholder { color: #b8b8b8; }
.hero__search button[type=submit] {
    background: var(--fg);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .2s;
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
}
.hero__search button:hover { background: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.hero__search .search-suggestions {
    top: calc(100% + 8px);
    left: 0; right: 0;
    min-width: unset;
}

.hero__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.hero__chips-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 4px;
}
.hero__chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-ui);
    text-decoration: none;
}
.hero__chip:hover { border-color: var(--accent); color: var(--accent-dark); }

.hero__footline {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Right pane — image loop */
.hero__right {
    position: relative;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}
.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease, transform 4s ease;
    will-change: opacity, transform;
    display: block;
    text-decoration: none;
}
.hero__slide.is-active {
    opacity: 1;
    transform: scale(1.04);
}
.hero__slide-meta {
    position: absolute;
    left: 16px; right: 16px; bottom: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
}
.hero__slide-counter {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0.8;
}
.hero__slide-name {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.1;
}
.hero__slide-sku {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: 0.8;
}
.hero__right::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Site Main ─────────────────────────────────────────────────────────────── */
.site-main { flex: 1; min-height: 0; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 24px var(--pad);
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
}
.footer-nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.footer-nav a {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: color .2s;
}
.footer-nav a:hover { color: var(--fg); }
.footer-copy {
    font-family: var(--font-mono);
    font-size: 11px;
    margin: 0;
    color: var(--muted);
    letter-spacing: .04em;
}

/* ── Overview / Search page ────────────────────────────────────────────────── */
.ovp { min-height: 100vh; background: #fff; }

/* Search hero */
.ovp__search-hero {
    padding: 72px var(--pad) 56px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}
.ovp__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.ovp__title em { font-style: italic; color: var(--accent-dark); }

.ovp__search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 640px;
    border: 1px solid var(--fg);
    background: #fff;
    padding: 6px 6px 6px 18px;
    gap: 12px;
    transition: box-shadow .2s;
    position: relative; /* for suggestions dropdown */
}
.ovp__search:focus-within { box-shadow: 0 0 0 3px rgba(0,0,0,0.07); }
.ovp__search svg { color: var(--fg); flex-shrink: 0; }
.ovp__search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    padding: 13px 0;
    color: var(--fg);
    -webkit-appearance: none;
}
.ovp__search input::placeholder { color: #b8b8b8; }
.ovp__search-clear {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
    width: 28px; height: 28px;
    padding: 0; line-height: 1;
    transition: color .15s;
}
.ovp__search-clear:hover { color: var(--fg); }
.ovp__search-submit {
    background: var(--fg);
    color: #fff;
    border: 0;
    padding: 13px 24px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .2s;
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
}
.ovp__search-submit:hover { background: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.ovp__search .search-suggestions {
    top: calc(100% + 8px);
    left: 0; right: 0;
    min-width: unset;
}

.ovp__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ovp__chips-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-right: 4px;
}
.ovp__chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
    font-family: var(--font-ui);
}
.ovp__chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.ovp__chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Meta bar */
.ovp__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px var(--pad);
    border-bottom: 1px solid var(--line);
}
.ovp__count {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.ovp__count em {
    font-style: normal;
    color: var(--accent-dark);
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: none;
}

/* Grid */
.ovp__grid {
    --ov-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--ov-cols), 1fr);
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

/* Empty state */
.ovp__empty {
    padding: 100px var(--pad);
    text-align: center;
    color: var(--muted);
}
.ovp__empty-title {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--fg);
    margin: 0 0 20px;
    font-weight: 400;
}
.ovp__empty-title em { font-style: italic; }
.ovp__empty .btn { margin-top: 8px; }

/* Load more */
.ovp__load-more {
    text-align: center;
    padding: 40px var(--pad);
    border-top: 1px solid var(--line);
}

/* Footer note */
.ovp__foot {
    padding: 20px var(--pad);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-top: 1px solid var(--line);
}

/* ── Product Card ──────────────────────────────────────────────────────────── */
.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
    transition: background .2s;
}
.card:hover { background: var(--soft); }

.card__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--soft);
}
.card__media canvas,
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.card:hover .card__media canvas,
.card:hover .card__media img { transform: scale(1.03); }
.card__media-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: .82rem;
}

.card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
    gap: 6px;
}
.card__name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--fg);
    text-wrap: balance;
}
.card__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: auto;
}
.card__btn {
    margin-top: 14px;
    background: transparent;
    border: 1px solid var(--fg);
    color: var(--fg);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
    text-decoration: none;
    display: block;
}
.card__btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Section layout helper ─────────────────────────────────────────────────── */
.section-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px var(--pad);
}

/* ── Product Page ──────────────────────────────────────────────────────────── */
.pp { min-height: 100vh; background: #fff; }

.pp__crumb {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 16px var(--pad);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.pp__crumb a { color: var(--muted); transition: color .15s; }
.pp__crumb a:hover { color: var(--accent-dark); }
.pp__crumb-sep { opacity: 0.5; }
.pp__crumb-current { color: var(--fg); }

.pp__main {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border-bottom: 1px solid var(--line);
}

.pp__media {
    position: relative;
    background: var(--soft);
    overflow: hidden;
    border-right: 1px solid var(--line);
    aspect-ratio: 4 / 5;
}
.pp__media canvas {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.pp__media-placeholder {
    aspect-ratio: 4 / 5;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: .82rem;
}
.pp__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.pp__info {
    padding: 64px clamp(28px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.pp__sku {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pp__sku::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
}

.pp__name {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Size selector */
.pp__sizes {
    border: 0;
    padding: 0;
    margin: 20px 0 0;
    width: 100%;
}
.pp__field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg);
    margin-bottom: 14px;
    padding: 0;
}

.pp__size-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pp__size {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.pp__size:hover { background: var(--soft); }
.pp__size input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }

.pp__size-radio {
    display: inline-block;
    width: 22px; height: 22px;
    border: 1.5px solid #c8c8c8;
    background: #fff;
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s;
}
.pp__size-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--accent);
    border-radius: 1px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity .15s, transform .15s;
}
.pp__size.is-active { background: var(--accent-soft); border-color: var(--accent); }
.pp__size.is-active .pp__size-radio { border-color: var(--accent); }
.pp__size.is-active .pp__size-radio::after { opacity: 1; transform: scale(1); }

.pp__size-text {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    color: var(--fg);
}
.pp__size-label { font-weight: 500; }
.pp__size-dims { color: var(--muted); font-size: 13px; }

.pp__size-price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    letter-spacing: .02em;
    white-space: nowrap;
}
.pp__size.is-active .pp__size-price { color: var(--accent-dark); font-weight: 500; }

/* Buy row */
.pp__buy { margin-top: 22px; }
.pp__add {
    width: 100%;
    background: var(--fg);
    color: #fff;
    border: 0;
    padding: 0 24px;
    height: 52px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 3px solid var(--accent);
    transition: background .2s, border-color .2s, transform .1s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pp__add:hover { background: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.pp__add:active { transform: translateY(1px); }
.pp__add:disabled { opacity: 0.6; cursor: default; transform: none; }

.pp__feedback {
    margin-top: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
}
.pp__feedback.success { background: var(--accent-soft); color: var(--accent-dark); }
.pp__feedback.error   { background: #fde8e8; color: #c0392b; }

.pp__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 8px;
}
.pp__already {
    background: var(--accent-soft);
    padding: 12px 16px;
    font-size: .82rem;
    color: var(--accent-dark);
    margin-top: 8px;
}
.pp__already a { color: var(--accent-dark); text-decoration: underline; }

/* Related products */
.pp__related { padding: 72px 0 0; }
.pp__related-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 var(--pad) 28px;
    gap: 24px;
}
.pp__related-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -0.01em;
}
.pp__related-all {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-dark);
    transition: opacity .15s;
    text-decoration: none;
    white-space: nowrap;
}
.pp__related-all:hover { opacity: 0.7; }

.pp__related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ── About Page ────────────────────────────────────────────────────────────── */
.ab { min-height: 100vh; background: #fff; }

.ab__hero {
    padding: 88px var(--pad) 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--line);
}
.ab__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--accent-dark);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ab__eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px; height: 1px;
    background: var(--accent);
}
.ab__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.ab__title em { font-style: italic; color: var(--accent-dark); }
.ab__lede {
    margin: 0;
    max-width: 620px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Story split */
.ab__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
}
.ab__split-media {
    background: var(--soft);
    border-right: 1px solid var(--line);
    overflow: hidden;
}
.ab__split-body {
    padding: 80px clamp(28px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 620px;
}
.ab__split-body h2 {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.ab__split-body p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
    text-wrap: pretty;
}
.ab__split-body p:last-child { margin-bottom: 0; }

/* CTA */
.ab__cta {
    padding: 96px var(--pad) 112px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: var(--accent-soft);
}
.ab__cta h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ab__cta p { margin: 0; color: var(--muted); font-size: 15px; }
.ab__cta-btn {
    display: inline-block;
    margin-top: 14px;
    background: var(--fg);
    color: #fff;
    padding: 16px 28px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--accent);
    transition: background .2s, border-color .2s;
    text-decoration: none;
}
.ab__cta-btn:hover { background: var(--accent-dark); border-bottom-color: var(--accent-dark); color: #fff; }

/* ── Cart Drawer ───────────────────────────────────────────────────────────── */
.cart__scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
    z-index: 50;
}
.cart__scrim.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
    position: fixed;
    top: var(--header-h, 65px); right: 0;
    height: calc(100vh - var(--header-h, 65px));
    width: min(420px, 100%);
    background: #fff;
    z-index: 51;
    transform: translateX(100%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--pad);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cart-drawer__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
}
.cart-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--fg);
    display: flex;
    align-items: center;
    opacity: 0.55;
}
.cart-drawer__close:hover { opacity: 1; }
.cart-drawer__body { flex: 1; overflow-y: auto; }
.cart-drawer__empty {
    padding: 64px var(--pad);
    text-align: center;
    color: var(--muted);
    font-family: var(--font-display);
    font-style: italic;
    font-size: .9rem;
}
.cart-drawer__item {
    display: grid;
    grid-template-columns: 68px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 16px var(--pad);
    border-bottom: 1px solid var(--line);
}
.cart-drawer__thumb {
    width: 68px;
    height: 68px;
    background: var(--soft);
    overflow: hidden;
    flex-shrink: 0;
}
.cart-drawer__thumb canvas,
.cart-drawer__thumb img { width: 68px; height: 68px; object-fit: cover; display: block; }
.cart-drawer__info { min-width: 0; }
.cart-drawer__name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: .85rem;
    margin: 0 0 3px;
    line-height: 1.3;
}
.cart-drawer__meta {
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--accent);
    margin: 0;
}
.cart-drawer__price {
    font-family: var(--font-mono);
    font-size: .85rem;
    white-space: nowrap;
}
.cart-drawer__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.2rem;
    padding: 4px 2px;
    line-height: 1;
}
.cart-drawer__remove:hover { color: #c0392b; }
.cart-drawer__foot {
    border-top: 1px solid var(--line);
    padding: 20px var(--pad);
    flex-shrink: 0;
}
.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
}
.cart-drawer__subtotal strong { font-size: .88rem; }

/* ── Cart page ─────────────────────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.empty-cart { text-align: center; padding: 100px 20px; }
.empty-cart p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 28px;
}
.cart-item {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.cart-item-info { flex: 1; }
.cart-item-title { margin: 0 0 4px; font-size: .9rem; font-weight: 400; font-family: var(--font-display); font-style: italic; }
.cart-item-option { margin: 0 0 4px; font-size: .75rem; color: var(--muted); font-family: var(--font-mono); }
.cart-item-note { margin: 0; font-size: .72rem; color: #bbb; }
.cart-item-price { font-family: var(--font-mono); font-size: .9rem; white-space: nowrap; color: var(--fg); }
.cart-remove {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; color: #ccc; line-height: 1;
    padding: 0 4px; transition: color var(--transition);
}
.cart-remove:hover { color: #c0392b; }
.cart-summary {
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 28px;
}
.cart-summary h2 { margin: 0 0 20px; font-size: 1rem; font-family: var(--font-display); font-style: italic; }
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: .82rem; color: var(--muted); }
.summary-total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; font-size: .9rem; color: var(--fg); font-weight: 600; }

/* ── Checkout ──────────────────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.checkout-form h2 { margin: 0 0 20px; font-size: 1.1rem; }
.checkout-notice { font-size: .75rem; color: var(--muted); margin-top: 14px; text-align: center; }
.order-summary { background: var(--soft); border: 1px solid var(--line); padding: 28px; }
.order-summary h2 { margin: 0 0 18px; font-size: 1rem; font-family: var(--font-display); font-style: italic; }
.order-line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: .82rem; color: var(--muted); }
.order-line small { display: block; color: var(--muted); font-size: .72rem; font-family: var(--font-mono); }
.order-total { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; font-size: .88rem; color: var(--fg); font-weight: 600; }
.order-summary hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-family: var(--font-mono);
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=url],
.form-group input[type=number],
.form-group input[type=password],
.form-group select,
.form-group textarea {
    display: block; width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--fg);
    background: var(--bg);
    transition: border-color .2s, box-shadow .2s;
    border-radius: 0;
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(105,176,122,.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-errors { background: #fde8e8; border: 1px solid #f5c6cb; padding: 10px 14px; margin-bottom: 18px; color: #c0392b; font-size: .82rem; }
.form-errors p { margin: 4px 0; }
.help-text { font-size: .75rem; color: var(--muted); margin-top: 5px; display: block; }

/* ── Order complete ────────────────────────────────────────────────────────── */
.order-success-icon {
    width: 64px; height: 64px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.order-details-box { background: var(--soft); border: 1px solid var(--line); padding: 28px; margin-top: 28px; }
.order-details-box h2 { margin: 0 0 14px; font-size: 1rem; }
.order-details-box p { margin: 5px 0; font-size: .82rem; }
.order-items-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: .82rem; }
.order-items-table th {
    text-align: left; padding: 8px; border-bottom: 1px solid var(--line);
    font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
    font-weight: 400;
}
.order-items-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.order-items-table tfoot td { font-weight: 600; border-top: 1px solid var(--line); }

/* ── Account ───────────────────────────────────────────────────────────────── */
.account-banner { background: var(--soft); border: 1px solid var(--line); padding: 16px 20px; margin-bottom: 24px; font-size: .82rem; color: var(--muted); }
.account-banner a { color: var(--accent-dark); font-weight: 600; }

/* ── Page content (About/Contact) ─────────────────────────────────────────── */
.page-content { line-height: 1.85; color: var(--muted); font-size: 15px; }
.page-content h2, .page-content h3 { color: var(--fg); margin-top: 32px; }
.page-content a { color: var(--accent-dark); }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--fg);
    color: #fff;
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: 0;
    transition: all .25s;
    z-index: 60;
    pointer-events: none;
    white-space: nowrap;
}
.toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.cart-feedback { margin-top: 10px; padding: 10px 14px; font-size: .8rem; }
.cart-feedback.success { background: var(--accent-soft); color: var(--accent-dark); }
.cart-feedback.error   { background: #fde8e8; color: #c0392b; }
.already-in-cart { background: var(--accent-soft); padding: 11px 16px; color: var(--accent-dark); margin-bottom: 14px; font-size: .82rem; }
.already-in-cart a { color: var(--accent-dark); font-weight: 600; text-decoration: underline; }
.digital-notice {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--muted);
    margin-top: 12px;
    line-height: 1.6;
    letter-spacing: .02px;
}
.no-image-svg { width: 100%; height: 100%; object-fit: contain; padding: 20px; opacity: .35; }

/* Gallery thumbnails (product detail) */
.gallery-thumbs { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.gallery-thumb {
    width: 64px; height: 64px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .5;
    transition: opacity .2s, border-color .2s;
    pointer-events: auto;
}
.gallery-thumb.active, .gallery-thumb:hover { opacity: 1; border-color: var(--accent); }
.gallery-canvas { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* Page title (generic pages) */
.page-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 400;
    margin: 0 0 24px;
    letter-spacing: -.02em;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .hero__navlinks { display: none; }
    .site-navlinks  { display: none; }
}

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; grid-template-rows: 1fr 35vh; height: auto; min-height: 100vh; }
    .hero__right { position: relative; }
    .ovp__grid { --ov-cols: 2 !important; }
    .pp__main { grid-template-columns: 1fr; }
    .pp__media { border-right: 0; border-bottom: 1px solid var(--line); }
    .pp__info { padding: 40px var(--pad); }
    .pp__related-grid { grid-template-columns: repeat(2, 1fr); }
    .ab__split { grid-template-columns: 1fr; }
    .ab__split-media { border-right: 0; border-bottom: 1px solid var(--line); }
    .ab__split-body { padding: 56px var(--pad); max-width: 100%; }
    .cart-layout { grid-template-columns: 1fr; }
    .checkout-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    :root { --pad: 16px; }
    .ovp__grid { --ov-cols: 1 !important; }
    .hero__navlinks { display: none; }
    .hero__search button[type=submit] { padding: 12px 14px; font-size: 11px; }
    .ovp__search-submit { padding: 13px 14px; font-size: 11px; }
    .form-row { grid-template-columns: 1fr; }
    .section-inner { padding: 36px var(--pad); }
}

/* ── Legal pages (Privacy / Terms) ─────────────────────────────────────────── */
.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px var(--pad) 80px;
}
.legal-page__hero {
    margin-bottom: 48px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
}
.legal-page__hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 400;
    margin: 0;
    color: var(--fg);
}
.legal-page__block {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
}
.legal-page__block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}