/* ============================================================================
   BlumenBund — editorial theme
   ----------------------------------------------------------------------------
   Loaded after styles.css, which keeps all the layout and behaviour. This file
   only changes the look: bone paper instead of warm cream, near-black type
   instead of brown, flush edges instead of rounded cards, and a single quiet
   sand accent instead of the rose.

   Everything here is an override on purpose. The structural stylesheet stays
   untouched so the shop, the cart, the checkout and the admin keep working,
   and switching the theme off is one <link> away.
   ========================================================================= */

:root {
  --bg:        #f1f1eb;   /* bone paper */
  --card:      #f1f1eb;   /* surfaces sit on the page, they are not cards */
  --text:      #1d1e1f;   /* near black, warmer and softer than #000 */
  --muted:     rgba(29, 30, 31, .58);
  --line:      rgba(29, 30, 31, .14);
  --soft:      rgba(29, 30, 31, .05);
  /* Two jobs, two values. The structural stylesheet paints buttons with --rose
     and roughly twenty pieces of text with --rose-dark: eyebrows, "more" links,
     totals, the active language. Sand is right for a fill and unreadable as
     type — on this background it measures 1.65:1 — so --rose-dark is the deep
     bronze the text needs (5.6:1, comfortably past AA) and the button keeps its
     own hover shade below. */
  --rose:      #cbbd93;   /* sand — fills */
  --rose-dark: #6b5f39;   /* bronze — text */
  --sand-deep: #b4a679;   /* sand, one step down — button hover */
  --green:     #5c6350;
  --cream:     #e7e7df;
  --shadow:    none;
  --radius:    0px;
  --ink:       #1d1e1f;
  --display:   "Jost", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ── Flatten ───────────────────────────────────────────────────────────────
   The old look leaned on 28px corners and deep shadows. Rather than hunt down
   sixty-nine declarations, the surfaces that carried it are reset here and the
   few places that still want a radius ask for it again further down. */
.product-card, .detail-image, .detail-panel, .site-footer, .login-card,
.notice-box, .cart-item, .method-card, .size-options label, .payment-list label,
.admin-panel, .admin-product-card, .delivery-admin-card, .order-card,
.version-row, .new-product-card, .shop-tools, .hero, .hero-art, .step,
.product-image, .admin-product-image, .variant-price-scroll, .empty {
  border-radius: 0;
  box-shadow: none;
}
.product-card { border: 0; background: transparent; }
.shop-tools, .notice-box, .site-footer { background: transparent; }

/* ── Type ──────────────────────────────────────────────────────────────────
   Display sizes are light and set tight; body copy stays comfortable. The old
   Georgia headings are replaced everywhere, including the ones set inline. */
h1, h2, h3, h4, .brand, .hero h1, .page > header h1, .detail-panel h1 {
  font-family: var(--display) !important;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h1 { font-size: clamp(28px, 3.2vw, 44px); }   /* page titles; the hero sets its own */
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 17px; font-weight: 400; letter-spacing: 0; }
p, li, label, input, select, textarea, button { letter-spacing: 0; }
.eyebrow, .badge, .photo-size-badge, .site-version {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 500;
}

/* ── Header ────────────────────────────────────────────────────────────────
   Burger on the left, wordmark centred, cart and language on the right — at
   every width, not just on phones. The order is set here rather than in the
   markup so the document still reads brand-first for a screen reader. */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  min-height: 68px;
  padding: 12px clamp(16px, 3vw, 40px);
  gap: 12px;
}
.nav-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  order: 1;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
}
/* Centred on the header, not on what is left over. `margin: 0 auto` on a flex
   item splits the free space, so the logo sat half the difference between the
   burger and the language switch off centre — a constant 9px at every width.
   Taking it out of the flow centres it on the page itself. */
/* Das Logo stand absolut zentriert. Zentriert war es damit zwar, aber auch
   aus dem Fluss genommen — nichts konnte es wegdrücken, und auf schmalen
   Telefonen lag DE/EN darunter (bei 320 px 42 px Überlappung, bei 360 px 22).
   Jetzt tragen zwei gleich breite Hüllen die Seiten: `flex: 1 1 0` macht sie
   exakt gleich groß, also steht das Logo mittig und berührt nichts. */
.header-side {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  order: 0;
}
.header-side.header-right { justify-content: flex-end; }
/* Innerhalb der linken Huelle: erst das Menue, dann die Sprache. `.nav-toggle`
   traegt noch order:1 aus der Zeit, als alles direkt im Kopf lag — damit
   waere DE/EN vor den drei Strichen gelandet. */
.header-side .nav-toggle { order: 0; }
.header-side .lang-switch { order: 1; }
.brand {
  order: 0;
  position: static;
  transform: none;
  flex: 0 0 auto;
  margin: 0;
}
.brand img { height: 30px; max-width: 180px; }
.cart-link { margin: 0; font-size: 13px; letter-spacing: .04em; }
.lang-switch { margin-left: 0; gap: 2px; }
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 8px 6px;
  min-height: 40px;
}
.lang-switch button.active { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* The horizontal nav is replaced by a drawer that slides in from the left, at
   every width. The structural stylesheet only lays the drawer out inside its
   own phone media query, so on a desktop the opened menu used to be a 0x0 box:
   invisible, uncloseable — the backdrop that closes it did not exist — and the
   scroll lock it takes was never released. Everything it needs lives here.

   Kept as display:flex with pointer-events:none when closed, so the slide and
   the backdrop fade can actually animate. */
.main-nav {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  justify-content: flex-start;   /* the drawer hangs on the LEFT */
  align-items: stretch;
  background: rgba(29, 30, 31, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  flex: none;
  order: unset;
  width: auto;
  height: auto;
  overflow: visible;
}
.main-nav.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: relative;            /* anchors the ✕, which is absolute */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(340px, 84vw);
  min-width: 0;
  height: 100%;
  padding: 64px 22px 28px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  box-shadow: none;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.main-nav.open .nav-drawer { transform: none; }
.main-nav a {
  font-size: 17px;
  padding: 14px 16px;
  border-radius: 0;
}
.main-nav a.active, .main-nav a:hover { background: var(--soft); color: var(--ink); }
.nav-close {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  /* display is set here because the structural stylesheet only makes this
     button visible inside its phone media query — above 620px it stayed
     hidden, leaving the drawer with no ✕. */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .main-nav, .nav-drawer { transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   One quiet pill in sand, and a plain outline for everything secondary. */
.btn {
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  min-height: 46px;
  padding: 0 26px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: none; }
/* The structural stylesheet gives the primary button a rose glow. Under a sand
   button on bone paper it read as a pink smear — the one shadow the flattening
   above had missed. */
.btn, .btn.primary { box-shadow: none; }
.btn.primary { background: var(--rose); color: var(--ink); border: 1px solid var(--rose); }
.btn.primary:hover { background: var(--sand-deep); border-color: var(--sand-deep); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ink); }

/* ── Hero ──────────────────────────────────────────────────────────────────
   Edge to edge, the headline centred over the photograph. */
.hero {
  position: relative;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  border: 0;
  background: var(--ink);
  overflow: hidden;
}
.hero-art, .hero-slides { min-height: 0; }
.hero-slides, .hero-art { position: absolute; inset: 0; margin: 0; }
.hero-slides img, .hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Our photographs are busy close-ups, not the calm interiors this layout
     was borrowed from, so the scrim has to work much harder. A vignette plus
     a centre wash keeps the headline readable on every slide. */
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(29,30,31,.62) 0%, rgba(29,30,31,.30) 55%, rgba(29,30,31,.42) 100%),
    linear-gradient(180deg, rgba(29,30,31,.45), rgba(29,30,31,.20) 40%, rgba(29,30,31,.55));
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  text-align: center;
  min-height: min(76vh, 660px);
  padding: 90px 24px;
  color: #fff;
}
.hero-copy .eyebrow { color: rgba(255,255,255,.82); }
.hero-copy h1 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); font-weight: 300; max-width: 16ch; }
.hero-copy p { color: rgba(255,255,255,.9); max-width: 52ch; font-size: 15px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Over a photograph the outline button has to be light — the page-level ghost
   is near-black and simply disappeared here. */
.hero-actions .btn.ghost { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
.hero-actions .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.hero-copy h1, .hero-copy .lead { text-shadow: 0 1px 24px rgba(29,30,31,.45); }
.hero-dots { position: absolute; bottom: 78px; left: 0; right: 0; z-index: 3; justify-content: center; }
/* Kept, not hidden — the numbers are worth saying, just quietly. They sit on
   their own band at the foot of the photograph: floating over a bouquet in
   full bloom, no amount of text shadow made them readable. */
.hero-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: clamp(20px, 5vw, 56px);
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 13px 20px;
  background: rgba(29, 30, 31, .62);
  backdrop-filter: blur(3px);
  color: rgba(255,255,255,.92);
}
.hero-stats div { display: grid; gap: 2px; text-align: center; }
/* The colour has to be set on the children, not just the row: the structural
   stylesheet paints these labels in --muted, which is near-black and vanished
   completely against the dark band. */
.hero-stats strong { color: #fff; font-weight: 400; font-size: 15px; letter-spacing: .02em; }
.hero-stats span {
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── Sections ──────────────────────────────────────────────────────────────
   Quiet headings, left aligned, and not so tall that the goods are pushed off
   the first screen. On a phone the catalogue used to start 656 px down, which
   is the whole viewport before a single bouquet. */
.page > header, .section-head {
  max-width: none;
  text-align: left;
  margin: 0 0 18px;
}
.page { padding-top: 0; }
.page-title { margin-bottom: 14px; }
.page-title .eyebrow { margin-bottom: 4px; }
.page-title h1 { margin: 0 0 6px; }
.page-title p { margin: 0; font-size: 14px; color: var(--muted); max-width: 62ch; }
.wrap, main > section { --gutter: clamp(16px, 3vw, 40px); }

/* ── Occasion tiles ────────────────────────────────────────────────────────
   The emoji stickers are off — a cake, a ring and a party popper sat oddly
   beside photographs of real bouquets. The tiles keep working as links; they
   are simply set as type now. The markup still holds the icons, so bringing
   them back is deleting the first rule. */
.occasion-tile span { display: none; }
.occasion-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transition: border-color .18s ease, color .18s ease;
}
.occasion-tile:hover { border-color: var(--ink); transform: none; box-shadow: none; }
.occasion-tile b { font-weight: 400; font-size: 14px; letter-spacing: .02em; }

/* ── Product grid ──────────────────────────────────────────────────────────
   Four across, softly rounded, with the name and price set small underneath.
   No card, no border — the photograph carries the row on its own. */
.product-grid, #productGrid, #featuredGrid {
  gap: 26px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product-card { transition: opacity .25s ease; }
.product-card:hover { transform: none; box-shadow: none; opacity: .92; }
.product-image {
  aspect-ratio: 3 / 4;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;         /* so the photo and the clip follow the corners */
}
.product-body { padding: 12px 2px 0; }
.product-card h3 { font-size: 14px; font-weight: 400; letter-spacing: .01em; margin: 0 0 4px; }
.price-row { align-items: baseline; }
.price { font-size: 14px; font-weight: 400; color: var(--muted); }
/* The mood labels — Romantik, Festlich and the rest — are off. They sat on
   the photograph and said little the picture did not already say. The markup
   keeps them, so switching them back on is this one rule. */
.product-image .badge { display: none; }
.photo-size-badge { border-radius: 999px; background: rgba(29,30,31,.55); }
.add-mini {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.add-mini:hover { border-color: var(--ink); background: transparent; }

/* Filters read as a quiet toolbar rather than a panel. */
.shop-tools {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
}
.shop-tools select, .shop-tools .btn { min-height: 42px; }
input, select, textarea {
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }

/* ── Shop toolbar ──────────────────────────────────────────────────────────
   The panel of four dropdowns is gone. The controls stay in the markup and
   keep working — they are only taken out of the layout — so restoring the
   panel is deleting this one block. What is left is the count on one side and
   a small price sort on the other. */
.shop-tools .tool, .shop-tools #fReset { display: none; }
.shop-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 0;
  padding: 6px 0 18px;
}
.shop-tools .filter-count { margin: 0; font-size: 13px; color: var(--muted); order: 1; }
.sort-toggle {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.sort-toggle:hover { border-color: var(--ink); }
.sort-toggle svg { width: 17px; height: 17px; }
/* Both arrows sit faint until one direction is chosen. */
.sort-toggle .arr-up, .sort-toggle .arr-down { opacity: .3; transition: opacity .18s ease; }
.sort-toggle[data-sort="price-asc"] .arr-up { opacity: 1; }
.sort-toggle[data-sort="price-desc"] .arr-down { opacity: 1; }
.sort-toggle[data-sort="price-asc"], .sort-toggle[data-sort="price-desc"] { border-color: var(--ink); }

/* ── Product detail ────────────────────────────────────────────────────────*/
.detail-image { border: 0; background: var(--cream); }
.detail-panel { background: transparent; border: 0; padding-left: clamp(0px, 3vw, 40px); }
.detail-panel h1 { font-size: clamp(30px, 3.6vw, 46px); }
.detail-panel .price { font-size: 22px; color: var(--ink); font-weight: 400; }
.size-options label {
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-weight: 400;
}
.size-options label:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.size-options label small { opacity: .8; }
.qty-control { border-radius: 999px; border: 1px solid var(--line); }

/* ── Cart, checkout, panels ────────────────────────────────────────────────*/
.cart-item, .checkout-panel, .order-card, .method-card, .payment-list label,
.notice-box, .login-card, .empty {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
}
.notice-box { border-left: 2px solid var(--rose); border-right: 0; border-top: 0; border-bottom: 0; padding-left: 16px; }
.shop-closed-banner { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--soft); }

/* ── Footer ────────────────────────────────────────────────────────────────*/
.site-footer {
  width: auto;
  margin: 80px 0 0;
  padding: 48px clamp(16px, 3vw, 40px);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.site-footer img { height: 26px; max-width: 150px; }
.site-footer a { color: var(--muted); font-size: 13px; }
.site-footer a:hover { color: var(--ink); }
.site-version { color: var(--muted); opacity: .5; }

/* ── Reel button keeps the theme ───────────────────────────────────────────*/
.reel-open { background: var(--ink); color: var(--bg); font-weight: 500; }

/* ── Narrower screens ──────────────────────────────────────────────────────
   Four across is a desktop figure; below that the columns drop rather than
   shrink, or the bouquets end up as four slivers. */

@media (max-width: 760px) {
  .product-grid, #productGrid, #featuredGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}
@media (max-width: 620px) {
  .site-header { min-height: 58px; padding: 8px 14px; }
  .brand img { height: 24px; max-width: 140px; }
  .site-header { gap: 8px; }
  .cart-link span { display: none; }
  /* Die Zahlenleiste liegt absolut am Fuss des Fotos und reserviert deshalb
     keinen Platz. Auf schmalen Schirmen brechen ihre drei Angaben auf zwei
     Zeilen um, sie wird 112 statt 59 px hoch — und schob sich damit ueber die
     Knoepfe: der Tipp auf „Jetzt bestellen" landete auf dem Band statt auf dem
     Knopf. Der Textblock haelt unten jetzt so viel Abstand, dass beides
     nebeneinander Platz hat; die Leiste selbst wird etwas kompakter. */
  .hero-copy { min-height: 64vh; padding: 70px 20px 148px; }
  .hero-stats { gap: 14px 20px; padding: 11px 16px; }
  .hero-stats strong { font-size: 14px; }
  .product-image { border-radius: 10px; }
  .product-body { padding: 10px 2px 0; }
  .detail-panel { padding-left: 0; }
}

/* Unter 380 px wird es eng: Menü, Sprache, Logo und Warenkorb müssen
   nebeneinander passen, ohne dass eine Seite gestaucht wird. */
/* Unter 380 px wird es eng. Die drei Striche bleiben bei 44 px — kleiner darf
   ein Ziel fuer einen Daumen nicht werden —, also gibt das Logo die Breite her.
   Es waechst mit dem Bildschirm statt in Stufen zu springen: bei 393 px sind
   das 110 px, beim zusammengeklappten Galaxy Fold (280 px) noch 78, und die
   linke Gruppe (Menue + Sprache) passt in jeder dieser Breiten in ihre Haelfte. */
@media (max-width: 380px) {
  .site-header { gap: 6px; padding: 8px 10px; }
  .brand img { max-width: min(112px, 28vw); }
  .lang-switch button { padding: 8px 4px; letter-spacing: .06em; }
}
@media (max-width: 340px) {
  .site-header { gap: 4px; padding: 8px; }
  .lang-switch { gap: 0; }
  .lang-switch button { padding: 8px 2px; letter-spacing: 0; }
}