/* ergastiri24 — main.css
   ─────────────────────────────────────────────────────────────────────────────
   SIMPLE MODERN (v2.1.0). One flat stylesheet, written once.

   Replaces the 16 stacked redesign layers of v2.0.5 (5.486 lines), where every
   change was appended at the end and the earlier rules stayed behind as dead
   weight. Rules here are grouped by component and each property is declared in
   exactly ONE place — if a value looks wrong, that place is the only place.

   Design:  white background · near-black ink · greys · a single gold accent
            reserved for prices, links and small marks. One typeface (Commissioner);
            the display serif is gone. Light only — no dark mode.

   Rules for editing this file:
   · Never append an override block at the bottom. Edit the component's section.
   · Colours and sizes come from the tokens below. No raw hex in components.
   · Anything on a permanently dark band (footer, trust strip, campaign hero)
     writes light values explicitly — there is no theme flipping to fight.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-rgb: 255,255,255;
  --bg-2: #F6F5F4;          /* quiet fill: photo stages, panels, hovers */
  --surface: #FAF9F8;       /* softer still: summary panels, cards on white */

  /* Ink */
  --ink: #14120F;
  --ink-rgb: 20,18,15;
  --ink-2: #45403B;         /* body copy on white */
  /* Και τα δύο greys είναι ΧΡΩΜΑΤΑ ΚΕΙΜΕΝΟΥ, οπότε πρέπει να περνούν 4.5:1 όχι
     μόνο σε λευκό αλλά και πάνω στο --bg-2, όπου κάθονται οι ετικέτες μέσα σε
     πάνελ. Οι προηγούμενες τιμές (#8B857E / #A9A39C) έδιναν 3.35:1 και 2.50:1. */
  --muted: #6E6862;         /* labels, meta — 5.50:1 σε λευκό, 5.05:1 σε --bg-2 */
  --muted-2: #767067;       /* placeholders, disabled — 4.90:1 σε λευκό, 4.50:1 σε --bg-2 */

  /* Hairlines */
  --line: #EAE8E5;
  --line-2: #D9D5D1;

  /* Accent — warm gold. `--accent` is for marks, borders and decoration;
     `--accent-deep` is the only one allowed on TEXT (4.9:1 on white → AA). */
  --accent: #9A7B2E;
  --accent-deep: #8A6D1F;

  /* Feedback */
  --clr-err: #B3261E;
  --clr-err-bg: #FDF3F2;
  --clr-ok: #1B7A46;

  /* Type — one family. `--serif` and `--display` are kept as aliases so the
     PHP templates' existing .serif / .display classes keep working. */
  --sans: "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: var(--sans);
  --display: var(--sans);
  /* System monospace. No web font is loaded for it (Menlo/Consolas both cover
     Greek). Since 2.2.2 it is reserved for the eight places where monospace is
     FUNCTIONAL — the user compares or types characters, or digits must not
     change width: repair-code input, quantity field, cart/wishlist counters,
     pagination, phone number. */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Everything that was mono because it "looked technical" — eyebrows, kickers,
     stat labels, nav labels, spec terms — now points here. Monospace on a 1978
     jeweller was a costume: it read as a dev tool, not a workshop. Flip this one
     value back to var(--mono) to restore the old look wholesale. */
  --label-font: var(--sans);

  --type-body: 14px;
  --type-meta: 12px;
  --type-small: 11px;
  --type-eyebrow: 10.5px;
  --type-h3: 18px;
  --type-h2: clamp(22px, 2.4vw, 30px);
  --type-h1: clamp(28px, 3vw, 40px);
  --type-display-2: clamp(28px, 3.2vw, 46px);
  --type-display-1: clamp(32px, 4.2vw, 58px);

  /* Space */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 56px;  --sp-10: 80px; --sp-11: 104px; --sp-12: 128px;

  /* Shape + motion */
  --radius: 0;
  --card-radius: 12px;
  --pill: 999px;
  --header-h: 76px;
  --tap-target: 44px;
  --soft-shadow: 0 2px 12px -9px rgba(var(--ink-rgb), .22);
  --lift-shadow: 0 14px 30px -18px rgba(var(--ink-rgb), .30);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.55,0,1,.45);
  --dur-fast: .12s;
  --dur-base: .22s;
  --dur-slow: .38s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET + BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x: clip on BOTH html AND body — neither alone suppresses the
   horizontal scrollbar (the root element's overflow has special propagation).
   `clip`, not `hidden`, or position:sticky on the header stops working. */
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern","liga";
  font-optical-sizing: auto;
  text-wrap: pretty;
  position: relative;
}
@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.6; }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* Focus — one ring, everywhere. */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible,
.icon-btn:focus-visible,
.hamburger-btn:focus-visible { outline-offset: 4px; }

::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
html { scrollbar-color: var(--line-2) var(--bg); scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
.display, h1.display, h2.display {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.06;
  text-wrap: balance;
}
h1.display { font-size: var(--type-display-1); }
h2.display { font-size: var(--type-display-2); }

/* Η Commissioner δεν έχει άξονα italic — η μηχανική κλίση φαίνεται λάθος στα ελληνικά.
   Το παλιό `.italic` δεν γέρνει πλέον τίποτα· βάφει μια λέξη χρυσή (το «24» στο
   σήμα, ο δεύτερος στίχος του hero). Το σωστό όνομα είναι `.accent-word`· το
   `.italic` μένει ως alias γιατί υπάρχει σε 23 σημεία στα templates.
   ΜΗΝ γράψεις `.italic` σε νέο markup: το όνομα λέει κλίση, το CSS δίνει χρώμα. */
.accent-word,
.italic { font-style: normal; color: var(--accent-deep); }

/* Ομοίως: `--serif` είναι alias της --sans από την 2.1.0, οπότε το `.serif` δεν
   δίνει serif. Δίνει μια βαρύτερη, πιο σφιχτή επικεφαλίδα. */
.heading-sans,
.serif, .display-serif { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.mono { font-family: var(--label-font); font-size: 10.5px; letter-spacing: .02em; }
.smcp { font-size: .8em; letter-spacing: .13em; text-transform: uppercase; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }

/* Eyebrow — small label above a heading, with a short gold rule that draws in
   when the section scrolls into view. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--type-eyebrow); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
/* The rule is drawn by default and only animates inside a .reveal block, so a
   section that never receives .is-visible (JS off, or not observed) still shows
   a complete eyebrow instead of a floating label. */
.eyebrow::before {
  content: ""; width: 22px; height: 1px; flex-shrink: 0;
  background: var(--accent);
  transform: scaleX(1); transform-origin: left;
  transition: transform .6s var(--ease) .1s;
}
.reveal .eyebrow::before,
.reveal-stagger .eyebrow::before { transform: scaleX(0); }
.reveal.is-visible .eyebrow::before,
.reveal-stagger.is-visible .eyebrow::before,
.is-visible .eyebrow::before { transform: scaleX(1); }
.hero-fullbleed__content .eyebrow::before,
.hero-split__text .eyebrow::before { animation: lineDraw .6s var(--ease) .4s both; }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.eyebrow--no-rule::before { display: none; }
.eyebrow--muted { color: var(--muted-2); }
.eyebrow--ruled { gap: 10px; }
/* On a dark band the label goes light; the gold rule stays gold. */
.eyebrow--on-dark { color: rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { transform: scaleX(1); transition: none; }
  .hero-fullbleed__content .eyebrow::before,
  .hero-split__text .eyebrow::before { animation: none; }
}

/* Long-form content (pages, posts, term descriptions) */
.entry-content { font-size: 16px; color: var(--ink-2); }
.entry-content > * + * { margin-top: var(--sp-5); }
.entry-content h2 { font-size: var(--type-h1); color: var(--ink); margin-top: var(--sp-8); letter-spacing: -.015em; }
.entry-content h3 { font-size: var(--type-h2); color: var(--ink); margin-top: var(--sp-7); letter-spacing: -.01em; }
.entry-content p { line-height: 1.8; }
.entry-content strong { color: var(--ink); font-weight: 600; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content li + li { margin-top: 10px; }
.entry-content figure { margin-inline: 0; }
.entry-content figure img,
.entry-content > img { border-radius: var(--card-radius); }
.entry-content a { color: var(--accent-deep); border-bottom: 1px solid var(--line-2); transition: border-color var(--dur-base) ease; }
.entry-content a:hover { border-bottom-color: var(--accent-deep); }
@media (max-width: 768px) { .entry-content { font-size: 15px; } }

.archive-term-desc { margin: clamp(40px, 6vw, 72px) auto 0; }
.archive-term-desc .entry-content { max-width: 72ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. LAYOUT + UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.container      { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1680px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 1024px) { .container, .container-wide { padding: 0 24px; } }
@media (max-width: 768px)  { .container, .container-wide { padding: 0 16px; } }

.hr   { height: 1px; background: var(--line);   border: 0; margin: 0; }
.hr-2 { height: 1px; background: var(--line-2); border: 0; margin: 0; }

.row     { display: flex; }
.col     { display: flex; flex-direction: column; }
.center  { align-items: center; }
.between { justify-content: space-between; }
.grow    { flex: 1; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)}
.gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)} .gap-7{gap:var(--sp-7)} .gap-8{gap:var(--sp-8)}
.gap-12{gap:12px} .gap-16{gap:16px} .gap-24{gap:24px} .gap-32{gap:32px} .gap-48{gap:48px}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .mt-8{margin-top:var(--sp-8)}
.mt-9{margin-top:var(--sp-9)} .mt-10{margin-top:var(--sp-10)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} .mb-7{margin-bottom:var(--sp-7)} .mb-8{margin-bottom:var(--sp-8)}
.mb-9{margin-bottom:var(--sp-9)} .mb-10{margin-bottom:var(--sp-10)}

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.is-hidden { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus-visible {
  position: fixed !important; top: 8px; left: 8px; z-index: 9999;
  padding: 10px 18px; background: var(--ink); color: var(--bg);
  font-size: 13px; letter-spacing: .04em;
  clip: auto !important; width: auto !important; height: auto !important;
  overflow: visible !important; white-space: nowrap;
}

/* Page / section shells */
.page-head { padding-top: var(--sp-7); padding-bottom: var(--sp-5); }
.page-head__crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--label-font); font-size: var(--type-eyebrow);
  letter-spacing: .1em; color: var(--accent-deep);
  margin-bottom: var(--sp-4);
}
.page-head__title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.022em; line-height: 1.06; margin: 0 0 var(--sp-4); }
.page-head__sub   { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 60ch; }
.section-pad      { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }
.section-pad-sm   { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.section-body     { color: var(--ink-2); }

/* The editorial "§ III" chapter marks belonged to the old direction. The markup
   still prints them on some sections; a simple storefront doesn't want them. */
.section-mark { display: none; }

/* Layout grids used by the PHP templates */
.product-layout-grid  { display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,460px); gap: clamp(40px,5vw,72px); align-items: start; }
.cart-layout-grid     { display: grid; grid-template-columns: 1fr 420px; gap: 80px; }
.checkout-layout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: start; }
.account-layout-grid  { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.shop-filter-grid     { display: grid; grid-template-columns: 240px 1fr; gap: 48px; }
/* Desktop only: × on the sidebar header collapses it and the grid reflows.
   The column change is applied INSTANTLY (grid-template-columns is a layout
   property — animating it reflows the whole product grid every frame). The
   smooth feel comes from the sidebar's own transform/opacity, which are
   compositor-only. */
.shop-filter-grid.filters-collapsed { grid-template-columns: 0px 1fr; gap: 0; }
.shop-filter-grid > .filter-sidebar { overflow: hidden; opacity: 1; transform: translateX(0); transition: opacity .3s ease, transform .35s var(--ease); }
.shop-filter-grid.filters-collapsed > .filter-sidebar { opacity: 0; transform: translateX(-12px); pointer-events: none; }

@media (max-width: 1024px) {
  .product-layout-grid  { grid-template-columns: minmax(0,1fr) minmax(320px,380px); gap: 36px; }
  .cart-layout-grid     { grid-template-columns: 1fr 320px; gap: 40px; }
  .checkout-layout-grid { grid-template-columns: 1fr 300px; gap: 40px; }
  .shop-filter-grid     { grid-template-columns: 200px 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .product-layout-grid,
  .cart-layout-grid,
  .checkout-layout-grid,
  .account-layout-grid,
  .shop-filter-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 26px;
  border-radius: var(--pill);
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) ease;
}
.btn:hover    { background: transparent; color: var(--ink); }
.btn:active   { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-sm       { min-height: var(--tap-target); padding: 0 18px; font-size: 10.5px; }

/* On a dark band: paper fill, ink text. */
.btn--inverted, .btn.btn--inverted { background: #fff; color: var(--ink); border-color: #fff; }
.btn--inverted:hover { background: transparent; color: #fff; border-color: #fff; }
/* On a photo: outlined in paper. */
.btn--on-dark, .btn.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Text link with a rule under it — used for secondary actions everywhere. */
.btn-line, .btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-2);
  border-radius: 0; height: auto; padding: 5px 0;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.btn-line:hover, .btn-link:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

/* Buttons rendered by plugins / WooCommerce shortcodes */
.button, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 26px; border-radius: var(--pill);
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.button:hover { background: transparent; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. FORMS
   ═══════════════════════════════════════════════════════════════════════════ */
.input,
.input-text,
.contact-input, .contact-select, .contact-textarea,
form .form-row .input-text,
form .form-row input[type="text"],
form .form-row input[type="email"],
form .form-row input[type="tel"],
form .form-row input[type="number"],
form .form-row input[type="password"],
form .form-row select,
form .form-row textarea,
.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="tel"],
.woocommerce-form input[type="number"],
.woocommerce-form input[type="password"],
.woocommerce-form select,
.woocommerce-form textarea,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="number"],
.entry-content input[type="url"],
.entry-content input[type="search"],
.entry-content textarea,
.entry-content select,
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 input[type="number"], .wpcf7 textarea, .wpcf7 select,
.wpforms-field input[type="text"], .wpforms-field input[type="email"],
.wpforms-field input[type="tel"], .wpforms-field textarea,
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper textarea {
  width: 100%; height: var(--tap-target); padding: 0 14px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
  font: inherit; font-size: 14px; outline: none; box-sizing: border-box;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
textarea, textarea.input-text, .contact-textarea,
form .form-row textarea, .woocommerce-form textarea,
.entry-content textarea, .wpcf7 textarea, .wpforms-field textarea, .gform_wrapper textarea {
  height: auto; min-height: 120px; padding: 12px 14px; resize: vertical;
}
.input:focus, .input-text:focus,
.contact-input:focus, .contact-select:focus, .contact-textarea:focus,
form .form-row input:focus, form .form-row select:focus, form .form-row textarea:focus,
.woocommerce-form input:focus, .woocommerce-form select:focus, .woocommerce-form textarea:focus,
.entry-content input:focus, .entry-content textarea:focus, .entry-content select:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus,
.wpforms-field input:focus, .wpforms-field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
::placeholder { color: var(--muted-2); }

.field-label,
.contact-label,
.wpcf7-form label, .wpforms-field-label, .gform_wrapper label,
form .form-row > label,
form .form-row > .optional {
  display: block; font-size: var(--type-eyebrow); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-2);
}
form .form-row { margin-bottom: 16px; min-width: 0; }
form .form-row .required, .contact-required { color: var(--accent-deep); margin-left: 2px; }
/* Inline labels (terms, privacy, payment radios) keep sentence case. */
form .form-row label.checkbox,
form .form-row .woocommerce-form__label,
form .form-row .woocommerce-terms-and-conditions-checkbox-text {
  display: inline; font-size: 13px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ink); margin-bottom: 0;
}
.form-row.form-row-wide, .form-row-wide { grid-column: 1 / -1; }
.form-row.form-row-first { grid-column: 1; }
.form-row.form-row-last  { grid-column: 2; }

.contact-select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6862' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

.wpcf7-submit, .wpforms-submit, .gform_button {
  min-height: var(--tap-target); padding: 0 24px; border-radius: var(--pill);
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.wpcf7-submit:hover, .wpforms-submit:hover, .gform_button:hover { background: transparent; color: var(--ink); }

/* Error state */
.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid,
.has-error input, .has-error select, .has-error textarea,
.form-row.woocommerce-invalid input,
.form-row.woocommerce-invalid select {
  border-color: var(--clr-err) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-err) 14%, transparent);
}
.e24-field-error { display: block; margin-top: 6px; font-size: 11px; color: var(--clr-err); }

/* Select2 (WooCommerce country/state pickers) */
.select2-container--default .select2-selection--single {
  height: var(--tap-target) !important; border: 1px solid var(--line-2) !important;
  border-radius: 8px !important; background: var(--bg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: var(--tap-target) !important; padding-left: 14px !important; color: var(--ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--tap-target) !important; }
.select2-dropdown { border: 1px solid var(--line-2) !important; border-radius: 8px !important; }

.password-input, .show-password-input { position: relative; display: block; }
.password-strength { margin-top: var(--sp-2); padding: var(--sp-2); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. TOP BAR + HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.top-bar {
  background: var(--ink); color: #fff;
  text-align: center; padding: 8px 16px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.top-bar a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); }

.header {
  position: sticky; top: 0; z-index: 50;
  /* No backdrop-filter: at .92 alpha only 8% of the page shows through, so a
     10px blur was invisible — but this is sticky, so it re-blurred the strip
     on every scroll frame. Removed in 2.2.2 with no visual change. */
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.header.is-condensed {
  background: rgba(255,255,255,.97);
  border-bottom-color: transparent;
  box-shadow: 0 10px 30px -26px rgba(var(--ink-rgb), .5);
}
.header-inner {
  max-width: 1680px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; height: var(--header-h); padding: 0 48px; gap: 24px;
}
/* Condense changes height instantly — height is a layout property and must
   never be transitioned; the smooth feel comes from the shadow/background. */
.header.is-condensed .header-inner { height: 58px; }

.header-nav {
  display: flex; align-items: center; gap: 22px;
  min-width: 0; flex-wrap: nowrap; overflow: hidden;
}
.header-nav ul, .header-nav ol { list-style: none; margin: 0; padding: 0; display: contents; }
.header-nav li { list-style: none !important; display: contents; }
.header-nav li::marker { content: none; }
.header-nav a {
  position: relative; flex-shrink: 0; white-space: nowrap; padding: 6px 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); transition: color var(--dur-base) ease;
}
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}
.header-nav a:hover { color: var(--accent-deep); }
.header-nav a:hover::after { transform: scaleX(1); }
.header-nav a.active::after,
.header-nav a.current-menu-item::after { transform: scaleX(1); transition: none; }
/* Tighten when the menu grows so it stays on one row. */
.header-nav:has(> a:nth-child(5))   { gap: 16px; }
.header-nav:has(> a:nth-child(5)) a { font-size: 11px; }
.header-nav:has(> a:nth-child(7))   { gap: 12px; }
.header-nav:has(> a:nth-child(7)) a { font-size: 10.5px; letter-spacing: .08em; }

.custom-logo-link { display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; }
/* Text brand mark: name + number sit on one line (both inline), the tagline
   drops below it via `small { display:block }` — so this must NOT be a flex
   container, or each child becomes its own row. */
.brand {
  display: inline-block; line-height: 1.05; cursor: pointer; text-align: center;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em; text-transform: lowercase;
}
.brand small {
  display: block; font-size: 8.5px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
  overflow: hidden; transition: opacity .25s ease;
}
.header.is-condensed .brand small { opacity: 0; max-height: 0; }
.brand img, .custom-logo, .custom-logo-link img {
  display: block; height: 64px !important; width: auto !important;
  max-width: 320px; object-fit: contain;
}
.header.is-condensed .custom-logo-link img,
.header.is-condensed .custom-logo,
.header.is-condensed .brand img { height: 46px !important; }
/* Desktop: logo hard-left, nav in the centre `auto` column, actions right. */
@media (min-width: 769px) {
  .custom-logo-link, .brand { order: -1; justify-self: start; }
  .brand { text-align: left; }
}

.header-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

.icon-btn {
  appearance: none; background: transparent; border: 0;
  width: var(--tap-target); height: var(--tap-target);
  min-width: var(--tap-target); min-height: var(--tap-target);
  border-radius: 50%; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) ease;
}
.icon-btn:hover  { background: var(--bg-2); color: var(--accent-deep); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg    { display: block; width: 22px; height: 22px; stroke-width: 1.5; }

.cart-count, .wishlist-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent-deep); color: #fff;
  border: 2px solid var(--bg); border-radius: 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.cart-count--empty { opacity: .45; }

@keyframes cartPop  { 0%{transform:scale(1)} 32%{transform:scale(1.2)} 64%{transform:scale(.93)} 100%{transform:scale(1)} }
.icon-btn.is-cart-pop { animation: cartPop .42s var(--ease); }

/* Hamburger */
.hamburger-btn {
  display: none; appearance: none; background: transparent; border: 0;
  width: 40px; height: 40px; padding: 0; cursor: pointer; flex-shrink: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.hamburger-btn span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 1px;
  transform-origin: center;
  transition: transform .3s var(--ease), opacity .2s ease;
}
.hamburger-btn span:nth-child(2) { width: 16px; align-self: flex-start; margin-left: 9px; }
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); width: 22px; }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); width: 22px; }

@media (max-width: 1024px) { .header-inner { padding: 0 24px; } }
@media (max-width: 768px) {
  .header-inner  { grid-template-columns: auto 1fr auto; gap: 0; padding: 0 16px; }
  .header-nav    { display: none; }
  .header-actions{ display: none; }   /* search/wishlist/cart live in the bottom nav */
  .hamburger-btn { display: flex; }
  .brand         { font-size: 19px; text-align: left; }
  .brand img, .custom-logo, .custom-logo-link img { height: 32px !important; max-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. MEGA MENU
   A light panel under the header: slim title row, then a plain 3-column list
   of category links. No thumbnails, no dark intro panel, no index numbers.
   ═══════════════════════════════════════════════════════════════════════════ */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 49;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(var(--ink-rgb), .35);
  opacity: 0; pointer-events: none; transform: translateY(-10px);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.mega.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.mega__inner, .mega__inner--tiles {
  display: block;
  max-width: 1680px; margin: 0 auto;
  padding: 24px clamp(24px, 4vw, 48px) 30px;
}
.mega__sheet { display: block; }

.mega__intro {
  display: flex; flex-direction: row; align-items: baseline;
  justify-content: space-between; gap: 24px;
  padding: 0 0 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.mega__kicker { display: none; }
.mega__title  { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.mega__all {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent-deep); text-transform: none;
  transition: color var(--dur-base) var(--ease);
}
.mega__all:hover { color: var(--ink); }
.mega__all svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); }
.mega__all:hover svg { transform: translateX(3px); }

.mega__links {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0 44px; align-content: start; padding: 16px 0 0;
}
.mega__link {
  display: grid; grid-template-columns: minmax(0,1fr) 15px; align-items: center;
  gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-base) var(--ease);
}
.mega__link-thumb, .mega__link-index { display: none; }
.mega__link-name {
  font-size: 14.5px; font-weight: 500; letter-spacing: -.006em; color: var(--ink);
  transition: color var(--dur-base) var(--ease);
}
.mega__link svg {
  width: 15px; height: 15px; color: var(--accent);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.mega__link:hover .mega__link-name { color: var(--accent-deep); }
.mega__link:hover svg { opacity: 1; transform: translateX(0); }

/* Brand row under the categories */
.mega-brands { margin-top: 24px; padding: 18px 0 2px; border-top: 1px solid var(--line); }
.mega-brands__head  { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.mega-brands__label { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.mega-brands__count { font-size: 10px; color: var(--muted); }
.mega .mega-brands__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.mega .mega-brands__list li { margin: 0; }
.mega .mega-brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 4px 0; line-height: 1;
}
.mega-brand__logo { display: inline-flex; }
.mega-brand__logo img {
  height: 28px; width: auto; max-width: 104px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .8;
  transition: filter .25s ease, opacity .25s ease;
}
.mega .mega-brand:hover .mega-brand__logo img { filter: grayscale(0); opacity: 1; }
.mega .mega-brand__name { font-size: 13px; color: var(--ink); transition: color .2s var(--ease); }
.mega .mega-brand:hover .mega-brand__name { color: var(--accent-deep); }

/* Fallback tile/column markup, if an older panel shape is ever rendered */
.mega-tile__svg { position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; color: var(--muted); }
.e24-filter-svg { width: 17px; height: 17px; flex: none; color: var(--muted); }

@media (max-width: 1024px) { .mega__links { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px)  { .mega { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   9. SEARCH OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility 0s .18s;
}
.search-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .18s ease;
}
@keyframes searchContentIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.search-overlay.is-open .search-inner { animation: searchContentIn .4s var(--ease) .05s both; }

.search-overlay-top {
  flex-shrink: 0; display: flex; justify-content: flex-end;
  max-width: 860px; width: 100%; margin: 0 auto; padding: 28px 48px 0;
}
.search-close-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: var(--tap-target); min-height: var(--tap-target);
  background: transparent; border: 0; color: var(--muted);
  transition: color .2s ease;
}
.search-close-btn:hover { color: var(--ink); }

.search-inner {
  flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
  max-width: 860px; width: 100%; margin: 0 auto; padding: 32px 48px 80px;
  scrollbar-width: none;
}
.search-inner::-webkit-scrollbar { display: none; }

.search-field-wrap {
  position: relative; border-bottom: 1px solid var(--line-2);
  padding-bottom: 14px; margin-bottom: 36px;
  transition: border-color .2s ease;
}
.search-field-wrap:focus-within { border-color: var(--ink); }
.search-field {
  width: 100%; border: 0; background: transparent; outline: none; border-radius: 0;
  height: auto; padding: 0 40px 0 0;
  font-size: clamp(26px, 4.6vw, 46px); font-weight: 600; letter-spacing: -.03em;
  color: var(--ink); line-height: 1.15;
}
.search-field::placeholder { color: var(--line-2); }
.search-field-icon { position: absolute; right: 0; bottom: 16px; color: var(--muted-2); transition: opacity .2s ease; }
.search-field-icon.is-hidden { opacity: 0; pointer-events: none; }

.search-quicklinks { margin-top: 8px; }
.search-quicklinks.is-hidden { display: none; }
.search-quicklinks__label {
  font-family: var(--label-font); font-weight: 600; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.search-quicklinks__list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-quicklinks__list a {
  display: inline-flex; align-items: center; min-height: var(--tap-target); padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--pill);
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.search-quicklinks__list a:hover { border-color: var(--ink); color: var(--ink); }
.search-occasions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.search-occasions .search-quicklinks__list a:last-child { color: var(--accent-deep); }

.search-results { display: flex; flex-direction: column; }
@keyframes resultIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.live-search-result-row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 22px; align-items: center;
  padding: 18px 20px; margin: 0 -20px;
  border-bottom: 1px solid var(--line); color: inherit;
  transition: background .18s var(--ease);
  animation: resultIn .3s var(--ease) both;
}
.live-search-result-row:hover { background: var(--bg-2); }
.live-search-result-row img { width: 88px; height: 88px; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: 8px; }
.search-result-ph    { width: 88px; height: 88px; aspect-ratio: 1/1; border-radius: 8px; }
.search-result-name  { font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
.search-result-cat   { font-family: var(--label-font); font-weight: 600; font-size: 10px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
.search-result-price { font-size: 14px; font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.search-view-all {
  display: block; padding: 18px 0 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); transition: color .18s var(--ease);
  animation: resultIn .3s var(--ease) both;
}
.search-view-all:hover { color: var(--ink); }
.search-no-results { padding: 56px 0 32px; font-size: 18px; color: var(--muted-2); }

/* Empty search state — shares the medallion language of .empty-state */
.search-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 0 36px; animation: e24EmptyIn .45s var(--ease) both;
}
.search-empty__icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line);
  margin-bottom: 16px;
}
.search-empty__title { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.search-empty__hint  { font-size: 12px; color: var(--muted); margin: 0; }

@media (max-width: 768px) {
  .search-overlay-top { padding: 20px 20px 0; }
  .search-inner       { padding: 24px 20px 48px; }
  .search-field       { font-size: 26px; }
  .live-search-result-row { margin: 0 -20px; padding: 14px 20px; grid-template-columns: 68px 1fr auto; gap: 14px; }
  .live-search-result-row img, .search-result-ph { width: 68px; height: 68px; }
  .search-quicklinks__list { gap: 6px; }
  .search-quicklinks__list a { min-height: var(--tap-target); padding: 0 16px; font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. MOBILE NAV
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-nav {
  position: fixed; inset: 0; top: var(--header-h); z-index: 99;
  background: var(--bg); overflow-y: auto; overflow-x: hidden;
  padding: 24px 20px 64px;
  transform: translateX(-100%); visibility: hidden; will-change: transform;
  transition: transform .3s var(--ease), visibility 0s .3s;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .3s var(--ease), visibility 0s 0s;
}
.mobile-nav__list, .mobile-nav__sub { list-style: none; margin: 0; padding: 0; }
.mobile-nav__item { display: block; }
.mobile-nav__row  { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav__item + .mobile-nav__item > .mobile-nav__row { border-top: 1px solid var(--line); }
.mobile-nav__link {
  flex: 1; min-width: 0; display: block; padding: 16px 0;
  font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  color: var(--ink); transition: color var(--dur-base) ease;
}
.mobile-nav__link:hover, .mobile-nav__link:active { color: var(--accent-deep); }
.mobile-nav__link--depth-1 { font-size: 16px; font-weight: 500; color: var(--ink-2); padding: 10px 0; letter-spacing: 0; }
.mobile-nav__link--depth-2 { font-size: 13px; font-weight: 400; color: var(--muted); padding: 7px 0; letter-spacing: 0; }

.mobile-nav__toggle {
  flex-shrink: 0; width: var(--tap-target); height: var(--tap-target); margin: -1px 0;
  padding: 0; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted-2); transition: color var(--dur-base) ease;
}
.mobile-nav__toggle:hover { color: var(--ink); }
.mobile-nav__plus { position: relative; display: block; width: 14px; height: 14px; }
.mobile-nav__plus::before, .mobile-nav__plus::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transition: transform var(--dur-base) ease, opacity var(--dur-base) ease;
}
.mobile-nav__plus::before { width: 14px; height: 1px; transform: translate(-50%,-50%); }
.mobile-nav__plus::after  { width: 1px; height: 14px; transform: translate(-50%,-50%); }
.mobile-nav__item.is-open > .mobile-nav__row > .mobile-nav__toggle .mobile-nav__plus::after {
  transform: translate(-50%,-50%) rotate(90deg); opacity: 0;
}
.mobile-nav__sub { padding: 0 0 12px 16px; }
.mobile-nav__item.is-open > .mobile-nav__sub { animation: mobileSubIn .25s var(--ease) both; }
@keyframes mobileSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mobile-nav-secondary { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-nav-secondary ul, .mobile-nav-secondary li { list-style: none; padding: 0; margin: 0; display: contents; }
.mobile-nav-secondary a {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: var(--pill);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mobile-nav-secondary a:hover, .mobile-nav-secondary a:active { color: var(--ink); border-color: var(--ink); }

/* Bottom bar — replaces the header actions on phones */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  /* Same as .header, worse: .97 alpha leaves 3% showing, and a fixed bar over
     scrolling content re-blurs every frame on exactly the phones that can
     least afford it. This is the primary mobile context. */
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bottom-nav__item {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--label-font); font-size: 9px; letter-spacing: .06em; color: var(--muted);
  transition: color .18s ease;
}
.mobile-bottom-nav__item::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 22px; height: 2px; background: var(--accent-deep);
  transform: translateX(-50%) scaleX(0);
  transition: transform .3s var(--ease);
}
.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item.is-active { color: var(--ink); }
.mobile-bottom-nav__item.is-active::before { transform: translateX(-50%) scaleX(1); }
.mobile-bottom-nav__item:active svg { transform: scale(.88); }
.mobile-cart-badge {
  position: absolute; top: 6px; right: calc(50% - 14px);
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--accent-deep); color: #fff;
  font-family: var(--mono); font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex; }
  /* `html body` και όχι σκέτο `body`: το WordPress τυπώνει global-styles-inline-css
     μέσα από το wp_head(), δηλαδή ΜΕΤΑ το <link> του θέματος, και περιέχει
     `body{padding-bottom:0}`. Με ίδια specificity κέρδιζε αυτό, οπότε η κάτω μπάρα
     έκρυβε τα τελευταία 57px της σελίδας (τη γραμμή copyright στο footer). */
  html body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PRODUCT CARD
   White card, hairline border, square photo, two-line name, gold price and a
   persistent black pill for add-to-cart. The pill sits in the info block, never
   over the photo, so it works the same with and without a pointer.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--lift-shadow);
}

.product-card .ph-wrap {
  position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--bg);
}
.product-card .ph-wrap .ph,
.product-card .ph-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.product-card:hover .ph-wrap img { transform: scale(1.03); }
/* Second image cross-fades in on hover when the product has one. */
.has-hover-img .product-thumb--hover { opacity: 0; transition: opacity .45s var(--ease); }
.has-hover-img:hover .product-thumb--hover { opacity: 1; }

/* Stretched link: ::after with NO position on the anchor covers the whole card
   (it positions against .product-card). Buttons sit above it via z-index. */
.product-card__link { color: inherit; }
.product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.product-card__info {
  display: flex; flex-direction: column; gap: 4px;
  padding: 13px 14px 14px; text-align: center;
}
.product-card__kicker {
  font-family: var(--label-font); font-weight: 600; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.p-name, .product-card .p-name {
  font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink);
  /* Clamp to 2 lines and reserve the height so prices line up across a row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
  transition: color .2s ease;
}
.product-card:hover .p-name { color: var(--accent-deep); }
.p-price, .product-card .p-price {
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  color: var(--accent-deep); margin-top: 2px;
}
.p-price del { color: var(--muted); font-weight: 400; font-size: 13px; margin-right: 6px; opacity: .8; }
.p-price ins { text-decoration: none; color: var(--accent-deep); }
.price-installments { font-size: 11px; color: var(--muted); }

.p-swatches { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 14px; }
.p-swatches:empty { display: none; }
.p-swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c, var(--muted)); border: 1px solid rgba(20,18,15,.18); flex-shrink: 0;
}
.p-stone { font-family: var(--label-font); font-weight: 600; font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }

.product-card__quick-add {
  position: relative; z-index: 2; width: 100%; min-height: var(--tap-target); margin-top: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--bg); border: 0; border-radius: var(--pill);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.product-card__quick-add:hover { background: var(--accent-deep); }
.product-card__quick-add svg { width: 14px; height: 14px; }

/* Wishlist heart — always visible, top-right of the photo.
   44×44 is the project's stated floor and this is a thumb-zone action on the
   card, so it does not get an exception for looking tidier. */
.wishlist-card-btn {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: var(--tap-target); height: var(--tap-target); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* .92 alpha again — the blur never read, and this one sits on every card in
     the grid, so it was a compositing layer per product. */
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.wishlist-card-btn:hover { background: #fff; color: var(--accent-deep); }
.wishlist-card-btn.is-active { color: var(--accent-deep); }
.wishlist-card-btn.is-active svg { fill: currentColor; }
@keyframes heartPop { 0%{transform:scale(1)} 38%{transform:scale(1.35)} 68%{transform:scale(.9)} 100%{transform:scale(1)} }
.wishlist-card-btn.is-heartpop { animation: heartPop .36s var(--ease); }

/* Legacy hover-reveal quick actions — kept working if the markup still ships them */
.product-card .quick { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; }
.quick-btn, .quick-btn--ghost {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  min-width: var(--tap-target); min-height: var(--tap-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line-2);
  font-size: 0; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.quick-btn:hover, .quick-btn--ghost:hover { background: var(--ink); color: var(--bg); }
.quick-btn svg { display: block; }
.quick-btn.is-added { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* Photo placeholder */
.ph { position: relative; overflow: hidden; background: var(--bg-2); }
.ph-label { display: none; }
/* Σκούρα παραλλαγή placeholder — παράγεται από το e24_placeholder( $t, true ). */
.ph-dark  { background: var(--ink); }

/* Image fade-in, toggled by JS */
.e24-fade-img { opacity: 0; transition: opacity .5s var(--ease); }
.e24-fade-img.is-img-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card:hover { transition: none; transform: none; }
  .e24-fade-img { opacity: 1; transition: none; }
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge, .e24-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--pill);
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.badge--on-card { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.badge--dark    { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.badge--muted   { background: var(--bg-2); color: var(--ink); }

/* ── Product grids ───────────────────────────────────────────────────────── */
.shop-grid { display: grid; grid-template-columns: repeat(3,1fr); column-gap: 24px; row-gap: 30px; }
.shop-grid.dense { grid-template-columns: repeat(4,1fr); column-gap: 16px; row-gap: 26px; }
.shop-grid.is-filtering { opacity: .3; pointer-events: none; transition: opacity .25s var(--ease); }
.related-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.search-results-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.bridal-grid  { display: grid; grid-template-columns: repeat(var(--cols,3),1fr); gap: 24px; margin-top: var(--sp-8); }
.journal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.pdp-cols-4   { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }

@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(2,1fr); }
  .shop-grid.dense { grid-template-columns: repeat(3,1fr); }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .pdp-cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .related-products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .search-results-grid   { grid-template-columns: repeat(2,1fr); gap: 24px; }
}
@media (max-width: 768px) {
  .shop-grid, .shop-grid.dense { grid-template-columns: repeat(2,1fr); gap: 16px 12px; }
  .journal-grid { grid-template-columns: 1fr; }
  .bridal-grid  { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
  .pdp-cols-4   { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 560px) {
  .shop-grid, .shop-grid.dense,
  .related-products-grid, .search-results-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 10px; }
  .bridal-grid { grid-template-columns: 1fr; }
  .product-card__info { padding: 10px 10px 12px; }
  .product-card .p-name  { font-size: 12.5px; }
  .product-card .p-price { font-size: 14.5px; }
  /* Το κείμενο και το εικονίδιο μικραίνουν για να χωρέσουν σε στήλη 2-up στα
     320px, αλλά το ΥΨΟΣ μένει στα 44px: είναι η κύρια ενέργεια αγοράς και
     πατιέται με τον αντίχειρα. */
  .product-card__quick-add { margin-top: 9px; font-size: 9.5px; letter-spacing: .02em; gap: 5px; }
  .product-card__quick-add svg { width: 12px; height: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. SHOP TOOLBAR + FILTERS
   ═══════════════════════════════════════════════════════════════════════════ */
.shop-toolbar [data-view] { min-width: var(--tap-target); min-height: var(--tap-target); display: inline-flex; align-items: center; justify-content: center; }

.sort-strip { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sort-strip::-webkit-scrollbar { display: none; }
.sort-btn {
  position: relative; appearance: none; background: transparent; border: 0;
  min-height: var(--tap-target); padding: 4px 12px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--label-font); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  transition: color .18s var(--ease);
}
.sort-btn::after {
  content: ""; position: absolute; bottom: 0; left: 12px; right: 12px; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s var(--ease);
}
.sort-btn:hover, .sort-btn.is-active { color: var(--ink); }
.sort-btn:hover::after { transform: scaleX(1); }
.sort-btn.is-active::after { transform: scaleX(1); transition: none; }

.filter-sidebar { padding-top: 8px; }
.filter-sidebar label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 13px; }
.filter-group { border-top: 1px solid var(--line); padding: 16px 0; }
.filter-group-header {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.filter-group-header .caret { display: inline-flex; transition: transform .3s var(--ease); }
.filter-group.is-collapsed .filter-group-header .caret { transform: rotate(0) !important; }
/* Only opacity transitions — max-height is a layout property and reflows per frame. */
.filter-group > div:not(.filter-group-header) { overflow: hidden; max-height: 800px; opacity: 1; transition: opacity .25s ease; }
.filter-group.is-collapsed > div:not(.filter-group-header) {
  max-height: 0; opacity: 0; pointer-events: none;
  margin-top: 0 !important; padding-top: 0; padding-bottom: 0;
}
.filter-check {
  width: 15px; height: 15px; border-radius: 3px;
  border: 1px solid var(--line-2); background: transparent; color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.filter-check:hover { border-color: var(--ink); }
.filter-check.is-checked { background: var(--ink); border-color: var(--ink); }
.filter-group label > .text-muted { margin-left: auto; }
.filter-group label:has(.filter-check.is-checked) { color: var(--ink); font-weight: 600; }
.filter-check.is-checked + input + .e24-filter-svg,
.filter-sidebar label:hover .e24-filter-svg { color: var(--ink); }

/* Secondary attribute groups stay hidden until "more filters" is opened —
   unless one of them already has a checked value. */
.filter-group--secondary { display: block; }
.filter-sidebar:not(.is-showing-more) .filter-group--secondary { display: none; }
.filter-sidebar:not(.is-showing-more) .filter-group--secondary:has(.filter-check.is-checked) { display: block; }
.filter-more-toggle {
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  margin: 6px 0 12px; padding: 11px 0;
  background: transparent; border: 0; border-top: 1px solid var(--line);
  color: var(--ink); cursor: pointer; text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.filter-more-toggle__count { color: var(--accent-deep); font-size: 10px; }
.filter-more-toggle svg { margin-left: auto; transition: transform var(--dur-base) var(--ease); }
.filter-sidebar.is-showing-more .filter-more-toggle svg { transform: rotate(180deg); }

.filter-backdrop, .filter-sidebar-header, .filter-apply-bar { display: none; }

@media (max-width: 768px) {
  .filter-sidebar {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg); overflow-y: auto;
    padding: 24px 20px calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .filter-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .3s var(--ease); }
  .filter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 199;
    background: rgba(var(--ink-rgb), .38); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .filter-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .filter-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
  .filter-mobile-head {
    position: sticky; top: 0; z-index: 3;
    margin: -24px -20px 14px; padding: 16px 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .filter-apply-bar {
    display: block; position: sticky; bottom: 0; z-index: 2;
    margin: 24px -20px 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--line);
    box-shadow: 0 -12px 26px -16px rgba(var(--ink-rgb), .35);
  }
  .filter-apply-bar .btn { width: 100%; min-height: 50px; }
  .filter-check { width: 18px; height: 18px; }
  .js-shop-wrapper { display: block !important; }
  .shop-view-toggle { display: none !important; }
  .shop-toolbar__right { flex: 1; min-width: 0; gap: 0 !important; overflow: hidden; }
  .shop-toolbar__right .sort-strip { flex: 1; min-width: 0; }
  .sort-btn { font-size: 9px; padding: 4px 8px; }
}

/* Shop intro rail — a short editorial index above the filters */
.collection-rail { display: grid; grid-template-columns: minmax(230px,.78fr) minmax(0,1.55fr); border-bottom: 1px solid var(--line); }
.collection-rail__copy { padding: clamp(28px,3.6vw,48px) clamp(24px,4vw,64px) clamp(28px,3.6vw,48px) 0; }
.collection-rail__copy .eyebrow { margin-bottom: 13px; }
.collection-rail__copy p { max-width: 62ch; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.collection-rail__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-left: 1px solid var(--line); }
.collection-rail__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 50%; padding: 22px 28px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.015em;
  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.collection-rail__links a:nth-child(odd) { border-right: 1px solid var(--line); }
.collection-rail__links a:hover { background: var(--surface); color: var(--accent-deep); }
.collection-rail__links svg { transition: transform var(--dur-base) var(--ease); }
.collection-rail__links a:hover svg { transform: translateX(4px); }
@media (max-width: 680px) {
  .collection-rail { grid-template-columns: 1fr; }
  .collection-rail__copy { padding: 28px 0; }
  .collection-rail__links { border-left: 0; }
  .collection-rail__links a { min-height: 70px; padding: 18px 14px; }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.pagination .page-numbers {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination .page-numbers.prev,
.pagination .page-numbers.next { width: auto; padding: 0 16px; border-radius: var(--pill); }
@media (max-width: 768px) {
  .pagination { gap: 6px; margin-top: 36px; }
  .pagination .page-numbers { width: 34px; height: 34px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.product-main-image {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: var(--bg-2); border-radius: var(--card-radius); cursor: zoom-in;
}
.product-main-image img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition: transform .3s ease;
}
.product-main-image:not(.is-zoomed):hover img { transform: scale(1.04); }
.product-main-image.is-zoomed { cursor: zoom-out; }
.product-main-image.is-zoomed img { transform: scale(2.4); }
.zoom-hint {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--pill);
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
@media (hover: none) { .zoom-hint { display: none; } }

.product-thumbnails { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.product-thumb-btn {
  flex-shrink: 0; width: 82px; height: 82px; padding: 0; overflow: hidden;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; transition: border-color .2s ease;
}
.product-thumb-btn.is-active { border-color: var(--ink); }
.product-thumb-btn:focus-visible,
.metal-swatch-btn:focus-visible, .size-btn:focus-visible,
.stone-btn:focus-visible, .engrave-font-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.product-gallery-mobile { display: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.product-gallery-mobile::-webkit-scrollbar { display: none; }
.gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.gallery-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; transition: background var(--dur-base) ease; }
.gallery-dot.is-active { background: var(--ink); }

.pdp-info { max-width: 460px; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.pdp-info h1 { max-width: 22ch; }
.pdp-info h1.pdp-title {
  margin-top: 14px;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance;
}
.pdp-brand { margin-bottom: 9px; color: var(--accent-deep); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pdp-code  { margin-top: 9px; color: var(--muted); font-size: 10.5px; letter-spacing: .05em; }
.pdp-code span { color: var(--ink-2); }

.pdp-price-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.pdp-price     { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-deep); }
.pdp-price del { margin-right: 8px; font-size: 18px; font-weight: 400; color: var(--muted); }
.pdp-price ins { text-decoration: none; color: inherit; }
.pdp-short-desc { margin-top: 20px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
/* Εξηγεί τα σήματα καθαρότητας (925°, 14Κ) που αλλιώς είναι απλώς νούμερα για
   κάποιον που δεν ξέρει κοσμήματα. Εμφανίζεται μόνο όταν υπάρχει σήμα. */
.pdp-facts-note { margin: -18px 0 26px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pdp-variation-error { margin-top: 12px; min-height: 1.4em; font-size: 12px; color: var(--clr-err); }

/* Εξαντλημένο: το CTA αντικαθίσταται από ετικέτα κατάστασης + σύλληψη email. */
.pdp-oos {
  width: 100%; min-height: 52px; margin-top: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--pill);
  font-family: var(--label-font); font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pdp-notify { margin-top: 20px; }
.pdp-notify__label { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.pdp-notify__row { display: flex; gap: 10px; }
.pdp-notify__row .input { flex: 1; min-width: 0; font-size: 13px; }
.pdp-notify__row .btn  { flex-shrink: 0; padding: 0 20px; }
.pdp-notify__msg { display: none; margin-top: 10px; font-size: 11px; letter-spacing: .04em; color: var(--accent-deep); }
/* Στα 320px το πεδίο έμενε με ~150px δίπλα στο κουμπί. Στοίβαξέ τα. */
@media (max-width: 380px) {
  .pdp-notify__row { flex-direction: column; }
  .pdp-notify__row .btn { width: 100%; }
}

@keyframes e24PdpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pdp-info > * { animation: e24PdpIn .5s var(--ease) both; }
.pdp-info > *:nth-child(1) { animation-delay: .04s; }
.pdp-info > *:nth-child(2) { animation-delay: .10s; }
.pdp-info > *:nth-child(3) { animation-delay: .16s; }
.pdp-info > *:nth-child(4) { animation-delay: .22s; }
.pdp-info > *:nth-child(n+5) { animation-delay: .28s; }

.pdp-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 26px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pdp-fact { min-width: 0; padding: 13px 12px 14px; border-right: 1px solid var(--line); }
.pdp-fact:first-child { padding-left: 0; }
.pdp-fact:last-child  { border-right: 0; padding-right: 0; }
.pdp-fact dt, .pdp-specimen__item dt {
  margin-bottom: 6px; color: var(--muted);
  font-family: var(--label-font); font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; line-height: 1.25; text-transform: uppercase;
}
.pdp-fact dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; }

.pdp-purchase-panel { padding: 16px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); }
.pdp-low-stock { margin: 0 0 12px; color: var(--accent-deep); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.pdp-add-to-cart, .single_add_to_cart_button {
  width: 100%; min-height: 54px; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  border-radius: var(--pill);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.pdp-add-to-cart:hover, .single_add_to_cart_button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.product-configurator button[name="add-to-cart"].is-added,
.single_add_to_cart_button.is-added { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.pdp-delivery { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 11px; color: var(--muted); }
.pdp-delivery svg { color: var(--accent-deep); }
.pdp-purchase-panel .pdp-delivery { justify-content: flex-start; margin: 13px 0 0; font-size: 10px; }
.pdp-purchase-panel .trust-micro {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px 13px;
  margin-top: 10px; font-size: 9px; color: var(--muted); letter-spacing: .04em;
}
.pdp-purchase-panel .trust-micro span { display: inline-flex; align-items: center; gap: 4px; }
.pdp-wishlist {
  width: 100%; margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.pdp-wishlist.is-active, .pdp-wishlist.is-saved { border-color: var(--ink); background: var(--bg-2); }
.pdp-wishlist.is-active svg, .pdp-wishlist.is-saved svg { fill: var(--ink); }

/* Variation pickers */
.spec-row { border-top: 1px solid var(--line); padding: 16px 0; }
.spec-row-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.metal-swatch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-target); min-width: var(--tap-target);
  padding: 5px 14px 5px 5px; background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--pill); cursor: pointer;
  transition: border-color .2s ease;
}
.metal-swatch-btn:hover, .metal-swatch-btn.is-active { border-color: var(--ink); }
.metal-swatch-dot {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset -3px -4px 6px rgba(0,0,0,.18), inset 3px 4px 6px rgba(255,255,255,.55);
}
.metal-swatch-btn.is-active .metal-swatch-dot { outline: 1px solid var(--ink); outline-offset: 2px; }
.size-btn, .stone-btn {
  min-height: var(--tap-target); min-width: var(--tap-target); padding: 8px 16px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--pill);
  font-family: var(--sans); font-size: 11.5px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.size-btn:hover, .stone-btn:hover { border-color: var(--ink); }
.size-btn.is-active, .stone-btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Quantity stepper */
.product-configurator .quantity {
  position: relative; display: inline-flex; align-items: center; overflow: hidden;
  width: 132px; height: 48px; margin: 20px 0 4px;
  border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--bg);
}
.product-configurator .quantity .qty {
  -moz-appearance: textfield; appearance: textfield;
  width: 100%; height: 100%; padding: 0 44px;
  border: 0; background: transparent; outline: none; text-align: center;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.product-configurator .quantity .qty::-webkit-outer-spin-button,
.product-configurator .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-configurator .quantity .qty-minus,
.product-configurator .quantity .qty-plus {
  position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; user-select: none;
  color: var(--ink); font-family: var(--mono); font-size: 16px;
  transition: background .2s ease;
}
.product-configurator .quantity .qty-minus { left: 0; }
.product-configurator .quantity .qty-plus  { right: 0; }
.product-configurator .quantity .qty-minus:hover,
.product-configurator .quantity .qty-plus:hover { background: var(--bg-2); }
.qty-btn {
  width: var(--tap-target); height: var(--tap-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
}

/* Engraving */
.engraving-box { background: var(--bg-2); border-radius: var(--card-radius); padding: 20px; margin-top: 14px; }
.engrave-fonts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
.engrave-font-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
  transition: border-color var(--dur-base) ease;
}
.engrave-font-btn:hover { border-color: var(--muted-2); }
.engrave-font-btn.is-active { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -1px; }
.engrave-font-btn__sample { font-size: 26px; line-height: 1; color: var(--ink); }
.engrave-font-btn__name {
  font-family: var(--label-font); font-weight: 600; font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.engrave-font-btn.is-active .engrave-font-btn__name { color: var(--ink); }
.engrave-input { background: var(--bg) !important; }
.engrave-counter-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.engrave-bar { flex: 1; height: 2px; background: var(--line-2); overflow: hidden; }
.engrave-bar__fill { height: 100%; background: var(--muted-2); transform: scaleX(0); transform-origin: left; transition: transform .18s var(--ease), background-color .2s ease; }
.engrave-bar__fill.is-near { background: var(--accent); }
.engrave-bar__fill.is-full { background: var(--clr-err); }
#engraving-counter { flex-shrink: 0; font-size: 10px; color: var(--muted); }
.engrave-chars-note { font-size: 11px; margin: 6px 0 0; line-height: 1.5; color: var(--muted); }
.engrave-preview { margin-top: 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); overflow: hidden; }
.engrave-preview__label { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 9px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.engrave-preview__stage { padding: 24px 16px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
.engrave-preview__text  { font-size: 28px; color: var(--ink-2); letter-spacing: .06em; line-height: 1.2; text-align: center; }
.engrave-preview__placeholder { font-size: 14px; color: var(--muted-2); }
.engrave-preview__value { display: inline; }
.engrave-check-icon.is-checked { background: var(--ink); }
label:has(> #engraving-toggle:focus-visible) #engrave-check-icon { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Accordion */
.pdp-accordion { margin-top: 28px; border-top: 1px solid var(--line); }
.pdp-acc { border-bottom: 1px solid var(--line); }
.pdp-acc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); transition: color .2s ease;
}
.pdp-acc > summary::-webkit-details-marker { display: none; }
.pdp-acc > summary:hover { color: var(--accent-deep); }
.pdp-acc__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.pdp-acc__icon::before, .pdp-acc__icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s ease;
}
.pdp-acc__icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.pdp-acc__icon::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.pdp-acc[open] .pdp-acc__icon::after { transform: scaleY(0); opacity: 0; }
.pdp-acc__body { padding: 0 2px 18px; font-size: 13px; line-height: 1.75; color: var(--ink-2); animation: e24AccIn .3s var(--ease) both; }
.pdp-acc__body p { margin: 0 0 10px; }
.pdp-acc__body p:last-child { margin-bottom: 0; }
@keyframes e24AccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Specs + related */
.pdp-specimen { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--line); }
.pdp-specimen__head { display: flex; align-items: end; justify-content: space-between; gap: 38px; margin-bottom: 28px; }
.pdp-specimen__head .eyebrow { margin-bottom: 10px; }
.pdp-specimen__head h2 { margin: 0; font-size: clamp(24px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.022em; }
.pdp-specimen__head p  { max-width: 34ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pdp-specimen__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pdp-specimen__item { min-height: 94px; padding: 17px 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.pdp-specimen__item dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
.pdp-recently-viewed { margin-top: 76px; padding-top: 38px; border-top: 1px solid var(--line); }
.pdp-recently-viewed h2 { margin: 0 0 28px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.022em; }
#recently-viewed-grid.is-in > * { opacity: 0; transform: translateY(16px); animation: e24RvIn .5s var(--ease) forwards; }
#recently-viewed-grid.is-in > *:nth-child(1) { animation-delay: .04s; }
#recently-viewed-grid.is-in > *:nth-child(2) { animation-delay: .12s; }
#recently-viewed-grid.is-in > *:nth-child(3) { animation-delay: .20s; }
#recently-viewed-grid.is-in > *:nth-child(4) { animation-delay: .28s; }
@keyframes e24RvIn { to { opacity: 1; transform: none; } }

/* Ratings + reviews */
.e24-stars, .reviews-stars, .review-card__stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.e24-star { fill: var(--line-2); flex: none; }
.e24-star.is-on { fill: var(--accent); }
.pdp-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: inherit; }
.pdp-rating__count { font-family: var(--label-font); font-size: 11px; color: var(--muted); letter-spacing: .04em; transition: color .2s ease; }
.pdp-rating:hover .pdp-rating__count { color: var(--ink); }
.pdp-reviews { margin-top: 88px; padding-top: 48px; border-top: 1px solid var(--line); }
.pdp-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.pdp-reviews__summary { display: flex; align-items: center; gap: 14px; }
.pdp-reviews__avg { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.pdp-reviews__empty { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.pdp-reviews__form-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.pdp-reviews__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.pdp-review { padding: 30px 0; border-top: 1px solid var(--line); }
.pdp-review:first-child { border-top: 0; padding-top: 0; }
.pdp-review__top { display: flex; align-items: center; gap: 12px; }
.pdp-review__author { font-size: 15px; font-weight: 600; }
.pdp-review__date { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .06em; margin: 4px 0 10px; }
.pdp-review__body { font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 68ch; }
.pdp-review__body p { margin: 0 0 8px; }
.pdp-reviews .comment-respond { margin-top: 8px; }
.pdp-reviews .comment-form { max-width: 560px; }
.pdp-reviews .comment-form p { margin: 0 0 16px; }
.pdp-reviews .comment-form label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.pdp-reviews .form-submit { margin-bottom: 0; }
.e24-rating-field select { max-width: 200px; cursor: pointer; }

/* Sticky add-to-cart (phones) */
.sticky-atc { display: none; }
@media (max-width: 768px) {
  .pdp-info { max-width: none; position: static; }
  .pdp-info h1 { max-width: none; }
  .product-thumbnails-col { display: none; }
  .product-gallery-mobile {
    display: flex !important; gap: 8px; overflow-x: auto;
    margin-bottom: 24px; scroll-snap-type: x mandatory;
  }
  .product-gallery-mobile > * { scroll-snap-align: start; flex: 0 0 85vw; }
  .product-thumbnails .product-thumb-btn { width: 68px; height: 68px; }
  .pdp-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pdp-fact { min-height: 66px; padding: 11px 8px; }
  .pdp-fact dd { font-size: 10px; }
  .pdp-specimen { margin-top: 60px; padding-top: 30px; }
  .pdp-specimen__head { display: grid; gap: 16px; }
  .pdp-specimen__grid { grid-template-columns: 1fr; }
  .pdp-specimen__item { min-height: auto; padding: 15px 16px; }
  .pdp-recently-viewed { margin-top: 56px; padding-top: 30px; }

  .sticky-atc {
    display: block; position: fixed; z-index: 80;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
    background: var(--bg); border-top: 1px solid var(--line); padding: 12px 16px;
    transform: translateY(100%); transition: transform .3s var(--ease);
  }
  .sticky-atc.is-visible { transform: translateY(0); }
  .sticky-atc__inner { display: flex; gap: 12px; align-items: center; }
  .sticky-atc__name  { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-atc__btn   { flex-shrink: 0; min-height: 44px; padding: 0 20px; font-size: 11px; white-space: nowrap; }
}
@media (max-width: 1024px) {
  .pdp-facts { grid-template-columns: 1fr; }
  .pdp-fact { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pdp-fact:last-child { border-bottom: 0; }
  .pdp-fact dt { margin: 0; }
  .pdp-specimen__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .product-thumbnails { gap: 8px; }
  .product-thumbnails .product-thumb-btn { width: 56px; height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. DRAWERS · QUICK VIEW · TOASTS
   ═══════════════════════════════════════════════════════════════════════════ */
.drawer-bg {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(var(--ink-rgb), .38); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.drawer-bg.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 101;
  width: 460px; max-width: 100vw;
  background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--ease);
}
.drawer.is-open { transform: translateX(0); }
.drawer-hd, .drawer-header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.drawer-title { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#cart-drawer-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.drawer-body, .wishlist-drawer-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 28px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.drawer-ft { border-top: 1px solid var(--line); padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }

.cart-remove-btn {
  align-self: flex-start; background: transparent; border: 0;
  padding: 12px 0; min-height: var(--tap-target);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; cursor: pointer;
}
.cart-remove-btn:hover { color: var(--ink); }

@keyframes e24CartCollapse { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(14px); } }
.drawer-body [data-cart-key].is-removing { overflow: hidden; pointer-events: none; animation: e24CartCollapse .4s var(--ease) forwards; }
@keyframes e24NewItem { from { background: var(--bg-2); } to { background: transparent; } }
.drawer-body [data-cart-key].is-new { animation: e24NewItem 1.4s var(--ease); border-radius: 6px; }
@keyframes e24QtyRoll { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.js-qty-display.is-rolling { animation: e24QtyRoll .26s var(--ease); }

.js-coupon-msg { display: flex; align-items: center; gap: 6px; transition: color .15s ease; }
.js-coupon-msg.is-ok  { color: var(--clr-ok); }
.js-coupon-msg.is-err { color: var(--clr-err); }
.js-coupon-msg.is-ok::before,
.js-coupon-msg.is-err::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Wishlist drawer rows */
.wishlist-empty { padding: 48px 28px; text-align: center; font-size: 13px; color: var(--muted); }
.wishlist-loading {
  height: 3px; margin: 32px 28px;
  background: linear-gradient(90deg, var(--line-2), var(--accent), var(--line-2));
  background-size: 200% 100%; animation: drawer-load 1.2s ease infinite;
}
@keyframes drawer-load { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wishlist-item {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; align-items: start;
  padding: 16px 28px; border-bottom: 1px solid var(--line);
}
.wishlist-item__img { display: block; width: 80px; aspect-ratio: 1/1; overflow: hidden; border-radius: 8px; flex-shrink: 0; }
.wishlist-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wishlist-item__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wishlist-item__name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.wishlist-item__price { font-size: 13px; font-weight: 600; color: var(--accent-deep); }
.wishlist-item__atc { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.wishlist-item__remove { align-self: start; padding: 4px; background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.wishlist-item__remove:hover { color: var(--ink); }
.wishlist-sk-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wishlist-sk-row__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Quick view */
.qv-overlay {
  position: fixed; inset: 0; z-index: 300; padding: 24px;
  background: rgba(20,18,15,.48); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease);
}
.qv-overlay.is-open { opacity: 1; pointer-events: auto; }
body.qv-open { overflow: hidden; }
.qv-inner {
  position: relative; background: var(--bg); border-radius: var(--card-radius); overflow: hidden;
  max-width: 920px; width: 100%; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(12px); transition: transform .3s var(--ease);
}
.qv-overlay.is-open .qv-inner { transform: translateY(0); }
.qv-close {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  width: var(--tap-target); height: var(--tap-target); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: 0; color: var(--ink); cursor: pointer;
}
.qv-spinner { grid-column: 1 / -1; height: 320px; background: linear-gradient(90deg, var(--line-2), var(--bg), var(--line-2)); background-size: 200% 100%; animation: drawer-load 1.2s ease infinite; }
.qv-media { position: relative; }
.qv-main-img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1/1; }
.qv-thumbs { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 6px; padding: 8px; background: linear-gradient(to top, rgba(20,18,15,.3), transparent); }
.qv-thumb { width: 48px; height: 48px; object-fit: cover; cursor: pointer; opacity: .65; border: 1.5px solid transparent; border-radius: 4px; transition: opacity .2s ease; }
.qv-thumb:hover, .qv-thumb.is-active { opacity: 1; border-color: #fff; }
.qv-body { padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.qv-cat  { margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qv-name { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
.qv-price { font-size: 18px; font-weight: 700; color: var(--accent-deep); }
.qv-swatches { display: flex; flex-direction: column; gap: 6px; }
.qv-swatch-label { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.qv-swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qv-swatch { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c, var(--muted)); border: 2px solid rgba(20,18,15,.1); }
.qv-stone { margin: 0; font-size: 11.5px; color: var(--muted); }
.qv-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; }
.qv-sold-out { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qv-details-link { text-align: center; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.qv-skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 8px; }
.qv-skeleton__body { display: flex; flex-direction: column; justify-content: center; padding-right: 24px; }
@media (max-width: 600px) {
  .qv-inner { grid-template-columns: 1fr; max-height: 95vh; }
  .qv-body  { padding: 24px 20px; }
  .qv-skeleton { grid-template-columns: 1fr; }
}

/* Fly-to-cart dot */
@keyframes flyToCart {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: var(--end-transform) scale(.15); }
}
.fly-dot {
  position: fixed; z-index: 200; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-deep); pointer-events: none;
  animation: flyToCart .65s var(--ease) forwards;
}

/* Toast */
.e24-cart-toast {
  position: fixed; bottom: 28px; left: 50%; z-index: 9999;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(440px, 90vw); padding: 13px 20px; border-radius: var(--pill);
  background: var(--ink); color: var(--bg);
  font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 14px 36px -14px rgba(0,0,0,.5);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.e24-cart-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.e24-cart-toast__icon { flex-shrink: 0; display: inline-flex; }
.e24-cart-toast__msg  { min-width: 0; }

/* Shipping meter */
.shipping-meter__text { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 8px; }
.shipping-meter__unlocked { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--clr-ok); }
.shipping-meter__bar  { height: 3px; background: var(--line); position: relative; border-radius: 2px; overflow: hidden; }
.shipping-meter__fill { position: absolute; inset: 0; width: 100%; transform-origin: left center; background: var(--accent-deep); transition: transform .4s var(--ease); }

/* Skeletons */
.e24-sk { position: relative; overflow: hidden; background: var(--bg-2); border-radius: 4px; }
.e24-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  animation: e24Shimmer 1.3s infinite;
}
@keyframes e24Shimmer { 100% { transform: translateX(100%); } }
.e24-sk--line  { height: 12px; margin-bottom: 10px; }
.e24-sk--line.lg { height: 22px; }
.e24-sk--block { height: 48px; margin-top: 18px; }
.e24-sk--media { width: 100%; aspect-ratio: 1/1; margin: 0; }
.e24-sk--thumb { width: 84px; height: 84px; flex-shrink: 0; }

@media (max-width: 768px) {
  .drawer      { width: 100vw; }
  .drawer-hd, .drawer-header, .drawer-body, .drawer-ft { padding: 16px; }
  [data-cart-key] { grid-template-columns: 68px 1fr !important; gap: 12px !important; }
  [data-cart-key] img, [data-cart-key] .ph { width: 68px !important; min-width: 0; }
  .qty-btn { width: 38px; height: 38px; }
  .wishlist-item { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. CART · CHECKOUT · ACCOUNT
   ═══════════════════════════════════════════════════════════════════════════ */
.cart-items-header { display: grid; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cart-item-row { border-bottom: 1px solid var(--line); }

.cart-empty-state {
  max-width: 520px; margin: clamp(24px,4vw,56px) 0 clamp(48px,8vw,88px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4);
}
.cart-empty-state__icon {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-2); color: var(--accent-deep); border: 1px solid var(--line);
  margin-bottom: var(--sp-2);
}
.cart-empty-state__title { margin: 0; font-size: clamp(22px,2.8vw,32px); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; }
.cart-empty-state__sub   { margin: 0; max-width: 42ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cart-empty-state .btn   { margin-top: var(--sp-2); }
.cart-empty-state__cats  {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%;
  margin-top: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.cart-empty-state__cat {
  display: inline-flex; align-items: center; min-height: var(--tap-target);
  padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--pill);
  font-family: var(--label-font); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.cart-empty-state__cat:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Generic empty state (drawers, wishlist, account) */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 28px 40px; animation: e24EmptyIn .5s var(--ease) both;
}
.empty-state__icon {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-deep); background: var(--bg-2); border: 1px solid var(--line);
  margin-bottom: 20px;
}
.empty-state__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; color: var(--ink); }
/* Επικεφαλίδα «δεν βρέθηκε τίποτα». Ήταν φτιαγμένη στο χέρι με inline styles σε
   πέντε templates (αναζήτηση, blog, κατάστημα, παραγγελίες, checkout). */
.empty-heading {
  margin: 0 0 12px; color: var(--ink);
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}
.empty-heading--sm { font-size: 17px; margin-bottom: 8px; }
/* Εισαγωγική παράγραφος κάτω από επικεφαλίδα σελίδας. */
.lede { max-width: 60ch; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65; color: var(--muted); }
.empty-state__text  { margin: 0 0 22px; max-width: 30ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.empty-state .btn-line { align-self: center; }
@keyframes e24EmptyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Checkout */
.checkout-title.page-head__title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.12; }
.checkout-steps { display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.checkout-step-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 20px 16px; margin-bottom: -1px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  transition: border-color var(--dur-base) ease, color var(--dur-base) ease, opacity var(--dur-base) ease;
}
.checkout-step-btn.is-active { border-bottom-color: var(--ink); color: var(--ink); }
.checkout-step-btn.is-locked { opacity: .4; cursor: not-allowed; pointer-events: none; }
.checkout-step-btn.has-error { opacity: 1; }
.checkout-step-btn.has-error .step-num { border-color: var(--clr-err); color: var(--clr-err); }
.step-num {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor;
  font-family: var(--label-font); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-num.is-done    { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.step-num.is-current { border-color: var(--ink); }
.checkout-panel { min-height: 0; }
.step-actions { margin-top: var(--sp-7); display: flex; justify-content: flex-end; gap: var(--sp-4); }
.step-actions--split { justify-content: space-between; }
.step-actions .btn, .step-actions .btn-line { min-height: 52px; }
.step-actions .btn { padding: 0 40px; }

.ship-method {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; margin-bottom: 12px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--card-radius);
  transition: border-color .2s ease, background-color .2s ease;
}
.ship-method:hover { border-color: var(--muted-2); }
.ship-method.is-selected { border-color: var(--ink); background: var(--bg-2); }
label.shipping-label-active { border-color: var(--ink) !important; }

.checkout-summary { background: var(--bg-2); border-radius: var(--card-radius); padding: 32px; position: sticky; top: calc(var(--header-h) + 24px); }
.checkout-summary__toggle  { display: none; }
.checkout-summary__heading { margin-bottom: 24px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.checkout-summary__items   { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.checkout-summary__trust   { font-size: 11px; margin-top: 20px; line-height: 1.6; color: var(--muted); }

.order-totals-list  { border-top: 1px solid var(--line-2); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.order-totals-row   { display: flex; justify-content: space-between; font-size: 13px; }
.order-totals-grand { border-top: 1px solid var(--line-2); margin-top: 16px; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.order-total-amount { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-deep); }

@media (max-width: 768px) {
  .checkout-summary { order: -1; position: static; padding: 0; background: transparent; border: 1px solid var(--line-2); }
  .checkout-summary__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; min-height: 56px; padding: 16px 20px;
    background: var(--bg-2); border: 0; cursor: pointer; font-family: inherit;
  }
  .checkout-summary__peek { display: inline-flex; align-items: center; gap: 10px; }
  .checkout-summary__peek .serif { font-size: 17px; }
  .checkout-summary__chev { flex-shrink: 0; transition: transform .24s var(--ease); }
  .checkout-summary.is-open .checkout-summary__chev { transform: rotate(180deg); }
  .checkout-summary__heading { display: none; }
  .checkout-summary__body { display: none; padding: 20px; }
  .checkout-summary.is-open .checkout-summary__body { display: block; }
  .order-totals-grand .order-total-amount { font-size: 22px; }
  .checkout-steps { overflow-x: auto; }
  .checkout-step-btn { padding: 0 14px 16px; font-size: 10px; }
  .cart-items-header { display: none; }
  .cart-item-row { display: flex !important; flex-direction: column; gap: 12px !important; align-items: flex-start !important; }
}

/* Account */
.account-sidebar-nav { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 2px; }
.account-sidebar-nav a,
.account-nav a, .account-nav li a {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted); transition: color .2s ease;
}
.account-sidebar-nav a:hover,
.account-nav a:hover, .account-nav li a:hover { color: var(--ink); }
.account-sidebar-nav a.is-active,
.account-nav .is-active, .account-nav li.is-active a,
.woocommerce-MyAccount-navigation-link.is-active a { color: var(--ink); font-weight: 600; }

.orders-header { display: grid; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.order-row { border-bottom: 1px solid var(--line); }
.orders-pagination { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 12px; }
.orders-pagination a { border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color .2s ease; }
.orders-pagination a:hover { border-color: var(--ink); }
.orders-pagination .current-page { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.ea-form { max-width: 560px; }
.ea-section-title {
  margin: 32px 0 20px; padding-top: 32px; border-top: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ea-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ea-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ea-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.ea-actions { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 768px) {
  .account-sidebar-nav {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 0;
    border-top: 1px solid var(--line); margin-bottom: 32px;
  }
  .account-sidebar-nav a {
    flex: 1 1 auto; padding: 12px 16px !important;
    border-bottom: none !important; border-right: 1px solid var(--line);
    white-space: nowrap; font-size: 12px !important;
  }
  .account-sidebar-nav a:last-child { border-right: none; }
  .orders-header { display: none !important; }
  .order-row { display: flex !important; flex-direction: column; gap: 8px !important; padding: 16px 0 !important; }
  .order-row .badge { align-self: flex-start; }
  .order-row .btn-line { align-self: flex-start; margin-top: 4px; }
}
@media (max-width: 560px) { .ea-field-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   16. WOOCOMMERCE DEFAULTS
   ═══════════════════════════════════════════════════════════════════════════ */
.woocommerce .col2-set,
.woocommerce-checkout .col2-set,
.woocommerce-account .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* The custom eyebrow already labels the billing panel — kill WC's duplicate h3. */
.woocommerce-billing-fields > h3 { display: none; }

ul.payment_methods, ul.wc_payment_methods {
  list-style: none !important; padding: 0; margin: 0 0 var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
ul.payment_methods li, ul.wc_payment_methods li {
  list-style: none !important; display: block;
  padding: 14px 18px; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--card-radius);
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease;
}
ul.payment_methods li::marker, ul.wc_payment_methods li::marker { content: none; }
ul.payment_methods li.wc_payment_method input[type="radio"] { margin-right: 10px; accent-color: var(--ink); }
ul.payment_methods li.wc_payment_method label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink); cursor: pointer;
}
ul.payment_methods li.wc_payment_method label img { height: 22px; width: auto; vertical-align: middle; }
ul.payment_methods li.wc_payment_method:has(input:checked) { border-color: var(--ink); background: var(--bg-2); }
.payment_box, .payment_methods .payment_box {
  margin-top: var(--sp-3); padding: var(--sp-4); border: 0; border-radius: 8px;
  background: var(--bg-2); font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.payment_box p { margin: 0 0 var(--sp-3); }
.payment_box p:last-child { margin-bottom: 0; }
.payment_box::before { display: none; }
.payment_box .form-row, .payment_box #wc-stripe-cc-form, .payment_box .wc-credit-card-form { margin: 0; }

#place_order, button#place_order, .woocommerce #place_order {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; min-width: 240px; padding: 0 var(--sp-7); margin-top: var(--sp-5);
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: var(--pill);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
#place_order:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
#place_order:disabled, .woocommerce #place_order:disabled { opacity: .5; cursor: not-allowed; }

.woocommerce-terms-and-conditions-wrapper { margin: var(--sp-4) 0; }
.woocommerce-privacy-policy-text { font-size: 12px; line-height: 1.6; color: var(--muted); margin-bottom: var(--sp-4); }
.woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px !important; text-transform: none !important;
  letter-spacing: 0 !important; color: var(--ink) !important;
}
.form-row.validate-required.terms, .form-row.terms { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--sp-5); }
.form-row.terms input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ink); }
.woocommerce-SavedPaymentMethods, #wc-stripe-payment-token-cc { margin: var(--sp-3) 0; }
.woocommerce-SavedPaymentMethods-token, .woocommerce-SavedPaymentMethods-new {
  font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important;
}
.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 32px; list-style: none; padding: 0; margin: 0 0 32px; }
.woocommerce-order-overview li { font-size: 13px; color: var(--muted); }
.woocommerce-order-overview li strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }

/* Notices */
.woocommerce-notices-wrapper, .wc-block-components-notices { margin-bottom: var(--sp-5); }
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.woocommerce-noreviews, .woocommerce-NoticeGroup, .wc-block-components-notice-banner {
  list-style: none; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-5);
  font-size: var(--type-meta); line-height: 1.6;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
}
.woocommerce-message { border-color: var(--accent); }
.woocommerce-error   { border-color: var(--clr-err); background: var(--clr-err-bg); color: var(--clr-err); }
.woocommerce-info    { border-color: var(--line-2); }
.woocommerce-message a, .woocommerce-error a, .woocommerce-info a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  margin-left: var(--sp-3); padding: 6px var(--sp-3); min-height: 0;
  background: transparent; border: 1px solid currentColor; color: inherit;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}
.demo_store, .woocommerce-store-notice {
  background: var(--ink); color: var(--bg); padding: var(--sp-2) var(--sp-5);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

@media (max-width: 768px) {
  .woocommerce .col2-set,
  .woocommerce .woocommerce-billing-fields__field-wrapper,
  .woocommerce .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-order-overview { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. HOMEPAGE SECTIONS
   Every content section owns the same vertical padding and zero margin, so the
   gap between any two sections is identical. Full-bleed dark bands carry their
   own internal padding.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ΜΟΝΟ κάθετα περιθώρια. Το σκέτο `margin: 0` έσπαγε το οριζόντιο κεντράρισμα:
   τα featured templates βάζουν `container-wide` ΚΑΙ `e24-section--featured` στο
   ΙΔΙΟ element, οπότε το margin:0 ακύρωνε το `margin: 0 auto` του container και
   η ενότητα κολλούσε αριστερά με 240px κενό δεξιά σε οθόνη 1920px. Κάτω από
   1680px δεν φαινόταν, γιατί εκεί ο container γεμίζει το viewport. */
.e24-section--featured, .e24-section--featured2,
.e24-section--gifts, .gifts-section, .e24-section--brands, .e24-section--reviews {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(42px, 4.4vw, 64px);
  padding-bottom: clamp(42px, 4.4vw, 64px);
}
.e24-section--repairs, .e24-section--trust,
.e24-section--newsletter, .e24-section--categories, .e24-section--bridal { margin-top: 0; margin-bottom: 0; }

/* ── Hero: full-bleed ────────────────────────────────────────────────────── */
.hero-fullbleed { position: relative; height: 88vh; min-height: 560px; overflow: hidden; }
.hero-fullbleed__media { position: absolute; top: -20%; right: 0; bottom: -20%; left: 0; overflow: hidden; }
.hero-fullbleed__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-fullbleed__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,0) 25%, rgba(20,18,15,.6) 100%);
}
.hero-fullbleed__content {
  position: absolute; inset: 0; max-width: 1680px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 48px 80px;
  color: #fff;
}
.hero-fullbleed__content h1.display { color: #fff; max-width: 18ch; }
.hero-fullbleed__content .eyebrow { color: rgba(255,255,255,.78); margin-bottom: 20px; }
.hero-fullbleed__content .eyebrow::before { background: var(--accent); }
.hero-fullbleed__content .cta-row { margin-top: 36px; }
.hero-counter { position: absolute; left: 48px; top: 32px; color: rgba(255,255,255,.7); font-family: var(--label-font); font-size: 10px; letter-spacing: .12em; }

@keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes heroFadeFromRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.hero-fullbleed__content > * { animation: heroFadeUp .9s var(--ease) both; }
.hero-fullbleed__content > *:nth-child(1) { animation-delay: .1s; }
.hero-fullbleed__content > *:nth-child(2) { animation-delay: .26s; }
.hero-fullbleed__content > *:nth-child(3) { animation-delay: .44s; }

/* ── Hero: split / campaign ──────────────────────────────────────────────── */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.hero-split__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px,6vw,96px); background: var(--surface); }
.hero-split__text .eyebrow  { margin-bottom: 24px; }
.hero-split__text .cta-row  { margin-top: 44px; }
.hero-split__sub { margin-top: 28px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 46ch; }
.hero-split__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-split__text > * { animation: heroFadeUp .8s var(--ease) both; }
.hero-split__text > *:nth-child(1) { animation-delay: .08s; }
.hero-split__text > *:nth-child(2) { animation-delay: .2s; }
.hero-split__text > *:nth-child(3) { animation-delay: .32s; }
.hero-split__text > *:nth-child(4) { animation-delay: .44s; }
.hero-split > *:last-child { animation: heroFadeFromRight .85s var(--ease) .06s both; }

/* The campaign variant is one photographic cover with the copy laid over it. */
.hero-split--campaign {
  position: relative; display: block; padding: 0; overflow: hidden;
  min-height: clamp(600px, 78vh, 860px); background: var(--ink);
}
.hero-split--campaign .hero-split__img,
.hero-split--campaign > .ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; border-radius: 0;
}
.hero-split--campaign::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,18,15,.88) 0%, rgba(20,18,15,.6) 44%, rgba(20,18,15,.08) 78%),
    linear-gradient(0deg, rgba(20,18,15,.3), transparent 42%);
}
.hero-split--campaign .hero-split__text {
  position: relative; z-index: 2;
  width: min(760px, 60%); min-height: clamp(600px, 78vh, 860px);
  padding: clamp(48px, 7vw, 128px);
  background: transparent; border: 0; color: #fff;
}
.hero-split--campaign .display    { color: #fff; max-width: 12ch; }
.hero-split--campaign .eyebrow,
.hero-split--campaign .hero-split__sub { color: rgba(255,255,255,.8); }
.hero-split--campaign .eyebrow::before { background: var(--accent); }
.hero-split--campaign .btn { background: #fff; border-color: #fff; color: var(--ink); }
.hero-split--campaign .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 1024px) { .hero-counter { left: 24px; } }
@media (max-width: 900px)  { .hero-split--campaign .hero-split__text { width: min(680px, 78%); } }
@media (max-width: 768px) {
  .hero-fullbleed { height: 78vh; min-height: 460px; }
  .hero-fullbleed__content { padding: 0 20px 48px; }
  .hero-counter { left: 16px; top: 20px; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__text { padding: 48px 24px 56px; border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .hero-split--campaign,
  .hero-split--campaign .hero-split__text { min-height: 560px; }
  .hero-split--campaign .hero-split__text { width: 100%; padding: 48px 24px 54px; }
  .hero-split--campaign::before {
    background: linear-gradient(90deg, rgba(20,18,15,.86), rgba(20,18,15,.45)),
                linear-gradient(0deg, rgba(20,18,15,.36), transparent 50%);
  }
}

/* ── Category strip ──────────────────────────────────────────────────────── */
/* Ήταν 94px, το λεπτότερο στοιχείο της σελίδας, ενώ είναι ο βασικός μηχανισμός
   «διάλεξε τμήμα» αμέσως μετά το hero. */
.category-strip { padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.category-strip__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); }
/* Στοιχείο πλοήγησης μέσα σε οριζόντιο scroller, όχι σύνδεσμος μέσα σε κείμενο:
   παίρνει κάθετο padding ώστε ο στόχος αφής να φτάνει τα 44px. */
.cat-strip-link { position: relative; display: flex; align-items: center; min-height: var(--tap-target); gap: 10px; padding: 10px 0; color: inherit; }
.cat-strip-link .cat-strip-name { transition: transform .26s var(--ease), color .2s var(--ease); }
.cat-strip-link:hover .cat-strip-name { transform: translateX(5px); }
.cat-strip-num  { font-family: var(--label-font); font-size: 10.5px; color: var(--accent-deep); transition: color .2s var(--ease); }
.cat-strip-name { font-size: clamp(20px, 2vw, 29px); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.cat-strip-link:hover .cat-strip-name { color: var(--accent-deep); }
.cat-strip-link--italic .cat-strip-name { font-style: normal; }
@media (max-width: 768px) {
  .category-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 0; }
  .category-strip__inner { flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 4px; gap: 26px; }
  .cat-strip-name { font-size: 19px; }
}

/* ── Featured carousels ──────────────────────────────────────────────────── */
.featured-intro-grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: clamp(32px, 4vw, 64px); align-items: end;
  margin-bottom: var(--sp-8); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line);
}
.featured-intro-grid .eyebrow { margin-bottom: 18px; }
.featured-carousel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 6px; }
.featured-carousel-copy p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); }

.featured-carousel { position: relative; }
.featured-carousel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: 0 0 var(--sp-4); }
.featured-carousel__controls { display: flex; align-items: center; gap: var(--sp-2); }
.featured-carousel__controls .icon-btn { border: 1px solid var(--line-2); background: var(--bg); }
.featured-carousel__controls .js-carousel-prev svg { transform: rotate(180deg); }
.featured-carousel__controls .icon-btn:disabled { opacity: .35; cursor: default; transform: none; }
.featured-carousel__viewport {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  padding: 0 0 var(--sp-3); outline: none; scrollbar-width: none;
}
.featured-carousel__viewport::-webkit-scrollbar { display: none; }
/* Πέντε κάρτες ανά οθόνη, όχι έξι. Στα 1440px οι έξι έδιναν εικόνα 205px, όπου
   μια λεπτή αλυσίδα ή ένα δαχτυλίδι με πέτρα διαβάζεται ως γραμμή. Το κόσμημα
   είναι ο λόγος της αγοράς: η φωτογραφία κερδίζει από την πυκνότητα. */
.featured-carousel__track { display: grid; grid-auto-flow: column; width: 100%; grid-auto-columns: calc((100% - 80px) / 5); gap: 20px; }
.featured-carousel__progress { height: 1px; margin: var(--sp-5) 0 0; background: var(--line); overflow: hidden; }
.featured-carousel__progress span {
  display: block; width: 100%; height: 100%; background: var(--accent-deep);
  transform: scaleX(.12); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease);
}

.featured-carousel-card {
  scroll-snap-align: start; min-width: 0; cursor: default;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--card-radius);
  box-shadow: var(--soft-shadow); overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.featured-carousel-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--lift-shadow); }
.featured-carousel-card__media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--bg); }
.featured-carousel-card__img,
.featured-carousel-card__placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.featured-carousel-card:hover .featured-carousel-card__img { transform: scale(1.03); }
.featured-carousel-card__index { display: none; }
.featured-carousel-card__body {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 13px 14px 14px; text-align: center;
}
.featured-carousel-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0;
}
.featured-carousel-card .p-price { font-size: 16px; font-weight: 700; color: var(--accent-deep); }
.featured-carousel-card__purchase { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: auto; width: 100%; }

.featured-atc {
  appearance: none; width: 100%; min-height: 40px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: var(--pill);
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease), transform var(--dur-fast) ease;
}
.featured-atc:hover  { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.featured-atc:active { transform: translateY(1px); }
.featured-atc:disabled { opacity: .6; cursor: wait; }
.featured-atc svg { width: 14px; height: 14px; flex-shrink: 0; }
.featured-atc--link { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.featured-atc--sold-out {
  background: transparent; color: var(--muted); border-color: var(--line);
  font-size: 10px; letter-spacing: .06em; cursor: default; pointer-events: none;
}

/* Η δεύτερη λωρίδα ΔΕΝ είναι αντίγραφο της πρώτης. Το καθρέφτισμα τίτλου και
   κειμένου δεν διαβαζόταν με μια ματιά: και οι δύο ενότητες έβγαιναν 787px με
   ίδιο πλάτος κάρτας και ίδιο ύψος εικόνας, δηλαδή το ένα τέταρτο της αρχικής
   ήταν το ίδιο block δύο φορές. Τώρα η §I είναι λωρίδα ΠΕΡΙΗΓΗΣΗΣ (5 κάρτες,
   πολλά κομμάτια) και η §II είναι ΕΠΙΛΟΓΗ (3 μεγάλες). Διαφορετικός ρυθμός,
   ίδιο markup. */
.e24-section--featured2 .featured-carousel__track {
  grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
}
.e24-section--featured2 .featured-carousel-card__body { gap: 8px; padding: 18px 20px 20px; }
.e24-section--featured2 .featured-carousel-card__title { font-size: 15.5px; }
.e24-section--featured2 .featured-carousel-card .p-price { font-size: 18px; }
.e24-section--featured2 .featured-atc { min-height: 44px; font-size: 11px; }

.e24-section--featured2 {
  position: relative; background: var(--bg-2);
  box-shadow: 0 0 0 100vmax var(--bg-2); clip-path: inset(0 -100vmax);
}
.e24-section--featured2 .featured-intro-grid { grid-template-columns: 2fr 3fr; }
.e24-section--featured2 .featured-intro-grid > :first-child { order: 2; }
.e24-section--featured2 .featured-carousel-copy { order: 1; text-align: left; }

@media (max-width: 1200px) {
  .featured-carousel__track { grid-auto-columns: calc((100% - 60px) / 4); }
  .e24-section--featured2 .featured-carousel__track { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 1024px) {
  .featured-carousel__track,
  .e24-section--featured2 .featured-carousel__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
}
@media (max-width: 900px) {
  .featured-carousel__track,
  .e24-section--featured2 .featured-carousel__track { grid-auto-columns: minmax(240px, 72vw); }
  .e24-section--featured2 .featured-intro-grid { grid-template-columns: 1fr; }
  .e24-section--featured2 .featured-intro-grid > :first-child { order: 1; }
  .e24-section--featured2 .featured-carousel-copy { order: 2; }
}
@media (max-width: 768px) {
  .featured-intro-grid { grid-template-columns: 1fr; gap: 26px; margin-bottom: 32px; align-items: start; }
  .featured-carousel { margin-inline: -16px; }
  .featured-carousel__head { padding-inline: 16px; }
  .featured-carousel__viewport { padding-inline: 16px; scroll-padding-inline: 16px; }
  .featured-carousel__progress { margin-inline: 16px; }
  .featured-carousel__track,
  .e24-section--featured2 .featured-carousel__track { grid-auto-columns: minmax(200px, 46vw); gap: 12px; }
  .featured-carousel-card__title { font-size: 13px; }
}

/* ── Gift tiers ──────────────────────────────────────────────────────────── */
.gifts-section .section-body { margin-inline: auto; }
.gifts-section .section-cta  { margin-top: var(--sp-8); }
.gift-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 760px; margin: 36px auto 0; }
.gift-tier {
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--card-radius);
  box-shadow: var(--soft-shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.gift-tier:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--lift-shadow); }
.gift-tier__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: var(--bg-2); }
.gift-tier__media .gift-tier__img,
.gift-tier__media img,
.gift-tier__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.gift-tier:hover .gift-tier__media img,
.gift-tier:hover .gift-tier__media .ph { transform: scale(1.04); }
.gift-tier__row   { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; }
.gift-tier__label { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.gift-tier__arrow { font-family: var(--label-font); color: var(--muted); transition: transform .2s ease, color .2s ease; }
.gift-tier:hover .gift-tier__arrow { transform: translateX(4px); color: var(--accent-deep); }
.gift-services {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 26px; font-family: var(--label-font); font-weight: 600; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.gift-services__dot { opacity: .5; }
@media (max-width: 768px) { .gift-tiers { grid-template-columns: 1fr; max-width: 420px; } }

/* ── Bridal band (dark) ──────────────────────────────────────────────────── */
.bridal-section { background: var(--ink); color: #fff; padding: clamp(64px, 8vw, 120px) 0; }
.bridal-section .display  { color: #fff; }
.bridal-section .eyebrow  { color: rgba(255,255,255,.68); margin-bottom: 20px; }
.bridal-section .eyebrow::before { background: var(--accent); }
.bridal-section .text-muted { color: rgba(255,255,255,.5); }
.bridal-section h2.display  { max-width: 880px; margin: 0 auto; }
.bridal-section .section-body { max-width: 520px; margin: 26px auto 0; font-size: 15px; color: rgba(255,255,255,.6); }
.bridal-section .section-cta  { margin-top: 48px; display: inline-flex; }
.bridal-section .product-card { background: transparent; border-color: rgba(255,255,255,.14); box-shadow: none; }
.bridal-section .product-card:hover { border-color: rgba(255,255,255,.3); box-shadow: 0 20px 48px -16px rgba(0,0,0,.5); }
.bridal-section .ph-wrap { background: rgba(255,255,255,.06); }
.bridal-section .p-name  { color: #fff; }
.bridal-section .p-price { color: var(--accent); }
.bridal-section .p-stone { color: rgba(255,255,255,.45); }
.bridal-section .product-card__kicker { color: rgba(255,255,255,.5); }
.bridal-section .product-card__quick-add { background: #fff; color: var(--ink); }
.bridal-section .product-card__quick-add:hover { background: var(--accent); color: #fff; }
.bridal-section .btn { background: #fff; color: var(--ink); border-color: #fff; }
.bridal-section .btn:hover { background: transparent; color: #fff; border-color: #fff; }
@media (max-width: 768px) { .bridal-section { padding: 56px 0; } }

/* ── Repairs band (dark) ─────────────────────────────────────────────────── */
.repairs-band { background: var(--ink); color: #fff; padding: clamp(56px, 6vw, 88px) 0; }
.repairs-inner { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.repairs-band .display      { color: #fff; }
.repairs-band .eyebrow      { color: rgba(255,255,255,.68); }
.repairs-band .eyebrow::before { background: var(--accent); }
.repairs-band .section-body { color: rgba(255,255,255,.62); }
.repairs-band .section-cta  { margin-top: var(--sp-7); }
.repairs-band .btn { background: #fff; color: var(--ink); border-color: #fff; }
.repairs-band .btn:hover { background: transparent; color: #fff; border-color: #fff; }
.repairs-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); }
.repairs-step  { border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--sp-4); }
.repairs-step__num { font-family: var(--label-font); font-size: 10px; letter-spacing: .1em; color: var(--accent); }
.repairs-step__lbl { margin-top: 6px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.repairs-track { margin-top: var(--sp-8); }
.repairs-track__label {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--label-font); font-weight: 600; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.repairs-track__row {
  display: flex; overflow: hidden;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--pill);
  transition: border-color var(--dur-base) var(--ease);
}
.repairs-track__row:focus-within { border-color: rgba(255,255,255,.6); }
.repairs-track__row input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px;
  background: transparent; border: 0; outline: none; border-radius: 0;
  color: #fff; font-family: var(--mono); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.repairs-track__row input::placeholder {
  color: rgba(255,255,255,.4); font-family: var(--sans); font-size: 13px;
  letter-spacing: .02em; text-transform: none;
}
.repairs-track__row button {
  flex-shrink: 0; width: 56px; display: grid; place-items: center;
  background: transparent; border: 0; border-left: 1px solid rgba(255,255,255,.25); color: #fff;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.repairs-track__row button:hover { background: #fff; color: var(--ink); }
@media (max-width: 1024px) { .repairs-inner { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 640px)  { .repairs-band { padding: 56px 0; } .repairs-steps { gap: var(--sp-5); } }

/* ── Brands ──────────────────────────────────────────────────────────────── */
.e24-section--brands { text-align: center; }
.brands-head { margin-bottom: 26px; }
.brands-head .eyebrow { margin-bottom: 12px; }
.brands-head__title { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.022em; }
.brands-featured { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.brand-logo, .brand-logo--featured {
  flex: 0 0 auto; min-width: 148px; padding: 20px 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--card-radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.brand-logo:hover, .brand-logo--featured:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--lift-shadow); }
.brand-logo__img {
  max-width: 116px; max-height: 38px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .82;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.brand-logo:hover .brand-logo__img { filter: grayscale(0); opacity: 1; }
.brand-logo__name { font-size: 17px; font-weight: 600; color: var(--muted); transition: color .3s var(--ease); }
.brand-logo:hover .brand-logo__name { color: var(--ink); }
.brands-index { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.brands-index__label { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.brands-index__list  { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 16px; }
.brands-index__list a { font-size: 13px; color: var(--ink-2); }
.brands-index__list a:hover { color: var(--accent-deep); }
@media (max-width: 560px) { .brand-logo, .brand-logo--featured { min-width: 120px; padding: 16px 20px; } }

/* ── Google reviews ──────────────────────────────────────────────────────── */
.reviews-section { padding: clamp(42px, 4.4vw, 64px) 0; }
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.reviews-head h2 { margin: 8px 0 0; font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -.022em; line-height: 1.05; }
.reviews-summary { display: flex; align-items: center; gap: 14px; }
.reviews-summary__score { font-size: clamp(36px, 3.6vw, 50px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.reviews-summary__meta  { display: flex; flex-direction: column; gap: 3px; }
.reviews-stars, .review-card__stars { color: var(--accent); }
.reviews-stars svg { width: 16px; height: 16px; }
.review-card__stars svg { width: 14px; height: 14px; }
.reviews-summary__count { font-size: 12px; color: var(--muted); }
.reviews-summary__count b { color: var(--ink); font-weight: 600; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.review-card {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
}
.review-card__quote  { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.review-card__author { margin-top: auto; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.review-card__author b { color: var(--ink); font-weight: 600; font-size: 13px; }
.reviews-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(22px, 3vw, 32px);
  padding-bottom: 5px; border-bottom: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.reviews-cta svg { transition: transform .25s var(--ease); }
.reviews-cta:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.reviews-cta:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } .review-card:nth-child(n+3) { display: none; } }
@media (max-width: 600px) { .reviews-head { gap: 18px; } }

/* ── Trust strip (dark) ──────────────────────────────────────────────────── */
.trust-strip { background: var(--ink); border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.trust-strip__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding-left: 0; }
.trust-strip__item {
  padding: 4px 24px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.trust-strip__item + .trust-strip__item::before {
  content: "·"; display: inline-block; margin-right: 24px;
  color: var(--accent); font-size: 18px; line-height: 0; vertical-align: -2px;
}
.trust-micro { display: flex; flex-wrap: wrap; gap: 7px 13px; font-size: 9px; color: var(--muted); }
@media (max-width: 768px) {
  .trust-strip__list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .trust-strip__item { flex-shrink: 0; padding: 4px 14px; font-size: 10px; letter-spacing: .1em; }
  .trust-strip__item + .trust-strip__item::before { margin-right: 14px; }
}
@media (max-width: 480px) {
  .trust-strip { padding: 18px 0; }
  .trust-strip__list { justify-content: flex-start; padding: 0 16px; scrollbar-width: none; }
  .trust-strip__list::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FOOTER (permanently dark — writes light values directly)
   ═══════════════════════════════════════════════════════════════════════════ */
.footer { background: var(--ink); color: #fff; padding: 72px 0 32px; }
.footer h5, .footer-col-title {
  margin: 0 0 18px; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { font-size: 13px; color: rgba(255,255,255,.85); transition: color .2s ease; }
.footer a:hover { color: var(--accent); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; padding-bottom: 48px; }
.footer-grid > *:first-child { flex: 1.4 1 200px; }
.footer-grid > *:not(:first-child) { flex: 1 1 160px; }
.footer-brand-name { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.footer-brand-desc { margin-top: 14px; max-width: 280px; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.7); }
.footer-contact { display: grid; gap: 4px; margin-top: 20px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.64); }
.footer-contact a { width: fit-content; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #fff; }

/* Newsletter. Lived as inline styles + inline on* handlers until 2.2.2, which
   put it outside the token system and killed every hover state under a CSP.
   Dark island: light values are written directly, like the rest of §18. */
.footer-news { margin-top: var(--sp-7); }
.footer-news__label {
  margin-bottom: 10px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.footer-news__row { display: flex; }
.footer-news__input {
  flex: 1; min-width: 0; height: var(--tap-target); padding: 0 var(--sp-3);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18); border-right: 0;
  color: #fff; font: inherit; font-size: var(--type-meta);
  transition: border-color var(--dur-base) ease, background var(--dur-base) ease;
}
.footer-news__input::placeholder { color: rgba(255,255,255,.45); }
.footer-news__input:hover { border-color: rgba(255,255,255,.30); }
.footer-news__input:focus { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.45); }
.footer-news__btn {
  flex-shrink: 0; height: var(--tap-target); padding: 0 var(--sp-4);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-base) ease;
}
.footer-news__btn:hover { background: rgba(255,255,255,.22); }
.footer-news__btn[disabled] { opacity: .45; pointer-events: none; }
.footer-news__msg {
  display: none; margin-top: var(--sp-2);
  font-size: 10.5px; letter-spacing: .06em; color: rgba(255,255,255,.62);
}
.footer-news__msg.is-visible { display: block; }
.footer-news__msg.is-error { color: #F2B8B3; }
.footer-news__msg.is-ok { color: #8FD9B0; }

/* gap was 12px here and 16px inline in footer.php, so 16px is what shipped. */
.footer-social { display: flex; gap: 16px; margin-top: var(--sp-6); }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); transition: color .2s ease; }
.footer-social-link:hover { color: var(--accent); }
.footer-payments { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); }
.footer-payments__label { margin-right: 4px; font-family: var(--label-font); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pay-badge { display: inline-flex; align-items: center; }
.pay-badge svg { display: block; }
.pay-badge--text { padding: 6px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; font-size: 11px; color: rgba(255,255,255,.82); }
.footer-legal {
  display: flex; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 11px; color: rgba(255,255,255,.55); letter-spacing: .04em;
}
.footer-legal__links { display: flex; gap: 24px; }
.footer-dev-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
  .footer { padding: 48px 0 24px; }
  .footer-grid { gap: 32px; }
  .footer-grid > *:first-child,
  .footer-grid > *:not(:first-child) { flex: 1 1 100%; }
  .footer-legal { flex-direction: column; gap: 12px; }
}
/* The footer was the one region whose hit areas never reached --tap-target:
   13px links in a 10px-gap list measure 16px tall. Grow the target, never the
   type, and only where the pointer is coarse — a mouse does not need 44px and
   the desktop footer keeps its density. Keyed to input, not width, because a
   touchscreen laptop is still a touchscreen. */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer ul a,
  .footer-contact a,
  .footer-legal__links a {
    display: flex; align-items: center; min-height: var(--tap-target);
  }
  .footer-contact a, .footer-legal__links a { display: inline-flex; }
  .footer-legal__links { gap: var(--sp-5); }
  .footer-social-link { min-width: var(--tap-target); min-height: var(--tap-target); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. CONTACT · ORDER TRACKING · REPAIR PORTAL
   ═══════════════════════════════════════════════════════════════════════════ */
.contact-hero { max-width: 640px; padding: var(--sp-7) 0 var(--sp-6); }
.contact-hero__title { margin-top: 16px; font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.022em; line-height: 1.05; }
.contact-hero__sub   { margin-top: 20px; max-width: 520px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.contact-layout { display: grid; grid-template-columns: 1fr 340px; gap: 72px; padding-bottom: 96px; align-items: start; }
.contact-form-col { padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); }
.contact-field-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.contact-field-wrap { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.contact-field-row .contact-field-wrap { margin-bottom: 0; }
.contact-form__footer  { margin-top: 8px; }
.contact-form__privacy { margin-bottom: 20px; font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.contact-form__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-submit { min-width: 220px; }
.contact-status { flex: 1; font-size: 13px; }
.contact-status--ok    { color: var(--clr-ok); }
.contact-status--error { color: var(--clr-err); }
.contact-info-col { position: sticky; top: calc(var(--header-h) + 32px); }
.contact-info { display: flex; flex-direction: column; }
.contact-info__block { padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact-info__block:first-child { padding-top: 0; }
.contact-info__block .eyebrow { margin-bottom: 10px; }
.contact-info__text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); font-style: normal; }
.contact-info__link { color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.contact-info__link:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.contact-info__note { margin-top: 24px; font-size: 11px; line-height: 1.6; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 768px) { .contact-form-col { padding: 22px 18px; } }
@media (max-width: 600px) { .contact-field-row { grid-template-columns: 1fr; } }

.ot-wrap  { max-width: 960px; margin: 0 auto; padding: 0 24px 72px; }
.ot-hero  { padding: 44px 0 30px; }
.ot-hero .display { margin-top: 10px; }
.ot-title { margin: 8px 0 16px; font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; }
.ot-intro { margin: 0 0 32px; max-width: 520px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.ot-layout { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
.ot-card   { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 36px; }
.ot-field-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ot-field-wrap { display: flex; flex-direction: column; gap: 6px; }
.ot-hint    { font-size: 11px; color: var(--muted); }
.ot-actions { margin-top: 28px; }
.ot-aside   { display: flex; flex-direction: column; gap: 32px; }
.ot-aside__block { padding-top: 24px; border-top: 1px solid var(--line); }
.ot-aside__block:first-child { border-top: 0; padding-top: 0; }
.ot-aside__text { margin: 8px 0 12px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.ot-aside__link {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: border-color .2s ease;
}
.ot-aside__link:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
/* WooCommerce's own track_order form, reskinned inside .ot-card */
.woocommerce-order-tracking .woocommerce { max-width: 720px; margin: 0 auto; padding: 0 24px 72px; }
.ot-card form.track_order { margin: 0; }
.ot-card form.track_order > p:first-of-type { display: none; }
.ot-card .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; float: none !important; width: 100% !important; padding: 0 !important; }
.ot-card .form-row-first, .ot-card .form-row-last { width: 100% !important; float: none !important; }
.ot-card .form-row [name="track"] {
  appearance: none; -webkit-appearance: none; display: inline-flex;
  align-items: center; justify-content: center; min-height: 48px; padding: 0 32px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: var(--pill);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ot-card .form-row [name="track"]:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.ot-card .clear { display: none; }
.ot-card .woocommerce-order-overview { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.ot-card .woocommerce-order-overview li { font-size: 13px; color: var(--muted); }
.ot-card .woocommerce-order-overview strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
@media (max-width: 768px) { .ot-layout { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .ot-field-row { grid-template-columns: 1fr; } }

.repair-portal .page-head { margin-bottom: clamp(26px, 4vw, 44px); }
.repair-portal__card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); }
.repair-portal__card .entry-content { margin-top: 0; padding: clamp(24px, 4vw, 44px); }
.repair-portal__help { margin: 16px 0 0; font-size: 12px; text-align: center; color: var(--muted); }
body[class*="page-repair-tracking"] .entry-content {
  margin-top: var(--sp-5); padding: clamp(22px, 4vw, 40px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
}
body[class*="page-repair-tracking"] .repair-portal__card .entry-content { border: 0; border-radius: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   20. COOKIE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.e24-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 48px; background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -14px 34px -26px rgba(var(--ink-rgb), .5);
  transform: translateY(100%); transition: transform .4s var(--ease);
}
.e24-cookie.is-visible { transform: translateY(0); }
.e24-cookie__text { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.e24-cookie__text a { margin-left: 4px; color: var(--ink); text-decoration: underline; }
.e24-cookie__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.e24-cookie__decline {
  padding: 0; background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: var(--label-font); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.e24-cookie__decline:hover { color: var(--ink); }
.e24-cookie .btn { min-height: 40px; padding: 0 22px; font-size: 11px; }
@media (max-width: 768px) {
  .e24-cookie { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  .e24-cookie__actions { width: 100%; justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
/* fill-mode: backwards, ΟΧΙ both.
   Με «both» το animation κρατά το τελικό keyframe, και παρότι αυτό γράφει
   `transform: none`, το computed value μένει matrix(1,0,0,1,0,0). Η identity
   matrix εξακολουθεί να κάνει το <main> containing block, οπότε ΚΑΘΕ
   position:fixed απόγονος (π.χ. η μπάρα αγοράς του σχεδιαστή) σταματά να
   είναι δεμένος στο viewport και προσκολλάται στο τέλος της σελίδας.
   Το «backwards» δίνει το ίδιο οπτικό αποτέλεσμα και αφήνει transform:none. */
.page-enter { animation: pageIn .45s var(--ease) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.product-card.reveal { transform: translateY(14px); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .13s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .21s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .29s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .37s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .45s; }
/* Stagger shop cards by column so each row cascades. The 4n selector assumes a
   4-column grid, so the delays are reset below the 2-column breakpoint. */
.products .product:nth-child(4n+2) .product-card.is-visible { transition-delay: .08s; }
.products .product:nth-child(4n+3) .product-card.is-visible { transition-delay: .16s; }
.products .product:nth-child(4n+4) .product-card.is-visible { transition-delay: .24s; }
@media (max-width: 768px) {
  .products .product:nth-child(4n+2) .product-card.is-visible,
  .products .product:nth-child(4n+3) .product-card.is-visible,
  .products .product:nth-child(4n+4) .product-card.is-visible { transition-delay: 0s; }
}

@keyframes e24CheckDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.e24-check { width: 1em; height: 1em; vertical-align: -2px; }
.e24-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: e24CheckDraw .42s var(--ease) .04s forwards; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .hero-fullbleed__content > *, .hero-split__text > *, .hero-split > *:last-child,
  .pdp-info > *, .empty-state, .search-empty, .e24-cart-toast,
  #recently-viewed-grid.is-in > * { animation: none; opacity: 1; transform: none; }
  .e24-sk::after { animation: none; }
  .e24-check path { animation: none; stroke-dashoffset: 0; }
  .drawer-body [data-cart-key].is-removing { animation: none; opacity: 0; }
}