/**
 * Voltify storefront styles — ported 1:1 from the real Shopify theme
 * (C:\Users\Cevat\voltify-theme\voltify), read directly rather than reconstructed
 * from memory. Source files: config/settings_data.json, snippets/css-variables.liquid,
 * assets/critical.css, sections/{header,hero,feature-trio,trust-strip,collection,
 * product,cart,footer}.liquid, snippets/{product-card,category-card}.liquid.
 *
 * Class names intentionally match the theme's BEM-ish naming (site-header__*,
 * hero__*, product-card__*, cart-line__*, etc.) so this file stays directly
 * comparable to the source. Admin panel never links this file — see admin.css.
 */

/* ─────────────────────────────────────────────────────────────
   Reset (critical.css, adapted for a non-Shopify page shell)
   ───────────────────────────────────────────────────────────── */

.voltify-storefront * {
  box-sizing: border-box;
}

.voltify-storefront img,
.voltify-storefront picture,
.voltify-storefront svg {
  display: block;
  max-width: 100%;
  /* No `height: auto` here on purpose: images already default to auto height
     with no rule at all, but a rule here would carry (0,1,1) specificity —
     enough to silently beat any single-class component override like
     `.site-header__logo { height: 32px }` or `.cart-line__image { height: 5rem }`
     regardless of source order. That's exactly what caused the oversized
     header logo bug — this stays removed so fixed-height components just work. */
}

.voltify-storefront input,
.voltify-storefront textarea,
.voltify-storefront select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/* ─────────────────────────────────────────────────────────────
   Tokens — real values from config/settings_data.json +
   snippets/css-variables.liquid. Scoped to storefront pages only
   (this file is never linked from the admin layout).
   ───────────────────────────────────────────────────────────── */

:root {
  /* Font: settings.type_primary_font = "assistant_n4" (Assistant, weight 400).
     The real theme loads it via Shopify's font CDN (font_face filter) — not
     available outside Shopify, so it is self-hosted instead (wwwroot/fonts, same
     family, same weights; no third-party request). The @font-face rule lives in
     _Layout.cshtml, English pages only. */
  --font-primary--family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --page-width: 75rem;
  --page-margin: 20px;

  /* Colors: backgrounds */
  --color-background: #FFFFFF;
  --color-background-secondary: #F7F7F5;

  /* Colors: text */
  --color-foreground: #1A1A1A;
  --color-text-secondary: #6B6B6B;

  /* Colors: UI */
  --color-border: #E5E5E2;
  --color-accent: #2B2B2B;

  /* Type scale */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-h4: 1.125rem;
  --font-size-h3: 1.5rem;
  --font-size-h2: clamp(1.75rem, 2vw + 0.5rem, 2rem);
  --font-size-h1: clamp(2.25rem, 3vw + 0.75rem, 3rem);
  --font-size-hero: clamp(3rem, 5vw + 0.5rem, 4rem);

  /* Type tokens */
  --line-height-body: 1.6;
  --letter-spacing-heading: -0.02em;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --section-padding-block: clamp(3.5rem, 8vw, 6rem);

  /* UI shape */
  --border-radius-button: 4px;
  --style-border-radius-inputs: 4px;

  /* Motion */
  --transition-base: 200ms ease;
  --transition-fast: 120ms ease;
}

/* Bulgarian pages drop Assistant from the stack entirely.

   Assistant ships only latin, latin-ext and hebrew subsets — it contains no Cyrillic
   glyphs at all. Asking Google Fonts for Assistant limited to Cyrillic text returns
   `unicode-range: U+3f` (just the question mark), which is the empirical proof.
   The browser therefore resolves the face per character: Cyrillic falls through to
   Segoe UI while embedded Latin stays in Assistant, so a single label like „За Voltify"
   renders in two typefaces at once.

   Removing 'Assistant' here means the whole BG page — Cyrillic and Latin brand names
   and prices alike — resolves to one face, because every remaining family in the stack
   covers both scripts. Nothing else needs to change: every rule in this file reads the
   font through this one token.

   html[lang="bg"] targets the same element as :root but scores higher (0,1,1 vs 0,1,0),
   so it wins without !important. The lang attribute is emitted server-side from the
   voltify_lang cookie (_Layout.cshtml:44), and switching language is a full page load,
   so this is always correct at first paint — no flash of the wrong stack.

   English pages are deliberately untouched: Latin-only content has no glyph gap, so
   they keep Assistant and the theme's original typography. Admin is unaffected too —
   it never loads this stylesheet and carries its own --admin-font-family. */
html[lang="bg"] {
  --font-primary--family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */

.voltify-storefront {
  font-family: var(--font-primary--family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

.voltify-storefront h1,
.voltify-storefront h2,
.voltify-storefront h3,
.voltify-storefront h4,
.voltify-storefront h5,
.voltify-storefront h6 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-heading);
  margin: 0;
}

.voltify-storefront h1 { font-size: var(--font-size-h1); font-weight: 700; letter-spacing: -0.03em; }
.voltify-storefront h2 { font-size: var(--font-size-h2); font-weight: 600; letter-spacing: -0.025em; }
.voltify-storefront h3 { font-size: var(--font-size-h3); font-weight: 600; letter-spacing: -0.02em; }
.voltify-storefront h4 { font-size: var(--font-size-h4); font-weight: 600; }

.voltify-storefront a {
  color: inherit;
}

.voltify-storefront :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.voltify-storefront .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Centered max-width column — replaces the theme's shopify-section 3-col grid,
   same visual result for a non-Shopify page shell. */
.page-width {
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.section-padding {
  padding-block: var(--section-padding-block);
}

.section-alt {
  background-color: var(--color-background-secondary);
}

/* ─────────────────────────────────────────────────────────────
   Buttons (critical.css .btn / .btn--primary / .btn--secondary)
   ───────────────────────────────────────────────────────────── */

.voltify-storefront .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75rem 1.75rem;
  border-radius: var(--border-radius-button);
  border: 1px solid transparent;
  font-family: var(--font-primary--family);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), opacity var(--transition-base);
}

.voltify-storefront .btn--primary,
.voltify-storefront .btn {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
}

.voltify-storefront .btn--primary:hover,
.voltify-storefront .btn:hover:not(:disabled) {
  background-color: #222222;
  border-color: #222222;
}

.voltify-storefront .btn--primary:active,
.voltify-storefront .btn--primary:focus-visible,
.voltify-storefront .btn:active:not(:disabled),
.voltify-storefront .btn:focus-visible:not(:disabled) {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}

.voltify-storefront .btn--primary:disabled,
.voltify-storefront .btn:disabled {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}

.voltify-storefront .btn--secondary {
  background-color: transparent;
  color: var(--color-foreground);
  border-color: var(--color-border);
}

.voltify-storefront .btn--secondary:hover {
  border-color: var(--color-foreground);
}

/* Generic bordered form field, ported from the theme's .product__variant-select /
   .product__quantity-input pattern — reused for the checkout form (Shopify itself
   hosts checkout, so the real theme has no checkout form to copy 1:1; this extends
   the same input styling used everywhere else in the theme). */
.voltify-storefront .field-input {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--style-border-radius-inputs);
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-primary--family);
  font-size: var(--font-size-base);
  width: 100%;
}

.voltify-storefront .field-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.voltify-storefront .field-label {
  display: block;
  margin-block-end: 0.375rem;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* ─────────────────────────────────────────────────────────────
   Site header (sections/header.liquid)
   ───────────────────────────────────────────────────────────── */

/* The header is sticky (~65 px), so an in-page link (/pages/privacy-policy#cookies from the consent
   banner and settings) or a keyboard focus jump would otherwise land its target underneath it. */
html {
  scroll-padding-top: 5rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}

.site-header--scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--page-width);
  min-height: 4rem;
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.site-header__logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo { height: 32px; width: auto; display: block; }

.site-header__nav { display: flex; }

.site-header__menu-list {
  display: flex;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__menu-link {
  color: var(--color-foreground);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-header__menu-link:hover,
.site-header__menu-link[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-header__cart {
  position: relative;
  display: inline-flex;
  padding: 0.6875rem;
  margin: -0.6875rem;
  color: #000000;
  text-decoration: none;
}

.site-header__cart svg { width: 1.375rem; }
.site-header__cart svg path { stroke-width: 1.25px; }

.site-header__cart-count {
  position: absolute;
  top: 0.25rem;
  right: 0.125rem;
  min-width: 1.0625rem;
  height: 1.0625rem;
  padding-inline: 0.21875rem;
  border-radius: 999px;
  background-color: #000000;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.0625rem;
  text-align: center;
}

/* ─── Language selector ─── */

.site-header__localization {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-header__locale-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.375rem;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.site-header__locale-button:hover { color: var(--color-foreground); }

.site-header__locale-button--active {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

.site-header__locale-divider {
  color: var(--color-foreground);
  opacity: 0.3;
  font-size: 0.8125rem;
}

/* ─── Mobile drawer ─── */

.site-header__drawer { display: none; }

.site-header__drawer-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem;
  margin: -0.5rem;
  color: var(--color-foreground);
  cursor: pointer;
  list-style: none;
}

.site-header__drawer-toggle::-webkit-details-marker { display: none; }

.site-header__drawer[open] .site-header__icon-open,
.site-header__drawer:not([open]) .site-header__icon-close { display: none; }

.site-header__drawer-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem var(--page-margin) 1.25rem;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.site-header__drawer-panel .site-header__menu-list {
  flex-direction: column;
  gap: 0;
}

.site-header__drawer-panel .site-header__menu-link {
  display: block;
  padding-block: 0.875rem;
  font-size: 1rem;
}

/* Drawer below 1024px, not the theme's usual 750. The inline row (logo + nav + locale switch +
   cart) needs 915px in Bulgarian and 763px in English, measured on the live site (audit B-01): with
   the drawer switching off at 750, every BG page scrolled sideways on tablets. 1024 leaves ~110px of
   slack for wider system fonts. This is the header's own breakpoint — the 749px rules elsewhere
   are for page sections and are unchanged. */
@media screen and (max-width: 1023px) {
  .site-header__nav { display: none; }
  .site-header__drawer { display: block; }
}

/* ─────────────────────────────────────────────────────────────
   Hero (sections/hero.liquid) — text-only variant (no hero image
   asset available locally; the with-image grid variant is left in
   place below for whenever one is added).
   ───────────────────────────────────────────────────────────── */

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero__heading { max-width: 16ch; font-size: var(--font-size-hero); }
.hero__subline { max-width: 44ch; font-size: var(--font-size-h4); color: var(--color-text-secondary); }

.hero__cta {
  align-self: flex-start;
  margin-block-start: 0.75rem;
}

.hero--text-only { padding-block: clamp(5rem, 14vw, 10rem); }
.hero--text-only .hero__content { align-items: center; text-align: center; margin-inline: auto; }
.hero--text-only .hero__cta { align-self: center; }

.hero--with-image {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.hero__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.hero__poster, .hero__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero__video { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

@media screen and (max-width: 749px) {
  .hero--with-image { grid-template-columns: 1fr; gap: 1.75rem; padding-block: clamp(3rem, 10vw, 5rem); }
  .hero--with-image .hero__content { align-items: center; text-align: center; }
  .hero--with-image .hero__cta { align-self: center; }
  .hero__media { max-width: 320px; margin-inline: auto; }
}

/* ─────────────────────────────────────────────────────────────
   Feature trio (sections/feature-trio.liquid)
   ───────────────────────────────────────────────────────────── */

.feature-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* h2 in the markup since B-08 (the homepage went h1 → h3), styled exactly as the h3 it used to be:
   the only differences between the two base rules are size and letter-spacing. */
.voltify-storefront .feature-trio__heading { margin-block-end: 0.625rem; font-size: var(--font-size-h3); letter-spacing: -0.02em; }
.feature-trio__text { color: var(--color-text-secondary); max-width: 36ch; }

@media screen and (max-width: 749px) {
  .feature-trio__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ─────────────────────────────────────────────────────────────
   Trust strip (sections/trust-strip.liquid)
   ───────────────────────────────────────────────────────────── */

.trust-strip {
  margin-block-end: var(--section-padding-block);
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem clamp(2rem, 6vw, 5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-strip__item { color: var(--color-text-secondary); font-size: var(--font-size-small); letter-spacing: 0.02em; }

@media screen and (max-width: 749px) {
  .trust-strip__list { flex-direction: column; align-items: center; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────
   Category grid + category card (sections/category-grid.liquid,
   snippets/category-card.liquid)
   ───────────────────────────────────────────────────────────── */

.category-grid__heading { margin-block-end: 2rem; font-size: var(--font-size-h2); }

.category-grid__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .category-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .category-grid__list { grid-template-columns: 1fr; gap: 2.5rem; }
}

.category-card { display: block; color: var(--color-foreground); text-decoration: none; }

.category-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-block-end: 1.25rem;
  border-radius: var(--border-radius-button);
  background-color: var(--color-background-secondary);
}

.category-card__image,
.category-card__media-empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base);
}

.category-card:hover .category-card__image { opacity: 0.82; }

.category-card__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.category-card:hover .category-card__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.category-card__count { margin-block-start: 0.4rem; color: var(--color-text-secondary); font-size: var(--font-size-small); }

/* ─────────────────────────────────────────────────────────────
   Collection / shop page (sections/collection.liquid) — our /shop
   combines all categories behind in-page tabs rather than separate
   collection URLs, so the theme's tab-less header gets a quiet
   underline-tab strip added; everything else matches 1:1.
   ───────────────────────────────────────────────────────────── */

.collection__header { margin-block-end: clamp(2rem, 5vw, 3rem); }
.collection__tagline { margin-block-start: 0.75rem; max-width: 50ch; color: var(--color-text-secondary); font-size: var(--font-size-h4); }

/* --collection-columns comes from the section's `columns` setting (default 3). */
.collection__grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(var(--collection-columns, 3), minmax(0, 1fr));
  gap: 3rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-block: clamp(4rem, 12vw, 7rem);
  text-align: center;
}

.collection__empty-text {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
}

.collection__empty-link {
  color: #000000;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  padding-block: 0.5rem;
}

.collection__empty-link:hover { opacity: 0.8; }

/* ─── Pagination ─── */

.collection__pagination {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.collection__pagination-link {
  color: var(--color-foreground);
  font-size: var(--font-size-small);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  padding-block: 0.5rem;
}

.collection__pagination-link:hover { color: var(--color-text-secondary); }

.collection__pagination-info { color: var(--color-text-secondary); font-size: var(--font-size-small); }

/* ─── list-collections page (sections/collections.liquid) ─── */

.collections-page__title { margin-block-end: clamp(2rem, 5vw, 3rem); }

.collections-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 989px) {
  .collections-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .collections-page__grid { gap: 1.5rem 1rem; }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .collection__grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .collection__grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   Product card (snippets/product-card.liquid)
   ───────────────────────────────────────────────────────────── */

.product-card {
  display: block;
  color: var(--color-foreground);
  text-decoration: none;
  max-width: 380px;
  margin-inline: auto;
  width: 100%;
  transition: opacity var(--transition-base);
}

.product-card:hover { opacity: 0.95; }

.product-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-block-end: 1rem;
  border-radius: var(--border-radius-button);
  background-color: var(--color-background-secondary);
}

.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image-wrap img { transform: scale(1.04); }

.product-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.product-card:hover .product-card__title { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

.product-card__price { margin-block-start: 0.25rem; color: var(--color-text-secondary); font-size: var(--font-size-small); }

.product-card--sold-out .product-card__image-wrap { opacity: 0.5; }
.product-card--sold-out .product-card__title { color: var(--color-text-secondary); }

.product-card__badge { margin-inline-start: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; }

/* ─────────────────────────────────────────────────────────────
   Product detail (sections/product.liquid)
   ───────────────────────────────────────────────────────────── */

.product__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }

.product__media { display: flex; flex-direction: column; gap: 0.75rem; }

/* The theme gives .product__media-main no styling at all — the image sits at its natural
   aspect ratio. This is only the <button> reset needed to make it a keyboard-reachable
   lightbox trigger; no box, no crop, matching the theme's visual result. */
.product__media-main {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
}

.product__media-main[data-lightbox-trigger] { cursor: zoom-in; }

.product__main-image {
  width: 100%;
  height: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.product__main-image.is-swapping { opacity: 0; transform: scale(0.98); }

.product__media-placeholder { width: 100%; aspect-ratio: 1; background-color: var(--color-background-secondary); }

@media (prefers-reduced-motion: reduce) {
  .product__main-image { transition: none; }
  .product__main-image.is-swapping { opacity: 1; transform: none; }
}

.product__thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 0.75rem; }

.product__thumbnail {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-button);
  background: none;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.product__thumbnail:hover { border-color: var(--color-text-secondary); }
.product__thumbnail.is-active { border-color: var(--color-foreground); transform: scale(1.04); }
.product__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }

.product__info { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.product__vendor { color: var(--color-text-secondary); font-size: var(--font-size-small); letter-spacing: 0.08em; text-transform: uppercase; }
.product__title { font-size: var(--font-size-h1); }
.product__price { font-size: var(--font-size-h4); }

.product__form { display: flex; flex-direction: column; gap: 1.25rem; margin-block-start: 0.75rem; }
.product__field { display: flex; flex-direction: column; gap: 0.375rem; }
.product__field-label { font-size: var(--font-size-small); color: var(--color-text-secondary); }

/* Styled directly by the theme rather than via a shared input class. */
.product__variant-select,
.product__quantity-input {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--style-border-radius-inputs);
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-base);
}

.product__quantity-input { max-width: 6rem; }
.product__variant-select { max-width: 20rem; }

/* ─── Photo swatches — the one place bronze (#9a7b4f) is used in the real
   theme, reserved for the wallet color-swatch selected/focus state. ─── */

.product__swatch-current { color: var(--color-foreground); font-weight: var(--font-weight-medium); }
.product__swatches { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.variant-swatch,
.product__swatch {
  position: relative;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-button);
  background: var(--color-background-secondary);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

.variant-swatch:hover,
.product__swatch:hover { opacity: 0.85; transform: scale(1.04); }

.variant-swatch:focus-visible,
.product__swatch:focus-visible { outline: 2px solid #9a7b4f; outline-offset: 2px; }

.variant-swatch.is-selected,
.product__swatch.is-selected { border-color: #9a7b4f; border-width: 2px; }

.variant-swatch:disabled,
.product__swatch[data-sold-out] { opacity: 0.45; cursor: not-allowed; }

/* Photo swatches: each swatch shows that variant's own product shot. */
.product__swatch-image { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A full product shot has ~35% white margin on every side; scaling to the centre keeps the chip
   showing the material instead of a small product on white. Only for the photo fallback — a
   dedicated SwatchImageUrl is already a crop. */
.product__swatch-image--photo { transform: scale(2.4); }

@media (prefers-reduced-motion: reduce) {
  .variant-swatch,
  .product__swatch { transition: border-color var(--transition-base); }
  .variant-swatch:hover,
  .product__swatch:hover { transform: none; }
}

.product__accordion { margin-block-start: 0.75rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.product__accordion-summary { display: flex; align-items: center; justify-content: space-between; padding-block: 0.875rem; font-weight: var(--font-weight-medium); cursor: pointer; list-style: none; }
.product__accordion-summary::-webkit-details-marker { display: none; }
.product__accordion-icon { flex-shrink: 0; transition: transform var(--transition-base); }
.product__accordion[open] .product__accordion-icon { transform: rotate(180deg); }
.product__description { padding-block-end: 1rem; color: var(--color-text-secondary); }

.product__trust { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.product__trust-item { color: var(--color-text-secondary); font-size: var(--font-size-small); }

.stock-message { font-size: var(--font-size-small); color: var(--color-text-secondary); margin-top: 0.5rem; }

@media screen and (max-width: 749px) {
  .product__layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   Image lightbox (product detail). Native <dialog> — the theme's
   own modal convention; its critical.css already reserves the
   html:has(dialog[scroll-lock][open]) scroll lock ported below.
   ───────────────────────────────────────────────────────────── */

html:has(dialog[scroll-lock][open]) {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

/* Only when open — the UA's `dialog:not([open]) { display: none }` must keep winning. */
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.92);
}

/* The stage is a fixed box; the image sizes itself inside it. That way the letterbox
   space belongs to the stage, not the <img>, so clicking beside the image closes the
   lightbox instead of zooming it. */
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 1040px);
  height: min(82vh, 1040px);
  overflow: hidden;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: zoom-in;
  transition: transform 250ms ease;
}

.lightbox__image.is-zoomed {
  transform: scale(2.2);
  cursor: zoom-out;
}

.lightbox__control {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.lightbox__control:hover { background-color: rgba(255, 255, 255, 0.18); }
.lightbox__control:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-small);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__image { transition: none; }
}

@media screen and (max-width: 749px) {
  .lightbox__stage { width: 100vw; height: 72vh; }
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   product-reviews (sections/product-reviews.liquid + assets/
   product-reviews.css). Only the empty state ships — there is no
   review data to migrate — so just those rules are ported.
   ───────────────────────────────────────────────────────────── */

.product-reviews__empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-h4);
}

/* Invitation to review. A warm-white panel rather than a bolted-on banner: it uses the same
   secondary background the rest of the storefront already alternates with, so it reads as part
   of the page. The bronze belongs to the button alone — the surface stays neutral, which is what
   keeps it inviting instead of shouty. */
.product-reviews__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block-start: 2rem;
  padding: 1.5rem;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-button);
}

.product-reviews__cta-text {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-secondary);
}

/* Not built on .btn: that carries the theme's near-black primary styling, and overriding it back
   to bronze would fight the cascade for no gain. Same geometry, own colour.

   Specificity note: `.voltify-storefront a { color: inherit }` is a class+type selector (0,1,1),
   which outranks a bare `.product-reviews__cta-button { color: #fff }` (0,1,0) regardless of
   source order — the link fell back to inherit and rendered near-black text on this near-black
   button. Qualifying the selector with the element type matches that specificity so the button's
   own white text actually wins. */
a.product-reviews__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-button);
  /* Matches .btn--primary (#000 / #222 hover), not the bronze it used to be. In the real theme
     bronze (#9a7b4f) marks selection and rating — the photo swatches and the star glyphs — where
     it encodes something. Reusing it on a call to action made this the only bronze button on the
     storefront, reading as a different brand from every other button including the Add to cart
     directly above it. Bronze stays on the swatches and stars, which is where it means something. */
  background-color: #000000;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-base), transform var(--transition-fast);
}

a.product-reviews__cta-button:hover {
  background-color: #222222;
}

.product-reviews__cta-button:active {
  transform: translateY(1px);
}

.product-reviews__cta-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* Stacks on narrow screens so the button keeps a full-width tap target rather than being
   squeezed next to the text. */
@media (max-width: 40rem) {
  .product-reviews__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .product-reviews__cta-button {
    justify-content: center;
  }
}

/* Approved reviews. Star glyphs reuse the same bronze (#9a7b4f) the review form's SVG stars
   already use, so the submit and display sides of the feature read as one thing. */
.product-reviews__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-block-end: 1.75rem;
}

.product-reviews__heading {
  font-size: var(--font-size-h3);
}

.product-reviews__summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.product-reviews__average {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

/* Shared by the summary row and each individual review. Unfilled stars stay visible in a
   light grey rather than disappearing, so a 3/5 still reads as "3 of 5" and not just "3". */
.product-reviews__stars {
  display: inline-flex;
  gap: 0.0625rem;
  color: var(--color-border);
  letter-spacing: 0.05em;
}

.product-reviews__stars .is-filled { color: #9a7b4f; }

.product-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.product-reviews__item {
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--color-border);
}

.product-reviews__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.product-reviews__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-block-end: 0.5rem;
}

.product-reviews__author {
  font-weight: var(--font-weight-medium);
}

.product-reviews__date {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* pre-wrap so a reviewer's own paragraph breaks survive; the text is stored and rendered as
   plain text, so this is presentation only. */
.product-reviews__text {
  margin: 0;
  white-space: pre-wrap;
}

/* Rating summary under the product title. A link, but deliberately not styled like one —
   underlining it would compete with the price directly beneath. */
.product__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.product__rating-stars {
  display: inline-flex;
  gap: 0.0625rem;
  color: var(--color-border);
  letter-spacing: 0.05em;
}

.product__rating-stars .is-filled { color: #9a7b4f; }

.product__rating-value {
  color: var(--color-foreground);
  font-weight: var(--font-weight-semibold);
}

.product__rating:hover .product__rating-count { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   related-products (sections/related-products.liquid)
   ───────────────────────────────────────────────────────────── */

.related-products { border-top: 1px solid var(--color-border); }

.related-products__heading {
  margin-block-end: 2rem;
  font-size: var(--font-size-h2);
}

.related-products__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 989px) {
  .related-products__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 749px) {
  .related-products__list { gap: 2rem 1rem; }
}

/* ─────────────────────────────────────────────────────────────
   Cart (sections/cart.liquid). Our cart posts full-page (no Cart
   API/AJAX re-render), so there's no stepper +/- or is-loading
   state — same visual language, plain <input type=number> +
   Update/Remove text controls instead. See summary for the
   functionality-preservation call.
   ───────────────────────────────────────────────────────────── */

.cart__title { margin-block-end: 2.5rem; }

/* minmax(0, 1fr), not a bare 1fr: a `1fr` track is `minmax(auto, 1fr)`, whose automatic minimum
   is the item's min-content size, so the track refuses to shrink below the widest thing inside it
   and the item then renders wider than this container. The summary card hits exactly that — see
   .cart__promo-form below — which is what pushed the Bulgarian cart into horizontal scroll on a
   phone. minmax(0, ...) lets the track shrink to the container so the contents reflow inside it,
   which is what the rest of this section already assumed. Checkout and order-confirmation reuse
   .cart__layout, so they get the same guarantee. */
.cart__layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem 5rem; align-items: start; }

.cart__lines { margin: 0; padding: 0; border-top: 1px solid var(--color-border); list-style: none; }

.cart-line {
  display: grid;
  /* minmax(0, 1fr) for the same reason as .cart__layout above: the details column has to be
     allowed to shrink so a long product title or control label reflows inside the row instead
     of widening it. */
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  grid-template-areas: "media details total";
  gap: 0 1.5rem;
  align-items: center;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}

.cart-line__media {
  grid-area: media;
  display: block;
  width: 5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--border-radius-button);
  background-color: var(--color-background-secondary);
  flex-shrink: 0;
}

.cart-line__media img,
.cart-line__image { width: 100%; height: 100%; object-fit: cover; }

.cart-line__details { grid-area: details; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.cart-line__title { color: var(--color-foreground); font-weight: var(--font-weight-medium); text-decoration: none; }
.cart-line__title:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.cart-line__variant,
.cart-line__unit-price { color: var(--color-text-secondary); font-size: var(--font-size-small); }

.cart-line__controls { display: flex; align-items: center; gap: 0.625rem; margin-block-start: 0.375rem; }
.cart-line__qty-form { display: flex; align-items: center; gap: 0.5rem; }
.cart-line__controls .field-input { width: 4.5rem; padding: 0.4375rem 0.5rem; }

/* 44px tall tap target (audit B-04) with the text centred. The button has no background or border,
   so only the invisible box grows; the negative block margin gives the extra 14px back to the
   layout, so the row keeps its old height and the 7px above/below falls inside the 10px gap. */
.cart-line__remove-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-block: -0.4375rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cart-line__remove-btn:hover { color: var(--color-foreground); }

.cart-line__total { grid-area: total; min-width: 5rem; font-weight: var(--font-weight-medium); text-align: end; }

.cart__summary {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-button);
}

/* Theme class names (sections/cart.liquid). Checkout and order-confirmation reuse them so the
   three summary panels stay visually identical — neither has a Shopify counterpart. */
.cart__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.cart__summary-row--total { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }

.cart__summary-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.25rem 0;
}

/* Discount line. Bronze text only — same restraint as the review CTA a few sections down: bronze
   marks something SELECTED (a swatch, a star rating, and now an applied code), never a plain
   surface or button. */
.cart__summary-row--discount { color: #9a7b4f; font-weight: var(--font-weight-medium); }

/* Wraps, and the input carries a real flex-basis. This row is an <input> beside a nowrap button,
   and an input contributes its own intrinsic width (~200px — Chrome's default 20-character size)
   to the row's min-content no matter how small min-width is. In Bulgarian "Приложи" makes the
   button 126px against "Apply"'s 95px, taking the row's min-content to 343px inside a 271px card,
   and that is what blew out the grid track above. minmax(0, 1fr) there lets the track shrink;
   wrapping here makes the row degrade sensibly once it does, dropping the button onto its own
   line instead of squeezing the code field down to a few characters on a narrow phone. */
.cart__promo-form { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.cart__promo-input { flex: 1 1 8rem; min-width: 0; padding: 0.6875rem 0.75rem; border: 1px solid var(--color-border); font-size: var(--font-size-small); }
.cart__promo-button { padding-inline: 1rem; white-space: nowrap; }

.cart__promo-form--applied {
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background-color: #faf6ef; /* Bronze-tinted, not the neutral --color-background-secondary — this
                                 row IS the selection the discount above refers to. */
  border: 1px solid #9a7b4f;
  border-radius: var(--border-radius-button);
}
.cart__promo-code-chip { font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; color: #7a6240; }
.cart__promo-remove-btn { background: none; border: none; padding: 0; color: var(--color-text-secondary); font-size: var(--font-size-small); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.cart__promo-remove-btn:hover { color: var(--color-foreground); }

.cart__checkout { width: 100%; padding-block: 0.9375rem; }

/* 44px tap targets for the cart's Update and Checkout buttons (audit B-12) with no visible change.
   The button's own box grows from 41px to 44px, but it is made transparent; its fill, border and
   radius are painted by ::before, inset 1.5px top and bottom — exactly the old 41px — from the
   --tap-* colours each state sets. The negative block margins give the 3px back to the layout.
   (.cart__checkout's own padding above never applied: .voltify-storefront .btn outranks it.) */
.voltify-storefront .cart-line__qty-form .btn,
.voltify-storefront .cart__checkout {
  position: relative;
  isolation: isolate;
  min-height: 2.75rem;
  margin-block: -0.09375rem;
  background-color: transparent;
  border-color: transparent;
}
.voltify-storefront .cart-line__qty-form .btn::before,
.voltify-storefront .cart__checkout::before {
  content: "";
  position: absolute;
  inset: 0.03125rem -1px;   /* 0.5px from the padding edge = 1.5px inside the 44px border box */
  z-index: -1;
  border: 1px solid var(--tap-border);
  border-radius: var(--border-radius-button);
  background-color: var(--tap-bg);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.voltify-storefront .cart__checkout { --tap-bg: #000000; --tap-border: #000000; }
.voltify-storefront .cart__checkout:hover { --tap-bg: #222222; --tap-border: #222222; }
.voltify-storefront .cart__checkout:active,
.voltify-storefront .cart__checkout:focus-visible { --tap-bg: #1a1a1a; --tap-border: #1a1a1a; }
.voltify-storefront .cart-line__qty-form .btn { --tap-bg: transparent; --tap-border: var(--color-border); }
.voltify-storefront .cart-line__qty-form .btn:hover { --tap-border: var(--color-foreground); }

.cart__continue { align-self: center; color: var(--color-text-secondary); font-size: var(--font-size-small); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.cart__continue:hover { color: var(--color-foreground); }

.cart__empty { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-block: clamp(3rem, 10vw, 6rem); text-align: center; }
.cart__empty-heading { font-size: var(--font-size-h2); }

.order-confirm__continue { margin-block-start: 2rem; }

@media screen and (max-width: 749px) {
  .cart__layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cart-line { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "media details" ". controls" ". total"; gap: 0.75rem 1rem; }
  .cart-line__total { min-width: 0; text-align: start; font-size: var(--font-size-small); color: var(--color-text-secondary); }

  /* The qty input + Update button + Remove link never fit side by side in the narrow "details"
     column next to the thumbnail (it's ~213px on a 375px phone) — .cart-line__controls had no
     flex-wrap, so the row simply overflowed past the edge of the screen instead of wrapping,
     pushing the whole page into horizontal scroll. Wrapping both the outer row and the qty
     form lets each control drop to its own line within the column instead of spilling out. */
  .cart-line__controls { flex-wrap: wrap; row-gap: 0.5rem; }
  .cart-line__qty-form { flex-wrap: wrap; row-gap: 0.375rem; }
}

/* ─────────────────────────────────────────────────────────────
   Checkout — Shopify hosts checkout itself, so the real theme has
   no checkout page to copy 1:1. This reuses the theme's own form
   field pattern (.field-label / .field-input, see Buttons section
   above) and the cart's summary-card styling for the order recap.
   ───────────────────────────────────────────────────────────── */

.checkout__field { margin-block-end: 1.25rem; }
.checkout__field-row { display: flex; gap: 1.25rem; }
.checkout__field-row .checkout__field { flex: 1; }

.checkout__payment-note { color: var(--color-text-secondary); font-size: var(--font-size-small); margin-block: 1.5rem; }

/* ─── Delivery step (1 Oct 2026): Econt office or the customer's address ─────────────────────
   Two cards, side by side even on a 390px phone, neither chosen until the customer taps one. The
   radios are real inputs placed before the cards and panels, so the sibling rules below show the
   chosen card and its panel with no script. They are visually hidden but stay focusable: arrow keys
   move between them and the focus ring is drawn on the card. */
.delivery { margin: 0.5rem 0 0; padding: 0; border: 0; min-width: 0; }
.delivery__legend { padding: 0; margin-block-end: 0.75rem; font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-foreground); }
.delivery__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.delivery__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.delivery-option {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--style-border-radius-inputs, 4px);
  background: var(--color-background);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.delivery-option:hover { border-color: var(--color-text-secondary); }
.delivery-option__title { font-weight: var(--font-weight-semibold); color: var(--color-foreground); line-height: 1.3; }
.delivery-option__hint { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.35; }
.delivery-option__price { margin-block-start: auto; padding-block-start: 0.375rem; font-size: var(--font-size-small); color: var(--color-foreground); }
#Delivery-Office:checked ~ .delivery__options .delivery-option--office,
#Delivery-Door:checked ~ .delivery__options .delivery-option--door {
  border-color: var(--color-foreground);
  box-shadow: inset 0 0 0 1px var(--color-foreground);
  background: var(--color-background-secondary);
}
#Delivery-Office:focus-visible ~ .delivery__options .delivery-option--office,
#Delivery-Door:focus-visible ~ .delivery__options .delivery-option--door {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.delivery__panel { display: none; margin-block-start: 1.25rem; }
#Delivery-Office:checked ~ .delivery__panel--office,
#Delivery-Door:checked ~ .delivery__panel--door { display: block; }
.delivery__hint { margin: 0.375rem 0 0; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.delivery [hidden] { display: none !important; }
/* How the delivery price is worked out (Econt's tariff, 1 Oct 2026), under the two cards. */
.delivery__price-note { margin: 0.625rem 0 0; font-size: var(--font-size-small); color: var(--color-text-secondary); }
/* Summary: an address in a place without an Econt office costs Econt's higher address price. */
.cart__summary-note { margin: 0.25rem 0 0; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.cart__summary-note[hidden] { display: none; }

/* The office search and the chosen office. */
.office-picker { margin-block-end: 1.25rem; }
.office-picker__status { margin: 0.5rem 0 0; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.office-results { margin: 0.5rem 0 0; padding: 0; list-style: none; max-height: 20rem; overflow-y: auto; border-top: 1px solid var(--color-border); }
.office-results:empty { border-top: 0; }
.office-results__option {
  display: flex; flex-direction: column; gap: 0.125rem; width: 100%;
  padding: 0.625rem 0.25rem; border: 0; border-bottom: 1px solid var(--color-border);
  background: none; text-align: start; cursor: pointer; font: inherit; color: inherit;
}
.office-results__option:hover, .office-results__option:focus-visible { background: var(--color-background-secondary); outline: none; }
.office-results__name { font-weight: var(--font-weight-medium); }
.office-results__address { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.office-selected {
  display: flex; flex-direction: column; gap: 0.125rem;
  padding: 0.875rem; border: 1px solid var(--color-foreground); border-radius: var(--style-border-radius-inputs, 4px);
  background: var(--color-background-secondary);
}
.office-selected__label { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.office-selected__address { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.office-selected__change {
  align-self: flex-start; margin-block-start: 0.375rem; padding: 0; border: 0; background: none;
  color: var(--color-foreground); font: inherit; font-size: var(--font-size-small);
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer;
}
/* Town and postcode (door delivery). Side by side from 480px: the labels never wrap (one line each,
   so the two inputs start at the same height), and the postcode column is wide enough for its
   placeholder ("напр. 1000") in a wide font. Below 480px they stack — town full width, postcode on its
   own row at half width — because a real iPhone (SF Pro, 390px) wrapped "Пощенски код *" onto two
   lines and cut the placeholder to "напр. 100" in a 104px box (1 Oct 2026). */
.checkout__field-row { align-items: flex-start; }
.checkout__field-row .checkout__field { min-width: 0; }
.checkout__field-row .field-label { white-space: nowrap; }
.checkout__field-row .checkout__field--postcode { flex: 0 0 11rem; }
@media (max-width: 479.98px) {
  .delivery__options { gap: 0.5rem; }
  .delivery-option { padding: 0.75rem 0.75rem 0.625rem; }
  .checkout__field-row { flex-direction: column; gap: 0; }
  .checkout__field-row .checkout__field { flex: none; width: 100%; }
  .checkout__field-row .checkout__field--postcode { width: 50%; min-width: 10rem; }
}

/* The terms / returns line under the order button: the payment note's quiet tone, with the two
   links underlined so they read as links without shouting. */
.checkout__legal { color: var(--color-text-secondary); font-size: var(--font-size-small); margin-block: 1rem 0; }
.checkout__legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* Validation messages. #b00020 is the theme's own error red, taken from
   .cart-line__unavailable in sections/cart.liquid — the only error colour it defines. */
.field-error { display: block; margin-block-start: 0.375rem; color: #b00020; font-size: var(--font-size-small); }
.form-error-summary { margin-block-end: 1.25rem; color: #b00020; font-size: var(--font-size-small); }
.form-error-summary ul { margin: 0; padding-inline-start: 1.25em; }

/* Cart notices (TempData["CartNotice"]/["CartError"]) — auto-removed-item info uses the same
   neutral tone as .checkout__payment-note; a rejection reuses the theme's one error colour above
   so it reads consistently with everything else on this page that can go wrong. */
.cart__notice { margin-block-end: 1.25rem; padding: 0.75rem 1rem; border-radius: 4px; background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: var(--font-size-small); }
.cart__notice--error { color: #b00020; background: transparent; border: 1px solid #b00020; }

/* ─────────────────────────────────────────────────────────────
   Shared modal mechanics — newsletter-popup.js and
   promo-announcement.js both use this one convention rather than
   each rolling their own overlay:

     unenhanced (no JS, or before the script has run): renders as a
     plain static card in the normal page flow. Only the newsletter
     popup relies on this — it has real content behind it (the
     subscribe form), so a customer with JavaScript off still reaches
     a working form via the footer's anchor link. The promo popup has
     no equivalent no-JS purpose, but degrades the same way rather
     than needing a separate rule: worst case it reads as a small
     static banner instead of a popup, never a blocked page.

     .js-enhanced (added by the script on init): hidden outright until

     .is-open (added by the script to actually show it): becomes a
     fixed, centered overlay with a dimmed backdrop.

   Kept content-agnostic on purpose — .newsletter-popup and
   .promo-popup each add their own panel styling below.
   ───────────────────────────────────────────────────────────── */

.voltify-modal__backdrop { display: none; }

.voltify-modal.js-enhanced:not(.is-open) { display: none; }

.voltify-modal.js-enhanced.is-open .voltify-modal__backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  z-index: 89;
}

.voltify-modal__panel { position: relative; }

.voltify-modal.js-enhanced.is-open .voltify-modal__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  margin: 0;
}

.voltify-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.voltify-modal__close:hover { color: var(--color-foreground); }

/* Newsletter popup. Deliberately breaks from the site's bronze accent — black top border here
   only, by explicit instruction — everything else stays the neutral warm-white/near-black the
   rest of the site already uses. Bronze is untouched everywhere else (promo popup, admin, chips,
   emails): the override below is scoped to .newsletter-popup so nothing else is affected. */
.newsletter-popup .voltify-modal__panel {
  max-width: 440px;
  margin: 3rem auto;
  padding: 2.5rem 2rem 2rem;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-top: 3px solid #000;
  border-radius: 20px;
  box-shadow: 0 24px 60px -12px rgba(26, 26, 26, 0.28);
}

/* Entrance animation — scoped to this popup only (the promo popup keeps its plain, instant show).
   A CSS animation rather than a transition: the panel goes straight from display:none to visible
   the moment .is-open is added, and a transition has no "before" state to animate from in that
   case, but a keyframe animation always plays from its own 0% regardless. */
@keyframes newsletterPopupIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.newsletter-popup.voltify-modal.js-enhanced.is-open .voltify-modal__panel {
  animation: newsletterPopupIn 260ms ease-out both;
}
.newsletter-popup.voltify-modal.js-enhanced.is-open .voltify-modal__backdrop {
  animation: fadeIn 260ms ease-out both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .newsletter-popup.voltify-modal.js-enhanced.is-open .voltify-modal__panel,
  .newsletter-popup.voltify-modal.js-enhanced.is-open .voltify-modal__backdrop {
    animation: none;
  }
}

.newsletter-popup__heading { margin: 0 0 0.625rem; font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-foreground); }
.newsletter-popup__body { margin: 0 0 1.5rem; color: var(--color-text-secondary); font-size: var(--font-size-small); line-height: var(--line-height-body); }
.newsletter-popup__label { display: block; margin-block-end: 0.75rem; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.newsletter-popup__row { display: flex; gap: 0.625rem; }
.newsletter-popup__input { flex: 1; min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid var(--color-border); font-size: var(--font-size-small); }
.newsletter-popup__submit { white-space: nowrap; }
/* Two-class selectors here to out-specificity .voltify-storefront input / .voltify-storefront .btn
   above, which otherwise pin both back to the site-wide 4px radius. */
.newsletter-popup .newsletter-popup__input { border-radius: 10px; }
.newsletter-popup .newsletter-popup__submit { border-radius: 10px; }
.newsletter-popup__result { margin: 0.875rem 0 0; font-size: var(--font-size-small); }
.newsletter-popup__result--error { color: #b00020; }
.newsletter-popup__privacy-note { margin: 0.875rem 0 0; font-size: 0.75rem; color: var(--color-text-secondary); line-height: 1.5; }
.newsletter-popup__privacy-link { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.newsletter-popup__privacy-link:hover { color: var(--color-foreground); }

/* Footer trigger link — replaces the old always-visible form entirely. */
.site-footer__newsletter-link { color: inherit; font-size: var(--font-size-small); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; background: none; border: none; padding: 0; }
.site-footer__newsletter-link:hover { color: #9a7b4f; }

/* Promo announcement popup — same mechanics, its own panel. */
.promo-popup .voltify-modal__panel {
  max-width: 440px;
  margin: 3rem auto;
  padding: 2.25rem 1.75rem 1.75rem;
  background-color: #faf6ef;
  border: 1px solid #9a7b4f;
  border-radius: var(--border-radius-button);
  text-align: center;
}
.promo-popup__heading { margin: 0 0 0.5rem; font-size: var(--font-size-h4); color: var(--color-foreground); }
.promo-popup__body { margin: 0 0 1.25rem; color: var(--color-text-secondary); }
.promo-popup__code-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.promo-popup__code { padding: 0.5rem 1rem; border: 1px dashed #9a7b4f; border-radius: var(--border-radius-button); font-weight: var(--font-weight-semibold); letter-spacing: 0.05em; color: #7a6240; }
.promo-popup__copy { white-space: nowrap; }

/* Ticker banner — a thin bar above the header, marquee-scrolling for as long as the promotion
   is active. Bronze background here (not just bronze text) is the one deliberate exception to
   "bronze never fills a surface": this bar exists to be noticed at a glance, on every page,
   which is a different job from an inline accent. */
.promo-ticker {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #9a7b4f;
  color: #fff;
  font-size: var(--font-size-small);
  white-space: nowrap;
}
.promo-ticker__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-block: 0.5rem;
  animation: voltify-ticker-scroll 28s linear infinite;
}
.promo-ticker__item { padding-inline: 1.5rem; }
.promo-ticker__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding-inline: 0.875rem;
  border: none;
  background: linear-gradient(to right, rgba(154, 123, 79, 0), #9a7b4f 35%);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

@keyframes voltify-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-ticker__track { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Static pages (sections/page.liquid) — ported verbatim, including
   the .about-* / .faq-* rules the theme scopes under
   .generic-page__body for markup authored inside the page body.
   ───────────────────────────────────────────────────────────── */

.generic-page__inner {
  max-width: 720px;
  margin-inline: auto;
}

.generic-page__title { margin-block-end: 2.5rem; }

.rte {
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.rte > * + * { margin-block-start: 1em; }

.rte h2,
.rte h3,
.rte h4 {
  color: var(--color-foreground);
  margin-block-start: 2em;
}

.rte a {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rte a:hover { color: #000000; text-decoration-thickness: 2px; }

/* The model withdrawal form (/pages/withdrawal-form): the official text, set apart in a quiet frame
   so it reads as the thing to copy or print, not as more of the page. */
.rte .withdrawal-form { border: 1px solid var(--color-border); border-radius: 4px; padding: 1rem 1.25rem; }
.rte .withdrawal-form p { margin-block: 0.5rem; overflow-wrap: anywhere; } /* the template's long dotted blanks wrap on a phone */
/* The BG (KZP) template's date and signature blanks sit side by side, each with its label under it. */
.rte .withdrawal-form__sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2rem; }

.rte ul,
.rte ol { padding-inline-start: 1.5em; }

.rte li + li { margin-block-start: 0.375em; }

/* ─── FAQ items ─── */

.generic-page__body .faq-list {
  margin-block-start: 2rem;
  border-top: 1px solid var(--color-border);
}

.generic-page__body .faq-item {
  border-bottom: 1px solid var(--color-border);
  padding-block: 1.75rem;
}

.generic-page__body .faq-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.625rem 0;
  color: var(--color-foreground);
}

.generic-page__body .faq-item p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ─── About page ─── */

.generic-page__body .about-hero {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-block-end: 2.5rem;
}

.generic-page__body .about-lead {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  color: var(--color-foreground);
}

.generic-page__body .about-body p { margin-block-end: 1.25rem; }

.generic-page__body .about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-block-start: 3rem;
  padding-block-start: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.generic-page__body .about-value h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: 0.5rem;
  color: var(--color-foreground);
}

.generic-page__body .about-value p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
}

@media screen and (max-width: 749px) {
  .generic-page__body .about-values { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   contact-form (sections/contact-form.liquid) — ported verbatim
   ───────────────────────────────────────────────────────────── */

.contact-form { text-align: center; }
.contact-form__heading { margin-block-end: 1rem; }

.contact-form__intro {
  color: var(--color-text-secondary);
  max-width: 560px;
  margin-inline: auto;
  margin-block-end: 2.5rem;
}

.contact-form__errors {
  max-width: 560px;
  margin-inline: auto;
  margin-block-end: 0.75rem;
  text-align: left;
}

.contact-form__success {
  max-width: 560px;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

.contact-form__fields {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}

.contact-form__field { display: flex; flex-direction: column; gap: 0.375rem; }

.contact-form__label { font-size: 0.875rem; font-weight: var(--font-weight-medium); }

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-foreground);
  transition: border-color var(--transition-base);
}

.contact-form__input:focus,
.contact-form__textarea:focus { outline: none; border-color: var(--color-foreground); }

.contact-form__textarea { resize: vertical; min-height: 120px; }

@media screen and (max-width: 749px) {
  .contact-form__submit { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   404 (sections/404.liquid) — ported verbatim
   ───────────────────────────────────────────────────────────── */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  padding-block: clamp(4rem, 12vw, 8rem);
}

.not-found__code {
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1;
  color: var(--color-background-secondary);
  margin: 0;
}

.not-found__message {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-secondary);
  margin: 0;
}

.not-found__link {
  color: #000000;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.not-found__link:hover { opacity: 0.8; }

/* ─────────────────────────────────────────────────────────────
   Site footer (sections/footer.liquid)
   ───────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--color-border); }
.site-footer__inner { max-width: var(--page-width); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--page-margin); }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.5rem 3rem; }
.site-footer__logo { display: block; width: 87px; height: auto; }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin: 0; padding: 0; list-style: none; }
.site-footer__link { color: var(--color-text-secondary); font-size: var(--font-size-small); text-decoration: none; }
.site-footer__link:hover { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 0.35em; }
.site-footer__legal { display: flex; flex-direction: column; gap: 0.375rem; margin-block-start: 3rem; }
.site-footer__copyright,
.site-footer__disclaimer { color: var(--color-text-secondary); font-size: var(--font-size-small); }
.site-footer__disclaimer { font-size: 0.8125rem; }

@media screen and (max-width: 749px) {
  .site-footer__link { display: inline-block; padding-block: 0.625rem; }
  .site-footer__menu { gap: 0 2rem; }
}

/* Required-field marker on the checkout form.
   The form had no marker at all even though every field except Notes is required; adding one
   to the new email field alone would have implied the others were optional. Applied via a
   wrapper class so the asp-for label keeps rendering its localized Display name unchanged. */
.voltify-storefront .checkout__field--required .field-label::after {
  content: " *";
  color: #b00020;
}

/* ─────────────────────────────────────────────────────────────
   Honeypot
   ───────────────────────────────────────────────────────────── */

/* Deliberately NOT display:none or hidden — many bots skip those, which is the whole point of
   the trap. Pushed off-screen instead, so it is absent visually while still being a real, present
   field in the DOM that automation will fill. The markup pairs this with aria-hidden and
   tabindex="-1" so keyboard and screen-reader users can never reach it. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Add-to-cart confirmation panel (_CartAddedPopup.cshtml + cart-popup.js).
   Fixed to the corner rather than a centred modal with a backdrop: adding to the cart is not a
   decision that needs blocking the page, and a backdrop would sit between the customer and the
   product they were just looking at. Server-rendered visible, so it works with JS disabled. */
.cart-popup {
  position: fixed;
  right: var(--page-margin);
  bottom: var(--page-margin);
  z-index: 60;
  width: min(22rem, calc(100vw - (var(--page-margin) * 2)));
  padding: 1rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
  animation: cart-popup-in var(--transition-base) both;
}

@keyframes cart-popup-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.cart-popup--closing {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Respects a reduced-motion preference: the panel still appears, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
  .cart-popup { animation: none; }
  .cart-popup--closing { transition: none; }
}

.cart-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cart-popup__heading {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.cart-popup__check { color: #2E7D32; }

.cart-popup__close {
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}

.cart-popup__close:hover { color: var(--color-foreground); }

.cart-popup__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.cart-popup__image {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-popup__title {
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.cart-popup__meta {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.cart-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Checkout is the reason this panel exists, so it takes the full first row and the primary style;
   the other two are secondary routes. */
.cart-popup__checkout { flex: 1 1 100%; }

.cart-popup__actions .btn {
  padding: 0.625rem 1rem;
  font-size: var(--font-size-small);
}

.cart-popup__continue {
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
  padding: 0.625rem 0.25rem;
}

.cart-popup__continue:hover { color: var(--color-foreground); }

/* Checkout consent opt-in (abandoned-cart reminders).
   Deliberately plain: the box is a real checkbox at its native size, the label is the full
   sentence and is clickable, and nothing here visually de-emphasises it relative to the required
   fields above. A marketing consent that is styled to be overlooked is not consent. */
.checkout__field--consent {
    margin-block: 0.25rem 1rem;
}

.checkout__consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    line-height: 1.45;
}

.checkout__consent-box {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--color-foreground);
    cursor: pointer;
}

.checkout__field--consent .field-hint {
    margin: 0.35rem 0 0 1.675rem;
    font-size: 0.8125rem;
    opacity: 0.75;
}

/* Footer newsletter signup.
   The consent sentence is the field's own label and sits above it at full width, so it cannot be
   mistaken for a caption on something else. Nothing here is visually quieter than the rest of the
   footer: a marketing consent styled to be skimmed past is not a consent. */
.site-footer__newsletter {
    margin-block: 2rem 1.5rem;
    max-width: 34rem;
}

.site-footer__newsletter-heading {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.site-footer__newsletter-label {
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.site-footer__newsletter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer__newsletter-input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.site-footer__newsletter-button {
    flex: 0 0 auto;
}

.site-footer__newsletter-help {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.site-footer__newsletter-notice {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

.site-footer__newsletter-notice--error {
    color: #c0392b;
}

/* Back-in-stock signup, shown in place of a usable Add to cart.
   Same rule as the footer signup: the consent sentence is the label, at full size, above the
   field — never a caption underneath in smaller grey text. */
.product__back-in-stock {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

.product__back-in-stock-label {
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1.45;
}

.product__back-in-stock-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product__back-in-stock-input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
}

.product__back-in-stock-help {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    opacity: 0.75;
}

.product__back-in-stock-notice {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
}

.product__back-in-stock-notice--error {
    color: #c0392b;
}

/* ─────────────────────────────────────────────────────────────
   Voltify consent banner (_ConsentBanner, _ConsentSettings, consent.js) — audit 29 Sep 2026 §4 a.
   Brand: warm white #F7F7F5, matte black #1A1A1A, soft grey, bronze #9A7B4F. Bronze is used ONLY
   where it needs no text contrast — the top rule and the focus ring (3.4:1 on warm white, 4.4:1 on
   black; WCAG 1.4.11 asks 3:1). White on bronze is 3.9:1 and fails AA for text, so no text sits on
   it; link text uses the darker #7A6240 (4.95:1). Secondary text #5E5E5E (5.6:1). The switch's off
   track #767672 is 3.9:1. Both decision buttons are the SAME component — same colour, size and
   weight — because a louder Accept is exactly what the EDPB taskforce and КЗЛД call steering.
   Fixed-position and in the first HTML, so it never moves page content (CLS 0).
   ───────────────────────────────────────────────────────────── */
.vc, .vc-p {
  --vc-bg: #F7F7F5; --vc-fg: #1A1A1A; --vc-mute: #5E5E5E; --vc-line: #E5E5E2;
  --vc-bronze: #9A7B4F; --vc-bronze-text: #7A6240;
  font-family: var(--font-primary--family);
  color: var(--vc-fg);
  box-sizing: border-box;
}
.vc *, .vc-p * { box-sizing: inherit; }
.vc[hidden], .vc-p[hidden] { display: none; }

/* First layer. Non-modal: the page keeps working underneath. */
.vc {
  position: fixed; z-index: 95; left: 0; right: 0; bottom: 0;
  background: var(--vc-bg);
  border-top: 2px solid var(--vc-bronze);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 32px rgba(26, 26, 26, 0.16);
  padding: 18px 20px calc(14px + env(safe-area-inset-bottom));
}
/* (0,2,0) — must outrank the storefront's `.voltify-storefront h2` (0,1,1). */
.vc .vc__t { margin: 0 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.vc .vc__d { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.5; color: var(--vc-mute); }
.vc__row { display: flex; gap: 8px; }
.vc .vc__b, .vc-p .vc__b {
  flex: 1 1 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--vc-fg); border-radius: 4px;
  background: var(--vc-fg); color: #fff;
  font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.vc .vc__b:hover, .vc-p .vc__b:hover { background: #000; }
.vc-p .vc__b--line { background: transparent; color: var(--vc-fg); }
.vc-p .vc__b--line:hover { background: #fff; }
.vc .vc__b[disabled], .vc-p .vc__b[disabled] { opacity: 0.6; cursor: progress; }
.vc__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.vc .vc__s, .vc .vc__a, .vc-p .vc__s, .vc-p .vc__a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0;
  border: 0; background: none; font: inherit; font-size: 0.875rem;
  color: var(--vc-fg); text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer;
}
.vc .vc__a, .vc-p .vc__a { color: var(--vc-bronze-text); }
.vc .vc__err, .vc-p .vc__err { margin: 8px 0 0; font-size: 0.8125rem; color: #B42318; }
.vc :focus-visible, .vc-p :focus-visible { outline: 2px solid var(--vc-bronze); outline-offset: 2px; }

/* While the first layer is up, the end of the page can always be scrolled clear of it. Padding at
   the very end of the document moves nothing that is already on screen. */
body:has(> .vc:not([hidden])) { padding-bottom: 320px; }

/* Desktop: a compact corner card, bottom-left — clear of the product form and Add to cart, which
   sit in the right-hand column. */
@media (min-width: 768px) {
  .vc {
    left: 24px; right: auto; bottom: 24px; width: 400px;
    border: 1px solid var(--vc-line); border-top: 2px solid var(--vc-bronze);
    border-radius: 12px; padding: 20px 22px 12px;
  }
  body:has(> .vc:not([hidden])) { padding-bottom: 0; }
}

/* Settings layer: a real modal dialog (focus trapped by consent.js, Esc closes). */
.vc-p { position: fixed; inset: 0; z-index: 96; display: flex; align-items: flex-end; justify-content: center; }
.vc-p__bg { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.5); }
.vc-p__box {
  position: relative; width: 100%; max-height: 92vh; overflow: auto;
  background: var(--vc-bg); border-top: 2px solid var(--vc-bronze);
  border-radius: 16px 16px 0 0; padding: 20px 20px calc(16px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .vc-p { align-items: center; }
  .vc-p__box { width: 560px; border-radius: 12px; padding: 28px 28px 20px; }
}
/* The same markup as the /cookie-settings page itself: in the flow, no backdrop. */
.vc-p.vc-p--page { position: static; display: block; }
.vc-p--page .vc-p__box { max-height: none; overflow: visible; width: auto; max-width: 640px; margin: 0 auto; border: 1px solid var(--vc-line); border-top: 2px solid var(--vc-bronze); border-radius: 12px; }
.vc-p .vc-p__t { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.vc-p .vc-p__i { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.5; color: var(--vc-mute); }
.vc-p .vc-p__gpc { color: var(--vc-fg); }
.vc-cat { border-top: 1px solid var(--vc-line); padding: 12px 0; }
.vc-cat__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.vc-cat__n { font-weight: 600; font-size: 0.9375rem; }
.vc-p .vc-cat__d { margin: 2px 0 6px; font-size: 0.8125rem; line-height: 1.5; color: var(--vc-mute); }
.vc-cat__on { font-size: 0.8125rem; color: var(--vc-mute); }
.vc-cat details { font-size: 0.8125rem; }
.vc-cat summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 0.3em; }
.vc-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 0.8125rem; }
.vc-tbl th, .vc-tbl td { text-align: left; padding: 5px 6px 5px 0; border-bottom: 1px solid var(--vc-line); vertical-align: top; }
.vc-tbl thead th { font-weight: 600; color: var(--vc-mute); }
.vc-tbl code { font-size: 0.8125rem; word-break: break-all; }
/* Switch: a native checkbox with role="switch". Never pre-ticked for a visitor who has not chosen. */
.vc-sw {
  appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; margin: 0;
  border-radius: 14px; background: #767672; position: relative; cursor: pointer; transition: background 0.15s;
}
.vc-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s;
}
.vc-sw:checked { background: var(--vc-fg); }
.vc-sw:checked::after { transform: translateX(18px); }
.vc-p .vc-p__id { margin: 12px 0 0; padding: 10px 12px; border: 1px dashed var(--vc-bronze); border-radius: 4px; font-size: 0.8125rem; line-height: 1.6; }
.vc-p__acts { display: grid; gap: 8px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .vc-sw, .vc-sw::after { transition: none; } }