/* =====================================================================
   Friendly layer – consumer-oriented refinements on top of shop.css.
   Calmer typography, clearer guidance, more trust signals.
   ===================================================================== */
body { font-size: 16px; line-height: 1.65; }
h2 { letter-spacing: -.035em; }

/* replace monospace uppercase micro-labels with calm sans labels */
.eyebrow, .sec-index, .breadcrumbs, .p-meta, .p-tag, .badge, .stock, .perks li, .hero-stats span,
.float-chip, .announce, .footer-grid h4, .footer-bottom, .countdown, .pay-label, .spec-list dt,
.cat-row .cnt, .cat-chip span, .order-grid h3, .gate-legal, label, .chip {
  font-family: var(--body);
  text-transform: none;
  letter-spacing: 0;
}
.eyebrow { font-size: .85rem; font-weight: 600; }
.sec-index { font-size: .9rem; font-weight: 600; color: var(--acid); margin-bottom: 10px; }
.breadcrumbs { font-size: .85rem; }
.announce { font-size: .82rem; color: var(--text-2); }
label { font-size: .88rem; font-weight: 600; color: var(--text-2); }
.badge { font-size: .78rem; font-weight: 600; }
.badge-lg { font-size: .88rem; }
.chip { font-size: .82rem; font-weight: 500; }
.footer-grid h4 { font-size: .85rem; font-weight: 600; color: var(--text); }
.footer-bottom { font-size: .82rem; }
.float-chip { font-size: .75rem; }
.countdown { font-size: .82rem; }
.pay-label { font-size: .88rem; font-weight: 600; color: var(--text-2); }
.spec-list dt { font-size: .88rem; color: var(--muted); }
.cat-row .cnt { font-size: .88rem; }
.order-grid h3 { font-size: .9rem; font-weight: 600; color: var(--text-2); }
.gate-legal { font-size: .82rem; }
.stock { font-size: .9rem; font-weight: 500; }

/* hero */
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .98; }
.hero .lead { font-size: 1.18rem; }
.hero-cta { margin: 32px 0 28px; }
.hero-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text-2); font-size: .95rem; }
.hero-checks li { display: inline-flex; align-items: center; gap: 8px; }
.hero-checks svg { color: var(--acid); flex: none; }

/* trust bar */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.trust-bar .trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.trust-bar strong { display: block; font: 600 1rem var(--display); letter-spacing: -.01em; margin-bottom: 2px; }
.trust-bar .trust-item div span { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.trust-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(210, 255, 77, .1); color: var(--acid); }

/* product card */
.p-meta { font-size: .82rem; color: var(--muted); align-items: center; }
.set-badge { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: rgba(210, 255, 77, .1); color: var(--acid); font-weight: 600; font-size: .75rem; }
.p-tag { font-size: .75rem; font-weight: 600; }
.p-sub { color: var(--text-2); font-size: .88rem; }
.per-unit { font-family: var(--body); font-size: .78rem; }

/* how it works */
.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how li { position: relative; padding: 30px 28px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.how h3 { font-size: 1.3rem; margin: 18px 0 8px; }
.how p { color: var(--text-2); margin: 0; font-size: .97rem; }
.how-num { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--acid); color: var(--acid-ink); font: 700 1.2rem var(--display); }
.how li:not(:last-child)::after {
  content: "\2192"; position: absolute; right: -16px; top: 42px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); color: var(--acid); font-size: .9rem;
}

/* category list: a little calmer */
.cat-row { padding: 22px 8px; }
.cat-row .idx { font-family: var(--body); color: var(--muted); }
.cat-row .name { font-size: clamp(1.35rem, 2.8vw, 2.1rem); }

/* faq teaser + cta */
.faq-list { border-top: 1px solid var(--line); }
.faq summary { font-size: 1.12rem; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* product page */
.pdp > *, .cart-layout > *, .checkout > *, .order-grid > *, .pay-box > * { min-width: 0; }
.pdp-info { overflow-wrap: anywhere; }
.pdp-sub { font-size: 1.08rem; }
.buy-price small { font-size: .9rem; line-height: 1.5; margin-top: 4px; }
.buy-price small b { color: var(--text); font-weight: 600; }
.perks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.perks li { display: inline-flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--text-2); }
.perks svg { color: var(--acid); }
.included { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin-bottom: 8px; background: var(--surface); }
.included h3 { margin-bottom: 14px; }
.included ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.included li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.included li svg { color: var(--acid); flex: none; margin-top: 3px; }
.included strong { color: var(--text); }
details.tech { border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 18px; background: var(--bg-2); }
details.tech summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; color: var(--text-2); }
details.tech summary::-webkit-details-marker { display: none; }
details.tech summary::after { content: "+"; color: var(--acid); font-size: 1.3rem; transition: transform .25s var(--ease); }
details.tech[open] summary::after { transform: rotate(45deg); }
details.tech .spec-list { margin: 0 18px 8px; }
.research-note { align-items: flex-start; }
.research-note svg { color: var(--warn); flex: none; margin-top: 2px; }

/* mobile sticky buy bar (shown on small screens only) */
.mobile-buy { display: none; }

/* cart / checkout */
.summary-trust { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.summary-trust li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--text-2); }
.summary-trust svg { color: var(--acid); flex: none; }
.tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(124, 180, 255, .07); border: 1px solid rgba(124, 180, 255, .25); color: var(--text-2); font-size: .92rem; margin-top: 6px; }
.tip svg { color: var(--info); flex: none; margin-top: 2px; }
.tip strong { color: var(--text); }
legend { font-size: 1.3rem; }

/* payment page */
.pay-steps { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.pay-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); font-size: .95rem; }
.pay-steps li svg { color: var(--acid); flex: none; }
.pay-steps strong { color: var(--text); }
.tx-help { display: block; flex: 1 1 100%; margin: -4px 0 4px; font-size: .84rem; }

@media (max-width: 1100px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: 1fr; }
  .how li:not(:last-child)::after { right: auto; left: 40px; top: auto; bottom: -16px; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .trust-bar { grid-template-columns: 1fr; }
  .hero-checks { flex-direction: column; gap: 8px; }
  .set-badge { font-size: .7rem; }
  .p-sub { display: block; font-size: .78rem; }
  .mobile-buy {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12, 14, 17, .92); border-top: 1px solid var(--line-2);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .mobile-buy strong { display: block; font: 600 1.2rem var(--display); }
  .mobile-buy span { font-size: .8rem; color: var(--muted); }
  body:has(.mobile-buy) .site-footer { padding-bottom: 96px; }
  body:has(.mobile-buy) .toast { bottom: 90px; }
}

/* contact page */
.lead-sm { font-size: 1.08rem; max-width: 640px; margin-top: 12px; }
.contact-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.contact-form .btn-lg { margin-top: 6px; }
.contact-side { display: grid; gap: 12px; }
.contact-side .card { margin: 0; padding: 22px; }
.contact-side h3 { margin: 14px 0 6px; }
.contact-side p { margin: 0; font-size: .93rem; }
.contact-sent .btn { margin-right: 8px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1100px) { .contact-layout { grid-template-columns: 1fr; } }

/* Product clarity and accessible controls. */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px 18px; background: var(--acid); color: var(--acid-ink); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.pdp-media { margin: 0; }
.pdp-media img, .p-img img { object-fit: contain; }
.pdp-media figcaption { padding: 12px 18px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .82rem; }
.p-img { display: block; }
.image-caption { position: absolute; bottom: 10px; left: 12px; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--text-2); font-size: .72rem; }
.pack-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 20px 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.pack-facts dt { color: var(--text-2); font-size: .82rem; }
.pack-facts dd { margin: 4px 0 0; font-weight: 600; }
.pack-total { margin: 8px 0 0; font-size: .82rem; color: var(--text-2); }
.p-foot { flex-wrap: wrap; gap: 12px; }
.reveal { opacity: 1; transform: none; }
body.gate { overflow: auto; }
@media (max-width: 760px) {
  .nav-pill:not(.menu-enhanced) .nav-links { display: flex; flex-direction: column; order: 5; padding: 8px 0; }
  .nav-pill:not(.menu-enhanced) .nav-search { display: block; order: 4; margin: 8px 0 0; }
  .add-btn, .icon-btn, .qty button { min-width: 44px; min-height: 44px; }
  .p-meta { flex-wrap: wrap; gap: 4px; }
  .p-body { padding: 12px; }
  .mobile-buy .btn { white-space: normal; text-align: center; }
  body:has(.mobile-buy) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .checkout .coin-card { flex-wrap: wrap; }
  .coin-amount { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { .grid.products { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Homepage and guided guest checkout. */
.home-hero { padding-bottom: 36px; }
.home-hero .hero-inner { gap: 48px; }
.home-hero h1 { font-size: clamp(2.7rem, 5.7vw, 5.2rem); line-height: 1.05; }
.home-hero .hero-cta { margin-bottom: 24px; }
.home-payment-note { margin-top: 24px; max-width: 560px; font-size: .9rem; color: var(--text-2); }
.home-payment-note strong, .home-payment-note a { color: var(--text); }
.home-payment-note a { display: inline-block; color: var(--acid); margin-top: 6px; }
.home-spotlight { position: relative; display: block; border: 1px solid var(--line-2); border-radius: 28px; overflow: hidden; background: #0a0b0e; max-width: 440px; width: 100%; justify-self: center; }
.home-spotlight img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.spotlight-caption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 28px 22px 20px; background: linear-gradient(transparent, rgba(8,9,11,.96) 28%); }
.spotlight-caption strong { display: block; font-size: 1.2rem; }
.spotlight-caption small { color: var(--text-2); }
.spotlight-caption span span { font-size: .85rem; color: var(--text-2); }
.spotlight-arrow { align-self: center; font-size: 1.7rem; color: var(--acid); }
.home-benefits { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.home-benefits > div { display: flex; align-items: center; gap: 14px; padding: 22px; }
.home-benefits svg { flex: none; color: var(--acid); }
.home-benefits strong, .home-benefits small { display: block; }
.home-benefits small { color: var(--text-2); font-size: .83rem; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.category-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.category-tile:hover { border-color: var(--acid); }
.category-tile > span { display: flex; justify-content: space-between; color: var(--text-2); font-size: .85rem; }
.category-tile > span > span { color: var(--acid); }
.home-payment-help { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.home-payment-help p { margin: 6px 0 0; color: var(--text-2); max-width: 720px; }
.checkout-page .page-head { margin-bottom: 24px; }
.checkout-page h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.checkout-progress { display: flex; flex-wrap: wrap; list-style: none; gap: 12px 24px; padding: 0; margin: 0 0 32px; color: var(--text-2); font-size: .9rem; }
.checkout-progress li { display: flex; align-items: center; gap: 8px; }
.checkout-progress li span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); }
.checkout-progress [aria-current="step"] { color: var(--acid); font-weight: 600; }
.checkout-progress [aria-current="step"] span { background: var(--acid); color: var(--acid-ink); }
.checkout-main { min-width: 0; }
.checkout .card { margin-top: 0; }
.checkout-step-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 24px; }
.checkout-optional, .coupon-details { border-top: 1px solid var(--line); margin: 20px 0 0; padding-top: 14px; }
.checkout-optional summary, .coupon-details summary { cursor: pointer; color: var(--text-2); font-size: .9rem; padding: 6px 0; }
.checkout-optional .form-grid { margin-top: 12px; }
.checkout-help { padding-left: 22px; color: var(--text-2); font-size: .9rem; }
.checkout-help li + li { margin-top: 10px; }
.summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.checkout-items { list-style: none; margin: 18px 0; padding: 0; }
.checkout-items li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checkout-items img { border-radius: 8px; object-fit: cover; }
.checkout-items div span { display: block; color: var(--text-2); font-size: .78rem; }
.checkout-items li > strong { font-size: .85rem; white-space: nowrap; }
.address-review { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 20px; background: var(--bg-2); }
.address-review p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.address-review button { flex: none; }
.field-error { display: block; color: #ffabab; font-size: .8rem; margin-top: 6px; }
[aria-invalid="true"] { border-color: #ffabab; }
.coin-option.selected .coin-card { border-color: var(--acid); background: rgba(210,255,77,.07); }
.checkout-feedback { margin-bottom: 20px; }
.checkout .coin-text small { color: var(--text-2); }
.checkout .coin-amount { font-size: .8rem; white-space: normal; }
.checkout-summary .btn { white-space: normal; text-align: center; }
.coupon-details { margin: 0 0 18px; border-top: 0; padding: 0; }
.coupon-details .coupon-form { margin-top: 10px; }
@media (max-width: 1100px) {
  .home-hero .hero-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .home-benefits { grid-template-columns: 1fr; }
  .home-benefits > div + div { border-top: 1px solid var(--line); }
  .checkout-summary { position: static; }
}
@media (max-width: 760px) {
  .home-hero .hero-inner { grid-template-columns: 1fr; }
  .home-spotlight { max-width: 340px; }
  .home-hero .lead { font-size: 1.05rem; }
  .home-hero .hero-cta .btn { width: 100%; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .category-tile { padding: 16px; }
  .home-payment-help { flex-direction: column; align-items: flex-start; }
  .checkout-progress { gap: 8px 12px; font-size: .78rem; }
  .checkout-progress li span { width: 24px; height: 24px; }
  .checkout-step-actions .btn { width: 100%; }
  .checkout-items li { gap: 8px; }
  .checkout .form-grid input, .checkout .form-grid select, .checkout .form-grid textarea { font-size: 16px; }
}
@media (max-width: 380px) { .category-grid { grid-template-columns: 1fr; } }

.p-card .p-foot form { width: 100%; }
.p-card .add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border-radius: 12px; font: 600 .85rem var(--body); }
@media (max-width: 760px) { .p-card .add-btn { font-size: .78rem; gap: 4px; } }


.locale-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; }
.locale-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.locale-controls label { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.locale-controls select { width: auto; min-width: 115px; padding: 7px 28px 7px 10px; font-size: .82rem; border-radius: 10px; }
.currency-note { font-size: .76rem; color: var(--text-2); max-width: 720px; margin: 0; }
.gate-card .locale-controls { margin: 0 0 20px; }
.gate-card .currency-note { margin-bottom: 20px; }
.money-value { white-space: nowrap; }
.vat-row { font-size: .82rem; color: var(--text-2); padding-top: 8px; }
.original-language-note { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); font-size: .86rem; }
@media(max-width:760px) { .locale-bar { justify-content: center; } .locale-controls { gap: 8px; } .locale-controls label { flex-direction: column; align-items: flex-start; gap: 3px; } .locale-controls select { font-size: 16px; } .currency-note { width: 100%; } }

/* Stable product buttons and touch-first layouts. */
.p-card .add-btn, .p-card .add-btn:hover, .p-card .add-btn:active { transform: none; transition: background .2s, color .2s, border-color .2s; white-space: normal; text-align: center; padding: 10px; height: auto; }
.p-card .add-btn svg { flex: none; }
.p-card .p-foot { margin-top: auto; }
@media (hover: none), (pointer: coarse) { .p-card:hover, .p-card:hover .p-img img, .btn:hover { transform: none; } .p-card { transition: none; } }
@media (max-width:760px) { .p-card:hover, .p-card:hover .p-img img { transform: none; } .p-card .p-body { min-width: 0; } .p-card .price { max-width: 100%; } .p-card .per-unit { white-space: normal; } .checkout .coin-card { min-width: 0; } .checkout-progress li { min-width: 0; } .site-footer, .checkout-summary { overflow-wrap: anywhere; } }

@media(max-width:380px){ .nav-pill.menu-enhanced { gap:8px; padding:10px; } .nav-pill .brand { font-size:15px; gap:6px; margin-right:auto; } .nav-pill .brand-mark { width:28px; height:28px; } .nav-pill .nav-cart { padding:8px; min-width:44px; } .nav-pill .menu-toggle { width:44px; height:44px; flex:none; } }

.p-card .price-tax { display:block; font-size:.68rem; color:var(--text-2); margin:2px 0 6px; }

/* Readable cart feedback on narrow screens. */
.toast { width:min(520px,calc(100% - 32px)); border-radius:16px; line-height:1.45; }
.toast-message { flex:1; min-width:0; overflow-wrap:anywhere; }
.toast a { flex:none; }
@media(max-width:760px){ .toast { bottom:max(16px,env(safe-area-inset-bottom)); padding:16px; flex-direction:column; align-items:stretch; gap:12px; } .toast a { text-align:center; border-radius:10px; min-height:44px; display:flex; align-items:center; justify-content:center; } }

/* Mobile cart: reserve enough space for the complete line price. */
@media (max-width:760px) {
  .cart-row { grid-template-columns:72px minmax(0,1fr) 44px; grid-template-areas:"img name rm" "qty line line"; gap:12px; }
  .cart-row .cart-name { min-width:0; overflow-wrap:anywhere; }
  .cart-row .cart-name > span { display:block; }
  .cart-row .cart-name .money-value { display:inline-block; }
  .cart-row .qty-input { width:72px; min-width:0; font-size:16px; }
  .cart-row .cart-line { min-width:0; justify-self:stretch; text-align:right; }
  .cart-row .icon-btn { justify-self:end; }
  .cart-layout .summary { padding:20px; }
  .cart-layout .totals { grid-template-columns:minmax(0,1fr) max-content; }
  .cart-layout .totals dt { min-width:0; overflow-wrap:anywhere; }
  .cart-layout .totals dd { white-space:nowrap; }
}
@media (max-width:380px) { .cart-layout .totals dd.total { font-size:1.25rem; } }

/* Inactive cart notifications must be invisible above the mobile buy bar. */
.toast { visibility:hidden; opacity:0; pointer-events:none; }
.toast.show { visibility:visible; opacity:1; pointer-events:auto; }

/* Stack product purchase controls on phones instead of overflowing the buy box. */
@media(max-width:760px) {
  .buy-box .add-form { flex-direction:column; align-items:stretch; }
  .buy-box .add-form .qty { align-self:flex-start; flex:none; }
  .buy-box .add-form > .btn { flex:none; width:100%; min-width:0; white-space:normal; justify-content:center; text-align:center; }
  .mobile-buy > div { min-width:0; }
  .mobile-buy > .btn { flex:1; min-width:0; padding:12px; white-space:normal; }
}

/* Language and currency controls share the mobile navigation dropdown. */
#shop-locale-desktop[hidden], .nav-preferences[hidden] { display:none; }
@media(max-width:760px) {
  .nav-preferences { order:6; flex:0 0 100%; width:100%; padding:16px 4px 8px; border-top:1px solid var(--line); }
  .nav-preferences .locale-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; gap:12px; }
  .nav-preferences label { min-width:0; }
  .nav-preferences select { width:100%; min-width:0; min-height:44px; font-size:16px; }
  .nav-pill.open { max-height:calc(100dvh - 32px); overflow-y:auto; }
}

/* Zyzz silhouette brand mark, transparent against the shop background. */
.brand-mark.brand-mark-zyzz { width:40px; height:40px; flex:none; border-radius:0; background:transparent; }
.brand-mark-zyzz img { display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:380px) { .nav-pill .brand-mark.brand-mark-zyzz { width:32px; height:32px; } }

/* Clear hierarchy and compact purchase paths. */
.home-hero{padding-top:36px;padding-bottom:28px}.home-hero h1{font-size:clamp(2.6rem,5.4vw,4.8rem)}.home-hero .lead{max-width:520px;font-size:1.05rem}.home-hero .hero-cta{margin:24px 0;align-items:center;gap:22px}.hero-secondary{color:var(--text-2);font-size:.9rem;text-decoration:underline;text-underline-offset:5px}.home-payment-note{padding:12px 0;background:transparent;border:0;margin-top:18px;font-size:.85rem;color:var(--text-2)}.home-payment-note summary{cursor:pointer}.home-payment-note p{max-width:500px;margin:10px 0 0}.home-spotlight{max-height:440px}.home-spotlight>img{height:440px;object-fit:cover}.home-benefits{margin-bottom:0}
.p-card{background:var(--surface);border-color:var(--line)}.p-card .p-img{aspect-ratio:1/1}.p-card .p-img img{height:100%;width:100%;object-fit:contain}.p-card .p-body{display:flex;flex-direction:column;gap:8px;padding:20px}.p-card .p-name{font-size:1.2rem;line-height:1.25;min-height:2.5em;margin:0}.p-card .p-meta{justify-content:flex-start;gap:10px;flex-wrap:wrap}.p-card .set-badge{background:var(--surface-2);color:var(--text-2)}.p-card .p-sub{font-size:.78rem;color:var(--muted);min-height:1.3em}.p-card .pack-total{font-size:.8rem;color:var(--text-2);margin:0 0 12px}.p-card .p-foot{display:flex;flex-direction:column;align-items:stretch;gap:0}.p-card .price{font-family:var(--display);font-size:1.4rem}.p-card .price .per-unit{display:block;font-size:.78rem;font-weight:400;color:var(--text-2)}.p-card .add-btn{min-height:46px;width:100%;border-radius:10px;background:var(--acid);color:var(--acid-ink);margin-top:8px}.sec-index{color:var(--text-2)}.perks svg,.hero-checks svg,.home-benefits svg{color:var(--text-2)}
.purchase-delivery{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:5px;font-size:.85rem}.purchase-delivery>span{color:var(--text-2)}.purchase-delivery>a{color:var(--text-2);text-decoration:underline;text-underline-offset:4px}.product-detail{border-top:1px solid var(--line);margin-top:20px;padding:18px 0;scroll-margin-top:110px}.product-detail summary{font:600 1.1rem var(--display);cursor:pointer}.product-detail .pdp-desc,.detail-copy{margin-top:16px;color:var(--text-2)}
.cart-quantity{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;min-width:0}.cart-quantity button{min-width:32px;height:44px;background:transparent;border:0;color:var(--text);cursor:pointer;font-size:20px}.cart-quantity .qty-input{width:48px;padding:8px 2px;border:0;background:transparent;text-align:center;appearance:textfield}.cart-quantity input::-webkit-inner-spin-button{appearance:none}.shipping-achieved{color:var(--ok);font-size:.9rem;padding:12px 0}.reorder-card{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);border-radius:16px;padding:24px;margin:24px 0}.reorder-card p{color:var(--text-2);margin:0}
body.cart-open{overflow:hidden}.cart-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100%);height:100dvh;max-height:100dvh;max-width:100%;padding:0;background:var(--bg-2);color:var(--text);border:0;border-left:1px solid var(--line-2);box-shadow:-24px 0 80px rgba(0,0,0,.35)}.cart-drawer[open]{display:flex;flex-direction:column}.cart-drawer::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)}.drawer-header h2{font-size:1.6rem;margin:6px 0 0}.drawer-header .icon-btn{font-size:26px;min-width:44px;min-height:44px}.drawer-content{padding:8px 24px 24px;overflow-y:auto;flex:1;min-height:0}.drawer-items{list-style:none;padding:0;margin:0 0 20px}.drawer-items li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.drawer-items img{border-radius:8px;object-fit:contain;background:var(--surface)}.drawer-items li>div{min-width:0;overflow-wrap:anywhere}.drawer-items li>div span{display:block;font-size:.78rem;color:var(--text-2)}.drawer-items li>strong{font-size:.9rem;white-space:nowrap}.drawer-content .totals{grid-template-columns:minmax(0,1fr) auto}.drawer-content .totals dt{overflow-wrap:anywhere}.drawer-content .totals dd{white-space:nowrap}.drawer-footer{padding:20px 24px max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;gap:12px;background:var(--surface)}.drawer-edit,.drawer-footer>.link{text-align:center;min-height:32px;font-size:.9rem}.drawer-footer p{text-align:center;margin:0}.drawer-footer .btn[hidden]{display:none}
@media(max-width:760px){.home-hero{padding:22px 0 12px}.home-hero .hero-inner{gap:20px}.home-hero h1{font-size:2.65rem}.home-hero .lead{font-size:.95rem;margin:14px 0}.home-hero .hero-cta{margin:18px 0;gap:14px}.home-hero .hero-cta .btn{width:auto;flex:1}.home-hero .hero-checks{font-size:.78rem;gap:8px 12px}.home-hero .home-spotlight{display:none}.home-payment-note{margin-top:10px;padding:8px 0}.home-benefits{gap:0;padding:0}.home-benefits>div{padding:12px 16px}.home-benefits small{font-size:.75rem}#auswahl{padding-top:24px}.p-card .p-body{padding:12px;gap:6px}.p-card .p-name{font-size:1rem}.p-card .p-meta{font-size:.72rem;gap:5px}.p-card .price{font-size:1.2rem}.p-card .add-btn{font-size:.78rem;padding:10px 6px}.p-card .add-btn svg{display:none}.cart-row .cart-quantity{grid-area:qty;width:118px}.cart-row{grid-template-columns:72px minmax(0,1fr) 44px;grid-template-areas:"img name rm" "qty qty line"}.cart-row .cart-quantity .qty-input{width:48px}.cart-row .cart-line{grid-column:3;white-space:nowrap;width:max-content;justify-self:end}.reorder-card{flex-direction:column;align-items:stretch;padding:18px}.cart-drawer{inset:auto 0 0;width:100%;height:90dvh;max-height:90dvh;border-radius:22px 22px 0 0;border:1px solid var(--line-2)}.drawer-header{padding:18px}.drawer-content{padding:4px 18px 18px}.drawer-footer{padding:16px 18px max(16px,env(safe-area-inset-bottom));gap:10px}.drawer-items li{gap:10px;grid-template-columns:48px minmax(0,1fr) auto}.drawer-items img{width:48px;height:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:760px){.home-hero .hero-cta{flex-direction:row;flex-wrap:wrap}.home-hero .hero-cta .btn{flex:none;width:auto}.home-hero .hero-checks{flex-direction:row;align-items:center}.home-benefits>div:nth-child(2){display:none}}

.language-picker{position:relative;min-width:140px}.language-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}.language-toggle>span:last-child{margin-left:auto}.language-picker img{object-fit:cover;border-radius:2px;flex:none}.language-options{position:absolute;top:calc(100% + 6px);left:0;width:100%;min-width:160px;z-index:150;padding:6px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px #0008}.language-options[hidden]{display:none}.language-options button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;min-height:44px;background:transparent;color:var(--text);border:0;border-radius:6px;font:inherit;cursor:pointer}.language-options button:hover,.language-options button:focus-visible{background:var(--surface-3)}.language-options button[aria-selected=true]{background:var(--surface-3)}#shop-language[hidden]{display:none}@media(max-width:760px){.language-picker{width:100%;min-width:0}.language-options{min-width:140px}}

.shipping-origin{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:.8rem;line-height:1.4}.shipping-origin img{display:block;flex:none;width:24px;height:16px;border-radius:2px;object-fit:cover}.p-card .shipping-origin{margin:0 0 12px;font-size:.74rem}.purchase-delivery .shipping-origin{margin:0 0 8px}.detail-copy .shipping-origin{margin:0 0 12px}

.home-discount-note{display:inline-block;margin:18px 0 0;padding:8px 16px;border-radius:999px;background:var(--acid);color:var(--acid-ink);font-weight:700}.comparison-price{font-size:.8em;color:var(--text-2);font-weight:400;margin-left:8px;white-space:nowrap}.cart-line .comparison-price,.drawer-items .comparison-price,.checkout-items .comparison-price{display:block;margin-left:0}


.product-variants{margin:20px 0}.product-variants>span{display:block;font-weight:600;margin-bottom:10px}.product-variants>div{display:flex;flex-wrap:wrap;gap:8px}.variant-option{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--line-2);border-radius:10px;color:var(--text);text-decoration:none}.variant-option.selected{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid)}.variant-option small{font-size:.7rem;color:var(--muted)}.variant-option:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.quantity-field{display:flex;flex-direction:column;gap:5px}.quantity-field label{font-size:.85rem;font-weight:600}.quantity-field>small{font-size:.75rem;color:var(--text-2)}.purchase-payment{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:.85rem}.purchase-payment>span,.purchase-payment>small{color:var(--text-2);line-height:1.5}

/* Keep the purchase button compact beside the labelled quantity field. */
.buy-box .add-form{align-items:flex-end}.buy-box .add-form>.btn{flex:0 1 auto;align-self:flex-end;min-height:48px;padding:12px 20px;font-size:.92rem;line-height:1.25;border-radius:12px;justify-content:center}
@media(max-width:760px){.buy-box .add-form>.btn{align-self:stretch;min-height:48px;padding:12px 18px;width:100%}}