/*!
 * Aurora storefront theme (on top of the Anvil UI framework).
 * Child themes override the tokens below (colours, fonts, radii) and rarely
 * anything else.
 */

:root {
  --accent: #2457e6;
  --accent-ink: #ffffff;
  --dark: #0f172a;
  --dark-2: #1e293b;
  --soft: #f3f5f9;
  --olive: #e8eefc;
  --line: #e5e7eb;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --font-display: var(--font-sans);
  --display-weight: 800;
  --display-tracking: -0.02em;
  --display-transform: none;
  --shop-radius: 12px;
  --card-radius: 10px;
  --btn-radius: 10px;
  --primary: var(--accent);
  --primary-hover: color-mix(in srgb, var(--accent) 86%, #000);
}

body.shop { background: #fff; color: var(--ink); }
.shop .container { max-width: 1280px; }
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); line-height: 0.98; }
.accent-dot { color: var(--accent); }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow--light { color: rgb(255 255 255 / 0.85); }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; padding: 0.75rem 1rem; background: var(--dark); color: #fff; }
.skip-link:focus { left: 1rem; }

/* Buttons tuned for the storefront */
.shop .btn { border-radius: var(--btn-radius); font-weight: 650; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-border: var(--accent); }
.btn--accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000); color: var(--accent-ink); }
.btn--dark { --btn-bg: var(--dark); --btn-fg: #fff; --btn-border: var(--dark); }
.btn--dark:hover { background: color-mix(in srgb, var(--dark) 80%, #fff); color: #fff; }
.shop .btn .icon { width: 1.1em; height: 1.1em; }
.icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink); }
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.icon-btn .icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.75; }
.link-btn { color: var(--accent); }

/* ---- Top bar ------------------------------------------------------------------ */
.topbar { background: var(--dark); color: rgb(255 255 255 / 0.92); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.25rem; }
.topbar__link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; }
.topbar__link:hover { color: #fff; text-decoration: underline; }
.topbar__link .icon { width: 0.95rem; height: 0.95rem; }
@media (max-width: 560px) { .topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__link { display: none; } }

/* ---- Header ----------------------------------------------------------------------- */
.site-header { background: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 5.25rem; }
.site-header__menu { display: none; }
.site-logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.site-logo:hover { color: var(--ink); }
.site-logo__img { height: 2.6rem; width: auto; }
.site-logo__text { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; letter-spacing: -0.02em; text-transform: uppercase; }
.site-search { position: relative; flex: 1; max-width: 640px; display: flex; align-items: center; }
.site-search > .icon { position: absolute; left: 0.95rem; color: var(--ink-2); width: 1.25rem; height: 1.25rem; pointer-events: none; }
.site-search input { width: 100%; height: 2.9rem; padding: 0 3rem 0 2.85rem; border: 1px solid #cfd3da; border-radius: 6px; background: #fff; font-size: 0.95rem; color: var(--ink); }
.site-search input::placeholder { color: var(--ink-3); }
.site-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.site-search__submit { position: absolute; right: 0.4rem; width: 2.2rem; height: 2.2rem; border-radius: 6px; display: grid; place-items: center; color: var(--ink-2); }
.site-search__submit:hover { background: var(--soft); color: var(--ink); }
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.cart-btn { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.4rem; border-radius: 10px; }
.cart-btn:hover { background: var(--soft); color: var(--ink); }
.cart-btn__icon { position: relative; display: inline-grid; }
.cart-btn__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
.cart-btn__count { position: absolute; top: -0.45rem; right: -0.55rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800; display: grid; place-items: center; }

/* ---- Main navigation ----------------------------------------------------------------- */
.site-nav { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.site-nav__inner { display: flex; align-items: stretch; min-height: 3rem; }
.megamenu { position: static; display: flex; }
.megamenu__toggle { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0 2rem 0 0; font-weight: 600; font-size: 0.9rem; color: var(--ink); white-space: nowrap; }
.megamenu__toggle .icon { width: 1.2rem; height: 1.2rem; }
.megamenu__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px -18px rgb(0 0 0 / 0.25); padding: 2rem max(1.25rem, calc((100vw - 1280px) / 2 + 2rem)); display: none; }
.megamenu.is-open .megamenu__panel { display: block; }
.megamenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem 2rem; }
.megamenu__col { display: flex; flex-direction: column; gap: 0.35rem; }
.megamenu__title { font-weight: 700; color: var(--ink); text-decoration: none; margin-bottom: 0.25rem; }
.megamenu__link { color: var(--ink-2); text-decoration: none; font-size: 0.9rem; }
.megamenu__title:hover, .megamenu__link:hover { color: var(--accent); }
.megamenu__all { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.site-nav__menu { display: flex; flex: 1; margin: 0; padding: 0; list-style: none; }
.site-nav__menu li { flex: 1; display: flex; }
.site-nav__menu a { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 1rem; font-size: 0.9rem; font-weight: 500; color: var(--ink); text-decoration: none; border-left: 1px solid var(--line); white-space: nowrap; }
.site-nav__menu a:hover { color: var(--accent); background: var(--soft); }
.megamenu__toggle { border-right: 0; }

@media (max-width: 1023px) {
  .site-header__menu { display: inline-grid; margin-left: -0.5rem; }
  .site-header__inner { min-height: 4rem; gap: 0.5rem; }
  .site-logo__img { height: 2rem; }
  .site-search { order: 5; flex-basis: 100%; max-width: none; margin-bottom: 0.75rem; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { display: none; }
  .cart-btn__label { display: none; }
}

/* ---- Mobile navigation drawer ----------------------------------------------------- */
.mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav__label { margin-top: 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; }
.mobile-nav__group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group summary a, .mobile-nav__link { color: var(--ink); text-decoration: none; font-weight: 600; }
.mobile-nav__link { padding: 0.7rem 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.5rem; }
.mobile-nav__sub { display: block; padding: 0.5rem 0 0.5rem 1rem; color: var(--ink-2); text-decoration: none; }
.site-search--drawer { margin-bottom: 0.5rem; }

/* ---- Hero -------------------------------------------------------------------------------- */
.hero { position: relative; color: #fff; background: var(--dark) var(--hero-image) right center / cover no-repeat; min-height: clamp(340px, 28vw, 500px); display: flex; align-items: center; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 10 10 / 0.82) 0%, rgb(10 10 10 / 0.55) 38%, rgb(10 10 10 / 0) 70%); }
.hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero__title { font-size: clamp(2.75rem, 1.6rem + 5vw, 5.4rem); margin: 0.85rem 0 1rem; color: #fff; max-width: 18ch; }
.hero__text { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); max-width: 34ch; color: rgb(255 255 255 / 0.92); line-height: 1.4; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }
.hero__link { color: #fff; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; padding-bottom: 0.25rem; border-bottom: 2px solid rgb(255 255 255 / 0.6); }
.hero__link:hover { color: #fff; border-color: #fff; }
@media (max-width: 720px) {
  .hero { min-height: 460px; align-items: flex-end; background-position: 68% center; }
  .hero::before { background: linear-gradient(0deg, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.45) 60%, rgb(10 10 10 / 0.15) 100%); }
}

/* ---- Finder strip ------------------------------------------------------------------------- */
.finder { background: var(--soft); border-bottom: 1px solid var(--line); }
.finder__inner { display: flex; align-items: center; gap: 1.5rem 2rem; padding-block: 1.6rem; flex-wrap: wrap; }
.finder__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); flex: 1 1 auto; }
@media (min-width: 900px) { .finder__title { white-space: nowrap; } .finder__fields { flex: 0 1 560px; } }
.finder__fields { display: flex; gap: 1rem; flex: 2 1 520px; align-items: center; }
.finder__field { flex: 1; }
.finder .select, .finder .input { height: 3rem; border-radius: 4px; border-color: #cfd3da; background-color: #fff; }
.finder .btn { min-height: 3rem; border-radius: 4px; white-space: nowrap; }
@media (max-width: 720px) { .finder__fields { flex-direction: column; align-items: stretch; } }

/* ---- USP row --------------------------------------------------------------------------------- */
.usp { border-bottom: 1px solid var(--line); background: #fff; }
.usp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.usp__item { display: flex; align-items: center; gap: 1.25rem; padding: 1.6rem 2rem; border-left: 1px solid var(--line); }
.usp__item:first-child { border-left: 0; padding-left: 0.5rem; }
.usp__icon { flex-shrink: 0; color: var(--ink); }
.usp__icon .icon { width: 2.1rem; height: 2.1rem; stroke-width: 1.4; }
.usp__item strong { display: block; font-size: 0.95rem; font-weight: 650; margin-bottom: 0.15rem; }
.usp__item span { font-size: 0.85rem; color: var(--ink-3); }
@media (max-width: 860px) { .usp__grid { grid-template-columns: minmax(0, 1fr); } .usp__item { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0; } .usp__item:first-child { border-top: 0; } }

/* ---- Generic sections ------------------------------------------------------------------------- */
.section { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--soft { background: var(--soft); }
.section--flush { padding-top: 1rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 1200px) { .section-head { flex-wrap: nowrap; } }
.section-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.section-title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem); }
.section-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.section-link:hover { color: var(--accent); }
.section-link .icon { width: 1rem; height: 1rem; }
.section-note { font-size: 0.8rem; color: var(--ink-3); }
.tag { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; background: var(--olive); color: var(--ink); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; margin-top: 1rem; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid #d8dbe0; border-radius: 4px; background: #fff; color: var(--ink); font-size: 0.82rem; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active, .chip[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.chip__count { color: var(--ink-3); font-size: 0.75rem; }

/* ---- Category tiles --------------------------------------------------------------------------- */
.cat-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.cat-tile { position: relative; display: flex; flex-direction: column; background: #e9eae6; border-radius: 2px; text-decoration: none; color: var(--ink); overflow: hidden; min-height: 175px; transition: background var(--duration); }
.cat-tile:hover { background: #dfe1dc; color: var(--ink); }
.cat-tile__img { flex: 1; display: grid; place-items: center; padding: 1rem 1rem 0; }
.cat-tile__img img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; transition: transform 300ms var(--ease); }
.cat-tile:hover .cat-tile__img img { transform: scale(1.05); }
.cat-tile__img .icon { width: 3rem; height: 3rem; color: var(--ink-3); }
.cat-tile__name { padding: 0.5rem 2.5rem 0.9rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--display-tracking); }
.cat-tile__arrow { position: absolute; right: 0.85rem; bottom: 0.9rem; }
.cat-tile__arrow .icon { width: 1rem; height: 1rem; }
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-tile { min-height: 150px; } }

/* ---- Product cards ---------------------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.product-grid--listing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .product-grid, .product-grid--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; transition: box-shadow var(--duration), border-color var(--duration); }
.pcard:hover { border-color: #c9ccd2; box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.35); }
.pcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 0.72; padding: 1rem 1.25rem; background: #fff; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 300ms var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__placeholder { color: #c4c8cf; }
.pcard__placeholder .icon { width: 3rem; height: 3rem; }
.pcard__badge { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.2rem 0.5rem; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; border-radius: 3px; }
.pcard__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 1.1rem 1.1rem; flex: 1; }
.pcard__cat { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pcard__title { font-size: 0.98rem; font-weight: 650; line-height: 1.3; font-family: var(--font-sans); letter-spacing: 0; }
.pcard__title a { color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__title a:hover { color: var(--accent); }
.pcard__ref { font-size: 0.8rem; color: var(--ink-3); }
.pcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.6rem; }
.price-box { display: flex; flex-direction: column; flex-wrap: wrap; line-height: 1.1; }
.price-box .price-box__lowest { width: 100%; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 400; line-height: 1.3; color: var(--ink-3); }
.price-box .price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.price-box .price.price--old { font-size: 0.85rem; font-weight: 500; letter-spacing: 0; }
.price--sale { color: var(--accent); }
.pcard__cart { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--dark); color: #fff; border-radius: 4px; flex-shrink: 0; transition: background var(--duration), transform var(--duration); }
.pcard__cart:hover { background: var(--accent); }
.pcard__cart:active { transform: scale(0.95); }
.pcard__cart .icon { width: 1.25rem; height: 1.25rem; }
.pcard__cart.is-added { background: var(--success); }
.pcard__out { font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
@media (max-width: 560px) { .pcard__body { padding: 0 0.75rem 0.75rem; } .price-box .price { font-size: 1.1rem; } .pcard__cart { width: 2.4rem; height: 2.4rem; } .pcard__media { padding: 0.75rem; } }

/* ---- Split banner -------------------------------------------------------------------------------- */
.banner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); background: #fff; min-height: 470px; overflow: hidden; }
.banner--reverse { direction: rtl; }
.banner--reverse > * { direction: ltr; }
.banner__text { display: flex; align-items: center; justify-content: flex-end; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem); }
.banner__inner { width: 100%; max-width: 560px; }
.banner__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.1rem); margin: 0.7rem 0 1rem; }
.banner__lead { color: var(--ink-2); font-size: 1.05rem; max-width: 44ch; }
.banner__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.5rem 0 1.75rem; }
.banner__links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink); font-weight: 600; font-size: 0.92rem; text-decoration: none; padding-bottom: 0.3rem; border-bottom: 1px solid #cfd3da; }
.banner__links a + a { padding-left: 1.5rem; border-left: 1px solid #cfd3da; }
.banner__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.banner__links .icon { width: 0.95rem; height: 0.95rem; }
.banner__media { background: var(--dark) var(--banner-image) center / cover no-repeat; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 900px) { .banner { grid-template-columns: minmax(0, 1fr); } .banner__media { min-height: 260px; clip-path: none; order: -1; } .banner__text { justify-content: flex-start; } .banner__links a + a { border-left: 0; padding-left: 0; } }

/* ---- Help strip ---------------------------------------------------------------------------------- */
.help-strip { background: var(--olive); }
.help-strip__inner { display: flex; align-items: center; gap: 2rem; padding-block: 1.75rem; flex-wrap: wrap; }
.help-strip__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 2px solid var(--ink); border-radius: 50%; flex-shrink: 0; }
.help-strip__icon .icon { width: 1.6rem; height: 1.6rem; }
.help-strip__text { flex: 1; min-width: 240px; padding-left: 2rem; border-left: 1px solid rgb(0 0 0 / 0.2); }
.help-strip__text h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.help-strip__text p { color: var(--ink-2); margin-top: 0.25rem; }
.help-strip .btn { border-radius: 4px; }
@media (max-width: 720px) { .help-strip__text { border-left: 0; padding-left: 0; } .help-strip .btn { width: 100%; } }

/* ---- Footer ------------------------------------------------------------------------------------ */
.site-footer { background: var(--dark); color: rgb(255 255 255 / 0.78); font-size: 0.88rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); padding-block: 2.75rem 2rem; }
.site-footer__brand { padding-right: 2rem; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; }
.site-footer__tagline { margin: 0.6rem 0 0; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.05; color: #fff; }
.site-footer__about { margin: 0; max-width: 36ch; color: rgb(255 255 255 / 0.7); font-size: 0.88rem; line-height: 1.6; }
.site-footer__badges { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.site-footer__badges li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 99px; font-size: 0.76rem; color: rgb(255 255 255 / 0.85); }
.site-footer__badges .icon { width: 0.95rem; height: 0.95rem; color: var(--accent); }
.site-footer__social { display: flex; gap: 0.45rem; margin-top: 0.25rem; }
.site-footer__social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.2); color: #fff; }
.site-footer__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-footer__social .icon { width: 1.1rem; height: 1.1rem; }
.site-logo--footer { color: #fff; }
/* Light-background logo shown on a dark surface when no dark version was uploaded. */
.site-logo__img--on-dark { filter: brightness(0) invert(1); }
.site-logo--footer:hover { color: #fff; }
.site-footer__col { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 2.5rem; border-left: 1px solid rgb(255 255 255 / 0.14); }
.site-footer__col h2 { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 650; color: #fff; margin-bottom: 0.4rem; letter-spacing: 0; }
.site-footer a, .site-footer__col span { color: rgb(255 255 255 / 0.72); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.site-footer a:hover { color: #fff; }
.site-footer__col .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem 1.4rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 0; } .site-footer__brand { grid-column: 1 / -1; } .site-footer__col { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } .site-footer__bottom { flex-direction: column; } }

/* ---- Page hero, breadcrumbs ------------------------------------------------------------------- */
.page-hero { background: var(--soft); border-bottom: 1px solid var(--line); padding-block: 1.5rem 1.75rem; }
.page-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-top: 0.35rem; }
.page-lead { margin-top: 0.75rem; color: var(--ink-2); max-width: 75ch; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: #c3c7ce; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.page-narrow { max-width: 1120px; padding-block: 2rem 4rem; }

/* ---- Contact page ----------------------------------------------------------------------------- */
.contact-hero { padding: 1.25rem 0 2rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.contact-hero__grid { display: grid; gap: 1.5rem; margin-top: 0.75rem; }
@media (min-width: 960px) { .contact-hero__grid { grid-template-columns: 1.35fr 1fr; align-items: end; gap: 2.5rem; } }
.contact-hero__title { margin: 0.35rem 0 0.65rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.05; }
.contact-hero__lead { color: var(--ink-2); font-size: 1.02rem; max-width: 62ch; margin: 0; }
.contact-hero__lead p { margin: 0 0 0.55rem; }
.contact-hero__hint { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.85rem 0 0; font-size: 0.88rem; }
.contact-hero__hint .icon { width: 1rem; height: 1rem; }
.contact-hero__facts { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.contact-hero__facts li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.95rem; border-radius: var(--card-radius); background: #fff; border: 1px solid var(--line); }
.contact-hero__facts .icon { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; color: var(--accent); }
.contact-hero__facts strong { display: block; font-size: 0.92rem; }
.contact-hero__facts span { font-size: 0.85rem; color: var(--ink-2); }

.contact-layout { display: grid; gap: 2rem; padding-block: 2.25rem 4rem; align-items: start; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.75rem; } }
.contact-section-title { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 750; font-family: var(--font-sans); }
.contact-channels { display: grid; gap: 0.65rem; margin-bottom: 2rem; }
.contact-channel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem 1rem; align-items: center; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; text-decoration: none; color: inherit; transition: border-color 150ms, box-shadow 150ms; }
.contact-channel:hover { border-color: var(--dark); box-shadow: 0 4px 18px rgb(0 0 0 / 0.06); }
.contact-channel__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); }
.contact-channel__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-channel__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.contact-channel__value { display: block; font-size: 1.05rem; color: var(--ink); margin-top: 0.15rem; word-break: break-word; }
.contact-channel > .icon:last-child { width: 1.1rem; height: 1.1rem; color: var(--ink-3); }

.contact-panels { display: grid; gap: 1rem; }
@media (min-width: 640px) { .contact-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-panel { padding: 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-start; }
.contact-panel--soft { background: var(--soft); }
.contact-panel__title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1rem; font-weight: 750; }
.contact-panel__title .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.contact-panel p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); flex: 1; }

.contact-card { padding: 1.35rem 1.4rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; position: sticky; top: calc(var(--header-h, 72px) + 1.25rem); }
.contact-card__title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 750; }
.contact-dl { margin: 0; display: grid; gap: 0.85rem; }
.contact-dl div { display: grid; gap: 0.2rem; }
.contact-dl dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.contact-dl dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.contact-address { line-height: 1.55; }
.contact-map-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.15rem; font-size: 0.88rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.contact-map-link:hover { text-decoration: underline; }
.contact-map-link .icon { width: 1rem; height: 1rem; }

/* ---- Part finder help page -------------------------------------------------------------------- */
.pf-hero { padding: 1.25rem 0 2rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.pf-hero__grid { display: grid; gap: 1.5rem; margin-top: 0.75rem; }
@media (min-width: 960px) { .pf-hero__grid { grid-template-columns: 1.25fr 1fr; align-items: end; gap: 3rem; } }
.pf-hero__title { margin: 0.35rem 0 0.75rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.05; }
.pf-hero__lead { color: var(--ink-2); font-size: 1.05rem; max-width: 58ch; margin: 0; line-height: 1.55; }
.pf-hero__facts { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pf-hero__facts li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.95rem; border-radius: var(--card-radius); background: #fff; border: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-2); line-height: 1.4; }
.pf-hero__facts .icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; color: var(--success); }
.pf-hero__facts strong { font-weight: 650; color: var(--ink); }

.pf-nav-wrap { padding-top: 1.25rem; }
.pf-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.pf-nav__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border-radius: calc(var(--shop-radius) - 2px); font-size: 0.88rem; font-weight: 650; color: var(--ink-2); text-decoration: none; transition: background 150ms, color 150ms; }
.pf-nav__link span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--soft); font-size: 0.78rem; font-weight: 800; color: var(--ink); }
.pf-nav__link:hover { background: var(--soft); color: var(--ink); }
.pf-nav__link:hover span { background: var(--accent); color: var(--accent-ink, #fff); }

.pf-layout { display: grid; gap: 2rem; padding-block: 1.75rem 4rem; align-items: start; }
@media (min-width: 1024px) { .pf-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; } }
.pf-steps { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.pf-step { scroll-margin-top: calc(var(--header-h, 72px) + 4.5rem); margin: 0; }
.pf-step .ask-step__title .icon { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.pf-step__lead { margin: -0.35rem 0 1rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; max-width: 65ch; }
.pf-step__tool { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--shop-radius); background: var(--soft); border: 1px solid var(--line); }
.pf-step--accent .pf-step__tool { background: color-mix(in srgb, var(--accent) 6%, #fff); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.pf-step__tool--actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.pf-step__fallback { margin: 0; font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.pf-search__row { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.35rem; }
.pf-search__row .input { flex: 1; min-width: 12rem; min-height: 3rem; }
.pf-search__row .btn { min-height: 3rem; }
.pf-finder { display: grid; gap: 0.85rem; }
.pf-finder__fields { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .pf-finder__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-finder .select, .pf-finder .input { min-height: 2.85rem; }
.pf-step__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; }
.pf-step__notes li { display: flex; gap: 0.5rem; align-items: flex-start; }
.pf-step__notes li::before { content: "·"; font-weight: 800; color: var(--accent); flex-shrink: 0; }

.pf-block-title { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 750; font-family: var(--font-sans); letter-spacing: -0.02em; }
.pf-where { margin-bottom: 2.5rem; }
.pf-where__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .pf-where__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-where__grid li { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.pf-where__icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--soft); flex-shrink: 0; }
.pf-where__icon .icon { width: 1.1rem; height: 1.1rem; color: var(--ink); }

.pf-faq { margin-bottom: 1rem; }
.pf-faq .faq { max-width: none; }
.pf-aside { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 1024px) { .pf-aside { position: sticky; top: calc(var(--header-h, 72px) + 1rem); } }
.pf-aside-cta { margin: 0; }
.pf-aside-steps { padding: 1.15rem 1.25rem; }
.pf-aside-steps__title { margin: 0 0 1rem; font-size: 1rem; font-weight: 750; }
.pf-aside-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.pf-aside-steps__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.pf-aside-steps__n { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font-size: 0.8rem; font-weight: 800; }
.pf-aside-steps__list strong { display: block; font-size: 0.88rem; margin-bottom: 0.1rem; }
.pf-aside-steps__list p { margin: 0; font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
.pf-aside-contact { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); display: grid; gap: 0.45rem; }
.pf-aside-contact__title { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.pf-aside-contact a { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.pf-aside-contact a:hover { color: var(--accent); }
.pf-aside-contact .icon { width: 1rem; height: 1rem; }

/* ---- Listing -------------------------------------------------------------------------------- */
.listing { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; padding-block: 2rem 4rem; align-items: start; }
.filters { position: sticky; top: 6.5rem; }
.filters__form { display: flex; flex-direction: column; gap: 1.25rem; }
.filters__group { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.filters__title { font-weight: 700; font-size: 0.9rem; }
.filters__range { display: flex; align-items: center; gap: 0.5rem; }
.filters__list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 260px; overflow-y: auto; }
.listing__toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.listing__count { color: var(--ink-3); font-size: 0.9rem; margin-right: auto; }
.listing__sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.listing__sort .select { width: auto; }
@media (max-width: 1023px) {
  .listing { grid-template-columns: minmax(0, 1fr); }
  .filters { position: fixed; inset: 0 auto 0 0; z-index: 95; width: min(340px, 90vw); background: #fff; padding: 1.25rem; overflow-y: auto; transform: translateX(-100%); transition: transform 240ms var(--ease); box-shadow: var(--shadow-lg); }
  .filters.is-open { transform: none; }
}
.pager { display: flex; justify-content: center; gap: 0.35rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span { min-width: 2.6rem; height: 2.6rem; display: grid; place-items: center; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.pager a:hover { border-color: var(--ink); }
.pager [aria-current="page"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.pager__gap { border: 0 !important; }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; padding: 4rem 1rem; color: var(--ink-2); }
.empty-state h2 { font-size: 1.4rem; color: var(--ink); }
.empty-state__icon { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink-2); }
.empty-state__icon .icon { width: 2rem; height: 2rem; }
.empty-state--page { padding-block: 5rem; }
.empty-state__code { font-size: 7rem; color: var(--accent); line-height: 1; }
.site-search--inline { width: 100%; max-width: 480px; }

/* ---- Product page ------------------------------------------------------------------------- */
.product { padding-block: 1.5rem 4rem; }
.product__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 1rem; align-items: start; }
.gallery { position: sticky; top: 6.5rem; }
.gallery__main { position: relative; aspect-ratio: 1 / 0.9; display: grid; place-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; overflow-x: auto; }
.gallery__thumb { width: 5rem; height: 5rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; flex-shrink: 0; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.product__info { display: flex; flex-direction: column; gap: 0.9rem; }
.product__title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.02; }
.product__codes { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.85rem; color: var(--ink-3); margin: 0; }
.product__codes div { display: flex; gap: 0.35rem; }
.product__codes dd { margin: 0; color: var(--ink); font-weight: 600; }
.product__lead { color: var(--ink-2); font-size: 1.02rem; }
.buy-box { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); }
.buy-box__price { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.buy-box__price .price-box { flex-direction: row; align-items: baseline; gap: 0.75rem; }
.buy-box__price .price { font-size: 2.1rem; }
.buy-box__vat { font-size: 0.8rem; color: var(--ink-3); }
.stock { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; color: var(--success); }
.stock .icon { width: 1.1rem; height: 1.1rem; }
.stock--low { color: var(--warning); }
.stock--out { color: var(--danger); }
.buy-box__form { display: flex; gap: 0.75rem; }
.buy-box__form .qty { background: #fff; }
.buy-box__perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-2); }
.buy-box__perks li { display: flex; align-items: center; gap: 0.5rem; }
.buy-box__perks .icon { width: 1.1rem; height: 1.1rem; color: var(--ink); }
.xrefs { padding: 1.1rem 1.25rem; border: 1px dashed #cfd3da; border-radius: var(--shop-radius); }
.xrefs__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.75rem; }
.xrefs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tabs-block { margin-top: 3rem; }
.tabs-block .tabs__tab { font-size: 0.95rem; padding: 0.9rem 1.25rem; }
.tabs-block .tabs__tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs-block__panel { padding: 1.75rem 0; max-width: 80ch; }
.spec-table { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 0.92rem; }
.spec-table th, .spec-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.spec-table th { width: 40%; color: var(--ink-2); font-weight: 500; background: var(--soft); }
.sticky-buy { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgb(0 0 0 / 0.4); }
.sticky-buy__info { min-width: 0; display: flex; flex-direction: column; }
.sticky-buy__info strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy__info .price { font-size: 1.1rem; }
@media (max-width: 900px) {
  .product__grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
  .sticky-buy:not([hidden]) { display: flex; }
}

/* ---- Cart & summaries ----------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; margin-top: 1.5rem; }
.cart-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cart-line__img { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0.4rem; color: var(--ink-3); }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cart-line__name { font-weight: 650; color: var(--ink); text-decoration: none; }
.cart-line__name:hover { color: var(--accent); }
.cart-line__total { min-width: 6.5rem; text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img info remove" "img qty total"; gap: 0.5rem 0.75rem; }
  .cart-line__img { grid-area: img; width: 72px; height: 72px; }
  .cart-line__info { grid-area: info; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__total { grid-area: total; min-width: 0; }
  .cart-line > form:last-child { grid-area: remove; justify-self: end; }
}
.summary { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); }
.summary--sticky { position: static; }
.checkout__aside { position: sticky; top: 6.5rem; }
.summary__title { font-size: 1.15rem; font-weight: 750; }
.summary__rows { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.92rem; }
.summary__rows div { display: flex; justify-content: space-between; gap: 1rem; }
.summary__rows dd { margin: 0; font-weight: 600; white-space: nowrap; }
.summary__total { padding-top: 0.75rem; border-top: 1px solid #d6d9de; font-size: 1.15rem; }
.summary__total dd { font-weight: 800; }
.summary__trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 0.82rem; color: var(--ink-2); }
.summary__trust li { display: flex; gap: 0.5rem; align-items: center; }
.summary__trust .icon { width: 1rem; height: 1rem; }
.summary__note { font-size: 0.78rem; color: var(--ink-3); text-align: center; }
.coupon summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--accent); }
.coupon-applied { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.8rem; background: #fff; border: 1px dashed var(--success); border-radius: 8px; font-weight: 650; color: var(--success); }
.mini-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.mini-lines li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; }
.mini-lines__img { position: relative; width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0.25rem; }
.mini-lines__img img { width: 100%; height: 100%; object-fit: contain; }
.mini-lines__qty { position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 0.25rem; border-radius: 999px; background: var(--dark); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.mini-lines__name { flex: 1; min-width: 0; }
@media (max-width: 1000px) { .cart-layout { grid-template-columns: minmax(0, 1fr); } }

/* Mini cart drawer */
.mini-cart-line { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.mini-cart-line img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; padding: 0.25rem; }
.mini-cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; }
.mini-cart-line__body a { color: var(--ink); font-weight: 600; text-decoration: none; }
.mini-cart-empty { text-align: center; color: var(--ink-3); padding: 3rem 0; }

/* ---- Checkout -------------------------------------------------------------------------------- */
.checkout { padding-block: 1.5rem 4rem; }
.checkout__head { margin-bottom: 1.5rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-2); font-size: 0.88rem; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.checkout__steps { display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--ink-3); counter-reset: s; }
.checkout__steps li { counter-increment: s; display: flex; align-items: center; gap: 0.45rem; }
.checkout__steps li::before { content: counter(s); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 700; font-size: 0.75rem; }
.checkout__steps .is-done::before { content: "✓"; background: var(--success); color: #fff; }
.checkout__steps .is-current { color: var(--ink); font-weight: 650; }
.checkout__steps .is-current::before { background: var(--dark); color: #fff; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; align-items: start; }
.checkout__main { display: flex; flex-direction: column; gap: 1.25rem; }
.co-step { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.co-step__title { display: flex; align-items: center; gap: 0.75rem; font-size: 1.2rem; font-weight: 750; margin-bottom: 1.1rem; font-family: var(--font-sans); letter-spacing: -0.01em; }
.co-step__title span { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: #fff; font-size: 0.85rem; }
.co-step__hint { margin-top: 0.75rem; font-size: 0.88rem; color: var(--ink-3); }
.co-sub { margin-top: 1.5rem; }
.co-sub__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; font-family: var(--font-sans); letter-spacing: 0; }
.checkout .form-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.checkout .form-grid > * { grid-column: span 12; }
@media (min-width: 640px) {
  .checkout .form-grid > .w-half { grid-column: span 6; }
  .checkout .form-grid > .w-third { grid-column: span 4; }
  .checkout .form-grid > .w-two-thirds { grid-column: span 8; }
  .checkout .form-grid > .w-quarter { grid-column: span 3; }
}
.checkout .choice { border-radius: 10px; }
.checkout .choice:has(input:checked) { border-color: var(--dark); background: var(--soft); box-shadow: 0 0 0 1px var(--dark); }
.checkout .choice:has(input:checked) .choice__mark { border-color: var(--dark); background: var(--dark); }
.point-picker { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: var(--soft); display: flex; flex-direction: column; gap: 0.75rem; }
.point-picker__selected { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: 8px; background: #fff; border: 1px solid var(--success); font-weight: 600; font-size: 0.9rem; }
.point-picker__results { display: flex; flex-direction: column; gap: 0.5rem; max-height: 320px; overflow-y: auto; }
.point { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; width: 100%; }
.point:hover { border-color: var(--ink); }
.point strong { display: block; }
.point span { color: var(--ink-3); font-size: 0.82rem; }
.point small { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.check.has-error input { border-color: var(--danger); }
@media (max-width: 1000px) { .checkout__grid { grid-template-columns: minmax(0, 1fr); } .checkout__aside { position: static; } }

/* ---- Order, auth, blog --------------------------------------------------------------------- */
.order-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 2rem 0; }
.order-hero__icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; }
.order-hero__icon .icon { width: 2.2rem; height: 2.2rem; stroke-width: 3; }
.order-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--shop-radius); overflow: hidden; margin: 1.5rem 0; }
.order-status > div { background: #fff; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
@media (max-width: 720px) { .order-status { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pay-box, .bank-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); }
.bank-box { display: block; }
.bank-box h2 { font-size: 1.1rem; margin-bottom: 0.85rem; font-family: var(--font-sans); letter-spacing: 0; }
.order-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; }
@media (max-width: 860px) { .order-grid { grid-template-columns: minmax(0, 1fr); } }
.auth-page { display: grid; place-items: center; padding-block: 3rem 5rem; }
.auth-card { width: min(520px, 100%); display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }
.post { max-width: 820px; padding-block: 1.5rem 4rem; }
.post__head { margin: 1rem 0 1.5rem; }
.post__title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.post__meta { color: var(--ink-3); margin-top: 0.75rem; }
.post__cover { width: 100%; border-radius: var(--shop-radius); margin-bottom: 2rem; }
.post__content { font-size: 1.05rem; }

/* ---- Misc ---------------------------------------------------------------------------------- */
.address-block { font-style: normal; line-height: 1.6; }
.text-warning { color: var(--warning); }

/* Product tabs scroll sideways on phones instead of wrapping onto a second row. */
@media (max-width: 640px) {
  [data-product-tabs] .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  [data-product-tabs] .chips::-webkit-scrollbar { display: none; }
}
.site-footer__link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ==========================================================================
   Product page v2 – summary, fitment, buy box, long-form details
   ========================================================================== */
.gallery__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__zoom img { width: 100%; height: 100%; object-fit: contain; transition: transform 300ms var(--ease); }
@media (hover: hover) { .gallery__zoom:hover img { transform: scale(1.04); } }
.gallery__badges { position: absolute; top: 1rem; left: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.gallery__badges .pcard__badge { position: static; }
.gallery__hint { position: absolute; right: 0.85rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--ink-3); background: rgb(255 255 255 / 0.85); padding: 0.25rem 0.55rem; border-radius: 99px; }
.gallery__hint .icon { width: 0.9rem; height: 0.9rem; }

.product__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.product__brand { font-size: 0.75rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.product__brand:hover { color: var(--accent); }
.product__ref { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); font: inherit; font-size: 0.8rem; color: var(--ink-2); cursor: copy; }
.product__ref strong { color: var(--ink); letter-spacing: 0.02em; }
.product__ref .icon { width: 0.85rem; height: 0.85rem; color: var(--ink-3); }

.fitment { padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line)); border-left: 4px solid var(--success); background: color-mix(in srgb, var(--success) 5%, #fff); border-radius: var(--shop-radius); display: grid; gap: 0.6rem; }
.fitment__title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.fitment__title .icon { color: var(--success); width: 1.1rem; height: 1.1rem; }
.fitment__list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fitment__help { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; }
.fitment__help:hover { color: var(--accent); }
.fitment__help .icon { width: 0.9rem; height: 0.9rem; }
.chip--soft { background: var(--dark); border-color: var(--dark); color: #fff; }
.chip--soft:hover { color: #fff; opacity: 0.9; }
.chip--link { border-style: dashed; }

.buy-box__price { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.buy-box__saving { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--success); }
.dispatch { display: flex; align-items: flex-start; gap: 0.5rem; margin: -0.35rem 0 0; font-size: 0.88rem; color: var(--ink-2); }
.dispatch .icon { width: 1.1rem; height: 1.1rem; color: var(--ink); flex-shrink: 0; margin-top: 0.1rem; }
.dispatch strong { color: var(--ink); }
.buy-box__facts { list-style: none; padding: 1rem 0 0; margin: 0; border-top: 1px solid var(--line); display: grid; gap: 0.55rem; font-size: 0.85rem; color: var(--ink-2); }
.buy-box__facts li { display: flex; align-items: flex-start; gap: 0.55rem; }
.buy-box__facts .icon { width: 1.05rem; height: 1.05rem; color: var(--ink); flex-shrink: 0; margin-top: 0.1rem; }

.help-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1.1rem; border-radius: var(--shop-radius); background: var(--dark); color: #fff; flex-wrap: wrap; }
.help-card > div { flex: 1; min-width: 12rem; }
.help-card strong { font-size: 0.95rem; }
.help-card p { margin: 0.1rem 0 0; font-size: 0.82rem; color: rgb(255 255 255 / 0.75); }
.help-card__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgb(255 255 255 / 0.1); flex-shrink: 0; }
.help-card__icon .icon { width: 1.3rem; height: 1.3rem; }
.help-card .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.help-card .btn--ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }

.product-nav { position: sticky; top: var(--header-h, 72px); z-index: 20; display: flex; gap: 0.25rem; margin-top: 3rem; padding: 0.35rem 0; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.product-nav::-webkit-scrollbar { display: none; }
.product-nav__tab { flex-shrink: 0; padding: 0.7rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -0.4rem; cursor: pointer; font-family: inherit; }
.product-nav__tab:hover { color: var(--ink); }
.product-nav__tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.product-details { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.product-details__aside { position: sticky; top: calc(var(--header-h, 72px) + 4rem); padding-top: 2.25rem; }
.mini-buy { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.mini-buy img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.mini-buy strong { display: block; font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.25rem; }
.mini-buy .price { font-size: 1.35rem; }
.pd-section { padding: 2.25rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h, 72px) + 4rem); }
.pd-section:last-child { border-bottom: 0; }
.pd-section__title { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem); margin: 0 0 1rem; }
.pd-section .prose { max-width: 75ch; }
.pd-section > p { max-width: 75ch; }
.spec-table--delivery th { background: none; width: auto; font-weight: 700; color: var(--ink-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.spec-table .num { text-align: right; white-space: nowrap; }
.text-success { color: var(--success); }

.pd-delivery__lead { max-width: 52rem; margin: -0.35rem 0 1.5rem; line-height: 1.6; }
.pd-delivery__main { max-width: 52rem; }
.pd-delivery__highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; }
.pd-delivery__highlight { display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); }
.pd-delivery__highlight-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.pd-delivery__highlight-icon .icon { width: 1.2rem; height: 1.2rem; color: var(--ink); }
.pd-delivery__highlight-title { margin: 0 0 0.25rem; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.pd-delivery__highlight-text { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.pd-delivery__highlight-text strong { color: var(--ink); }

.pd-delivery__progress { margin-bottom: 1.75rem; padding: 1rem 1.1rem; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--shop-radius); background: color-mix(in srgb, var(--accent) 4%, #fff); }
.pd-delivery__progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; margin-bottom: 0.65rem; font-size: 0.88rem; font-weight: 650; color: var(--ink); }
.pd-delivery__progress-track { height: 0.45rem; border-radius: 99px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.pd-delivery__progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success))); transition: width 400ms var(--ease); }
.pd-delivery__free-badge { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1.75rem; padding: 0.55rem 0.85rem; border-radius: 99px; background: color-mix(in srgb, var(--success) 12%, #fff); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line)); font-size: 0.88rem; font-weight: 650; color: var(--success); }
.pd-delivery__free-badge .icon { width: 1.1rem; height: 1.1rem; }

.pd-delivery__subtitle { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 750; font-family: var(--font-sans); letter-spacing: -0.01em; }
.ship-cards { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.65rem; }
.ship-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem 1rem; align-items: start; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.ship-card.is-free { border-color: color-mix(in srgb, var(--success) 40%, var(--line)); background: color-mix(in srgb, var(--success) 4%, #fff); }
.ship-card.is-unavailable { opacity: 0.72; background: var(--soft); }
.ship-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.ship-card__icon .icon { width: 1.35rem; height: 1.35rem; color: var(--ink); }
.ship-card__name { display: block; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.ship-card__meta, .ship-card__time, .ship-card__hint { margin: 0.35rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); display: flex; align-items: flex-start; gap: 0.35rem; }
.ship-card__meta .icon, .ship-card__time .icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; margin-top: 0.15rem; }
.ship-card__hint { color: var(--accent); font-weight: 600; }
.ship-card__price { font-size: 1.05rem; font-weight: 750; white-space: nowrap; padding-top: 0.15rem; text-align: right; }

.pd-delivery__policies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.pd-delivery__policy { padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.pd-delivery__policy-title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem; font-size: 0.95rem; font-weight: 750; color: var(--ink); }
.pd-delivery__policy-title .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.pd-delivery__policy p { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--ink-2); max-width: none; }
.pd-delivery__more { margin: 0; }
.pd-delivery__more .btn { gap: 0.45rem; }

@media (max-width: 900px) {
  .pd-delivery__highlights { grid-template-columns: minmax(0, 1fr); }
  .pd-delivery__policies { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ship-card { grid-template-columns: auto minmax(0, 1fr); }
  .ship-card__price { grid-column: 2; text-align: left; padding-top: 0; }
}

.faq { display: grid; gap: 0.5rem; max-width: 80ch; }
.faq__item { border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; font-weight: 650; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform 200ms; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item p { margin: 0; padding: 0 1.15rem 1.1rem; color: var(--ink-2); line-height: 1.65; }

.lightbox { width: min(96vw, 1200px); max-height: 94vh; padding: 0; border: 0; border-radius: 10px; background: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgb(10 12 15 / 0.82); }
.lightbox img { display: block; width: 100%; height: min(86vh, 900px); object-fit: contain; padding: 2rem; }
.lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); box-shadow: 0 2px 10px rgb(0 0 0 / 0.15); cursor: pointer; }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 0.75rem; }
.lightbox__nav--next { right: 0.75rem; }

@media (max-width: 1024px) {
  .product-details { grid-template-columns: minmax(0, 1fr); }
  .product-details__aside { display: none; }
}
@media (max-width: 560px) {
  .hide-xs { display: none; }
  .help-card .btn { width: 100%; }
  .lightbox img { padding: 0.5rem; height: 70vh; }
}

/* ==========================================================================
   Landing sections v2: promos, steps, brands, FAQ, newsletter, SEO text
   ========================================================================== */
.section-lead { margin: 0.35rem 0 0; color: var(--ink-2); max-width: 60ch; }

/* Promotional tiles */
.promos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.promo { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: stretch; min-height: 260px; overflow: hidden; border-radius: var(--card-radius, 4px); background: var(--soft); color: var(--ink); text-decoration: none; isolation: isolate; }
.promo__text { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: clamp(1.25rem, 3vw, 2.25rem); z-index: 1; }
.promo__title { font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.5rem); line-height: 0.95; margin: 0; }
.promo__text p { margin: 0; color: var(--ink-2); max-width: 32ch; }
.promo__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-weight: 700; font-size: 0.9rem; border-bottom: 2px solid var(--accent); align-self: flex-start; padding-bottom: 0.15rem; }
.promo__img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.promo:hover .promo__img { transform: scale(1.05); }
.promo:hover { color: var(--ink); }
.promo--dark { background: var(--dark); color: #fff; }
.promo--dark:hover { color: #fff; }
.promo--dark .promo__text p { color: rgb(255 255 255 / 0.78); }
.promo--dark .eyebrow { color: rgb(255 255 255 / 0.7); }
.promo--dark .promo__title { color: #fff; }
@media (max-width: 900px) { .promos__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .promo { grid-template-columns: 1fr; } .promo__img { height: 180px; order: -1; } }

/* How it works (3 steps) */
.how { background: #fff; }
.how__head { max-width: 60ch; margin-bottom: 2rem; }
.how__lead { color: var(--ink-2); margin: 0.5rem 0 0; font-size: 1.05rem; }
.how__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.how__item { position: relative; padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--card-radius, 4px); background: #fff; }
.how__item:not(:last-child)::after { content: ""; position: absolute; top: 2.7rem; right: -1rem; width: 1rem; height: 2px; background: var(--line); }
.how__number { position: absolute; top: 1.2rem; right: 1.4rem; font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: color-mix(in srgb, var(--accent) 22%, transparent); }
.how__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--soft); color: var(--accent); margin-bottom: 1rem; }
.how__icon .icon { width: 1.4rem; height: 1.4rem; }
.how__title { font-size: 1.1rem; margin: 0 0 0.35rem; }
.how__item p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }
.how__cta { margin-top: 1.75rem; }
@media (max-width: 820px) { .how__list { grid-template-columns: 1fr; } .how__item::after { display: none; } }

/* Brands */
.brands__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.brands__item { display: grid; place-items: center; min-height: 4.5rem; padding: 0.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius, 4px); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); text-align: center; text-decoration: none; transition: color 150ms, border-color 150ms, transform 150ms; }
.brands__item:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
@media (max-width: 1000px) { .brands__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .brands__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ section */
.faq-section__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.faq-section__intro { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); display: grid; gap: 0.85rem; justify-items: start; }
.faq-section .faq { max-width: none; }
@media (max-width: 900px) { .faq-section__grid { grid-template-columns: 1fr; } .faq-section__intro { position: static; } }

/* Newsletter */
.newsletter { background: var(--dark); color: #fff; padding-block: clamp(2rem, 5vw, 3.25rem); }
.newsletter__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center; }
.newsletter__text { display: flex; gap: 1.1rem; align-items: flex-start; }
.newsletter__text h2 { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1; color: #fff; }
.newsletter__text p { margin: 0.5rem 0 0; color: rgb(255 255 255 / 0.75); }
.newsletter__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.newsletter__icon .icon { width: 1.5rem; height: 1.5rem; color: #fff; }
.newsletter__form { display: grid; gap: 0.75rem; }
.newsletter__field { display: flex; gap: 0.5rem; }
.newsletter__field .input { flex: 1; min-height: 3.1rem; background: #fff; border-color: transparent; }
.newsletter__field .btn { min-height: 3.1rem; padding-inline: 1.5rem; }
.newsletter__consent { color: rgb(255 255 255 / 0.75); font-size: 0.8rem; align-items: flex-start; }
.newsletter__consent a { color: #fff; }
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter__message { margin: 0; padding: 0.75rem 1rem; border-radius: var(--card-radius, 4px); background: rgb(255 255 255 / 0.1); font-weight: 600; font-size: 0.9rem; }
.newsletter__message.is-error { background: color-mix(in srgb, var(--danger) 35%, transparent); }
@media (max-width: 860px) { .newsletter__inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .newsletter__field { flex-direction: column; } }

/* About the shop (SEO text) */
.about-shop { background: var(--soft); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.about-shop__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.about-shop__title { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1; margin: 0.5rem 0 0.9rem; }
.about-shop__lead { margin: 0 0 1.5rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; max-width: 56ch; }
.about-shop__facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.about-shop__facts li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius, 4px); }
.about-shop__facts strong { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.about-shop__facts span span { display: block; font-size: 0.82rem; color: var(--ink-2); line-height: 1.45; }
.about-shop__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--soft); color: var(--accent); flex-shrink: 0; }
.about-shop__icon .icon { width: 1.15rem; height: 1.15rem; }
.about-shop__links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.about-shop__text { padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius, 4px); }
.about-shop__body { position: relative; }
.about-shop__body .prose { color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
.about-shop__body .prose h3 { color: var(--ink); font-size: 1.05rem; margin: 1.25rem 0 0.35rem; }
.about-shop__body .prose h3:first-child { margin-top: 0; }
.about-shop__body.is-collapsed { max-height: 15rem; overflow: hidden; }
.about-shop__body.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(rgb(255 255 255 / 0), #fff); }
.about-shop__toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; padding: 0 0 0.15rem; border: 0; border-bottom: 2px solid var(--accent); background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.about-shop__toggle .icon { width: 1rem; height: 1rem; transition: transform 200ms; }
.about-shop__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
@media (max-width: 960px) { .about-shop__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .about-shop__facts { grid-template-columns: 1fr; } }

/* ==========================================================================
   Guides (blog): cards, listing, article
   ========================================================================== */
.post-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--shop-radius); overflow: hidden; background: #fff; transition: border-color 150ms, box-shadow 200ms, transform 200ms; }
.post-card:hover { border-color: #d3d3cc; box-shadow: 0 10px 28px rgb(20 22 26 / 0.08); transform: translateY(-2px); }
/* A fixed frame: the photo never changes the card height, whatever its own proportions. */
.post-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); flex-shrink: 0; }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.post-card__tag { position: absolute; left: 0.85rem; top: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 3px; background: rgb(255 255 255 / 0.94); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.post-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.15rem 1.25rem 1.2rem; flex: 1; }
.post-card__title { margin: 0; font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.01em; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-3); }
.post-card__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.post-card__meta .icon { width: 0.9rem; height: 0.9rem; }
.post-card__more { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.post-card__more:hover { color: var(--accent); }
.post-card__more .icon { width: 0.9rem; height: 0.9rem; }
.post-card--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-card--featured .post-card__media { aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card__body { padding: clamp(1.25rem, 3vw, 2.25rem); justify-content: center; }
.post-card--featured .post-card__title { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.05; }
.post-card--featured .post-card__excerpt { font-size: 1rem; -webkit-line-clamp: 4; }
.post-card--featured .post-card__meta { margin-top: 1rem; }
@media (max-width: 820px) { .post-card--featured { grid-template-columns: 1fr; } .post-card--featured .post-card__media { aspect-ratio: 16 / 10; min-height: 0; } }
.blog-hero__lead { max-width: 70ch; margin: 0.6rem 0 1.1rem; color: var(--ink-2); font-size: 1.02rem; }

.article__head { background: var(--soft); border-bottom: 1px solid var(--line); padding: 1.5rem 0 2rem; }
.shop .container--article { max-width: 880px; }
.article__category { display: inline-block; margin-top: 1rem; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.article__title { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; margin: 0.5rem 0 0.9rem; }
.article__lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--ink-2); margin: 0 0 1.25rem; max-width: 65ch; }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; color: var(--ink-3); }
.article__meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.article__meta .icon { width: 1rem; height: 1rem; }
.article__author { color: var(--ink); font-weight: 650; }
.shop .article__cover { max-width: 1200px; margin-top: 2rem; }
.article__cover img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--shop-radius); background: var(--soft); }
.shop .article__layout { max-width: 1200px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: 2.5rem 4rem; }
.article__aside { position: sticky; top: calc(var(--header-h, 72px) + 1.5rem); align-self: start; display: grid; gap: 1.75rem; }
.toc__title { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: toc; border-left: 2px solid var(--line); }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.85rem; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.88rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--accent); }
.share__links { display: flex; gap: 0.4rem; }
.share__links .icon-btn { border: 1px solid var(--line); background: #fff; }
.article__main { min-width: 0; max-width: 760px; }
.key-points { margin-bottom: 2rem; padding: 1.25rem 1.4rem; border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line)); border-left: 4px solid var(--success); border-radius: var(--shop-radius); background: color-mix(in srgb, var(--success) 5%, #fff); }
.key-points__title { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 750; letter-spacing: 0; }
.key-points__title .icon { color: var(--success); width: 1.15rem; height: 1.15rem; }
.key-points ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.45rem; color: var(--ink); line-height: 1.55; }
.article__content { font-size: 1.05rem; line-height: 1.75; }
.article__content h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.1; margin: 2.5rem 0 0.85rem; scroll-margin-top: calc(var(--header-h, 72px) + 1.5rem); }
.article__content h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.article__content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1.25rem 0; }
.article__content th, .article__content td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article__content th { background: var(--soft); font-weight: 650; }
.article__content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--soft); font-style: normal; }
.article__section-title { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); margin: 0 0 1rem; }
.article__products, .article__faq { margin-top: 3rem; scroll-margin-top: calc(var(--header-h, 72px) + 1.5rem); }
.product-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .product-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 3rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.author-box__avatar { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--dark); color: #fff; flex-shrink: 0; }
.author-box__avatar .icon { width: 1.5rem; height: 1.5rem; }
.author-box__label { margin: 0; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.author-box__name { margin: 0.15rem 0 0.35rem; font-weight: 750; }
.author-box__bio { margin: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; padding: 1.4rem 1.5rem; border-radius: var(--shop-radius); background: var(--dark); color: #fff; }
.article-cta__title { margin: 0 0 0.25rem; font-size: 1.5rem; line-height: 1.05; color: #fff; }
.article-cta p { margin: 0; color: rgb(255 255 255 / 0.75); font-size: 0.92rem; }
.article-cta__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-cta .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.article-cta .btn--ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.article__tags { margin-top: 1.75rem; }
@media (max-width: 960px) {
  .shop .article__layout { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .article__aside { position: static; order: 2; }
  .article__aside .toc { display: none; }
}

/* ---- Recommendations (Smart Upsell) ------------------------------------------------------ */
.recs .section-head { align-items: baseline; }
.recs__lead { margin: 0; color: var(--ink-3); font-size: 0.9rem; }

/* Frequently bought together */
.bundle { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.bundle__form { display: grid; gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: var(--soft); }
.bundle__items { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.bundle__item { position: relative; flex: 1 1 150px; display: grid; grid-template-rows: auto 1fr auto; gap: 0.45rem; min-width: 0; padding: 0.75rem; border: 1.5px solid var(--line); border-radius: var(--card-radius); background: #fff; cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.bundle__item.is-current { cursor: default; border-color: var(--accent); }
.bundle__item.is-off { opacity: 0.45; }
.bundle__check { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.bundle__media { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--soft); overflow: hidden; color: var(--ink-3); }
.bundle__media img { width: 100%; height: 100%; object-fit: cover; }
.bundle__name { display: grid; gap: 0.15rem; font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.bundle__name a { color: inherit; text-decoration: none; }
.bundle__name a:hover { text-decoration: underline; }
.bundle__this { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.bundle__price { font-size: 0.95rem; }
.bundle__plus { align-self: center; font-size: 1.4rem; font-weight: 300; color: var(--ink-3); }
.bundle__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.bundle__total-label { color: var(--ink-2); font-size: 0.9rem; }
.bundle__total { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-right: auto; }
@media (max-width: 640px) {
  .bundle__plus { display: none; }
  .bundle__item { flex-basis: calc(50% - 0.3rem); }
  .bundle__summary .btn { width: 100%; }
}

/* Better version next to the buy button */
.upsell-card { display: grid; gap: 0.45rem; margin-top: 0.9rem; padding: 0.8rem 0.9rem; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--card-radius); background: color-mix(in srgb, var(--accent) 5%, #fff); }
.upsell-card__label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.upsell-card__label .icon { width: 1em; height: 1em; }
.upsell-card__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.upsell-card__link img { width: 3rem; height: 3rem; border-radius: 6px; object-fit: cover; }
.upsell-card__name { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.upsell-card__link:hover .upsell-card__name { text-decoration: underline; }
.upsell-card__diff { font-weight: 800; font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; }

/* Compact rows (cart gap, checkout, mini cart) */
.rec-rows { display: grid; gap: 0.55rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.rec-rows__title { margin: 0; font-weight: 800; font-size: 0.95rem; }
.rec-rows__lead { margin: -0.3rem 0 0.2rem; font-size: 0.82rem; color: var(--ink-3); }
.rec-row { display: grid; grid-template-columns: 2.75rem 1fr auto auto; align-items: center; gap: 0.65rem; }
.rec-row img, .rec-row__ph { width: 2.75rem; height: 2.75rem; border-radius: 6px; object-fit: cover; background: var(--soft); display: grid; place-items: center; color: var(--ink-3); }
.rec-row__name { font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-row__name:hover { text-decoration: underline; }
.rec-row__price { font-size: 0.88rem; white-space: nowrap; }
.rec-row__add { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; }
.rec-row__add:hover { background: var(--accent); color: var(--accent-ink); }
.rec-rows--drawer { margin: 1rem 0 0; background: var(--soft); border: 0; }
.checkout__aside .rec-rows { margin-top: 1rem; }

/* ---- Ask about a part ---------------------------------------------------------------------- */
.ask-hero { padding: 1.25rem 0 2.25rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.ask-hero__grid { display: grid; gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 960px) { .ask-hero__grid { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 3rem; } }
.ask-hero__title { margin: 0.35rem 0 0.75rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); line-height: 1.05; }
.ask-hero__lead { color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; }
.ask-hero__lead p { margin: 0 0 0.6rem; }
.ask-hero__facts { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ask-hero__facts li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.7rem 0.9rem; border-radius: var(--card-radius); background: #fff; border: 1px solid var(--line); }
.ask-hero__facts .icon { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; color: var(--accent); }
.ask-hero__facts strong { display: block; font-size: 0.95rem; }
.ask-hero__facts span { font-size: 0.85rem; color: var(--ink-2); }

.ask-layout { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .ask-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .ask-aside { position: sticky; top: calc(var(--header-h, 72px) + 1rem); } }
.ask-form { display: grid; gap: 1.25rem; }
.ask-step { margin: 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; min-width: 0; }
.ask-step__title { float: left; width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0; margin-bottom: 1.1rem; font-size: 1.15rem; font-weight: 800; }
.ask-step__title + * { clear: both; }
.ask-step__title span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.95rem; }
.ask-step > .field:first-of-type { margin-bottom: 1rem; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ask-chip { position: relative; cursor: pointer; }
.ask-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ask-chip span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 600; background: #fff; transition: border-color 0.15s, background 0.15s; }
.ask-chip span .icon { width: 1rem; height: 1rem; }
.ask-chip:hover span { border-color: var(--ink-3); }
.ask-chip input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--ink); }
.ask-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.ask-drop { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border: 2px dashed var(--line); border-radius: var(--card-radius); background: var(--soft); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ask-drop:hover, .ask-drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
.ask-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ask-drop__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; background: #fff; color: var(--accent); flex-shrink: 0; }
.ask-drop__text { display: grid; gap: 0.15rem; font-size: 0.85rem; color: var(--ink-2); }
.ask-drop__text strong { color: var(--ink); font-size: 0.95rem; }
.ask-previews { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.ask-previews:empty { display: none; }
.ask-preview { position: relative; width: 5.5rem; height: 5.5rem; border-radius: 8px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.ask-preview img { width: 100%; height: 100%; object-fit: cover; }
.ask-preview button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: rgb(15 23 42 / 0.75); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }

.ask-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.ask-submit p { margin: 0; max-width: 44ch; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ask-aside { display: grid; gap: 1rem; }
.ask-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; }
.ask-card__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; font-size: 1.02rem; font-weight: 800; }
.ask-card__title .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }
.ask-steps { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; counter-reset: ask; }
.ask-steps li { position: relative; padding-left: 2.4rem; font-size: 0.88rem; color: var(--ink-2); counter-increment: ask; }
.ask-steps li::before { content: counter(ask); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--soft); color: var(--ink); font-weight: 800; font-size: 0.85rem; }
.ask-steps strong { display: block; color: var(--ink); font-size: 0.93rem; }
.ask-steps--inline { margin: 1.5rem 0; text-align: left; }
@media (min-width: 720px) { .ask-steps--inline { grid-template-columns: repeat(3, 1fr); } }
.ask-tips { display: grid; gap: 0.55rem; margin: 0; padding: 0 0 0 1.1rem; font-size: 0.87rem; color: var(--ink-2); }

.ask-sent { padding: 2.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--shop-radius); background: #fff; text-align: center; }
.ask-sent__icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #dcfce7; color: #16a34a; }
.ask-sent__icon .icon { width: 2rem; height: 2rem; }
.ask-sent__title { margin: 1rem 0 0.4rem; font-size: 1.8rem; }
.ask-sent__number { font-size: 1.05rem; }
.ask-sent .cluster { justify-content: center; }
.ask-hero--compact { padding-bottom: 1rem; }

/* Photo background on page heroes (Wygląd → Dostosuj motyw → Zdjęcia banerów). */
.pf-hero.sub-hero--photo,
.contact-hero.sub-hero--photo,
.ask-hero.sub-hero--photo { position: relative; color: #fff; background: var(--dark) var(--hero-image) center / cover no-repeat; isolation: isolate; border-bottom-color: transparent; }
.pf-hero.sub-hero--photo::before,
.contact-hero.sub-hero--photo::before,
.ask-hero.sub-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgb(10 10 10 / 0.88) 0%, rgb(10 10 10 / 0.62) 45%, rgb(10 10 10 / 0.35) 100%); }
.sub-hero--photo .crumbs a { color: rgb(255 255 255 / 0.82); }
.sub-hero--photo .crumbs a:hover { color: #fff; }
.sub-hero--photo .crumbs li + li::before { color: rgb(255 255 255 / 0.45); }
.sub-hero--photo .pf-hero__title,
.sub-hero--photo .contact-hero__title,
.sub-hero--photo .ask-hero__title { color: #fff; }
.sub-hero--photo .pf-hero__lead,
.sub-hero--photo .contact-hero__lead,
.sub-hero--photo .contact-hero__lead p,
.sub-hero--photo .ask-hero__lead,
.sub-hero--photo .ask-hero__lead p { color: rgb(255 255 255 / 0.9); }
.sub-hero--photo .contact-hero__hint { color: rgb(255 255 255 / 0.75); }
.sub-hero--photo .pf-hero__facts li,
.sub-hero--photo .contact-hero__facts li,
.sub-hero--photo .ask-hero__facts li { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.22); color: rgb(255 255 255 / 0.88); }
.sub-hero--photo .pf-hero__facts strong,
.sub-hero--photo .contact-hero__facts strong,
.sub-hero--photo .ask-hero__facts strong { color: #fff; }
.sub-hero--photo .pf-hero__facts .icon { color: #86efac; }
.sub-hero--photo .contact-hero__facts .icon,
.sub-hero--photo .ask-hero__facts .icon { color: rgb(255 255 255 / 0.95); }

/* ---- Parameter filters (diameters, lengths, sizes…) ------------------------------------- */
.facet__values { display: flex; flex-direction: column; gap: 0.5rem; }
.facet__values:not(.is-open) .facet__value.is-extra { display: none; }
.facet__value.is-empty { opacity: 0.45; }
.facet__value .check__text { font-size: 0.9rem; }
.facet__more { align-self: flex-start; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.facet__hint { margin: 0; font-size: 0.78rem; color: var(--ink-3); }
.facet.is-active .filters__title { color: var(--accent); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 1rem; }
.chip--active { display: inline-flex; align-items: center; gap: 0.35rem; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, #fff); text-decoration: none; }
.chip--active .icon { width: 0.85rem; height: 0.85rem; }

/* Videos in descriptions (see ferrum_core::text::video_embed): 16:9, Shorts as a narrow 9:16 frame. */
.prose .product-video { margin: 1.5rem 0; }
.prose .product-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--shop-radius, 10px); background: #000; }
.prose .product-video--vertical iframe { width: min(100%, 340px); aspect-ratio: 9 / 16; margin-inline: auto; }
.prose iframe { max-width: 100%; }