/* Bridge between the package CSS and shop.css.
 *
 * The theme replaces only header and footer and keeps the package templates for list,
 * product, cart, checkout and account. Their CSS still comes from the package
 * (block styles -> super()), shop.css sits on top.
 *
 * The problem: some package rules are MORE SPECIFIC than those in shop.css and
 * therefore win regardless of load order — `header .wrap` (0,1,1)
 * beats `.hbar` (0,1,0). This file neutralises exactly those spots.
 * Nothing here is taste; every rule resolves a concrete conflict.
 */

/* 1. Cancel the package header rules: the AquaTervis header brings its own layout. */
header .wrap.hbar { height:auto; justify-content:flex-start; }
header .nav .wrap { display:flex; height:auto; justify-content:flex-start; }
header .logo { font-weight:inherit; font-size:inherit; letter-spacing:normal; display:block; }
header .logo img { height:52px; width:auto; }

/* 2. The package header is sticky with transparency; shop.css wants a white,
      opaque header with its own shadow. */
header { background:#fff; backdrop-filter:none; border-bottom:0;
         box-shadow:0 1px 4px rgba(0,50,80,.08); }

/* 3. Enforce font and surfaces from the design (the package sets Inter/its own bg). */
body { font-family:var(--f); background:var(--bg); color:var(--text); }

/* 4. Pull the content width to that of the design (package: 1080px, design: 1240px). */
.wrap { max-width:var(--maxw); }

/* 5. The rendered Markdown free text (ingredients, nutrition) should look as in the
      design: brand-blue subheadings, a calm table. */
.prose h2, .prose h3 { color:var(--blue-deep); }
.prose th { background:var(--sky); }
.prose th, .prose td { border-color:var(--hairline); }

/* 5a. shop.css turns `.prose` into a white card — meant for the
       legal texts (legal.html). The product page uses the same class for
       description and expanders; there it ended up box next to box.
       So flat on the product page: no background, no border, no padding. */
.product .prose { max-width:none; background:none; border:0; border-radius:0;
                  padding:0; margin:0 0 1rem; }
.product .fold .prose { margin:0; padding:0 0 1rem; }

/* 5b. Nutrition table in the design's style (.nwtab in shop.css): only
       horizontal lines, values right-aligned and bold, full column width. The core
       otherwise sets a grid, max-width 420px and an uppercase header (`th`). */
.product .prose table { width:100%; max-width:none; border-collapse:collapse;
                        background:none; border:0; border-radius:0; box-shadow:none;
                        font-size:.9rem; font-variant-numeric:tabular-nums; margin:.2rem 0 .6rem; }
.product .prose th, .product .prose td { border:0; border-bottom:1px solid var(--hairline);
                                         padding:.45rem 0; background:none; }
.product .prose th { text-transform:none; letter-spacing:normal; font-size:.8rem;
                     font-weight:400; color:var(--gray); }
.product .prose td:last-child { text-align:right; font-weight:600; color:var(--text); }

/* 6. Footer placeholders: in the design these are links, here still plain text. */
footer .ph span { display:block; color:inherit; opacity:.9; }

/* 7. Pull the package accent colour to the design's brand blue. The
      package templates (filter chips, buttons, focus rings) depend on these
      tokens — without this, package green would sit next to AquaTervis blue. */
:root {
  --accent:      #1A82CF;   /* --blue */
  --accent-ink:  #005F89;   /* --blue-deep */
  --accent-weak: #EAF4FB;   /* --sky */
  --accent-line: #9FCCEA;
  --ring: 0 0 0 3px rgba(26,130,207,.20);
}

/* 8. Product photos are cut-out bottles and packs on a light background.
      The package default crops them (object-fit:cover) — here show them
      in full instead of cropping. */
.card .thumb { background:#fff; }
.card .thumb img { object-fit:contain; padding:10px; }
.card:hover .thumb img { transform:none; }

/* 9. Same for the detail image: show the cut-out bottle in full. */
.media { background:#fff; }
.media img { object-fit:contain; padding:18px; }

/* 10. Name clash on `.qty`.
      shop.css means the CONTAINER of the quantity picker (border + radius),
      HokoKit the INPUT FIELD inside it (`.stepper > input.qty`). Both rules have
      the same specificity, shop.css loads later — so the number got its
      own box inside the box. Here the roles are straightened out: border on the
      container, field and buttons borderless. Look follows the design's tokens. */
.stepper .qty {
  border:0; border-radius:0; background:transparent;
  width:3.2rem; font:700 1rem var(--f); color:var(--text);
}
.stepper {
  border:2px solid var(--hairline); border-radius:var(--r); overflow:hidden; background:#fff;
}
.stepper:focus-within { border-color:var(--blue); box-shadow:none; }
.stepper .step {
  width:2.9rem; background:#fff; font-size:1.2rem; font-weight:700; color:var(--blue-deep);
}
.stepper .step:hover { background:var(--sky); color:var(--blue-deep); }

/* 11. Search, category filter AND sorting all sit in the sticky header
      (see templates/index.html) — so the list toolbar stays empty.
      `:empty` does not apply here: the emptied Jinja blocks leave
      whitespace text nodes behind, and those count as content. Hence hidden directly.

      This also drops the gap the toolbar created between tiles and the
      product grid — `.cat-grid` in shop.css has no bottom margin
      (the package default `.cat-tiles` does). Restored here. */
.toolbar { display:none; }
.cat-grid { margin-bottom:1.6rem; }

/* 12. Category tiles: the images are finished banners (brand logo left,
      motif right). The package default (2.86:1 + object-fit:cover) cut off
      up to a quarter of them — for the coffee exactly the logo area.

      Solved at the source: both banners are now 3.2:1, and the tile has
      the same ratio. So the crop is zero.

      Deliberately NOT „image determines the height" (height:auto): an image
      not yet loaded then has zero height, the tile collapses and jumps
      when it loads. The fixed ratio reserves the space up front.

      The core keeps cover with a fixed minimum height — it has to cope with arbitrary
      category photos, not just banners. */
.cat-card { min-height:0; aspect-ratio:3.2 / 1; }

/* 13. Header row stuck to the screen edge.
      `.wrap` sets horizontal padding, `.hbar` overrides it with
      `padding:.85rem 0` — same specificity, declared later, so the 0 wins.
      On wide windows this went unnoticed because `.wrap` centres at max-width;
      below roughly 1240 px width logo and search field stuck to the edge.
      Only the horizontal values are restored here; the vertical ones stay. */
header .wrap.hbar { padding-inline: clamp(1rem, 3vw, 2rem); }

/* 14. Sorting now sits on the right in the category row instead of in its own
      row above the grid. The package styles `.sortmenu > summary` as a box
      with border, shadow and ▾ — in a navigation bar that would be
      out of place, so it is reduced to a plain icon here. */
.nav .wrap { align-items:center; }
.nav-sort { margin-left:auto; position:relative; }
.nav-sort > summary {
  border:0; background:none; box-shadow:none; padding:.7rem .5rem;
  color:var(--gray); display:inline-flex; align-items:center;
}
.nav-sort > summary::after { content:none; }
.nav-sort > summary:hover { color:var(--blue); }
.nav-sort[open] > summary { box-shadow:none; border:0; color:var(--blue); }
.nav-sort svg { width:1.25rem; height:1.25rem; }
.nav-sort .sortmenu-list {
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r);
  box-shadow:0 8px 24px rgba(6,40,60,.14);
}
.nav-sort .sortmenu-list a { color:var(--text); }
.nav-sort .sortmenu-list a.active { color:var(--blue); font-weight:600; }

/* 15. Plain text links were not recognisable as links.
      `shop.css` sets `a{color:inherit}` and loads after the package CSS, which
      sets `a{color:var(--accent-ink)}`. The design handles this by styling
      each link context individually (.nav a, .hbtn, footer a, .cat-card) — the
      classless inline links from the package templates slipped through the cracks
      and looked like normal text: „Filter zurücksetzen" in the empty state,
      „Weiter einkaufen" in the empty cart, „Angaben ändern" on the
      order review. They worked, but were not recognisable as
      clickable. */
main a:not([class]) { color:var(--blue-deep); text-decoration:underline; }
main a:not([class]):hover { color:var(--blue); }

/* 16. Reset control in the search field.
      Chrome's built-in ✕ for input[type=search] only appears on focus and
      clears only the field — the result list below stays as it is.
      Hence hidden and replaced by a link that is always visible
      and actually leads back to the unfiltered list. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }

.search { position:relative; }
.search input { padding-right:2.6rem; }
.search-clear {
  position:absolute; right:3.9rem; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  color:var(--gray); background:none; text-decoration:none;
}
.search-clear:hover { background:var(--sky); color:var(--blue-deep); text-decoration:none; }
.search-clear svg { width:1rem; height:1rem; }

/* 11. Gallery thumbnails: the same cut-out bottles — show them in full. */
.thumb-btn { background:#fff; }
.thumb-btn img { object-fit:contain; padding:4px; }