/* ==========================================================================
   МАГАЗИН И КОРЗИНА — общий компонент для главной и /shop/.
   Токены прототипа заменены на общие из spec/30 §1.6.
   ========================================================================== */
/* ---------- shop ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{padding:10px 19px;border:1.5px solid var(--c-line-2);border-radius:100px;font-size:.88rem;font-weight:600;color:var(--c-slate);background:#fff;transition:all .2s}
.chip:hover{border-color:var(--c-ink);color:var(--c-ink)}
.chip.on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.prod{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--e-out),box-shadow .35s}
.prod:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.prod.hide{display:none}
.prod-art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(180deg,#F2F4F7,#FAFBFC)}
.prod-art .art{width:42%;height:auto;color:#7A828F;stroke-width:2}
.badge{position:absolute;top:13px;left:13px;padding:6px 12px;border-radius:100px;font:700 .68rem/1 var(--font-b);letter-spacing:.05em;text-transform:uppercase}
.badge-best{background:var(--c-ink);color:#fff}
.badge-sale{background:var(--c-red);color:#fff}
.prod-info{padding:19px;display:flex;flex-direction:column;gap:5px;flex:1}
.prod-cat{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-red)}
.prod-name{font-size:1rem;font-weight:700;font-family:var(--font-b);line-height:1.35}
.prod-spec{font-size:.83rem;color:var(--c-slate-2)}
.prod-foot{margin-top:auto;padding-top:15px;display:flex;justify-content:space-between;align-items:center}
.price{font:800 1.12rem/1 var(--font-d);letter-spacing:-.01em}
.price small{display:block;margin-top:4px;font:400 .68rem/1 var(--font-b);color:var(--c-slate-2)}
/* Price component (mg_price_block) — shared by the grid card and the PDP.
   .price-row wraps so a long "129,00 € statt 159,00 € −19 %" set drops the
   chip to a second line instead of pushing the round add button off-card. */
.price-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.price-was{font:600 .8rem/1 var(--font-b);color:var(--c-slate-2);text-decoration:line-through;text-decoration-thickness:1.5px}
.price-off{padding:3px 7px;border-radius:100px;background:var(--c-red);color:#fff;font:700 .64rem/1 var(--font-b);letter-spacing:.03em;white-space:nowrap}
.price-save{font-weight:700;color:var(--c-red)}
.add{width:42px;height:42px;border-radius:100px;background:var(--c-ink);color:#fff;display:grid;place-items:center;font-size:1.2rem;transition:all .2s}
.add:hover{background:var(--c-red);color:#fff;box-shadow:var(--sh-red)}
.add.done{background:var(--c-green);color:#fff}
.shop-foot{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.shop-note{display:flex;align-items:center;gap:10px;color:var(--c-slate);font-size:.9rem}
.shop-note .icon{color:var(--c-green);font-size:1.15rem}
@media(max-width:1023px){.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.prod-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- floating ---------- */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;font-size:1.75rem;box-shadow:0 12px 32px rgba(37,211,102,.4);transition:transform .2s var(--e-out)}
.wa-float:hover{transform:scale(1.08)}
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid var(--c-line);box-shadow:0 -10px 30px rgba(23,26,32,.06)}
@media(max-width:767px){.mcta{display:grid}.wa-float{bottom:92px;right:14px}footer{padding-bottom:80px}}

/* ==========================================================================
   MAGARAGE SHOP-ENGINE — Katalog, PDP, Reservierung (cart), Checkout.
   Ergänzt die Drawer/Karten-Basis oben; Tokens aus base.css.
   Grids: immer minmax(0,1fr), nie nacktes 1fr (Regel aus spec/30).
   ========================================================================== */

/* ---------- Karten-Feinschliff (server-gerenderte Karten) ---------- */
a.prod-art{display:grid;place-items:center;text-decoration:none}
.prod-art .art-img{max-width:70%;max-height:78%;object-fit:contain}
.prod-name a{color:inherit;text-decoration:none;transition:color .15s}
.prod-name a:hover{color:var(--c-red-ink)}
.prod-name a:focus-visible{outline:2px solid var(--c-focus-light);outline-offset:2px;border-radius:4px}
.badge-new{background:var(--c-green);color:#fff}
.badge-act{background:var(--c-red);color:#fff}
.price--request{font-size:.98rem;line-height:1.2}
.prod-oos{font-size:.78rem;font-weight:600;color:var(--c-slate-2)}
.add:focus-visible{outline:2px solid var(--c-focus-light);outline-offset:2px}
.shop-bottom-note{margin-top:var(--sp-6)}

/* ---------- Chips als Links (Server-Kategorien) ---------- */
a.chip-btn{text-decoration:none;color:var(--c-slate);display:inline-flex;align-items:center}
.chip-btn.is-on,.chip-btn[aria-current="page"]{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

/* ---------- Leerzustand + Pagination ---------- */
.shop-empty{padding:56px 0;text-align:center;color:var(--c-slate-2);display:flex;flex-direction:column;align-items:center;gap:14px}
.shop-empty .icon{font-size:2.6rem;color:var(--c-slate-2)}
.pagi{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.pagi-link{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--c-line-2);border-radius:100px;font-size:.9rem;font-weight:600;color:var(--c-slate);text-decoration:none;transition:all .2s}
.pagi-link:hover{border-color:var(--c-ink);color:var(--c-ink)}
.pagi-link.is-on{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.pagi-dots{color:var(--c-slate-2)}

/* ---------- PDP ---------- */
.pdp{padding-top:calc(var(--sec-y) * .55)}
.pdp .crumbs{margin-bottom:var(--sp-6)}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-10);align-items:start}
.pdp-art{position:relative;border:1px solid var(--c-line);border-radius:var(--r-2xl);aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(180deg,#F2F4F7,#FAFBFC)}
.pdp-art .art{width:38%;height:auto;color:#7A828F;stroke-width:1.6}
.pdp-art img{max-width:80%;max-height:82%;object-fit:contain}
.pdp-art .badge{top:18px;left:18px}
.pdp-cat{display:inline-block;margin-bottom:var(--sp-3);text-decoration:none}
.pdp-cat:hover{text-decoration:underline;text-underline-offset:3px}
.pdp-title{font-size:var(--fs-d2);line-height:1.12;margin:0 0 var(--sp-4)}
.pdp-desc{color:var(--c-slate);line-height:var(--lh-relaxed);margin:0 0 var(--sp-6);max-width:56ch}
.pdp-price{margin-bottom:var(--sp-6)}
.pdp-price .price{display:block;font:800 1.7rem/1.1 var(--font-d);letter-spacing:-.01em}
.pdp-price .price--request{font-size:1.35rem}
.pdp-price small{display:block;margin-top:6px;font-size:.8rem;color:var(--c-slate-2)}
.pdp-price .price-row{gap:10px}
.pdp-price .price-was{font-size:1.02rem}
.pdp-price .price-off{font-size:.72rem;padding:5px 10px}
.pdp-buy{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.pdp-buy .qty{background:#fff}
.pdp-buy .product-qty{display:flex;align-items:center}
.pdp-buy .product-qty button{width:44px;height:52px}
.pdp-add{flex:1 1 220px;justify-content:center}
.pdp-add.done{background:var(--c-green)}
.pdp-oos{display:flex;gap:10px;align-items:center;padding:14px 18px;border:1.5px solid var(--c-amber);border-radius:var(--r-xl);background:#FFF8E8;color:var(--c-ink);font-size:.92rem;margin-bottom:var(--sp-6)}
.pdp-oos .icon{color:var(--c-amber);flex:0 0 auto}
.pdp-usps{list-style:none;margin:0 0 var(--sp-6);padding:0;display:flex;flex-direction:column;gap:10px}
.pdp-usps li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--c-slate)}
.pdp-usps .icon{color:var(--c-green);flex:0 0 auto;margin-top:2px}
.pdp-pickup{padding:18px 20px;border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-bg-alt);margin-bottom:var(--sp-6)}
.pdp-pickup h2{display:flex;gap:8px;align-items:center;font-size:1rem;font-weight:800;font-family:var(--font-b);margin:0 0 8px}
.pdp-pickup h2 .icon{color:var(--c-red)}
.pdp-pickup p{font-size:.9rem;color:var(--c-slate);margin:0 0 10px;line-height:1.6}
.pdp-content{margin-top:0}

/* ── Blocks below the fold: Datenblatt, Gut zu wissen, Werkstatt, Passt dazu ──
   These are what keeps a product page from being a thin page — the reason the
   shop spec originally argued against product URLs at all (docs/seo/pages/20). */
.pdp-block{margin-top:var(--sp-16)}
.sh-sm{margin-bottom:var(--sp-6)}
.sh-sm h2{font-size:var(--fs-d3)}

/* Two columns of dt/dd pairs; each pair is its own grid item so a long value
   never drags its label out of line. One column below 640px. */
.pdp-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0 var(--sp-12);margin:0;max-width:960px}
.pdp-specs > div{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:var(--sp-4);padding:13px 0;border-bottom:1px solid var(--c-line)}
.pdp-specs dt{color:var(--c-slate-2);font-size:.86rem;line-height:1.45}
.pdp-specs dd{margin:0;font-weight:600;font-size:.92rem;line-height:1.45;color:var(--c-ink)}
.pdp-content{max-width:72ch}

.pdp-service{margin-top:var(--sp-16);padding:var(--sp-8) var(--sp-10);border-radius:var(--r-2xl);background:var(--c-ink);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8);align-items:center}
.pdp-service h2{font-size:var(--fs-d3);margin:var(--sp-3) 0 var(--sp-3);color:#fff}
.pdp-service p{color:#C6CBD6;font-size:.95rem;line-height:var(--lh-relaxed);margin:0;max-width:58ch}
.pdp-service .kicker{color:#fff;opacity:.72}
.pdp-service-ctas{display:flex;flex-direction:column;gap:10px}
.pdp-service-ctas .btn{justify-content:center;white-space:nowrap}
/* base.css gives .btn-ghost `background:#fff`; without overriding it the white
   label on the dark card sat on a white button and was invisible. */
.pdp-service-ctas .btn-ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.pdp-service-ctas .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

.pdp-related{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

@media (max-width:900px){
  .pdp-service{grid-template-columns:minmax(0,1fr)}
  .pdp-service-ctas{flex-direction:row;flex-wrap:wrap}
  .pdp-service-ctas .btn{flex:1 1 200px}
}
@media (max-width:560px){
  .pdp-block{margin-top:var(--sp-12)}
  .pdp-service{margin-top:var(--sp-12);padding:var(--sp-6)}
  .pdp-specs > div{grid-template-columns:minmax(0,1fr);gap:2px;padding:11px 0}
}
@media(max-width:899px){.pdp-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}.pdp-art{aspect-ratio:16/10}}

/* ---------- Reservierungsseite (cart) ---------- */
.cartpage .crumbs,.co .crumbs{margin-bottom:var(--sp-6)}
.cart-h1{font-size:var(--fs-d2);margin-bottom:var(--sp-8)}
.cart-h1-count{display:inline-block;margin-left:10px;vertical-align:middle;font:600 .85rem/1 var(--font-b);color:var(--c-slate-2);letter-spacing:0}
.cart-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.cart-list{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2xl);padding:6px 22px 16px}
.cart-item{display:grid;grid-template-columns:84px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--c-line)}
.cart-item:last-of-type{border-bottom:0}
.ci-art{width:84px;height:64px;display:grid;place-items:center;border:1px solid var(--c-line);border-radius:var(--r-xl);background:linear-gradient(180deg,#F2F4F7,#FAFBFC)}
.ci-art .art{width:46%;height:auto;color:#7A828F;stroke-width:2.6}
.ci-art img{max-width:80%;max-height:80%;object-fit:contain}
.cart-item .ci-name{font-size:.95rem;font-weight:700;line-height:1.3;margin:0}
.cart-item .ci-name a{color:inherit;text-decoration:none}
.cart-item .ci-name a:hover{color:var(--c-red-ink)}
.cart-item .ci-price{font-size:.8rem;color:var(--c-slate);margin:3px 0 0}
.ci-perpiece{color:var(--c-slate-2)}
.ci-total{font:800 .98rem/1.2 var(--font-d);text-align:right;min-width:92px}
.ci-total--request{font:600 .8rem/1.3 var(--font-b);color:var(--c-slate)}
.cart-continue{padding:18px 0 6px;margin:0}
.cart-summary-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2xl);padding:24px}
.cart-summary-card h2{font-size:1.1rem;font-weight:800;margin:0 0 14px}
.cart-summary-card .total-row{border-top:1px solid var(--c-line);padding-top:14px}
.cart-summary-card .btn{width:100%;justify-content:center;margin-top:6px}
.cart-summary-card .pickup{margin-top:12px}
.cart-empty--page{padding:70px 0}
.cart-empty--page .btn{margin-top:6px}
@media(max-width:899px){.cart-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .cart-item{grid-template-columns:64px minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:10px}
  .ci-art{width:64px;height:52px;grid-row:1/3}
  .cart-item .qty{grid-column:2;grid-row:2;justify-self:start}
  .ci-total{grid-column:3;grid-row:2;align-self:center}
  .cart-item .ci-x{grid-column:3;grid-row:1;justify-self:end}
}

/* ---------- Checkout (Reservierung abschließen) ---------- */
.co-h1{font-size:var(--fs-d2);margin-bottom:var(--sp-3)}
.co-sub{color:var(--c-slate);max-width:64ch;margin-bottom:var(--sp-8)}
.co-error{display:flex;gap:10px;align-items:flex-start;padding:14px 18px;margin-bottom:var(--sp-6);border:1.5px solid var(--c-red);border-radius:var(--r-xl);background:var(--c-red-tint);color:var(--c-ink);font-size:.92rem}
.co-error .icon{color:var(--c-red);flex:0 0 auto;margin-top:2px}
.co-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.co-form{display:flex;flex-direction:column;gap:var(--sp-6)}
.co-block{border:1px solid var(--c-line);border-radius:var(--r-2xl);background:#fff;padding:22px 24px;margin:0}
.co-legend{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;font-family:var(--font-b);padding:0 6px;margin-left:-6px}
.co-step{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:100px;background:var(--c-ink);color:#fff;font:700 .8rem/1 var(--font-b)}
.co-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.co-field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.co-field span{font-size:.85rem;font-weight:700}
.co-field small{font-size:.76rem;color:var(--c-slate-2)}
.co-field input,.co-field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--c-line-2);border-radius:var(--r-xl);background:#fff;font:500 .95rem/1.4 var(--font-b);color:var(--c-ink);transition:border-color .15s,box-shadow .15s}
.co-field input:focus,.co-field textarea:focus{outline:none;border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(14,17,23,.08)}
.co-field textarea{resize:vertical;min-height:84px}
.co-pickup{display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:16px 18px;border:1.5px solid var(--c-green);border-radius:var(--r-xl);background:var(--c-green-tint)}
.co-pickup .icon{color:var(--c-green-ink);flex:0 0 auto;margin-top:3px}
.co-pickup b{font-size:.95rem}
.co-pickup p{margin:4px 0 0;font-size:.86rem;color:var(--c-slate);line-height:1.55}
.co-payments{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.co-pay{position:relative;display:flex;gap:14px;align-items:center;padding:15px 18px;border:1.5px solid var(--c-line-2);border-radius:var(--r-xl);background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.co-pay:hover{border-color:var(--c-ink)}
.co-pay input{position:absolute;opacity:0;pointer-events:none}
.co-pay>.icon{color:var(--c-slate);flex:0 0 auto}
.co-pay-txt{flex:1;min-width:0}
.co-pay-txt b{display:block;font-size:.95rem}
.co-pay-txt small{display:block;margin-top:3px;font-size:.8rem;color:var(--c-slate-2);line-height:1.45}
.co-pay-check{opacity:0;color:var(--c-green-ink);flex:0 0 auto;transition:opacity .15s}
.co-pay.is-on,.co-pay:has(input:checked){border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(14,17,23,.07)}
.co-pay:has(input:checked) .co-pay-check{opacity:1}
.co-pay:has(input:focus-visible){outline:2px solid var(--c-focus-light);outline-offset:2px}
.co-submit{width:100%;justify-content:center}
.co-legal{font-size:.78rem;color:var(--c-slate-2);line-height:1.6;margin:0}
.co-legal a{color:var(--c-slate);text-decoration:underline;text-underline-offset:2px}
.co-items{list-style:none;margin:0 0 6px;padding:0}
.co-items li{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--c-line);font-size:.88rem}
.co-items li:last-child{border-bottom:0}
.co-item-art{width:38px;height:32px;flex:0 0 38px;display:grid;place-items:center;border:1px solid var(--c-line);border-radius:10px;background:var(--c-bg-alt)}
.co-item-art .icon{width:20px;height:20px;color:#7A828F}
.co-item-name{flex:1;min-width:0;line-height:1.35}
.co-item-name b{color:var(--c-slate-2);font-weight:600}
.co-item-price{font-weight:700;white-space:nowrap}
.co-summary .pickup a{color:inherit;font-weight:700}
@media(max-width:899px){.co-layout{grid-template-columns:minmax(0,1fr)}.co-summary{order:-1}}
@media(max-width:560px){.co-grid2{grid-template-columns:minmax(0,1fr)}}

/* ---------- Bestätigung (Reservierung eingegangen) ---------- */
.codone-card{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-3xl);padding:48px 36px}
.codone-ic{width:72px;height:72px;margin:0 auto 22px;display:grid;place-items:center;border-radius:100px;background:var(--c-green-tint);color:var(--c-green-ink)}
.codone-ic .icon{width:34px;height:34px}
.codone-card h1{font-size:var(--fs-d3);margin-bottom:var(--sp-5)}
.codone-num-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-slate-2);margin:0 0 6px}
.codone-num{font:800 1.6rem/1 var(--font-d);letter-spacing:.02em;margin:0 0 var(--sp-6)}
.codone-text{color:var(--c-slate);line-height:var(--lh-relaxed);margin:0 0 var(--sp-6)}
.codone-steps{list-style:none;margin:0 0 var(--sp-7);padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}
.codone-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-bg-alt);font-size:.9rem;color:var(--c-slate)}
.codone-steps .icon{color:var(--c-red);flex:0 0 auto;margin-top:2px}
.codone-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.codone-help{font-size:.9rem;color:var(--c-slate);margin:0}
@media(max-width:560px){.codone-card{padding:34px 20px}}


/* ---------- Shop-Redesign 29.08.2026: Banner-Hero + USP + Kacheln ----------
   Retail-Grammatik für /shop/ und den "öffnet in Kürze"-Teaser. Baut auf
   .lhero-banner (leistung.css) auf; alles Neue trägt den shop-Präfix.
   Setten minmax(0,1fr) (Regel 20), kein Parallax (Regel 10). */
.shop-hero{min-height:min(46vh,420px);background:#0B0E13}
.shop-hero .lhero-content{max-width:640px;padding:var(--sp-12) 0 var(--sp-12)}
.shop-hero-picto{position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:min(34vw,460px);height:auto;color:#fff;opacity:.12;z-index:1;pointer-events:none}
.shop-hero-picto .is-accent{color:var(--c-red);opacity:.9}
.shop-hero-badge{display:inline-block;margin-bottom:var(--sp-4);padding:6px 14px;
  border-radius:100px;background:var(--c-red);color:#fff;
  font:700 .72rem/1.2 var(--font-b);letter-spacing:.09em;text-transform:uppercase}
@media(max-width:899px){.shop-hero-picto{display:none}.shop-hero .lhero-content{max-width:none}}

.shop-usp-strip{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.shop-usps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.shop-usp{display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--sp-5)}
.shop-usp-ic{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
  border-radius:var(--r-lg);background:var(--c-red-tint);color:var(--c-red)}
.shop-usp-ic .icon{width:22px;height:22px}
.shop-usp-tx{display:grid;gap:2px;min-width:0}
.shop-usp-tx b{font-size:.92rem;line-height:1.35;overflow-wrap:anywhere}
.shop-usp-tx span{font-size:.8rem;color:var(--c-slate);line-height:1.4}
@media(max-width:1023px){.shop-usps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.shop-usps{grid-template-columns:minmax(0,1fr)}}

.cat-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}
.cat-tile{display:grid;gap:8px;justify-items:start;background:#fff;
  border:1px solid var(--c-line);border-radius:var(--r-2xl);padding:var(--sp-6);
  text-decoration:none;color:inherit;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast),border-color var(--t-fast)}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--c-red)}
.cat-tile-ic{width:52px;height:52px;display:grid;place-items:center;
  border-radius:var(--r-lg);background:var(--c-bg-alt);color:var(--c-ink)}
.cat-tile-ic svg,.cat-tile-ic .icon{width:30px;height:30px}
.cat-tile:hover .cat-tile-ic{color:var(--c-red)}
.cat-tile-n{font-size:.95rem;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.cat-tile-count{font-size:.78rem;color:var(--c-slate-2)}
@media(max-width:1023px){.cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

.shop-promo .sh .kicker{color:var(--c-red)}

.shop-trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);
  margin-top:var(--sp-8);padding:var(--sp-5) var(--sp-6);
  border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-bg-alt);
  font-size:.88rem;color:var(--c-slate)}
.shop-trust .tlink{white-space:nowrap}

.shop-teaser-note{max-width:640px;margin:0 auto;text-align:center}
.shop-teaser-note h2{margin-bottom:var(--sp-4)}
.shop-teaser-note p{color:var(--c-slate);line-height:var(--lh-relaxed);margin-bottom:var(--sp-6)}
.shop-teaser-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-6)}