/* Succulent Tent: storefront.
   Printed-catalogue look: warm paper, black ink, one signal red. Archivo (condensed for headlines) and DM Mono
   (numbers, labels). Square corners, hairline rules, no shadows, no gradients. Single source of truth for the shop. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-var-normal.0443c503d049.woff2") format("woff2"); font-weight: 400 800; font-stretch: 62% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-var-italic.b0f2c17a8ed9.woff2") format("woff2"); font-weight: 500 700; font-stretch: 100%; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-400-normal.e1ed461ac183.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-500-normal.c4598219c4b8.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #ece8df;
  --paper-2: #e0dbd0;
  --paper-3: #cdc7b9;
  --ink: #15171a;
  --ink-2: #43433e;
  --ink-3: #68655c;
  --hair: rgba(21, 23, 26, .22);
  --signal: #c42f15;
  --night: #121417;
  --night-2: #1d2024;
  --on-night: #ece8df;
  --on-night-2: #a9a59a;

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

  --pad: clamp(16px, 2.3vw, 36px);
  --gap: clamp(12px, 1.7vw, 26px);
  --hh: 60px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 56px); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--hair); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
.wrap { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @view-transition { navigation: none; } }

/* ---- type ------------------------------------------------------------------------------ */
.disp { font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .86; letter-spacing: -.004em; text-wrap: balance; }
.label { font: 500 11.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.mono { font-family: var(--f-mono); }
.latin { font-style: italic; font-weight: 600; }
.muted { color: var(--ink-3); }

/* ---- buttons and links ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: 0 26px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 12.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; transition: background .18s, color .18s, border-color .18s; }
.btn:hover { background: var(--signal); border-color: var(--signal); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-off { background: transparent; color: var(--ink-3); border-color: var(--paper-3); cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; border-color: var(--paper-3); }
.more { display: inline-flex; align-items: center; gap: .6em; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; padding-bottom: 5px; border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.more:hover { color: var(--signal); border-color: var(--signal); }
.more .ico { transition: transform .18s; }
.more:hover .ico { transform: translateX(4px); }

/* ---- test bar, header ------------------------------------------------------------------- */
.testbar { background: var(--ink); color: var(--paper); font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 9px var(--pad); text-align: center; }
.testbar b { color: #ff8a70; font-weight: 500; }

.header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1.5px solid var(--ink); }
.header__row { display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); height: var(--hh); }
.header__row--simple { justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: .32em; font-weight: 800; font-stretch: 62%; font-size: 29px; line-height: 1; letter-spacing: .005em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.logo i { display: block; width: .62em; height: .54em; background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateY(-.04em); }
.nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(14px, 2vw, 32px); }
.nav > a, .nav__mega > a { display: inline-flex; align-items: center; height: 100%; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; position: relative; }
.nav > a::after, .nav__mega > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.nav > a:hover::after, .nav__mega:hover > a::after, .nav__mega:focus-within > a::after { transform: scaleX(1); }
.nav__mega { display: flex; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1.5px solid var(--ink); display: none; }
.nav__mega:hover .mega, .nav__mega:focus-within .mega { display: block; }
.mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px var(--gap); padding: 34px var(--pad) 42px; max-width: 1760px; margin-inline: auto; }
.mega h4 { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 28px; line-height: .95; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.mega h4 a { text-decoration: none; }
.mega h4 a:hover, .mega li a:hover { color: var(--signal); }
.mega li a { display: block; padding: 3px 0; font-size: 15px; text-decoration: none; }
.mega li li a { padding-left: 14px; color: var(--ink-3); font-size: 14px; }
.header__spacer { flex: 1; }
.header__link { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; display: inline-flex; gap: .5em; align-items: center; white-space: nowrap; }
.header__link:hover { color: var(--signal); }

.search { position: relative; width: clamp(180px, 22vw, 340px); }
.search input { width: 100%; height: 40px; padding: 0 0 0 28px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; font: 400 15px/1 var(--f-sans); appearance: none; }
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--signal); }
.search input::-webkit-search-cancel-button { appearance: none; display: none; }
.search > .ico { position: absolute; left: 0; top: 11px; }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); min-width: 380px; background: var(--paper); border: 1.5px solid var(--ink); display: none; z-index: 60; }
.search.is-open .search__results:not(:empty) { display: block; }
.search[data-inline] .search__results { position: static; min-width: 0; border: 0; margin-top: 12px; display: block; }
.hit { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--hair); }
.hit:hover { background: var(--paper-2); }
.hit img, .hit__ph { width: 52px; height: 65px; object-fit: cover; background: var(--paper-2); }
.hit__ph { display: grid; place-items: center; font-weight: 800; font-stretch: 62%; font-size: 22px; text-transform: uppercase; color: var(--ink-3); }
.hit b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.hit i { display: block; font-size: 13px; color: var(--ink-3); }
.hit .price { font: 500 13px/1 var(--f-mono); }
.hit--all { grid-template-columns: 1fr; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; }
.hit--all span:first-child, .hit--all span:last-child { display: none; }
.hit__none { padding: 16px 14px; color: var(--ink-3); }
.actions { display: none; }

/* ---- sections --------------------------------------------------------------------------- */
.sec { padding-top: clamp(64px, 9vw, 132px); }
.sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 2px solid var(--ink); padding-top: 14px; margin-bottom: clamp(22px, 3vw, 40px); }
.sec__head h2 { font-size: clamp(44px, 6.4vw, 104px); }
.sec__no { display: block; margin-bottom: clamp(14px, 2vw, 26px); color: var(--ink-3); }
.sec--night { background: var(--night); color: var(--on-night); padding-block: clamp(44px, 5vw, 76px) clamp(56px, 8vw, 110px); margin-top: clamp(64px, 9vw, 132px); }
.sec--night .sec__head { border-color: var(--on-night); }
.sec--night .sec { padding-top: 0; }
.sec--night .sec__no { color: var(--on-night-2); }
.sec--night .more { border-color: var(--on-night); }
.sec--night .more:hover { color: #ff8a70; border-color: #ff8a70; }
.sec--tight { padding-top: clamp(40px, 5vw, 72px); }

/* ---- hero ------------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding-block: clamp(20px, 3.4vw, 52px) 0; align-items: end; }
.hero__text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 40px); padding-bottom: 4px; }
.hero h1 { font-size: min(10.9vw, 188px); line-height: .84; }
.hero h1 span { color: var(--signal); }
.hero__lede { max-width: 43ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__pic { grid-column: 8 / 13; display: block; text-decoration: none; }
.hero__frame { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; }
.hero__frame img, .hero__frame .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.hero__pic:hover .hero__frame img { transform: scale(1.035); }
.hero__cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: 1.5px solid var(--ink); margin-top: 12px; }
.hero__cap b { font-weight: 600; font-size: 15px; }
.hero__cap .mono { font-size: 13px; }

/* ---- category index --------------------------------------------------------------------- */
.index { border-top: 1.5px solid var(--ink); }
.index__row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--gap); padding: clamp(14px, 1.8vw, 26px) 0; border-bottom: 1.5px solid var(--ink); text-decoration: none; position: relative; transition: padding .25s, background .25s, color .25s; }
.index__no { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.index__name { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(38px, 8.2vw, 140px); line-height: .86; letter-spacing: -.004em; min-width: 0; overflow-wrap: anywhere; }
.index__side { display: flex; align-items: center; gap: 18px; }
.index__thumbs { display: none; gap: 8px; }
.index__thumbs img { width: clamp(52px, 5.4vw, 84px); aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
.index__count { font: 500 13px/1 var(--f-mono); min-width: 5ch; text-align: right; }
.index__row:hover { background: var(--ink); color: var(--paper); padding-inline: 20px; }
.index__row:hover .index__no { color: var(--on-night-2); }

/* ---- product cards ---------------------------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) var(--gap); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__pic { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; }
.card__pic img, .card__pic .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card__pic img { transform: scale(1.04); }
.card__link { position: absolute; inset: 0; z-index: 2; }
.card__badges { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.tag { display: inline-block; background: var(--paper); color: var(--ink); font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; white-space: nowrap; }
.tag--signal { background: var(--signal); color: #fff; }
.tag--ink { background: var(--ink); color: var(--paper); }
.card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 11px; font: 400 12px/1.2 var(--f-mono); color: var(--ink-3); }
.card__meta .price { color: var(--ink); font-weight: 500; font-size: 14px; }
.card__latin { margin-top: 7px; font-style: italic; font-weight: 600; font-size: 17px; line-height: 1.22; text-wrap: balance; }
.card__latin a { text-decoration: none; }
.card__latin a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card:hover .card__latin a { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--signal); }
.card__common { margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.card--sold .card__pic img { opacity: .55; filter: grayscale(.6); }
.card--sold .card__latin, .card--sold .price { color: var(--ink-3); }
.sec--night .card__pic { background: var(--night-2); }
.sec--night .card__meta, .sec--night .card__common { color: var(--on-night-2); }
.sec--night .card__meta .price { color: var(--on-night); }
.sec--night .card:hover .card__latin a { text-decoration-color: #ff8a70; }

/* typographic stand-in until a photo exists */
.card__pic, .hero__frame, .gallery__main { container-type: inline-size; }
.ph { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 14px 12px; background: var(--paper-2); color: var(--ink); overflow: hidden; }
.ph i { align-self: flex-end; font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-style: normal; color: var(--ink-3); }
.ph b { font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .84; letter-spacing: -.004em; }
.ph--l b { font-size: min(27cqi, 150px); }
.ph--m b { font-size: min(20cqi, 112px); }
.ph--s b { font-size: min(15.5cqi, 88px); }
.sec--night .ph { background: var(--night-2); color: var(--on-night); }
.sec--night .ph i { color: var(--on-night-2); }
.row-item .ph { container-type: inline-size; }

/* ---- clips from the tent --------------------------------------------------------------- */
.clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.clip { margin: 0; min-width: 0; }
.clip video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
.clip figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid var(--ink); font-size: 15px; font-weight: 600; font-style: italic; }
.clip figcaption .mono { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-3); }
@media (max-width: 719px) {
  .clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---- promise ---------------------------------------------------------------------------- */
.promise { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); border-top: 2px solid var(--ink); padding-top: 14px; }
.promise__lead { grid-column: 1 / 8; }
.promise__lead h2 { font-size: clamp(44px, 6.4vw, 104px); }
.promise dl { grid-column: 8 / 13; align-self: end; }
.promise .row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ink); }
.promise .row:first-child { border-top-color: var(--ink); }
.promise dt { font: 500 11.5px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.promise dd { color: var(--ink-2); }

.crosslink { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 22px 0; }
.crosslink p { max-width: 60ch; }
.crosslink b { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 30px; line-height: 1; display: block; margin-bottom: 4px; }

/* ---- footer ----------------------------------------------------------------------------- */
.footer { background: var(--night); color: var(--on-night); margin-top: clamp(72px, 10vw, 150px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px var(--gap); padding-block: clamp(36px, 5vw, 68px) clamp(28px, 4vw, 52px); }
.footer h5 { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--on-night-2); margin-bottom: 16px; }
.footer li a { display: inline-block; padding: 3px 0; text-decoration: none; }
.footer li a:hover { color: #ff8a70; }
.footer__about { max-width: 38ch; color: var(--on-night-2); font-size: 15px; }
.footer__mark { font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 14.5vw; line-height: .76; letter-spacing: -.01em; white-space: nowrap; margin: 0 0 -.05em; padding-inline: calc(var(--pad) - .012em); user-select: none; }
.footer__mark i { display: inline-block; width: .42em; height: .37em; background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-left: .06em; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 18px 22px; border-top: 1px solid rgba(236, 232, 223, .22); font: 400 12px/1.5 var(--f-mono); color: var(--on-night-2); }

/* ---- listing ---------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 18px; font: 500 11.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs [aria-current] { color: var(--ink); }
.pagehead { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; padding-block: clamp(18px, 3vw, 44px) clamp(22px, 3vw, 40px); }
.pagehead__title { grid-column: 1 / -1; }
.pagehead h1 { font-size: min(11.6vw, 170px); line-height: .84; overflow-wrap: anywhere; }
.pagehead__intro { grid-column: 1 / 8; max-width: 38ch; color: var(--ink-2); font-size: 17px; line-height: 1.5; padding-bottom: 6px; }
.pagehead__kind { display: block; margin-bottom: 14px; color: var(--signal); }
.subnav { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 14px 0; border-top: 1.5px solid var(--ink); }
.subnav a { font: 500 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.subnav a:hover { color: var(--signal); }
.subnav sup { font-size: 10px; color: var(--ink-3); margin-left: 3px; }
.filters { position: sticky; top: var(--hh); z-index: 30; background: var(--paper); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink); }
.filters__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px; min-height: 52px; padding-block: 6px; }
.chk { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: 8px 0; white-space: nowrap; }
.chk::before { content: ""; width: 13px; height: 13px; border: 1.5px solid var(--ink); background: var(--paper); transition: background .15s; }
.chk.is-on::before { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--paper); }
.chk:hover::before { background: var(--paper-3); }
.chk.is-on:hover::before { background: var(--ink); }
.filters__sp { flex: 1; }
.filters__count { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sortform select { appearance: none; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 22px 6px 0; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.viewtoggle { display: inline-flex; border: 1.5px solid var(--ink); }
.viewtoggle a { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; text-decoration: none; }
.viewtoggle a.is-on { background: var(--ink); color: var(--paper); }
.listing { padding-top: clamp(24px, 3vw, 40px); }

.rows { border-top: 1.5px solid var(--ink); }
.row-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ink); text-decoration: none; position: relative; }
.row-item:hover { background: var(--paper-2); }
.row-item img, .row-item .ph { width: 64px; height: 80px; object-fit: cover; background: var(--paper-2); }
.row-item .ph { padding: 6px; }
.row-item .ph b { font-size: 17px !important; }
.row-item .ph i { display: none; }
.row-item__name b { display: block; font-style: italic; font-weight: 600; font-size: 18px; line-height: 1.25; }
.row-item__name span { font-size: 14px; color: var(--ink-3); }
.row-item__price { font: 500 14px/1.3 var(--f-mono); text-align: right; }
.row-item__price small { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.row-item__no, .row-item__facts { display: none; }

.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 18px; border-top: 1.5px solid var(--ink); font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.empty { padding: clamp(40px, 8vw, 110px) 0; max-width: 62ch; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.empty h1, .empty h2 { font-size: clamp(54px, 9vw, 140px); }
.empty p { color: var(--ink-2); font-size: 18px; }

/* ---- product page ----------------------------------------------------------------------- */
.preview-banner { background: var(--signal); color: #fff; padding: 12px var(--pad); font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.pdp { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 56px) var(--gap); padding-top: clamp(16px, 2.4vw, 32px); align-items: start; }
.gallery { grid-column: 1 / 7; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; position: sticky; top: calc(var(--hh) + 16px); }
.gallery--single { grid-template-columns: minmax(0, 1fr); }
.gallery__main { position: relative; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; grid-column: 2; grid-row: 1; cursor: zoom-in; }
.gallery--single .gallery__main { grid-column: 1; }
.gallery__main img, .gallery__main .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .25s ease-out; }
.gallery__main .badge-row { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.zoomhint { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: var(--paper); padding: 6px 8px; font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.thumb { padding: 0; border: 0; background: var(--paper-2); aspect-ratio: 4 / 5; opacity: .6; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: opacity .15s; }
.thumb:hover { opacity: 1; }
.thumb[aria-current] { opacity: 1; outline-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.info { grid-column: 8 / 13; display: flex; flex-direction: column; }
.info__no { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.info h1 { margin-top: clamp(16px, 2vw, 26px); font-size: clamp(46px, 5.4vw, 92px); line-height: .88; overflow-wrap: anywhere; }
.info h1 span { display: block; font-style: italic; font-weight: 600; font-stretch: 100%; text-transform: none; font-size: .36em; line-height: 1.1; letter-spacing: 0; margin-top: .55em; }
.info__common { margin-top: 10px; font-size: 20px; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tags .tag { border: 1.5px solid var(--ink); background: transparent; }
.tags .tag--ink { background: var(--ink); }
.tags .tag--signal { border-color: var(--signal); }

.buy { margin-top: clamp(22px, 3vw, 36px); border-top: 1.5px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.buy__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.buy__price b { font-weight: 800; font-stretch: 75%; font-size: clamp(44px, 4.4vw, 68px); line-height: 1; letter-spacing: -.01em; }
.buy__price s { font: 400 15px/1 var(--f-mono); color: var(--ink-3); }
.buy__price small { font: 400 12px/1.3 var(--f-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.buy__note { font-size: 13.5px; color: var(--ink-3); }
.stock { display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.stock i { width: 10px; height: 10px; background: var(--ink); flex: none; }
.stock--last i { background: var(--signal); }
.stock--sold i { background: transparent; border: 1.5px solid var(--ink-3); }
.ship { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 14.5px; color: var(--ink-2); }
.ship b { color: var(--ink); font-weight: 600; }
.notice { font-size: 14px; color: var(--ink-2); border-left: 3px solid var(--signal); padding: 2px 0 2px 14px; }

.facts { margin-top: clamp(28px, 4vw, 52px); border-top: 2px solid var(--ink); }
.facts__title { display: flex; justify-content: space-between; padding: 12px 0 8px; }
.facts dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; }
.facts dt, .facts dd { padding: 10px 0; border-top: 1px solid var(--hair); }
.facts dt { font: 500 11.5px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-top: 12px; }
.facts dd { font-size: 15.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scale { display: inline-flex; gap: 3px; }
.scale i { width: 14px; height: 14px; border: 1.5px solid var(--ink); }
.scale i.on { background: var(--ink); }
.scale + span { color: var(--ink-3); font-size: 14px; }
.prose { margin-top: clamp(28px, 4vw, 52px); border-top: 2px solid var(--ink); padding-top: 12px; }
.prose .label { display: block; margin-bottom: 14px; }
.prose p { max-width: 62ch; color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.protect { margin-top: clamp(24px, 3vw, 40px); border: 1.5px solid var(--ink); padding: 16px 18px; display: grid; gap: 6px; }
.protect b { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--signal); }
.protect span { font-size: 14.5px; color: var(--ink-2); }

/* ---- gate and coming soon ---------------------------------------------------------------- */
.gate { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: var(--pad); align-content: center; }
.gate__card { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.gate h1 { font-size: min(17vw, 190px); line-height: .84; }
.gate p { color: var(--ink-2); max-width: 40ch; }
.gate__label { font: 500 11.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; margin-top: 12px; }
.gate__input { height: 52px; border: 0; border-bottom: 1.5px solid var(--ink); background: transparent; border-radius: 0; font-size: 20px; padding: 0; appearance: none; }
.gate__input:focus { outline: none; border-color: var(--signal); }
.gate__error { color: var(--signal); font: 500 13px/1.4 var(--f-mono); }

/* ---- phone chrome ------------------------------------------------------------------------ */
.scrim { display: none; }
.sheet { display: none; }
.tabbar { display: none; }

@media (max-width: 1099px) {
  .nav > a:nth-last-child(-n+1) { display: none; }
}

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .index__thumbs { display: flex; }
  .row-item { grid-template-columns: 64px 70px 1.4fr 1fr 120px; }
  .row-item__no, .row-item__facts { display: block; }
  .row-item__no { font: 400 12px/1 var(--f-mono); color: var(--ink-3); }
  .row-item__facts { font-size: 14px; color: var(--ink-2); }
  .row-item__price { grid-column: auto; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  :root { --hh: 54px; }
  .nav, .header__link, .header .search { display: none; }
  .actions { display: flex; gap: 18px; margin-left: auto; }
  .actions button { background: none; border: 0; padding: 8px 0; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; }
  .logo { font-size: 26px; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1.5px solid var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tabbar a, .tabbar button { display: flex; align-items: center; justify-content: center; height: 56px; background: none; border: 0; border-left: 1px solid var(--hair); font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; position: relative; }
  .tabbar > :first-child { border-left: 0; }
  .tabbar [aria-current]::before { content: ""; position: absolute; top: -1.5px; left: 0; right: 0; height: 4px; background: var(--signal); }

  .sheet { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; background: var(--paper); transform: translateY(102%); visibility: hidden; transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s; overflow-y: auto; padding: 0 var(--pad) 40px; }
  .sheet.is-on { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .sheet__grab { display: none; }
  .sheet__head { display: flex; justify-content: space-between; align-items: center; height: var(--hh); border-bottom: 1.5px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 2; }
  .sheet__head h3 { font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; }
  .iconbtn { background: none; border: 0; padding: 10px 0 10px 10px; display: inline-flex; font-size: 20px; }
  .sheet .search { display: block; width: 100%; margin-top: 18px; }
  .sheet .search input { height: 52px; font-size: 20px; padding-left: 32px; }
  .sheet .search > .ico { top: 17px; font-size: 20px; }
  .sheet details { border-bottom: 1px solid var(--ink); }
  .sheet summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; list-style: none; cursor: pointer; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 40px; line-height: .95; }
  .sheet summary::-webkit-details-marker { display: none; }
  .sheet details[open] summary .ico { transform: rotate(180deg); }
  .sheet details ul { padding: 0 0 16px; }
  .sheet details li a { display: block; padding: 6px 0; font-size: 17px; text-decoration: none; }
  .sheet details li li a { padding-left: 16px; color: var(--ink-3); font-size: 15px; }
  .sheet__more { margin-top: 22px; display: grid; gap: 4px; }
  .sheet__more a { font: 500 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; padding: 10px 0; }

  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .hero__text, .hero__pic { grid-column: 1; }
  .hero h1 { font-size: min(18.2vw, 150px); }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .promise__lead, .promise dl { grid-column: 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .pagehead { grid-template-columns: minmax(0, 1fr); }
  .pagehead__title, .pagehead__intro { grid-column: 1; }
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .gallery, .info { grid-column: 1; }
  .gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .gallery__main { grid-column: 1; grid-row: 1; }
  .thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .thumb { width: 64px; flex: none; }
  .gate__card { grid-column: 1 / -1; }
  .index__row { grid-template-columns: 34px 1fr auto; }
  .filters { position: static; }
  .filters__row { gap: 2px 18px; }
  .filters__sp { display: none; }
  .filters__count { width: 100%; order: 9; padding-bottom: 6px; }
  .viewtoggle { margin-left: auto; }
}
@media (max-width: 480px) {
  .promise .row { grid-template-columns: 96px 1fr; }
  .footer__legal { flex-direction: column; }
  .card__latin { font-size: 16px; }
  .card__meta { font-size: 11px; }
  .card__meta .price { font-size: 13px; }
  .logo { font-size: 24px; }
}

@media (hover: none) { .zoomhint { display: none; } .gallery__main { cursor: auto; } }

/* ---- Editable shop pages (pages app: Impressum, AGB, ...) --------------------------------- */
.pagehead--text h1 { font-size: clamp(54px, 9vw, 140px); }
.draftnote { margin-top: 18px; padding: 12px 16px; border: 1.5px solid var(--signal); font: 500 12.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.draftnote b { color: var(--signal); font-weight: 500; }
.pagebody { margin-top: 0; }
.pagebody p, .pagebody ul { max-width: 70ch; color: var(--ink); }
.pagebody p + p, .pagebody ul + p, .pagebody p + ul { margin-top: 1em; }
.pagebody h2, .pagebody h3 { max-width: 70ch; }
.pagebody h2 { margin: 2em 0 .6em; font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 46px); line-height: .95; text-wrap: balance; }
.pagebody h3 { margin: 1.8em 0 .5em; font: 500 12.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.pagebody > :first-child { margin-top: 0; }
.pagebody ul { padding-left: 1.25em; list-style: square; }
.pagebody li + li { margin-top: .4em; }
.pagebody a { text-decoration-color: currentColor; }
.pagebody a:hover { color: var(--signal); }
/* Text box in the back office editor (shop.css is loaded there too) */
.bo-form textarea.pagetext { min-height: 60vh; font: 400 14.5px/1.6 var(--f-mono); }
.bo-lead + .bo-tablewrap { margin-top: 24px; }

/* ---- notices bar for the winter pause ---- */
.pausebar { background: var(--ink); color: var(--paper); font-size: 14px; padding: 10px 0; } .pausebar b { color: #ff8a70; font-weight: 600; }

/* ---- cart, checkout, account ------------------------------------------------------------ */
.header__cart { position: relative; }
.cartbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 7px; padding: 0 5px; background: var(--signal); color: #fff; font: 500 11px/1 var(--f-mono); letter-spacing: 0; }
.cartbadge.is-empty { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.tabbar .cartbadge { margin-left: 6px; }
.flash { border-bottom: 1.5px solid var(--ink); background: var(--paper-2); }
.flash__item { padding: 12px 0; font-size: 15px; }
.flash__item--success { border-left: 4px solid var(--ink); padding-left: 14px; }
.flash__item--error, .flash__item--warning { border-left: 4px solid var(--signal); padding-left: 14px; }
.flash__item--info { padding-left: 14px; border-left: 4px solid var(--ink-3); }
.small { font-size: 13.5px; }
.spaced { margin-top: 28px; }
.narrow { max-width: 520px; padding-bottom: 20px; }
.stack { display: grid; gap: 16px; }
.btn--big { min-height: 60px; font-size: 13.5px; }
.linkbtn { background: none; border: 0; padding: 0; font: 500 11.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: .25em; cursor: pointer; color: var(--ink-3); }
.linkbtn:hover { color: var(--signal); text-decoration-color: var(--signal); }
.pagehead--cart { padding-bottom: clamp(20px, 3vw, 36px); }
.pagehead--cart h1 { font-size: min(14vw, 150px); }

.field { display: grid; gap: 6px; min-width: 0; }
.field label { font: 500 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.field input, .field select, .field textarea, .buyform select, .alertform input, .cartrow__qty select, .search-plain { width: 100%; padding: 13px 14px; border: 1.5px solid var(--ink); border-radius: 0; background: #f4f1ea; color: var(--ink); font: 400 16px/1.3 var(--f-sans); appearance: none; }
.field select, .buyform select, .cartrow__qty select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .alertform input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.field small { color: var(--ink-3); font-size: 13px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--signal); }
.field__error { color: var(--signal); font-style: normal; font-size: 13.5px; }
.fieldrow { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; line-height: 1.45; }
.check input { appearance: none; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--ink); background: #f4f1ea; cursor: pointer; }
.check input:checked { background: var(--ink); box-shadow: inset 0 0 0 3.5px #f4f1ea; }
.check input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.check.has-error input { border-color: var(--signal); }
.radios { display: grid; gap: 10px; }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--ink); cursor: pointer; background: #f4f1ea; }
.radio input { appearance: none; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; margin-top: 2px; background: #f4f1ea; }
.radio input:checked { background: var(--ink); box-shadow: inset 0 0 0 3.5px #f4f1ea; }
.radio:has(input:checked) { box-shadow: 0 0 0 1.5px var(--ink); }
.radio b { display: block; font-weight: 600; }
.radio small { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: 20px; }
.checkout__main { display: grid; gap: 34px; }
.checkout fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 16px; }
.checkout legend { display: flex; gap: 12px; align-items: baseline; width: 100%; padding: 12px 0 14px; margin-bottom: 4px; border-top: 2px solid var(--ink); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.checkout legend .label { color: var(--ink-3); font-stretch: 100%; }
.sumbox { border: 1.5px solid var(--ink); padding: 22px; display: grid; gap: 14px; background: #f4f1ea; }
.sumbox--sticky { position: sticky; top: calc(var(--hh) + 20px); }
.sumbox dl, .sumbox__dl { display: grid; gap: 8px; margin: 0; }
.sumbox dl > div, .sumbox__dl > div { display: flex; justify-content: space-between; gap: 16px; }
.sumbox dt, .sumbox__dl dt { color: var(--ink-2); }
.sumbox__total { padding-top: 10px; border-top: 1.5px solid var(--ink); font-weight: 600; font-size: 1.15rem; }
.sumbox__total dt { color: var(--ink); }
.sumlist { display: grid; gap: 12px; }
.sumlist li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.sumlist--big li { grid-template-columns: 64px 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.sumlist__pic { display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; container-type: inline-size; }
.sumlist__pic img, .sumlist__pic .ph { width: 100%; height: 100%; object-fit: cover; }
.sumlist__pic .ph { padding: 4px; } .sumlist__pic .ph i { display: none; } .sumlist__pic .ph b { font-size: 15px !important; }
.sumlist__name { min-width: 0; }
.sumlist__name b { display: block; font-size: 15px; line-height: 1.25; }
.sumlist__name small { color: var(--ink-3); font-size: 13px; }

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cartlist { border-top: 2px solid var(--ink); }
.cartrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 110px auto; gap: 8px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ink); }
.cartrow__pic { display: block; aspect-ratio: 4 / 5; background: var(--paper-2); overflow: hidden; container-type: inline-size; }
.cartrow__pic img, .cartrow__pic .ph { width: 100%; height: 100%; object-fit: cover; }
.cartrow__pic .ph { padding: 6px; } .cartrow__pic .ph i { display: none; } .cartrow__pic .ph b { font-size: 22px !important; }
.cartrow__name { display: grid; gap: 2px; min-width: 0; }
.cartrow__name a { text-decoration: none; } .cartrow__name a:hover b { text-decoration: underline; text-decoration-color: var(--signal); }
.cartrow__name b { font-size: 18px; line-height: 1.25; }
.cartrow__name span { color: var(--ink-3); font-size: 14px; }
.cartrow__name small { color: var(--ink-3); }
.cartrow__note { color: var(--signal); font-style: normal; font-size: 13.5px; }
.cartrow__qty select { width: 84px; padding: 9px 30px 9px 12px; }
.cartrow__price { text-align: right; font-weight: 500; }
.cartrow.is-off { opacity: .55; }
.steps { display: flex; gap: 0; margin: 0 0 clamp(26px, 4vw, 48px); padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.steps li { flex: 1; display: grid; gap: 8px; padding-top: 14px; font: 500 11.5px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.steps li i { width: 14px; height: 14px; border: 1.5px solid var(--ink-3); }
.steps li.is-done { color: var(--ink); } .steps li.is-done i { background: var(--ink); border-color: var(--ink); }
.statusgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); align-items: start; }
.statusgrid section { display: grid; gap: 12px; align-content: start; }
.statusgrid h2.label { padding-top: 12px; border-top: 2px solid var(--ink); margin-top: 6px; color: var(--ink-3); }
.statusgrid address { font-style: normal; line-height: 1.55; }
.paybox { margin: 0; padding: 16px 18px; border: 1.5px solid var(--ink); background: #f4f1ea; font: 400 14px/1.7 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.row-item--order { grid-template-columns: auto 1fr auto auto; padding-inline: 4px; }
.buyform { display: grid; gap: 12px; }
.buyform__qty { display: grid; gap: 6px; max-width: 140px; }
.alertform { display: grid; gap: 8px; }
.alertform > div { display: flex; gap: 8px; }
.alertform input { flex: 1; min-width: 0; }
.alertform .btn { min-height: 0; white-space: nowrap; }

@media (max-width: 959px) {
  .checkout, .cartgrid, .statusgrid { grid-template-columns: minmax(0, 1fr); }
  .sumbox--sticky { position: static; order: -1; }
  .cartrow { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .cartrow__qty { grid-column: 2; } .cartrow__price { grid-column: 3; grid-row: 1; align-self: start; }
  .cartrow__remove { grid-column: 2 / -1; }
  .header .header__cart { display: none; }
  .actions .header__cart { display: inline-flex; align-items: center; font: 500 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; }
  .fieldrow { grid-template-columns: 110px 1fr; }
}
@media (min-width: 960px) { .actions { display: none; } }
.sumbox dd, .sumbox__dl dd { white-space: nowrap; }


/* ==== mesh gradients ===============================================================================================
   Soft colour fields in the palette of the plants themselves (dusty rose, peach, lilac, sage, sky, oxblood) with fine
   film grain on top. Light fields sit behind the big headlines, dark fields behind the unique-plant band, the footer and
   the category rows on hover. Layers are plain radial gradients (cheap), moved only by transform (smooth), the grain is a
   tiny tiled SVG; reduced-motion and phones get them without movement. */
:root {
  --m-cream: #fff2e1; --m-peach: #f5bd9b; --m-rose: #eba2b3; --m-lilac: #c5b2ec; --m-sky: #a6c6ee; --m-mint: #b0dcc4; --m-butter: #fbe3a8;
  --m-wine: #922244; --m-plum: #5b3484; --m-teal: #146158; --m-ember: #cc5220; --m-ink: #14161a;
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .75 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .75 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* five light fields; every page head picks one, so categories feel different from each other */
  --mesh-1: radial-gradient(50% 64% at 12% 14%, var(--m-cream) 0%, transparent 64%), radial-gradient(44% 58% at 88% 10%, var(--m-rose) 0%, transparent 68%),
            radial-gradient(58% 72% at 82% 92%, var(--m-lilac) 0%, transparent 68%), radial-gradient(46% 60% at 6% 94%, var(--m-peach) 0%, transparent 66%),
            radial-gradient(34% 44% at 52% 46%, var(--m-butter) 0%, transparent 72%), linear-gradient(135deg, #f2e1d2, #ecd9de);
  --mesh-2: radial-gradient(50% 64% at 90% 16%, var(--m-cream) 0%, transparent 64%), radial-gradient(48% 60% at 10% 12%, var(--m-lilac) 0%, transparent 68%),
            radial-gradient(58% 70% at 18% 96%, var(--m-sky) 0%, transparent 68%), radial-gradient(46% 60% at 92% 90%, var(--m-rose) 0%, transparent 66%),
            radial-gradient(32% 44% at 48% 52%, #fde8e0 0%, transparent 72%), linear-gradient(120deg, #e6dcee, #e3e6ef);
  --mesh-3: radial-gradient(50% 64% at 14% 90%, var(--m-cream) 0%, transparent 64%), radial-gradient(46% 60% at 84% 12%, var(--m-mint) 0%, transparent 68%),
            radial-gradient(56% 70% at 8% 10%, var(--m-butter) 0%, transparent 68%), radial-gradient(48% 62% at 90% 94%, var(--m-peach) 0%, transparent 66%),
            radial-gradient(34% 44% at 50% 48%, #f4efd2 0%, transparent 72%), linear-gradient(150deg, #e9e6d2, #efdccb);
  --mesh-4: radial-gradient(52% 66% at 88% 88%, var(--m-cream) 0%, transparent 64%), radial-gradient(46% 60% at 12% 16%, var(--m-rose) 0%, transparent 68%),
            radial-gradient(58% 72% at 86% 8%, var(--m-lilac) 0%, transparent 68%), radial-gradient(44% 58% at 10% 92%, var(--m-sky) 0%, transparent 66%),
            radial-gradient(30% 40% at 52% 46%, var(--m-peach) 0%, transparent 72%), linear-gradient(110deg, #efdbe0, #e0dcef);
  --mesh-5: radial-gradient(50% 64% at 12% 12%, var(--m-sky) 0%, transparent 66%), radial-gradient(46% 60% at 90% 18%, var(--m-cream) 0%, transparent 64%),
            radial-gradient(58% 70% at 84% 92%, var(--m-mint) 0%, transparent 68%), radial-gradient(46% 60% at 8% 90%, var(--m-lilac) 0%, transparent 66%),
            radial-gradient(32% 42% at 50% 50%, #e8f0f2 0%, transparent 72%), linear-gradient(140deg, #dfe8ee, #e2e6dc);
  /* the stronger one for the start page */
  --mesh-hero: radial-gradient(46% 60% at 6% 6%, var(--m-cream) 0%, transparent 62%), radial-gradient(44% 62% at 70% 0%, var(--m-rose) 0%, transparent 64%),
            radial-gradient(52% 70% at 100% 55%, var(--m-lilac) 0%, transparent 64%), radial-gradient(48% 66% at 62% 100%, var(--m-peach) 0%, transparent 62%),
            radial-gradient(44% 58% at 0% 78%, var(--m-sky) 0%, transparent 62%), radial-gradient(30% 40% at 38% 42%, var(--m-butter) 0%, transparent 70%),
            radial-gradient(24% 34% at 86% 24%, #ff9d86 0%, transparent 70%), linear-gradient(135deg, #f3e2d3, #ecd8e2);
  /* dark fields */
  --mesh-night: radial-gradient(52% 66% at 8% 4%, var(--m-wine) 0%, transparent 62%), radial-gradient(46% 62% at 94% 10%, var(--m-plum) 0%, transparent 64%),
            radial-gradient(56% 70% at 88% 100%, var(--m-teal) 0%, transparent 66%), radial-gradient(44% 58% at 0% 100%, var(--m-ember) 0%, transparent 62%),
            radial-gradient(30% 40% at 52% 44%, #2a1a3a 0%, transparent 70%), linear-gradient(180deg, #16181c, #101214);
  --mesh-foot: radial-gradient(60% 90% at 0% 100%, var(--m-wine) 0%, transparent 62%), radial-gradient(50% 80% at 52% 112%, var(--m-ember) 0%, transparent 60%),
            radial-gradient(54% 86% at 100% 100%, var(--m-plum) 0%, transparent 64%), radial-gradient(40% 60% at 80% 0%, var(--m-teal) 0%, transparent 66%),
            linear-gradient(180deg, #14161a, #101214);
  /* barely-there colour over the whole paper */
  --mesh-ambient: radial-gradient(46% 38% at 4% 8%, rgba(235, 162, 179, .30) 0%, transparent 70%), radial-gradient(42% 36% at 98% 30%, rgba(197, 178, 236, .30) 0%, transparent 70%),
            radial-gradient(48% 40% at 12% 100%, rgba(245, 189, 155, .30) 0%, transparent 70%), radial-gradient(40% 34% at 92% 96%, rgba(176, 220, 196, .28) 0%, transparent 70%);
}

@keyframes mesh-drift {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2.5%, 3%, 0) rotate(2.5deg) scale(1.07); }
  100% { transform: translate3d(3%, -3%, 0) rotate(-2deg) scale(1.03); }
}

.mesh { position: relative; isolation: isolate; overflow: hidden; background-color: var(--paper); }
.mesh::before { content: ""; position: absolute; inset: -18%; z-index: -2; background: var(--mesh-1); animation: mesh-drift 34s ease-in-out infinite alternate; will-change: transform; pointer-events: none; }
.mesh::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain-dark); opacity: .16; mix-blend-mode: multiply; pointer-events: none; }
.mesh--v1::before { background: var(--mesh-1); } .mesh--v2::before { background: var(--mesh-2); } .mesh--v3::before { background: var(--mesh-3); }
.mesh--v4::before { background: var(--mesh-4); } .mesh--v5::before { background: var(--mesh-5); }
.mesh--hero::before { background: var(--mesh-hero); }
.mesh--hero, .mesh--head { background-color: transparent; }
.mesh--dark::after, .mesh--footer::after { background-image: var(--grain-light); opacity: .09; mix-blend-mode: screen; }
.mesh--night::before { background: var(--mesh-night); animation-duration: 42s; }
.mesh--footer::before { background: var(--mesh-foot); animation-duration: 46s; }
/* page heads and the start-page stage melt into the paper at the bottom edge */
.mesh--head::before, .mesh--head::after, .mesh--hero::before, .mesh--hero::after { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.mesh--hero::before, .mesh--hero::after { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }

/* start page stage */
.stage { padding-bottom: clamp(36px, 6vw, 96px); }
.stage .hero { padding-top: clamp(24px, 4vw, 60px); }
.head { padding-bottom: clamp(4px, 1.2vw, 18px); }
.head .crumbs { padding-top: 22px; }
.head .pagehead { padding-bottom: clamp(26px, 3.4vw, 48px); }

/* ambient glow of the photo itself behind the big photos (start page and product page) */
.hero__pic { position: relative; }
.glow { position: absolute; inset: 6% -6% -6% -6%; z-index: 0; pointer-events: none; overflow: visible; }
.glow img { width: 100%; height: 100%; object-fit: cover; filter: blur(46px) saturate(1.9) brightness(1.08); opacity: .62; transform: scale(1.12); }
.hero__frame, .hero__cap { position: relative; z-index: 1; }
.gallery { isolation: isolate; }
.gallery .glow { inset: 3% -7% -5% -7%; z-index: -1; }
.gallery .glow img { opacity: .55; filter: blur(52px) saturate(1.8) brightness(1.1); }

/* frosted glass for the bars that float over the fields */
body.has-ambient::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--mesh-ambient); pointer-events: none; }
.header { background: rgba(236, 232, 223, .78); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); }
.filters { background: rgba(236, 232, 223, .82); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
.mega { background: rgba(236, 232, 223, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* dark field behind the unique plants; footer; rows of the category list */
.sec--night { background: var(--night); }
.sec--night.mesh { overflow: hidden; }
.footer { background: var(--night); }
.index__row:hover { background: radial-gradient(70% 160% at 0% 0%, var(--m-wine) 0%, transparent 62%), radial-gradient(60% 150% at 100% 100%, var(--m-plum) 0%, transparent 64%), radial-gradient(50% 120% at 60% 130%, var(--m-ember) 0%, transparent 62%), var(--m-ink); }
.index__row { transition: padding .25s, color .25s; }

/* sticky photo areas and cards get a hairline of light so they read on a coloured ground */
.card__pic, .hero__frame { box-shadow: 0 0 0 1px rgba(21, 23, 26, .06); }

/* gate, coming-soon and error pages are a full field */
.gate.mesh--hero, .mesh--head { background-color: transparent; }

@media (max-width: 720px) {
  .mesh::before { animation: none; inset: -8%; }
  .glow img { filter: blur(34px) saturate(1.8) brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) { .mesh::before { animation: none; } }

/* the info column of the product page stays above the glow of the gallery; the glow never causes sideways scrolling */
.info { position: relative; z-index: 1; }
main { overflow-x: clip; }
@media (max-width: 959px) { .gallery { position: relative; } }
main { position: relative; }

@media (max-width: 480px) { .ph i { display: none; } }

/* the colour layer is 36% taller than its box (it drifts), so its fade has to end where the box ends */
.mesh--head::before, .mesh--hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 48%, transparent 85%); mask-image: linear-gradient(to bottom, #000 48%, transparent 85%); }
@media (max-width: 720px) { .mesh--head::before, .mesh--hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 54%, transparent 92%); mask-image: linear-gradient(to bottom, #000 54%, transparent 92%); } }

/* cookie notice: information only (there is nothing optional to switch off) */
.cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--paper); border-top: 1.5px solid var(--ink); padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom, 0px)); }
.cookiebar[hidden] { display: none; }
.cookiebar__in { max-width: 1760px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.cookiebar p { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.45; }
.cookiebar a { text-decoration: underline; text-underline-offset: 3px; }
.cookiebar .btn { min-height: 44px; padding: 0 20px; }
@media (max-width: 959px) { .cookiebar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: 14px; } }