/* ================= Ursa (Simple) — flat, thick-line storefront ================= */

:root {
    --ink: #000000;
    --bear: #000000;      /* accents are black now (brown lives only in the logo) */
    --bear-dark: #222222;
    --bg: #ffffff;
    --bg-2: #f5f5f5;
    --paper: #ffffff;
    --line: 3px;
    /* Secondary boxes — product, custom-order and review cards — outline in
       grey so the black rules stay for the things that lead a section. Every
       box being the same heavy black flattens the hierarchy. */
    --line-soft: #d4d4d4;
    /* Outer edges of the product and review cards — they still have to define a
       box people click, so they sit between the soft grey and black. Internal
       dividers and image frames stay soft. */
    --line-mid: #8a8a8a;
    /* Secondary text — dates, variant names, the "made to order" note. Not the
       same grey as --line-mid despite starting out that way: a border only has
       to clear 3:1, text has to clear 4.5:1, and #8a8a8a on white is 3.45:1.
       #767676 is the darkest grey that passes, and the difference is invisible
       next to a border drawn in the old one. */
    --muted: #767676;
    /* Body copy that is not a heading — product descriptions, the section
       leads, the "Secure checkout" line. Softer than --ink so a paragraph does
       not compete with the words above it, far darker than --muted because it
       is the text someone actually reads.

       It was #4a4038 in fourteen places, left over from the brown palette:
       black accents everywhere else and a brown paragraph beside them reads as
       a mistake rather than a warmth, which is what it was. Brown lives only in
       the logo now, so a warm grey has nothing left to be warm with. */
    --ink-soft: #3a3a3a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: Arial, Helvetica, system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 720px; }

/* Text for screen readers only — where an icon carries the meaning on screen. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

h1, h2, h3, h4, h5 { line-height: 1.1; }

/* ---- Buttons: plain, thick border, square ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-weight: 700; font-size: 1rem;
    padding: 13px 24px;
    border: var(--line) solid var(--ink);
    background: var(--paper); color: var(--ink);
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-primary { background: var(--bear); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--bear-dark); color: #fff; }
.btn-ghost { background: var(--paper); }
.btn-block { width: 100%; max-width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Top banner ---- */
.top-banner {
    background: var(--ink); color: #fff; text-align: center;
    font-size: .8rem; font-weight: 800; letter-spacing: .06em;
    padding: 10px 16px; text-transform: uppercase;
}

/* ---- Language picker ----
   src/components/LanguagePicker.astro. Built to match .region-picker below,
   deliberately: they sit in the same header, they are both "change a setting"
   and not "go to a page", and two dropdowns that looked different would read
   as two different kinds of thing.

   Landscape, and one ratio for both — public/flags/4x3/ holds a 4:3 drawing of
   each. Not the real ones (Norway's is 22:16, the Union Jack's 2:1), because
   two flags of different heights sitting one above the other in the dropdown
   is the thing that looks wrong; and not squares, which was the attempt before
   this one. A flag reads as a flag at 4:3.

   The hairline gives the white edge of a flag like Norway's something to sit
   against; the header drops it, see .nav-lang below. */
.lang-flag {
    width: 24px; height: 18px; flex-shrink: 0; display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.lang-picker { position: relative; }
.lang-toggle {
    display: flex; align-items: center; gap: 7px;
    height: 48px; padding: 0 11px;
    background: var(--paper); color: var(--ink);
    border: var(--line) solid var(--ink);
    font-family: inherit; cursor: pointer;
}
.lang-toggle:hover { background: var(--bg-2); }
.lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px;
    background: var(--paper); border: var(--line) solid var(--ink);
    box-shadow: 6px 6px 0 rgba(0,0,0,.12);
    display: none; flex-direction: column; z-index: 60;
}
.lang-picker.open .lang-dropdown { display: flex; }

.lang-option {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; text-decoration: none;
    font-weight: 800; font-size: .92rem; color: var(--ink);
}
.lang-option:hover { background: var(--bg-2); }
/* Inverted rather than ticked, like the currency dropdown — the row you are on
   is the one you can already see the flag of on the button. */
.lang-option.active { background: var(--ink); color: #fff; }
.lang-option.active .lang-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

/* ---- Made in Norway — flag banner ----
   A bordered box at container width, sitting under the story copy rather than
   bleeding to the page edges. Built like the hero inside: photo pinned with
   inset:0 (a percentage height collapses against the img's own height
   attribute), scrim over it, copy on top. The photo puts the flag hard right
   against empty sky, so the copy takes the left. */
.norway-band {
    position: relative; display: flex; align-items: center; overflow: hidden;
    /* 28px, not the 44px this had while a paragraph sat above it: the
       Instagram box does now, and a bordered box already reads as an edge —
       44px more of white under it left the flag looking unmoored. */
    margin-top: 28px; min-height: clamp(260px, 24vw, 340px);
    border: var(--line) solid var(--ink);
}
.norway-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
/* The sky is a mid blue that white text only just clears at the top and fails
   against lower down. Darken the left, leave the flag untouched. */
.norway-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,0) 74%); }
.norway-copy { position: relative; color: #fff; padding: 30px 34px; max-width: 56%; }
.norway-copy h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 900; margin-bottom: 10px; }
.norway-copy p { font-size: 1.02rem; font-weight: 600; color: #f0f0f0; }

/* Narrow screens have no room beside the flag, so fade from the bottom
   instead of the side — same fix the hero uses. */
@media (max-width: 860px) {
    .norway-band { min-height: 320px; align-items: flex-end; margin-top: 32px; }
    .norway-img { object-position: center 50%; }
    .norway-scrim { background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.78) 100%); }
    .norway-copy { max-width: none; padding: 24px 22px 26px; }
}

/* ---- Nav ---- */
/* The bar's underline is 2px grey, not the 3px black of --line — it runs the full
   width on every page, so at full weight it reads heavier than the rules that are
   actually leading a section. */
#navbar { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 2px solid var(--line-mid); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo img { height: 50px; display: block; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1rem; }
.nav-links a:hover { color: var(--bear); }

.cart-btn {
    position: relative; background: var(--bear); color: #fff;
    border: var(--line) solid var(--ink);
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cart-btn:hover { background: var(--bear-dark); }
.cart-count {
    position: absolute; top: -8px; right: -8px; background: var(--ink); color: #fff;
    font-size: .72rem; font-weight: 900; min-width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); padding: 0 4px;
}

/* Two copies of the picker, one per breakpoint — see LanguagePicker.astro.
   The mobile one lives in .nav-links, which is the hamburger panel below
   860px and the horizontal link list above it, so it has to be hidden here or
   it would sit in the middle of the desktop nav. */
.nav-lang-row { display: none; }
/* No box in the header. The account and cart controls beside it are bare
   icons, so a bordered button around the flag read as a form field dropped
   into the nav — the flag is the control. The footer keeps its box, because
   there it stands next to the boxed currency picker instead. */
.nav-lang { margin-right: 0; }
.nav-lang .lang-toggle {
    background: none; border: none; padding: 0 6px; gap: 5px;
}
.nav-lang .lang-toggle:hover { background: none; opacity: .6; }
/* The button's flag only. The ones in the dropdown sit on white and still need
   the hairline, or Norway's white border bleeds into the panel. */
.nav-lang .lang-toggle .lang-flag { box-shadow: none; }

/* Hamburger — injected by cart.js, only shown on mobile (see media query) */
.nav-hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 11px;
    background: var(--paper); border: var(--line) solid var(--ink); cursor: pointer;
}
.nav-hamburger span { display: block; height: 3px; width: 100%; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
#navbar.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#navbar.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
#navbar.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Hero: full-bleed photo, copy overlaid ----
   The image is pinned with inset:0 rather than sized with height:100%. It
   carries width/height attributes, and a percentage height would collapse to
   that intrinsic height and crop the landscape into a tall slice. */
.hero { position: relative; display: flex; align-items: center; min-height: min(68vh, 560px); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
/* Without a scrim the headline sits on bare leather and loses all contrast. */
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.52) 42%, rgba(0,0,0,.08) 78%); }
.hero-copy { position: relative; color: #fff; padding-top: 48px; padding-bottom: 48px; }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.hero-sub { font-size: 1.1rem; max-width: 560px; margin: 16px 0 24px; font-weight: 600; color: #f0f0f0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* The ghost button is invisible on a dark photo in its default black-on-white. */
.hero .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); }
/* Knockout label: a solid white box with the photo showing through the letters.
   `screen` leaves white as white and turns black fully transparent, so painting
   the text black punches it out of the fill — no clipping path needed.

   Hover drops the blend and empties the box out to the ghost treatment beside
   it: white edge, white label, photo through the middle. */
.hero .btn-primary {
    background: #fff; color: #000; border-color: #fff;
    mix-blend-mode: screen;
}
.hero .btn-primary:hover {
    mix-blend-mode: normal;
    background: transparent; color: #fff; border-color: #fff;
}

/* ---- Sections ---- */
.section { padding: 96px 0; }
.section-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; text-align: center; letter-spacing: -.02em; margin-bottom: 12px; }
.section-title.left { text-align: left; }
.section-lead { text-align: center; max-width: 600px; margin: 0 auto 40px; font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
/* Paired with .section-title.left — the auto margin has to go too, or the copy
   left-aligns inside a block that is still centred in the container. */
.section-lead.left { text-align: left; max-width: 640px; margin-left: 0; }
/* The prose under the /products/ grid. Same measure as the lead above it. */
.products-about { max-width: 640px; margin-top: 64px; }
.products-about h2 { font-size: 1.5rem; font-weight: 900; margin-bottom: 12px; }
.products-about p { font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
.products-about a { color: var(--ink); text-decoration: underline; }

/* ---- Belts ---- */
.products { border-top: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); }
.belt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
/* start, not center: the /products/ heading and lead are left-aligned like
   every other section on the site, and a centred grid under them left the
   cards floating off the text's left edge whenever the row wasn't full. */
.products-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: start; gap: 24px; }
.product-card { text-decoration: none; color: var(--ink); }
.product-card .belt-body { gap: 6px; padding: 18px 20px; }
.product-card .belt-name { font-size: 1.25rem; }
.product-card .belt-price { font-size: 1.15rem; }
.product-card:hover .belt-name { text-decoration: underline; }
.belt-card { min-width: 0; background: var(--paper); border: 2px solid var(--line-mid); display: flex; flex-direction: column; }
.belt-media { position: relative; background: #fff; border-bottom: 2px solid var(--line-soft); }
.belt-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; cursor: pointer; }
.belt-media-link { display: block; }
/* Two badges sit in this corner and they have to read as one system: the
   bestseller one, and whatever else the admin puts in `tag` — which on the
   40 mm belts is the width, on every card and on the product page. One
   geometry for both; only the fill tells them apart, solid ink for a plain
   label and inverted for the shout. Inverted rather than coloured — the
   palette is black on white with heavy rules (brown lives only in the logo),
   so a cream or red badge was the one thing on the card that came from
   somewhere else.

   Square, no radius: every box on this site is square — the cards, the
   buttons, the accordions, the image frames — so a rounded badge was the only
   corner on the page that wasn't. What was wrong with the old one was its
   size, not its corners. */
.belt-tag {
    position: absolute; top: 12px; left: 12px;
    background: var(--ink); color: #fff;
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
    font-weight: 900; font-size: .72rem; letter-spacing: .09em;
    padding: 6px 11px; text-transform: uppercase;
    line-height: 1.1; z-index: 2;
}
.belt-tag--bestseller {
    background: #fff;
    color: var(--ink);
    /* 2px, matching the card's own outline — the badge sits on photographs
       that are mostly white, so a hairline would leave it floating. */
    border: 2px solid var(--ink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
}
.belt-thumbs {
    display: flex; gap: 8px; max-width: 100%; padding: 10px;
    border-bottom: 2px solid var(--line-soft); background: var(--bg);
    overflow-x: auto; scrollbar-width: none;
}
.belt-thumbs::-webkit-scrollbar { display: none; }
.belt-thumb { width: 50px; height: 50px; border: 1px solid var(--line-soft); overflow: hidden; cursor: pointer; flex-shrink: 0; opacity: .5; background: #fff; }
.belt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.belt-thumb.active { opacity: 1; }

/* ---- Colour switcher ----
   Between the photo strip and the name, and only on a belt that has another
   colour. A colour is a separate product here (src/lib/variants.js), so a chip
   is a real link to that product's page — app.js turns the click into an
   in-place swap of the whole card, and without it the link simply navigates.

   Its own band rather than more rows inside .belt-thumbs: the two strips are
   both squares of leather and would read as one gallery, when one changes the
   photo and the other changes the product. The label is what separates them. */
.belt-colours { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-bottom: 2px solid var(--line-soft); }
.belt-colour-label {
    font-size: .72rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
/* The colour's name is product data, not a label — it keeps its own case. */
.belt-colour-label b { color: var(--ink); font-weight: 900; text-transform: none; letter-spacing: .02em; font-size: .82rem; }
/* The /products/ card is one link around photo + name + price, with the swatch
   row outside it — a link inside a link is markup no two browsers agree on. */
.product-card-link { display: block; color: inherit; text-decoration: none; }

.belt-colour-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Tighter on the catalogue card, which is shorter than the homepage's on
   purpose: smaller chips, and the label folds onto the same row as them. */
.belt-colours--compact { padding: 0 16px 14px; gap: 6px; border-bottom: none; }
.belt-colours--compact .belt-colour-label { font-size: .78rem; }
.belt-colours--compact .belt-swatch img { width: 34px; height: 34px; }

.belt-swatch { display: block; border: 2px solid var(--line-soft); background: #fff; line-height: 0; cursor: pointer; }
.belt-swatch img { width: 44px; height: 44px; object-fit: cover; display: block; }
.belt-swatch:hover { border-color: var(--line-mid); }
.belt-swatch.active { border-color: var(--ink); }

.belt-body { padding: 20px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.belt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.belt-name { font-size: 1.5rem; font-weight: 900; color: var(--ink); text-decoration: none; }
a.belt-name:hover { text-decoration: underline; }
.belt-price { font-size: 1.4rem; font-weight: 900; color: var(--bear); }
.belt-price .muted { font-size: .9rem; color: var(--muted); font-weight: 700; }

/* ---- Multi-currency prices ----
   Every [data-price] holds one span per region (see priceTags() in
   src/lib/format.js). src/scripts/region.js runs blocking in <head> and puts
   data-region on <html>, so the shopper's own currency is the only one that
   ever paints — no JS swapping figures a beat after load.
   Layouts set the route's stable default on <html>: Norwegian is NO/NOK and
   English is EUROPE/EUR. Without that attribute, EUR is the safe fallback. */
[data-region-price] { display: none; }
html[data-region="NO"] [data-region-price="NO"],
html[data-region="EUROPE"] [data-region-price="EUROPE"],
html[data-region="INTERNATIONAL"] [data-region-price="INTERNATIONAL"],
html:not([data-region]) [data-region-price="EUROPE"] { display: inline; }
.belt-availability { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
.belt-desc { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: .94rem; line-height: 1.45; }
.belt-details-link { align-self: center; font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.belt-details-link:hover { color: var(--bear); }

/* ---- Wide 40 mm feature ----
   A short editorial bridge after the cards, not a duplicate product grid. The
   photo gets slightly more room than the copy so the wider cut is visible at a
   glance; the surrounding grey keeps this subordinate to the products above. */
.wide-feature {
    padding: 48px 0;
    background: var(--bg-2);
    border-bottom: var(--line) solid var(--ink);
}
.wide-feature-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 44px;
    align-items: center;
}
.wide-feature-copy h2 {
    margin: 5px 0 14px;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -.02em;
}
.wide-feature-copy > p:not(.wide-feature-eyebrow) {
    max-width: 470px;
    margin-bottom: 22px;
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 600;
}
.wide-feature-eyebrow {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.wide-feature-art {
    display: block;
    border: 2px solid var(--line-mid);
    background: #fff;
    overflow: hidden;
}
.wide-feature-art img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .25s ease;
}
.wide-feature-art:hover img { transform: scale(1.015); }

.size-label { font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.size-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.size-opt {
    min-width: 44px; padding: 8px 4px; text-align: center; font-weight: 800; font-size: .85rem;
    border: 2.5px solid var(--ink); background: #fff; cursor: pointer;
}
.size-opt:hover { background: var(--bg-2); }
.size-opt.active { background: var(--ink); color: #fff; }

/* ---- Story ----
   Heading across the top, then the copy in two columns beneath it. Splitting the
   paragraphs is what keeps the measure readable — one paragraph run across the
   full 1032px of the container would be a wall. Explicit columns rather than
   `column-count`, so each paragraph stays whole instead of breaking mid-sentence
   and the sign-off can span the pair. */
.story-inner { display: block; }
.story-head .section-title { margin-bottom: 26px; }
.story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; }
.story-copy p { font-size: 1.05rem; font-weight: 600; margin-top: 0; color: var(--ink); }
.story-copy .signature { grid-column: 1 / -1; }
/* Spans both columns like the sign-off it follows, but capped: stretched the
   full width of the section the Follow shape ends up a screen away from the
   glyph it belongs to. */
.story-copy .insta-follow { grid-column: 1 / -1; max-width: 460px; }
.signature { color: var(--ink); font-weight: 700; font-size: 1.1rem; margin-top: 18px !important; }

/* ---- Custom orders ---- */
.custom { border-top: var(--line) solid var(--ink); padding: 72px 0; }
/* Custom work is a useful secondary service, not a second product catalogue.
   Keep the image and explanations, but present them as one compact workshop
   note instead of four large cards competing with the belts above. */
.custom-inner { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 38px; align-items: stretch; }
.custom-art { position: relative; overflow: hidden; border: 1px solid var(--line-soft); background: var(--paper); }
.custom-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.custom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 20px; }
.custom-item { border-top: 1px solid var(--line-mid); padding: 14px 0 16px; }
.custom-item h3 { font-size: 1.05rem; font-weight: 900; margin-bottom: 5px; }
.custom-item p { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: .9rem; line-height: 1.42; }
.custom-cta { text-align: center; margin-top: 22px; }
.custom-cta.left { text-align: left; }

/* ---- Footer ---- */
.footer { background: var(--ink); color: #fff; padding: 50px 0 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 36px; }
.footer-brand img { height: 84px; display: block; }
.footer-brand p { margin-top: 12px; font-weight: 700; max-width: 260px; }
/* Instagram. inline-flex so the glyph and the handle sit on one baseline, and
   the same .85 → 1 opacity hover as the footer link columns, so it reads as one
   more footer link rather than a badge. */
.footer-social {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; color: #fff; text-decoration: none;
    font-weight: 800; font-size: .9rem; opacity: .85;
}
.footer-social:hover { opacity: 1; }
.footer-social svg { flex-shrink: 0; }

/* ---- Instagram (homepage, after the About sign-off) ----
   The whole box is one <a>, so the hover inverts it the way .btn does rather
   than lighting up a link inside it. Sized to sit under a paragraph, not to
   compete with the section: two lines of text and a 34px mark. The only colour
   is the gradient inside the glyph — see the note in src/templates/Home.astro. */
.insta-follow {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px; padding: 12px 16px;
    /* 2px in --line-mid, not the 3px black rule the sections use: this is a
       box you click, the same job the product and review cards do, and it is
       the smallest thing on the page — a full black rule around it outweighed
       the belts above. */
    border: 2px solid var(--line-mid);
    background: var(--paper); color: var(--ink); text-decoration: none;
}
.insta-follow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.insta-glyph { width: 34px; height: 34px; flex-shrink: 0; }
.insta-copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.insta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insta-copy strong { font-weight: 800; font-size: .98rem; }
/* "New" — the account opened in August 2026; see the note in Home.astro about
   removing it. Black, so the glyph beside it is the only colour on the box: two
   coloured marks an inch apart compete for the same glance and neither wins.
   On hover the box goes black under it, so it inverts to keep an edge. */
.insta-new {
    padding: 3px 8px;
    background: var(--ink); color: #fff;
    font-size: .66rem; font-weight: 900;
    text-transform: uppercase; letter-spacing: .09em; line-height: 1.5;
}
.insta-follow:hover .insta-new { background: #fff; color: var(--ink); }
.insta-handle { font-weight: 600; font-size: .86rem; color: var(--muted); }
.insta-follow:hover .insta-handle { color: rgba(255,255,255,.75); }
/* Looks like a .btn but is a span — a control cannot be nested in a link. Drawn
   in currentColor so it inverts with the box instead of needing its own rule. */
.insta-cta {
    flex-shrink: 0; padding: 7px 18px;
    border: 2px solid currentColor;
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem;
}

/* ---- Sizing-confidence band ---- */
.fit-band {
    background: var(--ink); color: #fff;
    border-top: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink);
    padding: 34px 0;
}
.fit-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.fit-band-copy h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 900; letter-spacing: -.02em; }
.fit-band-copy p { margin-top: 8px; font-weight: 600; color: rgba(255,255,255,.8); max-width: 620px; }
.fit-band-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    flex-shrink: 0; padding: 13px 26px;
    background: #fff; color: var(--ink); border: var(--line) solid #fff;
    font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    text-decoration: none;
}
.fit-band-btn:hover { background: transparent; color: #fff; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-cols h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; color: #999; }
.footer-cols a { display: block; color: #fff; text-decoration: none; font-weight: 700; margin-bottom: 7px; opacity: .85; }
.footer-cols a:hover { opacity: 1; }
/* 404.astro reuses this column block inside <main>, where the background is
   paper rather than the footer's black. Left alone it inherits colours picked
   for black: the links come out white on white, invisible, and the #999
   headings drop to 2.9:1. Same layout, colours that work the other way up. */
.footer-cols--light h2 { color: var(--muted); }
.footer-cols--light a { color: var(--ink); opacity: 1; }
.footer-cols--light a:hover { text-decoration: underline; }
.footer-bottom { border-top: 2px solid rgba(255,255,255,.15); text-align: center; padding: 18px; font-weight: 700; font-size: .84rem; }

/* Mailing list signup — a band of its own between the link columns and the
   currency picker. */
.footer-signup { border-top: 2px solid rgba(255,255,255,.15); padding: 26px 0 22px; }
.footer-signup-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-signup-copy h2 { font-size: 1.15rem; font-weight: 900; letter-spacing: -.01em; }
.footer-signup-copy p { margin-top: 6px; font-weight: 600; color: rgba(255,255,255,.8); }
.footer-signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-signup-form input {
    font-family: inherit; font-size: 1rem; font-weight: 600;
    padding: 12px 14px; min-width: 240px; flex: 1 1 240px;
    border: 2.5px solid #fff; background: #fff; color: var(--ink);
}
/* Same reasoning as the other form controls: the border is the field. */

/* Inverted, because --bear is black and the band is black. */
.footer-signup-form .btn { flex-shrink: 0; background: #fff; color: var(--ink); border-color: #fff; }
.footer-signup-form .btn:hover { background: var(--ink); color: #fff; border-color: #fff; }
.footer-signup-foot { padding-top: 12px; }
.footer-signup-note { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.6); max-width: 620px; }
.footer-signup-note a { color: rgba(255,255,255,.6); }
/* Empty until newsletter.js writes to it — no margin then, so the note does not
   sit a line lower on every page for the sake of a message nobody has seen. */
.newsletter-msg:not(:empty) { font-size: .9rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.newsletter-msg--error { color: #ff9c8f; }

/* Language and currency, side by side on one row — the same component shape
   twice, so the pair reads as one strip of settings rather than two features.
   Wraps to two lines on a narrow phone, which is why the gap is the same in
   both directions. */
.footer-settings {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 14px 28px; padding: 0 0 30px;
}
.footer-setting { display: flex; align-items: center; gap: 12px; }
.footer-setting-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: #999; }
/* Footer variants: both pickers sit on a dark background near the bottom of
   the page, so their dropdowns open upward instead of down off the end of it. */
.region-picker--footer .region-dropdown,
.lang-picker--footer .lang-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }

/* ---- Cart drawer ---- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 90vw;
    background: var(--bg); z-index: 100; border-left: var(--line) solid var(--ink);
    transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: var(--line) solid var(--ink); }
.cart-head h2 { font-size: 1.4rem; font-weight: 900; }
.cart-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; font-weight: 900; }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 22px; }
.cart-empty { text-align: center; color: var(--muted); font-weight: 700; margin-top: 40px; }
.cart-empty .bear-mini { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 2px solid var(--bg-2); }
.cart-item img { width: 70px; height: 70px; object-fit: cover; border: 2.5px solid var(--ink); background: #fff; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 900; font-size: 1rem; }
.cart-item-meta { font-weight: 700; color: var(--muted); font-size: .84rem; }
.cart-item-price { font-weight: 900; color: var(--bear); margin-top: 4px; }
.cart-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cart-qty button { width: 26px; height: 26px; border: 2.5px solid var(--ink); background: #fff; font-weight: 900; cursor: pointer; line-height: 1; }
.cart-qty button:hover { background: var(--bg-2); }
.cart-qty span { font-weight: 900; min-width: 18px; text-align: center; }
.cart-remove { background: none; border: none; color: #b0392b; font-weight: 800; cursor: pointer; font-size: .82rem; margin-top: 6px; }
.cart-foot { border-top: var(--line) solid var(--ink); padding: 18px 22px; }
.cart-subtotal { display: flex; justify-content: space-between; font-weight: 900; font-size: 1.2rem; margin-bottom: 12px; }
.cart-note { text-align: center; font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: 10px; }

/* ---- Toast ---- */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px);
    background: var(--ink); color: #fff; font-weight: 800; padding: 13px 22px; z-index: 120;
    border: 2px solid var(--bear); transition: transform .25s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    /* Narrow screens have no room for a side gradient — fade from the bottom
       instead so the copy keeps its contrast. */
    .hero { min-height: min(62vh, 500px); }
    .hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.72) 65%, rgba(0,0,0,.82) 100%); }
    .story-copy { grid-template-columns: 1fr; gap: 15px; }
    .belt-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Full width, like .belt-grid above it. The old 320px cap was fine while
       the grid was centred; left-aligned it just left a gutter down the right
       of any phone wider than about 380px. */
    .products-grid { grid-template-columns: minmax(0, 1fr); }
    .wide-feature { padding: 40px 0; }
    .wide-feature-inner { grid-template-columns: 1fr; gap: 28px; }
    .wide-feature-art { grid-row: 1; }
    .custom { padding: 52px 0; }
    .custom-inner { grid-template-columns: 1fr; gap: 24px; }
    /* Stacked, there is no copy column to match, so the photo goes back to its
       own aspect ratio. height:auto is required — without it the browser uses
       the img's height attribute as a CSS height and object-fit crops. */
    .custom-art { max-width: none; aspect-ratio: 16 / 9; }
    .custom-art img { position: absolute; height: 100%; }
    .custom-grid { grid-template-columns: 1fr; }
    .fit-band-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .fit-band-btn { width: 100%; }
    /* The glyph and the copy stay on one row — only the Follow shape drops
       below them, where there is no longer width for it beside the handle. */
    .insta-follow { flex-wrap: wrap; gap: 12px 14px; }
    .insta-cta { width: 100%; text-align: center; padding: 9px 18px; }
    .section { padding: 62px 0; }

    /* Mobile nav: hamburger reveals a full-width dropdown panel */
    .nav-hamburger { display: flex; }
    .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: var(--bg); border-bottom: 2px solid var(--line-mid);
        padding: 6px 0;
    }
    #navbar.nav-open .nav-links { display: flex; }
    .nav-links > li { width: 100%; }
    .nav-links > li > a { display: block; padding: 13px 24px; }

    /* Language: out of the actions strip, which has no room beside the
       hamburger, and into the bottom of the panel — as flat rows, not a second
       dropdown inside the first. Ruled off from the links above them, because
       they are a setting and not another page to visit. */
    .nav-lang { display: none; }
    .nav-lang-row { display: block; border-top: 1px solid rgba(0,0,0,.1); }
    .nav-lang-mobile { display: flex; flex-direction: column; }
    .nav-lang-mobile .lang-option { padding: 13px 24px; font-size: 1rem; }
    /* .nav-links a:hover paints links brown, which on the inverted current row
       would be brown on black. These sit inside .nav-links, so they have to say
       otherwise. */
    .nav-lang-mobile .lang-option:hover { color: var(--ink); }
    .nav-lang-mobile .lang-option.active,
    .nav-lang-mobile .lang-option.active:hover { color: #fff; }
}

/* ================================================================
   Commerce pages (account, checkout, track order) — Ursa styling
   ================================================================ */

/* ---- Nav actions + account dropdown ---- */
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Currency / region switcher */
.region-picker { position: relative; }
.region-toggle {
    display: flex; align-items: center; gap: 6px;
    height: 48px; padding: 0 12px;
    background: var(--paper); color: var(--ink);
    border: var(--line) solid var(--ink);
    font-family: inherit; font-weight: 900; font-size: .9rem; cursor: pointer;
}
.region-toggle:hover { background: var(--bg-2); }
/* min-width sized to the two entries it holds — "NOK" and "EUR", the codes
   alone. It was 190px when they were "Norway · NOK" and friends. */
.region-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 100%;
    background: var(--paper); border: var(--line) solid var(--ink);
    box-shadow: 6px 6px 0 rgba(0,0,0,.12);
    display: none; flex-direction: column; z-index: 60;
}
.region-picker.open .region-dropdown { display: flex; }
.region-dropdown button {
    padding: 12px 16px; text-align: left; background: none; border: none;
    font-family: inherit; font-weight: 800; font-size: .92rem; color: var(--ink); cursor: pointer;
}
.region-dropdown button:hover { background: var(--bg-2); }
.region-dropdown button.active { background: var(--ink); color: #fff; }
/* A plain link to /account/, not a menu — the account page already carries
   sign-out and the order history, and Track Order has its own nav tab. */
.nav-account {
    background: var(--paper); color: var(--ink);
    border: var(--line) solid var(--ink);
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav-account:hover { background: var(--bg-2); }
.nav-account.logged-in { background: var(--ink); color: #fff; }

/* ---- Shared form controls ---- */
.account-main, .checkout-main { padding-top: 40px; padding-bottom: 60px; }
.auth-card input, .change-password-form input, #addressFormEl input, #addressFormEl select,
#shippingForm input, #shippingForm select, #orderLookupForm input, #profileEditForm input,
#contactForm input, #contactForm textarea {
    width: 100%; font-family: inherit; font-size: 1rem; font-weight: 600;
    padding: 12px 14px; margin-bottom: 12px;
    border: 2.5px solid var(--ink); background: #fff; color: var(--ink);
}
/* Nothing happens on focus. The black border is the field; a shadow, a ring or
   a fill change on top of it is all decoration the form doesn't need. */
*:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.form-field input, .form-field select, .form-field textarea {
    margin-bottom: 0;
}
.form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: #3a3a3a;
}
/* Contact form */
.contact-form { max-width: 560px; margin-bottom: 8px; }
#contactForm textarea { resize: vertical; line-height: 1.5; min-height: 120px; }
#contactForm button { margin-top: 4px; }
.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1; }

.checkout-error { color: #b0392b; font-weight: 800; font-size: .9rem; margin-bottom: 12px; display: none; }
.form-success { color: #1f7a3d; font-weight: 800; font-size: .9rem; margin-bottom: 12px; }
.checkout-back-btn { background: none; border: none; color: var(--ink); font-weight: 800; cursor: pointer; font-size: .95rem; padding: 10px 0; text-decoration: none; display: inline-block; }
.checkout-back-btn:hover { text-decoration: underline; }

/* ---- Auth card ---- */
.auth-card { max-width: 440px; margin: 0 auto; background: var(--paper); border: var(--line) solid var(--ink); padding: 32px 30px; }
.auth-card h2 { font-size: 1.9rem; font-weight: 900; margin-bottom: 6px; }
.auth-subtitle { font-weight: 600; color: var(--ink-soft); margin-bottom: 22px; }
.auth-forgot { margin-top: 4px; }
.auth-forgot a, .auth-switch a, .auth-track-link { color: var(--ink); font-weight: 800; text-decoration: underline; cursor: pointer; }
.auth-switch { margin-top: 18px; font-weight: 600; }
.auth-track-link { display: inline-block; margin-top: 18px; }
/* Also the checkout's PayPal-or-card divider: same shape, so one rule rather
   than a second one that drifts. */
.auth-divider, .checkout-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: .78rem; }
.auth-divider::before, .auth-divider::after,
.checkout-or::before, .checkout-or::after { content: ""; flex: 1; height: 2px; background: var(--bg-2); }
.checkout-or[hidden] { display: none; }
.google-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px; border: 2.5px solid var(--ink); background: #fff; color: var(--ink);
    font-family: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
}
.google-btn:hover { background: var(--bg-2); }
.google-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Dashboard ---- */
.dashboard { max-width: 900px; margin: 0 auto; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dashboard-header h2 { font-size: 2rem; font-weight: 900; }
.logout-btn { background: var(--paper); border: 2.5px solid var(--ink); font-family: inherit; font-weight: 800; padding: 10px 18px; cursor: pointer; }
.logout-btn:hover { background: var(--ink); color: #fff; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dashboard-card { background: var(--paper); border: var(--line) solid var(--ink); padding: 22px 24px; }
.dashboard-card h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: 14px; }
.dashboard-card-wide, .dashboard-card-full { grid-column: 1 / -1; }
.address-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.address-card-header h3 { margin-bottom: 0; }
.address-add-btn { background: var(--paper); border: 2.5px solid var(--ink); font-family: inherit; font-weight: 800; font-size: .82rem; padding: 7px 12px; cursor: pointer; }
.address-add-btn:hover { background: var(--ink); color: #fff; }
.profile-edit-actions { display: flex; gap: 10px; align-items: center; }

/* Profile */
.profile-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-weight: 700; border-bottom: 2px solid var(--bg-2); }
.profile-row:last-child { border-bottom: none; }
.profile-label { color: var(--muted); }
.profile-google-badge { display: inline-flex; align-items: center; font-weight: 800; }

/* Orders */
.order-list { display: flex; flex-direction: column; gap: 10px; }
.order-list-empty { color: var(--muted); font-weight: 700; }
.order-row { border: 2.5px solid var(--ink); padding: 12px 16px; background: #fff; }
.order-row:hover { background: var(--bg-2); }
.order-row-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-row-id { font-weight: 900; }
.order-row-date { color: var(--muted); font-weight: 700; font-size: .88rem; }
.order-row-total { margin-left: auto; font-weight: 900; }
.order-status-badge { font-weight: 600; font-size: .75rem; text-transform: uppercase; 
letter-spacing: .05em; padding: 4px 12px; display: inline-block; }
.status-pending { background: #F5F5F5; color: #616161; }
.status-processing { background: #E3F2FD; color: #1565C0; }
.status-shipped { background: #E8EAF6; color: #283593; }
.status-delivered { background: #E8F5E9; color: #2E7D32; }

/* Order detail / track result shared */
.order-detail-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.order-detail-header h3 { margin-bottom: 0; }
.order-detail-date { color: var(--muted); font-weight: 700; font-size: .9rem; margin-bottom: 16px; }
.order-detail-items { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.order-detail-item { display: flex; align-items: center; gap: 12px; }
.order-detail-item-img img { width: 56px; height: 56px; object-fit: cover; border: 2.5px solid var(--ink); background: #fff; }
.order-detail-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.order-detail-item-name { font-weight: 900; }
.order-detail-item-variant { color: var(--muted); font-weight: 700; font-size: .86rem; }
.order-detail-item-price { font-weight: 900; }
.order-detail-shipping { margin-top: 18px; }
.order-detail-shipping h4 { font-weight: 900; margin-bottom: 6px; }
.order-detail-shipping p { font-weight: 600; }
.order-tracking-info { margin: 14px 0; padding: 14px; border: 2.5px solid var(--ink); background: var(--bg-2); }
.order-tracking-info h4 { font-weight: 900; margin-bottom: 8px; }
.tracking-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 800; text-decoration: underline; }
.tracking-number { font-weight: 800; }

/* Addresses */
.address-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.address-item { border: 2.5px solid var(--ink); padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: #fff; }
.address-item-name { font-weight: 900; }
.address-item-line { font-weight: 600; color: var(--ink-soft); font-size: .92rem; }
.address-item-actions { display: flex; gap: 8px; }
.address-action-btn { background: var(--paper); border: 2px solid var(--ink); font-family: inherit; font-weight: 800; font-size: .8rem; padding: 6px 12px; cursor: pointer; }
.address-action-btn:hover { background: var(--ink); color: #fff; }
.address-delete-btn:hover { background: #b0392b; border-color: #b0392b; }

.change-password-form { display: flex; flex-direction: column; }

/* ---- Checkout page ---- */
.checkout-page { min-height: 100vh; }
.checkout-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; border-bottom: var(--line) solid var(--ink); }
.checkout-logo img { height: 48px; display: block; }
.checkout-steps { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.checkout-step { color: var(--muted); font-size: .95rem; }
.checkout-step.active { color: var(--ink); }
.checkout-step.completed { color: var(--ink); }
.checkout-step-divider { color: #ccc; }
.checkout-main { display: grid; grid-template-columns: 1.3fr .9fr; gap: 40px; align-items: start; }
.checkout-section-title { font-size: 1.3rem; font-weight: 900; margin: 20px 0 12px; }
.checkout-form-col form:first-child .checkout-section-title:first-child { margin-top: 0; }
#payment-element { margin-bottom: 18px; }
.checkout-step-panel { display: flex; flex-direction: column; }
.checkout-success { text-align: center; padding: 20px 0; }
.checkout-success-icon { width: 60px; height: 60px; margin: 0 auto 16px; border: var(--line) solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; background: #c7ecd0; }
.checkout-success h2 { font-size: 1.8rem; font-weight: 900; margin-bottom: 8px; }
.checkout-success p { font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.checkout-order-id { font-weight: 900 !important; color: var(--ink) !important; }
.post-order-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }

/* Checkout summary */
.checkout-summary { background: var(--paper); border: var(--line) solid var(--ink); padding: 22px 24px; position: sticky; top: 24px; }
.checkout-summary h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: 16px; }
.summary-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--bg-2); }
/* The last item's rule is redundant with whatever follows it, and on the
   payment step — where the discount link that used to fill the gap is hidden —
   it left two horizontal lines a few pixels apart. Separators go between
   items, not under the last one. */
.summary-item:last-child { border-bottom: none; }
.summary-item-img img { width: 60px; height: 60px; object-fit: cover; border: 2.5px solid var(--ink); background: #fff; }
.summary-item-info { flex: 1; min-width: 0; }
.summary-item-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.summary-item-name { font-weight: 900; }
.summary-item-price { font-weight: 900; }
.summary-item-variant { color: var(--muted); font-weight: 700; font-size: .86rem; }
.summary-divider { height: 2px; background: var(--ink); margin: 14px 0; }
.summary-row { display: flex; justify-content: space-between; font-weight: 700; margin: 8px 0; }
.summary-total { font-weight: 900; font-size: 1.2rem; }
#summaryDiscountRow span:last-child { color: #1f7a3d; }
/* Returns and card handling, under the total. Quiet on purpose — it is there
   to be found by someone hesitating, not to compete with the figure above. */
.summary-reassurance { margin: 12px 0 0; color: var(--muted); font-weight: 700; font-size: .82rem; line-height: 1.5; }

/* Discount code (checkout summary) */
/* No rule above it any more, so it needs its own gap off the item list. */
.promo-box { margin: 14px 0 0; }
/* The link that opens the field. Drawn as the checkout's other text controls
   are, so it does not read as a second thing to fill in. */
.promo-toggle { background: none; border: none; padding: 0; color: var(--muted); font-family: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.promo-toggle:hover { color: var(--ink); }
.promo-entry { margin-top: 10px; }
.promo-input-row { display: flex; gap: 8px; }
.promo-input-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 2.5px solid var(--ink); background: #fff; font-family: inherit; font-weight: 700; font-size: .95rem; }

.promo-input-row .btn { flex: 0 0 auto; padding: 10px 16px; }
#promoError { margin-top: 10px; margin-bottom: 0; }
.applied-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; border: 2.5px solid var(--ink); background: var(--bg-2); padding: 8px 12px; }
.applied-promo-code { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.applied-promo-remove { background: none; border: none; font-size: 1.3rem; line-height: 1; font-weight: 900; cursor: pointer; color: var(--ink); padding: 0 4px; }
.applied-promo-remove:hover { color: #b0392b; }

/* Quantity stepper (checkout summary) */
.qty-stepper { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-btn { width: 24px; height: 24px; border: 2px solid var(--ink); background: #fff; font-weight: 900; cursor: pointer; line-height: 1; }
.qty-btn:hover { background: var(--bg-2); }
/* Locked on the payment step, where changing the total would cancel the
   PaymentIntent the card form is holding. Faded rather than hidden: the
   summary is what the shopper is reading at that point. */
.qty-btn:disabled { cursor: default; opacity: .3; }
.qty-btn:disabled:hover { background: #fff; }
.qty-value { font-weight: 900; min-width: 16px; text-align: center; }

/* ---- Track order timeline ---- */
.track-timeline { display: flex; align-items: center; margin: 20px 0; }
.track-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.track-step-dot { width: 20px; height: 20px; border: 2.5px solid var(--ink); background: #fff; border-radius: 50%; }
.track-step.active .track-step-dot { background: var(--ink); }
.track-step span { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.track-step.active span { color: var(--ink); }
.track-step-line { flex: 1; height: 2.5px; background: #ccc; margin: 0 4px 22px; }
.track-step-line.active { background: var(--ink); }

/* ---- Commerce responsive ---- */
@media (max-width: 860px) {
    .checkout-main { grid-template-columns: 1fr; }
    .checkout-summary { position: static; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .address-list { grid-template-columns: 1fr; }
    .checkout-steps { display: none; }
}

/* ---- Legal / policy pages ---- */
.legal { padding: 48px 0 72px; }
.legal h1 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.legal .legal-updated { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 30px; }
.legal .legal-intro { font-size: 1.02rem; margin-bottom: 8px; }
.legal h2 { font-size: 1.2rem; font-weight: 800; margin: 34px 0 10px; }
.legal h3 { font-size: 1rem; font-weight: 800; margin: 22px 0 8px; }
/* Cookie names in the privacy policy, where "_ga" needs to read as a literal
   string rather than as prose. */
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: var(--bg-2); padding: 1px 5px; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--ink); text-decoration: underline; }
/* A .btn on one of these pages is still a button. The rule above is a class
   plus an element and outranks .btn-primary's own colour, so without this the
   label comes out ink-on-ink — unreadable — and underlined. */
.legal a.btn { text-decoration: none; }
.legal a.btn-primary { color: #fff; }
.legal address { font-style: normal; line-height: 1.7; }
.legal .legal-box { border: var(--line) solid var(--ink); padding: 18px 20px; margin: 18px 0; background: var(--bg-2); }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.legal th, .legal td { border: 2px solid var(--ink); padding: 9px 11px; text-align: left; font-size: .95rem; }
.legal th { background: var(--bg-2); font-weight: 800; }
.legal .legal-toc { border: var(--line) solid var(--ink); padding: 16px 20px; margin: 8px 0 28px; }
/* The measuring illustrations on /belt-size-guide/. Side by side, because the
   pair is the point — the low-rise one and the high-waisted one are the same
   drawing apart from where the tape sits, and stacked they read as two
   pictures of the same thing. They stack anyway below 620px, where half a
   column is too small to see a waistband in.

   Bordered: they are drawn on white and so is the page, so without it they
   have no edges and read as part of the text column rather than as pictures of
   something. Same 3px rule as .legal-box and the table. height: auto because
   the width is 100% — without it the width/height attributes win and the
   drawing is squashed. */
.legal .guide-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 16px; }
.legal .guide-figure { margin: 0; }
.legal .guide-figure img { display: block; width: 100%; height: auto; border: var(--line) solid var(--ink); }
.legal .guide-figure figcaption { font-size: .88rem; font-weight: 800; color: var(--muted); margin-top: 7px; }
@media (max-width: 620px) {
    .legal .guide-figures { grid-template-columns: 1fr; gap: 18px; }
}
.legal .legal-toc a { display: inline-block; margin: 3px 14px 3px 0; font-weight: 700; }

/* ---- Guides and workshop articles ---- */
.guides-page { padding: 52px 24px 80px; }
.guides-header { max-width: 760px; margin-bottom: 34px; }
.guides-header h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 14px; }
.guides-header p { max-width: 680px; color: var(--ink-soft); font-size: 1.05rem; font-weight: 600; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.guide-card { border: var(--line) solid var(--ink); background: #fff; display: flex; flex-direction: column; }
.guide-card-image { display: block; overflow: hidden; border-bottom: var(--line) solid var(--ink); aspect-ratio: 4 / 3; }
.guide-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.guide-card:hover .guide-card-image img { transform: scale(1.02); }
.guide-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px; }
.guide-card-tag { font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.guide-card h2 { margin: 8px 0 10px; font-size: 1.25rem; line-height: 1.18; }
.guide-card h2 a { color: var(--ink); text-decoration: none; }
.guide-card p { color: var(--ink-soft); font-weight: 600; margin-bottom: 18px; }
.guide-card-link { color: var(--ink); font-weight: 900; margin-top: auto; text-underline-offset: 3px; }
.article-back { display: inline-block; margin-bottom: 20px; font-size: .88rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.article-page .article-hero { margin: 26px 0 30px; }
.article-page .article-hero img { display: block; width: 100%; height: auto; border: var(--line) solid var(--ink); }
.article-page .article-hero figcaption { margin-top: 8px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.article-page .article-summary { border: var(--line) solid var(--ink); background: var(--bg-2); padding: 20px 22px; margin: 28px 0; }
.article-page .article-summary h2 { margin-top: 0; }
.article-page .article-summary ol { margin: 0 0 0 20px; }
.article-page .article-cta { margin-top: 34px; }
.custom-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 30px; }
.custom-options-grid section { border: var(--line) solid var(--ink); padding: 18px 20px; background: var(--bg-2); }
.custom-options-grid h3 { margin-top: 0; }
.custom-options-grid p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
    .guides-grid { grid-template-columns: 1fr; }
    .guide-card { display: grid; grid-template-columns: minmax(180px, .75fr) 1fr; }
    .guide-card-image { border-bottom: 0; border-right: var(--line) solid var(--ink); aspect-ratio: auto; }
}
@media (max-width: 620px) {
    .guides-page { padding-top: 38px; }
    .guide-card { display: flex; }
    .guide-card-image { border-right: 0; border-bottom: var(--line) solid var(--ink); aspect-ratio: 4 / 3; }
    .custom-options-grid { grid-template-columns: 1fr; }
}

/* ================= Product page ================= */
.pdp-page { padding-top: 20px; }
.pdp-back {
    display: inline-block; margin: 0 0 12px; font-weight: 800; font-size: .95rem;
    color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink);
}
.pdp-back:hover { background: var(--ink); color: #fff; }

.pdp-grid {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
    align-items: start; padding-bottom: 64px;
}
/* Gallery top-left, buy panel top-right, details tucked under the gallery so
   the right column stays airy.

   The buy panel spans both rows rather than sitting in the first one. In one
   row it set that row's height — it is the taller of the two — and the details
   began below the *payment icons*, leaving a hand's width of white under the
   thumbnails. Spanning, the first row is the gallery's height and the details
   follow it directly. A buy panel longer than the whole left column still
   pushes them down, but by the overflow rather than by its full height. */
.pdp-gallery { grid-column: 1; grid-row: 1; }
.pdp-info { grid-column: 2; grid-row: 1 / span 2; }
/* One gap for every box in this column, made-to-order and accordions alike —
   they are the same shape, so the space above the first accordion has to be
   the space between the rest of them. This gap and .pdp-accordions' must
   stay equal, and .pdp-accordions must carry no margin of its own. */
.pdp-details { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 10px; }

/* Gallery */
.pdp-stage {
    position: relative; border: var(--line) solid var(--ink); background: #fff; overflow: hidden;
}
.pdp-main-img {
    width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; cursor: zoom-in;
}
.pdp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); cursor: pointer;
}
.pdp-arrow svg { width: 22px; height: 22px; display: block; }
.pdp-arrow:hover { background: var(--ink); color: #fff; }
.pdp-prev { left: 12px; }
.pdp-next { right: 12px; }
.pdp-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumb {
    width: 68px; height: 68px; border: 2.5px solid var(--ink); overflow: hidden;
    cursor: pointer; flex-shrink: 0; opacity: .5; background: #fff; padding: 0;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.active { opacity: 1; }

/* Info column */
.pdp-info { display: flex; flex-direction: column; gap: 9px; }
.pdp-name { display: flex; flex-direction: column; gap: 5px; font-size: 2.4rem; font-weight: 900; }
.pdp-price { font-size: 1.85rem; font-weight: 900; color: var(--bear); }
.pdp-price .muted { font-size: .95rem; color: var(--muted); font-weight: 700; }
.pdp-desc { font-weight: 600; color: var(--ink-soft); font-size: 1.02rem; }
/* One row of equal cells that share the panel width — the same single-row look
   as the homepage size picker. flex:1 keeps every quick size on one line. */
.pdp-info .size-picker {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
/* line-height: 1, and that is the whole reason these read as squares now.
   Nine cells sharing the panel come out about 44px wide; the padding was set
   to match that, but the inherited body line-height added another 6px of line
   box on top of it and the boxes stood a size taller than they were wide. The
   height is the padding and the digits, nothing else. */
.pdp-info .size-opt { flex: 1 1 0; min-width: 0; padding: 12px 4px; font-size: .95rem; line-height: 1; }
@media (max-width: 420px) {
    /* Narrower cells, so less padding — the two have to move together or the
       squares go back to being portrait on a phone. */
    .pdp-info .size-opt { padding: 10px 2px; font-size: .85rem; }
}

.pdp-size-definition {
    margin: -3px 0 1px; color: var(--ink-soft); font-size: .84rem;
    font-weight: 700; line-height: 1.45;
}

/* Custom to-the-cm size. Belts are made to order, so any whole cm in range is a
   real variant; this field lets shoppers pick one that isn't a round quick size. */
.size-custom { margin-top: 8px; }
.size-custom-label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px; }
.size-custom-row {
    display: inline-flex; align-items: stretch; max-width: 170px;
    border: 2.5px solid var(--ink); background: #fff;
}
.size-custom-input {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 10px 12px; font: inherit; font-weight: 800; font-size: .95rem;
    -moz-appearance: textfield; appearance: textfield;
}

.size-custom-input::-webkit-outer-spin-button,
.size-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.size-custom-unit {
    display: flex; align-items: center; padding: 0 12px;
    /* Not var(--muted): #767676 clears 4.5:1 on white but only reaches 4.16
       against the --bg-2 fill this sits on. #666 is 5.3:1 there. */
    font-weight: 800; color: #666;
    border-left: 2.5px solid var(--ink); background: var(--bg-2);
}
.size-custom-msg { display: block; margin-top: 6px; font-size: .82rem; font-weight: 700; color: #3a7a3a; min-height: 1.05em; }
.size-custom-msg.is-error { color: #b23b3b; }

.pdp-info .btn { margin-top: 6px; }
.pdp-note { font-size: .85rem; font-weight: 700; color: var(--muted); }

/* Made-to-order box: same shape as the accordions below. Only the title strip
   carries the leather texture (URL from --made-bg, set inline since it's a
   hashed build asset); the opened panel is plain white with dark text, exactly
   like the other accordions. --bear-dark is the fallback fill for the strip. */
.pdp-made { border: 2.5px solid var(--ink); background: var(--paper); }
.pdp-made summary {
    list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 800;
    display: flex; justify-content: space-between; align-items: center;
    color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    background-color: var(--bear-dark);
    background-image: var(--made-bg, none);
    background-size: cover; background-position: center;
}
/* The shared .pdp-acc-body has no top padding, so its first paragraph sits 6px
   under the summary while 22px (16px padding + the 6px margin) sits below it —
   unnoticeable under a plain summary, lopsided under this one's dark strip. */
.pdp-made .pdp-acc-body { padding-top: 16px; }
.pdp-made summary::-webkit-details-marker { display: none; }
.pdp-made summary::after { content: "+"; font-size: 1.4rem; color: #fff; font-weight: 900; }
.pdp-made[open] summary::after { content: "\2013"; }

/* Specs */
.pdp-specs { list-style: none; }
.pdp-specs li {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 9px 0; border-bottom: 2px solid #ececec;
}
.pdp-specs li span:first-child {
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    font-size: .74rem; color: #6a6a6a;
}
.pdp-specs li span:last-child { font-weight: 700; color: var(--ink); font-size: .95rem; }

/* Product variants. Colour is the primary visual decision; width is a quieter
   text switch beneath it, so two independent axes do not look like two rows of
   competing product cards. */
.pdp-colour-selector { display: flex; flex-direction: column; gap: 8px; margin: 5px 0 6px; }
.pdp-colour-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pdp-colour-option {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 11px;
    min-width: 0; padding: 5px; color: var(--ink); text-decoration: none;
    border: 2px solid var(--line-mid); background: #fff;
    font-size: .92rem; font-weight: 800;
}
.pdp-colour-option img { width: 64px; height: 64px; object-fit: cover; display: block; }
.pdp-colour-option:hover { border-color: var(--ink); background: var(--bg-2); }
.pdp-colour-option.active { border: 3px solid var(--ink); padding: 4px; background: var(--bg-2); }

.pdp-width-link {
    align-self: flex-start; color: var(--muted); font-size: .84rem; font-weight: 700;
    text-decoration: none;
}
.pdp-width-link span {
    color: var(--ink); font-weight: 800; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.pdp-width-link:hover span { color: var(--bear); }

/* Delivery estimate, between the button and the trust row. Filled by
   delivery.js, which cannot write a word until the country lookup returns —
   a network round-trip on a first visit.

   So the row holds its space from first paint and only its contents are
   invisible: min-height is exactly one line (.92rem × the 1.6 body
   line-height), and [data-pending] hides the text rather than the box. It was
   display:none until filled, which made it a *new* flex item in .pdp-info a
   beat after load — 16px of column gap plus 12px of margin plus the line —
   and pushed .pdp-trust and everything below it ~54px down. That was the
   whole of this site's Cumulative Layout Shift.

   `hidden` still collapses it completely, for the one case with nothing to
   say at all: no URSA_SHIPPING, no transit window, no date. A blank strip
   under the button is worse than no strip when the row is never coming. */
.pdp-delivery {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 2px;
    min-height: 1.6em;
    font-size: .92rem; font-weight: 700; color: var(--ink);
}
.pdp-delivery[data-pending] { visibility: hidden; }
.pdp-delivery[hidden] { display: none; }
/* Top-aligned, not centred: the range wraps to two lines on a narrow screen,
   and a flag floating between them reads as a bullet for both. The nudge puts
   it on the middle of the first line.

   height:auto because flags are not all 3:2 — Switzerland is square — and the
   width/height on the tag is only there to reserve the space. The hairline is
   load-bearing: without it the white half of the Japanese or Finnish flag has
   no edge against the page. */
.pdp-flag {
    width: 22px; height: auto; flex-shrink: 0; margin-top: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Same trick as the row: the empty <img> keeps its 22×15 box while the flag
   loads, so the file arriving cannot re-wrap the sentence next to it. Only a
   shopper we have no country for loses the box, and that one takes `hidden`. */
.pdp-flag[data-pending] { visibility: hidden; }

/* Trust / payment */
.pdp-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.pdp-secure {
    display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.pdp-secure svg { width: 16px; height: 16px; }
.pay-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-ico {
    width: 42px; height: 27px; display: block;
    padding: 4px 6px; background: #fff;
    border: 1px solid #e6e6e6; border-radius: 4px;
    object-fit: contain;
}

/* Accordions */
.pdp-accordions { display: flex; flex-direction: column; gap: 10px; }
.pdp-accordions details { border: 2.5px solid var(--ink); background: var(--paper); }
.pdp-accordions summary {
    list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 800;
    display: flex; justify-content: space-between; align-items: center;
}
.pdp-accordions summary::-webkit-details-marker { display: none; }
.pdp-accordions summary::after { content: "+"; font-size: 1.4rem; color: var(--bear); font-weight: 900; }
.pdp-accordions details[open] summary::after { content: "\2013"; }
.pdp-acc-body { padding: 0 16px 16px; font-weight: 600; color: #2a2a2a; font-size: .95rem; }
.pdp-acc-body p { margin: 6px 0; }
.pdp-acc-body ul { margin: 8px 0; padding-left: 18px; }
.pdp-acc-body li { margin: 3px 0; }

/* ---- Reviews ---- */
.pdp-reviews { margin-top: 56px; padding-top: 32px; border-top: var(--line) solid var(--ink); }
.pdp-reviews-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.pdp-reviews-head h2 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

.reviews-summary { display: flex; align-items: center; gap: 8px; }
.rev-stars { display: inline-flex; letter-spacing: 1px; font-size: 1.05rem; line-height: 1; }
.rev-star { color: #d5d5d5; }
.rev-star.on { color: #f5b301; }
.rev-avg { font-weight: 900; }
.rev-count { color: #6a6a6a; font-weight: 600; font-size: .92rem; }
.rev-none { color: #6a6a6a; font-weight: 600; font-size: .92rem; }

.reviews-actions { margin: 18px 0 4px; }
.rev-signin { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.rev-signin a { color: var(--ink); font-weight: 800; text-decoration: underline; }

/* Review list — no boxes.
   A boxed review reads as a form field, and a column of heavy black outlines
   fights the product photos above it for weight. The classic shape for a run of
   testimonials is entries separated by a hairline: the stars and the name lead,
   the rule only says where one person stops and the next begins. */
.reviews-list { margin-top: 24px; display: flex; flex-direction: column; }
.rev-empty { color: #6a6a6a; font-weight: 600; }
.rev-card { padding: 22px 0; border-top: 1px solid var(--line-soft); }
.rev-card:first-child { border-top: 0; padding-top: 6px; }
.rev-card:last-child { padding-bottom: 6px; }
.rev-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rev-card-head .rev-stars { align-self: center; }
.rev-author { font-weight: 800; }
/* Was a black outline inside a black outline. Small caps in grey carries the
   same claim without adding a second box to the page. */
.rev-verified {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #7a7a7a;
}
/* Which colour the review was written on, and only when that is not the colour
   being looked at. The star rating is the whole group's now — the colours are
   one belt in two dyes — so without this a review praising the cognac reads as
   a review of the photo above it. Same small caps as the verified badge: it is
   provenance, not a second heading. */
.rev-colour {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #7a7a7a;
}
.rev-date { color: var(--muted); font-weight: 600; font-size: .85rem; margin-left: auto; }

/* ---- Homepage review strip (baked five-star cards, each links to a product) ----
   One row that scrolls sideways, three cards at a time, rather than a grid that
   wraps. The track is a real overflow container so it stays swipeable on touch
   and keyboard-scrollable with no JS; app.js only adds the arrows. */
/* Grey rather than a photo. It's the last band on the page and it needs an edge
   the white section above it doesn't have, but a second photo would only compete
   with the belt shots — and grey puts the white cards back to reading as cards.
   The top rule is black like every other section rule — over grey it reads as a
   divider rather than the heavy edge it was over the photo. */
/* A literal rather than --bg-2: that token is the site's grey everywhere else and
   this band wants to sit a shade lighter, just off white. */
.reviews-strip { position: relative; overflow: hidden; background: #fafafa; border-top: var(--line) solid var(--ink); }
/* The bear, oversized and walking out of the right edge. The mark is the one
   piece of artwork the brand already owns, so it earns its place here in a way a
   stock photo never did. `multiply` drops the crop's white background without
   needing a cut-out PNG; the cards are opaque, so it only shows in the gutter and
   above the row. Decorative — no alt text to give, hence a pseudo-element. */
.reviews-strip::before {
    content: "";
    position: absolute; right: -60px; bottom: -20px;
    width: min(660px, 58%); aspect-ratio: 950 / 520;
    background: url("/images/bear-mark.png") right bottom / contain no-repeat;
    mix-blend-mode: multiply; opacity: .16;
    pointer-events: none;
}
.reviews-strip > .container { position: relative; }
.rev-strip-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.rev-strip-top .section-title { margin-bottom: 8px; }
.rev-strip-top .section-lead { margin: 0; }
.rev-nav { display: flex; gap: 8px; flex: none; }
.rev-arrow {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border: var(--line) solid var(--ink); background: var(--paper);
    font-family: inherit; font-size: 1.15rem; font-weight: 900; color: var(--ink); cursor: pointer;
}
.rev-arrow:hover:not(:disabled) { background: var(--ink); color: #fff; }
.rev-arrow:disabled { opacity: .28; cursor: default; }
/* grid-auto-columns, not a fixed width — three cards plus two gaps fill the
   container exactly at any width. */
.rev-strip-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.rev-strip-track::-webkit-scrollbar { display: none; }
.rev-strip-card {
    position: relative; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 9px;
    background: var(--paper); border: 2px solid var(--line-mid);
    padding: 16px 18px; color: var(--ink); text-decoration: none;
}
/* Corner glyph in place of the old footer rule and "See the X belt" line. The
   card was already the link, so the footer was spending a divider and a row of
   height on saying so a second time. */
.rev-strip-open {
    position: absolute; top: 13px; right: 14px;
    width: 17px; height: 17px; color: #9a9a9a;
}
.rev-strip-open svg { width: 100%; height: 100%; display: block; }
.rev-strip-card:hover .rev-strip-open { color: var(--ink); }
/* Room for the glyph, so a long name never runs under it. */
.rev-strip-head { display: flex; align-items: center; gap: 11px; padding-right: 24px; }
.rev-strip-headtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rev-strip-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 900; font-size: .94rem; line-height: 1.2; }
.rev-strip-date { color: var(--muted); font-weight: 700; font-size: .76rem; }
/* Small fixed square — same size whether it's a buyer photo or the product shot. */
.rev-strip-photo {
    flex: none; width: 54px; height: 54px; overflow: hidden;
    border: 1px solid var(--line-soft); background: var(--bg-2);
}
.rev-strip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev-strip-content {
    font-weight: 600; color: var(--ink-soft); font-size: .88rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Which belt the review is about, under the quote it left. Muted and small —
   it is context for the card, not another headline competing with the name
   at the top. */
.rev-strip-product {
    margin-top: 8px; color: var(--muted); font-weight: 800; font-size: .74rem;
    text-transform: uppercase; letter-spacing: .05em;
}
@media (max-width: 900px) {
    .rev-strip-track { grid-auto-columns: calc((100% - 16px) / 2); }
    .rev-strip-top { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) { .rev-strip-track { grid-auto-columns: 84%; } }
.rev-main { display: flex; gap: 20px; align-items: flex-start; margin-top: 10px; }
.rev-body { flex: 1; min-width: 0; }
/* Set a line taller than the page copy: this is the one block on the page
   written by someone else, and it should read like quoted text rather than
   another paragraph of ours. The leading carries that on its own — it was
   also a weight lighter, at 500, and against a site that is 600 everywhere
   and 800 upwards for anything bold, one paragraph at 500 did not read as
   quoted, it read as faint. The homepage strip was already 600. */
.rev-content { font-weight: 600; font-size: .97rem; line-height: 1.7; color: var(--ink-soft); white-space: pre-wrap; }
.rev-photos { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; width: 172px; justify-content: flex-end; }
.rev-photo { display: block; width: 76px; height: 76px; border: 1px solid var(--line-soft); overflow: hidden; }
.rev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Review form */
.review-form { margin-top: 20px; border: var(--line) solid var(--ink); padding: 20px; background: var(--bg-2); }
.review-form h3 { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.rev-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.rev-field label { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.rev-field label .muted { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rev-field input[type=text], .rev-field textarea {
    font-family: inherit; font-size: 1rem; padding: 10px 12px;
    border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.rev-field textarea { resize: vertical; }

.rev-field-row { display: flex; gap: 14px; }
.rev-field-row .rev-field { flex: 1; }

.rev-rate { display: inline-flex; gap: 2px; }
.rev-rate-star {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    font-size: 1.9rem; line-height: 1; color: #d5d5d5;
}
.rev-rate-star.on { color: #f5b301; }

.rev-photo-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.rev-photo-preview img { width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--ink); }

.rev-form-actions { display: flex; gap: 10px; }
.rev-form-msg { font-weight: 700; font-size: .9rem; }
.rev-form-msg.error { color: #b00020; margin-bottom: 10px; }
.rev-thanks {
    margin-top: 20px; border: var(--line) solid var(--ink); padding: 18px 20px;
    font-weight: 800; background: var(--bg-2);
}

/* ---- Rating under the product title ---- */
/* No margin: .pdp-info is a flex column with a fixed gap, so any margin here
   would stack on top of that gap and make the space above ≠ below. */
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0; align-self: flex-start; text-decoration: none; color: var(--ink); }
.pdp-rating-count { font-weight: 700; font-size: .9rem; color: #6a6a6a; text-decoration: underline; }
.pdp-rating:hover .pdp-rating-count { color: var(--ink); }
.card-rating { gap: 7px; }
.card-rating .rev-stars { font-size: .92rem; }
.card-rating .pdp-rating-count { font-size: .82rem; }
.product-card .card-rating .pdp-rating-count { text-decoration: none; }

/* ---- Size guide link + modal ---- */
.size-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.size-guide-link {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.size-guide {
    display: none; position: fixed; inset: 0; z-index: 210;
    background: rgba(0, 0, 0, .55); align-items: center; justify-content: center; padding: 20px;
}
.size-guide.open { display: flex; }
.size-guide-box {
    position: relative; background: var(--paper); border: var(--line) solid var(--ink);
    max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px;
}
.length-guide-box { max-width: 520px; }
.size-guide-box h3 { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.size-guide-box p { font-weight: 500; color: #2a2a2a; margin: 8px 0; }
.size-guide-measure { margin: 14px 0 12px; }
.size-guide-measure img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.size-guide-measure figcaption { margin-top: 6px; color: var(--ink-soft); font-size: .82rem; font-weight: 800; line-height: 1.4; }
.size-guide-lead { font-weight: 800 !important; margin-top: 16px !important; }
.size-guide-steps { margin: 6px 0 4px; padding-left: 20px; }
.size-guide-steps li { font-weight: 500; color: #2a2a2a; margin: 8px 0; }
.size-guide-note { font-size: .9rem; color: var(--ink-soft); border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 14px !important; }
/* The way out of the modal to the full page. Underlined text rather than a
   button: the button in this part of the page is Add to cart, and a second
   one beside it competing for the same attention is not what the link is for. */
.size-guide-more { display: inline-block; margin-top: 4px; font-weight: 800; font-size: .9rem; color: var(--ink); text-decoration: underline; }
.size-guide-close {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
    background: transparent; border: 2.5px solid var(--ink); font-size: 1rem; font-weight: 900; cursor: pointer;
}
.size-guide-close:hover { background: var(--ink); color: #fff; }

.size-links { display: inline-flex; align-items: center; gap: 8px; }
.size-links-sep { font-size: .8rem; color: var(--muted); font-weight: 700; user-select: none; }

.width-guide-box { max-width: 520px; }
.width-guide-img {
    width: 100%; height: auto; border: 2px solid var(--ink);
    margin: 10px 0 14px; display: block;
}
.width-guide-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
}
@media (max-width: 500px) {
    .width-guide-grid { grid-template-columns: 1fr; gap: 8px; }
}
.width-guide-card {
    background: var(--bg); border: 1.5px solid var(--line-mid); padding: 12px 14px;
}
.width-guide-card h3 {
    font-size: .88rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
    color: var(--bear); margin-bottom: 4px;
}
.width-guide-card p {
    font-size: .84rem !important; margin: 0 !important; color: #333; line-height: 1.45;
}
.guide-figure--wide { max-width: 100%; margin: 16px 0; }
.guide-figure--wide img { width: 100%; height: auto; border: 2px solid var(--ink); }

/* ---- Sticky mobile add-to-cart ---- */
.pdp-sticky {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    align-items: center; gap: 14px; padding: 10px 16px;
    background: var(--paper); border-top: var(--line) solid var(--ink);
    transform: translateY(110%); transition: transform .22s ease;
}
.pdp-sticky.show { transform: translateY(0); }
.pdp-sticky-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pdp-sticky-name { font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky-price { font-weight: 900; }
.pdp-sticky .btn { margin-left: auto; white-space: nowrap; padding: 12px 20px; }

@media (max-width: 860px) {
    /* Only phones get the sticky bar; .show is toggled by product.js. */
    .pdp-sticky { display: flex; }
}

/* Zoom lightbox */
.pdp-lightbox {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, .92); align-items: center; justify-content: center;
}
.pdp-lightbox.open { display: flex; }
.pdp-lb-stage {
    max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pdp-lb-stage img {
    max-width: 92vw; max-height: 88vh; object-fit: contain; display: block;
    cursor: zoom-in; transition: transform .12s ease;
}
.pdp-lb-stage img.zoomed { transform: scale(2); cursor: zoom-out; }
.pdp-lb-close {
    position: absolute; top: 18px; right: 20px; width: 46px; height: 46px;
    background: transparent; color: #fff; border: 2.5px solid #fff; font-size: 1.3rem;
    font-weight: 900; cursor: pointer;
}
.pdp-lb-close:hover { background: #fff; color: #000; }
.pdp-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 54px; height: 54px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; border: 2.5px solid #fff; cursor: pointer;
}
.pdp-lb-nav svg { width: 26px; height: 26px; display: block; }
.pdp-lb-nav:hover { background: #fff; color: #000; }
.pdp-lb-prev { left: 20px; }
.pdp-lb-next { right: 20px; }

@media (max-width: 860px) {
    .pdp-page { padding-top: 20px; }
    .pdp-grid { grid-template-columns: 1fr; gap: 24px; }
    /* One column: fall back to DOM order — gallery, buy panel, then details. */
    .pdp-gallery, .pdp-info, .pdp-details { grid-column: auto; grid-row: auto; }
    .pdp-name { font-size: 2rem; }
    .pdp-lb-nav { width: 44px; height: 44px; font-size: 1.5rem; }
    .pdp-lb-prev { left: 8px; }
    .pdp-lb-next { right: 8px; }
}

/* ================= Cookie consent bar ================= */
/* Hidden until public/consent-ui.js opens it, so returning visitors who already
   answered never see it flash. Page furniture, not a modal: it sits above the
   nav but *below* the cart drawer's overlay, so opening the cart dims it along
   with everything else instead of leaving it floating beside the drawer. */
.consent-bar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 24px;
    background: var(--paper); border-top: var(--line) solid var(--ink);
}
.consent-bar.open { display: flex; }
.consent-text { font-weight: 600; font-size: .92rem; color: var(--ink-soft); max-width: 720px; }
.consent-text a { color: var(--ink); font-weight: 800; text-decoration: underline; }

/* Both buttons are plain `.btn` — same size, same weight, same colours. Reject
   has to look exactly as available as Accept or the consent isn't freely given,
   so neither gets .btn-primary. */
.consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.consent-actions .btn { min-width: 130px; }

@media (max-width: 720px) {
    .consent-bar { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
    .consent-actions .btn { flex: 1; min-width: 0; }
    .rev-field-row { flex-direction: column; gap: 0; }
    /* Narrow screens: photos drop under the text and span full width. */
    .rev-main { flex-direction: column; gap: 12px; }
    .rev-photos { width: auto; justify-content: flex-start; }
}