/*
 * global.css — loaded on every page via preload trick.
 * Full reset, typography, buttons, badges, forms, utilities.
 */

/* ── Self-hosted fonts ─────────────────────────────────────────────────────── */
/*
 * Available files: Cormorant-Regular.woff/.woff2, Cormorant-Italic.woff/.woff2,
 *                  Cormorant-SemiBold.woff/.woff2,
 *                  YsabeauOffice-Regular.woff2, YsabeauOffice-Bold.woff2,
 *                  Ysabeau-Regular.woff/.woff2, Ysabeau-Italic.woff/.woff2,
 *                  Ysabeau-Bold.woff/.woff2
 *
 * Font-weight ranges cover 300–500 from a single file each (Cormorant,
 * Ysabeau Office). The browser renders weights within the range from the one
 * available file. Add Light/Medium variants to /assets/fonts/ later to
 * sharpen each weight.
 *
 * To add missing weights:
 *   Cormorant-Light.woff2    → weight 300 normal  (replace range 300 500 below)
 *   Cormorant-Medium.woff2   → weight 500 normal
 *   YsabeauOffice-Light.woff2  → weight 300
 *   YsabeauOffice-Medium.woff2 → weight 500
 *
 * .woff is included as a fallback after .woff2 in each src list — negligible
 * cost (browsers that support woff2 never request the .woff) and covers any
 * legacy browser that only understands woff.
 */

/* Cormorant — normal, weights 300–500 served from Regular */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-Regular.woff2') format('woff2'),
    url('../fonts/Cormorant-Regular.woff') format('woff');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant — SemiBold, weight 600. Heavier than BRAND.md's documented
   300–500 headline scale — confirm the intended use case gets added to
   BRAND.md's typography table before this shows up in multiple places. */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-SemiBold.woff2') format('woff2'),
    url('../fonts/Cormorant-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant — italic, weights 300–500 served from Italic */
/* font-display: optional — Italic is decorative (blockquotes, pull quotes) and
   is not preloaded. With 'swap' the browser downloads 80 KB then causes a text
   reflow after FCP. 'optional' skips the download on slow/cold-cache visits and
   uses the fallback serif; the font is cached silently for subsequent visits. */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/Cormorant-Italic.woff2') format('woff2'),
    url('../fonts/Cormorant-Italic.woff') format('woff');
  font-weight: 300 500;
  font-style: italic;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ysabeau Office — weights 300–400 from Regular */
@font-face {
  font-family: 'Ysabeau Office';
  src: url('../fonts/YsabeauOffice-Regular.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ysabeau Office — weight 500 from Bold (closest available) */
@font-face {
  font-family: 'Ysabeau Office';
  src: url('../fonts/YsabeauOffice-Bold.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ysabeau (non-Office) — new third brand font, see BRAND.md.
   Not preloaded anywhere yet — font-display: swap is safe since it's an
   opt-in accent font, not used in any above-the-fold critical path today. */
@font-face {
  font-family: 'Ysabeau';
  src: url('../fonts/Ysabeau-Regular.woff2') format('woff2'),
    url('../fonts/Ysabeau-Regular.woff') format('woff');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ysabeau — weight 500 from Bold (mirrors the Ysabeau Office pattern above) */
@font-face {
  font-family: 'Ysabeau';
  src: url('../fonts/Ysabeau-Bold.woff2') format('woff2'),
    url('../fonts/Ysabeau-Bold.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ysabeau — italic, weights 300–500. font-display: optional, matching
   Cormorant's italic treatment above (decorative, not preloaded). */
@font-face {
  font-family: 'Ysabeau';
  src: url('../fonts/Ysabeau-Italic.woff2') format('woff2'),
    url('../fonts/Ysabeau-Italic.woff') format('woff');
  font-weight: 300 500;
  font-style: italic;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Font family utilities ────────────────────────────────────────────────────
   Per-block opt-in to swap between the three approved brand fonts (see
   BRAND.md — never use a font outside Cormorant/Ysabeau Office/Ysabeau
   without approval). */
.vt-font-head {
  font-family: var(--font-head) !important;
}

.vt-font-body {
  font-family: var(--font-body) !important;
}

.vt-font-accent {
  font-family: var(--font-accent) !important;
}

/* ── Full reset ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body p {
  font-size: 17.5px;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Browsers default <button> text to pure black (buttontext), not our
   off-black. Element-level only, so any button class that sets its own
   colour (white on dark, etc.) still wins. */
button {
  color: var(--text);
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.15;
  color: var(--black);
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

@media (max-width: 600px) {
  .container {
    padding: 0 16px;
  }
}

/* ── Standard page template ─────────────────────────────────────────────────── */
.page-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px var(--side-pad) 64px;
}

@media (max-width: 600px) {
  .page-content {
    padding: 32px 16px 48px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
/* Email button template (Sep 2026) — same three buttons as Bloomreach email:
     .btn--primary   orange  — the main conversion CTA on a screen (add to basket, checkout, hero "shop now")
     .btn--secondary black   — supporting actions
     .btn--accent    outline — tertiary actions (view product, back)
   40px tall, 30px side padding, Initial Caps, no shadow, no arrow.
   See docs/BRAND.md → Buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--btn-font-size);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: capitalize;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* Primary — orange */
.btn--primary {
  background: var(--cta-orange);
  color: var(--white);
  border-color: var(--cta-orange);
}

.btn--primary:hover {
  background: var(--cta-orange-hover);
  border-color: var(--cta-orange-hover);
  color: var(--white);
  text-decoration: none;
}

/* Secondary — black */
.btn--secondary {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.btn--secondary:hover {
  background: #3a3a3a;
  border-color: #3a3a3a;
  color: var(--white);
  text-decoration: none;
}

/* Accent — outlined */
.btn--accent {
  background: transparent;
  color: var(--text);
  border-color: var(--black);
}

.btn--accent:hover {
  background: var(--black);
  color: var(--white);
  text-decoration: none;
}

/* On dark background */
.btn--on-dark {
  background: var(--white);
  color: var(--text);
  border-color: var(--white);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}

/* Add-to-cart loading state — cart.js sets aria-busy="true" and swaps the
   label to "Adding…" while the REST request is in flight, but on shop/
   category/promo-group grid cards nothing showed that visually (unlike the
   PDP's native WooCommerce add-to-cart, which keeps jQuery + its own
   spinner). Text stays in the DOM for aria-busy to announce, just hidden
   behind the spinner so the button doesn't change size. */
.js-add-to-cart[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.js-add-to-cart[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: vt-atc-spin 0.6s linear infinite;
}

@keyframes vt-atc-spin {
  to { transform: rotate(360deg); }
}

/* Compact variant — product cards, cart, forms: same template, 16px label */
.btn--sm {
  font-size: var(--btn-font-size-compact);
  padding: 0 16px;
}

/* Full width */
.btn--full {
  width: 100%;
}

/* Mobile height override */
@media (max-width: 600px) {
  .btn {
    font-size: var(--btn-font-size-compact);
  }
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

.badge--dark {
  background: var(--black);
  color: var(--white);
}

.badge--light {
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(34, 31, 32, 0.3);
}

.badge--soldout {
  background: var(--red);
  color: #ffffff;
}

/* % OFF tag — solid block, black by default. Campaigns recolour it via the
   Top Bar "Product Badge Colours" setting (inc/sales-top-bar.php), which
   overrides --sale-badge-bg / --sale-badge-text. */
.badge--sale {
  background: var(--sale-badge-bg);
  color: var(--sale-badge-text);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}

/* ── Stars ─────────────────────────────────────────────────────────────────── */
/* Plain ★/☆ text, matching the PDP's own star display (single-product.php,
   reviews-section.php) — see valentte_stars() in inc/helpers.php. */
.stars {
  color: #FFA222;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.stars__count {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.6875rem;
  color: var(--text);
  margin-left: 4px;
}

/* ── Forms (global) ────────────────────────────────────────────────────────── */
.form-field {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--grey3);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(34, 31, 32, 0.08);
}

.form-input.has-error,
.form-select.has-error {
  border-color: #d32f2f;
}

.form-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}

.form-error {
  font-size: 0.8125rem;
  color: #d32f2f;
  margin-top: 4px;
}

/* ── Mobile menu drawer ────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 950;
  /* above sticky header (900) — closed via internal button */
  background: var(--white);
  padding: 0 0 40px;
  /* mm-header handles top spacing */
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

/* ── Mobile menu internal header ─────────────────────────────────────────── */
.mm-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--white);
  border-bottom: 1px solid var(--grey3);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 8px;
  height: 64px;
  flex-shrink: 0;
}

.mm-header__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mm-header__logo img {
  display: block;
  max-height: 30px;
  width: auto;
}

.mm-header__spacer {
  width: 44px;
}

.mm-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--black);
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s;
}

.mm-close-btn:hover {
  background: var(--grey3);
}

.mm-close-btn svg {
  width: 20px;
  height: 20px;
}

/* Welcome greeting — logged-in users only (hidden by default, JS removes hidden attr) */
.mm-welcome[hidden] {
  display: none;
}

.mm-welcome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--grey3);
}

.mm-welcome svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--black);
}

.mm-welcome span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--black);
}

/* Zone 1 — Category Tiles */
.mm-tiles {
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--grey3);
  margin-bottom: 8px;
}

.mm-tiles__track {
  display: flex;
  gap: 12px;
  margin-left: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 12px;
  scrollbar-width: none;
}

.mm-tiles__track::-webkit-scrollbar {
  display: none;
}

.mm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--black);
}

.mm-tile__img-wrap {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grey3);
  flex-shrink: 0;
}

.mm-tile__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mm-tile__label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  max-width: 88px;
}

/* Zone 2 — Featured Links */
.mm-featured {
  padding: 8px 0;
  border-bottom: 1px solid var(--grey3);
  margin-bottom: 8px;
}

.mm-featured__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  text-decoration: none;
  color: var(--black);
  transition: background 0.12s;
}

.mm-featured__item:hover,
.mm-featured__item:focus-visible {
  background: var(--grey3);
  text-decoration: none;
}

.mm-featured__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--cream, #f5f0eb);
  color: var(--black);
}

.mm-featured__icon svg {
  width: 18px;
  height: 18px;
}

.mm-featured__text {
  flex: 1;
  min-width: 0;
}

.mm-featured__title {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.mm-featured__sub {
  display: block;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-featured__chevron {
  flex-shrink: 0;
  color: var(--text);
  display: flex;
  align-items: center;
}

/* Zone 3 — Accordion Nav */
.mm-accordion {
  padding: 4px 0 8px;
  border-bottom: none;
  margin-bottom: 0;
}

.mm-accordion__list {
  list-style: none;
}

.mm-accordion__list>li {
  border-top: none;
}

/* .mm-row div is injected by JS to wrap <a> + toggle button */
.mm-accordion__list>li>.mm-row {
  display: flex;
  align-items: center;
}

/* Shared link styles — plain items (> li > a) and items with sub-menu
   (> li > .mm-row > a). Parent items with no direct URL (mega-menu
   headers like "Gifts") render as .menu-title-label instead of <a> —
   same styling applies. */
.mm-accordion__list>li>a,
.mm-accordion__list>li>.mm-row>a,
.mm-accordion__list>li>.mm-row>.menu-title-label {
  display: block;
  padding: 16px 20px;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
}

.mm-accordion__list>li>.mm-row>a,
.mm-accordion__list>li>.mm-row>.menu-title-label {
  flex: 1;
}

.mm-accordion__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  border-radius: 4px;
  transition: background 0.12s;
  margin-right: 8px;
}

.mm-accordion__toggle:hover {
  background: var(--grey3);
}

.mm-accordion__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.mm-accordion__list>li.is-open>.mm-row>.mm-accordion__toggle svg {
  transform: rotate(180deg);
}

.mm-accordion__list .sub-menu {
  list-style: none;
  display: none;
  background: var(--page-bg);
  border-top: 1px solid var(--grey3);
  border-bottom: 1px solid var(--grey3);
  padding: 4px 0;
}

.mm-accordion__list>li.is-open>.sub-menu {
  display: block;
}

.mm-accordion__list .sub-menu li a,
.mm-accordion__list .sub-menu li .menu-title-label {
  display: block;
  padding: 12px 20px 12px 36px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--grey3);
  transition: color 0.15s, background 0.15s;
}

.mm-accordion__list .sub-menu>li:last-child>a,
.mm-accordion__list .sub-menu>li:last-child>.menu-title-label {
  border-bottom: none;
}

.mm-accordion__list .sub-menu li a:hover,
.mm-accordion__list .sub-menu li a:active {
  color: var(--black);
  background: var(--grey3);
}

/* First item in a column ("All Skincare", "All Scents"...) reads as the
   view-all link — same weight treatment as the desktop mega-menu's column
   headers, so it's visually distinct from the plain links below it. */
.mm-accordion__list .sub-menu>li:first-child>a,
.mm-accordion__list .sub-menu>li:first-child>.menu-title-label {
  font-weight: 500;
  color: var(--black);
}

/* Grandchild sub-menu (e.g. Skincare > Body Care > Foot Care) — indent
   one further step so the hierarchy reads clearly against its parent link. */
.mm-accordion__list .sub-menu .sub-menu li a,
.mm-accordion__list .sub-menu .sub-menu li .menu-title-label {
  padding-left: 52px;
  font-size: 0.875rem;
}

/* Deeper levels of the "Mobile: Main Menu" (e.g. Gift Boxes > Other Gifts >
   Shop By Occasion > Birthday) open together with their top-level parent. */
.mm-accordion__list>li.is-open .sub-menu {
  display: block;
}

.mm-accordion__list .sub-menu .sub-menu {
  border: none;
  padding: 0;
}

.mm-accordion__list .sub-menu .sub-menu .sub-menu li a,
.mm-accordion__list .sub-menu .sub-menu .sub-menu li .menu-title-label {
  padding-left: 68px;
}

/* Popular Categories heading (Valentte → Mobile Menu) */
.mm-tiles__heading {
  margin: 0 20px 8px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--black);
}

/* Top-level items with an icon/description (Valentte → Mobile Menu) —
   same icon + title + subtitle layout as the featured links above. */
.mm-accordion__list>li.mm-item--rich>a,
.mm-accordion__list>li.mm-item--rich>.mm-row>a,
.mm-accordion__list>li.mm-item--rich>.mm-row>.menu-title-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: inherit;
  min-width: 0;
}

.mm-featured__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Account utility links ───────────────────────────────────────────────── */
.mm-account {
  border-top: 1px solid var(--grey3);
  padding: 6px 0;
  margin-top: 4px;
}

.mm-account__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 20px;
  text-decoration: none;
  color: var(--black);
  font-size: 0.9375rem;
  transition: background 0.12s;
}

.mm-account__link:hover {
  background: var(--grey3);
  text-decoration: none;
}

.mm-account__link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--grey2);
}


/* ── Sign-in CTA (guest state in mobile menu) ───────────────────────────── */
.mm-signin {
  border-top: 1px solid var(--grey3);
  padding: 16px 20px;
  margin-top: 4px;
}

.mm-signin__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 18px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s;
}

.mm-signin__btn:hover {
  background: #333;
  color: var(--white);
  text-decoration: none;
}

.mm-signin__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--white);
}

/* ── Currency row (bottom) ───────────────────────────────────────────────── */
.mobile-currency {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 20px;
  margin: 0;
  border-top: 1px solid var(--grey3);
}

.currency-globe {
  width: 17px;
  height: 17px;
  color: var(--text);
  flex-shrink: 0;
  margin-right: 6px;
}

.currency-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  padding: 4px 8px 4px 0;
  transition: color 0.15s, border-color 0.15s;
}

.currency-btn+.currency-btn {
  padding-left: 8px;
  border-left: 1px solid var(--grey3);
}

.currency-btn.is-active {
  color: var(--black);
  font-weight: 600;
}

.currency-btn:hover:not(.is-active) {
  color: var(--black);
}

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

  .mm-featured__item {
    transition: none;
  }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  background: #F7F5F2;
  color: var(--text);
  padding: 60px 0 0;
  margin-top: 80px;
  /* content-visibility and contain-intrinsic-size removed for Safari 14 compat */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand .site-logo__name {
  color: var(--text);
}

.footer-brand .site-logo__sub {
  color: var(--text);
}

.footer-logo {
  display: inline-block;
  text-decoration: none;
}

/* Identical to the header logo (.site-logo__img in critical.css): 140px,
   104px at ≤768px. Change both together. */
.footer-logo__img {
  width: 140px;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .footer-logo__img { width: 104px; }
}

.footer-brand p {
  font-size: 0.75rem;
  color: var(--text);
  margin-top: 16px;
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-bottom {
  background: #565656;
  padding: 20px 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p,
.footer-legal a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a:hover {
  color: #fff;
}

/* ── Payment badges ────────────────────────────────────────────────────────── */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.payment-badge {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 5px 9px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.payment-badge img {
  height: 16px;
  width: auto;
  display: block;
  filter: none;
}

.custom-payment-icon {
  height: 16px;
  width: auto;
  display: block;
  font-size: 11px;
  font-weight: 700;
  padding: 0 5px;
  line-height: normal;
}

span.klarna.custom-payment-icon {
  background-color: #f9aad2;
}

span.clearpay.custom-payment-icon {
  background-color: #b5fbe6;
}

/* ── Notification banner ───────────────────────────────────────────────────── */
.site-notice {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 10px 24px;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

.site-notice a {
  color: var(--white);
  text-decoration: underline;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.8125rem;
  color: var(--text);
  padding: 12px 0;
}

.breadcrumb a {
  color: var(--text);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--black);
}

.breadcrumb span+span::before {
  content: ' / ';
  color: var(--text);
}

/* ── Inline error message ──────────────────────────────────────────────────── */
.inline-error {
  display: none;
  font-size: 0.8125rem;
  color: #d32f2f;
  margin-top: 6px;
}

.inline-error.is-visible {
  display: block;
}

/* ── Woo wrapper ───────────────────────────────────────────────────────────── */
.valentte-woo-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

@media (max-width: 600px) {
  .valentte-woo-content {
    padding: 0 16px;
  }
}

/* ── Sticky footer: main grows to fill leftover viewport height ─────────────── */
#main-content {
  flex: 1 0 auto;
}

/* ── Complianz cookie banner overrides ───────────────────────────────────────
   Restyles the default Complianz banner to match brand colours/typography and
   turns it into a compact bottom-right widget on desktop instead of the
   full-width default. Site-wide (banner can appear on any page). */
#cmplz-manage-consent {
  display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
  grid-template-columns: 0px 1fr 100px;
  display: none !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
  margin-left: 0px;
  margin-right: 0px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  font-weight: 700;
  font-size: 20px;
  justify-self: left;
  display: block !important;
  white-space: nowrap;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
  grid-row-start: 3;
}

#cmplz-cookiebanner-container #cmplz-message-1-optin p {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  font-size: 16px !important;
  font-weight: 500;
  color: var(--text);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
  background-color: #565656;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  color: #fff !important;
}

#cmplz-cookiebanner-container #cmplz-message-1-optin {
  margin-bottom: 0 !important;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  font-weight: 600;
  min-width: 120px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
  margin-bottom: 10px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
  margin: 0;
  width: 100%;
  gap: 2px;
  padding: 18px;
  z-index: 21474836466;
  bottom: 0;
}

@media screen and (min-width: 1024px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
    display: flex;
    max-width: 500px;
    flex-wrap: wrap;
    left: auto;
    right: 0;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    width: 100%;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
    flex-direction: column;
    margin-bottom: 8px !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body > div {
    width: 100%;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-documents {
    margin: 0 auto;
  }
}

@media screen and (max-width: 1023px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    grid-row-start: 4;
  }

  #cmplz-cookiebanner-container #cmplz-message-1-optin p {
    margin-bottom: 8px !important;
  }
}

@media screen and (max-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
    padding: 8px 20px;
    box-shadow: 0 -4px 12px rgba(86, 86, 86, 0.35);
  }

  #cmplz-cookiebanner-container #cmplz-message-1-optin p {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    height: auto;
    padding: 4px;
    font-size: 14px;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    margin-bottom: 8px;
  }

  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row;
    justify-content: center;
  }
}
/* ── Text is never grey: editor-content safety net ───────────────────────────
   Headings/paragraphs typed into pages in the block editor carry their colour
   as an inline style or a palette class stored in the database, which theme
   CSS can't otherwise reach. Force the common greys (old-theme palette + WP
   default greys) to off-black. Matches `color:` only at the start of the
   style attribute or after a `;`, so `background-color:#565656` blocks are
   untouched. Brand rule: docs/BRAND.md → Colours. */
:is(.page-content, .entry-content, #main-content) :is(
  [style^="color:#565656" i],
  [style*=";color:#565656" i],
  [style*="; color:#565656" i],
  [style^="color: #565656" i],
  [style*="; color: #565656" i],
  [style^="color:#767676" i],
  [style*=";color:#767676" i],
  [style*="; color:#767676" i],
  [style^="color: #767676" i],
  [style*="; color: #767676" i],
  [style^="color:#868686" i],
  [style*=";color:#868686" i],
  [style*="; color:#868686" i],
  [style^="color: #868686" i],
  [style*="; color: #868686" i],
  [style^="color:#555555" i],
  [style*=";color:#555555" i],
  [style*="; color:#555555" i],
  [style^="color: #555555" i],
  [style*="; color: #555555" i],
  [style^="color:#555" i],
  [style*=";color:#555" i],
  [style*="; color:#555" i],
  [style^="color: #555" i],
  [style*="; color: #555" i],
  [style^="color:#666666" i],
  [style*=";color:#666666" i],
  [style*="; color:#666666" i],
  [style^="color: #666666" i],
  [style*="; color: #666666" i],
  [style^="color:#666" i],
  [style*=";color:#666" i],
  [style*="; color:#666" i],
  [style^="color: #666" i],
  [style*="; color: #666" i],
  [style^="color:#6d6d6d" i],
  [style*=";color:#6d6d6d" i],
  [style*="; color:#6d6d6d" i],
  [style^="color: #6d6d6d" i],
  [style*="; color: #6d6d6d" i],
  [style^="color:#707070" i],
  [style*=";color:#707070" i],
  [style*="; color:#707070" i],
  [style^="color: #707070" i],
  [style*="; color: #707070" i],
  [style^="color:#777777" i],
  [style*=";color:#777777" i],
  [style*="; color:#777777" i],
  [style^="color: #777777" i],
  [style*="; color: #777777" i],
  [style^="color:#777" i],
  [style*=";color:#777" i],
  [style*="; color:#777" i],
  [style^="color: #777" i],
  [style*="; color: #777" i],
  [style^="color:#888888" i],
  [style*=";color:#888888" i],
  [style*="; color:#888888" i],
  [style^="color: #888888" i],
  [style*="; color: #888888" i],
  [style^="color:#888" i],
  [style*=";color:#888" i],
  [style*="; color:#888" i],
  [style^="color: #888" i],
  [style*="; color: #888" i],
  [style^="color:#999999" i],
  [style*=";color:#999999" i],
  [style*="; color:#999999" i],
  [style^="color: #999999" i],
  [style*="; color: #999999" i],
  [style^="color:#999" i],
  [style*=";color:#999" i],
  [style*="; color:#999" i],
  [style^="color: #999" i],
  [style*="; color: #999" i],
  [style^="color:#aaaaaa" i],
  [style*=";color:#aaaaaa" i],
  [style*="; color:#aaaaaa" i],
  [style^="color: #aaaaaa" i],
  [style*="; color: #aaaaaa" i],
  [style^="color:#aaa" i],
  [style*=";color:#aaa" i],
  [style*="; color:#aaa" i],
  [style^="color: #aaa" i],
  [style*="; color: #aaa" i],
  [style^="color:#333333" i],
  [style*=";color:#333333" i],
  [style*="; color:#333333" i],
  [style^="color: #333333" i],
  [style*="; color: #333333" i],
  [style^="color:#333" i],
  [style*=";color:#333" i],
  [style*="; color:#333" i],
  [style^="color: #333" i],
  [style*="; color: #333" i],
  [style^="color:#444444" i],
  [style*=";color:#444444" i],
  [style*="; color:#444444" i],
  [style^="color: #444444" i],
  [style*="; color: #444444" i],
  [style^="color:#444" i],
  [style*=";color:#444" i],
  [style*="; color:#444" i],
  [style^="color: #444" i],
  [style*="; color: #444" i],
  [style^="color:#1e1e1e" i],
  [style*=";color:#1e1e1e" i],
  [style*="; color:#1e1e1e" i],
  [style^="color: #1e1e1e" i],
  [style*="; color: #1e1e1e" i],
  [style^="color:#1a1a1a" i],
  [style*=";color:#1a1a1a" i],
  [style*="; color:#1a1a1a" i],
  [style^="color: #1a1a1a" i],
  [style*="; color: #1a1a1a" i],
  [style^="color:#221f20" i],
  [style*=";color:#221f20" i],
  [style*="; color:#221f20" i],
  [style^="color: #221f20" i],
  [style*="; color: #221f20" i],
  [style^="color:#abb8c3" i],
  [style*=";color:#abb8c3" i],
  [style*="; color:#abb8c3" i],
  [style^="color: #abb8c3" i],
  [style*="; color: #abb8c3" i],
  [style^="color:#9ca3af" i],
  [style*=";color:#9ca3af" i],
  [style*="; color:#9ca3af" i],
  [style^="color: #9ca3af" i],
  [style*="; color: #9ca3af" i],
  [style^="color:#6b7280" i],
  [style*=";color:#6b7280" i],
  [style*="; color:#6b7280" i],
  [style^="color: #6b7280" i],
  [style*="; color: #6b7280" i]
),
:is(.page-content, .entry-content, #main-content) :is(.has-cyan-bluish-gray-color, .has-grey-color, .has-gray-color, .has-dark-grey-color, .has-dark-gray-color, .has-light-grey-color, .has-light-gray-color) {
  color: var(--text) !important;
}

/* ── Stacked block-editor columns never wider than the screen ──────────────────
   On phones/tablets WordPress core forces flex-wrap:wrap on .wp-block-columns,
   and legacy page CSS often adds flex-direction:column. In a wrapping column
   flex container Chrome sizes each column to its content (a long paragraph's
   max-width, an image's width attribute) instead of the container, so one
   column could be 700–2700px wide and the whole page zoomed out on mobile.
   Capping columns at the container width fixes every page at once. */
@media (max-width: 992px) {
  .wp-block-columns > .wp-block-column {
    max-width: 100%;
    min-width: 0;
  }
}

/* Long unbroken strings (URLs, emails) in page copy must wrap, not push the
   page wider than the phone screen (seen on Terms / Privacy). */
#main-content {
  overflow-wrap: break-word;
}

/* Legacy hero/banner buttons have fixed widths (e.g. 324px) — never wider
   than the screen. */
button[class*="hp-banner-btn"] {
  max-width: 100%;
}

/* Safety net: anything inside the page content that is still wider than the
   screen is clipped instead of widening the page (which lets phones zoom
   out). overflow-x:clip (not hidden) so position:sticky keeps working. Real
   overflow is still fixed at source — this only stops a future regression
   from breaking the whole page. */
#main-content {
  overflow-x: clip;
}

/* Block-editor centred images use figure.aligncenter { display: table }, which
   sizes to the image's natural width (e.g. 514px) and ignores the column, so
   blog images pushed the page wider than the phone. Block + auto margins keeps
   them centred without letting the table grow. */
@media (max-width: 992px) {
  .wp-block-image figure.aligncenter,
  .wp-block-image .aligncenter {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .wp-block-image figure.aligncenter img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Linked block images: the <a> is inline-block and sized to the image, so the
   image's max-width:100% resolved against the link, not the column — a 3000px
   image stayed 3000px. Cap the link at the column width. */
.wp-block-image a {
  max-width: 100%;
}