/* ============================================================
   Lafix Shop — Katalog, Filter, Produktseite, Warenkorb, Bestätigung
   (builds on style.css tokens: zinc/amber, Archivo Black, Source Sans 3)
   ============================================================ */

.shop-body { background: var(--zinc-950); }
.container--wide { max-width: 80rem; }

/* ── Navbar (always dark on shop pages) ── */
.navbar--dark,
.navbar--dark.scrolled { background: rgba(9,9,11,0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: rgba(255,255,255,0.06); box-shadow: 0 8px 32px rgba(0,0,0,0.45); }
.navbar--dark .navbar__link { color: var(--zinc-400); }
.navbar--dark .navbar__link:hover, .navbar--dark .navbar__link[aria-current] { color: var(--white); }
.navbar--dark .navbar__burger span { background: var(--white); }
.navbar--dark .navbar__mobile { background: rgba(9,9,11,0.97); border-color: rgba(255,255,255,0.05); }
.navbar--dark .navbar__mobile-link { color: var(--zinc-300); border-color: rgba(255,255,255,0.05); }
.navbar__cart { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid rgba(245,158,11,0.35); color: var(--zinc-600); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.navbar__cart:hover { color: var(--amber-400); border-color: var(--amber-400); background: rgba(245,158,11,0.08); }
.navbar.scrolled .navbar__cart, .navbar--dark .navbar__cart { color: var(--zinc-200); }
.navbar__cart-badge { min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem; border-radius: var(--radius-full); background: var(--amber-500); color: var(--zinc-950); font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; }
.navbar__cart-badge:empty, .navbar__cart-badge[data-count="0"] { display: none; }

/* ── Shared bits ── */
.crumbs { font-size: 0.8rem; color: var(--zinc-500); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 1rem; }
.crumbs a { color: var(--zinc-400); }
.crumbs a:hover { color: var(--amber-400); }
.shop-notice { padding: 0.85rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1.25rem; }
.shop-notice a { color: inherit; text-decoration: underline; }
.shop-notice--info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); color: #bfdbfe; }
.shop-notice--warn { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: #fde68a; }
.shop-notice--error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; }
.grid__loading { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; color: var(--zinc-500); }

.qty { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 0.75rem; background: rgba(39,39,42,0.7); overflow: hidden; flex-shrink: 0; }
.qty button { width: 2.6rem; height: 3rem; background: none; border: none; color: var(--zinc-300); font-size: 1.15rem; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.qty button:hover:not(:disabled) { background: rgba(245,158,11,0.15); color: var(--amber-400); }
.qty button:disabled { opacity: 0.3; cursor: not-allowed; }
.qty input { width: 3rem; height: 3rem; text-align: center; background: none; border: none; color: var(--white); font-weight: 700; font-size: 1rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty input:focus { outline: none; }
.qty--sm button { width: 2.1rem; height: 2.2rem; font-size: 1rem; }
.qty--sm input { width: 2.4rem; height: 2.2rem; font-size: 0.9rem; }

/* ── Catalog header ── */
.catalog, .pdp, .cartpage { padding: calc(4.75rem + 1.5vw) 0 4rem; min-height: 70vh; position: relative; }
.catalog::before, .pdp::before, .cartpage::before { content: ''; position: absolute; inset: 0 0 auto; height: 420px; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(245,158,11,0.07), transparent); pointer-events: none; }
.catalog > .container, .pdp > .container, .cartpage > .container { position: relative; }
.catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.catalog__title { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(1.75rem, 4vw, 2.6rem); color: var(--white); letter-spacing: -0.02em; line-height: 1.1; }
.catalog__desc { color: var(--zinc-400); margin-top: 0.4rem; max-width: 60ch; }
.catalog__search { flex: 0 1 380px; }
.catalog__search input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border-radius: 0.75rem; background: rgba(39,39,42,0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 0.85rem center; border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-size: 0.95rem; }
.catalog__search input:focus { outline: none; border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }

/* ── Category chips ── */
.cat-chips { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; margin-bottom: 0.75rem; scrollbar-width: thin; }
.cat-chips .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.1); background: rgba(24,24,27,0.7); color: var(--zinc-300); font-size: 0.875rem; font-weight: 600; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.cat-chips .chip:hover { border-color: rgba(245,158,11,0.5); color: var(--white); }
.cat-chips .chip.on { background: var(--amber-500); border-color: var(--amber-500); color: var(--zinc-950); }
.cat-chips--sub { margin-bottom: 1.25rem; }
.cat-chips .chip--sub { padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 500; background: transparent; }
.cat-chips .chip--sub.on { background: rgba(245,158,11,0.15); color: var(--amber-400); border-color: rgba(245,158,11,0.5); }
.cat-chips .chip em { font-style: normal; font-size: 0.7rem; opacity: 0.6; }
.cat-chips .chip--empty { opacity: 0.55; }

/* ── Category tiles (shop start) ── */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin-bottom: 2.25rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: 0.3rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(39,39,42,0.9), rgba(24,24,27,0.6)); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; transition: transform var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow); }
.tile::after { content: '→'; position: absolute; right: 1.1rem; top: 1.1rem; color: var(--zinc-600); transition: color var(--t-fast), transform var(--t-fast); }
.tile:hover { transform: translateY(-3px); border-color: rgba(245,158,11,0.35); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.tile:hover::after { color: var(--amber-400); transform: translateX(3px); }
.tile__icon { width: 44px; height: 44px; margin-bottom: 0.6rem; display: grid; place-items: center; border-radius: 8px; background: rgba(245,158,11,0.1); color: var(--amber-400); }
.tile__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tile__name { font-weight: 700; font-size: 1.05rem; color: var(--white); }
.tile__subs { font-size: 0.78rem; color: var(--zinc-500); line-height: 1.45; }
.tile__count { margin-top: auto; padding-top: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-400); }

/* ── Layout: filters + results ── */
.catalog__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.filters { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.25rem; color: var(--white); }
.filters__reset { background: none; border: none; color: var(--amber-400); font-size: 0.8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.filters__close, .filters__apply, .results__filter-btn { display: none; }
.fgroup { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0.7rem 0; }
.fgroup summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--zinc-200); }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: '+'; color: var(--zinc-500); font-weight: 400; font-size: 1.1rem; }
.fgroup[open] summary::after { content: '–'; }
.fgroup__n { color: var(--amber-400); margin-left: 0.3rem; margin-right: auto; }
.fgroup__body { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.55rem; max-height: 260px; overflow-y: auto; }
.fcheck { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.2rem; font-size: 0.85rem; color: var(--zinc-300); cursor: pointer; border-radius: 6px; }
.fcheck:hover { background: rgba(255,255,255,0.03); color: var(--white); }
.fcheck input { accent-color: var(--amber-500); width: 1rem; height: 1rem; flex-shrink: 0; }
.fcheck span { flex: 1; display: inline-flex; align-items: center; gap: 0.45rem; }
.fcheck em { font-style: normal; font-size: 0.72rem; color: var(--zinc-600); }
.fcheck--switch { font-weight: 600; }
.fswatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: inline-block; }
.fsizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: 0.35rem; }
.fsize { padding: 0.45rem 0.2rem; border-radius: 0.5rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(39,39,42,0.5); color: var(--zinc-300); font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.fsize:hover { border-color: var(--amber-500); color: var(--white); }
.fsize.on { background: var(--amber-500); border-color: var(--amber-500); color: var(--zinc-950); }
.fprice { display: flex; align-items: center; gap: 0.4rem; }
.fprice input { width: 100%; padding: 0.5rem 0.6rem; border-radius: 0.5rem; background: rgba(39,39,42,0.7); border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-size: 0.85rem; }
.fprice span { color: var(--zinc-500); }

.results__bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.results__count { font-size: 0.85rem; color: var(--zinc-400); font-weight: 600; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; }
.achip { padding: 0.25rem 0.6rem; border-radius: var(--radius-full); border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.1); color: var(--amber-400); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.achip:hover { background: rgba(245,158,11,0.2); }
.results__sort { margin-left: auto; font-size: 0.8rem; color: var(--zinc-500); display: flex; align-items: center; gap: 0.4rem; }
.results__sort select { padding: 0.45rem 2rem 0.45rem 0.7rem; border-radius: 0.5rem; background: rgba(39,39,42,0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.5rem center; border: 1px solid rgba(255,255,255,0.1); color: var(--white); font-size: 0.85rem; -webkit-appearance: none; appearance: none; font-family: inherit; }
.results__sort select option { background: #18181b; }

/* ── Product cards ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1rem; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: rgba(24,24,27,0.7); border: 1px solid rgba(255,255,255,0.06); overflow: hidden; transition: border-color var(--t-slow), transform var(--t-slow), box-shadow var(--t-slow); }
.pcard:hover { border-color: rgba(245,158,11,0.3); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.pcard__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.pcard__media { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(ellipse 70% 70% at 50% 55%, rgba(245,158,11,0.10), transparent 70%), rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.04); }
.pcard__media img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.45)); transition: transform var(--t-slow); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__ph { font-size: 3.5rem; opacity: 0.85; filter: grayscale(0.2); }
.pcard__badge { position: absolute; top: 0.65rem; left: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 0.4rem; background: rgba(9,9,11,0.85); border: 1px solid rgba(245,158,11,0.4); color: var(--amber-400); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; z-index: 1; }
.pcard__badge--sale { background: #dc2626; border-color: #dc2626; color: #fff; }
.pcard__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.95rem 1rem 0.8rem; flex: 1; }
.pcard__brand { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zinc-500); }
.pcard__name { font-size: 0.98rem; font-weight: 700; color: var(--white); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__hl { font-size: 0.76rem; color: var(--zinc-400); line-height: 1.4; }
.pcard__var { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; color: var(--zinc-500); }
.pcard__dots { display: inline-flex; gap: 0.2rem; }
.pcard__dots i { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.pcard__price { margin-top: auto; padding-top: 0.35rem; color: var(--white); display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.pcard__price strong { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.3rem; letter-spacing: -0.01em; }
.pcard__price small { color: var(--zinc-400); font-size: 0.8rem; }
.pcard__price s { color: var(--zinc-500); font-size: 0.85rem; }
.pcard__meta { font-size: 0.7rem; color: var(--zinc-500); }
.stock { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 600; }
.stock::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.stock--ok { color: #4ade80; }
.stock--low { color: var(--amber-400); }
.stock--out { color: #f87171; }
.pcard__add { margin: 0 1rem 1rem; padding: 0.7rem; border-radius: 0.7rem; border: none; background: var(--amber-500); color: var(--zinc-950); font-weight: 700; font-size: 0.85rem; text-align: center; cursor: pointer; font-family: inherit; transition: background var(--t-fast); }
.pcard__add:hover { background: var(--amber-400); }
.pcard__add.added { background: #22c55e; color: #052e16; }
.pcard__add--ghost { background: transparent; border: 1px solid rgba(245,158,11,0.45); color: var(--amber-400); }
.pcard__add--ghost:hover { background: rgba(245,158,11,0.1); }

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--zinc-400); }
.empty-state__icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.empty-state h2 { color: var(--white); font-size: 1.25rem; margin-bottom: 0.35rem; }
.empty-state a { color: var(--amber-400); }

.shop-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.5rem; }
.shop-info__item { padding: 1.25rem; border-radius: var(--radius); background: rgba(24,24,27,0.5); border: 1px solid rgba(255,255,255,0.05); }
.shop-info__icon { font-size: 1.4rem; margin-bottom: 0.5rem; }
.shop-info__title { font-weight: 700; color: var(--white); font-size: 0.9rem; margin-bottom: 0.25rem; }
.shop-info__text { font-size: 0.8rem; color: var(--zinc-400); line-height: 1.55; }
.shop-info__text a { color: var(--amber-400); }

/* ── Product page ── */
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.gallery { position: sticky; top: 5.5rem; }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(245,158,11,0.12), transparent 70%), rgba(24,24,27,0.7); border: 1px solid rgba(255,255,255,0.06); display: grid; place-items: center; overflow: hidden; }
.gallery__main img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,0.5)); }
.gallery__ph { font-size: 7rem; }
.gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; overflow-x: auto; }
.gallery__thumb { width: 4.5rem; height: 4.5rem; flex-shrink: 0; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(24,24,27,0.8); padding: 0.3rem; cursor: pointer; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.on { border-color: var(--amber-500); box-shadow: 0 0 0 2px rgba(245,158,11,0.25); }

.buybox { display: flex; flex-direction: column; gap: 0.9rem; }
.buybox__brand { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-400); }
.buybox__title { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.12; color: var(--white); letter-spacing: -0.015em; margin-top: -0.4rem; }
.buybox__sku { font-size: 0.78rem; color: var(--zinc-500); margin-top: -0.5rem; }
.buybox__short { color: var(--zinc-300); line-height: 1.65; }
.buybox__hl { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.buybox__hl li { padding: 0.25rem 0.65rem; border-radius: var(--radius-full); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: var(--zinc-300); }
.buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.buybox__price strong { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 2.1rem; color: var(--white); letter-spacing: -0.02em; }
.buybox__price strong small { font-family: 'Source Sans 3', sans-serif; font-size: 1rem; color: var(--zinc-400); }
.buybox__price s { color: var(--zinc-500); font-size: 1.1rem; }
.buybox__vat, .buybox__base { width: 100%; font-size: 0.78rem; color: var(--zinc-500); }
.buybox__vat a { color: inherit; text-decoration: underline; }
.buybox__base:empty { display: none; }
.picker__label { font-size: 0.85rem; color: var(--zinc-400); margin-bottom: 0.5rem; }
.picker__label strong { color: var(--white); }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem 0.4rem 0.45rem; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.12); background: rgba(39,39,42,0.5); color: var(--zinc-300); font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.swatch-btn i { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); }
.swatch-btn:hover { border-color: rgba(245,158,11,0.6); }
.swatch-btn.on { border-color: var(--amber-500); box-shadow: 0 0 0 2px rgba(245,158,11,0.3); color: var(--white); }
.swatch-btn.out { opacity: 0.5; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 0.45rem; }
.size-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3rem; padding: 0.35rem 0.25rem; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.14); background: rgba(39,39,42,0.55); color: var(--white); font-weight: 700; font-size: 0.9rem; cursor: pointer; overflow: hidden; font-family: inherit; transition: border-color var(--t-fast), background var(--t-fast); }
.size-btn small { font-size: 0.62rem; font-weight: 600; color: var(--amber-400); }
.size-btn:hover { border-color: var(--amber-500); }
.size-btn.on { background: var(--amber-500); border-color: var(--amber-500); color: var(--zinc-950); }
.size-btn.on small { color: var(--zinc-900); }
.size-btn.out { color: var(--zinc-600); background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.03) 6px 7px), rgba(24,24,27,0.6); }
.size-btn.out::after { content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 1px; background: rgba(248,113,113,0.55); transform: rotate(-24deg); }
.size-btn.out.on { background: rgba(248,113,113,0.15); border-color: #f87171; color: #fca5a5; }
.buybox__stock { font-size: 0.88rem; font-weight: 600; color: var(--zinc-400); display: flex; align-items: center; gap: 0.45rem; min-height: 1.3rem; }
.buybox__stock--ok { color: #4ade80; }
.buybox__stock--low { color: var(--amber-400); }
.buybox__stock--out { color: #f87171; }
.buybox__stock--ok::before, .buybox__stock--low::before, .buybox__stock--out::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.buybox__cta { display: flex; gap: 0.6rem; }
.btn-cart { flex: 1; padding: 0 1.25rem; min-height: 3rem; border: none; border-radius: 0.75rem; background: var(--amber-500); color: var(--zinc-950); font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit; box-shadow: 0 10px 28px rgba(245,158,11,0.25); transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast); }
.btn-cart:hover:not(:disabled) { background: var(--amber-400); transform: translateY(-1px); }
.btn-cart:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-cart.added { background: #22c55e; color: #052e16; }
.buybox__msg { font-size: 0.8rem; color: var(--amber-400); min-height: 0; }
.buybox__msg:empty { display: none; }
.buybox__trust { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.83rem; color: var(--zinc-400); padding: 1rem 1.1rem; border-radius: var(--radius); background: rgba(24,24,27,0.6); border: 1px solid rgba(255,255,255,0.05); }

.pdp__details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 3rem; margin-top: 3.5rem; }
.pdp__section h2 { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.25rem; color: var(--white); margin-bottom: 0.9rem; }
.prose { color: var(--zinc-300); line-height: 1.75; font-size: 0.95rem; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 0.75rem; }
.prose ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.prose li::marker { color: var(--amber-500); }
.specs { width: 100%; border-collapse: collapse; font-size: 0.88rem; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.specs th, .specs td { text-align: left; padding: 0.6rem 0.85rem; vertical-align: top; }
.specs th { width: 42%; color: var(--zinc-400); font-weight: 600; }
.specs td { color: var(--white); }
.specs tr:nth-child(odd) { background: rgba(255,255,255,0.025); }
.docs { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.docs a { display: inline-flex; gap: 0.4rem; color: var(--amber-400); font-weight: 600; }
.docs small { color: var(--zinc-500); font-weight: 400; }
.related { margin-top: 4rem; }
.related h2 { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.35rem; color: var(--white); margin-bottom: 1rem; }
.grid--related { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pdp-missing { text-align: center; padding: 5rem 1rem; color: var(--zinc-400); }
.pdp-missing__icon { font-size: 3rem; }
.pdp-missing h1 { color: var(--white); font-family: 'Archivo Black', sans-serif; font-size: 2rem; margin: 0.5rem 0; }
.pdp-missing .btn-primary { margin-top: 1.25rem; }

/* ── Cart page ── */
.cartpage .catalog__title { margin-bottom: 1.25rem; }
.cartpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
.cart-lines { display: flex; flex-direction: column; }
.cline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.cline:first-child { border-top: 1px solid rgba(255,255,255,0.07); }
.cline__img { width: 96px; height: 96px; border-radius: 0.75rem; background: rgba(24,24,27,0.8); border: 1px solid rgba(255,255,255,0.06); display: grid; place-items: center; font-size: 2rem; }
.cline__img img { width: 88%; height: 88%; object-fit: contain; }
.cline__info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cline__name { font-weight: 700; color: var(--white); line-height: 1.3; }
.cline__name:hover { color: var(--amber-400); }
.cline__meta { font-size: 0.8rem; color: var(--zinc-400); }
.cline__unit { font-size: 0.75rem; color: var(--zinc-500); }
.cline__problem { font-size: 0.8rem; font-weight: 600; color: #fca5a5; }
.cline--problem .cline__img { border-color: rgba(239,68,68,0.4); }
.cline__actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.cline__remove { background: none; border: none; color: var(--zinc-500); font-size: 0.8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.cline__remove:hover { color: #fca5a5; }
.cline__total { font-weight: 800; color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-lines__back { margin-top: 1.25rem; color: var(--zinc-400); font-size: 0.875rem; }
.cart-lines__back:hover { color: var(--amber-400); }
.summary { position: sticky; top: 5.5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.summary:hover { transform: none; }
.summary__title { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.summary__rows { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.9rem; color: var(--zinc-400); }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; }
.summary__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary__row--total { font-size: 1.15rem; font-weight: 800; color: var(--white); padding-top: 0.6rem; margin-top: 0.2rem; border-top: 1px solid rgba(255,255,255,0.1); }
.summary__vat { font-size: 0.74rem; color: var(--zinc-500); }
.summary__hint { font-size: 0.74rem; color: var(--zinc-500); line-height: 1.5; text-align: center; }
.cart__free-hint { padding: 0.6rem 0.75rem; border-radius: 0.6rem; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); color: var(--amber-400); font-size: 0.8rem; line-height: 1.45; }
.cart__free-hint--ok { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); color: #86efac; }
.cart__free-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); margin-top: 0.4rem; overflow: hidden; }
.cart__free-bar span { display: block; height: 100%; background: linear-gradient(to right, var(--amber-500), var(--orange-400)); transition: width var(--t-slow); }
.cart__checkout:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.cart__methods { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.35rem; }
.cart__methods span { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--zinc-400); }

/* ── "Added to cart" popup ── */
.cart-pop { position: fixed; top: 5.25rem; right: 1rem; z-index: 90; width: min(360px, calc(100vw - 2rem)); padding: 1rem; border-radius: var(--radius-lg); background: #18181b; border: 1px solid rgba(245,158,11,0.35); box-shadow: 0 24px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 0.75rem; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.cart-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.cart-pop__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #86efac; font-size: 0.9rem; }
.cart-pop__close { background: none; border: none; color: var(--zinc-500); cursor: pointer; font-size: 1rem; }
.cart-pop__item { display: flex; gap: 0.75rem; align-items: center; }
.cart-pop__item img { width: 56px; height: 56px; object-fit: contain; background: rgba(255,255,255,0.04); border-radius: 0.5rem; }
.cart-pop__item div { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--zinc-400); }
.cart-pop__item strong { color: var(--white); font-size: 0.88rem; }
.cart-pop__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cart-pop__btn { padding: 0.6rem; border-radius: 0.6rem; background: var(--amber-500); color: var(--zinc-950); font-weight: 700; font-size: 0.82rem; text-align: center; border: none; cursor: pointer; font-family: inherit; }
.cart-pop__btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--zinc-300); }

/* ── Success page ── */
.success { padding: calc(6rem + 2vw) 0 5rem; min-height: 80vh; background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(34,197,94,0.10), transparent), var(--zinc-950); }
.success__card { max-width: 640px; margin: 0 auto; padding: 2.5rem; text-align: center; }
.success__card:hover { transform: none; }
.success__icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #86efac; font-size: 2rem; animation: pop .5s var(--ease-out-expo); }
.success__icon--wait { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); color: var(--amber-400); }
.success__icon--err { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); color: #fca5a5; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success__title { font-family: 'Archivo Black', system-ui, sans-serif; font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--white); margin-bottom: 0.5rem; }
.success__text { color: var(--zinc-400); line-height: 1.7; margin-bottom: 1.5rem; }
.success__order { display: inline-block; padding: 0.6rem 1.25rem; border-radius: 0.75rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 1.1rem; color: var(--amber-400); margin-bottom: 1.5rem; }
.success__items { text-align: left; margin: 0 auto 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.success__items li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.9rem; color: var(--zinc-300); }
.success__items li.total { font-weight: 700; color: var(--white); }
.success__addr { text-align: left; font-style: normal; white-space: pre-line; font-size: 0.875rem; color: var(--zinc-400); background: rgba(255,255,255,0.03); border-left: 3px solid var(--amber-500); padding: 0.75rem 1rem; border-radius: 0 0.5rem 0.5rem 0; margin-bottom: 1.5rem; line-height: 1.6; }
.success__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }


/* ── Responsive ── */
@media (max-width: 1024px) {
  .catalog__layout { grid-template-columns: 1fr; }
  .filters { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); max-height: none; z-index: 80; background: #111113; padding: 1.25rem 1.1rem 5rem; transform: translateX(-100%); transition: transform .3s var(--ease-out-expo); border-right: 1px solid rgba(255,255,255,0.08); }
  .filters.open { transform: none; }
  .filters__close { display: block; background: none; border: none; color: var(--zinc-400); font-size: 1.2rem; cursor: pointer; }
  .filters__apply { display: block; position: fixed; bottom: 1rem; left: 1.1rem; width: calc(min(340px, 88vw) - 2.2rem); padding: 0.85rem; border-radius: 0.75rem; border: none; background: var(--amber-500); color: var(--zinc-950); font-weight: 800; font-family: inherit; cursor: pointer; }
  .filters-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 79; }
  .results__filter-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(39,39,42,0.7); color: var(--white); font-weight: 700; font-size: 0.85rem; cursor: pointer; font-family: inherit; }
  .pdp__grid { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .pdp__details { grid-template-columns: 1fr; }
  .cartpage__grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 767px) {
  .navbar__cart { display: inline-flex; margin-left: auto; margin-right: 0.5rem; padding: 0.4rem 0.6rem; }
  .navbar__cart-text { display: none; }
  .catalog__search { flex-basis: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .pcard__body { padding: 0.7rem 0.75rem 0.6rem; }
  .pcard__name { font-size: 0.88rem; }
  .pcard__price strong { font-size: 1.1rem; }
  .pcard__add { margin: 0 0.75rem 0.75rem; padding: 0.6rem 0.3rem; font-size: 0.78rem; }
  .pcard__hl { display: none; }
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .tile { padding: 1rem; }
  .tile__subs { display: none; }
  .shop-info { grid-template-columns: 1fr; }
  .results__sort { margin-left: 0; width: 100%; justify-content: space-between; }
  .results__sort select { flex: 1; }
  .buybox__cta { position: sticky; bottom: 0.75rem; z-index: 5; padding: 0.5rem; margin: 0 -0.5rem; border-radius: 1rem; background: rgba(9,9,11,0.92); backdrop-filter: blur(10px); }
  .cline { grid-template-columns: 72px minmax(0, 1fr); }
  .cline__img { width: 72px; height: 72px; }
  .cline__total { grid-column: 2; }
}

/* ── Homepage "Sortiment" section ── */
.range { padding-block: clamp(4rem, 8vw, 7rem); background: var(--zinc-900); position: relative; }
.range__head { text-align: center; margin-bottom: 2.5rem; }
.range__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.range__cta { text-align: center; margin-top: 2rem; }
@media (max-width: 900px) { .range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }