/* KayaKaHina — storefront.
   Taken from the logo: a small-caps serif wordmark (Cinzel here), a spaced
   sans slogan (Manrope: menu, buttons, labels, body), deep brown #5A2A1A,
   maroon #8E1B1B, burnt orange #D2541A and saffron #F29A00 from the woven
   ring, diamond ornaments, all on a warm white. The woven band and the
   diamond divider are /static/img/band.svg and ornament.svg. */

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

/* ----------------------------------------------------------------- tokens */
:root {
  --ink: #3A1D13;            /* the wordmark's brown, deepened for text */
  --ink-soft: #6B4A3A;       /* 7:1 on the ground */
  --ink-faint: #7d6152;      /* 5:1: small print stays AA */
  --paper: #FFFAF4;          /* warm white, the logo's own ground */
  --paper-light: #FFFDFA;
  --paper-warm: #FBF0E4;
  --sand-deep: #F5E6D6;      /* a band, a fieldset */
  --white: #ffffff;
  --rule: #EAD7C4;
  --accent: #C4470F;         /* burnt orange: buttons, white text 4.9:1 */
  --accent-dark: #8E1B1B;    /* maroon: links and hover, 8:1 */
  --accent-light: #FBD9A6;
  --saffron: #F29A00;        /* ornament only, never text on light */
  --brown: #4A2216;          /* the footer */
  --notice: #FBD9A6;
  --danger: #A32020;
  --success: #4f6e2f;

  --font-head: Cinzel, "Trajan Pro", Georgia, serif;
  --font-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1660px;
  --gap: 1.5rem;
  --shadow: 0 1px 3px rgba(58, 29, 19, .08), 0 8px 24px rgba(58, 29, 19, .06);
}

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

/* Components set their own display (the drawer is flex), which would beat the
   browser's [hidden] rule: the closed drawer stayed rendered off-screen and
   its shadow showed at the edge of every page. */
[hidden] { display: none !important; }

body > main { flex: 1 0 auto; }

body {
  margin: 0;
  /* Footer at the bottom on short pages, no blank strip under it. */
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The original builds every heading as an em multiple of the 14px body and
   does NOT scale them with the viewport — a section title is 25px at 1280 and
   at 390 alike. The clamp() scale I had was my invention, not theirs. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .5em;
}
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

a { color: inherit; text-decoration: underline; text-underline-offset: .18em;
    text-decoration-thickness: 1px; text-decoration-color: var(--ink-soft); }
a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }

/* Keyboard users had to tab the logo and every nav link on every page. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 0; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 30px; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--ink-soft); }
/* The contact form's bot trap: off-screen, not display:none, which some bots skip. */
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.small { font-size: .875rem; }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 10px 35px; border: 1px solid transparent;
  border-radius: 0; background: var(--accent); color: var(--ink);
  font-family: var(--font-body); font-size: 12px; font-weight: 400;
  letter-spacing: 1px; text-transform: none; text-decoration: none;
  cursor: pointer; transition: background .2s ease-in, color .2s ease-in;
  line-height: 1.6;
}
.btn:hover:not([disabled]) { background: var(--accent-light); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.btn--block { display: block; width: 100%; }
.btn--small { padding: .45rem 1.1rem; min-height: 0; font-size: .75rem; }
.btn--danger { background: var(--danger); color: #fff; }

/* ----------------------------------------------------------------- banner */
.banner {
  background: var(--notice); color: var(--ink);
  font-size: .8125rem; line-height: 1.6; text-align: center;
  padding: 10px 1.25rem; min-height: 41px;
  display: flex; align-items: center; justify-content: center;
}
.banner a { color: var(--ink); text-decoration: underline; }

/* ----------------------------------------------------------------- header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); position: relative; z-index: 20; }
.site-header__bar {
  display: flex; align-items: center; gap: 1rem; padding-block: .75rem;
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 68px; height: auto; }

.site-nav { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.site-nav > li { position: relative; list-style: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > li > a, .site-nav > li > button {
  display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: none; font-family: var(--font-body); font-size: .875rem;
  letter-spacing: .5px; text-transform: none; padding: .9rem .8rem;
  background: none; border: 0; color: inherit; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.site-nav > li > a:hover, .site-nav > li > a[aria-current="page"],
.site-nav > li:hover > button { border-bottom-color: var(--accent); }

/* CSS-only dropdown; focus-within keeps it keyboard-operable. */
.site-nav__panel {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--paper); box-shadow: 0 8px 24px rgba(20,17,21,.14);
  border: 1px solid var(--rule); padding: .4rem 0; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav > li:hover > .site-nav__panel,
.site-nav > li:focus-within > .site-nav__panel { opacity: 1; visibility: visible; transform: none; }
.site-nav__panel a {
  display: block; padding: .55rem 1.1rem; text-decoration: none; font-size: .875rem;
}
.site-nav__panel a:hover { background: var(--paper-warm); }

.site-tools { display: flex; align-items: center; gap: .25rem; }
.site-tools a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem; text-decoration: none; color: var(--ink);
}
.site-tools svg { width: 20px; height: 20px; display: block; }
.cart-link { font-weight: 400; white-space: nowrap; }

/* Mobile: hamburger left, logo centred, cart right — and the menu slides in
   from the left over a scrim, as the original does, rather than expanding
   inline and pushing the page down. */
.nav-toggle { display: none; }
.nav-toggle__button { display: none; }

@media (max-width: 60rem) {
  .site-header__bar {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem;
    align-items: center; padding: 10px 15px;
  }
  .nav-toggle__button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
    color: var(--ink); grid-column: 1; justify-self: start;
  }
  .site-header__logo { grid-column: 2; justify-self: center; }
  .site-tools { grid-column: 3; justify-self: end; }

  .site-nav-wrap {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 85vw);
    background: var(--paper); z-index: 61; overflow-y: auto; padding: 70px 20px 20px;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .6s cubic-bezier(.165, .84, .44, 1), visibility 0s .6s;
  }
  /* Shadow and focusable links only while open: closed, the panel's shadow
     showed at the left edge and Tab walked through the off-screen links. */
  .site-nav-wrap.is-open {
    transform: none; visibility: visible; transition-delay: 0s;
    box-shadow: 4px 0 24px rgba(20, 17, 21, .18);
  }
  .site-nav {
    display: flex; flex-direction: column; align-items: stretch;
    margin: 0; text-align: left;
  }
  .site-nav > li > a, .site-nav > li > button {
    padding: 14px 4px; width: 100%; font-size: 15px;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav > li > a::after { display: none; }
  .site-nav__panel,
  .site-nav > li.has-mega > .site-nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 12px; width: auto;
  }
  .mega { grid-template-columns: 1fr; gap: 0; padding: 0; text-align: left; }
  .mega__media { display: none; }
  .mega__label { display: block; padding: 10px 0; font-size: 14px; }
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
    z-index: 60; opacity: 0; transition: opacity .3s ease;
  }
  .nav-overlay.is-open { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-wrap, .nav-overlay { transition: none; }
}

/* -------------------------------------------------------------------- hero */
/* Full-bleed photograph with a solid gold content box over it, as the live
   shop leads. The photo is a real <img> rather than a background so it can be
   sized responsively and carries alt text. */
/* The original hero is a fixed 900px with the gold box on the right, vertically
   centred. Mine shrink-wrapped .wrap as a flex item, so the box came out
   centred and top-aligned instead. */
.hero-photo { position: relative; min-height: 900px; display: flex; }
.hero-photo > .wrap {
  position: relative; width: 100%; display: flex; align-items: center;
}
.hero-photo__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
}
.hero-photo__box {
  margin: 0 0 0 auto; max-width: 50%;
  background: var(--accent); color: var(--ink); padding: 30px;
}
.hero-photo__box h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .4rem; }
.hero-photo__box p { margin: 0 0 1.25rem; font-size: .95rem; }
@media (max-width: 52rem) {
  .hero-photo { min-height: 0; flex-direction: column; }
  .hero-photo__media { position: relative; height: 52vh; }
  .hero-photo__box { max-width: none; margin: 0; }
}

/* Colour banding: the live page alternates white, gold, ink, photo, tan. */
.band { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.band--ink { background: var(--ink); color: var(--paper-light); text-align: center; }
.band--ink h2 { color: #fff; }
.band--ink p { max-width: 70ch; margin-inline: auto; }
.band--cream { background: var(--paper-warm); }
.band__signoff { font-weight: 700; margin-top: 1.25rem; }

/* Photographic band with an overlaid content box ("Im Laden gut beraten"). */
.feature { position: relative; display: flex; min-height: min(50vw, 640px); }
.feature > .wrap {
  position: relative; width: 100%; display: flex; align-items: center;
}
.feature__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__box {
  margin: 0 0 0 auto; max-width: 50%; text-align: right;
  background: rgba(20, 17, 21, .62); color: #fff; padding: 2rem 2.25rem;
}
.feature__box .btn { float: right; }
.feature__box h2 { color: #fff; }
@media (max-width: 52rem) {
  .feature { flex-direction: column; min-height: 0; }
  .feature__media { position: relative; height: 42vh; }
  .feature__box { max-width: none; margin: 0; background: var(--ink); }
}

/* Category tiles — photo, veil, title, CTA. */
.tiles {
  gap: 30px;
  /* Capped and centred: with auto-fit one tile stretched across the whole
     page as a screen-sized empty box. */
  display: flex; flex-wrap: wrap; justify-content: center;
}
.tiles > * { flex: 1 1 340px; max-width: 480px; }

/* The original's collection tile is a photo with the caption and a gold button
   BENEATH it — not white text on a scrim over the image, which is what I had
   built and what made the titles hard to read in the first place. */
.tile {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  text-align: center;
}
.tile__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-warm); }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2s ease;      /* the original's slow Ken Burns */
}
.tile.is-in img { transform: scale(1.06); }
.tile__label { padding: 15px 0 0; }
.tile h2, .tile h3 {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink); margin: 0 0 12px; text-shadow: none; line-height: 1.6;
}
.tile__count { display: block; color: var(--ink-soft); font-size: 12px; margin-bottom: 12px; }
.tile .btn { pointer-events: none; }

/* Newsletter band, above the footer on every page. */
.newsletter { background: var(--ink); color: #fff; padding-block: 2.75rem; }
.newsletter h2 { color: #fff; margin-bottom: .35rem; }
.newsletter__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: center; }
.newsletter__form { display: flex; gap: .5rem; align-items: flex-end; }
.newsletter__form input[type=email] {
  background: transparent; border: 0; border-bottom: 1px solid #fff; color: #fff;
  padding-left: 0; border-radius: 0;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter__form button {
  background: var(--accent); color: var(--ink); border: 0; min-height: 44px;
  padding: 0 1.1rem; font-size: 1.1rem; cursor: pointer;
}
.newsletter a { color: var(--accent); }

/* ------------------------------------------------------------------- grid */
.grid { display: grid; gap: var(--gap); }
.grid--products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* ------------------------------------------------------------------- card */
.card {
  background: var(--white); border: 1px solid var(--rule);
  display: flex; flex-direction: column; height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card a { text-decoration: none; }
.card__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-warm); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card__number {
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.card__title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; margin: 0; }
.card__price { margin-top: auto; padding-top: .5rem; font-weight: 700; }
.card__from { font-weight: 400; color: var(--ink-soft); font-size: .8125rem; }

/* ---------------------------------------------------------------- product */
.product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .product { grid-template-columns: 1.1fr 1fr; } }
.product__gallery img { width: 100%; border: 1px solid var(--rule); background: var(--white); }
.product__thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.product__thumbs button {
  width: 68px; height: 68px; padding: 0; border: 1px solid var(--rule);
  background: var(--white); cursor: pointer; overflow: hidden;
}
/* The gallery rule above made thumbnails full width at their own height, so
   portrait photos spilled out of the 68px buttons onto the product title. */
.product__gallery .product__thumbs img {
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.product__thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.product__price { font-size: 1.6rem; font-weight: 700; font-family: var(--font-head); }
.product__basis { color: var(--ink-soft); font-size: .8125rem; }
.rte { line-height: 1.6; }
.rte img { margin-block: 1rem; }
.rte h2, .rte h3 { margin-top: 1.5em; }
.rte ul, .rte ol { padding-inline-start: 1.25rem; }

/* ------------------------------------------------------------------ forms */
label {
  display: block; font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
/* Enumerating types meant any input whose type was missing or unusual — search,
   url, the untyped checkout fields — matched nothing and fell back to the
   browser's ~177px default with no padding or height. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit])),
select, textarea {
  width: 100%; padding: 10px; border: 1px solid var(--rule);
  border-radius: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 14px; min-height: 44px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.field + .field { margin-top: .9rem; }
.field-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
fieldset { border: 1px solid var(--rule); padding: 1rem; margin: 0 0 1rem; background: var(--paper-light); }
legend { font-family: var(--font-head); font-weight: 600; padding-inline: .4rem; }

/* stepper */
.stepper { display: inline-flex; border: 1px solid var(--rule); background: var(--white); }
.stepper button {
  width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 1.1rem; cursor: pointer; color: var(--ink);
}
.stepper input { width: 3.25rem; text-align: center; border: 0; min-height: 44px; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ------------------------------------------------------------------ table */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .65rem .5rem; text-align: left; border-bottom: 1px solid var(--rule); }
.table th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------------- cart */
.totals { margin-inline-start: auto; max-width: 22rem; }
.totals__row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.totals__row--grand {
  border-top: 2px solid var(--ink); margin-top: .5rem; padding-top: .6rem;
  font-weight: 700; font-size: 1.15rem; font-family: var(--font-head);
}
.line-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; align-items: start;
             padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.line-item__media { border: 1px solid var(--rule); background: var(--white); }

/* ----------------------------------------------------------------- notice */
.notice { padding: .85rem 1rem; border-inline-start: 4px solid var(--accent); background: var(--paper-warm); }
.notice--error { border-color: var(--danger); background: #fff6f6; color: #7a0000; }
.notice--ok { border-color: var(--success); background: #ecfef0; }
.badge {
  display: inline-block; padding: .15rem .55rem; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--paper);
}
.badge--soldout { background: var(--ink-faint); }

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--sand-deep); color: var(--ink);
  padding-block: 2.25rem; font-size: .875rem;
}
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 { color: var(--ink); font-size: 1rem; margin-bottom: .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: .3rem; }
.site-footer__grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-top: 1.75rem;
  padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.18);
}
.pay { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pay img { height: 26px; width: auto; display: block; }

/* Product cards: the live shop shows the whole label, ours cropped ~29% off
   a 568x800 label because the box is square and the fit was cover. */
.card { border: 0; background: transparent; text-align: center; }
.card:hover { box-shadow: none; transform: none; }
.card__media { background: #fff; border: 1px solid var(--rule); }
.card__media img { object-fit: contain; padding: .5rem; transition: transform .4s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: .85rem .25rem; align-items: center; }
.card__title { font-size: 1rem; }
.card__vendor { font-size: .75rem; color: var(--ink-faint); }
.card__basis { font-size: .6875rem; color: var(--ink-faint); }

/* Breadcrumb */
.crumbs { font-size: .75rem; color: var(--ink-faint); margin-bottom: 1rem; }
.crumbs a { text-decoration: none; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--ink-faint); }
.crumbs a:hover { text-decoration: underline; }

/* Progressive disclosure on the product page, so the buy button stays near
   the top instead of being buried under a 2000-word origin story. */
.more { border-block: 1px solid var(--rule); margin-block: 1.5rem; }
.more > summary {
  list-style: none; cursor: pointer; text-align: center; padding: .9rem 0;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " \2304"; }
.more[open] > summary::after { content: " \2303"; }
.more__body { padding-bottom: 1.25rem; }

/* Category banner */
.cat-banner { position: relative; height: clamp(180px, 26vw, 320px); overflow: hidden; }
.cat-banner img { width: 100%; height: 100%; object-fit: cover; }

.intro { max-width: 62ch; margin-inline: auto; text-align: center; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: 1.75rem; }

/* ------------------------------------------------------------------ steps */
.steps { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; margin: 0 0 1.5rem; padding: 0;
         font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.steps li { color: var(--ink-faint); }
.steps li[aria-current] { color: var(--ink); font-weight: 700; }
.steps li + li::before { content: "›"; margin-inline-end: .5rem; color: var(--rule); }

@media print {
  .site-header, .site-footer, .banner, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- Utilities -------------------------------------------------------------
   CSP is style-src 'self' with no unsafe-inline, so a style="…" attribute is
   dropped by the browser and the element renders unstyled. These replace the
   inline declarations the templates used to carry. */
.u-section      { padding-block: 2rem; }
.u-section--lg  { padding-block: 2.5rem; }
.u-section--xl  { padding-block: 3rem; }
.u-narrow       { max-width: 34rem; }
.u-readable     { max-width: 46rem; }
.u-medium       { max-width: 52rem; }
.u-receipt      { max-width: 44rem; }
.u-mt-sm        { margin-top: .5rem; }
.u-mt-lg        { margin-top: 1.5rem; }
.u-mb-lg        { margin-bottom: 1.5rem; }
.u-start        { align-items: start; }
.u-inline-radio { width: auto; min-height: 0; }
.u-qty-row      { margin-top: .5rem; display: flex; gap: .5rem; align-items: center; }
.u-choice       { display: flex; gap: .6rem; align-items: baseline; font-weight: 400; }
.u-amount       { font-size: 2rem; font-weight: 700; font-family: var(--font-head);
                  margin: .25rem 0 1.5rem; }
.u-footer-note  { color: inherit; opacity: .8; }

/* Mobile cart: the three-column line item clipped the price and put the
   remove button off-screen on a phone, so a basket could not be corrected. */
@media (max-width: 40rem) {
  .line-item { grid-template-columns: 64px 1fr; }
  .line-item > .num { grid-column: 2; text-align: left; }
}

/* .field + .field also matched inside .field-row, staggering paired fields. */
.field-row > .field + .field { margin-top: 0; }

.u-inline { display: inline; }

/* --- Contrast corrections --------------------------------------------------
   Found by looking at every page after the design pass rather than only the
   two I had rebuilt. */


/* A ghost button inherits the ink colour, which disappears on any dark ground.
   Both dark bands need the inverted variant. */
.band--ink .btn--ghost,
.feature__box .btn--ghost,
.newsletter .btn--ghost {
  border-color: #fff;
  color: #fff;
}
.band--ink .btn--ghost:hover,
.feature__box .btn--ghost:hover,
.newsletter .btn--ghost:hover { background: #fff; color: var(--ink); }


/* --- Contrast, round two ---------------------------------------------------
   Same failure mode as the footer button: a container rule outranking .btn,
   or a button sharing its ground's colour. */

/* The hero CTA was a gold button on the gold hero box — no button shape at
   all, just floating text on the flagship page. */
.hero-photo__box .btn {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.hero-photo__box .btn:hover:not([disabled]) { background: #332c35; }

/* .newsletter a (0,1,1) outranks .btn (0,1,0): not triggered today, because
   the band holds a <button>, but it would render gold-on-gold the moment
   anyone put a link-button there. */
.newsletter .btn { color: var(--ink); }
.newsletter .btn--ghost { color: #fff; }

/* --- Table footers ---------------------------------------------------------
   A tfoot cell is a <th>, so the order total inherited the column-header style:
   12px uppercase grey, visually weaker than the line items above it and
   indistinguishable from the subtotal. */
.table tfoot th,
.table tfoot td { font-size: .9375rem; text-transform: none; color: var(--ink); }
.table tfoot tr:last-of-type th,
.table tfoot tr:last-of-type td {
  font-size: 1.1rem; font-weight: 700; font-family: var(--font-head);
  border-top: 2px solid var(--ink);
}
.table tfoot tr.muted th, .table tfoot tr.muted td {
  font-size: .8125rem; color: var(--ink-soft); font-weight: 400;
  font-family: var(--font-body); border-top: 0;
}

/* --- Blog cards ------------------------------------------------------------
   Posts were reusing .card, which is now the product-grid treatment: centred,
   borderless, shrink-wrapped. Three columns of ragged grey text. */
.card--post {
  text-align: left; border: 1px solid var(--rule); background: var(--white);
}
.card--post .card__body { align-items: stretch; padding: 1.25rem; gap: .5rem; }
.card--post .card__title { font-size: 1.2rem; }
.card--post:hover { box-shadow: var(--shadow); }

/* --- Imported body HTML ----------------------------------------------------
   Migrated content carries bare <svg> with no width or height, which fills the
   column — the blog share icons rendered about 740px square. */
.rte svg {
  width: 1.25rem; height: 1.25rem;
  display: inline-block; vertical-align: middle;
}
.rte iframe, .rte video { max-width: 100%; }

/* --- Mobile header ---------------------------------------------------------
   .site-nav spanned both columns without an explicit row, so auto-placement
   pushed .site-tools onto row 3: opening the menu removed search, account and
   cart from the header entirely. */
@media (max-width: 60rem) {
  .nav-toggle__button { grid-row: 1; grid-column: 1; }
  .site-header__logo  { grid-row: 1; grid-column: 2; justify-self: center; }
  .site-tools         { grid-row: 1; grid-column: 3; }
  .site-nav           { grid-row: 2; grid-column: 1 / -1; }
}

/* ===========================================================================
   Interaction
   ---------------------------------------------------------------------------
   The site had five transitions and no :active states at all — nothing
   anywhere acknowledged a click. These add feedback, not decoration: the
   square corners, the gold and the restraint stay exactly as they are.
   Everything below is disabled under prefers-reduced-motion at the end.
   =========================================================================== */

/* --- Focus ----------------------------------------------------------------
   The ring was always --ink, which is invisible on the ink band, the feature
   overlay and the tile scrim — 1.00:1 in the newsletter. Each dark surface
   now sets its own. */
:root { --focus: var(--ink); }
.band--ink, .newsletter, .feature__box, .hero-photo__box, .site-footer { --focus: var(--ink); }
.band--ink, .newsletter, .feature__box { --focus: var(--accent); }

input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}
/* A tile's ring can land on the photograph itself, so it needs to work against
   anything: a white ring with an ink halo. */
.tile:focus-visible {
  outline: 3px solid #fff; outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(20, 17, 21, .9);
}

/* --- Buttons --------------------------------------------------------------
   Hover lifts and casts a shadow; the press puts it back down. Without the
   active state a click produced no feedback whatsoever. */
.btn {
  transition: background-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
  will-change: transform;
}
.btn:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 17, 21, .18);
}
.btn:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(20, 17, 21, .22) inset;
}
.btn[disabled] { box-shadow: none; transform: none; }

/* --- Cards ----------------------------------------------------------------
   .card:hover was declared twice and the second rule cancelled the first, so
   product cards had no lift at all — the flattest thing on the site. */
.card {
  transition: box-shadow .22s ease, transform .22s ease;
}
.card:hover,
.card:focus-within {
  box-shadow: 0 6px 22px rgba(20, 17, 21, .13);
  transform: translateY(-3px);
}
.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.045); }
.card__media { overflow: hidden; }
.card--post:hover { transform: translateY(-3px); }

/* --- Navigation -----------------------------------------------------------
   The gold rule under a nav item now grows from the centre instead of
   snapping on. */
.site-nav > li > a {
  position: relative;
  border-bottom-color: transparent !important;
  transition: color .18s ease;
}
.site-nav > li > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .55rem;
  height: 2px; background: var(--accent);
  transition: left .22s ease, right .22s ease;
}
.site-nav > li:hover > a::after,
.site-nav > li:focus-within > a::after { left: .8rem; right: .8rem; }
.site-nav > li > a[aria-current="page"]::after {
  left: .8rem; right: .8rem; background: var(--ink);
}
.site-nav__panel a { transition: background-color .15s ease, padding-left .15s ease; }
.site-nav__panel a:hover { padding-left: 1.35rem; }

/* --- Header tools ---------------------------------------------------------
   Search, account and cart were completely inert. */
.site-tools a {
  border-radius: 2px;
  transition: background-color .18s ease, transform .12s ease;
}
.site-tools a:hover { background: var(--paper-warm); }
.site-tools a:active { transform: scale(.94); }
.cart-count { transition: transform .18s ease; }
.cart-link:hover .cart-count { transform: scale(1.12); }

/* --- Form controls --------------------------------------------------------
   The border used to jump straight to the focus ring with nothing in between,
   and --rule at 1.25:1 on white was below the 3:1 minimum for a control. */
:root { --field-border: #8a6a58; }
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit])),
select, textarea {
  border-color: var(--field-border);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:hover:not([disabled]), select:hover, textarea:hover { border-color: var(--ink-soft); }
.stepper, .product__thumbs button { border-color: var(--field-border); }
.stepper button { transition: background-color .15s ease; }
.stepper button:hover { background: var(--paper-warm); }
.product__thumbs button { transition: border-color .18s ease, transform .18s ease; }
.product__thumbs button:hover { transform: translateY(-2px); }
.notice--ok { border-color: #2f7d43; }
.site-footer__bottom { border-top-color: rgba(0, 0, 0, .4); }

/* --- Tiles ---------------------------------------------------------------- */
.tile__label { transition: transform .28s ease; }
.tile:hover .tile__label { transform: translateY(-3px); }

/* --- Payment badges ------------------------------------------------------- */
.pay img { transition: transform .18s ease, filter .18s ease; filter: saturate(.85); }
.pay img:hover { transform: translateY(-2px); filter: none; }

/* --- Links that were indistinguishable from their surroundings ------------ */
.site-footer p a { text-decoration: underline; text-underline-offset: .15em; }
.crumbs a { text-decoration: underline; text-underline-offset: .15em; }

/* --- Disclosure ----------------------------------------------------------- */
.more > summary { transition: color .15s ease, background-color .15s ease; }
.more > summary:hover { background: var(--paper-warm); }

/* --- Respect a reduced-motion preference ----------------------------------
   The whole point of the block above is movement, so it all goes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover:not([disabled]),
  .btn:active:not([disabled]),
  .card:hover, .card:focus-within, .card--post:hover,
  .tile:hover .tile__label, .site-tools a:active,
  .cart-link:hover .cart-count, .product__thumbs button:hover,
  .pay img:hover { transform: none !important; }
  .tile:hover img, .card:hover .card__media img,
  .card:focus-within .card__media img { transform: none !important; }
  .site-nav__panel { transform: none; }
  .site-nav > li:hover > .site-nav__panel,
  .site-nav > li:focus-within > .site-nav__panel { transform: none; }
}

/* .site-footer p a underlines inline links in the address block, but the
   withdrawal button lives in a <p> too and is not an inline link. */
.site-footer p a.btn { text-decoration: none; }

/* ===========================================================================
   Matching the original, measured
   ---------------------------------------------------------------------------
   Values below come from getComputedStyle on siegel-kaffee.de rather than from
   reading its stylesheet, which is how the earlier type scale came out wrong.
   =========================================================================== */

/* iOS zooms a focused input below 16px, so the original raises it on phones. */
@media (max-width: 30rem) {
  input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit])),
  select, textarea { font-size: 16px; }
}

/* Band and section titles: 25px, letter-spaced, centred — the original's
   .homepage-sections--title, identical at every width. */
.band > .wrap > h2,
.band h2.center,
.page-title {
  font-size: 25px; line-height: 1.4; letter-spacing: 1px;
  margin-bottom: 15px; text-align: center;
}
.section-sub {
  text-align: center; margin: 0 0 40px; font-size: 14px; color: var(--ink);
}

/* The two photo-overlay bands run larger. */
.feature__box h2 { font-size: 32px; line-height: 1.4; letter-spacing: 1px; }
.hero-photo__box h1 {
  font-size: 30px; line-height: 33px; letter-spacing: 1px; text-align: left;
}

/* The notice bar is 14px, which is what makes it 58px tall rather than 41. */
.banner { font-size: 14px; line-height: 1.6; }

/* Header: full-bleed with a 15px gutter, no centred wrapper. */
.site-header__bar {
  max-width: none; padding: 15px 15px 0; gap: 0;
}
.site-header__logo img { width: auto; height: 90px; }

/* The auto margin was on the <ul> inside the <nav>, so it did nothing and the
   nav and icons bunched against the logo with 547px of empty space beside
   them. It belongs on the flex child. */
.site-header__bar > .site-nav-wrap { margin-inline-start: auto; }
.site-nav { margin-inline-start: 0; padding: 0; text-align: right; }
.site-nav > li > a,
.site-nav > li > button {
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: normal;
  padding: 15px;
}
.site-nav__panel { transform: translateY(-12px); transition: all .3s ease; }
.site-nav__panel a { font-size: 12px; font-weight: 500; }

/* Product cards are set in the body face, not the heading face. */
.card__title { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); }
.card__vendor { font-size: 14px; color: var(--ink); }
.card__price { font-size: 14px; font-weight: 400; margin-top: 5px; padding-top: 0; }
.card__basis { font-size: 12px; line-height: 1.6; color: var(--ink); }

/* The product page h1 is small and left-aligned, not a 36px display heading. */
.product h1 { font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
#AddToCart, .product form .btn--block { max-width: 300px; }

.site-footer { padding-block: 30px; }
.site-footer a { color: var(--ink); }

/* --- Three promises, dark strip ------------------------------------------- */
.promises { background: var(--ink); color: #fff; padding-block: 30px; }
.promises__grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  text-align: center;
}
.promises h3 {
  color: #fff; font-size: 16px; line-height: 1.4; margin: 0 0 .4rem;
}
.promises p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .86); }

/* --- Image beside text ---------------------------------------------------- */
.split__grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.split__media img { width: 100%; height: auto; display: block; }
/* Portrait photos ran to 950px (1170px on a wide screen) at full column
   width: capped to the screen, centred in their column. */
.split__media img {
  width: auto; max-width: 100%; max-height: min(80vh, 760px); margin-inline: auto;
}
.split__text h1, .split__text h2 { font-size: 25px; letter-spacing: 1px; }
.split__text h1 { font-size: 30px; }

/* --- Reveal on scroll ------------------------------------------------------
   The original hides every home-page band and fades it up as it enters the
   viewport (.show-on-scroll plus WOW fadeInUp). Without this the page reads as
   a flat wall; with it, it unfolds. Progressive: .no-js never hides anything,
   so the content is there with JS off or if the observer never fires. */
.js .reveal,
.js .reveal-item {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-in,
.js .reveal-item.is-in { opacity: 1; transform: none; }

/* Items inside a row arrive one after another rather than all at once — this
   is what actually reads as movement; a whole 700px band fading in as a single
   block is nearly invisible. Delays come from nth-child because the CSP
   forbids the inline style a --index would need. */
.js .reveal-item:nth-child(2) { transition-delay: .08s; }
.js .reveal-item:nth-child(3) { transition-delay: .16s; }
.js .reveal-item:nth-child(4) { transition-delay: .24s; }
.js .reveal-item:nth-child(5) { transition-delay: .32s; }
.js .reveal-item:nth-child(6) { transition-delay: .40s; }

/* The hero box is above the fold, so it rises on load rather than on scroll. */
.js .hero-photo__box { transform: translateY(28px); transition-duration: .7s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-item {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
  .tile img, .tile.is-in img { transition: none; transform: none !important; }
}

/* --- Shop menu: full-width panel, as the original -------------------------
   The original makes the <li> position:static so the panel spans the header
   rather than hanging off the trigger as a 250px list. Desktop only: these
   rules used to come after the mobile ones and overrode them, putting a
   padded grey box into the mobile menu. Tiles keep a fixed width, so a
   single category no longer stretches into a screen-sized empty panel. */
.mega { list-style: none; margin: 0; }
.mega a { display: block; text-decoration: none; }
@media (min-width: 60.01rem) {
  .site-nav > li.has-mega { position: static; }
  .site-nav > li.has-mega > .site-nav__panel {
    left: 0; right: 0; width: 100%; min-width: 0;
    padding: 0 30px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    border: 0; border-top: 1px solid var(--rule);
  }
  .site-nav .mega {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    padding: 20px 0; text-align: center;
  }
  .site-nav .mega > li { width: 220px; }
  .site-nav .mega a { padding: 0; }
  .mega a:hover { background: transparent; }
  .mega__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-warm); }
  .mega__media img { width: 100%; height: 100%; object-fit: cover; }
  .mega__label { display: block; padding-top: 8px; font-size: 12px; font-weight: 500; }
  .site-nav .mega a:hover .mega__label { text-decoration: underline; }
}

/* --- Parallax on the feature band ---------------------------------------- */
.js .feature__media { will-change: transform; }

/* --- Mobile header: the logo centres on the PAGE, not in its grid column -- */
@media (max-width: 60rem) {
  .site-header__bar { grid-template-columns: 1fr auto 1fr; }
  .nav-toggle__button { grid-column: 1; justify-self: start; }
  .site-header__logo { grid-column: 2; justify-self: center; }
  .site-header__logo img { height: 64px; }
  .site-tools { grid-column: 3; justify-self: end; }
  /* z-index on the header made it a stacking context: the slide-in menu (61)
     was trapped inside it, under the page-level overlay (60), and every tap
     hit the overlay and closed the menu. */
  .site-header { z-index: auto; }
  /* The desktop nav rules further up (12px, 15px padding, right-aligned,
     panel nudged up) also hit the slide-in menu. */
  .site-nav { text-align: left; }
  .site-nav > li > a, .site-nav > li > button {
    padding: 14px 4px; font-size: 15px; width: 100%;
  }
  .site-nav__panel, .site-nav__panel a:hover { transform: none; }
  .site-nav__panel a { font-size: 14px; padding: 10px 4px; }
  .site-nav__panel a:hover { padding-left: 4px; }
}

/* --- Load-more, with the original's gold progress bar --------------------- */
.load-more { text-align: center; margin-top: 30px; }
.load-more__text { font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }
.progress-bar {
  height: 4px; background: var(--rule); max-width: 300px;
  margin: 0 auto 15px; overflow: hidden;
}
.progress-bar__inner { height: 100%; background: var(--accent); transition: width .4s ease; }

/* --- Cart drawer -----------------------------------------------------------
   The original slides a panel in from the right over a scrim instead of
   navigating. Progressive: without JS the form posts and the customer lands on
   /cart as before, so nothing depends on this. */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .3s ease; z-index: 60;
}
.drawer-overlay.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw);
  background: var(--paper); z-index: 61; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.165,.84,.44,1);
}
.drawer.is-open { transform: none; box-shadow: -4px 0 24px rgba(20, 17, 21, .18); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 15px; border-bottom: 1px solid var(--rule);
}
.drawer__head h2 { margin: 0; font-size: 22px; }
.drawer__close {
  background: none; border: 0; font-size: 28px; line-height: 1;
  cursor: pointer; color: var(--ink); padding: 0 4px;
}
.drawer__body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer__item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px;
  padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--rule);
}
.drawer__item span { display: block; }
.drawer__media { border: 1px solid var(--rule); }
.drawer__foot { padding: 20px; border-top: 1px solid var(--rule); }
.drawer__foot .btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay { transition: none; }
}

/* Width is painted by site.js from data-shown/data-total; without JS the bar
   stays empty and the <noscript> link paginates instead. */
.progress-bar__inner { width: 0; }

/* ------------------------------------------------ pictures placed in texts */
.rt-figure { margin: 1.25rem 0; }
.rt-figure img { display: block; width: 100%; height: auto; margin: 0; }
.rt-figure--small { display: inline-block; margin: .25rem .5rem .25rem 0; }
.rt-figure--small img { width: auto; max-width: 120px; max-height: 120px; }
.rt-gallery { display: grid; gap: .75rem; margin: 1.25rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.rt-gallery .rt-figure { margin: 0; }
.rt-gallery .rt-figure img { aspect-ratio: 3 / 2; object-fit: cover; }
.rt-gallery .rt-figure--small img { aspect-ratio: auto; object-fit: contain; }
.rt-missing { color: var(--danger); font-size: .875rem; }

/* ------------------------------------------------------- content sections */
.section-image { margin-block: 1.25rem; }
.section-image img { display: block; width: 100%; height: auto; }
.section-image figcaption { margin-top: .4rem; }
.section-button { margin-block: 1.25rem; }
.split--flip .split__media { order: 2; }

/* "Seite bearbeiten" for a signed-in admin viewing the shop. */
.edit-this { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; padding: .55rem .95rem;
  background: var(--ink); color: #fff; border: 2px solid var(--accent); border-radius: 999px;
  text-decoration: none; font-size: 13px; letter-spacing: .5px; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.edit-this:hover { background: #000; color: var(--accent); }

.search-pages { list-style: none; margin: 1rem auto 0; padding: 0; }
.search-pages li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }

.rte table { border-collapse: collapse; margin: 1rem 0; }
.rte td, .rte th { border: 1px solid var(--rule); padding: .35rem .6rem; vertical-align: top; }

/* ------------------------------------------------------------ video, click to play */
.video-section { margin-block: 1.5rem; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(20,17,21,.25);
  cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.video__play:hover, .video__play:focus-visible { background: rgba(20,17,21,.1); }
.video__icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); position: relative; }
.video__icon::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .75rem 0 .75rem 1.2rem; border-color: transparent transparent transparent #000; }
.video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__note { margin: .5rem 0 0; }

/* ------------------------------------------------------------- table section */
.table-section { margin-block: 1.5rem; }
.table-section__title { margin-bottom: .75rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table th, .data-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule);
  vertical-align: top; min-width: 6rem; }
.data-table thead th { font-family: var(--font-head); font-weight: 600; letter-spacing: .5px;
  border-bottom: 2px solid var(--ink); }
.data-table tbody tr:nth-child(even) { background: var(--paper-light); }

/* ---------------------------------------------------- section backgrounds */
/* The brand palette only. The background reaches the edges of the window
   even when the section itself is a narrow reading column. */
.tone { --tone-bg: transparent; background: var(--tone-bg); box-shadow: 0 0 0 100vmax var(--tone-bg);
  clip-path: inset(0 -100vmax); padding-block: 2rem; margin-block: 0; }
.tone--cream { --tone-bg: var(--paper-warm); }
.tone--gold  { --tone-bg: var(--sand-deep); }
.tone--dark  { --tone-bg: var(--ink); color: #fff; }
.tone--dark h1, .tone--dark h2, .tone--dark h3 { color: #fff; }
.tone--dark a:not(.btn) { color: var(--accent-light); text-decoration-color: var(--accent-light); }
.tone--dark .muted, .tone--dark figcaption { color: rgba(255,255,255,.75); }
.tone--dark .btn--ghost { border-color: #fff; color: #fff; }
.tone--dark .data-table th, .tone--dark .data-table td { border-color: rgba(255,255,255,.2); }
.tone--dark .data-table thead th { border-bottom-color: var(--accent); }
.tone--dark .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.05); }
.tone--cream .data-table tbody tr:nth-child(even) { background: #fff; }
.tone--gold .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.3); }
.tone--gold .btn { background: var(--ink); color: #fff; border-color: var(--ink); }

/* "Hervorheben" in a text: brand gold, never a colour of its own. */
.rte mark, mark { background: var(--accent-light); color: inherit; padding: 0 .15em; border-radius: 2px; }
.tone--gold mark { background: #fff; }
.tone--dark mark { background: var(--accent); color: var(--ink); }

/* ===========================================================================
   Buyer fixes (review 2026-10-14)
   ======================================================================== */

/* Full-width buttons that are links centred their text to the left. */
.btn--block { text-align: center; }

/* The size on a card: the one thing that tells one dress from the next. */
.card__sizes { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }

/* Phones: two cards per row. One per row made the home page 5,900px long. */
@media (max-width: 37.5rem) {
  .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
}

/* Mobile menu: a way out, and the links the header icons stand for. */
.nav-close, .site-nav__extra { display: none; }
@media (max-width: 60rem) {
  .nav-close {
    display: block; position: absolute; top: 12px; right: 12px;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
    font-size: 30px; line-height: 1; color: var(--ink);
  }
  .site-nav__extra { display: list-item; }
  .site-nav > li.site-nav__extra > a { font-size: 14px; color: var(--ink-soft); }
}

/* Product page on phones: price and Add to cart stay at the bottom of the
   screen; below the photos they were out of reach. */
.product__buy-price { display: none; }
@media (max-width: 56rem) {
  .product__buy {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); box-shadow: 0 -4px 16px rgba(20, 17, 21, .12);
  }
  .product__buy-price { display: block; font-weight: 700; font-size: 18px; white-space: nowrap; }
  .product form .product__buy .btn--block { flex: 1; max-width: none; min-height: 48px; font-size: 14px; }
  body:has(.product__buy) { padding-bottom: 76px; }
}

/* Remove, in the cart drawer. */
.drawer__remove {
  background: none; border: 0; padding: 4px 0; margin-top: 2px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--ink-soft); text-decoration: underline;
}
.drawer__close { min-width: 44px; min-height: 44px; }

/* Cart: what the drawer has to say, and how long a piece is held. */
.drawer__notice { margin: 16px 20px 0; font-size: 14px; }
.drawer__held, .cart__held { display: block; margin-top: 4px; color: var(--ink-soft); }

/* Checkout. Fields and field rows had no space between them where one
   followed the other. */
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: .9rem; }
.field-row--street { grid-template-columns: minmax(0, 1fr) 8.5rem; }
.code-apply { display: flex; gap: 8px; }
.code-apply .btn { flex: none; min-height: 44px; }
#code-feedback .notice { margin: .9rem 0 0; }
.checkout-mini { display: none; }
@media (max-width: 46rem) {
  .checkout-mini {
    display: block; margin: 0 0 1rem; border: 1px solid var(--rule); background: var(--paper-light);
  }
  .checkout-mini summary {
    display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer;
  }
  .checkout-mini ul { margin: 0; padding: 0 16px 14px; list-style: none; font-size: 14px; }
  .checkout-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
}
.product__basis:empty { display: none; }

/* ===================================================== KayaKaHina theme
   Set last so the Siegel-era layers above cannot outrank it. */
body { font-size: 16px; color: var(--ink); background: var(--paper); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; color: var(--ink); letter-spacing: .01em; }
h5, h6 { font-family: var(--font-ui); font-weight: 700; }

/* Centred section titles carry the logo's diamond divider. */
main h2.center::after {
  content: ""; display: block; width: 180px; height: 14px; margin: .6rem auto 0;
  background: url("/static/img/ornament.svg") center / contain no-repeat;
}

/* The woven band under the header and over the footer. */
.site-header { background: var(--paper); border-bottom: 0; }
.site-header::after {
  content: ""; display: block; height: 10px;
  background: url("/static/img/band.svg") left center / auto 10px repeat-x;
}
.site-nav a, .site-nav button,
.site-nav > li > a, .site-nav > li > button {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: uppercase; letter-spacing: .12em;
}
.site-nav > li > a::after { background: var(--accent); }
.site-nav > li > a[aria-current="page"], .site-nav > li > a:hover { border-bottom-color: transparent; }

/* Running-text links in maroon; navigation, cards and lists in ink. */
.rte a:not(.btn), main p a:not(.btn), main li a:not(.btn), .notice a, .muted a {
  color: var(--accent-dark); text-decoration-color: currentColor;
}
.card a, .tile, .search-pages a, .drawer__item a, .line-item a { color: var(--ink); }

/* Buttons: burnt orange, white, spaced capitals like the slogan. */
.btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 2px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 12px 30px;
}
.btn:hover:not([disabled]) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--accent-dark); color: var(--accent-dark); }
.btn--ghost:hover:not([disabled]) { background: var(--accent-dark); color: #fff; }
.btn--small { font-size: 11px; padding: .5rem 1rem; }
.btn--danger { background: var(--danger); border-color: var(--danger); }
.product form .product__buy .btn--block { font-size: 13px; }

/* Labels in the slogan's spaced capitals; fields white on the warm ground. */
label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; color: var(--ink-soft);
}
legend { font-family: var(--font-head); font-weight: 600; }
fieldset { background: var(--paper-light); border-color: var(--rule); }
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit])),
select, textarea { font-family: var(--font-body); font-size: 15px; border-color: var(--field-border); background: #fff; }

/* Product cards and page: names in the wordmark's letters. */
.card__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--ink); }
.card__price { font-weight: 600; color: var(--accent-dark); }
.product h1 { font-size: 32px; }
.product__price { color: var(--accent-dark); font-family: var(--font-ui); font-weight: 700; }
.card__media, .product__gallery img { border-color: var(--rule); }

/* Notices */
.notice { border-inline-start-color: var(--saffron); background: var(--paper-warm); }
.notice--error { border-color: var(--danger); background: #fbe7e3; color: #7a1717; }
.notice--ok { border-color: var(--success); background: #eaf0de; color: #2f4320; }

/* Bands: light sand, never black. */
.newsletter, .promises { background: var(--sand-deep); color: var(--ink); }
.newsletter h2, .promises h2, .promises h3 { color: var(--ink); }
.promises h3 { font-family: var(--font-head); font-size: 18px; }
.promises h3::before {
  content: ""; display: block; width: 18px; height: 18px; margin: 0 auto .5rem;
  background: var(--accent); transform: rotate(45deg) scale(.7);
}
.promises p { color: var(--ink-soft); }
.newsletter__form input[type=email] { border-bottom-color: var(--ink); color: var(--ink); background: transparent; }
.newsletter__form input::placeholder { color: var(--ink-faint); }
.newsletter__form button { background: var(--accent); color: #fff; }
.newsletter a, .newsletter p a:not(.btn) { color: var(--accent-dark); }
.newsletter, .promises { --focus: var(--ink); }

/* Hero box: maroon with white text, the button in saffron and brown. */
.hero-photo__box { background: var(--accent-dark); color: #fff; }
.hero-photo__box h1, .hero-photo__box h2 { color: #fff; }
.hero-photo__box .btn { background: var(--saffron); color: var(--brown); border-color: var(--saffron); }
.hero-photo__box .btn:hover:not([disabled]) { background: #fff; color: var(--brown); }

/* Footer: the wordmark's brown under the woven band, saffron headings. */
.site-footer {
  background: var(--brown); color: #F7E9DA; border-top: 0; font-size: 15px;
  position: relative; padding-top: calc(2.25rem + 10px);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: url("/static/img/band.svg") left center / auto 10px repeat-x;
}
.site-footer a, .site-footer p a:not(.btn) { color: #F7E9DA; }
.site-footer h2 {
  font-family: var(--font-ui); color: var(--saffron); font-size: 13px;
  text-transform: uppercase; letter-spacing: .14em;
}
.site-footer__bottom { border-top-color: rgba(247, 233, 218, .25); }
.site-footer { --focus: var(--saffron); }

/* Withdrawal, on the rescission page. */
.withdraw-box {
  margin: 1rem 0 2rem; padding: 1.25rem 1.5rem; background: var(--paper-warm);
  border-inline-start: 4px solid var(--accent);
}
.withdraw-box h2 { font-size: 22px; margin-bottom: .4rem; }

.steps, .badge, .breadcrumb, .card__number, .pay { font-family: var(--font-ui); }
mark, .rte mark { background: var(--accent-light); }
.drawer__head h2 { font-family: var(--font-head); }

/* Desktop header: the logo at the size the old shop gave it room for. */
@media (min-width: 60.01rem) {
  .site-nav__panel a { font-size: 13px; }
  .site-header__logo img { height: 110px; }
}