/**
 * Fork override stylesheet (natuerliche-oele.de). Loaded right after
 * site/assets/css/shop.css (framework-paths.conf's own comment on the
 * `core[sells] site/assets/css/shop.css` rule, and scripts/build-shop.mjs's
 * headCommon(), SHR-01, 15.09.2026): shop.css moved from `core:once` to
 * `core[sells]`, so a fork can no longer safely hand-edit it, an update
 * would overwrite those edits the moment shop.css itself changes. This file
 * is the fork's own, never core/core:once (framework-paths.conf explicitly
 * documents it MUST stay unclassified, falling to the `content **`
 * catch-all), so it survives every update untouched.
 *
 * Emitted automatically on shop pages built by scripts/build-shop.mjs
 * (headCommon()'s own `existsSync()` check on this exact path). Two pages
 * are NOT generated by that script -- site/index.php and site/en/index.php,
 * the real homepage -- and link this file by hand, right after shop.css,
 * same as headCommon() does. Everything below uses tokens.css variables
 * only, same convention shop.css's own header comment states, so a future
 * rebrand only needs tokens.css touched, not this file.
 *
 * SHR-14a (16.09.2026): moved here from shop.css verbatim (previously the
 * fork's own hand-edited copy of shop.css carried this block, lines
 * ~417-452, before the Core-Nachzug replaced that whole file with the
 * framework's current shop.css). Site-wide nav + footer chrome for
 * site/partials/nav.html + footer.html (and their .en siblings), matching
 * the live natuerliche-oele.de brand (white nav, logo lockup + tagline,
 * teal-blue accent). Unchanged in content and behaviour, only its home.
 */

/* --- site chrome (nav + footer), design pass 11.09.2026 -------------------
   Styling for site/partials/nav.html + footer.html. These are placeholders
   for the real Fork-Homepage/Navigation (see the partials' own comments),
   but they are the ONLY stylesheet shop pages load, so they carry the chrome
   styling until a real site/index.html exists. Matches the live brand
   (natuerliche-oele.de: white nav, logo lockup + tagline, teal accent). */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.nav-brand{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:var(--text)}
.nav-brand-name{font-weight:700;font-size:1.05rem;letter-spacing:.01em;color:var(--text)}
.nav-brand-tag{font-size:.7rem;color:var(--text-3)}
.nav-inline{display:flex;gap:20px;margin-left:auto}
.nav{gap:24px}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-cart{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;color:var(--text-2);text-decoration:none;font-size:.875rem;border-radius:var(--radius-sm)}
.nav-cart:hover{background:var(--surface-2);color:var(--accent)}
.nav-cart-count{min-width:18px;text-align:center;font-size:.75rem;font-weight:600}
.nav-inline a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){.nav-cart-label{display:none}.nav{gap:12px}.nav-inline{gap:12px}}
.nav-inline a{color:var(--text-2);text-decoration:none;font-weight:500;font-size:.95rem}
.nav-inline a:hover{color:var(--accent)}

/* === JMB package B (Joachim meeting 05.11.2026) ==========================
   One contiguous block: Dynamic Island, wave motion, shop storefront (hero,
   category showcase, category head, switcher, subcategories, search). Tokens
   only; --oele-soft-surface comes from brand.css (loaded on every page). */

/* --- Dynamic Island (site/partials/nav.html, assets/js/oele-island.js) ----
   After the diepraxis.jetzt nav island: the shell sticks to the top; once
   scrolled (.is-island) the bar becomes a floating glass pill. The shell
   keeps the measured bar height, so the page below never jumps. */
body{overflow-x:clip}
.nav-shell{position:sticky;top:0;z-index:50;background:var(--bg);interpolate-size:allow-keywords}
.nav-shell .nav{position:relative;box-sizing:border-box;border:1px solid transparent;border-bottom-color:var(--line-soft);
  transition:max-width .5s cubic-bezier(.22,1,.36,1),padding .4s cubic-bezier(.22,1,.36,1),border-radius .4s cubic-bezier(.22,1,.36,1),background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.nav-shell.is-island{box-sizing:border-box;height:var(--oele-nav-h,85px);padding-top:12px;background:transparent;pointer-events:none}
.nav-shell.is-island .nav{pointer-events:auto;width:min(1100px,calc(100% - 24px));max-width:calc(100% - 24px);gap:24px;padding:6px 14px 6px 26px;border-color:var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:var(--shadow-3)}
.nav-shell.is-island .nav-brand-tag{display:none}
.nav-shell.is-island .nav-brand-name{white-space:nowrap}
.nav-shell.is-island .nav-inline{gap:24px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav-shell.is-island .nav{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.nav-shell.is-island .nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.nav-shell .nav{transition:none}}
.nav-island-slot{display:flex;align-items:center}
/* Olli 05.11.2026 (97:07): the cart is an icon with its count, no word. The
   link keeps its accessible name from cart-badge.js / oele-island.js. */
.nav-shell .nav-cart-label{display:none}
.nav-island-slot:empty{display:none}
@media (max-width:760px){
  .nav-shell .nav{padding:16px 20px;gap:10px}
  .nav-shell.is-island .nav{width:calc(100% - 24px);justify-content:space-between;gap:10px;padding:6px 6px 6px 16px}
  .nav-island-slot{margin-left:auto}
}
html{scroll-padding-top:calc(var(--oele-nav-h,85px) + 12px)}

/* Island audit (Olli 05.11.2026, 81:47): readable tagline, a cart button that
   stands out with a clearly visible count, logo prototypes A/B/C. */
.nav-shell .nav-brand{gap:3px}
.nav-shell .nav-brand-name{font-size:1.125rem;line-height:1.2}
.nav-shell .nav-brand-tag{font-size:.8125rem;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.nav-shell .nav-cart{gap:8px;padding:0 12px 0 14px;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:600;transition:background-color .18s ease-out}
.nav-shell .nav-cart:hover{background:var(--accent-2);color:var(--on-accent)}
.nav-shell .nav-cart:active{transform:translateY(1px)}
.nav-shell .nav-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--surface);color:var(--accent-text);font-size:.9375rem;font-weight:700;line-height:1}
.nav-shell .nav-cart[data-empty] .nav-cart-count{display:none}
@media (max-width:760px){
  .nav-shell .nav{gap:8px}
  .nav-shell .nav-brand{max-width:150px}
  .nav-shell .nav-brand.logo-proto{max-width:178px;gap:8px}
  .nav-shell .nav-brand-name{white-space:nowrap}
  .nav-shell .nav-cart{padding:0 8px}
  .nav-shell.has-tools .nav .shop-switcher-btn > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-shell.has-tools .nav .shop-switcher-chev{display:none}
  .nav-shell.has-tools .nav .shop-switcher-btn{width:44px;padding:0;justify-content:center}
}

/* Logo prototypes (assets/js/oele-logo-proto.js, localhost/staging only). */
.nav-brand.logo-proto{flex-direction:row;align-items:center;gap:10px}
.logo-proto-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.logo-proto-mark{flex:0 0 auto;display:block;color:var(--accent)}
.logo-proto-mark svg{display:block}
.logo-proto--b .nav-brand-name{font-weight:600;letter-spacing:.02em;text-transform:lowercase}
.logo-proto--c .logo-proto-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.9375rem;letter-spacing:.02em}
.nav-shell.is-island .logo-proto-mark{transform:scale(.86)}
.oele-logo-switch{position:fixed;right:16px;bottom:16px;z-index:61;display:flex;align-items:center;gap:6px;padding:4px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-2)}
.oele-logo-switch-toggle,.oele-logo-switch-btn{min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer}
.oele-logo-switch-toggle[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-text)}
.oele-logo-switch-group{display:flex;gap:4px}
.oele-logo-switch-group[hidden]{display:none}
.oele-logo-switch-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:760px){.oele-logo-switch{bottom:96px;right:12px}}
}

/* --- Wave motion for sections.css waves (.mv-section[data-wave-motion]) ---
   Reusable on every page: <section class="mv-section" data-tone="soft"
   data-wave="both" data-wave-motion>. A periodic wave mask drifts sideways
   while the section passes through the viewport (scroll-driven, no JS).
   Static under prefers-reduced-motion or without scroll-timeline support. */
.mv-section[data-wave-motion]{--mv-wave-height:40px}
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
  .mv-section[data-wave][data-wave-motion]::before,
  .mv-section[data-wave][data-wave-motion]::after{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C120 16 240 16 360 40S600 64 720 40V64H0Z'/%3E%3C/svg%3E") 0 0 / 720px 100% repeat-x;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C120 16 240 16 360 40S600 64 720 40V64H0Z'/%3E%3C/svg%3E") 0 0 / 720px 100% repeat-x;
  }
}
@keyframes oele-wave-drift{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:-720px 0;mask-position:-720px 0}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mv-section[data-wave][data-wave-motion]::before,
    .mv-section[data-wave][data-wave-motion]::after{animation:oele-wave-drift linear both;animation-timeline:view()}
  }
}

/* --- Shop storefront ---------------------------------------------------- */
.shop-crumbs{font-size:.9375rem}
.shop-search-label{font-size:1rem}
#kategorien,#alle-produkte,#shop-suche{scroll-margin-top:calc(var(--oele-nav-h,85px) + 12px)}

/* Full-width soft band inside .shop-wrap (content keeps the wrap's measure). */
.shop-wrap .shop-band{margin-inline:calc(50% - 50vw);padding-inline:max(24px,calc(50vw - 590px));margin-block:8px 48px}
/* Olli 05.11.2026 (97:07): on arrival the first category cards (photos,
   name, teaser) must already show, so the index band starts tighter. */
.shop-wrap > .shop-band:not(.shop-cat-band){--mv-section-space:20px;margin-top:0}
.shop-band > .shop-head{margin-bottom:16px}
.shop-band > .shop-head,.shop-cat-band > .shop-head{border-bottom:0;padding-bottom:0;max-width:none}

/* Hero: copy left, photo right (interim visual until the generated hero). */
.shop-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin:-24px 0 4px}
.shop-hero h1{font-size:clamp(2rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;color:var(--text);text-wrap:balance}
.shop-hero-lead{font-size:1.125rem;line-height:1.6;color:var(--text-2);margin:0 0 22px;max-width:34em}
.shop-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.shop-hero-actions .btn{border-radius:var(--radius-md);padding:12px 22px;font-size:1rem}
.shop-hero-media{position:relative;aspect-ratio:2/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--oele-soft-surface,var(--bg-2));box-shadow:var(--shadow-3)}
.shop-hero-media > picture,.shop-hero-media > img{position:absolute;inset:0;width:100%;height:100%}
.shop-hero-media > picture img,.shop-hero-media > img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hero-product{position:absolute;right:9%;bottom:5%;height:84%;aspect-ratio:500/1350;filter:drop-shadow(0 18px 22px rgba(10,37,64,.35))}
.shop-hero-product img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:860px){
  .shop-hero{grid-template-columns:minmax(0,1fr);gap:20px;margin:-16px 0 12px}
  .shop-hero-media{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:no-preference){
  .shop-hero-product{animation:oele-hero-rise .8s cubic-bezier(.22,1,.36,1) both .15s}
  @keyframes oele-hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  /* The field drifts very slowly behind the bottle (one 14s pass, no loop). */
  .shop-hero-media > picture img,.shop-hero-media > img{animation:oele-hero-drift 14s cubic-bezier(.22,1,.36,1) both}
  @keyframes oele-hero-drift{from{transform:scale(1.06)}to{transform:none}}
  /* Showcase and subcategory cards lift into place as they enter the
     viewport. Scroll-driven, so a fast jump lands them in their final state;
     the translate property only (hover keeps its transform), never hidden. */
  @supports (animation-timeline:view()){
    .shop-cat-show,.shop-cat-subcat{animation:oele-card-enter linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes oele-card-enter{from{translate:0 24px}to{translate:none}}
  }
}

/* Category showcase on the shop index: three real product photos per card. */
/* Flex, not grid: an incomplete last row is centred (Olli 05.11.2026). */
.shop-cat-tiles.shop-cat-showcase{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:0}
.shop-cat-showcase > .shop-cat-show{flex:0 1 100%;box-sizing:border-box}
@media (min-width:640px){.shop-cat-showcase > .shop-cat-show{flex-basis:calc((100% - 20px) / 2)}}
@media (min-width:960px){.shop-cat-tiles.shop-cat-showcase{gap:24px}.shop-cat-showcase > .shop-cat-show{flex-basis:calc((100% - 48px) / 3)}}
.shop-cat-tile.shop-cat-show{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;border-radius:var(--radius-lg);overflow:hidden;border-color:var(--line);transition:transform .2s ease-out,box-shadow .2s ease-out}
.shop-cat-tile.shop-cat-show:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.shop-cat-tile.shop-cat-show:active{transform:translateY(-1px)}
.shop-cat-show-media{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;aspect-ratio:16/9;padding:12px;box-sizing:border-box;background:linear-gradient(135deg,var(--panel-a),var(--panel-b))}
.shop-cat-show-img{position:relative;min-height:0;box-sizing:border-box;background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.shop-cat-show-img:first-child{grid-row:1 / span 2}
.shop-cat-show-n1 .shop-cat-show-img{grid-column:1 / span 2;grid-row:1 / span 2}
.shop-cat-show-n2 .shop-cat-show-img{grid-row:1 / span 2}
.shop-cat-show-img picture{display:contents}
.shop-cat-show-img img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;display:block}
.shop-cat-show .shop-cat-tile-info{gap:8px;padding:18px 20px 20px;flex:1}
.shop-cat-show .shop-cat-tile-name{margin:0;font-size:1.2rem;line-height:1.3;min-height:0;color:var(--text)}
.shop-cat-show-teaser{color:var(--text-2);font-size:1rem;line-height:1.5}
.shop-cat-show-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:6px}
.shop-cat-show .shop-cat-tile-count{font-size:.9375rem}
.shop-cat-show-cta{color:var(--accent-text);font-weight:600;font-size:.9375rem;white-space:nowrap}
.shop-cat-tile-count{font-size:.9375rem}

/* Category switcher (build-shop.mjs categorySwitcherHtml()), in the page flow
   or, moved by oele-island.js, inside the Dynamic Island. */
.shop-switcher{position:relative;margin:0 0 24px}
.nav .shop-switcher{position:static;margin:0}
.shop-switcher-cats > summary{list-style:none}
.shop-switcher-cats > summary::-webkit-details-marker{display:none}
.shop-switcher-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent-text);font-weight:600;font-size:.9375rem;cursor:pointer;user-select:none;transition:background-color .18s ease-out,color .18s ease-out}
.shop-switcher-btn:hover,.shop-switcher-cats[open] > .shop-switcher-btn{background:var(--accent);color:var(--on-accent)}
.shop-switcher-btn:active{transform:translateY(1px)}
.shop-switcher-chev{transition:transform .2s ease-out}
.shop-switcher-cats[open] .shop-switcher-chev{transform:rotate(180deg)}
.shop-switcher-cats:not([open]) .shop-switcher-panel{display:none}
.shop-switcher-panel{position:absolute;z-index:60;top:calc(100% + 8px);left:0;width:min(760px,calc(100vw - 24px));max-height:calc(100vh - var(--oele-nav-h,85px) - 24px);overflow:auto;box-sizing:border-box;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.nav .shop-switcher-panel{left:50%;transform:translateX(-50%)}
.shop-switcher-head{margin:0 0 10px;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);text-align:center}
.shop-switcher-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.shop-switcher-link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;box-sizing:border-box;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid var(--line-soft);color:var(--text);font-weight:600;font-size:.9375rem;text-decoration:none}
.shop-switcher-link:hover{border-color:var(--accent);background:var(--accent-soft)}
.shop-switcher-link.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.shop-switcher-search{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.9375rem;text-decoration:none}
.shop-switcher-search:hover{background:var(--accent-2)}

/* Category page head: band, back link, SEO intro with "Gut zu wissen". */
.shop-cat-band{margin-top:0}
.shop-cat-band .shop-head{margin-bottom:22px}
.shop-cat-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;margin:0 0 14px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.9375rem;text-decoration:none;transition:border-color .18s ease-out,background-color .18s ease-out}
.shop-cat-back:hover{border-color:var(--accent);background:var(--surface-2)}
.shop-cat-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.shop-cat-intro.has-tip{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
.shop-cat-intro-text p{margin:0 0 14px;font-size:1.0625rem;line-height:1.7;color:var(--text);max-width:68ch}
.shop-cat-intro-text p:last-child{margin-bottom:0}
.shop-cat-tip{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-2)}
.shop-cat-tip-title{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1.0625rem;color:var(--accent-text)}
.shop-cat-tip-title::before{content:"i";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.9375rem;font-weight:700}
.shop-cat-tip p{margin:0;font-size:1rem;line-height:1.6;color:var(--text-2)}
@media (max-width:860px){.shop-cat-intro.has-tip{grid-template-columns:minmax(0,1fr)}}

/* Subcategories: "<Kategorie> genauer filtern", larger photo cards. */
.shop-cat-subsection{margin:0 0 44px}
.shop-cat-subtitle{font-size:1.3rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 16px;color:var(--text)}
.shop-cat-subcats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0}
.shop-cat-subcats > .shop-cat-subcat{flex:0 1 calc((100% - 16px) / 2);box-sizing:border-box}
@media (min-width:640px){.shop-cat-subcats > .shop-cat-subcat{flex-basis:calc((100% - 32px) / 3)}}
@media (min-width:960px){.shop-cat-subcats > .shop-cat-subcat{flex-basis:calc((100% - 48px) / 4)}}
.shop-cat-subcat{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-color:var(--line);border-radius:var(--radius-lg)}
.shop-cat-subcat-cover{width:100%;aspect-ratio:4/3;padding:14px;border-radius:0}
.shop-cat-subcat-body{padding:12px 14px 14px;gap:4px}
.shop-cat-subcat-name{min-height:0;font-size:1.0625rem}
.shop-cat-subcat-count{font-size:.9375rem;font-weight:500}
.shop-cat-subcat-chevron{display:none}
@media (max-width:479px){.shop-cat-subcats{gap:12px}.shop-cat-subcats > .shop-cat-subcat{flex-basis:calc((100% - 12px) / 2)}}

/* "Alle Produkte" head with the search beside it (search filters this list). */
.shop-head.shop-all-head{max-width:none;border-bottom:0;padding-bottom:0;margin-bottom:24px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
.shop-all-head h2{margin:0}
.shop-all-head #shop-suche{flex:1 1 320px;max-width:460px}
.shop-all-head .shop-search{margin:0}
.shop-loadmore-btn{display:flex;margin:32px auto 0;border-radius:var(--radius-md)}
/* --- Audit round 5 (05.11.2026, Opus/Sonnet, package B) ----------------- */
/* Header content on the same edge as the page content (130px at 1440). */
.nav-shell:not(.is-island) .nav{max-width:1228px}
/* Calm strip behind the floating pill so text does not run beside it. */
.nav-shell.is-island::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(100% + 10px);background:linear-gradient(var(--bg) 55%,transparent);pointer-events:none;z-index:-1}
/* Empty cart button still a full 44px target. */
.nav-shell .nav-cart{min-width:44px;justify-content:center}
/* Breadcrumb links as 44px touch targets. */
.shop-crumbs a{display:inline-flex;align-items:center;min-height:44px}
/* Mobile menu: tinted, brand on top, one filled action. */
.nav-dialog-brand{display:none}
@media (max-width:760px){
  .nav-shell .nav-dialog[open]{background:var(--oele-soft-surface,var(--bg-2))}
  .nav-shell .nav-dialog[open] .nav-dialog-brand{display:block;margin:6px 0 18px;font-size:1.25rem;font-weight:700;color:var(--text)}
  .nav-dialog-cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:auto;border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:1.0625rem;text-decoration:none}
}
.nav-dialog:not([open]) .nav-dialog-cta{display:none}
@media (min-width:761px){.nav-dialog-cta{display:none}}
/* Back link tinted, not a white outline (B9 / B3). */
.shop-cat-back{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.shop-cat-back:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* Product cards: soft turquoise body instead of pure white (B4); badge,
   title and teaser keep fixed heights so price lines and buttons of one
   row sit on one line (C1, card structure). */
.shop-card{background:var(--oele-soft-surface,var(--surface-2))}
.shop-card .body > .shop-badge{min-height:1.85em;box-sizing:border-box;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-card .body > h2{min-height:2.8em}
.shop-card .body > .ex{min-height:4.5em}
.shop-card .body > .ex + *{margin-top:0}
.shop-card .body > :last-child:not(.ex){margin-top:auto}
/* Infobox on the soft band: tinted, not pure white. */
.shop-cat-tip{background:color-mix(in srgb,var(--surface) 55%,var(--oele-soft-surface,var(--bg-2)))}
/* Missing product photo: a designed neutral surface with a drawn bottle,
   no text (the stand-in image is dropped in build-shop.mjs). */
.shop-card .cover:empty,.shop-cat-subcat-cover:empty,.shop-pdp-gallery-empty{position:relative}
.shop-card .cover:empty::before,.shop-cat-subcat-cover:empty::before,.shop-pdp-gallery-empty::before{content:"";position:absolute;inset:22%;background:var(--line);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'%3E%3Crect x='14' y='2' width='12' height='12' rx='2'/%3E%3Crect x='12' y='14' width='16' height='6' rx='1.5'/%3E%3Cpath d='M10 22h20a4 4 0 0 1 4 4v48a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V26a4 4 0 0 1 4-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'%3E%3Crect x='14' y='2' width='12' height='12' rx='2'/%3E%3Crect x='12' y='14' width='16' height='6' rx='1.5'/%3E%3Cpath d='M10 22h20a4 4 0 0 1 4 4v48a4 4 0 0 1-4 4H10a4 4 0 0 1-4-4V26a4 4 0 0 1 4-4Z'/%3E%3C/svg%3E") center / contain no-repeat}
/* Photos with a white box blend into the tinted image area (light theme). */
@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]) :is(.shop-card .cover,.shop-cat-subcat-cover) img{mix-blend-mode:multiply}
}
html[data-theme="light"] :is(.shop-card .cover,.shop-cat-subcat-cover) img{mix-blend-mode:multiply}
/* Showcase: three tall cells in one row, so bottles fill the height (B10). */
.shop-cat-show-media{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.shop-cat-show-img:first-child{grid-row:auto}
.shop-cat-show-n2 .shop-cat-show-img,.shop-cat-show-n2 .shop-cat-show-img:first-child{grid-row:auto}
.shop-cat-show-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop-cat-show-n1{grid-template-columns:minmax(0,1fr)}
.shop-cat-show-n1 .shop-cat-show-img{grid-column:auto;grid-row:auto}
/* Mobile: showcase two per row with one photo, shorter scroll (B3/B4). */
@media (max-width:639px){
  .shop-cat-showcase > .shop-cat-show{flex-basis:calc((100% - 20px) / 2)}
  .shop-cat-show-media{grid-template-columns:minmax(0,1fr);aspect-ratio:1/1;padding:8px}
  .shop-cat-show-img:not(:first-child){display:none}
  .shop-cat-show .shop-cat-tile-info{padding:12px 12px 14px}
  .shop-cat-show .shop-cat-tile-name{font-size:1.0625rem;overflow-wrap:normal;word-break:normal;hyphens:auto}
  .shop-cat-show-teaser{font-size:.9375rem}
  .shop-cat-show-meta{flex-direction:column;align-items:flex-start;gap:2px}
}
/* --- Prototype dock (assets/js/oele-proto-dock.js, staging/local only) ----
   One collapsed tab bottom right; the packages' own switchers are moved in
   and laid out as plain rows, never wider or taller than the viewport. */
.oele-proto-dock{position:fixed;right:12px;bottom:12px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 24px);font-family:inherit}
.oele-proto-dock[hidden]{display:none}
.oele-proto-dock-tab{min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:inherit;font-size:.9375rem;font-weight:700;box-shadow:var(--shadow-2);cursor:pointer}
.oele-proto-dock-tab[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.oele-proto-dock-panel{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100vh - 88px);overflow:auto;padding:12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:10px}
.oele-proto-dock-panel[hidden]{display:none}
.oele-proto-dock-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oele-proto-dock-name{min-width:84px;font-size:.9375rem;font-weight:700;color:var(--text-2)}
.oele-proto-dock .is-docked{position:static!important;inset:auto!important;transform:none!important;margin:0!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:4px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:auto!important;height:auto!important}
.oele-proto-dock .is-docked :is(.shop-pp-switch-label,.shop-cp-switch-label,.oele-logo-switch-toggle){display:none!important}
.oele-proto-dock .is-docked :is(.shop-pp-switch-btn,.shop-cp-switch-btn){display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.oele-proto-dock .is-docked .oele-logo-switch-group[hidden]{display:flex!important}
.oele-proto-dock .berater-ab-switch.is-docked button{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.oele-proto-dock .berater-ab-switch.is-docked button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* --- Design prototype "Gestaltung" (assets/js/oele-design-proto.js) -------
   Active only through classes on <html>, which only the staging/local script
   sets; the live design never matches these selectors, and the font file is
   only requested once a class asks for it.
   A: Lora for H1 to H3. Lora (SIL OFL 1.1, files/LORA-OFL.txt, unmodified
   font converted to WOFF2): a calm, brushed serif with moderate contrast that
   stays sturdy at 390px headline sizes, warm enough for "natürliche Öle"
   without the luxury feel of a high-contrast display serif; full Latin
   Extended, so the "ō" in dōTERRA comes from the same face.
   B: A plus the light brand turquoise as page background; cards and panels
   keep their white surface and lift off it. Light theme only. */
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/files/lora-wght.woff2') format('woff2')}
html.oele-design-a :is(h1,h2,h3){font-family:'Lora',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.005em}
html.oele-design-a .nav-brand-name{font-family:'Lora',Georgia,serif;font-weight:700}
@media (prefers-color-scheme:light){
  html.oele-design-b:not([data-theme="dark"]){--bg:var(--oele-soft-surface,#EAF3F6);--mv-soft-bg:#D5E7EE;--mv-wave-top-backdrop:var(--bg);--mv-wave-bottom-backdrop:var(--bg)}
}
html.oele-design-b[data-theme="light"]{--bg:var(--oele-soft-surface,#EAF3F6);--mv-soft-bg:#D5E7EE;--mv-wave-top-backdrop:var(--bg);--mv-wave-bottom-backdrop:var(--bg)}
html.oele-design-b:not([data-theme="dark"]) body{background:var(--bg)}
html.oele-design-b:not([data-theme="dark"]) .shop-card{background:var(--surface)}
html.oele-design-b:not([data-theme="dark"]) .shop-cat-tip{background:var(--surface)}
/* === end JMB package B ================================================== */

/* Mobile nav (design audit finding, 15.09.2026): below 640px the four
   inline links plus the logo had no room, so touch targets shrank to 18px
   tall (WCAG minimum is 44px) with the whole row visually crammed. The
   toggle + dialog below use site/assets/js/nav-menu.js (framework core,
   see its own header comment for the markup contract): a native <dialog>
   gets focus trap, Escape-to-close and an inert background for free. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:1px}
.nav-dialog{display:none}
@media (max-width:760px){
  .nav-inline{display:none}
  .nav-toggle{display:flex}
  .nav-dialog[open]{display:flex;flex-direction:column;position:fixed;inset:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;box-sizing:border-box;padding:24px;border:0;background:var(--surface)}
  .nav-dialog::backdrop{background:rgba(0,0,0,.4)}
  .nav-dialog nav{display:flex;flex-direction:column;gap:4px}
  .nav-dialog nav a{padding:14px 4px;font-size:1.1rem;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-soft);min-height:44px;display:flex;align-items:center}
  .nav-dialog-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border:0;background:transparent;font-size:1.6rem;line-height:1;color:var(--text-2);cursor:pointer}
}

footer{max-width:1180px;margin:48px auto 0;padding:28px 24px 40px;border-top:1px solid var(--line-soft);text-align:center;color:var(--text-3);font-size:.85rem;line-height:1.7}
footer a{color:var(--text-3);text-decoration:none}
footer a:hover{color:var(--accent)}

/* SHRX-N3 16.09.2026: DE-Startseite bei 390px scrollWidth 402 > 390. Core-Bug
   (.shop-cat-subcat ohne min-width:0, kein body-Reset), Fork-Override bis
   SHR-01b/14b. */
body{margin:0}
.shop-cat-subcat{min-width:0;overflow-wrap:anywhere}

/* Customer surface identity. Catalog cards keep their quiet existing layout. */
.shop-head{border-bottom:3px solid var(--oele-brand-surface, #387E99);padding-bottom:20px}
.shop-pdp-gallery{background:var(--oele-soft-surface, var(--surface-2));border-radius:var(--radius-md)}

/* OEQ-01 08.10.2026 (Joachim, 07.10.): product page.
   - Image was 668x834 at desktop (gallery took the wide column, buy box only
     380px), so the photo dominated and the lead text sat narrow top right.
     Swap the weight: capped gallery, wider buy column, capped image height.
   - Long description ran full 1080px with line-height:normal and full-
     contrast text: read as cramped and heavy. Give it a reading measure,
     the same line-height as the lead and the secondary text colour. */
@media (min-width:900px){
  .shop-pdp-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px}
  .shop-pdp-figure img{max-height:460px}
}
.shop-pdp-details > p,
.shop-pdp-details li{line-height:1.7;color:var(--text-2)}
.shop-pdp-details > p{max-width:68ch}
.shop-pdp-buy h1{text-wrap:balance}

/* ==========================================================================
   Joachim meeting 05.11.2026, package A: cart (A1 to A6)
   ========================================================================== */

/* A1/A6: image and name link to the product page, thumbnail shows the whole
   bottle (contain, never cropped top/bottom) and is larger. */
.mv-cart-item{grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;padding:16px 18px}
.mv-cart-item-media{gap:16px}
.mv-cart-item-thumb-link{display:block;flex:0 0 auto;border-radius:var(--radius-sm);line-height:0}
.mv-cart-item-thumb{width:88px;height:88px;object-fit:contain;padding:4px;box-sizing:border-box;background:var(--oele-soft-surface, var(--surface-2));border-radius:var(--radius-sm)}
.mv-cart-item-title-link{color:var(--text);text-decoration:none}
.mv-cart-item-title-link:hover,.mv-cart-item-title-link:focus-visible{color:var(--accent-text);text-decoration:underline}
.mv-cart-item-thumb-link:hover .mv-cart-item-thumb{box-shadow:0 0 0 2px var(--accent)}
.mv-cart-item-title{font-size:1rem;line-height:1.4}
.mv-cart-item-type,.mv-cart-item-variant{font-size:.875rem}
@media (max-width:640px){
  .mv-cart-item-thumb{width:72px;height:72px}
  .mv-cart-item-media{gap:12px}
}

/* A3: hint box "Deine Bestellung bei dōTERRA" is clearly a notice. */
.mv-transfer-notice{display:flex;gap:12px;align-items:flex-start;max-width:none;margin:0 0 20px;padding:14px 16px;background:var(--info-bg);border:1px solid var(--info);border-left-width:5px;border-radius:var(--radius-md);color:var(--text)}
.mv-transfer-notice p{margin:0;line-height:1.6;color:var(--text);font-size:1rem}
.mv-transfer-notice-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--info);color:var(--surface);font-weight:700;font-family:Georgia,serif;font-style:italic;line-height:1}

/* A2: the cart link in the finished state is a real button. */
.mv-transfer-cart-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.mv-transfer-actions .mv-transfer-cart-btn{min-height:44px;padding:0 22px}

/* Nachtrag 2: the "Details und Hinweise" accordion is gone. The finished
   state explains what the cart button does, the reset button stays below. */
.mv-transfer-cart-hint{margin:12px 0 0;max-width:62ch;color:var(--text-2);font-size:1rem;line-height:1.55}
.mv-transfer-reset{margin:20px 0 0}
@media (max-width:480px){.mv-transfer-reset .btn{width:100%}}
/* Nachtrag 2: lighter border on cart product rows. */
.mv-cart-item{border-color:var(--line)}

/* ==========================================================================
   Joachim meeting 05.11.2026, package A: product page (A7 to A15)
   ========================================================================== */

/* A7: the long description uses the full content width, like the two-column
   block above it (the OEQ-01 reading-measure cap made it look cut off). */
.shop-pdp-details > p{max-width:none}
.shop-pdp-details > p,.shop-pdp-details li{font-size:1.0625rem;line-height:1.75}

/* A8: facts (size, product number) and category tags get air above the
   buy button and a readable size. */
.shop-buybox-facts{margin:2px 0 24px}
.shop-buybox-facts-list{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;font-size:1rem;line-height:1.5;color:var(--text)}
.shop-buybox-facts-list li{margin:0}
.shop-buybox-chips{gap:8px;margin-top:14px}
.shop-buybox-chips .shop-cat-chip{min-height:36px;padding:6px 14px;font-size:.9375rem;line-height:1.35;font-weight:600}
.shop-buybox-variants:empty{display:none}

/* A9/A10: trust lines and the ad label, larger and with their own place
   directly below the buy button. */
.shop-buybox-ad{margin-top:16px}
.shop-ad-label{display:inline-block;margin:0;padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);font-size:.9375rem;font-weight:600;line-height:1.4}
.shop-trust-list{margin:16px 0 0;font-size:1rem;line-height:1.5;color:var(--text-2)}
.shop-trust-list li{margin:0 0 6px;padding-left:26px;position:relative}
.shop-trust-list li::before{content:"";position:absolute;left:2px;top:.35em;width:9px;height:5px;border-left:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.shop-buybox-meta{margin-top:16px;padding-top:12px}
.shop-pv-note,.shop-price-note,.shop-buybox-note-text{font-size:.875rem;line-height:1.5}
.shop-card .shop-price-note{font-size:.875rem}
.shop-pv{font-size:1rem}

/* A10: remaining small type on the product and card surfaces. */
.shop-card .ex{font-size:.9375rem}
.shop-card .shop-badge{font-size:.8125rem}
.shop-pdp-video-caption,.shop-pdp-thumb-more{font-size:.9375rem}
.shop-crumbs{font-size:.9375rem}
.shop-sticky-baseprice,.shop-sticky-price .shop-price-note{font-size:.8125rem}

/* A11/A12: lightbox. Close button gets the same inset as prev/next
   (28px from the dialog edge, they sit 8px inside the 20px padding), and
   the dialog carries an overview strip of all images. */
.shop-lightbox{padding:20px 20px 16px}
.shop-lightbox-close{top:28px;right:28px}
.shop-lightbox-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft)}
.shop-lightbox-thumb{flex:0 0 auto;width:64px;height:64px;padding:2px;border:2px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;overflow:hidden;appearance:none}
.shop-lightbox-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.shop-lightbox-thumb:hover{border-color:var(--line-strong)}
.shop-lightbox-thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.shop-lightbox-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shop-lightbox-figure,.shop-lightbox-figure img{max-height:62vh}
@media (max-width:640px){
  .shop-lightbox-thumb{width:52px;height:52px}
}

/* A13 (revised after staging review): sticky buy bar, compact. Two rows:
   product name plus controls on top, price below. Expanded shows the full
   "In den Warenkorb" button next to the price, minimised folds it to a
   round cart icon in the top row. No thumbnail, as little text as possible. */
.shop-sticky{width:min(400px,calc(100% - 32px));border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:0 10px 30px rgba(10,37,64,.22),0 2px 6px rgba(10,37,64,.12);overflow:hidden}
.shop-sticky::before{content:"";display:block;height:3px;background:var(--accent)}
.shop-sticky-inner{position:relative;padding:10px 8px 12px 16px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px 6px}
.shop-sticky-thumb{display:none}
.shop-sticky-title{grid-column:1;grid-row:1;font-size:.9375rem;line-height:1.3;font-weight:700;color:var(--text);white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.shop-sticky-toggle{grid-column:3;grid-row:1;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer}
.shop-sticky-toggle:hover{background:var(--accent-soft);color:var(--text)}
.shop-sticky-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shop-sticky-toggle span{display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.shop-sticky-price{grid-column:1;grid-row:2;font-size:.9375rem;color:var(--text-2);min-width:0}
.shop-sticky-price .shop-price{font-size:1.0625rem}
.shop-sticky-inner .shop-btn{grid-column:2/4;grid-row:2;justify-self:end;min-height:40px;padding:8px 16px;margin-right:8px;font-size:.9375rem;border-radius:var(--radius-sm)}
.shop-sticky-baseprice,.shop-sticky-price .shop-price-note{font-size:.8125rem;color:var(--text-3)}
/* Minimised: cart icon button sits in the top row between name and toggle. */
.shop-sticky.is-min .shop-sticky-inner .shop-btn{grid-column:2;grid-row:1;justify-self:auto;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;margin:0;font-size:0;gap:0;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:20px 20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2 12h12l2-9H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E")}
.shop-sticky.is-min .shop-sticky-inner{padding:8px 8px 10px 16px}
.shop-sticky.is-min .shop-sticky-title{-webkit-line-clamp:unset}
.shop-sticky.is-min .shop-sticky-toggle span{transform:translateY(2px) rotate(-135deg)}
@media (max-width:640px){
  .shop-sticky{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* A2 (staging review): description lists are generated as one <ul> per item,
   so tighten the gap between consecutive lists and the item rhythm. */
.shop-pdp-details ul,.shop-pdp-details ol{margin:0 0 6px;padding-left:1.25em}
.shop-pdp-details ul:has(+ ul),.shop-pdp-details ol:has(+ ol){margin-bottom:0}
.shop-pdp-details li{margin:0 0 2px;font-size:1.0625rem;line-height:1.55}
.shop-pdp-details ul + p,.shop-pdp-details ol + p{margin-top:14px}

/* A14/A15: "Häufig zusammen angeschaut" shows 3 or 6 cards, always in rows
   of three on wide screens. */
.shop-crosssell > h2{font-size:1.5rem;margin-bottom:20px}
@media (min-width:720px){
  .shop-crosssell .shop-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   Package A: product cards (A17)
   ========================================================================== */
.shop-card{border:1px solid var(--line);box-shadow:0 1px 2px rgba(10,37,64,.08),0 6px 18px rgba(10,37,64,.07);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.shop-card:hover,.shop-card:focus-visible{border-color:var(--line-strong);box-shadow:0 2px 4px rgba(10,37,64,.10),0 12px 28px rgba(10,37,64,.13)}
.shop-card .body{padding:20px 20px 20px;gap:10px;text-align:left}
.shop-card .body > .shop-badge{align-self:flex-start;margin:0}
.shop-card h2{margin:2px 0 0;font-size:1.0625rem;line-height:1.4;text-align:left}
.shop-card .ex{margin:0;text-align:left}
.shop-card-cta{align-self:stretch;width:100%;margin-top:6px;font-size:1rem}

/* ==========================================================================
   Package A: category bar (A18): radius 10px max, wrap instead of scroll,
   incomplete last row centred.
   ========================================================================== */
.shop-cat-chips{flex-wrap:wrap;justify-content:center;overflow:visible;scroll-snap-type:none;gap:10px;padding-bottom:0}
.shop-cat-chip{flex:0 0 calc((100% - 50px) / 6);box-sizing:border-box;justify-content:center;text-align:center;white-space:normal;line-height:1.3;min-height:48px;padding:8px 12px;border-radius:10px;font-size:.9375rem}
.shop-buybox-chips .shop-cat-chip{flex:0 0 auto;border-radius:10px;justify-content:flex-start;text-align:left}
@media (max-width:899px){
  .shop-cat-chips .shop-cat-chip{flex-basis:calc((100% - 20px) / 3)}
}
@media (max-width:599px){
  .shop-cat-chips .shop-cat-chip{flex-basis:calc((100% - 10px) / 2)}
}

/* ==========================================================================
   Package A: footer in the madevisible.io structure (A16)
   ========================================================================== */
.site-footer{max-width:none;margin:0;padding:clamp(40px,5vw,64px) 24px 28px;border-top:1px solid var(--line);background:var(--bg-2);color:var(--text-2);text-align:left;font-size:1rem;line-height:1.6}
.site-footer a{color:var(--text-2);text-decoration:none}
.site-footer a:hover{color:var(--accent-text);text-decoration:underline}
.site-footer .foot-wrap{max-width:1180px;margin:0 auto}
.site-footer .foot-grid{display:grid;grid-template-columns:1fr;gap:32px}
.site-footer .foot-brand p{margin:0 0 8px;max-width:38ch}
.site-footer .foot-brand-name{font-size:1.25rem;font-weight:700;color:var(--text)}
.site-footer .foot-brand-tag{color:var(--text-2)}
.site-footer .foot-brand a{color:var(--accent-text);font-weight:600}
.site-footer .foot-col h3{margin:0 0 12px;font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.site-footer .foot-col a{display:block;padding:5px 0;min-height:32px;box-sizing:border-box}
.site-footer .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin-top:clamp(28px,4vw,40px);padding-top:18px;border-top:1px solid var(--line);font-size:.9375rem;color:var(--text-2)}
@media (min-width:600px){.site-footer .foot-grid{grid-template-columns:1fr 1fr}.site-footer .foot-brand{grid-column:1/-1}}
@media (min-width:900px){.site-footer .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px)}.site-footer .foot-brand{grid-column:auto}}
@media (max-width:759px){.site-footer .foot-bottom{flex-direction:column;align-items:flex-start}}
@media (max-width:759px){.site-footer{padding-bottom:84px}}

/* A3 (staging review): "Häufig zusammen angeschaut" looks like the shop grid:
   same card width (the block breaks out of the 1080px product column to the
   1180px shop width), same gap and the same accent-underlined heading. */
.shop-crosssell .shop-cat-grid{gap:22px}
.shop-crosssell > h2{max-width:none;margin:0 0 24px;padding-bottom:14px;border-bottom:1px solid var(--line)}


/* ==========================================================================
   Design-audit implementation, package A (05.11.2026)
   ========================================================================== */

/* One container for header, product page, cart and footer: 1180px, so the
   edges line up at x=130 on a 1440px viewport (audit A5/A9). */
.shop-pdp{max-width:1180px}
.shop-cart-main{max-width:1180px}
@media (min-width:1240px){.nav{padding-left:0;padding-right:0}}

/* Smaller type floor 14px (audit A13): cart and product notes. */
.mv-cart-pv-note,.mv-cart-external-note,.mv-ext-openall-note,.shop-pv-note,.shop-price-note,.shop-buybox-note-text,.shop-sticky-baseprice,.shop-sticky-price .shop-price-note,.mv-cart-item-type,.mv-cart-item-variant,.ai-disclosure{font-size:.875rem}
.mv-cart-pv-note,.mv-cart-external-note{line-height:1.5;color:var(--text-2)}

/* Line breaks without single-word last lines (audit A19). */
.shop-pdp-details p,.shop-pdp-details li,.shop-pdp-buy .lead{text-wrap:pretty}

/* A14: facts carry their label. */
.shop-buybox-facts-list li[data-label]::before{content:attr(data-label) ": ";color:var(--text-2);font-weight:600}

/* A6/A15: the ad line is a plain notice with an info marker, no outline that
   reads like a button. */
.shop-ad-label{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:0;border-radius:var(--radius-sm);background:var(--info-bg);color:var(--text);font-size:.9375rem;font-weight:500;line-height:1.45}
.shop-ad-label::before{content:"i";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--info);color:var(--surface);font:italic 700 .8125rem/1 Georgia,serif}

/* A4: product without a real photo: neutral surface with a bottle outline,
   no text. */
.shop-pdp-gallery-empty{display:block;aspect-ratio:4/3;max-width:420px;border-radius:var(--radius-lg);background:var(--oele-soft-surface,var(--surface-2)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg fill='none' stroke='%23387E99' stroke-opacity='.45' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='44' y='14' width='32' height='22' rx='4'/%3E%3Cpath d='M48 36v10c-14 6-22 14-22 30v54a12 12 0 0 0 12 12h44a12 12 0 0 0 12-12V76c0-16-8-24-22-30V36'/%3E%3C/g%3E%3C/svg%3E") center/38% no-repeat}
.mv-cart-item-thumb-link:not(:has(img))::before,.shop-cp-thumb-ph{background-color:var(--oele-soft-surface,var(--surface-2))}

/* A16: room at the end of the product page for the sticky bar. */
.shop-pdp{padding-bottom:120px}

/* A3/A7: cart quantity stepper, aligned heights, remove button on one row. */
.mv-cart-item-stepper{display:inline-flex;align-items:stretch;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.mv-cart-item-step{width:44px;border:0;background:var(--btn-2-bg);color:var(--btn-2-text);font-size:1.25rem;line-height:1;cursor:pointer}
.mv-cart-item-step:hover{background:var(--accent-soft)}
.mv-cart-item-step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mv-cart-item-stepper .mv-cart-item-qty{width:52px;min-height:0;height:44px;padding:0 4px;border:0;border-radius:0;text-align:center;appearance:textfield;-moz-appearance:textfield}
.mv-cart-item-stepper .mv-cart-item-qty::-webkit-outer-spin-button,.mv-cart-item-stepper .mv-cart-item-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mv-cart-item-remove{min-height:44px}
@media (max-width:640px){
  .mv-cart-item{grid-template-columns:auto 1fr auto;grid-template-areas:"title title title" "qty price remove"}
  .mv-cart-item-media{grid-area:title}
  .mv-cart-item-stepper{grid-area:qty}
  .mv-cart-item-price{grid-area:price;text-align:right}
  .mv-cart-item-remove{grid-area:remove}
}

/* Touch targets on phones: at least 44px high (audit A10/A14). */
@media (max-width:760px){
  .site-footer .foot-col a,.site-footer .foot-brand a{display:flex;align-items:center;min-height:44px;padding:0}
  .shop-crumbs a,.shop-cart-main > p > a{display:inline-flex;align-items:center;min-height:44px}
  .nav-cart{min-width:44px;justify-content:center}
}
.shop-crumbs{line-height:1.2}

/* A7: lightbox with a tinted stage, wider, and filled controls. */
.shop-lightbox{max-width:min(90vw,1100px);width:min(90vw,1100px);background:var(--oele-soft-surface,var(--surface-2))}
.shop-lightbox-close,.shop-lightbox-prev,.shop-lightbox-next{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.shop-lightbox-close:hover,.shop-lightbox-prev:hover,.shop-lightbox-next:hover{background:var(--accent-2)}
.shop-lightbox-thumb{background:var(--surface)}

/* Cookie button and cookie dialog (audit A9/A12): tinted fill so they do not
   vanish on white, "Anpassen" is a visibly filled button. */
html #dma-consent-fab{background:var(--btn-2-bg);border-color:var(--btn-2-line)}
html #dma-consent button.neutral{background:var(--btn-2-bg);color:var(--btn-2-text);box-shadow:inset 0 0 0 1px var(--btn-2-line)}
html #dma-consent button.neutral:hover{background:var(--accent-soft)}
.nav-brand-tag,.nav-cart-count{font-size:.875rem}
.nav-dialog-close{font-size:1.75rem}