/* =============================================================
 * LELO storefront — supplemental stylesheet.
 *
 * critical.min.css (from lelo.com) handles base typography,
 * layout, and all brand components. This file adds:
 *   1. Font loading (Inter, used as local fallback)
 *   2. Our custom header/footer logo/cart overrides
 *   3. Product grid / category page layout additions
 *   4. Cart / checkout page styles
 *   5. Login & payment overlay styles
 *   6. Any gaps where critical.css lacks coverage
 * ============================================================= */

/* ---------------------------------------------------------------
 * Font faces — Inter as body fallback when LabGrotesque is absent
 * --------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------
 * CSS custom properties (fallbacks for anything not in critical)
 * --------------------------------------------------------------- */
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-bg: #fff;
  --lelo-gutter: 24px;
  --lelo-max-width: 1440px;
}

/* ---------------------------------------------------------------
 * Base resets (complement critical.css)
 * --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Guard against accidental horizontal overflow (e.g. a wide sticky bar or a
   full-bleed section). `clip` does NOT create a scroll container, so it kills
   the sideways drag without breaking `position: sticky` elements. */
html, body { overflow-x: clip; max-width: 100%; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------
 * Logo SVG — serve white SVG inline as data-URI fallback when
 * the /themes/play/logo.svg path is not available
 * --------------------------------------------------------------- */
#block-play-branding img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---------------------------------------------------------------
 * Header — fill gaps critical.css leaves for our structure
 * --------------------------------------------------------------- */
.header-wrapper { position: relative; }

/* Promo bar */
.lfi-promobar { overflow: hidden; }
.promobar-message { display: flex; align-items: center; justify-content: center; }

/* Shopping cart link */
.cart-link { position: relative; display: flex; align-items: center; }
.cart-count {
  position: absolute; top: -6px; right: -8px;
  background: #000; color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px;
}

/* Account button (no default button styles) */
.lelo-account-btn {
  background: none; border: none; padding: 0;
  display: flex; align-items: center;
}

/* ---------------------------------------------------------------
 * Category page product grid
 * --------------------------------------------------------------- */
.product-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 48px;
}

.product-card-item { display: block; }
.product-card-link {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
.product-card-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f6f6f6;
}
.product-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.product-card-link:hover .product-card-image img { transform: scale(1.04); }
.product-card-info { padding: 12px 0 0; }
.product-card-brand {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #888; margin-bottom: 4px;
}
.product-card-title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.product-card-tagline { font-size: 12px; color: #888; margin-top: 2px; }
.product-card-price { font-size: 14px; font-weight: 600; margin-top: 6px; }
.product-card-cta {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

@media (max-width: 767px) {
  .product-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px 14px 40px;
  }
}

/* ---------------------------------------------------------------
 * Homepage product items / category sliders
 * --------------------------------------------------------------- */
.field_product_price {
  font-size: 14px; font-weight: 600; color: #fff;
  margin-top: 8px;
}

/* ---------------------------------------------------------------
 * Product page — purchase bar additions
 * --------------------------------------------------------------- */
.purchase-bar-product {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.purchase-bar-title { font-size: 14px; font-weight: 600; }
.purchase-bar-price { font-size: 16px; font-weight: 700; }
.purchase-bar-msrp {
  text-decoration: line-through; color: #999;
  font-size: 13px; font-weight: 400; margin-left: 6px;
}
.purchase-bar-actions { display: flex; align-items: center; gap: 12px; }

/* Quantity stepper */
.qty-stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid currentColor;
}
.qty-stepper button {
  background: none; border: none;
  width: 36px; height: 36px;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
}
[data-qty-value] { min-width: 32px; text-align: center; font-size: 14px; }

/* Add-to-bag button */
.btn-add-to-cart {
  background: #fff; color: #000;
  border: 1px solid #fff;
  padding: 10px 24px; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, color .2s;
}
.btn-add-to-cart:hover { background: #000; color: #fff; border-color: #000; }

/* Navigation pills in purchase bar */
.purchase-bar-nav { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.purchase-bar-nav li a {
  padding: 0 16px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 48px; display: block;
  opacity: .7; transition: opacity .2s;
}
.purchase-bar-nav li a:hover { opacity: 1; }

/* ---------------------------------------------------------------
 * Technology / story section — image side
 * --------------------------------------------------------------- */
.story-image-wrapper { flex-shrink: 0; }

/* ---------------------------------------------------------------
 * Reviews section
 * --------------------------------------------------------------- */
.reviews-score {
  font-size: 24px; font-weight: 700; color: #fff;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------
 * Cart & checkout pages
 * --------------------------------------------------------------- */
.cart-page-title {
  font-size: clamp(24px, 4vw, 40px); font-weight: 700;
  padding: 40px 0 24px;
}

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  padding-bottom: 80px;
}
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.cart-summary {
  background: #f6f6f6; padding: 24px;
}
.cart-summary__row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #e5e5e5;
  font-size: 14px;
}
.cart-summary__row--total {
  font-weight: 700; font-size: 16px;
  border-bottom: none; padding-top: 16px;
}

.checkout-fields { display: flex; flex-direction: column; gap: 12px; }
.checkout-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin: 24px 0 12px;
}
.checkout-section-label:first-child { margin-top: 0; }
.checkout-terms { font-size: 11px; color: #888; margin-top: 12px; line-height: 1.5; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid--1 { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.input, .select {
  border: 1px solid #d0d0d0; padding: 10px 12px;
  font-size: 14px; font-family: inherit; background: #fff;
  width: 100%; transition: border-color .2s;
}
.input:focus, .select:focus { outline: none; border-color: #000; }

.btn-checkout {
  display: block; width: 100%; margin-top: 20px;
  background: #000; color: #fff;
  padding: 14px 24px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border: none; cursor: pointer; text-align: center;
  text-decoration: none; transition: background .2s;
}
.btn-checkout:hover { background: #222; }

/* ---------------------------------------------------------------
 * 404 page
 * --------------------------------------------------------------- */
.not-found-title {
  font-size: clamp(28px, 5vw, 56px); font-weight: 700;
  margin: 16px 0 12px;
}
.not-found-body {
  font-size: 16px; color: #666;
  max-width: 40ch; margin: 0 auto 32px;
}

/* ---------------------------------------------------------------
 * Footer additions
 * --------------------------------------------------------------- */
.footer-informations {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer-copyright { font-size: 11px; opacity: .6; line-height: 1.6; }

/* ---------------------------------------------------------------
 * Logo paths for our server (SVG served from /themes/play/)
 * The logo SVGs are expected at these paths; if missing, text fallback.
 * --------------------------------------------------------------- */
#block-play-branding a::after { display: none; }

/* ---------------------------------------------------------------
 * Misc utility
 * --------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important;
  border: 0 !important;
}

/* ===============================================================
 * Cart / checkout page chrome (render.js layout()).
 * These pages reuse LELO's theme header/footer MARKUP but are
 * statically rendered (no React hydration), so the theme CSS leaves
 * the nav drawer open (squished) and the footer columns unstyled.
 * The rules below give them a clean, self-contained layout and win
 * over the theme bundles via id-scoped selectors + !important on the
 * structural bits. Only affect the header/footer chrome — the cart
 * body (.cart-layout / .cart-summary) is already styled above.
 * =============================================================== */
/* Solid dark header bar: the LELO logo + icons are white (built for a dark/
 * hero header), so a white background hid them. Force static positioning too —
 * the theme makes #header fixed/absolute, which overlapped the page content. */
.header-wrapper, #header { position: static !important; background: #0c0c0c; }
#header .header {
  display: flex !important;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 28px;
  position: relative !important;
  background: #0c0c0c;
  color: #fff;
}
#header .header .menu__icon-desktop,
#header .header .search__icon,
#header .header .lelo-account-btn,
#header .header .cart-link { color: #fff !important; }
#main-menu-wrapper { order: 1; flex: 0 0 auto; position: relative; }
.menu__icon-desktop {
  display: inline-flex !important; align-items: center; gap: 8px;
  cursor: pointer; color: #0c0c0c;
}
.menu__icon-desktop .main-menu__title {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
/* The nav is a click-to-open dropdown; the menu icon toggles [inert]. */
#main-menu-nav {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 200;
  background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.18);
  min-width: 240px; padding: 10px 0;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
#main-menu-nav[inert] { display: none !important; }
#main-menu-nav .main-menu,
#main-menu-nav .main-menu > div { list-style: none !important; margin: 0; padding: 0; display: block; }
#main-menu-nav .main-menu li { list-style: none !important; margin: 0; }
#main-menu-nav .main-menu a {
  display: block; margin: 0; padding: 11px 22px; color: #0c0c0c; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: normal; white-space: nowrap;
}
#main-menu-nav .main-menu a:hover { background: #f5f5f5; }

#block-play-branding { order: 2; margin: 0 auto; }
#block-play-branding img { height: 42px; width: auto; display: block; }
.dummy-search-place { display: none; }
#block-play-locale { order: 3; }
.search-block__wrapper { order: 4; }
#block-play-account-menu { order: 5; }
#block-play-shopping-cart { order: 6; }
.search-block__wrapper, #block-play-account-menu, #block-play-shopping-cart, #block-play-locale { flex: 0 0 auto; }
.lelo-locale-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; color: #fff; padding: 0; font-family: inherit;
}
.lelo-locale-btn svg { width: 22px; height: 22px; }
.lelo-locale-ccy { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
#header .header .lelo-locale-btn { color: #fff !important; }
/* The language/currency switcher now lives in the top nav (globe icon before
   search), so hide the floating bottom-right pill — it overlapped the sticky
   add-to-cart bar on product pages. */
#lelo-locale-pill { display: none !important; }
#block-play-account-menu ul, #block-play-account-menu li { list-style: none !important; margin: 0; padding: 0; }
.search__icon, .lelo-account-btn, .cart-link {
  display: inline-flex !important; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: #0c0c0c; padding: 0;
  position: relative;
}
.search__icon svg, .lelo-account-btn svg, .cart-link svg { width: 24px; height: 24px; }
.cart-link .cart-count {
  position: absolute; top: -6px; right: -8px; background: #0c0c0c; color: #fff;
  font-size: 10px; line-height: 1; min-width: 16px; height: 16px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Footer columns (theme leaves these as squished vertical text). */
footer .footer { background: #0c0c0c; color: #fff; padding: 56px 0 32px; margin-top: 64px; }
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.footer-menus { display: flex !important; flex-wrap: wrap; gap: 48px; }
.footer-menus > nav { flex: 0 1 auto; min-width: 140px; }
.footer-menus h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 16px; color: #fff;
}
.footer-menus ul, .footer-menus ul > div, .footer-menus li { list-style: none !important; margin: 0; padding: 0; display: block; }
.footer-menus li { margin-bottom: 10px; }
.footer-menus a { color: #bdbdbd; text-decoration: none; font-size: 13px; }
.footer-menus a:hover { color: #fff; }
/* LELO ships a JS accordion that collapses each footer column on smaller
   screens (.footer-menus nav>ul { grid-template-rows: 0fr; overflow: hidden }).
   The SSR storefront doesn't run that JS, so the links were stuck at 0 height
   and unclickable. Force every column permanently open and aligned. */
.footer .footer-menus nav > ul,
.footer .footer-menus nav > ul > div {
  display: block !important;
  grid-template-rows: none !important;
  overflow: visible !important;
  min-height: 0;
  margin: 0 !important;
}
.footer .footer-menus nav > ul li { display: block !important; margin-bottom: 10px; }
.footer .footer-menus nav > ul li a { padding-left: 0 !important; }
.footer .footer-menus h2 { pointer-events: none !important; padding-left: 0 !important; }
/* Mobile: the LELO theme stacks the three footer columns into one tall column
   (.footer-menus { flex-direction: column }), wasting the whole right half.
   Lay them out as a 2-column grid instead; the link-heavy "browse by type"
   column spans the full width and flows its links into two sub-columns. */
@media (max-width: 767px) {
  .footer .footer-menus {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }
  .footer-menus > nav { min-width: 0; }
  .footer .footer-menus #block-discover { grid-column: 1 / -1; }
  .footer .footer-menus #block-discover ul > div { columns: 2; column-gap: 18px; }
  .footer .footer-menus #block-discover ul > div li { break-inside: avoid; }
}

/* ---------------------------------------------------------------
 * Mobile header — keep menu + account + cart as compact header icons.
 * The LELO theme reflows them into a 50%-width "mobile drawer" layout
 * (≤767px) that our SSR header doesn't implement, which made the account
 * icon disappear and the menu hamburger vanish on phones. Force the
 * desktop-style compact icon row instead.
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
  #header .header { gap: 8px; padding: 14px 14px; flex-wrap: nowrap; }
  #header .header .menu__icon-desktop { display: inline-flex !important; }
  #header .header .menu__icon-desktop .main-menu__title { display: none; }
  #header .header #block-play-account-menu {
    display: flex !important; align-items: center; width: auto !important;
    padding: 0 !important; margin: 0 !important; position: static !important;
  }
  #header .header .lelo-account-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: auto !important; color: #fff !important;
  }
  #header .header .lelo-account-btn svg { display: block !important; width: 22px !important; height: 22px !important; }
  #header .header .search-block__wrapper { width: auto !important; padding: 0 !important; margin: 0 !important; }
  #block-play-branding { margin: 0 auto; }
  #block-play-branding img { height: 30px; }
  #header .header .search__icon svg,
  #header .header .lelo-account-btn svg,
  #header .header .lelo-locale-btn svg,
  #header .header .cart-link svg { width: 22px; height: 22px; }
  #header .header .lelo-locale-ccy { display: none; }
}

/* ===============================================================
 * Full product page (SSR) — gaps the authentic LELO component CSS
 * (lelo-product.css) doesn't cover because these blocks use our own
 * render.js class names: the sticky purchase-bar shell, the
 * "YOU MAY LIKE" related-products row, and the reviews band. The hero /
 * highlights / how-to-use / features sections are already styled by
 * lelo-product.css; these rules finish the page.
 * =============================================================== */

/* Sticky purchase bar shell (inner title/price/nav/qty already styled). */
.purchase-bar-block {
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 120;
  background: #0c0c0c; color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.commerce-purchase-bar-container {
  max-width: 1280px; margin: 0 auto; padding: 10px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.commerce-purchase-bar-container--navigation { flex: 1 1 auto; min-width: 0; }
.commerce-purchase-bar-container--product { flex: 0 0 auto; }
@media (max-width: 860px) {
  .commerce-purchase-bar-container--navigation { display: none; }
  .commerce-purchase-bar-container { justify-content: center; padding: 10px 14px; gap: 0; }
  /* Let the product block fill the bar instead of sizing to its content
     (content > viewport was pushing the bar 15px past each edge). */
  .commerce-purchase-bar-container--product { flex: 1 1 auto; width: 100%; min-width: 0; }
  .purchase-bar-product {
    flex-wrap: nowrap; gap: 10px; width: 100%; justify-content: space-between;
  }
  .purchase-bar-title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .purchase-bar-actions { flex: 0 0 auto; gap: 8px; }
  .btn-add-to-cart { padding: 10px 14px; }
}

/* "YOU MAY LIKE" related products. Swiper isn't initialised on the SSR
 * page, so render the slides as a responsive wrapping grid (override the
 * swiper flex/transform defaults from the theme bundles). Section sits on
 * a dark band, so text is white. */
.related-products .intro-container { max-width: 1280px; margin: 0 auto; padding: 48px 28px 0; }
.related-products .field_intro_text {
  font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: #fff;
}
/* LELO collapses this container to height:0 until its Swiper JS adds
   `.swiper-initialized`. The SSR page never runs that JS, so force it open
   (otherwise the related-product images get clipped to a sliver). */
.swiper-related-products-container,
.swiper-related-products-container.swiper-initialized {
  max-width: 1280px; margin: 0 auto; padding: 24px 28px 56px;
  height: auto !important; overflow: visible !important;
}
.related-products__wrapper {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px;
  transform: none !important;
}
.commerce-related-products { width: auto !important; margin: 0 !important; }
.commerce-related-products .field_product_image_teaser {
  aspect-ratio: 3/4; overflow: hidden; background: #f6f6f6;
}
.commerce-related-products .field_product_image_teaser img { width: 100%; height: 100%; object-fit: cover; }
.commerce-related-products .related-text-container { padding: 12px 0 0; color: #fff; }
.commerce-related-products .title a { font-size: 14px; font-weight: 600; color: #fff; }
.commerce-related-products .commerce-category a {
  font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: .1em;
}
.commerce-related-products .product-url {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.related-products .swiper-pagination { display: none; }
@media (max-width: 900px) { .related-products__wrapper { grid-template-columns: repeat(2, 1fr); } }

/* Reviews band — the external Bazaarvoice widget is gone (fully local), so
 * show the score on a clean dark band and hide the empty widget container. */
.bazaar-reviews-block {
  background: #0c0c0c; color: #fff;
  padding: 56px 28px; text-align: center;
}
.bazaar-reviews-block h2 {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin: 0 0 8px;
}
#bazaar-voice-container:empty { display: none; }

/* ===============================================================
 * Homepage + product hero / slider fixes for the fully-local SSR.
 * Swiper isn't initialised on the SSR pages (no theme JS), so the
 * "POPULAR CATEGORIES" / "BESTSELLERS" / related rows would otherwise
 * collapse into an overflowing flex row. Lay them out as responsive
 * grids. Also make the product-page hero readable when its scraped
 * image has a light background (white hero text was invisible).
 * =============================================================== */

/* Category + bestseller rows on the homepage → responsive grid. */
.products-grid-row { overflow: visible; }
.products__wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  transform: none !important;
}
.products-container .container,
.products-grid-row { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.products__wrapper .product-item {
  width: auto !important; margin: 0 !important; flex: none !important;
  display: block; color: inherit; text-decoration: none;
}
.product-item .background-image {
  position: relative !important; inset: auto; width: 100%; height: 0; padding-bottom: 100%;
  overflow: hidden; background: #f4f4f4;
}
.product-item .background-image img {
  position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important;
  object-fit: contain !important; display: block;
}
.product-item .text-container { padding: 14px 4px 4px; text-align: center; position: relative; }
.product-item .field_product_title h4 { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 6px; }
.product-item .field_product_price { color: #fff; font-weight: 600; font-size: 14px; margin: 2px 0; }
.product-item .field_product_cta span {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.field_product_tagline h3 {
  color: #fff; font-size: clamp(20px, 3vw, 28px); text-align: center;
  padding: 48px 0 4px; margin: 0;
}
@media (max-width: 767px) {
  .products__wrapper { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Product-page hero: many scraped hero images are "product on white", so a
 * centred white title was invisible. Anchor the title to the bottom of the
 * hero over a dark gradient scrim — readable over any image, light or dark. */
.hero_block_center { position: relative; background: #0c0c0c; }
.hero_block_center .container {
  position: absolute !important; left: 0; right: 0; bottom: 0; top: auto !important;
  z-index: 4; margin: 0; padding: 72px 28px 36px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.82) 100%);
}
.hero_block_center .inner-container { max-width: 1280px; margin: 0 auto; align-items: flex-start; }
.hero_block_center .field_hero_title h1 {
  color: #fff !important; font-size: clamp(30px, 5vw, 56px); line-height: 1.04; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero_block_center .field_hero_subtitle h2 {
  color: #fff !important; font-size: clamp(13px, 1.8vw, 18px); letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 8px; opacity: .92;
}

/* Homepage hero — the upstream hero video isn't bundled (fully local), so
 * present a clean, vertically-centred dark hero band instead of a tall empty
 * black gap. */
.hero_block_left {
  position: relative; min-height: 70vh; display: flex; align-items: center;
  overflow: hidden; background: #000;
}
.hero_block_left .fullscreen-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; border: 0; display: block;
}
.hero_block_left::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.1) 100%);
}
.hero_block_left .container { width: 100%; position: relative; z-index: 2; }
.hero_block_left .inner-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.hero_block_left .field_hero_title h2 {
  font-size: clamp(40px, 7vw, 80px); line-height: 1.02; margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.hero_block_left .field_hero_subtitle h3 {
  font-size: clamp(15px, 2vw, 20px); opacity: .92; margin: 10px 0 0; font-weight: 400;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------------
 * Static info pages (about / policies / support / FAQ)
 * --------------------------------------------------------------- */
.info-page { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; color: #1a1a1a; }
.info-page__head { margin-bottom: 28px; }
.info-page__head h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.12; margin: 0 0 12px; }
.info-page__intro { font-size: 16px; color: #666; margin: 0; line-height: 1.5; }
.info-page__body { font-size: 15px; line-height: 1.75; color: #2a2a2a; }
.info-page__body h2 { font-size: 20px; font-weight: 700; margin: 34px 0 12px; color: #0c0c0c; }
.info-page__body h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: #0c0c0c; }
.info-page__body p { margin: 0 0 14px; }
.info-page__body ul { margin: 0 0 18px; padding-left: 22px; }
.info-page__body li { margin-bottom: 8px; }
.info-page__body a { color: #0c0c0c; text-decoration: underline; }
.info-page__body a:hover { opacity: .7; }
.info-faq { padding: 16px 0; border-bottom: 1px solid #ececec; }
.info-faq:last-child { border-bottom: none; }
.info-faq .info-faq-a { color: #555; }
@media (max-width: 767px) {
  .info-page { padding: 36px 16px 60px; }
}