:root {
    --bg: #faf8f4; --surface: #fff; --text: #25231f; --muted: #6f6a60; --line: #e6e1d6;
    --accent: #2f6b4f; --accent-ink: #fff; --accent-soft: #e4efe8; --tag: #f1ece0;
    --radius: 12px; --gutter: 16px;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #171613; --surface: #211f1b; --text: #efebe2; --muted: #a39d90; --line: #38342c;
            --accent: #6fbf95; --accent-ink: #10231a; --accent-soft: #213329; --tag: #2b2822; }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

  /* header */
  header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
  .bar { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
  .logo { font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; }
  .logo b { color: var(--accent); }
  .menu-btn { border: 1px solid var(--line); background: none; color: inherit; border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; }
  .search { flex: 1; display: flex; min-width: 0; }
  .search input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; background: var(--bg); color: inherit; font: inherit; }
  .search button { padding: 0 18px; border: 0; border-radius: 0 999px 999px 0; background: var(--accent); color: var(--accent-ink); font: inherit; cursor: pointer; }
  .cart { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
  .cart span { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; margin-left: 4px; font-size: .85rem; }

  /* usp strip */
  .usp { background: var(--accent-soft); font-size: .92rem; }
  .usp .wrap { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 8px; padding-bottom: 8px; justify-content: center; }

  /* category chips */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 4px; }
  .chips a { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .92rem; }
  .chips a small { color: var(--muted); margin-left: 4px; }
  .chips a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  /* toolbar */
  .toolbar { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; color: var(--muted); font-size: .92rem; gap: 12px; }
  .toolbar select { border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 8px; padding: 6px 8px; font: inherit; }

  /* grid */
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; padding-bottom: 40px; }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
  .card .ph { aspect-ratio: 4/3; background: var(--tag); }
  .card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .card h3 { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .meta { color: var(--muted); font-size: .84rem; }
  .row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
  .price { font-weight: 700; font-size: 1.1rem; }
  .btn { display: inline-block; border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .9rem; cursor: pointer; }
  .btn.ghost { background: none; border: 1px solid var(--line); color: inherit; }
  .more { text-align: center; color: var(--muted); padding: 0 0 50px; font-size: .9rem; }

  /* article detail */
  .crumbs { font-size: .88rem; color: var(--muted); margin: 16px 0; }
  .detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding-bottom: 50px; }
  .gallery .main { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--tag); border: 1px solid var(--line); }
  .gallery .main img { width: 100%; height: 100%; object-fit: cover; }
  .thumbs { display: flex; gap: 8px; margin-top: 8px; }
  .thumbs div { width: 76px; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--tag); }
  .thumbs div.on { border-color: var(--accent); }
  .thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .info h1 { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.25; }
  .info .price { font-size: 1.8rem; margin: 10px 0; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .tags span { background: var(--tag); border-radius: 6px; padding: 2px 9px; font-size: .84rem; }
  .box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 14px 0; }
  .box h4 { margin: 0 0 6px; }
  .box ul { margin: 0; padding-left: 18px; }
  dl.attr { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .94rem; }
  dl.attr dt { color: var(--muted); }
  dl.attr dd { margin: 0; }
  .btn.big { width: 100%; padding: 13px; font-size: 1.05rem; border-radius: 10px; }

  /* checkout */
  .checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; padding-bottom: 50px; }
  .line { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .line .t { width: 64px; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--tag); flex: none; }
  .line .t img { width: 100%; height: 100%; object-fit: cover; }
  .line .n { flex: 1; font-size: .95rem; }
  label { display: block; font-size: .88rem; color: var(--muted); margin: 12px 0 4px; }
  input[type=text], input[type=email] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; }
  .choice { display: flex; gap: 10px; }
  .choice label { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; color: var(--text); background: var(--surface); }
  .choice label.on { border-color: var(--accent); background: var(--accent-soft); }
  .total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; padding: 12px 0; }

  footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .88rem; padding: 22px 0; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; }

  @media (max-width: 760px) {
    .detail, .checkout { grid-template-columns: 1fr; }
    .bar { flex-wrap: wrap; }
    .search { order: 3; flex-basis: 100%; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .usp .wrap { justify-content: flex-start; }
  }

  /* ---- additions for the real shop ---- */
  .flash { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: 16px 0 0; }
  .err { color: #b3261e; font-size: .85rem; margin-top: 4px; }
  @media (prefers-color-scheme: dark) { .err { color: #f2b8b5; } }
  .card { color: inherit; }
  .card .btn.in { background: var(--accent-soft); color: var(--text); }
  .btn[disabled], .btn.off { background: var(--tag); color: var(--muted); cursor: default; }
  .btn.small { padding: 4px 10px; font-size: .85rem; }
  .status-banner { background: var(--tag); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
  .sentinel { height: 1px; }
  .empty { text-align: center; color: var(--muted); padding: 50px 0; }
  .hp { position: absolute; left: -9999px; }
  .crumbs a:hover { text-decoration: underline; }
  .page-title { margin: 20px 0 0; font-size: 1.4rem; }
  .prose { max-width: 720px; padding-bottom: 50px; }
  .prose h2 { margin-top: 1.4em; }

  /* category drawer */
  .drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); background: var(--surface); z-index: 21; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); }
  body.drawer-open .drawer { transform: none; }
  body.drawer-open .drawer-bg { opacity: 1; pointer-events: auto; }
  .drawer h2 { margin: 0 0 8px; font-size: 1.1rem; }
  .drawer ul { list-style: none; margin: 0; padding: 0; }
  .drawer li li { padding-left: 14px; border-left: 1px solid var(--line); margin-left: 4px; }
  .drawer a { display: flex; justify-content: space-between; padding: 5px 4px; border-radius: 6px; }
  .drawer a:hover, .drawer a.on { background: var(--accent-soft); }
  .drawer small { color: var(--muted); }
  .drawer details > summary { cursor: pointer; list-style: none; padding: 5px 4px; display: flex; justify-content: space-between; }
  .drawer details > summary::-webkit-details-marker { display: none; }
  .drawer details > summary::before { content: '▸'; margin-right: 6px; color: var(--muted); }
  .drawer details[open] > summary::before { content: '▾'; }
  .drawer details > summary a { padding: 0; flex: 1; display: inline; }
  .choice input { margin-right: 6px; }
  select.pay { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; }
  textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; min-height: 70px; }
  .thumbs div { cursor: pointer; }
  .line form { margin: 0; }
  .card .ph { display: block; }
  .chips a.on small { color: inherit; opacity: .8; }
  /* chips wrap; collapsed to two rows (JS adds .collapsed + the toggle when they would need more) */
  .chips.collapsed { max-height: 92px; overflow: hidden; }
  .chip-more { display: block; margin: 6px 0 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem; cursor: pointer; padding: 2px 0; }
  .chip-more:hover { text-decoration: underline; }
  /* checkout form */
  .fgrid { display: grid; gap: 0 12px; }
  .g-salutation { grid-template-columns: 1.1fr 1fr 1fr; }
  .g-street { grid-template-columns: 3fr 1fr; }
  .g-city { grid-template-columns: 1fr 2fr; }
  .fgrid > div { min-width: 0; }
  .req { display: none; color: var(--muted); }
  .needs-address .req { display: inline; }
  input.invalid, select.invalid, label.check.invalid { border-color: #b3261e; }
  label.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 0; border: 0; color: var(--text); font-size: .95rem; background: none; cursor: pointer; }
  label.check input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
  label.check.invalid { outline: 2px solid #b3261e; outline-offset: 4px; border-radius: 6px; }
  .err-box { border-color: #b3261e; background: transparent; }
  @media (max-width: 760px) { .g-salutation { grid-template-columns: 1fr; } .g-city { grid-template-columns: 1fr 2fr; } }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* header links under the search field, links at the top of the drawer, html fragments from pages/ */
  .usp a:hover, .drawer-links a:hover { text-decoration: underline; }
  .usp a.on, .drawer-links a.on { font-weight: 700; }
  .drawer-links { display: flex; gap: 6px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .drawer-links a { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; background: var(--bg); }
  .page-html table { width: 100%; border-collapse: collapse; }
  .page-html td { padding: 4px 0; }
  .page-html img { max-width: 100%; height: auto; }
  /* wishlist */
  .card { position: relative; }
  .card .actions { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
  .card .actions form { margin: 0; }
  .card .actions form.js-add { flex: 1; }
  .card .actions form.js-add .btn { width: 100%; }
  .heart { width: 40px; height: 100%; min-height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: #8a8578; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; }
  .heart:hover, .heart.on { color: #c0392b; border-color: #c0392b; }
  .wish-btn.on { border-color: #c0392b; color: #c0392b; }
  .wish .lbl { font-weight: 400; }
  .wl-row form { margin: 0; }
  @media (max-width: 760px) { .wish .lbl { display: none; } }
  .card .body > .price { margin-top: auto; padding-top: 6px; }
  @media (max-width: 760px) {
    .bar { gap: 8px; }
    .menu-btn, .cart { padding: 8px 12px; }
    .card .actions { gap: 6px; }
    .heart { width: 34px; }
    .card .actions .btn { padding: 7px 6px; font-size: .84rem; white-space: nowrap; }
  }
  .page-html h2 { font-size: 1.25rem; margin: 1.8em 0 .4em; padding-top: .6em; border-top: 1px solid var(--line); }
  .page-html h2:first-of-type { border-top: 0; margin-top: 1em; }
  .page-html h3 { font-size: 1rem; margin: 1.2em 0 .3em; }
  .page-html p, .page-html li { line-height: 1.6; }
  .page-html ul { padding-left: 1.2em; }
  /* wishlist in the category chips and in the drawer links */
  .drawer-links a.wish-link:first-letter { color: #c0392b; }
  .drawer-links { flex-wrap: wrap; }
  .drawer-links { gap: 5px; }
  .drawer-links a { padding: 5px 10px; font-size: .9rem; white-space: nowrap; }
  /* article page: title and price in one white box */
  .title-chip { margin: 10px 0 14px; }
  .title-chip h1 { margin: 0 0 6px; }
  .title-chip .price { font-size: 1.6rem; margin: 0; }
  .page-html ol { padding-left: 1.4em; }
  .page-html ol li { margin: .5em 0; }
  /* Services, Kontakt and AGB always stay together on one line */
  .usp .usp-group { display: flex; gap: 26px; white-space: nowrap; }