/* ==========================================================================
   POS-cashservice — Zubehör-Shop · Shared styles
   Built on ../colors_and_type.css brand tokens. WordPress/WooCommerce target.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); cursor: pointer; }
a { color: var(--pos-blue); text-decoration: none; }
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 920px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:15px;
  border-radius:var(--radius-pill); padding:13px 26px; border:1.5px solid transparent; text-decoration:none;
  transition: all var(--dur-base) var(--ease-standard); white-space:nowrap; line-height:1; }
.btn svg.ic { width:19px; height:19px; }
.btn-primary { background:var(--pos-orange); color:#fff; }
.btn-primary:hover { background:var(--orange-600); box-shadow:var(--shadow-orange); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0) scale(.99); }
.btn-secondary { background:var(--pos-blue); color:#fff; }
.btn-secondary:hover { background:var(--blue-600); transform:translateY(-1px); }
.btn-ghost { background:#fff; color:var(--pos-blue); border-color:var(--blue-200); }
.btn-ghost:hover { border-color:var(--pos-blue); }
.btn-lg { padding:16px 32px; font-size:16px; }
.btn-sm { padding:9px 16px; font-size:13.5px; }
.btn-block { width:100%; }
.btn-white { background:#fff; color:var(--orange-700); }
.btn-white:hover { background:var(--blue-800); color:#fff; transform:translateY(-1px); }
.btn-link { background:none; border:none; color:var(--pos-blue); font-weight:700; padding:0; display:inline-flex; align-items:center; gap:7px; font-size:15px; }
.btn-link svg.ic { width:16px; height:16px; transition:transform var(--dur-base) var(--ease-standard); }
.btn-link:hover { color:var(--pos-orange); }
.btn-link:hover svg.ic { transform:translateX(3px); }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* ---------- Icon button ---------- */
.iconbtn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:14px;
  background:none; border:none; color:var(--pos-blue); padding:8px; border-radius:var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard); }
.iconbtn:hover { background:var(--blue-50); }
.iconbtn .ic-wrap { position:relative; display:inline-flex; }
.iconbtn .cart-badge { position:absolute; top:-7px; right:-8px; background:var(--pos-orange); color:#fff; font-weight:700;
  font-size:11px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:flex; align-items:center; justify-content:center; }

/* =========================================================================
   Utility bar
   ========================================================================= */
.utilbar { background:var(--blue-800); color:#cdd8ee; font-size:13px; }
.utilbar .container { display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:16px; flex-wrap:wrap; }
.utilbar a { color:#cdd8ee; font-weight:400; }
.utilbar a:hover { color:#fff; }
.utilbar .left, .utilbar .right { display:flex; gap:22px; align-items:center; }
.utilbar .ub { display:inline-flex; align-items:center; gap:7px; }
.utilbar svg.ic { width:15px; height:15px; color:var(--pos-orange); }
.utilbar .usp svg.ic { color:#9fb4e6; }

/* =========================================================================
   Header
   ========================================================================= */
.header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border-1); }
.header.scrolled { box-shadow:var(--shadow-md); }
.header .container { display:flex; align-items:center; gap:28px; height:80px; }
.header .logo img { height:36px; }
.searchbar { flex:1; max-width:620px; display:flex; align-items:center; gap:0; border:1.5px solid var(--border-2);
  border-radius:var(--radius-pill); overflow:visible; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); background:#fff; }
/* Input und Button brauchen eigene border-radius da overflow:visible */
.searchbar input { border-radius:var(--radius-pill) 0 0 var(--radius-pill); }
.searchbar button { border-radius:0 var(--radius-pill) var(--radius-pill) 0; }
.searchbar:focus-within { border-color:var(--pos-blue); box-shadow:0 0 0 3px var(--blue-100); }
.searchbar input { flex:1; border:none; outline:none; font-family:var(--font-body); font-size:15px; padding:13px 20px; color:var(--fg-1); background:transparent; }
.searchbar input::placeholder { color:var(--grey-400); }
.searchbar button { background:var(--pos-orange); color:#fff; border:none; padding:0 22px; align-self:stretch; display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; transition:background var(--dur-fast); }
.searchbar button:hover { background:var(--orange-600); }
.searchbar button svg.ic { width:19px; height:19px; color:#fff; }

/* Live-Suche Autocomplete-Dropdown */
.search-ac { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1.5px solid var(--border-2); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:9000; overflow:hidden; }
.search-ac[hidden] { display:none; }
.ac-item { display:flex; align-items:center; gap:12px; padding:10px 14px; color:var(--fg-1); text-decoration:none; transition:background var(--dur-fast); }
.ac-item:hover, .ac-item.ac-focus { background:var(--grey-50); }
.ac-img { width:40px; height:40px; object-fit:contain; border-radius:var(--radius-sm); border:1px solid var(--border-1); flex-shrink:0; background:#fff; }
.ac-img-ph { background:var(--grey-100); }
.ac-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ac-name { font-size:14px; font-weight:600; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-price { font-size:13px; color:var(--pos-orange); font-weight:700; }
.ac-all { display:block; padding:10px 14px; font-size:13px; font-weight:700; color:var(--pos-blue); border-top:1px solid var(--border-1); text-decoration:none; }
.ac-all:hover { background:var(--grey-50); }
.header .h-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.header .h-actions .act-label { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.header .h-actions .act-label .t1 { font-size:11px; color:var(--fg-2); font-weight:400; }
.header .h-actions .act-label .t2 { font-size:13.5px; color:var(--pos-blue); font-weight:700; }

/* Category nav */
.catnav { background:#fff; border-bottom:1px solid var(--border-1); }
.catnav .container { display:flex; align-items:center; gap:4px; height:52px; overflow:visible; }
.catnav a { color:var(--fg-1); font-weight:700; font-size:14.5px; padding:8px 14px; border-radius:var(--radius-pill);
  white-space:nowrap; display:inline-flex; align-items:center; gap:8px; transition: all var(--dur-fast) var(--ease-standard); }
.catnav a:hover { background:var(--blue-50); color:var(--pos-blue); }
.catnav a.active { color:var(--pos-blue); }
.catnav a.allcats { background:var(--pos-blue); color:#fff; }
.catnav a.allcats:hover { background:var(--blue-600); }
.catnav a.allcats svg.ic { width:16px; height:16px; }
.catnav .spacer { flex:1; }
.catnav .nav-promo { color:var(--pos-orange); font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:7px; }

/* Mobile menu / burger */
.burger { display:none; background:none; border:none; color:var(--pos-blue); padding:8px; }
.search-toggle { display:none; }
.mobile-menu { display:none; position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff; z-index:90;
  box-shadow:var(--shadow-lg); padding:22px; flex-direction:column; gap:2px; overflow-y:auto;
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-standard); }
.mobile-menu.open { display:flex; transform:translateX(0); }
.mobile-menu .mm-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mobile-menu .mm-head img { height:30px; }
.mobile-menu a { padding:14px 6px; border-bottom:1px solid var(--border-1); font-weight:700; font-size:16px;
  color:var(--pos-blue); display:flex; align-items:center; gap:10px; }
.mobile-menu a svg.ic { width:18px; height:18px; color:var(--pos-orange); flex:none; }
.mobile-menu a:hover { color:var(--pos-orange); }
.mm-backdrop { display:none; position:fixed; inset:0; background:rgba(10,30,68,.45); z-index:80;
  backdrop-filter:blur(2px); }
.mm-backdrop.open { display:block; }

/* Mobile search bar (below header, toggle on mobile) */
.mobile-search { display:none; border-bottom:1px solid var(--border-1); background:#fff; padding:10px 0; }
.mobile-search.open { display:block; }
.mobile-search .searchbar { max-width:100%; border-radius:var(--radius-md); }

/* =========================================================================
   Breadcrumbs
   ========================================================================= */
.breadcrumbs { padding:18px 0 0; }
.breadcrumbs ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0; padding:0; font-size:13px; color:var(--fg-2); }
.breadcrumbs li { display:inline-flex; align-items:center; gap:9px; }
.breadcrumbs a { color:var(--fg-2); font-weight:400; }
.breadcrumbs a:hover { color:var(--pos-orange); }
.breadcrumbs li[aria-current] { color:var(--pos-blue); font-weight:700; }
.breadcrumbs .sep { color:var(--grey-300); }

/* =========================================================================
   Section scaffolding
   ========================================================================= */
.section { padding:72px 0; }
.section.tight { padding:48px 0; }
.section.tint { background:var(--grey-50); }
.section.brand { background:var(--bg-brand); color:#fff; }
.section-head { max-width:46em; margin:0 0 36px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow { font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--pos-orange); margin:0 0 12px; }
.section-head h2 { font-family:var(--font-display); font-size:clamp(28px,3vw,38px); color:var(--pos-blue); margin:0 0 12px; letter-spacing:-.02em; line-height:1.12; }
.section-head p { font-size:17px; font-weight:300; color:var(--fg-2); line-height:1.6; margin:0; }
.section.brand .section-head h2 { color:#fff; }
.section.brand .section-head p { color:#c9d5ee; }

.page-head { padding:26px 0 30px; }
.page-head h1 { font-family:var(--font-display); font-size:clamp(30px,3.4vw,46px); color:var(--pos-blue); margin:6px 0 10px; letter-spacing:-.02em; line-height:1.08; }
.page-head p { font-size:17px; font-weight:300; color:var(--fg-2); line-height:1.6; margin:0; max-width:48em; }

/* =========================================================================
   Product image placeholder (no real imagery yet)
   ========================================================================= */
.ph { position:relative; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ph .ph-label { position:relative; z-index:1; font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size:11.5px; letter-spacing:.02em; color:var(--grey-400); background:rgba(255,255,255,.78); border:1px solid var(--border-2);
  border-radius:var(--radius-pill); padding:6px 13px; text-align:center; max-width:84%; }
.ph .ph-ring { position:absolute; width:130px; height:130px; border:14px solid rgba(243,146,0,.12); border-radius:999px; }

/* =========================================================================
   Badges & chips
   ========================================================================= */
.badge { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; padding:5px 11px; border-radius:var(--radius-pill); letter-spacing:.01em; }
.badge-orange { background:var(--pos-orange); color:#fff; }
.badge-blue { background:var(--pos-blue); color:#fff; }
.badge-soft { background:var(--orange-50); color:var(--orange-700); }
.badge-soft-blue { background:var(--blue-50); color:var(--pos-blue); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-stock { background:var(--success-bg); color:var(--success); }
.badge-low { background:var(--warning-bg); color:var(--orange-700); }
.chip { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px; padding:7px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border-2); color:var(--fg-1); background:#fff; transition: all var(--dur-fast) var(--ease-standard); }
.chip:hover { border-color:var(--pos-blue); color:var(--pos-blue); }
.chip.active { background:var(--pos-blue); border-color:var(--pos-blue); color:#fff; }

/* Star rating */
.stars { display:inline-flex; align-items:center; gap:2px; color:var(--pos-orange); }
.stars svg { width:15px; height:15px; fill:var(--pos-orange); stroke:none; }
.stars svg.empty { fill:var(--grey-200); }
.rating-line { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-2); }
.rating-count { font-size:13px; color:var(--fg-2); }

/* =========================================================================
   Product card — Variant A (vertical grid)
   ========================================================================= */
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.product-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card-link { color:inherit; display:flex; flex-direction:column; height:100%; min-width:0; }
.pcard { background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; height:100%; transition: all var(--dur-base) var(--ease-standard); position:relative; }
.pcard:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.pcard .pcard-badges { position:absolute; top:13px; left:13px; z-index:2; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.pcard .wish { position:absolute; top:11px; right:11px; z-index:2; background:#fff; border:1px solid var(--border-1);
  color:var(--grey-400); width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; transition: all var(--dur-fast); }
.pcard .wish:hover { color:var(--pos-orange); border-color:var(--orange-200); }
.pcard .wish svg.ic { width:18px; height:18px; }
.pcard .ph { aspect-ratio: 4/3; }
.pcard .ph .ph-label { font-size:11px; padding:5px 11px; }
.pcard-body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.pcard .kicker { font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--pos-orange); margin-bottom:6px; }
.pcard h3 { font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--pos-blue); margin:0 0 7px; line-height:1.3; overflow-wrap:break-word; word-break:break-word; }
.pcard .compat { font-size:12.5px; color:var(--fg-2); margin:0 0 12px; display:flex; align-items:center; gap:6px; }
.pcard .compat svg.ic { width:14px; height:14px; color:var(--grey-400); }
.pcard .pcard-foot { margin-top:auto; }
.pcard .priceblock { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:13px; }
.pcard .price-main { font-family:var(--font-display); font-size:26px; color:var(--pos-orange); line-height:1; }
.pcard .price-meta { font-size:11.5px; color:var(--fg-2); text-align:right; line-height:1.4; }
.pcard .staffel-hint { font-size:12px; color:var(--success); font-weight:700; display:inline-flex; align-items:center; gap:5px; margin-bottom:12px; }
.pcard .staffel-hint svg.ic { width:14px; height:14px; }

/* =========================================================================
   Product card — Variant B (horizontal list rows)
   ========================================================================= */
.product-list { display:flex; flex-direction:column; gap:14px; }
.lcard { background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:200px 1fr 230px; transition: all var(--dur-base) var(--ease-standard); position:relative; }
.lcard:hover { box-shadow:var(--shadow-md); border-color:var(--blue-200); }
.lcard .ph { aspect-ratio:auto; }
.lcard .lcard-main { padding:20px 22px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--border-1); }
.lcard .lcard-main .kicker { font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--pos-orange); }
.lcard .lcard-main h3 { font-family:var(--font-body); font-weight:700; font-size:18px; color:var(--pos-blue); margin:0; line-height:1.25; }
.lcard .lcard-main .ldesc { font-size:13.5px; color:var(--fg-2); line-height:1.55; margin:0; }
.lcard .lfeats { list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px; }
.lcard .lfeats li { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--fg-1); }
.lcard .lfeats li svg.ic { width:15px; height:15px; color:var(--success); }
.lcard .lcard-buy { padding:20px; display:flex; flex-direction:column; justify-content:center; gap:10px; background:var(--grey-50); }
.lcard .lcard-buy .price-main { font-family:var(--font-display); font-size:28px; color:var(--pos-orange); line-height:1; }
.lcard .lcard-buy .price-meta { font-size:11.5px; color:var(--fg-2); }
.lcard .lcard-buy .staffel-hint { font-size:12px; color:var(--success); font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.lcard .lcard-buy .staffel-hint svg.ic { width:14px; height:14px; }

/* =========================================================================
   Category / shop layout (sidebar + results)
   ========================================================================= */
.shop-layout { display:grid; grid-template-columns:262px minmax(0,1fr); gap:32px; align-items:start; }
.shop-layout > * { min-width:0; }
.filters { position:sticky; top:96px; display:flex; flex-direction:column; gap:8px; }
.filter-card { border:1px solid var(--border-1); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.filter-card > h4, .filter-card > .pos-h4 { font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--pos-blue); margin:0; padding:15px 18px; border-bottom:1px solid var(--border-1);
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
.filter-card > h4 svg.ic, .filter-card > .pos-h4 svg.ic { width:16px; height:16px; color:var(--grey-400); }
.filter-body { padding:14px 18px 16px; }
.filter-opt { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; color:var(--fg-1); cursor:pointer; }
.filter-opt .cb { width:18px; height:18px; border:1.5px solid var(--border-2); border-radius:5px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:#fff; }
.filter-opt.checked .cb { background:var(--pos-orange); border-color:var(--pos-orange); }
.filter-opt.checked .cb svg { width:12px; height:12px; stroke:#fff; stroke-width:3; fill:none; }
.filter-opt .cnt { margin-left:auto; font-size:12px; color:var(--grey-400); }
.filter-opt:hover { color:var(--pos-blue); }
.price-range { display:flex; align-items:center; gap:10px; margin-top:6px; }
.price-range input { width:100%; border:1.5px solid var(--border-2); border-radius:var(--radius-md); padding:9px 11px; font-family:var(--font-body); font-size:13.5px; }

/* Toolbar above results */
.results-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.results-bar .rcount { font-size:14px; color:var(--fg-2); }
.results-bar .rcount strong { color:var(--pos-blue); }
.results-bar .rtools { display:flex; align-items:center; gap:10px; }
.select { position:relative; }
.select select { appearance:none; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--pos-blue);
  background:#fff; border:1.5px solid var(--border-2); border-radius:var(--radius-pill); padding:10px 40px 10px 16px; cursor:pointer; }
.select::after { content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--pos-blue); border-bottom:2px solid var(--pos-blue); transform:translateY(-65%) rotate(45deg); pointer-events:none; }

/* WooCommerce sort-by dropdown — match .select theme style */
.woocommerce-ordering { position:relative; margin:0; }
.woocommerce-ordering select.orderby { appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--pos-blue);
  background:#fff; border:1.5px solid var(--border-2); border-radius:var(--radius-pill); padding:10px 40px 10px 16px; cursor:pointer; line-height:1.4; }
.woocommerce-ordering select.orderby:focus { outline:none; border-color:var(--pos-blue); box-shadow:0 0 0 3px var(--blue-100); }
.woocommerce-ordering::after { content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid var(--pos-blue); border-bottom:2px solid var(--pos-blue); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.viewtoggle { display:inline-flex; border:1.5px solid var(--border-2); border-radius:var(--radius-pill); overflow:hidden; }
.viewtoggle a { padding:9px 14px; color:var(--fg-2); display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; }
.viewtoggle a.active { background:var(--pos-blue); color:#fff; }

/* Pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px; }
.pagination a { min-width:42px; height:42px; padding:0 12px; border:1.5px solid var(--border-2); border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:var(--fg-1); }
.pagination a:hover { border-color:var(--pos-blue); color:var(--pos-blue); }
.pagination a.active { background:var(--pos-blue); border-color:var(--pos-blue); color:#fff; }
.pagination a.np { gap:7px; }

/* =========================================================================
   Category tiles (overview)
   ========================================================================= */
.cat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.cattile { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg);
  overflow:hidden; transition: all var(--dur-base) var(--ease-standard); }
.cattile:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.cattile .ph { aspect-ratio:5/3; }
.cattile .ct-body { padding:20px 20px 22px; }
.cattile h3 { font-family:var(--font-display); font-size:20px; color:var(--pos-blue); margin:0 0 7px; letter-spacing:-.01em; overflow-wrap:break-word; word-break:break-word; }
.cattile p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0 0 14px; }
.cattile .ct-link { color:var(--pos-blue); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:7px; }
.cattile .ct-count { font-size:12px; color:var(--grey-400); font-weight:700; }
.cattile:hover .ct-link { color:var(--pos-orange); }

/* =========================================================================
   Gerät-Finder
   ========================================================================= */
.finder { background:linear-gradient(150deg, var(--blue-600), var(--blue-800)); border-radius:var(--radius-xl); padding:40px 44px; color:#fff;
  position:relative; overflow:hidden; }
.finder::after { content:""; position:absolute; width:240px; height:240px; right:-80px; bottom:-110px; border:28px solid rgba(243,146,0,.2); border-radius:999px; }
.finder .finder-in { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; }
.finder h2 { font-family:var(--font-display); font-size:clamp(24px,2.6vw,32px); margin:0 0 8px; letter-spacing:-.01em; color:#fff; }
.finder p { color:#c9d5ee; font-size:16px; font-weight:300; margin:0; max-width:34em; line-height:1.55; }
.finder .finder-form { display:flex; gap:12px; align-items:center; background:#fff; border-radius:var(--radius-pill); padding:8px 8px 8px 8px; }
.finder .finder-form .select select { border:none; padding:12px 44px 12px 18px; font-size:15px; min-width:260px; }
.finder .finder-form .select::after { right:18px; }

/* =========================================================================
   USP / trust strip
   ========================================================================= */
.usp-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.usp { display:flex; align-items:flex-start; gap:14px; }
.usp .usp-ic { width:48px; height:48px; flex:none; border-radius:var(--radius-md); background:var(--orange-50); color:var(--pos-orange); display:flex; align-items:center; justify-content:center; }
.usp .usp-ic svg.ic { width:24px; height:24px; }
.usp h4, .usp .pos-h4 { font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--pos-blue); margin:0 0 3px; }
.usp p { font-size:13px; color:var(--fg-2); line-height:1.5; margin:0; }

/* =========================================================================
   Hero (home)
   ========================================================================= */
.hero { padding:60px 0 64px; background: radial-gradient(120% 90% at 88% -10%, var(--orange-50) 0%, rgba(255,246,233,0) 55%), var(--white); }
.hero .container { display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center; }
.hero h1 { font-family:var(--font-display); font-size:clamp(36px,4.2vw,56px); line-height:1.05; letter-spacing:-.02em; color:var(--pos-blue); margin:0 0 18px; }
.hero p.lead { font-weight:300; font-size:19px; line-height:1.6; color:var(--fg-2); margin:0 0 26px; max-width:30em; }
.hero .cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.hero .ticks { display:flex; gap:10px 26px; flex-wrap:wrap; }
.tick { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--fg-1); }
.tick svg.ic { width:20px; height:20px; color:var(--success); }
.hero-visual { position:relative; }
.hero-panel { background:linear-gradient(160deg, var(--blue-500), var(--blue-700)); border-radius:var(--radius-xl); padding:34px; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden; }
.hero-panel::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-90px; border:30px solid rgba(243,146,0,.22); border-radius:999px; }
.hero-stack { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-prod { background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hero-prod:hover { transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.hero-prod .ph { aspect-ratio:4/3; }
.hero-prod .hp-body { padding:13px 14px 15px; }
.hero-prod .hp-body .t { font-weight:700; font-size:13.5px; color:var(--pos-blue); }
.hero-prod .hp-body .p { font-family:var(--font-display); font-size:18px; color:var(--pos-orange); margin-top:3px; }

/* =========================================================================
   Generic content / cards / table
   ========================================================================= */
.card { background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg); }
.panel { background:#fff; border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:26px 28px; }
.divider { height:1px; background:var(--border-1); border:none; margin:0; }

.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:12px 14px; font-size:14px; border-bottom:1px solid var(--border-1); }
.table th { font-weight:700; color:var(--pos-blue); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.table tr:last-child td { border-bottom:none; }

/* Staffelpreise table */
.staffel-table { width:100%; border-collapse:collapse; border:1px solid var(--border-1); border-radius:var(--radius-md); overflow:hidden; }
.staffel-table th, .staffel-table td { padding:11px 14px; font-size:14px; text-align:center; }
.staffel-table thead th { background:var(--blue-50); color:var(--pos-blue); font-weight:700; font-size:12.5px; }
.staffel-table tbody td { border-top:1px solid var(--border-1); }
.staffel-table tbody td:first-child { font-weight:700; color:var(--fg-1); }
.staffel-table tbody td.savings { color:var(--success); font-weight:700; }
.staffel-table tbody tr.best { background:var(--orange-50); }

/* =========================================================================
   Forms
   ========================================================================= */
.field { margin-bottom:18px; }
.field > label { display:block; font-weight:700; font-size:13.5px; color:var(--fg-1); margin:0 0 7px; }
.field .hint { font-size:12px; color:var(--fg-2); margin-top:6px; }
.input, .field input, .field select, .field textarea { width:100%; font-family:var(--font-body); font-size:15px; padding:12px 14px;
  border:1.5px solid var(--border-2); border-radius:var(--radius-md); color:var(--fg-1); background:#fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline:none; border-color:var(--pos-blue); box-shadow:0 0 0 3px var(--blue-100); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row.thirds { grid-template-columns:1fr 2fr; }
.req { color:var(--pos-orange); }
.checkrow { display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--fg-1); line-height:1.5; }
.checkrow input { margin-top:2px; width:18px; height:18px; accent-color:var(--pos-orange); flex:none; }

/* Quantity stepper */
.qty { display:inline-flex; align-items:center; border:1.5px solid var(--border-2); border-radius:var(--radius-pill); overflow:hidden; }
.qty button { background:#fff; border:none; width:42px; height:44px; color:var(--pos-blue); display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast); }
.qty button:hover { background:var(--blue-50); }
.qty input { width:52px; height:44px; border:none; text-align:center; font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--fg-1); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* =========================================================================
   Accordion (FAQ / product tabs)
   ========================================================================= */
.accordion { display:flex; flex-direction:column; gap:12px; }
.acc-item { border:1px solid var(--border-1); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition: all var(--dur-base) var(--ease-standard); }
.acc-item.open { border-color:var(--blue-200); box-shadow:var(--shadow-sm); }
.acc-q { width:100%; text-align:left; background:none; border:none; padding:19px 22px; font-weight:700; font-size:16px; color:var(--pos-blue);
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.acc-q .chev { width:13px; height:13px; border-right:2.4px solid var(--pos-blue); border-bottom:2.4px solid var(--pos-blue); transform:rotate(45deg); transition:transform var(--dur-base) var(--ease-standard); flex:none; margin-right:4px; }
.acc-item.open .acc-q .chev { transform:rotate(-135deg); }
.acc-a { max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease-standard); }
.acc-a-inner { padding:0 22px 20px; font-size:15px; color:var(--fg-2); line-height:1.65; }
.acc-a-inner p { margin:0 0 12px; } .acc-a-inner p:last-child { margin:0; }

/* =========================================================================
   Tabs (product detail)
   ========================================================================= */
.tabset { border-bottom:1px solid var(--border-1); display:flex; gap:4px; }
.tabset button { background:none; border:none; padding:14px 18px; font-weight:700; font-size:15px; color:var(--fg-2);
  border-bottom:3px solid transparent; margin-bottom:-1px; transition: all var(--dur-fast) var(--ease-standard); }
.tabset button.active { color:var(--pos-blue); border-bottom-color:var(--pos-orange); }
.tabset button:hover { color:var(--pos-blue); }
.tabpane { display:none; padding:26px 0; }
.tabpane.active { display:block; }
.prose { font-size:15px; line-height:1.7; color:var(--fg-1); }
.prose h3 { margin:24px 0 10px; }
.prose p { margin:0 0 14px; color:var(--fg-1); }
.prose ul { margin:0 0 16px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.prose ul li { display:flex; gap:10px; align-items:flex-start; }
.prose ul li svg.ic { width:18px; height:18px; color:var(--success); margin-top:2px; flex:none; }

/* =========================================================================
   Cart / checkout
   ========================================================================= */
.split { display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start; }
.summary { position:sticky; top:96px; border:1px solid var(--border-1); border-radius:var(--radius-lg); background:#fff; overflow:hidden; }
.summary h3 { font-family:var(--font-display); font-size:20px; color:var(--pos-blue); margin:0; padding:20px 24px 14px; }
.summary .sum-body { padding:0 24px 22px; }
.sum-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:14.5px; color:var(--fg-1); }
.sum-line .lbl { color:var(--fg-2); }
.sum-line.total { border-top:1.5px solid var(--border-1); margin-top:8px; padding-top:16px; }
.sum-line.total .lbl { color:var(--pos-blue); font-weight:700; font-size:16px; }
.sum-line.total .val { font-family:var(--font-display); font-size:26px; color:var(--pos-orange); }
.sum-vat { font-size:12px; color:var(--fg-2); margin-top:2px; }
.summary .sum-foot { padding:0 24px 24px; }
.voucher { display:flex; gap:8px; margin:0; }
.voucher input { flex:1; }

/* Collapsed by default — a full input+button row ate the top of the mobile
   cart before users ever reached the checkout button lower on the page. */
.voucher-toggle { margin:0 0 16px; }
.voucher-toggle summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:13.5px; color:var(--pos-blue); padding:4px 0; }
.voucher-toggle summary::-webkit-details-marker { display:none; }
.voucher-toggle summary::after { content:"›"; font-weight:700; transition:transform var(--dur-fast) var(--ease-standard); }
.voucher-toggle[open] summary::after { transform:rotate(90deg); }
.voucher-toggle .voucher { margin-top:10px; max-width:420px; }

/* Mengenänderung im Warenkorb wird per AJAX übernommen — der manuelle
   Button bleibt nur als No-JS-Fallback im DOM, sichtbar ausgeblendet
   sobald JS bereitsteht (siehe .js-cart-live in pos-shop.js). */
.js-cart-live button[name="update_cart"] { display:none; }
.summary.updating { opacity:.55; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-standard); }

.cart-item { display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:20px 0; border-bottom:1px solid var(--border-1); align-items:center; }
.cart-item:last-child { border-bottom:none; }
.cart-item .ph { width:96px; height:96px; border-radius:var(--radius-md); aspect-ratio:1; }
.cart-item .ci-info h4 { font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--pos-blue); margin:0 0 5px; }
.cart-item .ci-info .ci-meta { font-size:13px; color:var(--fg-2); margin:0 0 4px; }
.cart-item .ci-info .ci-stock { font-size:12.5px; color:var(--success); font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.cart-item .ci-right { display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.cart-item .ci-price { font-family:var(--font-display); font-size:20px; color:var(--pos-orange); }
.cart-item .ci-remove { background:none; border:none; color:var(--grey-400); display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:4px; }
.cart-item .ci-remove:hover { color:var(--error); }
.cart-item .ci-remove svg.ic { width:15px; height:15px; }

/* Checkout steps */
.steps-bar { display:flex; align-items:center; gap:0; margin:8px 0 36px; }
.cstep { display:flex; align-items:center; gap:11px; flex:1; }
.cstep .num { width:34px; height:34px; border-radius:999px; background:var(--grey-100); color:var(--fg-2); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-display); }
.cstep .ct { font-weight:700; font-size:14.5px; color:var(--fg-2); white-space:nowrap; }
.cstep.active .num { background:var(--pos-orange); color:#fff; }
.cstep.active .ct { color:var(--pos-blue); }
.cstep.done .num { background:var(--success); color:#fff; }
.cstep.done .ct { color:var(--fg-1); }
.cstep .line { flex:1; height:2px; background:var(--border-1); margin:0 14px; }
.cstep:last-child { flex:none; }

/* Payment / shipping option rows */
.optrow { display:flex; align-items:center; gap:14px; border:1.5px solid var(--border-2); border-radius:var(--radius-md); padding:16px 18px; cursor:pointer; transition: all var(--dur-fast) var(--ease-standard); margin-bottom:12px; }
.optrow:hover { border-color:var(--blue-200); }
.optrow.selected { border-color:var(--pos-orange); background:var(--orange-50); }
.optrow .radio { width:20px; height:20px; border-radius:999px; border:2px solid var(--border-2); flex:none; display:flex; align-items:center; justify-content:center; }
.optrow.selected .radio { border-color:var(--pos-orange); }
.optrow.selected .radio::after { content:""; width:10px; height:10px; border-radius:999px; background:var(--pos-orange); }
.optrow .opt-main { flex:1; }
.optrow .opt-main .ot { font-weight:700; font-size:15px; color:var(--pos-blue); }
.optrow .opt-main .od { font-size:13px; color:var(--fg-2); margin-top:2px; }
.optrow .opt-price { font-weight:700; color:var(--fg-1); font-size:15px; }
.optrow .opt-logo { font-weight:700; font-size:12px; color:var(--fg-2); background:var(--grey-50); border:1px solid var(--border-1); border-radius:6px; padding:5px 9px; }

/* =========================================================================
   Confirmation
   ========================================================================= */
.confirm-hero { text-align:center; padding:24px 0 8px; }
.confirm-hero .check-ring { width:96px; height:96px; margin:0 auto 22px; }
.confirm-hero h1 { font-family:var(--font-display); font-size:clamp(30px,3.4vw,44px); color:var(--pos-blue); margin:0 0 12px; letter-spacing:-.02em; }
.confirm-hero p { font-size:18px; font-weight:300; color:var(--fg-2); margin:0 auto; max-width:40em; line-height:1.6; }
.order-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden; }
.order-meta .om { background:#fff; padding:20px 22px; }
.order-meta .om .oml { font-size:12px; color:var(--fg-2); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:6px; }
.order-meta .om .omv { font-size:16px; color:var(--pos-blue); font-weight:700; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { background:var(--blue-800); color:#aebbd6; padding:60px 0 30px; margin-top:8px; }
.footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer .logo img { height:30px; margin-bottom:16px; }
.footer .blurb { font-size:14px; line-height:1.6; color:#8c9bd0; max-width:26em; margin:0 0 18px; }
.footer .pay-row { display:flex; gap:8px; flex-wrap:wrap; }
.footer .pay-pill { background:rgba(255,255,255,.1); color:#cdd8ee; font-size:11.5px; font-weight:700; padding:6px 11px; border-radius:6px; }
.footer h4, .footer .pos-h4 { color:#fff; font-size:15px; font-family:var(--font-body); font-weight:700; margin:0 0 16px; }
.footer ul, .footer nav ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer nav { margin:0; }
.footer a { color:#aebbd6; font-weight:400; font-size:14px; }
.footer a:hover { color:#fff; }
.footer .addr { display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.5; color:#aebbd6; }
.footer .addr svg.ic { width:16px; margin-top:1px; color:var(--pos-orange); }
.footer-b2b { font-size:12.5px; color:#5a6a8a; margin:32px 0 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }
.footer .bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:16px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#7e8eb0; }
.footer .bottom .fb-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer .bottom a { font-size:13px; }

/* =========================================================================
   Related products row
   ========================================================================= */
.rel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.rel-grid-wrap { position:relative; }

/* =========================================================================
   Legal / content document
   ========================================================================= */
.legal-layout { display:grid; grid-template-columns:248px 1fr; gap:48px; align-items:start; }
.legal-toc { position:sticky; top:96px; border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:8px; background:#fff; }
.legal-toc .toc-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-2); padding:10px 12px 6px; }
.legal-toc a { display:block; padding:8px 12px; border-radius:var(--radius-md); font-size:13.5px; font-weight:700; color:var(--fg-2); }
.legal-toc a:hover { background:var(--blue-50); color:var(--pos-blue); }
.legal-doc { max-width:760px; }
.legal-doc h2 { font-family:var(--font-display); font-size:24px; color:var(--pos-blue); margin:40px 0 14px; letter-spacing:-.01em; scroll-margin-top:96px; }
.legal-doc h2:first-child { margin-top:0; }
.legal-doc h3 { font-family:var(--font-body); font-weight:700; font-size:17px; color:var(--pos-blue); margin:24px 0 8px; }
.legal-doc p { font-size:15px; line-height:1.75; color:var(--fg-1); margin:0 0 14px; }
.legal-doc ul { margin:0 0 16px; padding-left:22px; }
.legal-doc ul li { font-size:15px; line-height:1.7; color:var(--fg-1); margin-bottom:7px; }
.legal-doc address { font-style:normal; font-size:15px; line-height:1.75; color:var(--fg-1); }
.legal-note { display:flex; gap:12px; background:var(--warning-bg); border:1px solid var(--orange-200); border-radius:var(--radius-md); padding:14px 18px; margin:0 0 28px; font-size:13.5px; color:var(--orange-700); line-height:1.55; }
.legal-note svg.ic { width:18px; height:18px; color:var(--pos-orange); flex:none; margin-top:1px; }
.legal-doc .updated { font-size:13px; color:var(--fg-2); margin-top:32px; padding-top:18px; border-top:1px solid var(--border-1); }
.def-table { width:100%; border-collapse:collapse; margin:0 0 18px; }
.def-table td { padding:9px 0; font-size:14.5px; vertical-align:top; border-bottom:1px solid var(--border-1); }
.def-table td:first-child { font-weight:700; color:var(--pos-blue); width:200px; }

@media (max-width:960px){ .legal-layout{ grid-template-columns:1fr; } .legal-toc{ position:static; } }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .usp-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
  .rel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .catnav, .utilbar .left { display:none; }
  .burger { display:inline-flex; }
  .search-toggle { display:inline-flex; }
  .hero .container { grid-template-columns:1fr; gap:32px; }
  .hero { padding:40px 0 44px; }
  .hero p.lead { font-size:17px; max-width:100%; }
  .shop-layout { grid-template-columns:1fr; }
  .filters { position:static; }
  .split { grid-template-columns:1fr; }
  .summary { position:static; }
  .finder { padding:28px 26px; }
  .finder .finder-in { grid-template-columns:1fr; gap:18px; }
  /* Below ~960px the select is forced to full width and wraps onto its own
     line — the pill shape (border-radius:999px) only works for a single-line
     bar, so switch to a normal rounded card once content stacks. */
  .finder .finder-form { flex-direction:column; align-items:stretch; gap:10px; border-radius:var(--radius-lg); padding:10px; }
  .finder .finder-form .select { width:100%; }
  .finder .finder-form .select select { min-width:0; width:100%; }
  .finder .finder-form .select::after { right:18px; }
  .finder .finder-form .btn { width:100%; }
  .order-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer .cols { grid-template-columns:1fr 1fr; gap:32px; }
  .lcard { grid-template-columns:160px 1fr; }
  .lcard .lcard-buy { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; border-top:1px solid var(--border-1); }
  .pdp { gap:28px; }
  .section { padding:52px 0; }
  .section-head { margin-bottom:28px; }
}
@media (max-width: 680px) {
  .container { padding:0 16px; }
  .tabset { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabset::-webkit-scrollbar { display:none; }
  .tabset button { flex-shrink:0; font-size:14px; padding:12px 14px; }
  /* Keep the stepper compact instead of stretching it full-width — a
     numeric input rarely needs more than 2 digits, and a full-width bar
     here looked oversized next to the "In den Warenkorb" button below it.
     min-width/min-height overrides needed since the ≤1024px touch-target
     rule (.quantity button { min-width:44px }) would otherwise force it
     back up. Now the default at all sizes — see .buy-actions further down. */
  .product-grid, .cat-grid, .product-grid.cols-3, .rel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .header .container { height:64px; gap:10px; }
  /* Hide only the header's inline searchbar (replaced by the search-toggle
     icon + #mobile-search panel below) — a bare ".searchbar" here also
     matched the searchbar *inside* #mobile-search, collapsing it to 0×0
     and making the "open" panel invisible and untypeable. */
  .header .searchbar { display:none; }
  .header .h-actions .act-label { display:none; }
  .header .logo img { height:30px; }
  .usp-strip { grid-template-columns:1fr; gap:16px; }
  .field-row { grid-template-columns:1fr; }
  .order-meta { grid-template-columns:1fr; }
  .footer .cols { grid-template-columns:1fr; gap:28px; }
  .footer { padding:44px 0 24px; }
  .section { padding:40px 0; }
  .section-head h2 { font-size:clamp(24px,5.5vw,32px); }
  .page-head { padding:18px 0 22px; }
  .page-head h1 { font-size:clamp(26px,6vw,36px); }
  .steps-bar .ct { display:none; }
  .lcard { grid-template-columns:1fr; }
  .lcard .ph { aspect-ratio:16/9; }
  .lcard .lcard-main { border-right:none; padding:16px 18px; }
  .lcard .lcard-buy { flex-direction:column; align-items:flex-start; gap:12px; padding:16px 18px; }
  .cart-item { grid-template-columns:72px 1fr; gap:12px; padding:16px 0; }
  .cart-item .ph { width:72px; height:72px; }
  .cart-item .ci-right { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .hero { padding:28px 0 36px; }
  .hero h1 { font-size:clamp(28px,7vw,40px); margin-bottom:14px; }
  .hero p.lead { font-size:16px; margin-bottom:20px; }
  .hero .cta-row { gap:10px; }
  .hero .ticks { gap:8px 16px; }
  .hero-panel { padding:22px 18px; }
  .hero-stack { gap:10px; }
  .finder { padding:22px 18px; border-radius:var(--radius-lg); }
  .pcard-body { padding:14px 14px 16px; }
  .pcard h3 { font-size:15px; }
  .pcard .price-main { font-size:22px; }
  .summary h3 { padding:16px 18px 12px; font-size:18px; }
  .summary .sum-body { padding:0 18px 18px; }
  .summary .sum-foot { padding:0 18px 18px; }
  .panel { padding:18px 16px; }
  .usp .usp-ic { width:40px; height:40px; }
  .utilbar { font-size:12px; }
  .utilbar .right { gap:14px; }
}
@media (max-width: 420px) {
  .product-grid, .cat-grid, .product-grid.cols-3, .rel-grid { grid-template-columns:minmax(0,1fr); }
  .hero-stack { grid-template-columns:1fr; }
  .steps-bar { gap:0; }
  .cstep .line { margin:0 8px; }
  .btn-lg { padding:14px 24px; font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto !important; animation:none !important; }
}

/* =========================================================================
   Grid blowout guard — any multi-column grid container's tracks default to
   minmax(auto,1fr), so a child with wide intrinsic content (long word, fixed
   width element) can force the whole grid wider than the viewport. Give
   every such container's direct children min-width:0 so content wraps
   instead of pushing the page into horizontal scroll.
   ========================================================================= */
.split > *, .pdp > *, .hero .container > *, .legal-layout > *, .faq-layout > *,
.contact-grid > *, .about-hero > *, .footer .cols > *, .finder .finder-in > *,
.lcard > *, .field-row > * { min-width:0; }

/* =========================================================================
   Tablet refinements (768–1024px) — portrait/landscape tablet, between the
   general 1100px tier above and the 680px phone tier below.
   ========================================================================= */
@media (min-width: 681px) and (max-width: 1024px) {
  .product-grid, .product-grid.cols-3, .cat-grid, .rel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .shop-layout { grid-template-columns:1fr; }
  .filters { position:static; }
  .filter-card { margin-bottom:8px; }
  .pdp { grid-template-columns:1fr; gap:32px; }
  .gallery.has-thumbs { grid-template-columns:64px 1fr; }
  .header .container { height:72px; }
  .hero .container { grid-template-columns:1fr; gap:36px; }
  .hero-visual { max-width:520px; margin:0 auto; width:100%; }
  .lcard { grid-template-columns:180px 1fr; }
  .co-block { padding:20px 20px; }
}

/* =========================================================================
   Touch targets — icon buttons under the ~44px minimum tap size get more
   hit-area on touch-capable viewports, without changing their visual size.
   ========================================================================= */
@media (max-width: 1024px) {
  .burger, .search-toggle, .iconbtn { min-width:44px; min-height:44px; }
  .qty button, .quantity button { min-width:44px; }
  .var-pill, .chip { min-height:40px; }
}

/* =========================================================================
   Mobile form fixes — WooCommerce/Crefopay markup we don't control the
   HTML for, only reachable via CSS.
   ========================================================================= */
@media (max-width: 680px) {
  /* checkout first/last-name pairs: stop cramming two fields per row */
  .form-row-first, .form-row-last { width:100%; margin-right:0; }
  /* crefopay Geburtsdatum TT/MM/JJJJ selects: wrap instead of overflow */
  .cp-input-group { flex-wrap:wrap; }
  .cp-input-group .cp-custom-select { flex:1 1 80px; max-width:none; }
  .cp-input-group .cp-custom-select:last-of-type { max-width:none; }
}

/* Tables (Staffelpreise, technische Daten) scroll horizontally instead of
   squeezing columns or breaking the page layout on narrow screens. */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 680px) {
  .table-scroll .staffel-table { min-width:480px; }
  .table-scroll .staffel-table th, .table-scroll .staffel-table td { padding:9px 10px; font-size:13px; }
}

/* =========================================================================
   "Passt dazu" (related products) — swipeable carousel on tablet/mobile:
   2 cards fully visible, a sliver of the next card plus a fade at the edge
   signal there's more to scroll, snap-scrolling makes swiping feel precise.
   ========================================================================= */
@media (max-width: 1024px) {
  .rel-grid {
    display:flex; grid-template-columns:none; overflow-x:auto; gap:14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px; margin:0 -28px; padding-left:28px; padding-right:28px;
  }
  .rel-grid::-webkit-scrollbar { display:none; }
  .rel-grid > .card-link { flex:0 0 calc(46% - 7px); scroll-snap-align:start; min-width:0; }
  .rel-grid-wrap::after {
    content:""; position:absolute; top:0; right:0; bottom:2px; width:36px;
    background:linear-gradient(to right, rgba(255,255,255,0), var(--white));
    pointer-events:none;
  }
  .section.tint .rel-grid-wrap::after { background:linear-gradient(to right, rgba(247,248,250,0), var(--grey-50)); }
}
@media (max-width: 680px) {
  .rel-grid { margin:0 -16px; padding-left:16px; padding-right:16px; gap:10px; }
  .rel-grid > .card-link { flex:0 0 calc(48% - 5px); }
}

/* =========================================================================
   WooCommerce integration layer
   ========================================================================= */
.pos-shop-main { background:var(--bg-page); color:var(--fg-1); font-family:var(--font-body); }
.pos-shop-main .woocommerce-notices-wrapper, .woocommerce-notices-wrapper { max-width:1240px; margin:0 auto; padding:0 28px; }
.woocommerce-message { display:none !important; }
.woocommerce-info, .woocommerce-error { border:1px solid var(--border-1); border-left:4px solid var(--pos-orange); border-radius:var(--radius-md); background:#fff; color:var(--fg-1); line-height:1.5; margin:18px 0; padding:14px 18px; }
.woocommerce-error { border-left-color:var(--error); }
.pdp { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.gallery { display:grid; grid-template-columns:1fr; gap:14px; }
.gallery.has-thumbs { grid-template-columns:74px 1fr; }
.gallery .thumbs { display:flex; flex-direction:column; gap:10px; }
.gallery .thumb { aspect-ratio:1; border:1.5px solid var(--border-2); border-radius:var(--radius-md); overflow:hidden; background:#fff;
  padding:0; cursor:pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
.gallery .thumb:hover { border-color:var(--grey-400); }
.gallery .thumb.active { border-color:var(--pos-orange); }
.ph img { width:100%; height:100%; object-fit:contain; display:block; }
.gallery .thumb img, .gallery .main-img img { width:100%; height:100%; object-fit:contain; display:block; }
.gallery .main-img { aspect-ratio:4/3; border:1px solid var(--border-1); border-radius:var(--radius-xl); overflow:hidden; display:flex; align-items:center; justify-content:center; background:#fff; }
.gallery .main-img img { width:100%; height:100%; object-fit:contain; transition: opacity var(--dur-base) var(--ease-standard); }
.buybox h1 { font-family:var(--font-display); font-size:clamp(26px,2.8vw,34px); color:var(--pos-blue); margin:8px 0 12px; letter-spacing:-.01em; line-height:1.12; }
.buybox .sub { font-size:15px; color:var(--fg-2); line-height:1.6; margin:0 0 18px; }
.pdp-badges, .compat-chips { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
/* "Passt zu Ihrem Terminal" is informational, not a selected option — the
   solid-blue .chip.active fill read as an active filter/variant choice.
   Softer tint keeps the checkmark meaning without that implication. */
.compat-chips .chip.compat-chip { background:var(--blue-50); border-color:var(--blue-100); color:var(--pos-blue); font-weight:600; }
.compat-chips .chip.compat-chip svg.ic { color:var(--success); width:15px; height:15px; }
.compat-chips .chip.compat-chip:hover { border-color:var(--blue-100); color:var(--pos-blue); }
.pdp-price { display:flex; align-items:baseline; gap:12px; margin:18px 0 4px; }
.pdp-price .p, .pdp-price .amount, .pdp-price .woocommerce-Price-amount { font-family:var(--font-display); font-size:40px; color:var(--pos-orange); line-height:1; }
.pdp-price del { font-size:22px; color:var(--fg-2); opacity:.7; text-decoration:line-through; margin-right:6px; }
.pdp-price del .woocommerce-Price-amount { font-size:22px; color:var(--fg-2); }
.pdp-price ins { text-decoration:none; }
.pdp-price .per, .pdp-vat { font-size:13px; color:var(--fg-2); }
.staffel-wrap { margin:0 0 22px; }
.staffel-title { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--pos-blue); margin-bottom:10px; }
/* Stepper + "In den Warenkorb" stacked on their own lines (all sizes) — a
   side-by-side row made the button compete for attention with the qty
   input instead of reading as the primary action. */
.buy-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:6px 0 22px; }
.buy-actions .btn { width:100%; }
.buy-actions .quantity { width:auto; min-height:44px; }
.buy-actions .quantity input.qty { flex:none; width:48px; }
.buy-actions .quantity button { width:40px; height:42px; min-width:40px; }
.quantity, .qty { display:inline-flex; align-items:center; border:1.5px solid var(--border-2); border-radius:var(--radius-pill); background:#fff; min-height:46px; overflow:hidden; }
.quantity input.qty, .qty input { width:60px; border:0; text-align:center; font-weight:700; font-size:16px; color:var(--pos-blue); min-height:44px; background:transparent; -moz-appearance:textfield; }
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty button, .quantity button { width:42px; height:44px; border:0; background:transparent; color:var(--pos-blue); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.quantity button:hover { background:var(--blue-50); }
.assur { display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--border-1); padding-top:20px; margin-top:4px; }
.assur .ar { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--fg-1); }
.assur .ar svg.ic { width:20px; height:20px; color:var(--pos-orange); flex:none; }
.out-of-stock { font-size:15px; color:var(--error); font-weight:700; margin:14px 0; }
.cart-panel { padding:4px 24px; }
.cart-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px; }
.free-note { display:flex; align-items:center; gap:10px; background:var(--orange-50); border:1px solid var(--orange-200); border-radius:var(--radius-md); padding:12px 16px; font-size:13.5px; color:var(--orange-700); margin:0 0 18px; }
.woocommerce-cart-form .summary .cart_totals h2 { display:none; }
.woocommerce-cart-form .summary table, .checkout-summary table { width:100%; }
.woocommerce-cart-form .summary th, .woocommerce-cart-form .summary td, .checkout-summary th, .checkout-summary td { border-bottom:1px solid var(--border-1); padding:12px 0; vertical-align:top; font-size:14px; }
.woocommerce-cart-form .summary td, .checkout-summary td { text-align:right; font-weight:700; color:var(--fg-1); }
/* hide WC's own checkout/cart total blocks – we render them manually */
.wc-proceed-to-checkout { display:none; }
.checkout-summary .woocommerce-checkout-review-order-table { display:none; }
.checkout-summary .shop_table.woocommerce-checkout-review-order-table { display:none; }
.checkout-summary .woocommerce-shipping-totals { display:none; }
.checkout-summary .cart-subtotal, .checkout-summary .order-total,
.checkout-summary .tax-total { display:none; }
.checkout-summary thead { display:none; }

/* Notices injected directly into .split grid by WC JS → always full-width */
.split > .woocommerce-notices-wrapper,
.split > .woocommerce-NoticeGroup,
.split > .woocommerce-NoticeGroup-checkout,
.split > .woocommerce-error,
.split > .woocommerce-info,
.split > .woocommerce-message { grid-column: 1 / -1; width: 100%; }

/* Coupon toggle notice styling */
.woocommerce-info { border:1px solid var(--border-1); border-left:4px solid var(--pos-blue); border-radius:var(--radius-md); background:#fff; color:var(--fg-1); line-height:1.5; margin:0 0 18px; padding:14px 18px; font-size:14px; }
.woocommerce-info a { color:var(--pos-blue); font-weight:600; }
.checkout_coupon { margin-top:12px; display:flex; gap:10px; max-width:520px; }
.checkout_coupon .input-text { max-width:260px; }
.checkout_coupon .button { padding:11px 22px; background:var(--pos-orange); color:#fff; font-weight:700; border-radius:var(--radius-pill); border:none; cursor:pointer; font-size:14px; white-space:nowrap; }

/* Checkout field tooltip (desc_tip) */
.woocommerce-help-tip {
	display:inline-flex; align-items:center; justify-content:center;
	width:16px; height:16px; border-radius:999px;
	background:var(--grey-200); color:var(--fg-2);
	font-size:11px; font-weight:700; font-style:normal;
	cursor:help; margin-left:5px; flex:none; vertical-align:middle;
	position:relative;
}
.woocommerce-help-tip::after {
	content: attr(data-tip);
	position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
	background:var(--pos-blue); color:#fff; font-size:12px; font-weight:400;
	padding:6px 10px; border-radius:var(--radius-md); white-space:nowrap;
	pointer-events:none; opacity:0; transition:opacity .15s;
	box-shadow:var(--shadow-md);
}
.woocommerce-help-tip:hover::after { opacity:1; }

/* "Lieferung an andere Adresse" checkbox — WC renders as h3, reset to normal label size */
#ship-to-different-address { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--fg-1); margin:0 0 4px; display:flex; align-items:center; gap:8px; cursor:pointer; }
#ship-to-different-address input[type="checkbox"] { accent-color:var(--pos-orange); width:16px; height:16px; flex:none; margin:0; cursor:pointer; }

/* co-block checkout sections */
.co-block { border:1px solid var(--border-1); border-radius:var(--radius-lg); background:#fff; padding:24px 26px; margin-bottom:18px; }
.co-block > h3 { font-family:var(--font-display); font-size:20px; color:var(--pos-blue); margin:0 0 18px; display:flex; align-items:center; gap:11px; }
.co-block > h3 .n { width:30px; height:30px; border-radius:999px; background:var(--pos-blue); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; }

/* WC form fields */
.field label, .form-row label, .woocommerce-input-wrapper { display:block; }
.form-row { margin:0 0 16px; }
.form-row label, .field label { font-weight:700; font-size:13px; color:var(--pos-blue); margin-bottom:7px; }
.input-text, .input, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, textarea { width:100%; border:1.5px solid var(--border-2); border-radius:var(--radius-md); min-height:46px; padding:11px 13px; font:inherit; color:var(--fg-1); background:#fff; transition:border-color var(--dur-fast); }
.input-text:focus, .input:focus { outline:none; border-color:var(--pos-blue); box-shadow:0 0 0 3px var(--blue-100); }
textarea { min-height:110px; }
.woocommerce-validated .input-text, .woocommerce-validated .input { border-color:var(--success); }
.woocommerce-invalid .input-text, .woocommerce-invalid .input { border-color:var(--error); }
/* Field-level error message below input */
.woocommerce-invalid .woocommerce-error, .form-row .woocommerce-error { font-size:12px; color:var(--error); margin:4px 0 0; padding:0; border:none; background:none; list-style:none; display:block; }
/* Error summary hidden — red field borders are sufficient feedback */
.woocommerce-error { display:none !important; }

/* payment block in sidebar */
.woocommerce-checkout-payment { margin-top:8px; }
.wc_payment_methods { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:10px; }
.wc_payment_method { border:1.5px solid var(--border-2); border-radius:var(--radius-md); padding:14px 16px; cursor:pointer; transition:border-color var(--dur-fast); background:#fff; }
.wc_payment_method:has(input:checked) { border-color:var(--pos-orange); background:var(--orange-50); }
.wc_payment_method > label { font-weight:700; color:var(--pos-blue); cursor:pointer; display:flex; align-items:center; gap:10px; margin:0; }
.wc_payment_method > label img { max-height:24px; width:auto; border-radius:4px; }
.wc_payment_method input[type="radio"] { accent-color:var(--pos-orange); width:16px; height:16px; flex:none; margin:0; }
.payment_box { font-size:13px; color:var(--fg-2); padding:12px 0 4px 26px; line-height:1.6; }
.payment_box p { margin:0 0 8px; }
/* WC checkout form rows — 2-column layout for first/last pairs */
.form-row-first, .form-row-last { display:inline-block; width:calc(50% - 6px); }
.form-row-first { margin-right:12px; }
.form-row-wide { width:100%; }
/* crefopay Lastschrift fieldset reset */
.wc-payment-form, .wc-crefo-debit-form { border:none; padding:0; margin:0; }

/* crefopay inputs without input-text class */
.wc-payment-form input[type="text"],
.wc-payment-form input[type="tel"],
.wc-payment-form .data-crefopay {
	width:100%; border:1.5px solid var(--border-2); border-radius:var(--radius-md);
	min-height:46px; padding:11px 13px; font:inherit; color:var(--fg-1);
	background:#fff; transition:border-color var(--dur-fast);
}
.wc-payment-form input[type="text"]:focus,
.wc-payment-form .data-crefopay:focus { border-color:var(--pos-blue); outline:none; }

/* crefopay inline input groups (Geburtsdatum: TT MM JJJJ nebeneinander) */
.cp-input-group { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
.cp-input-group .cp-custom-select { border:1.5px solid var(--border-2); border-radius:var(--radius-md); padding:10px 8px; font:inherit; color:var(--fg-1); background:#fff; min-height:46px; width:auto; flex:1; min-width:60px; max-width:90px; }
.cp-input-group .cp-custom-select:last-of-type { max-width:110px; } /* Jahr etwas breiter */
.cp-input-group-text { font-size:13px; color:var(--fg-2); font-weight:600; white-space:nowrap; }

/* crefopay form-row label inside payment_box */
.payment_box .form-row label { font-weight:700; font-size:13px; color:var(--pos-blue); margin-bottom:7px; display:block; }
.payment_box .form-row select { width:100%; border:1.5px solid var(--border-2); border-radius:var(--radius-md); min-height:46px; padding:11px 13px; font:inherit; color:var(--fg-1); background:#fff; }
.woocommerce-terms-and-conditions-wrapper { font-size:13px; color:var(--fg-2); margin:12px 0; }
.woocommerce-terms-and-conditions-wrapper a { color:var(--pos-blue); }
#place_order {
  display:flex; width:100%; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:700; font-size:16px; line-height:1;
  padding:16px 24px; margin-top:8px;
  background:var(--pos-orange); color:#fff; border:1.5px solid transparent;
  border-radius:var(--radius-pill); cursor:pointer; text-decoration:none;
  transition: all var(--dur-base) var(--ease-standard);
}
#place_order:hover { background:var(--orange-600); box-shadow:var(--shadow-orange); transform:translateY(-1px); }
#place_order:active { transform:translateY(0) scale(.99); }

/* mini items in checkout sidebar */
.mini-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-1); font-size:13.5px; }
.mini-item:last-of-type { border-bottom:none; }
.mini-item .mi-q { width:24px; height:24px; border-radius:6px; background:var(--blue-50); color:var(--pos-blue); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.mini-item .mini-ph { width:48px; height:48px; border-radius:8px; flex:none; aspect-ratio:1; }
.mini-item .mi-name { flex:1; font-weight:700; color:var(--pos-blue); }
.mini-item .mi-name span { display:block; font-weight:400; color:var(--fg-2); font-size:12px; }
.mini-item .mi-price { font-weight:700; color:var(--fg-1); white-space:nowrap; }

/* Thank-you / confirmation page */
.confirm-hero { text-align:center; padding:24px 0 8px; }
.confirm-hero .check-ring { width:96px; height:96px; margin:0 auto 22px; }
.confirm-hero h1 { font-family:var(--font-display); font-size:clamp(30px,3.4vw,44px); color:var(--pos-blue); margin:0 0 12px; letter-spacing:-.02em; }
.confirm-hero p { font-size:18px; font-weight:300; color:var(--fg-2); margin:0 auto; max-width:40em; line-height:1.6; }
.order-meta { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden; }
.order-meta .om { background:#fff; padding:20px 22px; }
.order-meta .om .oml { font-size:12px; color:var(--fg-2); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:6px; }
.order-meta .om .omv { font-size:16px; color:var(--pos-blue); font-weight:700; }
.next-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:8px; }
.ns { border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:22px; background:#fff; }
.ns .ns-ic { width:46px; height:46px; border-radius:var(--radius-md); background:var(--blue-50); color:var(--pos-blue); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ns .ns-ic svg.ic { width:22px; height:22px; }
.ns h4 { font-family:var(--font-body); font-weight:700; font-size:15px; color:var(--pos-blue); margin:0 0 6px; }
.ns p { font-size:13.5px; color:var(--fg-2); line-height:1.55; margin:0; }

.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }

@media (max-width:960px) {
  .pdp, .account-grid { grid-template-columns:1fr; }
  .gallery, .gallery.has-thumbs { grid-template-columns:1fr; grid-template-rows:auto auto; gap:10px; }
  .gallery .thumbs { flex-direction:row; order:2; gap:8px; }
  .gallery .thumb { width:64px; height:64px; flex:none; }
  .gallery .main-img { aspect-ratio:4/3; order:1; }
  .cart-actions { align-items:stretch; flex-direction:column; }
  .cart-actions .btn, .voucher { width:100%; }
  .order-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .next-steps { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .order-meta { grid-template-columns:1fr; }
  .next-steps { grid-template-columns:1fr; }
  .steps-bar .ct { display:none; }
  .steps-bar { gap:0; }
  .cstep .line { margin:0 8px; }
}

/* =========================================================================
   FAQ page
   ========================================================================= */
.faq-layout { display:grid; grid-template-columns:230px 1fr; gap:40px; align-items:start; }
.faq-toc { position:sticky; top:96px; display:flex; flex-direction:column; gap:4px; }
.faq-toc a { padding:10px 14px; border-radius:var(--radius-md); font-size:14px; font-weight:700; color:var(--fg-2); }
.faq-toc a:hover, .faq-toc a.active { background:var(--blue-50); color:var(--pos-blue); }
.faq-group { margin-bottom:36px; }
.faq-group > h2 { font-family:var(--font-display); font-size:24px; color:var(--pos-blue); margin:0 0 16px; letter-spacing:-.01em; scroll-margin-top:96px; }
@media (max-width:960px) {
  .faq-layout { grid-template-columns:1fr; }
  .faq-toc { position:static; flex-direction:row; flex-wrap:wrap; }
}

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start; }
.contact-cards { display:flex; flex-direction:column; gap:14px; }
.cc { display:flex; gap:16px; align-items:flex-start; border:1px solid var(--border-1); border-radius:var(--radius-lg); padding:20px 22px; background:#fff; }
.cc .cc-ic { width:48px; height:48px; border-radius:var(--radius-md); background:var(--orange-50); color:var(--pos-orange); display:flex; align-items:center; justify-content:center; flex:none; }
.cc h4 { font-family:var(--font-body); font-weight:700; font-size:16px; color:var(--pos-blue); margin:0 0 4px; }
.cc p { font-size:14px; color:var(--fg-2); line-height:1.55; margin:0; }
@media (max-width:960px) { .contact-grid { grid-template-columns:1fr; gap:28px; } }

/* =========================================================================
   About page
   ========================================================================= */
.about-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.about-hero .ph { aspect-ratio:4/3; border-radius:var(--radius-xl); }
.stat-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--border-1); border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden; }
.stat-row .st { background:#fff; padding:26px 24px; text-align:center; }
.stat-row .st .n { font-family:var(--font-display); font-size:36px; color:var(--pos-orange); line-height:1; }
.stat-row .st .l { font-size:13px; color:var(--fg-2); margin-top:8px; }
.values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.val .v-ic { width:56px; height:56px; border-radius:var(--radius-lg); background:var(--orange-50); color:var(--pos-orange); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.val .v-ic svg.ic { width:28px; height:28px; }
.val h3 { font-family:var(--font-display); font-size:20px; color:var(--pos-blue); margin:0 0 8px; }
.val p { font-size:14.5px; color:var(--fg-2); line-height:1.6; margin:0; }
@media (max-width:960px) { .about-hero { grid-template-columns:1fr; gap:30px; } .stat-row { grid-template-columns:1fr 1fr; } .values { grid-template-columns:1fr; } }

/* =========================================================================
   List/grid toggle (viewtoggle already present; this keeps parity)
   ========================================================================= */
.viewtoggle a { padding:9px 14px; color:var(--fg-2); display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; }
.viewtoggle a.active { background:var(--pos-blue); color:#fff; }

/* =========================================================================
   Variable product – Packungsgröße swatches
   ========================================================================= */
.variations_form { margin-top:22px; }
.var-group { margin-bottom:14px; }
.var-label { display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-2); margin-bottom:8px; }
.var-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.var-pill { padding:9px 18px; border-radius:var(--radius-md); border:2px solid var(--border-1); background:#fff; font-size:14px; font-weight:600; color:var(--fg-1); cursor:pointer; transition:border-color .14s,background .14s,color .14s; line-height:1.2; }
.var-pill:hover { border-color:var(--pos-blue); color:var(--pos-blue); }
.var-pill.active { border-color:var(--pos-orange); background:var(--orange-50); color:var(--pos-orange); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* WC variation price container – hidden; price is routed into #pdp-price-static via JS */
.single_variation { display:none !important; }

/* Add-to-cart wrapper for variable products */
.woocommerce-variation-add-to-cart { margin-top:16px; }
.woocommerce-variation-add-to-cart.buy-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.woocommerce-variation-add-to-cart .btn[disabled],
.single_add_to_cart_button.disabled { opacity:.45; cursor:not-allowed; }

/* Static price hidden once variation selected – handled via JS class */
.pdp-price.hidden { display:none; }

/* ---- Cart toast notification ---- */
#cart-toast {
  position:fixed; bottom:28px; right:28px; z-index:9999;
  display:flex; align-items:center; gap:12px;
  background:var(--pos-blue); color:#fff;
  padding:14px 20px; border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(10,30,68,.22);
  font-size:14.5px; font-weight:600;
  transform:translateY(120%) scale(.96); opacity:0;
  transition:transform .32s var(--ease-standard), opacity .32s var(--ease-standard);
  pointer-events:none;
}
#cart-toast.show {
  transform:translateY(0) scale(1); opacity:1;
  pointer-events:auto;
}
#cart-toast .ct-icon { color:var(--pos-orange); flex-shrink:0; line-height:1; }
#cart-toast .ct-icon svg { width:20px; height:20px; }
#cart-toast .ct-link {
  color:var(--pos-orange); text-decoration:none; font-weight:700;
  white-space:nowrap; margin-left:4px;
}
#cart-toast .ct-link:hover { text-decoration:underline; }

/* Cart badge bounce on add */
@keyframes cart-badge-pop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.55); }
  70%  { transform:scale(.88); }
  100% { transform:scale(1); }
}
.cart-badge.pop { animation:cart-badge-pop .38s var(--ease-standard) forwards; }