/* SHAPELY storefront — Poudré Atelier.
 *
 * Tokens are lifted from direction 26 in the client prototype: dusty rose on
 * warm off-white, EB Garamond for display and Figtree for body, square corners
 * with pill buttons, 3/4 portrait crops and borderless cards.
 */

:root {
    --bg: #f8f1ef;
    --surface: #fffdfc;
    --alt: #eddedb;
    --ink: #2f2224;
    --muted: #96797c;
    --line: rgba(47, 34, 36, .13);
    --accent: #ad6a6a;
    --on-accent: #fffdfc;

    --shadow: 0 18px 40px rgba(120, 80, 80, .10);
    --pad: 54px;
    --gap: 28px;

    /* The header is sticky, so anything else that pins has to clear it. This
       tracks the rendered header height, which the colour bar makes taller.
       Pinned elements spell out calc(var(--hdr-h) + 20px) themselves rather
       than share a --sticky-top: a derived variable declared here would
       substitute --hdr-h against :root and ignore the override on body. */
    --hdr-h: 144px;

    --display: "EB Garamond", Georgia, serif;
    --body: "Figtree", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.02;
    margin: 0;
}

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 12px; top: 12px; z-index: 100;
    background: var(--ink); color: var(--surface);
    padding: 10px 16px;
}

.kicker {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
}

.lede {
    font-size: 17px;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 0 26px;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 13px 30px;
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: .02em;
    cursor: pointer;
}
.btn:hover { background: #96595a; border-color: #96595a; color: var(--on-accent); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.btn--ghost:hover { background: var(--alt); color: var(--ink); border-color: var(--alt); }

/* ---------------------------------------------------------------- announce */

/* Scrolls away rather than pinning: the sticky header below it is what should
   stay, and two stacked bars would eat the top of every screen. */
.announce {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    background: var(--ink);
    color: var(--bg);
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}
.announce__short { display: none; }
.announce__tel { white-space: nowrap; }
.announce__tel:hover { color: #fff; }

/* ------------------------------------------------------------------ header */

.hdr {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.hdr__row {
    display: grid;
    /* minmax(0, ...) on every track: an auto track sizes to its content and
       will happily push the whole document wider than the viewport. */
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 20px var(--pad);
}

.hdr__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 13px;
    letter-spacing: .04em;
}
.hdr__nav--right { justify-content: flex-end; }

.hdr__mark {
    display: grid;
    justify-items: center;
    gap: 2px;
}
.hdr__word {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: .22em;
    padding-left: .22em;
}
.hdr__legend {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.tonebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px var(--pad);
    background: var(--alt);
    font-size: 13px;
}
.tonebar__dot {
    width: 16px; height: 16px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.tonebar__name { font-weight: 500; }
.tonebar__note { color: var(--muted); }
.tonebar__clear { margin-left: auto; color: var(--accent); }

/* The colour bar is part of the sticky header, so it pushes everything that
   pins below it further down. */
body.has-tonebar { --hdr-h: 188px; }

/* -------------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding: 56px 0;
}
/* The 404 shares the hero shell but has no photography behind it. */
.hero--slim {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 46vh;
    align-content: center;
    padding: 76px var(--pad) 60px;
}
.hero--slim h1 { font-size: 56px; margin: 14px 0 18px; }

/* The seam between the two shots is deliberately hairline, so the card reads as
   sitting on one image rather than bridging a gap. */
.hero__duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}
.hero__shot { display: block; }
.hero__shot img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: saturate(.98) brightness(1.03);
}

.hero__card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(624px, calc(100% - var(--pad) * 2));
    padding: clamp(38px, 3.7vw, 53px) clamp(30px, 4vw, 58px);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-align: center;
}
.hero__card .kicker { font-size: 12px; margin-bottom: 17px; }
/* Capped at the full size on a wide screen and eased down on narrow desktops:
   the shots behind are square, so a fixed-height card would overhang them once
   the viewport drops near the mobile breakpoint. */
.hero__card h1 {
    font-size: clamp(46px, 4.7vw, 67px);
    margin: 17px 0 22px;
}
.hero__card .lede { margin: 0 auto; max-width: 480px; font-size: 18px; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 29px;
}
.hero__card .btn { padding: 15px 34px; font-size: 15px; }

.hero__note {
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--muted);
}

/* -------------------------------------------------------------- categories */

/* Five photo panels under the hero — same strip as the live site / Poudré board.
   Labels sit on pills over the photograph; the tile itself is the hit target. */
.cats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding: 0 var(--pad) 44px;
}
.cats__tile {
    position: relative;
    display: block;
    overflow: hidden;
    color: var(--ink);
}
.cats__tile img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .45s ease;
}
.cats__tile:hover img { transform: scale(1.03); }
.cats__label {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: var(--surface);
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
}

/* ------------------------------------------------------------------ ticker */

.ticker {
    background: var(--accent);
    color: var(--on-accent);
    padding: 16px 0;
    overflow: hidden;
}
.ticker__mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px,
                        #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px,
                #000 calc(100% - 56px), transparent 100%);
}
.ticker__run {
    display: flex;
    width: max-content;
    will-change: transform;
    /* Duration is set in px/s by the ticker inline script once the strip is
       wide enough to fill the viewport; 38s is only the no-JS fallback. */
    animation: ticker-run 38s linear infinite;
}
.ticker__pass {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    white-space: nowrap;
}
.ticker__pass span {
    font-size: 14px;
    letter-spacing: .10em;
    font-weight: 400;
}
.ticker__swan {
    flex-shrink: 0;
    width: 26px; height: 26px;
    opacity: .85;
    filter: brightness(0) invert(1);
}

/* Two identical passes; -50% is exactly one of them, so the handoff is a
   continuation rather than a rewind to the first phrase. */
@keyframes ticker-run {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__run { animation: none; }
}

/* ------------------------------------------------------------ tone studio */

.tone {
    padding: 70px var(--pad);
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.tone__head h2 { font-size: 38px; margin: 0 0 14px; }

.tone__grid {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: 26px 40px;
    margin-top: 34px;
}
.tone__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}
.tone__dot {
    grid-row: 1 / 3;
    width: 36px; height: 36px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    transition: transform .15s ease;
}
.tone__item:hover .tone__dot { transform: scale(1.08); }
.tone__item.is-active .tone__dot {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.tone__name { font-size: 14px; }
.tone__count { font-size: 12px; color: var(--muted); }

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

.grid-section { padding: 70px var(--pad); }

.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: 38px; }

.grid {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr: product names are long and unbroken, and
       a plain 1fr track refuses to shrink below its content. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px var(--gap);
}

.card__shot { position: relative; }
.card__shot img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    filter: saturate(.98) brightness(1.03);
}
.card__blank {
    aspect-ratio: 3 / 4;
    background: var(--alt);
}
/* Discount moved to the right corner when the plate arrived, so a bag that is
   both discounted and made to order shows both. */
.card__sale {
    position: absolute;
    top: 12px; right: 12px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}
.card__flag {
    position: absolute;
    top: 12px; left: 12px;
    max-width: calc(100% - 24px);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}
.card__flag--order { color: var(--accent); }
.card__name {
    font-size: 19px;
    margin: 16px 0 6px;
}
.card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--muted);
}
.card__dot {
    width: 11px; height: 11px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.card__material::before { content: "·"; margin-right: 8px; }
.card__price { margin: 0; font-size: 15px; }
.card__price s { color: var(--muted); margin-right: 8px; }

/* Held back a little from the bags that are ready in the chosen colour, so the
   grid reads as "these, then these to order" without a second heading. */
.card--made .card__shot img { opacity: .9; }
.card__made {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--accent);
}

.section-more { margin-top: 44px; text-align: center; }

/* ---------------------------------------------------------------- listing */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px var(--pad) 0;
    font-size: 12px;
    color: var(--muted);
}
.crumbs a::after { content: " /"; color: var(--muted); }

.listing-head { padding: 26px var(--pad) 0; }
.listing-head h1 { font-size: 46px; }
.listing-count { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

.cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px var(--pad) 0;
}
.cat-nav__item {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    white-space: nowrap;
}
.cat-nav__item:hover { background: var(--alt); color: var(--ink); }
.cat-nav__item.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}
.cat-nav__n { color: var(--muted); font-size: 11px; margin-left: 4px; }
.cat-nav__item.is-active .cat-nav__n { color: rgba(255, 255, 255, .6); }
.cat-nav__item--sale { color: var(--accent); border-color: var(--accent); }
.cat-nav__item--sale:hover { background: var(--accent); color: var(--on-accent); }

.tone-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 26px var(--pad) 0;
}
.tone-strip__all {
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
}
.tone-strip__all.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tone-strip__dot span {
    display: block;
    width: 26px; height: 26px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.tone-strip__dot.is-active span {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.toolbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 26px var(--pad);
    font-size: 13px;
}
.toolbar__sorts, .toolbar__filters { display: flex; gap: 18px; }
.toolbar a { color: var(--muted); }
.toolbar a.is-active { color: var(--ink); border-bottom: 1px solid var(--accent); }

.grid + .pager, .pager { padding: 44px var(--pad) 70px; }
.pager {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.empty { padding: 70px var(--pad); text-align: center; color: var(--muted); }

/* Listing pages put the grid at the page level rather than in a section. */
.listing-head ~ .grid { padding: 0 var(--pad); }

/* -------------------------------------------------------------------- pdp */

.pdp {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 54px;
    padding: 26px var(--pad) 70px;
    align-items: start;
}

.pdp__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.pdp__shot { margin: 0; }
.pdp__shot--lead { grid-column: 1 / -1; }
.pdp__shot img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    filter: saturate(.98) brightness(1.03);
}

/* Pinned below the sticky header while the gallery scrolls past. Keep this
   block short: a sticky box taller than the viewport cannot pin at the top, it
   just scrolls until its bottom shows, which hides the name. Long copy belongs
   in .pdp__about. */
.pdp__panel { position: sticky; top: calc(var(--hdr-h) + 20px); }
.pdp__panel h1 { font-size: 40px; margin-bottom: 18px; }

/* The rule is inset to the content width, so it reads as a divider under the
   product rather than a full-bleed band. */
.pdp__about {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: 54px;
    align-items: start;
    margin: 0 var(--pad);
    padding: 40px 0 70px;
    border-top: 1px solid var(--line);
}
.pdp__about-copy { max-width: 62ch; }
.pdp__about-copy .kicker { margin: 0 0 16px; }

.pdp__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 26px;
    font-size: 24px;
}
.pdp__price s { font-size: 16px; color: var(--muted); }
.pdp__badge {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
}

.specs {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 18px;
    margin: 0 0 30px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.specs dt { color: var(--muted); }
.specs dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.specs__dot {
    width: 13px; height: 13px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.pdp__tone-label {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.pdp__tone-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__tone-dot span {
    display: block;
    width: 28px; height: 28px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.pdp__tone-dot.is-active span {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.pdp__tone-note { font-size: 13px; color: var(--accent); margin: 14px 0 0; }

.pdp__buy { margin: 30px 0; }

.prose { font-size: 15px; }
.prose p { margin: 0 0 14px; }

.pdp__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.pdp__tags a {
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 14px;
}

.pdp__delivery {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.pdp__delivery h2 { font-size: 22px; margin-bottom: 14px; }
.pdp__delivery ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.pdp__delivery li { margin-bottom: 6px; }

/* ------------------------------------------------------------------ story */

.story {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 54px;
    padding: 70px var(--pad);
    background: var(--surface);
    border-top: 1px solid var(--line);
    align-items: center;
}
.story h2 { font-size: 36px; margin-bottom: 20px; }
.story p { color: var(--muted); margin: 0 0 16px; max-width: 48ch; }
.story__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.story__shots img { aspect-ratio: 3 / 4; object-fit: cover; }

.values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    padding: 70px var(--pad);
}
.values h3 { font-size: 20px; margin-bottom: 10px; }
.values p { color: var(--muted); font-size: 14px; margin: 0; }

/* ----------------------------------------------------------------- footer */

.ftr {
    background: var(--ink);
    color: var(--bg);
    padding: 64px var(--pad) 30px;
}
.ftr a { color: var(--bg); }
.ftr a:hover { color: var(--alt); }

.ftr__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 40px;
}
.ftr__col h2 {
    font-family: var(--body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 16px;
}
.ftr__col ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ftr__col li { margin-bottom: 8px; }
.ftr__col img { filter: brightness(0) invert(1); opacity: .9; }
.ftr__word {
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: .22em;
    margin: 14px 0 6px;
}
.ftr__legend { font-size: 13px; opacity: .6; margin: 0 0 4px; }
.ftr address { font-style: normal; font-size: 14px; opacity: .8; margin-bottom: 14px; }
.ftr__social { display: flex; gap: 16px; font-size: 13px; }

/* The acquirer requires the payment systems it settles to be named on the
   site. Wordmarks rather than logotypes: an approximated logo is worse than
   none, and these can be swapped for official artwork without touching the
   layout. */
.ftr__pay {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 54px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.ftr__pay-note {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .5;
}
.ftr__pay-marks {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ftr__pay-marks li {
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: .08em;
    opacity: .75;
}

.ftr__legal {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 12px;
    opacity: .55;
}

/* ------------------------------------------------------- cart & checkout */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cart, .checkout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 54px;
    padding: 34px var(--pad) 70px;
    align-items: start;
}

.cart__line {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.cart__thumb img { aspect-ratio: 3 / 4; object-fit: cover; }
.cart__name { font-family: var(--display); font-size: 19px; }
.cart__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
    color: var(--muted);
}
.cart__made { color: var(--accent); }
.cart__unit { margin: 0; font-size: 13px; color: var(--muted); }

.cart__qty { display: flex; gap: 8px; align-items: center; }
.cart__qty input {
    width: 62px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    font: inherit;
    font-size: 14px;
}
.cart__qty button {
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 2px;
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}
.cart__amount { margin: 0; font-size: 16px; white-space: nowrap; }

.cart__summary, .checkout__summary {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 28px;
    position: sticky;
    top: calc(var(--hdr-h) + 20px);
}
.cart__summary h2, .checkout__summary h2 { font-size: 22px; margin-bottom: 16px; }
.cart__total { font-size: 30px; font-family: var(--display); margin: 0 0 10px; }
.cart__note { font-size: 12px; color: var(--muted); margin: 10px 0; }
.cart__summary .btn, .checkout__summary .btn { width: 100%; text-align: center; margin-top: 14px; }
.cart__more { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }

.field-group {
    border: none;
    border-top: 1px solid var(--line);
    padding: 26px 0 0;
    margin: 0 0 30px;
}
.field-group legend {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-right: 14px;
}
.field-group label { display: block; margin-bottom: 16px; }
.field-group label > span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}
.field-group input[type=text],
.field-group input[type=email],
.field-group input[type=tel],
.field-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}
.field-group input:focus, .field-group textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.ship { display: grid; gap: 10px; margin-bottom: 20px; }
.ship__option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    align-items: center;
    border: 1px solid var(--line);
    padding: 14px 16px;
    cursor: pointer;
    margin: 0;
}
.ship__option:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.ship__option input { grid-row: 1 / 3; }
.ship__title { font-size: 15px; }
.ship__note { grid-column: 2; font-size: 12px; color: var(--muted); }
.ship__price { grid-row: 1 / 3; font-size: 15px; white-space: nowrap; }

/* The carrier's map of pickup points, shown only for the option that needs one.
   Fixed height because the widget draws itself into this box and a collapsing
   container makes it reflow on every pan. */
.ship__point { margin-bottom: 20px; }
.ship__map {
    height: 420px;
    border: 1px solid var(--line);
    background: var(--surface);
}
.ship__chosen {
    margin: 10px 0 0;
    padding: 10px 14px;
    background: var(--surface);
    border-left: 2px solid var(--accent);
    font-size: 13px;
}

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--muted);
}
.consent a { color: var(--accent); }

.checkout__line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
    padding: 8px 0;
}
.checkout__line--total {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 14px;
    font-size: 16px;
}
.checkout__made { font-size: 12px; color: var(--accent); margin: 0 0 8px; }

.orderpage { padding: 44px var(--pad) 70px; max-width: 720px; }
.orderpage h1 { font-size: 42px; margin-bottom: 18px; }
.orderpage__items {
    margin: 34px 0;
    border-top: 1px solid var(--line);
}
.orderpage__line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.orderpage__line--total { font-size: 18px; border-bottom: none; }
.paystub { margin: 30px 0; }

/* A declined card comes back to this page, so the bad news has to be louder
   than the surrounding text without shouting. */
.orderpage__alert {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--surface);
    border-left: 2px solid #b4553f;
    font-size: 14px;
    line-height: 1.5;
}
.orderpage__pay { margin: 0 0 8px; }

/* Delivery tracking, shown only once the carrier has actually taken the parcel. */
.track {
    margin: 0 0 30px;
    padding: 18px 20px;
    background: var(--surface);
    border-left: 2px solid var(--accent);
}
.track__status { margin: 0 0 6px; font-size: 16px; }
.track__where { margin: 0 0 14px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ account */

.account { padding: 44px var(--pad) 70px; max-width: 620px; }
.account__head h1 { font-size: 42px; margin: 6px 0 14px; }
.account__head .lede { color: var(--muted); margin-bottom: 18px; }

/* A submit button that reads as a link: signing out changes state, so it has
   to be a POST rather than an anchor. */
.account__link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.account__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.account__form { margin: 30px 0 18px; }
.account__form label { display: block; margin-bottom: 18px; }
.account__form label > span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}
.account__form input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}
.account__form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The code is read off a screen and typed in: spacing it out makes a
   transposed digit visible before submitting. */
.account__form input[name=code] {
    font-size: 24px;
    letter-spacing: .32em;
    text-align: center;
}
.account__resend { margin-bottom: 10px; }

.account__notice, .account__alert {
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
}
.account__alert { border-color: var(--accent); color: var(--accent); }

.account__orders { margin-top: 30px; border-top: 1px solid var(--line); }
.account__order { padding: 16px 0; border-bottom: 1px solid var(--line); }
.account__order-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}
.account__order-head a { border-bottom: 1px solid var(--line); }
.account__status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.account__order-meta { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.account__empty { margin-top: 30px; color: var(--muted); }
.account__empty a { border-bottom: 1px solid var(--line); }

/* Marks a signed-in visitor without adding a second icon to the header. */
.hdr__dot {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

/* ------------------------------------------------- header icons and search */

.hdr__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--ink);
}
.hdr__icon svg { width: 20px; height: 20px; display: block; }
.hdr__icon:hover { color: var(--accent); }

.hdr__cart-n {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
}

.find {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
/* Capped and centred: at full width the price ended up hundreds of pixels away
   from the name it belongs to. */
.find__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 22px var(--pad) 26px;
}

.find__box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.find__glass { width: 19px; height: 19px; color: var(--muted); flex: none; }
.find__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--ink);
    font-family: var(--body);
    font-size: 18px;
    font-weight: 300;
}
.find__input::placeholder { color: var(--muted); }
/* Safari draws its own clear button on type=search, which sits badly next to
   ours. */
.find__input::-webkit-search-decoration,
.find__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.find__close {
    display: flex;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.find__close svg { width: 18px; height: 18px; }
.find__close:hover { color: var(--ink); }

.find__kicker {
    margin: 16px 0 8px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.find__hit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    /* Pulled out by the same amount it is padded, so the hover band reaches
       past the text without indenting the list. */
    margin: 0 -10px;
    padding: 7px 10px;
}
.find__hit:hover { background: var(--bg); color: inherit; }
.find__thumb {
    width: 44px;
    height: 44px;
    background: var(--alt);
    overflow: hidden;
}
.find__thumb img { width: 44px; height: 44px; object-fit: cover; }
/* Catalogue names run to eighty characters. Clamped, a long one takes two lines
   on a phone instead of three and the rows stay an even height. */
.find__name {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.find__hit:hover .find__name { color: var(--accent); }
.find__price { font-size: 13px; color: var(--muted); white-space: nowrap; }

.find__more,
.find__empty {
    display: block;
    margin: 14px 0 0;
    font-size: 14px;
    color: var(--muted);
}
.find__more { color: var(--accent); }
.find__empty a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* -------------------------------------------- editorial pages and blog */

.prose-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px var(--pad) 30px;
}
.prose-page--wide { max-width: 1080px; }
.prose-page h1 {
    font-family: var(--display);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 26px;
}

.prose { font-size: 16px; line-height: 1.75; }
.prose h2 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    margin: 38px 0 14px;
}
.prose h3 { font-size: 18px; margin: 28px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--accent);
    font-family: var(--display);
    font-size: 20px;
}
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 15px;
}
.prose th, .prose td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.prose th { font-weight: 500; background: var(--surface); }

.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 30px 0 10px;
}
.gallery--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; }
.gallery__open {
    display: block;
    cursor: zoom-in;
    color: inherit;
}
.gallery__open:hover { color: inherit; }
.gallery__open:hover img { opacity: .92; }
.gallery img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r-card);
    display: block;
    transition: opacity .15s ease;
}

/* -------------------------------------------------------- cookie consent */

.cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 36px rgba(120, 80, 80, .10);
}
.cookies__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.cookies__title {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.15;
}
.cookies__text {
    margin: 0;
    max-width: 58ch;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}
.cookies__text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookies__actions {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}
.cookies__actions .btn {
    padding: 12px 26px;
    font-size: 13px;
}

@media (max-width: 720px) {
    .cookies__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .cookies__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .cookies__actions .btn {
        text-align: center;
        padding: 12px 16px;
    }
    .cookies__title { font-size: 20px; }
}

/* -------------------------------------------------------------- lightbox */

.lb {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(20, 14, 16, .94);
    color: #fffdfc;
}
.lb::backdrop { background: transparent; }
.lb[open] {
    display: grid;
    place-items: center;
}
.lb__img {
    max-width: min(100vw - 48px, 1200px);
    max-height: calc(100vh - 72px);
    width: auto;
    height: auto;
    object-fit: contain;
}
.lb__close,
.lb__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fffdfc;
    cursor: pointer;
}
.lb__close { top: 16px; right: 16px; }
.lb__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb__close svg,
.lb__nav svg { width: 24px; height: 24px; display: block; }
.lb__close:hover,
.lb__nav:hover { color: var(--accent); }
.lb__count {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    margin: 0;
    font-size: 12px;
    letter-spacing: .12em;
    color: rgba(255, 253, 252, .7);
}
.lb__nav[hidden] { display: none; }

.map { margin: 28px 0 6px; }
.map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--r-card);
    /* Stands in for the map while the widget loads, so the column does not sit
       on a white rectangle. */
    background: var(--surface);
}
.map figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

.page-cta {
    max-width: 760px;
    margin: 10px auto 70px;
    padding: 26px var(--pad);
    background: var(--surface);
    border-radius: var(--r-card);
    text-align: center;
}
.page-cta p { margin: 0 0 16px; font-size: 15px; color: var(--muted); }

.posts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px var(--gap);
    padding: 0 var(--pad) 70px;
}
.post-card { display: grid; gap: 14px; align-content: start; }
.post-card__shot img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-card);
    display: block;
}
.post-card time { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.post-card h2 {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 400;
    margin: 6px 0 8px;
}
.post-card p { font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.post-card__more { font-size: 13px; color: var(--accent); }

.post-date { font-size: 13px; color: var(--muted); margin: -14px 0 22px; }
.post-cover { margin: 0 0 28px; }
.post-cover img {
    width: 100%;
    border-radius: var(--r-card);
    display: block;
}

/* ----------------------------------------------------------------- search */

.searchbox {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 18px 0 8px;
}
.searchbox input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--accent); }
.searchbox button {
    padding: 12px 22px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.search-hints { padding: 10px var(--pad) 70px; }
.search-hints p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
    :root { --pad: 24px; --gap: 18px; }

    .hdr__row {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        gap: 14px;
    }
    .hdr__nav--left { display: none; }
    .hdr__mark { justify-items: start; }
    .hdr__word { font-size: 18px; letter-spacing: .16em; }
    .hdr__nav--right { font-size: 12px; gap: 6px 14px; }

    /* A diptych with a floating card has no phone equivalent, so the first
       shot goes full-bleed at 3/4 and the copy sits on a gradient that ends in
       the accent, exactly as on the mobile board. */
    .hero { padding: 0; }
    .hero--slim { padding: 40px var(--pad) 34px; }
    .hero--slim h1 { font-size: 32px; }

    .hero__duo { grid-template-columns: 1fr; gap: 0; }
    .hero__shot--second { display: none; }
    .hero__shot img { aspect-ratio: 3 / 4; }

    .hero__card {
        position: absolute;
        inset: 0;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, .06) 0%,
            rgba(0, 0, 0, .30) 45%,
            rgba(173, 106, 106, .94) 100%);
        border: none;
        box-shadow: none;
        text-align: left;
        color: #fff;
    }
    .hero__card .kicker { color: #fff; font-size: 11px; margin-bottom: 0; }
    .hero__card h1 { font-size: 36px; margin: 10px 0 12px; color: #fff; }
    .hero__card .lede {
        margin: 0;
        max-width: none;
        font-size: 13px;
        color: rgba(255, 255, 255, .86);
    }
    .hero__actions { justify-content: flex-start; margin-top: 16px; gap: 12px; }
    /* The gradient ends in the accent, so an accent button would vanish into it.
       Sizes are reset too: the desktop card is scaled up, and on a 390px screen
       that button would run most of the width. */
    .hero__card .btn {
        background: var(--surface);
        border-color: var(--surface);
        color: var(--ink);
        padding: 13px 30px;
        font-size: 14px;
    }
    /* One call to action on a phone; bespoke orders live on the contacts page
       and the gradient leaves no room for a second, low-contrast button. */
    .hero__actions .btn--ghost { display: none; }
    .hero__note { display: none; }

    /* .cats carries no top padding: on a wide screen the hero's own 56px below
       the diptych does that job. The mobile hero is full-bleed with zero
       padding, so the tiles need the gap themselves. */
    .cats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 26px var(--pad) 32px;
    }
    /* Last tile stretches the full width so five panels do not leave a hole. */
    .cats__tile:last-child { grid-column: 1 / -1; }
    .cats__tile:last-child img { aspect-ratio: 16 / 9; }
    .cats__label {
        left: 8px; right: 8px; bottom: 8px;
        padding: 7px 9px;
        font-size: 11px;
    }

    .announce {
        padding: 7px 12px;
        font-size: 10px;
        gap: 6px;
    }
    .announce__long { display: none; }
    .announce__short { display: inline; }
    /* The board has one line here. The notice plus the number wraps to two at
       390px, and the phone stays reachable in the footer. */
    .announce__sep, .announce__tel { display: none; }

    .tone__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .tone__head h2, .section-head h2, .story h2 { font-size: 28px; }

    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
    .hdr__tone { display: none; }
    .card__name { font-size: 16px; }

    /* Fifteen sections wrap into eight rows on a phone and push the products
       off the screen, so the chips become one swipeable row instead. The last
       chip is deliberately cut off at the edge to show there is more. */
    .cat-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cat-nav::-webkit-scrollbar { display: none; }
    /* Flex order, not DOM order: without this the section you are looking at
       starts off-screen to the right, and the row opens on chips you did not
       choose. Desktop wraps, so it keeps the catalogue's own order. */
    .cat-nav__item.is-active { order: -1; }

    .pdp { grid-template-columns: 1fr; gap: 30px; }
    .pdp__panel { position: static; }
    .pdp__panel h1 { font-size: 28px; }
    .pdp__gallery { grid-template-columns: 1fr 1fr; }
    .pdp__about {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 26px 0 40px;
    }

    .story { grid-template-columns: 1fr; }
    .values { grid-template-columns: repeat(2, 1fr); }

    .cart, .checkout { grid-template-columns: 1fr; gap: 30px; }
    .cart__summary, .checkout__summary { position: static; }
    .cart__line { grid-template-columns: 70px 1fr; gap: 14px; }
    .cart__qty { grid-column: 2; }
    .cart__amount { grid-column: 2; }
    .orderpage h1 { font-size: 30px; }
    .ftr__grid { grid-template-columns: 1fr 1fr; }
    .listing-head h1 { font-size: 30px; }
    .specs { grid-template-columns: 120px 1fr; }

    .prose-page { padding: 30px var(--pad) 24px; }
    .prose-page h1 { font-size: 32px; }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .map iframe { height: 300px; }
    .posts { grid-template-columns: 1fr; gap: 30px; }

    /* Both icons stay: at this size they cost less room than the two words they
       replaced, so search no longer has to be dropped from the phone header. */
    .hdr__icon svg { width: 19px; height: 19px; }
    .find__inner { padding: 16px var(--pad) 20px; }
    .find__input { font-size: 15px; }
    .find__hit { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
    .find__thumb, .find__thumb img { width: 40px; height: 40px; }

    .lb__img {
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 96px);
    }
    .lb__nav--prev { left: 4px; }
    .lb__nav--next { right: 4px; }
}

@media (max-width: 560px) {
    .tonebar { flex-wrap: wrap; font-size: 12px; }
    .tonebar__note { width: 100%; }
    .values, .ftr__grid { grid-template-columns: 1fr; }
    /* Tables of data pages read better as blocks than as squeezed columns. */
    .prose table, .prose thead, .prose tbody, .prose tr, .prose td { display: block; }
    .prose thead { display: none; }
    .prose tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
    .prose td { border: none; padding: 4px 0; }
    .prose td:first-child { font-weight: 500; }
}