@charset "UTF-8";
/* ======================================================================
   catalog/view/stylesheet/ov-store.scss
   ====================================================================== */
/* ------------------------------------------------------------
   CORE (shared design system)
------------------------------------------------------------ */
/* ----------------------------------------
   1) Design tokens + variables
   ---------------------------------------- */
/* ============================================================
   OV DESIGN TOKENS — SCSS PRIMITIVES ONLY
   ------------------------------------------------------------
   - Low-level SCSS variables
   - Used by mixins, utilities, calculations
   - NO CSS custom properties here
   - Must stay in sync (semantically) with _variables.scss
   ============================================================ */
/* ============================================================
   SPACING TOKENS (SCSS)
   ============================================================ */
/* Canonical numeric aliases (legacy-safe) */
/* ============================================================
   TYPOGRAPHY — FONT FAMILIES (SCSS)
   ============================================================ */
/* ============================================================
   TYPOGRAPHY — FONT SIZES (SCSS)
   ------------------------------------------------------------
   Used by mixins & utilities that cannot rely on CSS vars
   ============================================================ */
/* Body text scale */
/* Heading scale */
/* ============================================================
   BORDER & RADII (SCSS)
   ============================================================ */
/* Border primitives */
/* ============================================================
   SHADOWS (SCSS)
   ============================================================ */
/* ============================================================
   TRANSITIONS / MOTION (SCSS)
   ============================================================ */
/* ============================================================
   Z-INDEX SCALE (SCSS)
   ------------------------------------------------------------
   Must stay aligned with CSS vars in _variables.scss
   ============================================================ */
/* ============================================================
   LAYOUT CONSTANTS (SCSS)
   ============================================================ */
/* ============================================================
   FORM / CONTROL CONSTANTS (SCSS)
   ============================================================ */
/* ======================================================================
   OV CORE — TOKENS & VARIABLES (v3.1 · UNIFIED)
   Single source of truth for OV CSS custom properties.
   - Brand & semantic colors
   - Surfaces & navigation
   - Typography scale
   - Spacing, radii, shadows, motion
   - State / status / stock palettes
   - Numeric aliases for vendor/product-form usage
   ====================================================================== */
:root {
  /* ==================================================
     BRAND COLORS (BASE)
     ================================================== */
  --ov-green: #B7C969;
  --ov-green-dark: #9AAD58;
  --ov-green-light: #D8E4A3;
  --ov-green-soft: rgba(183, 201, 105, 0.15);
  --ov-blue: #92D3F5;
  --ov-blue-dark: #4FA9D5;
  --ov-blue-light: #CFE8FB;
  --ov-blue-soft: rgba(146, 211, 245, 0.15);
  --ov-brown: #926E51;
  --ov-brown-dark: #6F513B;
  --ov-black: #332d25;
  --ov-black-light: #4a4034;
  --ov-white: #ffffff;
  --ov-yellow: #f6c84c;
  --ov-red: #e35757;
  --ov-red-dark: #b72e2e;
  --ov-orange: #e6a04f;
  /* ==================================================
     GREYS
     ================================================== */
  --ov-grey-25: #fcfcfc;
  --ov-grey-50: #fafafa;
  --ov-grey-100: #f4f4f4;
  --ov-grey-200: #e6e6e6;
  --ov-grey-300: #d4d4d4;
  --ov-grey-400: #a3a3a3;
  --ov-grey-500: #737373;
  --ov-grey-600: #525252;
  --ov-grey-700: #404040;
  --ov-grey-800: #262626;
  --ov-grey-900: #171717;
  /* ==================================================
     SEMANTIC SURFACES (LIGHT)
     ================================================== */
  --ov-bg-page: #f6f7f5;
  --ov-bg-section: #f9faf8;
  --ov-bg-card: #ffffff;
  --ov-bg-card-hover: #f3f4f1;
  /* Muted / subtle extensions used in vendor pages */
  --ov-bg-muted: #f3f4f6;
  --ov-bg-subtle: #f7f7f9;
  /* Green section background (Explore / brand sections) */
  --ov-bg-green-soft: #f3f7e3;
  /* Generic surface aliases (used by some components) */
  --ov-surface: var(--ov-bg-card);
  --ov-surface-2: #f7f7f7;
  --ov-bg-surface: var(--ov-bg-card);
  --color-surface: var(--ov-bg-card);
  --color-surface-alt: var(--ov-bg-section);
  /* ==================================================
     NAVIGATION SURFACES
     ================================================== */
  --ov-nav-surface: var(--ov-green);
  --ov-nav-dropdown-surface: var(--ov-grey-50);
  /* ==================================================
     TEXT
     ================================================== */
  --ov-text-main: var(--ov-black);
  --ov-text-muted: #6b7280;
  --ov-text-inverse: #ffffff;
  /* Body text scale (OV) */
  --ov-text-xs: 0.75rem;
  --ov-text-sm: 0.875rem;
  --ov-text-md: 1rem;
  --ov-text-lg: 1.125rem;
  --ov-text-xl: 1.25rem;
  /* Legacy typography aliases (kept for mixins & existing SCSS) */
  --text-xs-size: var(--ov-text-xs);
  --text-sm-size: var(--ov-text-sm);
  --text-md-size: var(--ov-text-md);
  --text-lg-size: var(--ov-text-lg);
  --text-xl-size: var(--ov-text-xl);
  /* Additional font-size aliases used in vendor pages */
  --ov-font-size-xs: var(--ov-text-xs);
  --ov-font-size-sm: var(--ov-text-sm);
  --ov-font-xs: var(--ov-text-xs);
  --ov-font-lg: var(--ov-text-lg);
  /* Text “weight” aliases used in product form & statistics */
  --ov-text-400: #9ca3af;
  --ov-text-600: #4b5563;
  /* Heading scale */
  --ov-title-xs: 0.95rem;
  --ov-title-sm: 1.1rem;
  --ov-title-md: 1.25rem;
  --ov-title-lg: 1.5rem;
  --ov-title-xl: 1.875rem;
  --ov-title-xxl: 2.25rem;
  --title-xs-size: var(--ov-title-xs);
  --title-sm-size: var(--ov-title-sm);
  --title-md-size: var(--ov-title-md);
  --title-lg-size: var(--ov-title-lg);
  --title-xl-size: var(--ov-title-xl);
  --title-xxl-size: var(--ov-title-xxl);
  /* Focus ring */
  --ov-focus-ring: rgba(183, 201, 105, 0.7);
  /* ==================================================
     BORDERS & SHADOWS
     ================================================== */
  --ov-border-subtle: #e5e7eb;
  --ov-border-default: #d1d5db;
  --ov-border-light: #e2e5e9;
  --ov-border-strong: #9ca3af;
  /* Canonical border tokens used by components */
  --ov-border-color: var(--ov-border-default);
  --ov-border-color-soft: var(--ov-border-subtle);
  --ov-border: var(--ov-border-default);
  --ov-color-border-light: var(--ov-border-light);
  /* Card-specific */
  --ov-card-border-green: rgba(183, 201, 105, 0.55);
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .11);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, .18);
  --ov-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.22);
  /* ==================================================
     ACTION COLORS
     ================================================== */
  --ov-action-primary: var(--ov-green);
  --ov-action-primary-hover: #9aad58;
  --ov-action-secondary: var(--ov-blue);
  --ov-action-danger: var(--ov-red);
  /* ==================================================
     PRICE COLORS
     ================================================== */
  --ov-color-price: #6A8F2B;
  --ov-color-price-old: #9CA3AF;
  --ov-color-price-tax: #6B7280;
  /* ==================================================
     LINK COLORS
     ================================================== */
  --ov-color-link: #332d25;
  --ov-color-link-hover: #926E51;
  /* ==================================================
     STATE COLORS / STATUS / STOCK
     ================================================== */
  --ov-state-success-bg: #dff7ea;
  --ov-state-success-text: #1f7a4f;
  --ov-state-warning-bg: #fdf3d6;
  --ov-state-warning-text: #8a6a1f;
  --ov-state-danger-bg: #fbe9e9;
  --ov-state-danger-text: #8f1d1d;
  /* Generic palettes used by vendor stock / filters */
  --color-success-soft: var(--ov-state-success-bg);
  --color-success-strong: var(--ov-state-success-text);
  --color-warning-soft: rgba(246, 200, 76, 0.15);
  --color-warning-strong: #8a6a1f;
  --color-danger-soft: rgba(227, 87, 87, 0.18);
  --color-danger-strong: #8f1d1d;
  --ov-color-danger-strong: var(--color-danger-strong);
  /* Status defaults (overridable per-badge) */
  --ov-status-bg: var(--ov-green-soft);
  --ov-status-text: var(--ov-green-dark);
  /* ==================================================
     NUMERIC COLOR ALIASES (Product form, orders, etc.)
     ================================================== */
  /* Blue numeric scale */
  --ov-blue-05: rgba(146, 211, 245, 0.08);
  --ov-blue-10: rgba(146, 211, 245, 0.16);
  --ov-blue-90: #1f4b63;
  /* darker text on light blue */
  --ov-blue-100: var(--ov-blue-light);
  --ov-blue-700: var(--ov-blue-dark);
  --ov-blue-hover: var(--ov-blue-dark);
  /* Green numeric scale */
  --ov-green-100: #e5f0c6;
  --ov-green-500: #5e7f1c;
  --ov-green-600: #4d6917;
  --ov-green-900: #27340b;
  /* Red numeric scale */
  --ov-red-500: var(--ov-red);
  --ov-red-600: #c23f3f;
  /* Yellow numeric scale */
  --ov-yellow-500: var(--ov-yellow);
  /* ==================================================
     TYPOGRAPHY FAMILIES
     ================================================== */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Poppins", sans-serif;
  /* ==================================================
     RADII
     ================================================== */
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  /* Legacy aliases used in a few vendor files */
  --radius-full: var(--radius-pill);
  --ov-radius-md: var(--radius-md);
  --ov-radius-xl: var(--radius-xl);
  /* ==================================================
   SPACING (CANONICAL SCALE)
   ================================================== */
  --ov-space-xxs: 0.125rem;
  --ov-space-2xs: 0.15rem;
  --ov-space-xs: 0.25rem;
  --ov-space-sm: 0.5rem;
  --ov-space-md: 1rem;
  --ov-space-lg: 1.5rem;
  --ov-space-xl: 2rem;
  --ov-space-2xl: 3rem;
  --ov-space-xxl: 4rem;
  --ov-space-3xl: 6rem;
  --ov-space-4xl: 8rem;
  /* Numeric aliases used in older vendor/product form SCSS */
  --ov-space-1: var(--ov-space-xs);
  --ov-space-2: var(--ov-space-sm);
  --ov-space-3: var(--ov-space-md);
  --ov-space-4: var(--ov-space-lg);
  --ov-space-5: var(--ov-space-xl);
  --ov-space-6: var(--ov-space-2xl);
  --ov-space-8: var(--ov-space-xxl);
  /* Vertical spacing for major sections */
  --section-y: var(--ov-space-2xl);
  /* Layout gutters */
  --ov-layout-gutter: var(--ov-space-xl);
  --ov-header-offset: 64px;
  /* ==================================================
     TRANSITIONS / MOTION
     ================================================== */
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.2s ease-out;
  /* OV-prefixed aliases (used in some components) */
  --ov-transition-fast: var(--transition-fast);
  --ov-transition-normal: var(--transition-normal);
  /* ============================================================
     Z-INDEX SCALE — ORIGEN VALENCIA
     ============================================================ */
  --z-base: 1;
  --z-header: 50;
  --z-sticky: 60;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-tooltip: 300;
}
/* ============================================================
   DENSITY TOKENS (COMPACT MODE)
   ============================================================ */
:root[data-density="compact"] {
  --ov-space-xs: 0.2rem;
  --ov-space-sm: 0.4rem;
  --ov-space-md: 0.85rem;
  --ov-space-lg: 1.25rem;
}
/* ============================================================
   MOTION TOKENS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion="reduced"] * {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}
/* ======================================================
   DARK THEME
   ====================================================== */
[data-theme="dark"] {
  --ov-bg-page: #1e1f1c;
  --ov-bg-section: #232420;
  --ov-bg-card: #2a2b27;
  --ov-bg-card-hover: #32332e;
  --ov-text-main: #f4f4f2;
  --ov-text-muted: #a1a1aa;
  --ov-text-inverse: #1a1a1a;
  --ov-border-subtle: #3a3a3a;
  --ov-border-default: #4a4a4a;
  --ov-border-light: #575757;
  --ov-border-color: var(--ov-border-default);
  --ov-border-color-soft: var(--ov-border-subtle);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .7);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .8);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .85);
  --ov-shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.9);
  --ov-state-success-bg: rgba(46, 184, 114, .15);
  --ov-state-warning-bg: rgba(246, 200, 76, .15);
  --ov-state-danger-bg: rgba(227, 87, 87, .18);
  /* Navigation */
  --ov-nav-dropdown-surface: var(--ov-bg-card);
}
/* ----------------------------------------
   2) Mixins + functions (require tokens/vars)
   ---------------------------------------- */
/* ======================================================================
   OV CORE — MIXINS (v2.0 CLEAN MASTER)
   Single source of truth for layout, typography, inputs, buttons, cards.
   ====================================================================== */
/*
  IMPORTANT:
  - ov-grid() is the ONLY grid-authority mixin.
  - Component & page SCSS should prefer ov-grid()
  - ov-grid utility classes are intentionally minimal.
*/
/* ======================================================================
   MEDIA QUERIES
   ====================================================================== */
/* Breakpoint map for generic respond() mixin (min-width semantics) */
/**
 * Generic responsive mixin
 * Usage:
 *   @include respond(sm) { ... }
 *   @include respond(md) { ... }
 */
/* ============================================================================
   respond-max() — mobile-down media query helper
   ============================================================================ */
/* Legacy / explicit media helpers (kept for compatibility) */
/* ======================================================================
   BASIC TYPOGRAPHY
   ====================================================================== */
/* --------------------------------------------------
   BODY TEXT — semantic alias & size variants (legacy compatibility)
   -------------------------------------------------- */
/* ======================================================================
   INPUT RESET + FORM CONTROLS
   ====================================================================== */
/* ======================================================================
   LABELS
   ====================================================================== */
/* ======================================================================
   CARD SYSTEM
   ====================================================================== */
/* --------------------------------------------------
   ELEVATED CARD (Used in Cookie page / Legal pages)
   -------------------------------------------------- */
/* --------------------------------------------------
   CARD SIZE VARIANTS
   -------------------------------------------------- */
/* ======================================================================
   FLEX HELPERS
   ====================================================================== */
/* ======================================================================
   GRID MIXIN — 2 or 3 arguments
   Supports:
     @include ov-grid(3);
     @include ov-grid(auto-fill, 220px);
     @include ov-grid(auto-fill, 220px, var(--ov-space-xl));
   ====================================================================== */
/* ======================================================================
   AUTOCOMPLETE PANEL
   ====================================================================== */
/* ======================================================================
   LINK SYSTEM
   ====================================================================== */
/* ======================================================================
   LAYOUT CONTAINER
   ====================================================================== */
/* ======================================================================
   TEXT SIZE MIXINS
   ====================================================================== */
/* ======================================================================
   HEADING MIXINS — FULL TYPOGRAPHY SCALE
   ====================================================================== */
/* XS / XXS */
/* Base sizes */
/* XXL */
/* HERO */
/* DISPLAY */
/* Compatibility headings (used in pages) */
/* HTML-like aliases */
/* ======================================================================
   BUTTONS — BASE, SIZES, VARIANTS
   ====================================================================== */
/* Base */
/* Size variants */
/* Brand button */
/* Danger */
/* Icon */
/* Generic color variant */
/* Outline */
/* ======================================================================
   FORM LAYOUT MIXINS
   ====================================================================== */
/* ----------------------------------------
   3) Reset (requires variables)
   ---------------------------------------- */
/* ======================================================================
   OV RESET — Modern CSS baseline
   ====================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--ov-bg-page);
  color: var(--ov-text-main);
  line-height: 1.55;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Links are neutral by default — components decide interaction */
a {
  color: inherit;
  text-decoration: none;
}
/* Inputs */
input, textarea, select {
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  padding: 0.5rem 0.75rem;
}
/*  Enforce HTML hidden semantics (required) */
[hidden] {
  display: none !important;
}
/* ----------------------------------------
   4) Layout + Grid (requires mixins + vars)
   ---------------------------------------- */
/* ==========================================================================
   ORIGEN VALENCIA — LAYOUT SYSTEM (FINAL v4.0)
   Core layout primitives shared across ALL surfaces.
   Structural logic only — zero visual chrome.
   ========================================================================== */
/* ------------------------------------------------------------
   SHELL CONTAINER
   Used by header, nav, footer, global chrome.
------------------------------------------------------------ */
.ov-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-container {
    padding-inline: var(--ov-space-md);
  }
}
/* ------------------------------------------------------------
   CANONICAL CONTENT CONTAINER  ✅ NEW
   SINGLE horizontal centering authority for page content
------------------------------------------------------------ */
.ov-content {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-content {
    padding-inline: var(--ov-space-lg);
  }
}
/* ------------------------------------------------------------
   MAIN CONTENT RHYTHM (SHELL ONLY)
------------------------------------------------------------ */
.ov-main {
  padding-top: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-main {
    padding-top: var(--ov-space-lg);
  }
}
/* ------------------------------------------------------------
   GENERIC SECTION WRAPPER
------------------------------------------------------------ */
.ov-section {
  width: 100%;
  padding: var(--ov-space-md);
  margin: var(--ov-space-lg) 0;
}
@media (max-width: 576px) {
  .ov-section {
    padding: var(--ov-space-xl) var(--ov-space-lg);
  }
}
/* ------------------------------------------------------------
   FULL-WIDTH BREAKOUT UTILITIES
------------------------------------------------------------ */
.ov-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ov-fullwidth-bg {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
/* ============================================================
   OV Grid System — Minimal Utilities Only
   Canonical grid logic lives in @mixin ov-grid
   ============================================================ */
.ov-grid {
  display: grid;
  gap: 1rem;
}
/* Specialized grids */
.ov-grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  justify-content: start;
}
/* Alignment helpers */
.ov-grid--align-center {
  align-items: center;
}
.ov-grid--space-between {
  justify-content: space-between;
}
/* ----------------------------------------
   5) Sections (structural content spacing)
   ---------------------------------------- */
/* ==========================================================================
   ORIGEN VALENCIA — SECTION STRUCTURE (CORE · FINAL)
   --------------------------------------------------------------------------
   RESPONSIBILITY:
   - Structural vertical rhythm only
   - Neutral containers usable across all surfaces
   - NO colors, NO typography, NO brand styling

   VISUAL STYLING BELONGS TO:
   - ov-store/_components/*
   - ov-store/_layout/*
   ========================================================================== */
/* ------------------------------------------------------------
   Base section wrapper
------------------------------------------------------------- */
.ov-section {
  width: 100%;
  margin-block: var(--ov-space-xl);
}
/* ------------------------------------------------------------
   Section actions (CTA alignment only)
------------------------------------------------------------- */
.ov-section__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ov-space-md);
}
/* ----------------------------------------
   6) Typography (requires variables + mixins)
   ---------------------------------------- */
/* ======================================================================
   OV TYPOGRAPHY
   ====================================================================== */
/*
  CORE TYPOGRAPHY RULES:
  - Defines HTML defaults & utility classes
  - Components may override visually
  - Pages MUST NOT style typography directly
*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  margin-bottom: var(--ov-space-sm);
}
p {
  font-family: var(--font-body);
  color: var(--ov-text-main);
  margin-bottom: var(--ov-space-md);
}
small {
  font-size: 0.85rem;
  color: var(--ov-text-muted);
}
/* Page & section titles used across information, explore, vendor pages */
.ov-page-title {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: var(--ov-space-md);
}
.ov-section-title {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: 1.6rem;
  margin-bottom: var(--ov-space-sm);
}
/* Utility heading classes mirroring HTML tags */
.ov-h1 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--title-xl-size);
}
.ov-h2 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--title-lg-size);
}
.ov-h3 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--title-md-size);
}
.ov-h4 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--title-sm-size);
}
.ov-h5 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--title-xs-size);
}
.ov-h6 {
  font-family: var(--font-heading);
  color: var(--ov-text-main);
  font-size: var(--text-sm-size);
}
/* Body text helpers */
.ov-body {
  font-family: var(--font-body);
  color: var(--ov-text-main);
  font-size: var(--text-md-size);
}
.ov-body-sm {
  font-family: var(--font-body);
  color: var(--ov-text-main);
  font-size: var(--text-sm-size);
}
.ov-body-lg {
  font-family: var(--font-body);
  color: var(--ov-text-main);
  font-size: var(--text-lg-size);
}
/* Alignment helpers */
.ov-text-center {
  text-align: center;
}
.ov-text-left {
  text-align: left;
}
.ov-text-right {
  text-align: right;
}
/* ======================================================================
   LEGACY TITLE UTILITY CLASSES (Restored for @extend compatibility)
   ====================================================================== */
.ov-title-xs {
  font-family: var(--font-heading);
  font-size: calc(var(--text-md-size) * 1.05);
  font-weight: 600;
  color: var(--ov-text-main);
}
.ov-title-sm {
  font-family: var(--font-heading);
  font-size: var(--title-sm-size);
  font-weight: 600;
  color: var(--ov-text-main);
}
.ov-title-md {
  font-family: var(--font-heading);
  font-size: var(--title-md-size);
  font-weight: 600;
  color: var(--ov-text-main);
}
.ov-title-lg {
  font-family: var(--font-heading);
  font-size: var(--title-lg-size);
  font-weight: 600;
  color: var(--ov-text-main);
}
.ov-title-xl {
  font-family: var(--font-heading);
  font-size: var(--title-xl-size);
  font-weight: 700;
  color: var(--ov-text-main);
}
.ov-title-xxl {
  font-family: var(--font-heading);
  font-size: var(--title-xxl-size);
  font-weight: 700;
  line-height: 1.1;
}
@media (min-width: 992px) {
  .ov-title-xxl {
    font-size: calc(var(--title-xxl-size) * 1.15);
  }
}
a {
  color: var(--ov-color-link);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
a:hover, a:focus-visible {
  color: var(--ov-color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.1em;
}
/* ----------------------------------------
   7) Utilities (depends on all prior)
   ---------------------------------------- */
/* ============================================================================
   SPACING UTILITIES
   ============================================================================ */
/* ------------------------------------------------------------
   Margin & Padding — Token scale
   ------------------------------------------------------------ */
/* --- Margin --- */
.ov-m-xs {
  margin: 0.25rem;
}
.ov-mt-xs {
  margin-top: 0.25rem;
}
.ov-mr-xs {
  margin-right: 0.25rem;
}
.ov-mb-xs {
  margin-bottom: 0.25rem;
}
.ov-ml-xs {
  margin-left: 0.25rem;
}
.ov-mx-xs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.ov-my-xs {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
/* --- Padding --- */
.ov-p-xs {
  padding: 0.25rem;
}
.ov-pt-xs {
  padding-top: 0.25rem;
}
.ov-pr-xs {
  padding-right: 0.25rem;
}
.ov-pb-xs {
  padding-bottom: 0.25rem;
}
.ov-pl-xs {
  padding-left: 0.25rem;
}
.ov-px-xs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.ov-py-xs {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
/* --- Margin --- */
.ov-m-sm {
  margin: 0.5rem;
}
.ov-mt-sm {
  margin-top: 0.5rem;
}
.ov-mr-sm {
  margin-right: 0.5rem;
}
.ov-mb-sm {
  margin-bottom: 0.5rem;
}
.ov-ml-sm {
  margin-left: 0.5rem;
}
.ov-mx-sm {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.ov-my-sm {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
/* --- Padding --- */
.ov-p-sm {
  padding: 0.5rem;
}
.ov-pt-sm {
  padding-top: 0.5rem;
}
.ov-pr-sm {
  padding-right: 0.5rem;
}
.ov-pb-sm {
  padding-bottom: 0.5rem;
}
.ov-pl-sm {
  padding-left: 0.5rem;
}
.ov-px-sm {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.ov-py-sm {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
/* --- Margin --- */
.ov-m-md {
  margin: 1rem;
}
.ov-mt-md {
  margin-top: 1rem;
}
.ov-mr-md {
  margin-right: 1rem;
}
.ov-mb-md {
  margin-bottom: 1rem;
}
.ov-ml-md {
  margin-left: 1rem;
}
.ov-mx-md {
  margin-left: 1rem;
  margin-right: 1rem;
}
.ov-my-md {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
/* --- Padding --- */
.ov-p-md {
  padding: 1rem;
}
.ov-pt-md {
  padding-top: 1rem;
}
.ov-pr-md {
  padding-right: 1rem;
}
.ov-pb-md {
  padding-bottom: 1rem;
}
.ov-pl-md {
  padding-left: 1rem;
}
.ov-px-md {
  padding-left: 1rem;
  padding-right: 1rem;
}
.ov-py-md {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/* --- Margin --- */
.ov-m-lg {
  margin: 1.5rem;
}
.ov-mt-lg {
  margin-top: 1.5rem;
}
.ov-mr-lg {
  margin-right: 1.5rem;
}
.ov-mb-lg {
  margin-bottom: 1.5rem;
}
.ov-ml-lg {
  margin-left: 1.5rem;
}
.ov-mx-lg {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.ov-my-lg {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
/* --- Padding --- */
.ov-p-lg {
  padding: 1.5rem;
}
.ov-pt-lg {
  padding-top: 1.5rem;
}
.ov-pr-lg {
  padding-right: 1.5rem;
}
.ov-pb-lg {
  padding-bottom: 1.5rem;
}
.ov-pl-lg {
  padding-left: 1.5rem;
}
.ov-px-lg {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.ov-py-lg {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/* --- Margin --- */
.ov-m-xl {
  margin: 2rem;
}
.ov-mt-xl {
  margin-top: 2rem;
}
.ov-mr-xl {
  margin-right: 2rem;
}
.ov-mb-xl {
  margin-bottom: 2rem;
}
.ov-ml-xl {
  margin-left: 2rem;
}
.ov-mx-xl {
  margin-left: 2rem;
  margin-right: 2rem;
}
.ov-my-xl {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
/* --- Padding --- */
.ov-p-xl {
  padding: 2rem;
}
.ov-pt-xl {
  padding-top: 2rem;
}
.ov-pr-xl {
  padding-right: 2rem;
}
.ov-pb-xl {
  padding-bottom: 2rem;
}
.ov-pl-xl {
  padding-left: 2rem;
}
.ov-px-xl {
  padding-left: 2rem;
  padding-right: 2rem;
}
.ov-py-xl {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* --- Margin --- */
.ov-m-xxl {
  margin: 4rem;
}
.ov-mt-xxl {
  margin-top: 4rem;
}
.ov-mr-xxl {
  margin-right: 4rem;
}
.ov-mb-xxl {
  margin-bottom: 4rem;
}
.ov-ml-xxl {
  margin-left: 4rem;
}
.ov-mx-xxl {
  margin-left: 4rem;
  margin-right: 4rem;
}
.ov-my-xxl {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
/* --- Padding --- */
.ov-p-xxl {
  padding: 4rem;
}
.ov-pt-xxl {
  padding-top: 4rem;
}
.ov-pr-xxl {
  padding-right: 4rem;
}
.ov-pb-xxl {
  padding-bottom: 4rem;
}
.ov-pl-xxl {
  padding-left: 4rem;
}
.ov-px-xxl {
  padding-left: 4rem;
  padding-right: 4rem;
}
.ov-py-xxl {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* ------------------------------------------------------------
   Zero spacing utilities (explicit overrides)
   ------------------------------------------------------------ */
.ov-m-0 {
  margin: 0;
}
.ov-mt-0 {
  margin-top: 0;
}
.ov-mr-0 {
  margin-right: 0;
}
.ov-mb-0 {
  margin-bottom: 0;
}
.ov-ml-0 {
  margin-left: 0;
}
.ov-mx-0 {
  margin-left: 0;
  margin-right: 0;
}
.ov-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.ov-p-0 {
  padding: 0;
}
.ov-pt-0 {
  padding-top: 0;
}
.ov-pr-0 {
  padding-right: 0;
}
.ov-pb-0 {
  padding-bottom: 0;
}
.ov-pl-0 {
  padding-left: 0;
}
.ov-px-0 {
  padding-left: 0;
  padding-right: 0;
}
.ov-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}
/* ============================================================================
   GAP UTILITIES
   Applies to flex & grid containers
   ============================================================================ */
.ov-gap-2xs {
  gap: var(--ov-space-2xs);
}
.ov-gap-xxs {
  gap: var(--ov-space-xxs);
}
.ov-gap-xs {
  gap: var(--ov-space-xs);
}
.ov-gap-sm {
  gap: var(--ov-space-sm);
}
.ov-gap-md {
  gap: var(--ov-space-md);
}
.ov-gap-lg {
  gap: var(--ov-space-lg);
}
.ov-gap-xl {
  gap: var(--ov-space-xl);
}
.ov-gap-2xl {
  gap: var(--ov-space-2xl);
}
.ov-gap-xxl {
  gap: var(--ov-space-xxl);
}
/* ============================================================================
   TEXT & ALIGNMENT UTILITIES
   ============================================================================ */
.ov-text-center {
  text-align: center;
}
.ov-text-left {
  text-align: left;
}
.ov-text-right {
  text-align: right;
}
.ov-items-center {
  align-items: center;
}
.ov-items-end {
  align-items: end;
}
.ov-align-start {
  align-items: flex-start;
}
.ov-align-end {
  align-items: flex-end;
}
.ov-justify-start {
  justify-content: start;
}
.ov-justify-end {
  justify-content: end;
}
.ov-justify-between {
  justify-content: space-between;
}
.ov-justify-around {
  justify-content: space-around;
}
/* ============================================================================
   FLEX UTILITIES
   ============================================================================ */
.ov-flex {
  display: flex;
}
.ov-flex--center {
  justify-content: center;
  align-items: center;
}
.ov-flex--between {
  justify-content: space-between;
}
.ov-flex--column {
  flex-direction: column;
}
/* ============================================================================
   ACCESSIBILITY UTILITIES
   ============================================================================ */
.ov-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* ============================================================================
   TEXT UTILITIES
   ============================================================================ */
.ov-text-muted {
  color: var(--ov-text-muted);
}
/* ============================================================================
   FONT AWESOME v6 — OV FONT MODE NORMALIZATION (AUTHORITATIVE)
   ============================================================================ */
.fa::before, .fa::after {
  -webkit-text-fill-color: currentColor;
}
/* ------------------------------------------------------------
   SHARED COMPONENTS (safe for store + vendor)
------------------------------------------------------------ */
/* ==========================================================================
   OV COMPONENT — ALERTS
   System / page-level notifications only
   ========================================================================== */
.ov-alert-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
  /* Center horizontally */
  align-items: center;
  padding: var(--ov-space-md) 0;
}
.ov-alert-container:empty {
  display: none;
}
.ov-alert {
  width: 100%;
  max-width: var(--ov-container-max-width, 1200px);
  padding: var(--ov-space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border-subtle);
  background: var(--ov-bg-card);
  color: var(--ov-text-main);
  box-shadow: var(--shadow-xs);
}
.ov-alert:focus {
  outline: none;
}
/* State variants */
.ov-alert--success {
  background: var(--ov-state-success-bg);
  color: var(--ov-state-success-text);
}
.ov-alert--warning {
  background: var(--ov-state-warning-bg);
  color: var(--ov-state-warning-text);
}
.ov-alert--danger, .ov-alert--error {
  background: var(--ov-state-danger-bg);
  color: var(--ov-state-danger-text);
}
.ov-alert + .ov-alert {
  margin-top: var(--ov-space-sm);
}
/* OV autocomplete menu */
.ov-autocomplete.ov-menu {
  padding: var(--ov-space-sm);
  border-radius: var(--radius-md);
}
.ov-menu-item {
  padding: var(--ov-space-xs) var(--ov-space-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ov-menu-item:hover, .ov-menu-item--active {
  background: var(--ov-blue-soft);
}
.ov-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--ov-bg-section);
  border: 1px solid var(--ov-border-subtle);
  color: var(--ov-text-main);
}
.ov-badge--green {
  background: var(--ov-action-primary);
  color: var(--ov-black);
}
.ov-badge--blue {
  background: var(--ov-action-secondary);
  color: var(--ov-black);
}
.ov-badge--danger {
  background: var(--ov-action-danger);
  color: var(--ov-text-inverse);
}
/* ==========================================================================
   OV COMPONENT — BUTTONS (v3.4 · FINAL · LOCKED)
   Single authoritative button system for Origen Valencia
   ========================================================================== */
/* ==========================================================================
   BASE BUTTON
   ========================================================================== */
.ov-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-xs);
  padding: var(--ov-space-xs) var(--ov-space-md);
  min-height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--ov-black);
  color: var(--ov-white);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
/* No underline — ever */
.ov-btn:hover, .ov-btn:focus, .ov-btn:focus-visible, .ov-btn:active {
  text-decoration: none !important;
}
/* Hover / focus */
.ov-btn:hover, .ov-btn:focus-visible {
  box-shadow: var(--shadow-sm);
}
.ov-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ov-focus-ring), var(--shadow-sm);
}
/* Motion handling */
html[data-motion="auto"] .ov-btn:hover {
  transform: translateY(-1px);
}
html[data-motion="reduced"] .ov-btn:hover {
  transform: none;
}
/* ==========================================================================
   DISABLED / PENDING (AUTHORITATIVE)
   ========================================================================== */
.ov-btn:disabled, .ov-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.ov-btn.is-pending {
  cursor: wait;
  pointer-events: none;
  opacity: 0.65;
}
/* ==========================================================================
   ASYNC STATE SYSTEM
   ========================================================================== */
.ov-btn-label {
  display: inline-flex;
}
.ov-btn-spinner, .ov-btn-check {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.ov-btn-spinner::after {
  content: "";
  width: 1.25em;
  height: 1.25em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ov-spin 0.75s linear infinite;
}
@keyframes ov-spin {
  to {
    transform: rotate(360deg);
  }
}
.ov-btn[data-state="loading"] .ov-btn-label {
  opacity: 0;
}
.ov-btn[data-state="loading"] .ov-btn-spinner {
  opacity: 1;
}
.ov-btn[data-state="success"] .ov-btn-label {
  opacity: 0;
}
.ov-btn[data-state="success"] .ov-btn-check {
  opacity: 1;
}
/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */
.ov-btn--xs {
  padding: var(--ov-space-2xs) var(--ov-space-sm);
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
}
.ov-btn--sm {
  padding: var(--ov-space-2xs) var(--ov-space-sm);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}
.ov-btn--md {
  padding: var(--ov-space-sm) var(--ov-space-md);
  font-size: 1rem;
}
.ov-btn--lg {
  padding: var(--ov-space-sm) var(--ov-space-lg);
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}
/* ==========================================================================
   WIDTH / LAYOUT
   ========================================================================== */
.ov-btn--block, .ov-btn--full, .ov-w-full {
  width: 100%;
}
/* ==========================================================================
   PRIMARY / BRAND (GREEN)
   ========================================================================== */
.ov-btn--primary, .ov-btn--brand, .ov-btn-primary, .ov-btn-green {
  background: var(--ov-green);
  border-color: var(--ov-green);
  color: var(--ov-black);
}
.ov-btn--primary:hover, .ov-btn--primary:focus-visible, .ov-btn--brand:hover, .ov-btn--brand:focus-visible {
  background: var(--ov-green-dark);
  border-color: var(--ov-green-dark);
}
/* ==========================================================================
   SECONDARY (BLUE)
   ========================================================================== */
.ov-btn--secondary, .ov-btn--blue {
  background: var(--ov-blue);
  border-color: var(--ov-blue);
  color: var(--ov-black);
}
.ov-btn--secondary:hover, .ov-btn--secondary:focus-visible, .ov-btn--blue:hover, .ov-btn--blue:focus-visible {
  background: var(--ov-blue-dark);
  border-color: var(--ov-blue-dark);
}
/* ==========================================================================
   INFO
   ========================================================================== */
.ov-btn--info {
  background: var(--ov-blue-light);
  border-color: var(--ov-blue);
  color: var(--ov-black);
}
.ov-btn--info:hover, .ov-btn--info:focus-visible {
  background: var(--ov-blue);
}
/* ==========================================================================
   SUCCESS
   ========================================================================== */
.ov-btn--success {
  background: var(--ov-state-success-bg);
  border-color: var(--ov-green);
  color: var(--ov-state-success-text);
}
.ov-btn--success:hover, .ov-btn--success:focus-visible {
  background: var(--ov-green-light);
}
/* ==========================================================================
   WARNING
   ========================================================================== */
.ov-btn--warning {
  background: var(--ov-yellow);
  border-color: var(--ov-yellow);
  color: var(--ov-black);
}
.ov-btn--warning:hover, .ov-btn--warning:focus-visible {
  background: #e5b63f;
}
/* ==========================================================================
   DANGER
   ========================================================================== */
.ov-btn--danger {
  background: var(--ov-red);
  border-color: var(--ov-red);
  color: var(--ov-white);
}
.ov-btn--danger:hover, .ov-btn--danger:focus-visible {
  background: var(--ov-red-dark);
  border-color: var(--ov-red-dark);
}
/* ==========================================================================
   LIGHT
   ========================================================================== */
.ov-btn--light {
  background: var(--ov-white);
  border: 1.5px solid var(--ov-card-border-green);
  color: var(--ov-black);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.ov-btn--light:hover, .ov-btn--light:focus-visible {
  background: var(--ov-green-light);
  border-color: var(--ov-green);
}
/* ==========================================================================
   MUTED
   ========================================================================== */
.ov-btn--muted {
  background: var(--ov-grey-100);
  border-color: var(--ov-grey-300);
  color: var(--ov-grey-700);
}
.ov-btn--muted:hover {
  background: var(--ov-grey-200);
}
/* ==========================================================================
   OUTLINE
   ========================================================================== */
.ov-btn--outline, .ov-btn--primary-outline, .ov-btn-outline-primary {
  background: transparent;
  border-color: var(--ov-green);
  color: var(--ov-green-600);
}
.ov-btn--outline:hover, .ov-btn--primary-outline:hover {
  background: var(--ov-green-soft);
}
.ov-btn-outline-secondary {
  background: transparent;
  border-color: var(--ov-blue);
  color: var(--ov-blue-700);
}
/* ==========================================================================
   GHOST
   ========================================================================== */
.ov-btn--ghost {
  background: transparent;
  border-color: var(--ov-border-color-soft);
  color: var(--ov-black);
}
.ov-btn--ghost:hover, .ov-btn--ghost:focus-visible {
  background: var(--ov-grey-100);
}
/* ==========================================================================
   ICON BUTTON
   ========================================================================== */
.ov-btn--icon {
  padding: var(--ov-space-xs);
  min-width: 32px;
  min-height: 32px;
  line-height: 1;
}
/* ==========================================================================
   LINK BUTTON
   ========================================================================== */
.ov-btn--link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ov-color-link);
  font-weight: 600;
  box-shadow: none;
}
.ov-btn--link:hover, .ov-btn--link:focus-visible {
  color: var(--ov-color-link-hover);
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}
.ov-btn.is-loading {
  position: relative;
  pointer-events: none;
}
.ov-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ov-spin 0.8s linear infinite;
}
/* ============================================================
   OV COMPONENT — CARD
   ============================================================ */
.ov-card {
  background: var(--ov-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--ov-space-lg);
  border: 1px solid var(--ov-border-subtle);
  box-shadow: var(--shadow-xs);
  color: var(--ov-text-main);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.ov-card:hover {
  background: var(--ov-bg-card-hover);
  box-shadow: var(--shadow-sm);
}
/* Muted surface (used heavily in vendor panel) */
.ov-card--muted {
  background: var(--ov-bg-section);
}
/* Compact density for small widgets only (NOT full forms) */
.ov-card--compact {
  padding: var(--ov-space-md);
  border-radius: var(--radius-md);
}
/* Section density: default for forms / settings / long content */
.ov-card--section {
  padding: var(--ov-space-md) var(--ov-space-xl);
}
@media (max-width: 768px) {
  .ov-card--section {
    padding-inline: var(--ov-space-lg);
  }
}
/* Flush variant for embedded tables / lists that manage their own padding */
.ov-card--flush {
  padding-left: 0;
  padding-right: 0;
}
/* ------------------------------------------------------------
   Card header / body slots
   ------------------------------------------------------------ */
.ov-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ov-space-md);
  margin-bottom: var(--ov-space-md);
}
.ov-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg-size, 1.1rem);
}
/* Generic body stack for card contents */
.ov-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
/* ------------------------------------------------------------
   Metric cards (finance / statistics)
   ------------------------------------------------------------ */
.ov-card--metric {
  padding: var(--ov-space-md) var(--ov-space-lg);
}
/* Soft highlight for primary metric cards */
.ov-card--highlight {
  border-color: var(--ov-green-soft);
  box-shadow: var(--shadow-sm);
}
/* ==========================================================================
   OV Vendor — Table Density Helpers (Minimal Inline Flush)
   Used when a card embeds a horizontally-scrollable table.
   ========================================================================== */
.ov-card--table > .ov-card__body {
  padding-left: 0;
  padding-right: 0;
}
.ov-card--table .ov-table-wrapper {
  padding-inline: var(--ov-space-sm);
}
.ov-card--compact .ov-card__body {
  padding: 0.75rem 1rem;
}
.ov-card[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.ov-card[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}
/* ## Confirm modal */
.ov-modal-open {
  overflow: hidden;
}
.ov-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ov-space-xl);
  /* Neutral overlay (industry standard). */
  background: rgba(0, 0, 0, 0.45);
}
.ov-confirm {
  width: min(520px, 100%);
  border-radius: var(--ov-radius-2xl);
  background: var(--ov-surface);
  color: var(--ov-text);
  box-shadow: var(--ov-shadow-lg);
  outline: none;
}
.ov-confirm__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ov-space-md);
  align-items: start;
  padding: var(--ov-space-xl) var(--ov-space-xl) var(--ov-space-md);
}
.ov-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ov-radius-xl);
  background: var(--ov-surface-2);
  color: var(--ov-text);
}
.ov-confirm--danger .ov-confirm__icon {
  background: var(--ov-surface-2);
}
.ov-confirm__title {
  margin: 0;
  font-size: var(--ov-text-lg);
  line-height: 1.2;
}
.ov-confirm__body {
  padding: 0 var(--ov-space-xl) var(--ov-space-lg);
}
.ov-confirm__message {
  margin: 0;
  color: var(--ov-text-muted);
  font-size: var(--ov-text-md);
  line-height: 1.5;
}
.ov-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ov-space-sm);
  padding: var(--ov-space-lg) var(--ov-space-xl) var(--ov-space-xl);
  border-top: 1px solid var(--ov-border);
}
/* ==========================================================================
   OV Vendor Drawer (general-purpose surface)
   ========================================================================= */
.ov-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 90vw);
  height: 100vh;
  background: var(--ov-nav-dropdown-surface);
  box-shadow: var(--ov-shadow-xl);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  padding: var(--ov-space-lg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-drawer--open {
  transform: translateX(0);
}
/* Drawer header */
.ov-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ov-space-sm);
}
.ov-drawer__header .ov-title-md {
  line-height: 1.2;
}
/* Drawer close button */
.ov-drawer__close {
  cursor: pointer;
  font-size: var(--ov-text-lg);
  opacity: 0.75;
}
.ov-drawer__close:hover {
  opacity: 1;
}
/* Drawer content blocks */
.ov-drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-drawer__section strong {
  font-weight: 600;
}
/* Ratings list */
.ov-drawer__ratings {
  border-top: 1px solid var(--ov-border-subtle);
  padding-top: var(--ov-space-sm);
}
.ov-drawer__ratings ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ov-text-sm);
}
.ov-drawer__ratings ul li {
  padding: var(--ov-space-xxs) 0;
}
/* Overlay */
.ov-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.ov-drawer-overlay--open {
  opacity: 1;
  visibility: visible;
}
/* ============================================================
   OV COMPONENT — EMPTY STATE (Universal)
   ============================================================ */
.ov-empty {
  width: 100%;
  padding: var(--ov-space-xl) var(--ov-space-md);
  text-align: center;
  color: var(--ov-grey-600);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-space-md);
}
.ov-empty__icon {
  font-size: 2rem;
  color: var(--ov-grey-500);
}
.ov-empty__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ov-grey-700);
}
.ov-empty__hint {
  font-size: var(--text-sm-size);
  color: var(--ov-grey-500);
}
.ov-empty__actions {
  display: flex;
  gap: var(--ov-space-sm);
  justify-content: center;
}
/* ==========================================================================
   OV COMPONENT — FORMS
   Standardized input fields, labels, form groups
   ========================================================================== */
/* ==========================================================================
   FORM GROUP WRAPPER
   ========================================================================== */
.ov-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
  margin-bottom: var(--ov-space-md);
}
/* Compact variant (used in filter bars, tight grids) */
.ov-form-group--compact {
  gap: var(--ov-space-xxs, 0.15rem);
  margin-bottom: 0;
}
/* ==========================================================================
   LABELS
   ========================================================================== */
.ov-form-label, .ov-label {
  font-family: var(--font-body);
  font-size: var(--text-sm-size);
  font-weight: 600;
  color: var(--ov-text-main);
  margin-bottom: var(--ov-space-xxs);
}
/* Screen-reader only */
.ov-label--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;
}
/* ==========================================================================
   TRUE PRIMITIVE INPUT CLASSES (for @extend support)
   These MUST exist because TMD / onboarding extends `.ov-input`
   ========================================================================== */
.ov-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ov-input:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
.ov-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  resize: vertical;
  min-height: 90px;
}
.ov-textarea:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
.ov-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.ov-select:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
/* ==========================================================================
   INPUT ELEMENT NORMALIZATION
   Applies OV design system styling to all HTML inputs
   ========================================================================== */
.ov-form-input, .ov-form-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ov-form-input:focus, .ov-form-textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, textarea:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
textarea, .ov-form-textarea {
  resize: vertical;
  min-height: 90px;
}
/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */
.ov-input--sm, .ov-form-input--sm {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0.35rem 0.55rem;
  font-size: var(--text-sm-size);
}
.ov-input--sm:focus, .ov-form-input--sm:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
.ov-input--lg, .ov-form-input--lg {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border);
  background: var(--ov-white);
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0.75rem 1rem;
  font-size: var(--text-lg-size);
}
.ov-input--lg:focus, .ov-form-input--lg:focus {
  border-color: var(--ov-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(146, 211, 245, 0.25);
}
/* ==========================================================================
   ERROR STATES
   ========================================================================== */
.ov-form-error {
  font-size: var(--text-sm-size);
  color: var(--ov-red);
  margin-top: var(--ov-space-xxs);
}
.ov-input--error, .ov-form-input--error {
  border-color: var(--ov-red);
}
.ov-input--error:focus, .ov-form-input--error:focus {
  border-color: var(--ov-red-dark);
  box-shadow: 0 0 0 2px rgba(200, 50, 50, 0.25);
}
/* ==========================================================================
   FORM FIELD WRAPPER (used in onboarding, checkout, vendor forms)
   ========================================================================== */
.ov-field {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
/* ==========================================================================
   FORM GRID LAYOUTS
   Cross-surface primitive (vendor, storefront, onboarding)
   ========================================================================== */
.ov-form-grid {
  display: grid;
  gap: var(--ov-space-md);
}
/* 2-column layout from tablet/desktop upwards */
@media (min-width: 768px) {
  .ov-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ov-space-xl);
  }
}
/* ============================================================
   OV COMPONENT — METRIC CARDS (Finance, Dashboard, Stats)
   ============================================================ */
.ov-metric {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xxs);
  padding: var(--ov-space-md);
  border-radius: var(--radius-md);
  background: var(--ov-grey-50);
  border: 1px solid var(--ov-grey-200);
  box-shadow: var(--shadow-xs);
}
.ov-metric__label {
  font-family: var(--font-body);
  font-size: var(--text-sm-size);
  color: var(--ov-grey-600);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ov-metric__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ov-black);
  line-height: 1.2;
}
.ov-metric--green {
  border-color: var(--ov-green);
  box-shadow: 0 0 0 2px rgba(143, 179, 82, 0.15);
}
.ov-metric--blue {
  border-color: var(--ov-blue);
  box-shadow: 0 0 0 2px rgba(80, 169, 213, 0.15);
}
.ov-metric--orange {
  border-color: var(--ov-orange, #e6a04f);
  box-shadow: 0 0 0 2px rgba(230, 160, 79, 0.15);
}
.ov-metric--small .ov-metric__value {
  font-size: 1.25rem;
}
/* ==========================================================================
   OV PAGINATION — v2.0
   Clean, accessible, OV Shell-aligned
   ========================================================================== */
.ov-pagination {
  display: flex;
  justify-content: center;
  margin-block: var(--ov-space-xl);
}
.ov-pagination__list {
  display: flex;
  gap: var(--ov-space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* ------------------------------------------------------------
   CORE LINK STYLE
   ------------------------------------------------------------ */
.ov-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--ov-space-xs);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--ov-text-main);
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}
.ov-pagination__link:hover {
  background-color: var(--ov-blue);
  border-color: var(--ov-blue);
  color: var(--ov-white);
}
.ov-pagination__link:focus-visible {
  outline: 2px solid var(--ov-blue);
  outline-offset: 2px;
}
.ov-pagination__link i {
  font-size: 0.8rem;
}
/* ------------------------------------------------------------
   ACTIVE / CURRENT PAGE
   ------------------------------------------------------------ */
.ov-pagination__link.is-current {
  background-color: var(--ov-blue);
  border-color: var(--ov-blue);
  color: var(--ov-white);
  cursor: default;
  pointer-events: none;
}
/* ------------------------------------------------------------
   DISABLED STATES
   ------------------------------------------------------------ */
.ov-pagination__link.is-disabled {
  background: var(--ov-nav-dropdown-surface);
  color: var(--ov-text-muted);
  border-color: var(--ov-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* ------------------------------------------------------------
   PREV / NEXT
   ------------------------------------------------------------ */
.ov-pagination__link--prev, .ov-pagination__link--next {
  font-size: 0;
  /* hide text spacing */
}
.ov-pagination__link--prev i, .ov-pagination__link--next i {
  font-size: 1rem;
}
/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .ov-pagination__list {
    gap: var(--ov-space-2xs);
  }
  .ov-pagination__link {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }
}
/* ==========================================================================
   OV COMPONENT — PRICE
   Depends on: ov-core/_tokens.scss, _typography.scss
   ========================================================================= */
.ov-price {
  display: inline-flex;
  flex-direction: column;
  gap: var(--ov-space-2xs);
  font-family: var(--font-body);
  color: var(--ov-text-main);
}
.ov-price--new {
  font-weight: 600;
  color: var(--ov-color-price);
  font-size: var(--text-lg-size);
}
.ov-price--old {
  color: var(--ov-color-price-old);
  text-decoration: line-through;
  font-size: var(--text-md-size);
}
.ov-price--tax {
  color: var(--ov-color-price-tax);
  font-size: var(--text-sm-size);
}
/* ==========================================================================
   OV COMPONENT — TABLES
   Vendor/product grids with Font Awesome 7 sort indicators
   ========================================================================== */
.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  background: var(--ov-bg-card);
}
.ov-table th, .ov-table td {
  padding: var(--ov-space-sm) var(--ov-space-md);
  border-bottom: 1px solid var(--ov-border-subtle);
  white-space: nowrap;
}
.ov-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  background: var(--ov-bg-section);
  color: var(--ov-text-main);
  user-select: none;
}
.ov-table tbody tr:hover {
  background: var(--ov-bg-card-hover);
}
/* Compact variant */
.ov-table--compact th, .ov-table--compact td {
  padding: var(--ov-space-xs) var(--ov-space-sm);
}
/* ==========================================================================
   SORTABLE COLUMNS
   -------------------------------------------------------------------------- */
.ov-table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-2xs);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  padding-right: var(--ov-space-xs);
}
.ov-table-sort:hover {
  color: var(--ov-blue);
}
.ov-table-sort.is-active {
  color: var(--ov-blue-dark);
  font-weight: 700;
}
/* FA7 arrow indicators */
.ov-table-sort.is-active::after {
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free", "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 0.75em;
  opacity: 0.75;
  margin-left: var(--ov-space-2xs);
}
/* Ascending (arrow up) */
.ov-table-sort.is-active.is-asc::after {
  content: "";
  /* fa-arrow-up-wide-short */
}
/* Descending (arrow down) */
.ov-table-sort.is-active.is-desc::after {
  content: "";
  /* fa-arrow-down-wide-short */
}
.ov-table--stretched .ov-table__inner {
  width: 100%;
}
/* ==========================================================================
   RESPONSIVE WRAPPER
   ========================================================================== */
.ov-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.ov-table-wrapper .ov-table {
  min-width: 100%;
}
/* ==========================================================================
   VENDOR CARD COMPATIBILITY PATCH
   Ensures tables never overflow rounded cards,
   and horizontal scroll stays inside card boundaries.
   Safe for storefront.
   ========================================================================== */
.ov-card--table .ov-card__body {
  overflow-x: auto;
  padding: var(--ov-space-4);
  /* ensures interior spacing for radii */
}
.ov-card--table .ov-table-wrapper {
  overflow-x: auto;
  width: 100%;
}
.ov-card--table .ov-table {
  min-width: 100%;
}
/* ==========================================================================
   OV Vendor — Tabs (A11Y + Indicators)
   ========================================================================== */
.ov-tabs {
  display: block;
}
.ov-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-sm);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-tabs__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-sm);
  padding: var(--ov-space-sm) var(--ov-space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border-subtle);
  background: var(--color-surface);
  color: var(--ov-grey-800);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ov-tabs__link:hover {
  transform: translateY(-1px);
}
.ov-tabs__link:focus-visible {
  outline: 2px solid var(--ov-green);
  outline-offset: 2px;
}
.ov-tabs__link.is-active {
  background: var(--ov-green-light);
  border-color: color-mix(in srgb, var(--ov-green) 40%, var(--ov-border-subtle));
  color: var(--ov-black);
}
.ov-tabs__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
}
.ov-tabs__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ov-green);
}
.ov-tabs__check, .ov-tabs__spinner, .ov-tabs__warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ov-tabs__check.is-pop {
  animation: ov-tab-pop 220ms ease-out;
}
@keyframes ov-tab-pop {
  from {
    transform: scale(0.85);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.ov-tabs__spinner i {
  animation: ov-tab-spin 800ms linear infinite;
}
@keyframes ov-tab-spin {
  to {
    transform: rotate(360deg);
  }
}
.ov-tabs__divider {
  width: 1px;
  height: 28px;
  background: var(--ov-border-subtle);
  margin-inline: var(--ov-space-sm);
}
.ov-tabs__submenu {
  margin-top: var(--ov-space-sm);
  padding: var(--ov-space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ov-border-subtle);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  list-style: none;
}
.ov-tab-pane {
  margin-top: var(--ov-space-lg);
}
.ov-tab-errors {
  border: 1px solid color-mix(in srgb, var(--ov-brown) 30%, var(--ov-border-subtle));
  background: color-mix(in srgb, var(--ov-brown) 10%, var(--color-surface));
  border-radius: var(--radius-lg);
  padding: var(--ov-space-md);
  margin-bottom: var(--ov-space-lg);
}
.ov-tab-errors .ov-tab-errors__title {
  font-weight: 700;
  margin-bottom: var(--ov-space-sm);
}
.ov-tab-errors .ov-tab-errors__list {
  margin: 0;
  padding-left: 1.1rem;
}
.ov-tab-errors a {
  color: inherit;
  text-decoration: underline;
}
.ov-tab-errors a:focus-visible {
  outline: 2px solid var(--ov-green);
  outline-offset: 2px;
}
/* SR-only utility (if not already present globally) */
.ov-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* ------------------------------------------------------------------
   Active State Enhancements for OV Tabs
   ------------------------------------------------------------------ */
.ov-tabs__link {
  /* Animated underline "ink bar" */
}
.ov-tabs__link.is-active {
  color: var(--ov-color-brand-strong);
}
.ov-tabs__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--ov-color-brand-strong);
  transition: width 0.25s ease, left 0.25s ease;
}
.ov-tabs__link.is-active::after {
  width: 100%;
  left: 0;
}
/* OV Subtabs — global visibility contract */
[data-ov-lang-pane] {
  display: none;
}
[data-ov-lang-pane].is-active {
  display: block;
}
/* ==========================================================================
   OV Product Form — Tab status dot (required indicators)
   Contract:
   - .ov-tab--bad => RED dot (obligatory but missing)
   - .ov-tab--ok  => GREEN dot (complete)
   - neutral      => transparent dot
   ========================================================================== */
.ov-tab {
  position: relative;
}
.ov-tab__status {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-left: auto;
  /* Neutral */
  background: transparent;
  /* Keep a subtle ring so the dot is still "present" in layout */
  border: 1px solid var(--ov-border-subtle);
  /* Smooth state change */
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ov-tab--bad .ov-tab__status {
  background: var(--ov-brown);
  border-color: color-mix(in srgb, var(--ov-brown) 55%, var(--ov-border-subtle));
}
.ov-tab--ok .ov-tab__status {
  background: var(--ov-green);
  border-color: color-mix(in srgb, var(--ov-green) 55%, var(--ov-border-subtle));
}
/* Small "pop" feedback when switching states */
.ov-tab--ok .ov-tab__status, .ov-tab--bad .ov-tab__status {
  transform: scale(1);
}
.ov-tab--ok:focus-visible .ov-tab__status, .ov-tab--bad:focus-visible .ov-tab__status {
  outline: 2px solid var(--ov-green);
  outline-offset: 2px;
}
.ov-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--ov-bg-subtle);
  border: 1px solid var(--ov-border-subtle);
  font-size: var(--ov-font-size-sm);
  color: var(--ov-text-700);
}
.ov-tag__label {
  white-space: nowrap;
}
.ov-tag__remove {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ov-bg-muted);
  color: var(--ov-text-700);
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.ov-tag__remove:hover {
  background: var(--ov-border-strong);
}
/* ============================================================================
   OV Toast
   Canonical, accessible, shell-aware notification component
   ========================================================================== */
/* --------------------------------------------------------------------------
   Positioning container
   -------------------------------------------------------------------------- */
:root {
  --ov-toast-top-offset: var(--ov-space-lg);
}
[data-ov-vendor-shell], .ov-vendor-body {
  --ov-toast-top-offset: calc(
    var(--ov-vendor-header-height, 0px) + var(--ov-space-md)
  );
}
.ov-toast-container {
  position: fixed;
  top: var(--ov-toast-top-offset);
  right: var(--ov-space-lg);
  z-index: var(--z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
  pointer-events: none;
}
/* --------------------------------------------------------------------------
   Toast base
   -------------------------------------------------------------------------- */
.ov-toast {
  min-width: 260px;
  max-width: 360px;
  background: var(--ov-bg-card);
  color: var(--ov-text-main);
  border-radius: var(--ov-radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--ov-space-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--ov-transition-fast), transform var(--ov-transition-normal);
  pointer-events: auto;
}
/* Visible state */
.ov-toast:not(.ov-toast--hide) {
  opacity: 1;
  transform: translateY(0);
}
/* Hidden state */
.ov-toast--hide {
  opacity: 0;
  transform: translateY(-8px);
}
/* --------------------------------------------------------------------------
   Semantic variants (OV state palette)
   -------------------------------------------------------------------------- */
.ov-toast--success {
  border-left: 4px solid var(--ov-state-success-text);
  background: var(--ov-state-success-bg);
  color: var(--ov-state-success-text);
}
.ov-toast--warning {
  border-left: 4px solid var(--ov-state-warning-text);
  background: var(--ov-state-warning-bg);
  color: var(--ov-state-warning-text);
}
.ov-toast--error {
  border-left: 4px solid var(--ov-state-danger-text);
  background: var(--ov-state-danger-bg);
  color: var(--ov-state-danger-text);
}
.ov-toast--info {
  border-left: 4px solid var(--ov-blue-700);
  background: var(--ov-blue-05);
  color: var(--ov-blue-90);
}
/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ov-toast__content {
  display: flex;
  align-items: flex-start;
  gap: var(--ov-space-sm);
}
.ov-toast__message {
  flex: 1;
  font-size: var(--ov-text-sm);
  line-height: 1.5;
  word-wrap: break-word;
}
/* --------------------------------------------------------------------------
   Close button
   -------------------------------------------------------------------------- */
.ov-toast__close {
  background: none;
  border: none;
  padding: var(--ov-space-xs);
  margin: calc(var(--ov-space-xs) * -1);
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  border-radius: var(--radius-sm);
}
.ov-toast__close:hover, .ov-toast__close:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
}
/* --------------------------------------------------------------------------
   Focus & accessibility
   -------------------------------------------------------------------------- */
.ov-toast:focus {
  outline: none;
}
.ov-toast:focus-visible {
  outline: 2px solid var(--ov-focus-ring);
  outline-offset: 2px;
}
/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ov-toast {
    transition: none;
    transform: none;
  }
}
/* ==========================================================================
   OV COMPONENT — Vendor Auth Panel
   Used on: vendor auth entry (login / register choice)
   Responsibility: visual styling only
   ========================================================================== */
.ov-vendor-auth-panel {
  background: var(--ov-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--ov-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.ov-vendor-auth-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* ------------------------------------------------------------
   Header (icon + title)
------------------------------------------------------------ */
.ov-vendor-auth-panel__header {
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
}
.ov-vendor-auth-panel__header i {
  font-size: 1.25rem;
  color: var(--ov-green);
  line-height: 1;
}
/* ------------------------------------------------------------
   Variants
------------------------------------------------------------ */
/* Login: softer, secondary emphasis */
.ov-vendor-auth-panel--login {
  background: var(--ov-bg-subtle);
}
/* Register: primary emphasis */
.ov-vendor-auth-panel--register {
  border: 2px solid var(--ov-green);
}
/* ------------------------------------------------------------
   Mobile tuning
------------------------------------------------------------ */
@media (max-width: 576px) {
  .ov-vendor-auth-panel {
    padding: var(--ov-space-lg);
  }
}
/* ==========================================================================
   OV COMPONENT — Vendor Hero
   Used on: storefront vendor profile
   Responsibility: visual + component-level layout
   ========================================================================== */
/* ------------------------------------------------------------
   Banner
------------------------------------------------------------ */
.ov-vendor-hero__banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 28vw, 420px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-xl);
  border: 1px solid var(--ov-border-subtle);
}
/* Contrast overlay for readability */
.ov-vendor-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.45) 100%);
}
/* ------------------------------------------------------------
   Content positioning
------------------------------------------------------------ */
.ov-vendor-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Identity block
------------------------------------------------------------ */
.ov-vendor-hero__identity {
  width: min(920px, 100%);
  display: flex;
  align-items: center;
  gap: var(--ov-space-xl);
}
/* ------------------------------------------------------------
   Avatar
------------------------------------------------------------ */
.ov-vendor-hero__avatar img {
  width: 144px;
  height: 144px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  display: block;
}
/* ------------------------------------------------------------
   Meta
------------------------------------------------------------ */
.ov-vendor-hero__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-vendor-hero__meta-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-md);
}
.ov-vendor-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
}
/* ------------------------------------------------------------
   Social links
------------------------------------------------------------ */
.ov-vendor-hero__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-sm);
  margin-top: var(--ov-space-xs);
}
.ov-vendor-hero__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border-subtle);
  text-decoration: none;
}
.ov-vendor-hero__social-link:focus-visible {
  outline: 2px solid var(--ov-focus-ring);
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 720px) {
  .ov-vendor-hero__content {
    padding: var(--ov-space-lg);
  }
  .ov-vendor-hero__identity {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ov-space-lg);
  }
  .ov-vendor-hero__avatar img {
    width: 120px;
    height: 120px;
  }
}
/* ------------------------------------------------------------
   STOREFRONT SHELL (public chrome)
------------------------------------------------------------ */
/* ==========================================================================
   OV ACCESSIBILITY LAYER — Shell
   Skip links · Focus rings · Outline normalization
   ========================================================================== */
.ov-skip-links {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--ov-space-xs);
}
.ov-skip-links a {
  position: absolute;
  left: -9999px;
  background: var(--ov-green);
  padding: var(--ov-space-sm) var(--ov-space-md);
  border-radius: var(--radius-md);
  color: var(--ov-black);
  font-weight: 600;
  text-decoration: none;
}
.ov-skip-links a:focus {
  left: var(--ov-space-sm);
  top: var(--ov-space-sm);
  z-index: 9999;
}
/* Unified OV focus ring */
:focus-visible {
  outline: 3px solid rgba(183, 201, 105, 0.6);
  outline-offset: 2px;
}
/* ==========================================================================
   OV COOKIE BANNER — v2.0
   OV Shell compatible, accessible, mobile-first
   ========================================================================== */
.ov-cookie {
  position: fixed;
  inset-block-end: var(--ov-space-md);
  inset-inline: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  /* allow controlled activation */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  /* ------------------------------------------------------------
     INNER CONTAINER
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     CONTENT
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     ACTIONS
     ------------------------------------------------------------ */
}
.ov-cookie.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ov-cookie__container {
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  width: 100%;
  padding: var(--ov-space-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--ov-space-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .ov-cookie__container {
    grid-template-columns: 1fr;
    row-gap: var(--ov-space-lg);
    padding: var(--ov-space-md);
    margin-inline: var(--ov-space-md);
  }
}
.ov-cookie__content {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-cookie__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: var(--ov-black);
}
.ov-cookie__text {
  font-size: 0.95rem;
  color: var(--ov-text-main);
  line-height: 1.5;
  margin: 0;
}
.ov-cookie__more-link {
  font-size: 0.9rem;
  color: var(--ov-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ov-cookie__more-link:hover {
  color: var(--ov-blue-dark);
}
.ov-cookie__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
@media (min-width: 769px) {
  .ov-cookie__actions {
    min-width: 180px;
    justify-content: center;
  }
}
.ov-cookie__btn {
  width: 100%;
  text-align: center;
}
/* ==========================================================================
   OV CURRENCY SELECTOR — Premium v3.0
   ========================================================================== */
.ov-currency {
  position: relative;
}
.ov-currency__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  padding: var(--ov-space-xs) var(--ov-space-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.ov-currency__toggle:hover, .ov-currency__toggle:focus-visible {
  background: var(--ov-grey-100);
}
.ov-currency__toggle::after {
  display: none !important;
}
.ov-currency__symbol {
  font-weight: 600;
}
.ov-currency__menu {
  margin-top: var(--ov-space-xs);
  min-width: 160px;
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ov-currency__item {
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
  padding: var(--ov-space-sm) var(--ov-space-md);
  text-decoration: none;
  color: var(--ov-black);
}
.ov-currency__item:hover {
  background: var(--ov-green);
}
/* ==========================================================================
   OV FOOTER — v3.0
   Completely aligned with OV Shell, spacing tokens, typography system
   ========================================================================== */
.ov-footer {
  background: var(--ov-nav-dropdown-surface);
  border-top: 1px solid var(--ov-border-subtle);
  padding-block: var(--ov-space-xl);
  /* ------------------------------------------------------------
     GRID — Flexible 4-column responsive layout
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     GROUPS
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     LINKS
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     SEPARATOR
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     BOTTOM META
     ------------------------------------------------------------ */
}
.ov-footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ov-space-xl) var(--ov-space-lg);
}
.ov-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-footer__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--ov-black);
}
.ov-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-footer__link {
  text-decoration: none;
  color: var(--ov-text-muted);
  font-size: 0.95rem;
  transition: color var(--transition-normal), text-decoration var(--transition-normal);
}
.ov-footer__link:hover {
  color: var(--ov-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ov-footer__separator {
  width: 100%;
  height: 1px;
  background: var(--ov-border-subtle);
}
.ov-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ov-text-muted);
}
.ov-footer__bottom a {
  color: var(--ov-text-muted);
}
.ov-footer__bottom a:hover {
  color: var(--ov-green-dark);
}
@media (max-width: 576px) {
  .ov-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--ov-space-sm);
  }
}
.ov-footer__meta {
  line-height: 1.4;
}
/* ==========================================================================
   OV HEADER COMPONENTS — FINAL (CLEANED)
   Scope:
   - Prelaunch banner
   - Main header (logo / search / cart)
   IMPORTANT:
   - Skip links are defined exclusively in ov-shell/a11y.scss
   ========================================================================== */
/* ==========================================================================
   PRE-LAUNCH ANNOUNCEMENT BAR
   ========================================================================== */
.ov-prelaunch-banner {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)), var(--ov-green);
  z-index: var(--z-header);
  border-bottom: 1px solid var(--ov-green-dark);
  color: var(--ov-black);
  font-family: var(--font-body);
}
.ov-prelaunch-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-md);
  padding-block: var(--ov-space-2xs);
  text-align: center;
}
.ov-prelaunch-banner__text {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ov-prelaunch-banner__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ov-prelaunch-banner__link:hover, .ov-prelaunch-banner__link:focus-visible {
  opacity: 0.9;
}
@media (max-width: 576px) {
  .ov-prelaunch-banner__inner {
    flex-wrap: wrap;
    gap: var(--ov-space-xs);
    padding-block: var(--ov-space-3xs);
  }
}
/* ==========================================================================
   MAIN HEADER — LOGO · SEARCH · CART
   ========================================================================== */
.ov-header-main {
  background: var(--ov-nav-dropdown-surface);
  border-bottom: 1px solid var(--ov-border-subtle);
  padding-block: var(--ov-space-lg);
  z-index: var(--z-header);
}
.ov-header-main__container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--ov-space-xl);
}
@media (max-width: 991.98px) {
  .ov-header-main__container {
    grid-template-columns: 1fr;
    row-gap: var(--ov-space-md);
  }
}
/* LOGO */
.ov-header-main__logo {
  display: flex;
  align-items: center;
}
.ov-logo__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ov-black);
}
.ov-logo__img {
  max-width: 240px;
  height: auto;
  transition: opacity var(--transition-fast);
}
.ov-logo__img:hover {
  opacity: 0.85;
}
/* SEARCH */
.ov-header-main__search {
  display: flex;
  align-items: center;
}
.ov-search-wrapper {
  width: 100%;
  display: flex;
}
#search {
  width: 100%;
  display: flex;
}
#search .form-control {
  flex: 1;
  height: 46px;
  padding: 0 var(--ov-space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ov-grey-300);
  background: var(--ov-grey-50);
  font-size: 0.95rem;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
#search .form-control:focus {
  border-color: var(--ov-green);
  box-shadow: 0 0 0 3px rgba(183, 201, 105, 0.25);
}
#search .btn {
  height: 46px;
  padding-inline: var(--ov-space-lg);
  border-radius: var(--radius-lg);
  background: var(--ov-green);
  border-color: var(--ov-green);
  color: var(--ov-black);
  font-weight: 600;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}
#search .btn:hover {
  background: var(--ov-green-dark);
  border-color: var(--ov-green-dark);
}
/* CART */
.ov-header-main__cart {
  display: flex;
  justify-content: flex-end;
}
/* ==========================================================================
   OV LANGUAGE SELECTOR — Premium v3.1 (Mobile-safe)
   Shell-level global component
   ========================================================================== */
.ov-lang {
  position: relative;
}
/* ==========================================================================
   Toggle button
   ========================================================================== */
.ov-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  padding: var(--ov-space-xs) var(--ov-space-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.ov-lang__toggle:hover, .ov-lang__toggle:focus-visible {
  background: var(--ov-grey-100);
}
.ov-lang__toggle::after {
  display: none !important;
}
.ov-lang__flag {
  width: 22px;
  height: 15px;
  border-radius: var(--radius-xxs);
  object-fit: cover;
}
/* ==========================================================================
   Dropdown menu (desktop default)
   ========================================================================== */
.ov-lang__menu {
  margin-top: var(--ov-space-xs);
  min-width: 150px;
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Explicit override: language dropdown > generic dropdown */
.ov-lang .ov-dropdown__menu {
  background: var(--ov-nav-dropdown-surface);
  z-index: var(--z-dropdown);
}
.ov-lang__item {
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
  padding: var(--ov-space-sm) var(--ov-space-md);
  text-decoration: none;
  color: var(--ov-text-main);
}
.ov-lang__item:hover, .ov-lang__item:focus-visible {
  background: var(--ov-grey-100);
  color: var(--ov-green-dark);
}
.ov-lang__item--active {
  font-weight: 600;
}
/* ==========================================================================
   MOBILE BEHAVIOR — anchored panel
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Increase tap comfort */
  .ov-lang {
    position: static;
    /* break out of narrow topbar context */
  }
  .ov-lang__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    width: 100%;
    min-width: unset;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    /* Visual separation from header */
    border-top: none;
    box-shadow: var(--shadow-lg);
  }
  .ov-lang__item {
    padding: var(--ov-space-md) var(--ov-space-lg);
    font-size: 1rem;
  }
  .ov-lang__flag {
    width: 24px;
    height: 16px;
  }
}
/* ==========================================================================
   OV MOBILE NAVIGATION — SLIDE-IN DRAWER
   Mobile-only · Drawer-based · Authoritative
   ========================================================================== */
.ov-mobile-nav {
  /* ------------------------------------------------------------------------
     Local tokens
     ------------------------------------------------------------------------ */
  --ov-mobile-nav-width: 86vw;
  --ov-mobile-nav-max-width: 360px;
  --ov-mobile-nav-overlay: rgba(0, 0, 0, 0.45);
  --ov-mobile-nav-border: var(--ov-border-subtle);
  --ov-mobile-nav-surface: var(--ov-nav-dropdown-surface);
  --ov-mobile-nav-surface-2: var(--ov-nav-surface);
  --ov-mobile-nav-text: var(--ov-text-main);
  --ov-mobile-nav-muted: var(--ov-text-muted);
  display: block;
  /* ------------------------------------------------------------------------
     Toggle bar
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Overlay
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Drawer
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Header
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Body
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Lists
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Primary links / accordion triggers
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Submenus
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Sublinks
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Secondary sections
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Divider
     ------------------------------------------------------------------------ */
  /* ------------------------------------------------------------------------
     Utilities
     ------------------------------------------------------------------------ */
}
.ov-mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  padding-inline: var(--ov-space-md);
  background: linear-gradient(to right, var(--ov-mobile-nav-surface-2), var(--ov-bg-green-soft, rgba(183, 201, 105, 0.18)));
  border-bottom: 1px solid var(--ov-mobile-nav-border);
}
.ov-mobile-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-md);
  background: var(--ov-mobile-nav-surface);
  color: var(--ov-mobile-nav-text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.ov-mobile-nav__toggle i {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}
.ov-mobile-nav__toggle-label {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}
.ov-mobile-nav__toggle:hover, .ov-mobile-nav__toggle:focus-visible {
  background: var(--ov-grey-100);
  border-color: var(--ov-grey-300);
  transform: translateY(-1px);
  outline: none;
}
.ov-mobile-nav__toggle:active {
  transform: translateY(0);
}
html.is-ov-mobile-nav-open .ov-mobile-nav__toggle {
  background: var(--ov-bg-green-soft, rgba(183, 201, 105, 0.18));
  border-color: var(--ov-green);
}
.ov-mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: var(--ov-mobile-nav-overlay);
  z-index: var(--z-overlay, 950);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
.ov-mobile-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--ov-mobile-nav-width);
  max-width: var(--ov-mobile-nav-max-width);
  height: 100dvh;
  background: var(--ov-mobile-nav-surface);
  color: var(--ov-mobile-nav-text);
  border-left: 1px solid var(--ov-border-light);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer, 960);
  transform: translateX(110%);
  transition: transform var(--transition-normal);
  will-change: transform;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.ov-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ov-space-md);
  border-bottom: 1px solid var(--ov-mobile-nav-border);
  background: var(--ov-mobile-nav-surface);
  position: relative;
  z-index: 1;
}
.ov-mobile-nav__header-inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ov-mobile-nav__brand {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ov-text-muted);
}
.ov-mobile-nav__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.ov-mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-md);
  background: var(--ov-mobile-nav-surface-2);
  color: var(--ov-mobile-nav-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.ov-mobile-nav__close i {
  font-size: 1.1rem;
  line-height: 1;
}
.ov-mobile-nav__close:hover, .ov-mobile-nav__close:focus-visible {
  background: var(--ov-grey-100);
  border-color: var(--ov-grey-300);
  transform: translateY(-1px);
  outline: none;
}
.ov-mobile-nav__close:active {
  transform: translateY(0);
}
.ov-mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ov-space-sm) var(--ov-space-md) var(--ov-space-md);
  -webkit-overflow-scrolling: touch;
}
.ov-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-mobile-nav__item + .ov-mobile-nav__item {
  border-top: 1px solid var(--ov-grey-150);
}
.ov-mobile-nav__link {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ov-mobile-nav-text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ov-mobile-nav__link i {
  color: var(--ov-mobile-nav-muted);
  font-size: 0.95rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.ov-mobile-nav__link:hover, .ov-mobile-nav__link:focus-visible {
  background: var(--ov-grey-100);
  outline: none;
}
.ov-mobile-nav__link:hover i, .ov-mobile-nav__link:focus-visible i {
  color: var(--ov-text-main);
}
.ov-mobile-nav__link--parent.is-active, .ov-mobile-nav__link[aria-expanded="true"] {
  background: var(--ov-bg-green-soft, rgba(183, 201, 105, 0.18));
  box-shadow: inset 3px 0 0 var(--ov-green);
}
.ov-mobile-nav__link--parent.is-active i, .ov-mobile-nav__link[aria-expanded="true"] i {
  transform: rotate(180deg);
  color: var(--ov-text-main);
}
.ov-mobile-nav__submenu {
  padding: 0 0 0.75rem;
}
.ov-mobile-nav__submenu ul {
  margin: 0.25rem 0 0;
  padding-left: var(--ov-space-sm);
  border-left: 2px solid var(--ov-border-subtle);
}
.ov-mobile-nav__sublink {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ov-mobile-nav-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ov-mobile-nav__sublink:hover, .ov-mobile-nav__sublink:focus-visible {
  background: var(--ov-grey-100);
  transform: translateX(2px);
  outline: none;
}
.ov-mobile-nav__sublink.is-active {
  font-weight: 600;
  color: var(--ov-green-dark);
}
.ov-mobile-nav__sublink--all {
  font-weight: 700;
  color: var(--ov-green-dark);
  background: var(--ov-bg-green-soft, rgba(183, 201, 105, 0.18));
  padding: 0.65rem 0.5rem;
}
.ov-mobile-nav__sublink--all:hover, .ov-mobile-nav__sublink--all:focus-visible {
  background: var(--ov-green);
  color: var(--ov-black);
}
.ov-mobile-nav__section {
  margin-top: var(--ov-space-md);
}
.ov-mobile-nav__section-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ov-text-muted);
  margin-bottom: var(--ov-space-xs);
}
.ov-mobile-nav__secondary-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.65rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ov-mobile-nav-text);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.ov-mobile-nav__secondary-link:hover, .ov-mobile-nav__secondary-link:focus-visible {
  background: var(--ov-grey-100);
  outline: none;
}
.ov-mobile-nav__divider {
  margin: var(--ov-space-md) 0;
  height: 1px;
  background: var(--ov-border-subtle);
}
.ov-mobile-nav__utilities {
  margin-top: var(--ov-space-sm);
  padding-bottom: var(--ov-space-md);
}
.ov-mobile-nav__utility-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
  padding: 0.75rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ov-mobile-nav-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.ov-mobile-nav__utility-link i {
  width: 20px;
  font-size: 1rem;
  text-align: center;
  color: var(--ov-text-muted);
}
.ov-mobile-nav__utility-link:hover, .ov-mobile-nav__utility-link:focus-visible {
  background: var(--ov-grey-100);
  transform: translateX(2px);
  outline: none;
}
/* ==========================================================================
   OPEN STATE
   ========================================================================== */
html.is-ov-mobile-nav-open {
  overflow: hidden;
}
html.is-ov-mobile-nav-open .ov-mobile-nav__overlay {
  opacity: 1;
  pointer-events: auto;
  display: block;
}
html.is-ov-mobile-nav-open .ov-mobile-nav__drawer {
  transform: translateX(0);
}
/* ==========================================================================
   SAFETY
   ========================================================================== */
.ov-mobile-nav__overlay[hidden], .ov-mobile-nav__drawer[hidden] {
  display: none !important;
}
/* ==========================================================================
   RESPONSIVE SAFETY
   ========================================================================== */
@media (max-width: 360px) {
  .ov-mobile-nav {
    --ov-mobile-nav-width: 92vw;
  }
}
@media (min-width: 1200px) {
  .ov-mobile-nav {
    display: none !important;
  }
}
/* Remove default bullets/indentation in secondary + utilities lists */
.ov-mobile-nav__section ul, .ov-mobile-nav__utilities ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-mobile-nav__section li, .ov-mobile-nav__utilities li {
  margin: 0;
  padding: 0;
}
.ov-mobile-nav__secondary-link, .ov-mobile-nav__utility-link {
  padding-left: 0.25rem;
  /* matches your primary link rhythm */
}
/* ==========================================================================
   OV NAVIGATION (DESKTOP MEGA MENU)
   ========================================================================== */
.ov-nav {
  position: sticky;
  top: var(--ov-header-offset);
  z-index: var(--z-header);
  background: var(--ov-nav-surface);
  border-bottom: 1px solid var(--ov-border-subtle);
  box-shadow: var(--shadow-sm);
  padding-block: var(--ov-space-sm);
  margin-bottom: var(--ov-space-md);
}
.ov-nav__container {
  display: flex;
  align-items: center;
  position: relative;
}
.ov-nav ul, .ov-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-nav__list {
  display: flex;
  gap: var(--ov-space-md);
}
.ov-nav__item {
  position: relative;
}
.ov-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: transparent;
}
.ov-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ov-black);
  padding: var(--ov-space-sm) var(--ov-space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: color var(--ov-transition-fast);
}
.ov-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background var(--ov-transition-fast);
  pointer-events: none;
}
.ov-nav__link:hover::after, .ov-nav__link:focus-visible::after {
  background: rgba(183, 201, 105, 0.85);
}
.ov-nav__item.is-open > .ov-nav__link::after {
  background: #b7c969;
}
.ov-nav__chevron {
  margin-left: var(--ov-space-sm);
  color: var(--ov-text-muted);
  font-size: 0.85rem;
  line-height: 1;
  transition: transform var(--ov-transition-fast);
}
.ov-nav__item.is-open > .ov-nav__link .ov-nav__chevron {
  transform: rotate(180deg);
}
.ov-nav__dropdown {
  display: none;
}
.ov-nav__item.is-open > .ov-nav__dropdown {
  display: block;
}
.ov-nav__dropdown {
  position: absolute;
  top: 122%;
  left: 0;
  width: max-content;
  min-width: 260px;
  max-width: 360px;
  padding: var(--ov-space-xs);
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-top: 1px solid var(--ov-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}
.ov-nav-dropdown__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--ov-space-sm);
}
.ov-nav-dropdown__column a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ov-text-main);
  text-decoration: none;
  transition: background var(--ov-transition-fast), color var(--ov-transition-fast), transform var(--ov-transition-fast);
}
.ov-nav-dropdown__column a:hover, .ov-nav-dropdown__column a:focus-visible {
  background: var(--ov-nav-surface);
  color: var(--ov-black);
  transform: translateX(2px);
}
@media (min-width: 1200px) {
  .ov-nav__item:hover > .ov-nav__dropdown {
    display: block;
  }
}
/* ==========================================================================
   RESPONSIVE SAFETY
   ========================================================================== */
@media (max-width: 991.98px) {
  .ov-nav {
    display: none;
  }
}
/* ==========================================================================
   OV SEARCH — Premium v3.1 (FINAL)
   Header-owned search component
   - No Bootstrap dependency
   - Token-driven
   - Keyboard accessible
   ========================================================================== */
.ov-search {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--ov-space-xs);
  /* ------------------------------------------------------------
     Input
     ------------------------------------------------------------ */
  /* ------------------------------------------------------------
     Submit button
     ------------------------------------------------------------ */
}
.ov-search__input {
  flex: 1;
  height: 46px;
  padding: 0 var(--ov-space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ov-grey-300);
  background: var(--ov-grey-50);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ov-text-main);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
}
.ov-search__input::placeholder {
  color: var(--ov-text-muted);
}
.ov-search__input:focus {
  outline: none;
  border-color: var(--ov-green);
  background: var(--ov-white);
  box-shadow: 0 0 0 3px rgba(183, 201, 105, 0.25);
}
.ov-search__input:focus-visible {
  outline: none;
}
.ov-search__btn {
  height: 46px;
  padding-inline: var(--ov-space-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ov-green);
  background: var(--ov-green);
  color: var(--ov-black);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast);
}
.ov-search__btn i {
  font-size: 0.9rem;
  line-height: 1;
}
.ov-search__btn:hover {
  background: var(--ov-green-dark);
  border-color: var(--ov-green-dark);
}
.ov-search__btn:active {
  transform: translateY(1px);
}
.ov-search__btn:focus-visible {
  outline: 2px solid var(--ov-green);
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   Responsive adjustments
   ------------------------------------------------------------ */
@media (max-width: 576px) {
  .ov-search__input, .ov-search__btn {
    height: 42px;
  }
  .ov-search__btn {
    padding-inline: var(--ov-space-md);
  }
}
/* ==========================================================================
   OV TOPBAR — FINAL AUTHORITY
   Owns: topbar layout · icons · account dropdown
   ========================================================================== */
.ov-topbar {
  background: var(--ov-nav-dropdown-surface);
  border-bottom: 1px solid var(--ov-border-subtle);
  font-size: 0.8125rem;
  padding-block: calc(var(--ov-space-2xs) + 2px);
  color: var(--ov-text-main);
  /* PART OF STICKY HEADER STACK */
  position: sticky;
  top: 0;
  /* Allow dropdowns to overflow */
  overflow: visible;
  z-index: var(--z-sticky);
}
.ov-topbar__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ov-space-md);
  overflow: visible;
}
.ov-topbar__left, .ov-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--ov-space-md);
  flex-wrap: nowrap;
}
/* =========================================================
   DESKTOP-ONLY UTILITY GROUP
   ========================================================= */
.ov-topbar__desktop {
  display: flex;
  align-items: center;
  gap: var(--ov-space-md);
}
/* =========================================================
   ICON LINKS
   ========================================================= */
.ov-topbar__contact a, .ov-topbar__wishlist a, .ov-topbar__checkout a {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ov-text-muted);
  transition: color var(--transition-normal);
}
.ov-topbar__contact a:hover, .ov-topbar__wishlist a:hover, .ov-topbar__checkout a:hover {
  color: var(--ov-green-dark);
}
.ov-topbar__contact a i, .ov-topbar__wishlist a i, .ov-topbar__checkout a i {
  font-size: 0.9rem;
}
.ov-topbar__contact a span, .ov-topbar__wishlist a span, .ov-topbar__checkout a span {
  font-weight: 500;
  white-space: nowrap;
}
/* =========================================================
   DROPDOWN SYSTEM (ACCOUNT + LANGUAGE)
   ========================================================= */
.ov-dropdown {
  position: relative;
}
.ov-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px 6px;
  color: var(--ov-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-normal);
}
.ov-dropdown__trigger i {
  font-size: 0.9rem;
}
.ov-dropdown__trigger:hover, .ov-dropdown__trigger:focus-visible {
  color: var(--ov-green-dark);
}
.ov-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--ov-space-xs));
  min-width: 180px;
  padding: 0;
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: none;
  /* Above sticky header stack */
  z-index: var(--z-dropdown);
}
.ov-dropdown.is-open .ov-dropdown__menu {
  display: block;
}
.ov-dropdown__menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-dropdown__menu li a {
  display: block;
  padding: var(--ov-space-sm) var(--ov-space-md);
  font-size: 0.95rem;
  color: var(--ov-text-main);
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
}
.ov-dropdown__menu li a:hover {
  background: var(--ov-grey-100);
  color: var(--ov-green-dark);
}
/* =========================================================
   CART
   ========================================================= */
.ov-topbar__cart {
  display: flex;
  align-items: center;
}
/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */
@media (max-width: 767.98px) {
  .ov-topbar {
    padding-block: var(--ov-space-xs);
  }
  .ov-topbar__desktop {
    display: none;
  }
  .ov-dropdown__trigger i {
    font-size: 1rem;
  }
  .ov-topbar__contact span, .ov-topbar__wishlist span, .ov-topbar__checkout span {
    display: none;
  }
}
/* ------------------------------------------------------------
   STOREFRONT
------------------------------------------------------------ */
/* ==========================================================================
   OV STOREFRONT — INDEX
   Explicit imports (scssphp-compatible)
   ========================================================================== */
/* ==========================================================================
   OV Store — Grid Helpers (NON-PRODUCT)
   --------------------------------------------------------------------------
   IMPORTANT:
   - Product grids are defined exclusively in:
     ov-store/_structure/product-grid.scss
   - This file must NEVER define product-related grids
   ========================================================================== */
.ov-grid--vendors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ov-space-xl);
}
/* ==========================================================================
   OV Store — Generic Hero Surface
   Used in vendor profile + future pages
   ========================================================================== */
.ov-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ov-hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* ==========================================================================
   OV Store — Sections
   --------------------------------------------------------------------------
   PURPOSE:
   - Vertical rhythm wrapper for MARKETING / LANDING pages only
   - NOT used in:
     - Category
     - Search
     - Product
     - Account
   --------------------------------------------------------------------------
   Storefront functional pages must rely on:
   - .ov-store-main
   - page-level spacing in _pages/
   ========================================================================== */
.ov-section-store {
  width: 100%;
  padding-block: var(--ov-space-xxl);
  display: block;
}
@media (max-width: 576px) {
  .ov-section-store {
    padding-block: var(--ov-space-xl);
  }
}
.ov-store-main {
  display: block;
  padding-bottom: var(--ov-space-3xl);
}
/* =========================================================
   404 PAGE — ORCHESTRATION ONLY (FINAL)
========================================================= */
.ov-notfound-page {
  margin-bottom: var(--ov-space-xxl);
}
.ov-notfound-content {
  padding-bottom: var(--ov-space-xxl);
}
.ov-404-card {
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--ov-space-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  padding: var(--ov-space-xxl) var(--ov-space-xl);
}
/* Spacing only — typography handled by components */
.ov-404-title {
  margin-bottom: var(--ov-space-md);
}
.ov-404-text {
  margin-bottom: var(--ov-space-xl);
}
.ov-404-actions {
  margin-top: var(--ov-space-lg);
}
@media (max-width: 767px) {
  .ov-404-card {
    padding: var(--ov-space-xl) var(--ov-space-lg);
  }
}
/* =========================================================
   OV STORE — Account Pages
   Page SCSS: orchestration only
   - Dashboard-specific dense rhythm
   - Auth pages untouched
   - NEVER style components directly
========================================================= */
/* ---------------------------------------------------------
   Base account page
--------------------------------------------------------- */
.ov-account-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
/* ---------------------------------------------------------
   Dashboard grid (dense by design)
--------------------------------------------------------- */
.ov-account-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ov-space-md);
}
/* Full-width sections (summary, activity) */
.ov-account-dashboard__full {
  grid-column: 1 / -1;
}
/* Remove section margins inside dashboard */
.ov-account-dashboard .ov-section {
  margin-bottom: 0;
}
/* Tighten heading → card relationship */
.ov-account-dashboard .ov-title-lg {
  margin-bottom: var(--ov-space-sm);
}
.ov-account-dashboard .ov-title-md {
  margin-bottom: var(--ov-space-xs);
}
/* Card density (still comfortable, less airy) */
.ov-account-dashboard .ov-card {
  padding: var(--ov-space-md);
}
/* Icon spacing (presentational only) */
.ov-account-dashboard .ov-title-lg i, .ov-account-dashboard .ov-title-md i {
  margin-right: var(--ov-space-xs);
  color: var(--ov-color-text-muted);
}
/* ---------------------------------------------------------
   Desktop layout
--------------------------------------------------------- */
@media (min-width: 768px) {
  .ov-account-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ov-space-lg);
  }
}
/* ---------------------------------------------------------
   AUTH VARIANT (login / register / forgotten / verify)
   MUST remain more breathable
--------------------------------------------------------- */
.ov-account-page--auth {
  gap: var(--ov-space-xl);
}
.ov-account-page--auth .ov-breadcrumbs {
  margin-bottom: var(--ov-space-sm);
}
.ov-account-page--auth .ov-page-header {
  margin-bottom: var(--ov-space-lg);
}
.ov-account-page--auth .ov-title-md {
  margin-top: var(--ov-space-md);
  margin-bottom: var(--ov-space-md);
}
.ov-form-actions {
  display: flex;
  flex-flow: row nowrap;
}
.ov-account-page--auth .ov-form-actions {
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-sm);
  flex-wrap: wrap;
  margin-top: var(--ov-space-lg);
  margin-bottom: var(--ov-space-md);
}
@media (min-width: 768px) {
  .ov-account-page--auth {
    gap: var(--ov-space-2xl);
  }
}
/* ---------------------------------------------------------
   Form actions spacing (account pages)
--------------------------------------------------------- */
.ov-store-main .ov-form-actions {
  margin-top: var(--ov-space-lg);
}
/* ==========================================================================
   STORE — ACCOUNT ADDRESS FORM
   Page orchestration only
   ========================================================================== */
.ov-account-address-form-page .ov-address-form {
  max-width: 720px;
}
.ov-account-address-form-page .ov-address-form__group {
  margin-bottom: var(--ov-space-xl);
}
.ov-account-address-form-page .ov-address-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ov-space-md);
}
.ov-account-address-form-page .ov-address-form__full {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .ov-account-address-form-page .ov-address-form__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ov-space-lg);
  }
}
.ov-account-address-form-page .ov-form-actions {
  margin-top: var(--ov-space-2xl);
}
/* =========================================================
   Account affiliate page — layout orchestration only
========================================================= */
.ov-account-affiliate-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-3xl);
}
.ov-account-affiliate-page .ov-section {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
/* ==========================================================================
   OV STORE — AUTH PAGES (LOGIN / REGISTER / FORGOTTEN / RESET)
   Page SCSS: orchestration only
   - Layout + width constraints
   - Responsive stacking
   - Never restyle components (cards/buttons/inputs)
   ========================================================================== */
/* ---------------------------------------------------------
   Two-panel layout (login / register)
--------------------------------------------------------- */
.ov-auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ov-space-lg);
  align-items: start;
}
/* Cards should not stretch full width on small screens */
.ov-auth-layout > .ov-card {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
/* ---------------------------------------------------------
   Desktop
--------------------------------------------------------- */
@media (min-width: 768px) {
  .ov-auth-layout {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--ov-space-xl);
  }
  .ov-auth-layout > .ov-card {
    margin-inline: 0;
  }
}
/* ---------------------------------------------------------
   Large desktop
--------------------------------------------------------- */
@media (min-width: 992px) {
  .ov-auth-layout {
    column-gap: var(--ov-space-2xl);
  }
  .ov-auth-layout > .ov-card {
    max-width: 540px;
  }
}
/* ==========================================================================
   OV STORE — CART PAGE
   Purpose:
   - Decision-oriented cart layout
   - Desktop two-column, mobile stacked
   - Page orchestration ONLY
   - No component styling
   ========================================================================== */
.ov-cart-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ==========================================================================
   CART LAYOUT (DESKTOP DECISION MODEL)
   ========================================================================== */
.ov-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ov-space-2xl);
}
/* Desktop: two-column */
@media (min-width: 768px) {
  .ov-cart-layout {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
  }
}
/* ==========================================================================
   LEFT COLUMN — MAIN CART
   ========================================================================== */
.ov-cart-main {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
/* ==========================================================================
   RIGHT COLUMN — SUMMARY / DECISION
   ========================================================================== */
.ov-cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
  padding: var(--ov-space-lg);
  border-radius: var(--radius-lg);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
}
/* Prevent summary from stretching too tall */
@media (min-width: 768px) {
  .ov-cart-summary {
    position: sticky;
    top: var(--ov-space-xl);
  }
}
/* ==========================================================================
   SUMMARY TOTALS (VISUAL “CART REACTS”)
   Single source of truth: #checkout-total
   Triggered by JS via `.ov-is-updated`
   ========================================================================== */
#checkout-total {
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
/* Subtle confirmation animation */
#checkout-total.ov-is-updated {
  animation: ov-cart-totals-flash 550ms ease-out;
}
@keyframes ov-cart-totals-flash {
  0% {
    transform: translateY(-1px);
    background-color: transparent;
  }
  35% {
    transform: translateY(0);
    background-color: var(--ov-bg-muted);
  }
  100% {
    transform: translateY(0);
    background-color: transparent;
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #checkout-total.ov-is-updated {
    animation: none;
    background-color: var(--ov-bg-muted);
  }
}
/* ==========================================================================
   SUMMARY CTA
   ========================================================================== */
.ov-cart-summary__cta {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
/* ==========================================================================
   REASSURANCE BLOCK
   ========================================================================== */
.ov-cart-reassurance {
  padding-top: var(--ov-space-md);
  border-top: 1px solid var(--ov-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-cart-reassurance__item {
  font-size: 0.9rem;
  color: var(--ov-text-muted);
}
/* ==========================================================================
   SAVINGS / DISCOUNT SECTION
   ========================================================================== */
.ov-cart-savings {
  margin-top: var(--ov-space-xl);
}
.ov-cart-savings .ov-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-cart-savings .ov-accordion-item {
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--ov-bg-card);
  overflow: hidden;
}
.ov-cart-savings .ov-accordion-header {
  margin: 0;
}
.ov-cart-savings .ov-accordion-trigger {
  all: unset;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--ov-space-xs) var(--ov-space-md);
  cursor: pointer;
  background: transparent;
  color: var(--ov-text-body);
  /* Chevron affordance */
}
.ov-cart-savings .ov-accordion-trigger::after {
  content: "▾";
  margin-left: auto;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}
.ov-cart-savings .ov-accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.ov-cart-savings .ov-accordion-trigger:hover {
  background: var(--ov-bg-muted);
}
.ov-cart-savings .ov-accordion-trigger:focus-visible {
  outline: 2px solid var(--ov-focus);
  outline-offset: 2px;
}
.ov-cart-savings .ov-accordion-panel {
  padding: var(--ov-space-sm) var(--ov-space-md);
  border-top: 1px solid var(--ov-border-subtle);
}
/* ==========================================================================
   CART TABLE WRAPPER
   ========================================================================== */
.ov-cart-table-wrapper {
  width: 100%;
}
/* ==========================================================================
   CART TABLE — DESKTOP DEFAULT
   ========================================================================== */
.ov-cart-table {
  width: 100%;
  border-collapse: collapse;
}
.ov-cart-table th, .ov-cart-table td {
  padding: var(--ov-space-sm);
  vertical-align: middle;
}
.ov-cart-table th {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ov-text-muted);
  text-align: left;
  border-bottom: 1px solid var(--ov-border-subtle);
  white-space: nowrap;
}
.ov-cart-table td {
  border-bottom: 1px solid var(--ov-border-subtle);
}
.ov-cart-table tr:last-child td {
  border-bottom: none;
}
/* ==========================================================================
   PRODUCT CELL
   ========================================================================== */
.ov-cart-product {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xs);
}
.ov-cart-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
/* ==========================================================================
   MOBILE — STACKED CARD LAYOUT
   ========================================================================== */
@media (max-width: 768px) {
  /* Image */
  /* Name */
  /* Quantity */
  /* Unit price */
  /* Total */
  .ov-cart-table {
    display: block;
  }
  .ov-cart-table thead {
    display: none;
  }
  .ov-cart-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--ov-space-md);
  }
  .ov-cart-table tr {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--ov-space-sm);
    padding: var(--ov-space-md);
    border-radius: var(--radius-lg);
    background: var(--ov-bg-card);
    border: 1px solid var(--ov-border-subtle);
  }
  .ov-cart-table td {
    border: none;
    padding: 0;
  }
  .ov-cart-table td:nth-child(1) {
    grid-row: 1 / span 3;
  }
  .ov-cart-table td:nth-child(2) {
    font-weight: 600;
  }
  .ov-cart-table td:nth-child(4) {
    margin-top: var(--ov-space-xs);
  }
  .ov-cart-table td:nth-child(5) {
    font-size: 0.85rem;
    color: var(--ov-text-muted);
  }
  .ov-cart-table td:nth-child(6) {
    font-weight: 700;
    margin-top: var(--ov-space-xs);
  }
}
/* ==========================================================================
   QUANTITY CONTROLS
   ========================================================================== */
.ov-cart-qty-form {
  display: flex;
}
.ov-qty-control {
  display: flex;
  align-items: center;
  gap: var(--ov-space-xs);
}
.ov-qty-input {
  width: 72px;
  text-align: center;
}
/* Increase tap targets on mobile */
@media (max-width: 768px) {
  .ov-qty-control button {
    min-width: 44px;
    min-height: 44px;
  }
}
/* ==========================================================================
   FALLBACK ACTIONS (MOBILE SAFETY)
   ========================================================================== */
.ov-cart-actions-fallback {
  margin-top: var(--ov-space-2xl);
}
@media (min-width: 768px) {
  .ov-cart-actions-fallback {
    display: none;
  }
}
/* ==========================================================================
   EMPTY CART
   ========================================================================== */
.ov-cart-empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
  max-width: 680px;
  margin-inline: auto;
  padding: var(--ov-space-3xl) var(--ov-space-xl) var(--ov-space-2xl);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-xl);
}
.ov-cart-empty__hero h2 {
  margin-bottom: var(--ov-space-xs);
}
.ov-cart-empty__intro {
  max-width: 42ch;
  margin-inline: auto;
}
.ov-cart-empty__icon {
  font-size: 2.25rem;
  margin-bottom: var(--ov-space-xs);
  color: var(--ov-green);
  opacity: 0.85;
}
.ov-cart-empty__category-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ov-space-sm);
  max-width: 520px;
  margin-inline: auto;
  margin-top: var(--ov-space-xl);
}
.ov-cart-empty__category-list .ov-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--ov-space-sm) var(--ov-space-md);
  font-weight: 500;
  background: var(--ov-bg-muted);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
  transition: background 0.2s ease, transform 0.15s ease;
}
.ov-cart-empty__category-list .ov-pill:hover {
  background: var(--ov-green);
  transform: translateY(-1px);
  text-decoration: none;
}
/* ==========================================================================
   CART ACTIONS — COUPON / REWARD / VOUCHER
   Visual refinement only (page-level orchestration)
   ========================================================================== */
.ov-cart-savings {
  /* Overall section rhythm */
  margin-top: var(--ov-space-2xl);
  /* Accordion stack already exists — refine cards */
  /* Header button (Coupon / Reward / Voucher) */
  /* Expanded panel */
  /* Form layout inside panels */
  /* Inputs */
  /* Apply buttons */
  /* Success / error messages inside actions */
}
.ov-cart-savings > h2 {
  margin-bottom: var(--ov-space-xs);
}
.ov-cart-savings > p {
  margin-bottom: var(--ov-space-md);
  max-width: 60ch;
}
.ov-cart-savings .ov-accordion-item {
  background: var(--ov-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border-subtle);
  box-shadow: var(--ov-shadow-xs);
  transition: box-shadow var(--ov-transition-normal), border-color var(--ov-transition-normal);
}
.ov-cart-savings .ov-accordion-item:hover {
  border-color: var(--ov-border-default);
  box-shadow: var(--ov-shadow-sm);
}
.ov-cart-savings .ov-accordion-trigger {
  font-family: var(--ov-font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--ov-space-sm) var(--ov-space-lg);
}
.ov-cart-savings .ov-accordion-trigger::after {
  font-size: 0.75rem;
  opacity: 0.6;
}
.ov-cart-savings .ov-accordion-panel {
  padding: var(--ov-space-md) var(--ov-space-lg);
  background: linear-gradient(to bottom, var(--ov-bg-card), var(--ov-bg-muted));
}
.ov-cart-savings form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ov-space-sm);
  align-items: end;
}
@media (max-width: 576px) {
  .ov-cart-savings form {
    grid-template-columns: 1fr;
  }
}
.ov-cart-savings input[type="text"], .ov-cart-savings input[type="number"] {
  height: var(--ov-control-height-md);
  padding-inline: var(--ov-space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ov-border-default);
  background: var(--ov-bg-card);
  font-size: 0.95rem;
  transition: border-color var(--ov-transition-fast), box-shadow var(--ov-transition-fast);
}
.ov-cart-savings input[type="text"]:focus, .ov-cart-savings input[type="number"]:focus {
  border-color: var(--ov-green);
  box-shadow: 0 0 0 2px rgba(0, 150, 90, 0.15);
  outline: none;
}
.ov-cart-savings button, .ov-cart-savings .btn {
  height: var(--ov-control-height-md);
  padding-inline: var(--ov-space-lg);
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
}
.ov-cart-savings .text-danger, .ov-cart-savings .text-success {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  margin-top: var(--ov-space-xs);
}
/* ==========================================================================
   CART ACTIONS — COUPON / REWARD / VOUCHER (FINAL)
   Purpose:
   - Card-like clarity
   - Proper spacing + hierarchy
   - Input + button visually grouped
   - Desktop + mobile aligned
   ========================================================================== */
.ov-cart-savings {
  /* Each action becomes a clean card */
  /* Section title (Cupón / Puntos / Vale) */
  /* Form layout */
  /* Input + button group */
  /* Inputs */
  /* Apply buttons */
}
.ov-cart-savings .ov-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-cart-savings .ov-cart-action {
  padding: var(--ov-space-md) var(--ov-space-lg);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
  transition: box-shadow var(--ov-transition-normal), border-color var(--ov-transition-normal);
}
.ov-cart-savings .ov-cart-action:hover {
  border-color: var(--ov-border-default);
  box-shadow: var(--ov-shadow-sm);
}
.ov-cart-savings .ov-cart-action > h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.ov-cart-savings .ov-cart-action-form {
  display: block;
}
.ov-cart-savings .ov-cart-action .ov-input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ov-space-sm);
  align-items: stretch;
}
@media (max-width: 576px) {
  .ov-cart-savings .ov-cart-action .ov-input-group {
    grid-template-columns: 1fr;
  }
}
.ov-cart-savings .ov-cart-action .ov-input {
  height: var(--ov-control-height-md);
  padding-inline: var(--ov-space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ov-border-default);
  background: var(--ov-bg-card);
  font-size: 0.95rem;
  transition: border-color var(--ov-transition-fast), box-shadow var(--ov-transition-fast);
}
.ov-cart-savings .ov-cart-action .ov-input:focus {
  border-color: var(--ov-green);
  box-shadow: 0 0 0 2px rgba(0, 150, 90, 0.15);
  outline: none;
}
.ov-cart-savings .ov-cart-action .ov-btn {
  height: var(--ov-control-height-md);
  padding-inline: var(--ov-space-lg);
  border-radius: var(--ov-radius-pill);
  font-weight: 600;
  white-space: nowrap;
}
/* ==========================================================================
   OV STORE — CATEGORY PAGE
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================== */
.ov-category-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-category-header {
  max-width: 72ch;
}
/* ## Refine links (subcategories) */
.ov-category-refine__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--ov-border-subtle);
  text-decoration: none;
  color: var(--ov-text-main);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}
.ov-category-refine__link:hover, .ov-category-refine__link:focus-visible {
  background: var(--ov-grey-100);
  border-color: var(--ov-border-light);
  color: var(--ov-green-dark);
}
/* ## Controls row */
.ov-category-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--ov-space-md);
  align-items: end;
  margin-bottom: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-category-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
/* ## Products section */
.ov-category-products {
  gap: var(--ov-space-xl);
}
/* ## Pagination row */
.ov-category-pagination {
  margin-top: var(--ov-space-xl);
}
/* ==========================================================================
   MOBILE IMPROVEMENTS
   ========================================================================== */
@media (max-width: 767.98px) {
  /* ## Refine: make it feel like a lightweight filter chip set */
  /* ## Controls: stack + full width + comfy touch targets */
  /* If the compare button wraps, keep it readable */
  /* ## Grid rhythm: slightly tighter but still breathable */
  /* ## Pagination: stack */
  /* ## Empty state: make CTA full width */
  .ov-category-page {
    gap: var(--ov-space-xl);
  }
  .ov-category-header {
    max-width: none;
  }
  .ov-category-refine .ov-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ov-space-sm);
  }
  .ov-category-refine__link {
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 0.95rem;
  }
  .ov-category-controls {
    grid-template-columns: 1fr;
    gap: var(--ov-space-sm);
  }
  .ov-category-controls .ov-btn, .ov-category-controls .ov-select {
    width: 100%;
  }
  .ov-category-controls .ov-select {
    min-height: 44px;
  }
  #compare-total {
    justify-content: center;
    min-height: 44px;
  }
  .ov-products-grid {
    gap: var(--ov-space-lg);
  }
  .ov-category-pagination {
    display: flex;
    flex-direction: column;
    gap: var(--ov-space-sm);
    align-items: stretch;
  }
  .ov-category-pagination .ov-pagination {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ov-category-pagination .ov-text-sm {
    text-align: center;
  }
  .ov-empty-state .ov-btn {
    width: 100%;
  }
}
/* ============================================================================
   OV STORE — PAGES — CHECKOUT
   Page orchestration only:
   - layout
   - spacing
   - responsiveness
   - sticky summary
   - terminal confirm layout
   Uses OV CSS variables from ov-core/_variables.scss
   Does NOT restyle shared components.
============================================================================ */
/* --------------------------------------------------------------------------
   Root
-------------------------------------------------------------------------- */
.ov-checkout-page {
  --ov-checkout-gap: var(--ov-space-xl);
  --ov-checkout-col-right: 24rem;
  --ov-checkout-sticky-top: calc(var(--ov-header-offset) + var(--ov-space-lg));
  --ov-checkout-enter-duration: 0.2s;
  --ov-checkout-enter-ease: ease-out;
  --ov-checkout-muted-opacity: 0.78;
}
/* --------------------------------------------------------------------------
   Layout
   IMPORTANT:
   - Default is single-column everywhere.
   - Two-column is enabled ONLY when .has-confirm is present.
-------------------------------------------------------------------------- */
.ov-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ov-space-xl);
  align-items: start;
}
.ov-checkout-layout.has-confirm {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}
@media (min-width: 992px) {
  .ov-checkout-layout.has-confirm {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ov-checkout-col-right));
  }
}
/* --------------------------------------------------------------------------
   Columns
-------------------------------------------------------------------------- */
.ov-checkout-column {
  min-width: 0;
}
/* Right column MUST NOT reserve space unless confirm is actually available */
.ov-checkout-column--terminal {
  display: none;
  padding-bottom: var(--ov-space-3xl);
}
/* When confirm is available, show the right column */
.ov-checkout-layout.has-confirm .ov-checkout-column--terminal {
  display: block;
}
@media (min-width: 992px) {
  .ov-checkout-layout.has-confirm .ov-checkout-column--terminal {
    position: sticky;
    top: var(--ov-checkout-sticky-top);
    align-self: start;
    overflow: visible;
  }
}
/* --------------------------------------------------------------------------
   Step visibility
-------------------------------------------------------------------------- */
.ov-checkout-page [data-ov-step] {
  margin: 0;
}
.ov-checkout-page [data-ov-step][hidden] {
  display: none !important;
}
/* --------------------------------------------------------------------------
   Confirm is visually muted until terminal state
-------------------------------------------------------------------------- */
.ov-checkout-page [data-ov-step="confirm"][data-ov-step-state="idle"] {
  opacity: var(--ov-checkout-muted-opacity);
}
/* --------------------------------------------------------------------------
   Step header
-------------------------------------------------------------------------- */
.ov-checkout-step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ov-space-md);
}
.ov-checkout-step-header__title {
  min-width: 0;
}
.ov-checkout-step-header__status {
  flex: 0 0 auto;
}
.ov-checkout-step-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ov-text-xs);
  line-height: 1;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ov-border-color-soft);
  background: var(--ov-bg-muted);
  color: var(--ov-text-muted);
  white-space: nowrap;
}
[data-ov-step][data-ov-step-state="current"] .ov-checkout-step-status {
  background: var(--ov-blue-05);
  color: var(--ov-blue-90);
  border-color: rgba(146, 211, 245, 0.35);
}
[data-ov-step][data-ov-step-state="complete"] .ov-checkout-step-status {
  background: var(--ov-state-success-bg);
  color: var(--ov-state-success-text);
  border-color: rgba(46, 184, 114, 0.25);
}
[data-ov-step][data-ov-step-state="idle"] .ov-checkout-step-status:empty {
  display: none;
}
/* --------------------------------------------------------------------------
   Step entrance animation
-------------------------------------------------------------------------- */
.ov-checkout-step-enter {
  animation: ov-checkout-enter var(--ov-checkout-enter-duration) var(--ov-checkout-enter-ease);
}
@keyframes ov-checkout-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --------------------------------------------------------------------------
   Account step sub-steps (visual segmentation inside Step 1)
-------------------------------------------------------------------------- */
.ov-checkout-substep {
  padding-top: var(--ov-space-lg);
  border-top: 1px solid var(--ov-border-color-soft);
}
.ov-checkout-substep:first-child {
  padding-top: 0;
  border-top: 0;
}
/* --------------------------------------------------------------------------
   Address selection (payment / shipping)
-------------------------------------------------------------------------- */
[data-ov-address-scope] .ov-checkout-option-list {
  gap: var(--ov-space-md);
}
[data-ov-address-scope] .ov-checkout-option {
  padding: var(--ov-space-md);
  box-shadow: var(--shadow-xs);
}
[data-ov-address-scope] .ov-checkout-option__title {
  font-size: var(--ov-text-md);
}
[data-ov-address-scope] .ov-checkout-option:has(> input[type="radio"]:checked) {
  border-color: var(--ov-focus-ring);
  background: var(--ov-bg-card);
  box-shadow: var(--shadow-sm);
}
/* Secondary affordance for "Add new address" option */
[data-ov-address-scope] .ov-checkout-option > input[value="new"] + .ov-checkout-option__body {
  opacity: 0.85;
}
[data-ov-address-scope] .ov-checkout-option > input[value="new"]:checked + .ov-checkout-option__body {
  opacity: 1;
}
/* --------------------------------------------------------------------------
   Address form compaction (Tier 1)
   - Keep everything accessible
   - Reduce vertical height by rearranging spans
-------------------------------------------------------------------------- */
.ov-address-grid .ov-field[data-ov-span="2"] {
  grid-column: 1 / -1;
}
/* Optional fields: visually quieter without hiding labels */
.ov-address-grid .ov-field[data-ov-optional="true"] .ov-label {
  opacity: 0.9;
}
/* --------------------------------------------------------------------------
   Address form grid — authoritative
   - Page-level only
   - Overrides generic form behavior safely
-------------------------------------------------------------------------- */
.ov-checkout-page {
  /* Reset any global full-span behavior */
  /* Explicit full-width rows only */
  /* Mobile: single column always */
}
.ov-checkout-page .ov-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ov-space-md);
}
.ov-checkout-page .ov-address-grid > .ov-field {
  grid-column: auto;
}
.ov-checkout-page .ov-address-grid > .ov-field[data-ov-span="2"] {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .ov-checkout-page .ov-address-grid {
    grid-template-columns: 1fr;
  }
}
/* --------------------------------------------------------------------------
   Shipping option list
-------------------------------------------------------------------------- */
.ov-checkout-option-list {
  display: grid;
  gap: var(--ov-space-sm);
}
.ov-checkout-option {
  display: block;
  padding: var(--ov-space-sm) var(--ov-space-md);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-color-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--ov-transition-fast), background var(--ov-transition-fast);
}
.ov-checkout-option:hover {
  background: var(--ov-bg-card-hover);
}
.ov-checkout-option > input[type="radio"] {
  float: left;
  margin: 0.15rem var(--ov-space-md) 0 0;
}
.ov-checkout-option__title {
  font-size: var(--ov-text-sm);
  font-weight: 600;
}
/* --------------------------------------------------------------------------
   Confirm / Pay area
-------------------------------------------------------------------------- */
.ov-checkout-confirmbar {
  display: grid;
  gap: var(--ov-space-md);
  padding-top: var(--ov-space-md);
  padding-bottom: var(--ov-space-xl);
}
.ov-checkout-confirmbar .ov-btn {
  width: 100%;
  justify-content: center;
}
.ov-checkout-terms {
  padding: var(--ov-space-md) 0;
  border-top: 1px solid var(--ov-border-color-soft);
}
/* --------------------------------------------------------------------------
   Terminal confirm layout (authoritative)
-------------------------------------------------------------------------- */
.ov-checkout--terminal .ov-checkout-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 64rem;
  margin-inline: auto;
}
.ov-checkout--terminal .ov-checkout-column--left {
  display: none;
}
.ov-checkout--terminal .ov-checkout-column--terminal {
  display: block;
  max-width: none;
}
/* --------------------------------------------------------------------------
   Order summary table safety
-------------------------------------------------------------------------- */
.ov-order-summary {
  width: 100%;
  table-layout: fixed;
}
.ov-checkout-page [data-ov-step="confirm"] .ov-table-wrapper {
  overflow-x: auto;
  max-width: 100%;
}
/* --------------------------------------------------------------------------
   Confirm (side column) — text truncation & spacing safety
-------------------------------------------------------------------------- */
.ov-checkout-column--terminal, .ov-checkout-column--terminal * {
  min-width: 0;
}
.ov-order-summary__product-line {
  display: flex;
  align-items: baseline;
  gap: var(--ov-space-xs);
  min-width: 0;
}
.ov-order-summary__qty {
  flex: 0 0 auto;
  white-space: nowrap;
}
.ov-order-summary__name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-order-summary__meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ov-order-summary__total {
  white-space: nowrap;
}
.ov-order-summary td {
  vertical-align: top;
}
/* --------------------------------------------------------------------------
   Confirm action spacing (button comfort zone)
-------------------------------------------------------------------------- */
.ov-checkout-column--terminal .ov-card-body + .ov-checkout-confirmbar {
  margin-top: var(--ov-space-lg);
}
.ov-checkout-confirmbar {
  padding-top: var(--ov-space-md);
}
@media (max-width: 991.98px) {
  .ov-checkout-confirmbar {
    padding-top: var(--ov-space-sm);
  }
}
/* --------------------------------------------------------------------------
   Mobile polish
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ov-checkout-page {
    --ov-checkout-gap: var(--ov-space-lg);
  }
  .ov-checkout-confirmbar {
    padding-bottom: var(--ov-space-2xl);
  }
}
/* --------------------------------------------------------------------------
   Loading overlays
-------------------------------------------------------------------------- */
@keyframes ov-checkout-spin {
  to {
    transform: rotate(360deg);
  }
}
[data-ov-step][data-ov-loading-surface] {
  position: relative;
}
[data-ov-checkout][data-ov-loading="true"] [data-ov-step][data-ov-loading-surface]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  z-index: 5;
}
[data-ov-checkout][data-ov-loading="true"] [data-ov-step][data-ov-loading-surface]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--ov-focus-ring);
  animation: ov-checkout-spin 0.9s linear infinite;
  z-index: 6;
}
@media (prefers-reduced-motion: reduce) {
  .ov-checkout-step-enter {
    animation: none;
  }
}
/* --------------------------------------------------------------------------
   Account choice list layout
   - Always one option per row
   - Prevent inline / multi-column wrapping
-------------------------------------------------------------------------- */
.ov-checkout-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-checkout-choice {
  display: block;
  width: 100%;
}
/* --------------------------------------------------------------------------
   Account choice meta text
   - Secondary explanatory text under option title
   - Visual demotion only (no component restyling)
-------------------------------------------------------------------------- */
.ov-checkout-choice__meta {
  margin-top: 0.15rem;
  font-size: var(--ov-text-sm);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ov-text-muted);
  opacity: 0.9;
}
.ov-checkout-choice:has(input[type="radio"]:checked) .ov-checkout-choice__meta {
  opacity: 1;
}
/* ==========================================================================
   OV STORE — PRODUCT COMPARE PAGE
   Utility listing page (table-based)
   ========================================================================== */
.ov-compare-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */
.ov-compare-header {
  max-width: 72ch;
}
/* ------------------------------------------------------------
   TABLE WRAPPER
------------------------------------------------------------ */
.ov-compare-content {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
}
/* ------------------------------------------------------------
   TABLE TWEAKS
------------------------------------------------------------ */
.ov-table--compare {
  min-width: 720px;
}
.ov-compare-image {
  text-align: center;
}
.ov-compare-image img {
  max-width: 120px;
  height: auto;
  display: inline-block;
}
/* ------------------------------------------------------------
   ACTIONS
------------------------------------------------------------ */
.ov-compare-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-xs);
}
/* ------------------------------------------------------------
   MOBILE REFINEMENTS
------------------------------------------------------------ */
@media (max-width: 576px) {
  .ov-compare-table-wrap {
    border-radius: var(--radius-md);
  }
  .ov-compare-image img {
    max-width: 96px;
  }
}
/* =============================================================
   CHECKOUT CONFIRMATION — ORCHESTRATION ONLY (FINAL)
   ============================================================= */
#confirm-page {
  margin: var(--ov-space-lg) 0 var(--ov-space-xl);
}
/* -------------------------------------------------------------
   WRAPPER
------------------------------------------------------------- */
.ov-confirm-wrapper {
  margin-top: var(--ov-space-md);
  margin-bottom: var(--ov-space-lg);
}
/* -------------------------------------------------------------
   TABLE CONTAINER
------------------------------------------------------------- */
.ov-confirm-table {
  overflow: hidden;
}
/* -------------------------------------------------------------
   PRODUCT META
------------------------------------------------------------- */
.ov-order-meta, .ov-order-option {
  margin-top: 2px;
}
/* -------------------------------------------------------------
   TOTALS
------------------------------------------------------------- */
.ov-order-total {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xxs);
}
/* -------------------------------------------------------------
   PAYMENT
------------------------------------------------------------- */
.ov-payment-container {
  margin-top: var(--ov-space-md);
  padding-top: var(--ov-space-md);
}
/* -------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------- */
@media (max-width: 576px) {
  .ov-order-summary td, .ov-order-summary th {
    white-space: normal !important;
  }
}
/* ==========================================================================
   Contact page (section-based)
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================= */
.ov-contact-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-3xl);
}
/* ------------------------------------------------------------
   Contact info
   ------------------------------------------------------------ */
.ov-contact-info {
  padding-top: 0;
}
.ov-contact-grid {
  display: grid;
  gap: var(--ov-space-xl);
}
.ov-contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-contact-address {
  line-height: 1.5;
}
/* ------------------------------------------------------------
   Contact form
   ------------------------------------------------------------ */
.ov-contact-form-section {
  padding-top: 0;
}
.ov-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-contact-legal {
  margin-top: var(--ov-space-sm);
}
.ov-contact-form-actions {
  margin-top: var(--ov-space-xl);
  display: flex;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .ov-contact-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
}
/* ==========================================================================
   Explore (information) page — container-based
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================== */
.ov-explore-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ## Hero */
.ov-explore-hero {
  text-align: center;
  padding-top: var(--ov-space-lg);
}
.ov-explore-hero p {
  margin-inline: auto;
}
/* ## Categories */
.ov-explore-categories {
  padding-top: var(--ov-space-lg);
}
.ov-explore-categories__grid {
  margin-top: var(--ov-space-lg);
}
/* ## Reassurance strip (compact) */
.ov-explore-reassurance {
  padding-block: var(--ov-space-md);
}
.ov-explore-reassurance__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ov-space-sm) var(--ov-space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-explore-reassurance__item {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ov-text-muted);
}
/* ## Meet makers */
.ov-explore-meet {
  text-align: center;
  padding-top: var(--ov-space-xl);
}
.ov-explore-meet p {
  margin-inline: auto;
}
/* ==========================================================================
   Explore page (container-based)
   ========================================================================= */
.ov-explore-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-explore-list {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-3xl);
}
.ov-explore-category-block {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-explore-category-block__header {
  margin-bottom: var(--ov-space-md);
}
.ov-explore-category-block__actions {
  margin-top: var(--ov-space-lg);
}
@media (min-width: 768px) {
  .ov-explore-page {
    gap: var(--ov-space-3xl);
  }
}
/* ==========================================================================
   FAQ PAGE — ORCHESTRATION ONLY (FINAL)
   ========================================================================== */
.ov-faq-page {
  display: flex;
  flex-direction: column;
}
/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.ov-faq-hero {
  padding-bottom: var(--ov-space-lg);
}
.ov-faq-intro {
  max-width: 36rem;
}
/* ------------------------------------------------------------
   CONTROLS
------------------------------------------------------------ */
.ov-faq-controls {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-faq-controls .ov-input {
  max-width: 28rem;
}
/* Tabs — layout only */
.ov-faq-tabs {
  display: inline-flex;
  gap: var(--ov-space-xs);
}
/* ------------------------------------------------------------
   PANELS / ACCORDION
------------------------------------------------------------ */
.ov-faq-panel {
  padding-top: var(--ov-space-lg);
}
.ov-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-faq-item {
  display: flex;
  flex-direction: column;
}
/* ------------------------------------------------------------
   ANSWER SPACING
------------------------------------------------------------ */
.ov-faq-answer {
  margin-top: var(--ov-space-md);
  margin-bottom: var(--ov-space-md);
}
/* Expanded item spacing */
.ov-faq-item.is-open {
  margin-block: var(--ov-space-md);
}
.ov-faq-item.is-open .ov-faq-answer {
  margin-top: var(--ov-space-lg);
  margin-bottom: var(--ov-space-lg);
}
/* No results */
.ov-faq-no-results {
  margin-top: var(--ov-space-md);
}
/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */
@media (min-width: 768px) {
  .ov-faq-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (max-width: 576px) {
  .ov-faq-accordion {
    gap: var(--ov-space-md);
  }
}
/* ==========================================================================
   OV STORE — HOME PAGE (ORCHESTRATION ONLY · v1.0)
   - ov-content is the ONLY centering authority
   - ov-store-main owns vertical rhythm
   ========================================================================== */
.ov-home-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-3xl);
}
@media (max-width: 576px) {
  .ov-home-page {
    gap: var(--ov-space-2xl);
  }
}
/* ==========================================================================
   Hero refinements (ground text + elevate CTA)
   ========================================================================== */
.ov-hero__overlay {
  /* Ensure the hero copy is readable on all hero crops */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--ov-space-2xl);
}
.ov-hero__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Soft gradient grounding: keeps it premium, not “dark banner” */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.7));
}
.ov-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-space-md);
}
.ov-hero__sub {
  color: var(--ov-text-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 56ch;
}
/* ==========================================================================
   Home section headers (light editorial guidance)
   ========================================================================== */
.ov-home-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xs);
  text-align: center;
  margin-bottom: var(--ov-space-lg);
}
.ov-home-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, calc(1.1rem + 0.8vw), 1.75rem);
  line-height: 1.2;
}
.ov-home-section__sub {
  color: var(--ov-text-muted);
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.55;
}
/* ==========================================================================
   Categories
   ========================================================================== */
.ov-category-block {
  margin: 0;
}
.ov-category-block__inner {
  padding: var(--ov-space-md);
}
@media (max-width: 768px) {
  .ov-category-block__inner {
    padding: var(--ov-space-sm);
  }
}
/* ==========================================================================
   Curated products grid (page-local, minimal)
   ========================================================================== */
.ov-home-products__grid {
  display: grid;
  gap: var(--ov-space-lg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .ov-home-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .ov-home-products__grid {
    grid-template-columns: 1fr;
    gap: var(--ov-space-md);
  }
}
/* Subtle pricing (premium editorial feel) */
.ov-home-products__price {
  opacity: 0.92;
}
.ov-home-products__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--ov-space-xs);
}
/* ==========================================================================
   Values (compact)
   ========================================================================== */
.ov-values {
  display: grid;
  gap: var(--ov-space-md);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--ov-space-md);
}
@media (max-width: 768px) {
  .ov-values {
    grid-template-columns: 1fr;
  }
}
.ov-values__item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--ov-space-lg);
  text-align: center;
}
.ov-values__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
}
.ov-values__sub {
  margin-top: var(--ov-space-2xs);
  color: var(--ov-text-muted);
  line-height: 1.5;
}
/* ==========================================================================
   OV STORE — INFORMATION PAGES (ORCHESTRATION ONLY · FINAL)
   ========================================================================== */
.ov-information-page {
  display: block;
}
/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */
.ov-information-header {
  margin-bottom: var(--ov-space-xl);
}
.ov-information-content {
  max-width: 60ch;
  margin-inline: auto;
}
/* ------------------------------------------------------------
   SECTION RHYTHM
------------------------------------------------------------ */
.ov-information-page .ov-info-intro, .ov-information-page .ov-info-role, .ov-information-page .ov-info-values {
  margin-bottom: var(--ov-space-3xl);
}
.ov-information-page .ov-info-intro__header, .ov-information-page .ov-info-role__header, .ov-information-page .ov-info-values__header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--ov-space-md);
}
.ov-information-page .ov-info-intro__body, .ov-information-page .ov-info-role__body, .ov-information-page .ov-info-values__body {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-information-page .ov-info-intro__divider, .ov-information-page .ov-info-role__divider, .ov-information-page .ov-info-values__divider {
  margin-block: var(--ov-space-sm);
}
/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */
@media (max-width: 576px) {
  .ov-information-header {
    margin-bottom: var(--ov-space-lg);
  }
  .ov-information-page .ov-info-intro, .ov-information-page .ov-info-role, .ov-information-page .ov-info-values {
    margin-bottom: var(--ov-space-2xl);
  }
}
/* ==========================================================================
   OV Store — Legal Pages (ORCHESTRATION ONLY · FINAL)
   Scope: spacing, rhythm, responsive behavior
   Visual & typographic rules live in ov-components/_legal.scss
   ========================================================================== */
.ov-information-page {
  /* ------------------------------------------------------------
     Content rhythm
     ------------------------------------------------------------ */
}
.ov-information-page p {
  margin-block: var(--ov-space-sm);
}
.ov-information-page p + p {
  margin-top: var(--ov-space-md);
}
.ov-information-page ul, .ov-information-page ol {
  margin-block: var(--ov-space-sm);
}
.ov-information-page li {
  margin-bottom: var(--ov-space-xs);
}
.ov-information-page h2 {
  margin-top: var(--ov-space-2xl);
  margin-bottom: var(--ov-space-md);
}
.ov-information-page h2 + p {
  margin-top: var(--ov-space-sm);
}
/* ------------------------------------------------------------
   Mobile refinements
------------------------------------------------------------ */
@media (max-width: 576px) {
  .ov-information-page h2 {
    margin-top: var(--ov-space-xl);
  }
}
/* ==========================================================================
   Manufacturer pages (container-based)
   ========================================================================= */
.ov-manufacturer-page, .ov-manufacturer-list-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Manufacturer info
   ------------------------------------------------------------ */
.ov-manufacturer-results {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-manufacturer-controls {
  display: grid;
  gap: var(--ov-space-lg);
}
.ov-manufacturer-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ov-space-xl);
}
.ov-manufacturer-empty {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
/* ------------------------------------------------------------
   Manufacturer list
   ------------------------------------------------------------ */
.ov-manufacturer-index {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-manufacturer-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-md);
}
.ov-manufacturer-group {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
  padding-top: var(--ov-space-xl);
}
.ov-manufacturer-group__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-lg);
}
@media (min-width: 768px) {
  .ov-manufacturer-page, .ov-manufacturer-list-page {
    gap: var(--ov-space-3xl);
  }
  .ov-manufacturer-controls {
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
  }
}
/* ==========================================================================
   Meet page — section-based (ORCHESTRATION ONLY · FINAL)
   ==========================================================================
   Rules:
   - No component styling
   - Layout, spacing, rhythm only
   - Mobile-first
   ========================================================================== */
.ov-meet-page {
  display: flex;
  flex-direction: column;
}
/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.ov-meet-hero {
  text-align: center;
  padding-bottom: var(--ov-space-3xl);
}
/* ------------------------------------------------------------
   Founder
------------------------------------------------------------ */
.ov-meet-founder {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--ov-space-4xl);
  text-align: left;
}
/* ------------------------------------------------------------
   Values
------------------------------------------------------------ */
.ov-meet-values {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--ov-space-4xl);
}
/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.ov-meet-cta {
  text-align: center;
}
.ov-meet-actions {
  margin-top: var(--ov-space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ov-space-md);
}
/* ==========================================================================
   OV STORE — PRODUCT PAGE (PDP)
   Page SCSS: spacing, grouping, rhythm, responsive behavior only.
   ========================================================================== */
.ov-product-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-product-layout {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
.ov-product-summary {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-product-price-block {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-product-options {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-product-purchase {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
  margin-top: var(--ov-space-md);
}
.ov-product-qty {
  max-width: 10rem;
}
.ov-product-rating-summary {
  margin-top: var(--ov-space-lg);
}
/* ==========================================================================
   PRODUCT TABS (EDITORIAL)
   ========================================================================== */
.ov-product-tabs {
  margin-top: var(--ov-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
  /* Review count pill */
}
.ov-product-tabs .ov-tabs {
  display: flex;
  gap: var(--ov-space-xl);
  border-bottom: 1px solid var(--ov-border-subtle);
  padding-bottom: var(--ov-space-xs);
}
.ov-product-tabs .nav-link {
  padding: var(--ov-space-sm);
  font-weight: 500;
  color: var(--ov-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ov-product-tabs .nav-link:hover {
  color: var(--ov-text-color);
}
.ov-product-tabs .nav-link.active {
  color: var(--ov-text-color);
  border-bottom-color: var(--ov-color-brand-strong);
}
.ov-product-tabs .ov-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  background: var(--ov-bg-muted);
  color: var(--ov-text-muted);
}
.ov-product-tabs .tab-pane {
  padding-top: var(--ov-space-xl);
}
.ov-product-tabs #tab-description {
  max-width: 65ch;
}
.ov-product-related {
  margin-top: var(--ov-space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-product-tags {
  margin-top: var(--ov-space-xl);
}
.ov-product-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-product-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--ov-space-sm);
}
.ov-choice-image {
  max-width: 2.25rem;
  height: auto;
}
/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 767.98px) {
  .ov-product-page {
    gap: var(--ov-space-xl);
  }
  .ov-product-tabs .ov-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .ov-product-tabs .nav-link {
    white-space: nowrap;
    min-height: 44px;
    scroll-snap-align: start;
  }
}
/* ==========================================================================
   DESKTOP+
   ========================================================================== */
@media (min-width: 768px) {
  .ov-product-page {
    gap: var(--ov-space-3xl);
  }
  .ov-product-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ov-space-3xl);
  }
}
/* ==========================================================================
   Roadmap page — section-based (ORCHESTRATION ONLY · FINAL)
   ========================================================================== */
.ov-roadmap-page {
  display: flex;
  flex-direction: column;
}
/* ------------------------------------------------------------
   Hero
------------------------------------------------------------ */
.ov-roadmap-hero {
  text-align: center;
  padding-bottom: var(--ov-space-3xl);
}
.ov-roadmap-current {
  margin-top: var(--ov-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
  align-items: center;
  text-align: center;
}
/* ------------------------------------------------------------
   Timeline
------------------------------------------------------------ */
.ov-roadmap-timeline {
  padding-top: var(--ov-space-4xl);
}
.ov-roadmap-timeline-list {
  margin-top: var(--ov-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
/* ------------------------------------------------------------
   Next steps
------------------------------------------------------------ */
.ov-roadmap-next {
  padding-top: var(--ov-space-4xl);
}
.ov-roadmap-next-list {
  margin-top: var(--ov-space-lg);
  display: grid;
  gap: var(--ov-space-md);
}
/* ------------------------------------------------------------
   Backlog
------------------------------------------------------------ */
.ov-roadmap-backlog {
  padding-top: var(--ov-space-4xl);
}
/* ------------------------------------------------------------
   Values
------------------------------------------------------------ */
.ov-roadmap-values {
  padding-top: var(--ov-space-4xl);
}
.ov-roadmap-values-list {
  margin-top: var(--ov-space-lg);
  display: grid;
  gap: var(--ov-space-lg);
}
/* ------------------------------------------------------------
   CTA
------------------------------------------------------------ */
.ov-roadmap-cta {
  text-align: center;
  padding-block: var(--ov-space-4xl);
}
@media (min-width: 768px) {
  .ov-roadmap-next-list, .ov-roadmap-values-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .ov-roadmap-next-list, .ov-roadmap-values-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==========================================================================
   Search page (container-based)
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================= */
.ov-search-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Search form
   ------------------------------------------------------------ */
.ov-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-search-form__fields {
  display: grid;
  gap: var(--ov-space-lg);
}
.ov-search-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-search-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
  margin-top: var(--ov-space-xs);
}
.ov-search-form__actions {
  display: flex;
  justify-content: flex-end;
}
/* ------------------------------------------------------------
   Results
   ------------------------------------------------------------ */
.ov-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-search-controls {
  display: grid;
  gap: var(--ov-space-lg);
}
.ov-search-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ov-space-xl);
}
/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */
.ov-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-space-md);
  text-align: center;
}
@media (min-width: 768px) {
  .ov-search-page {
    gap: var(--ov-space-3xl);
  }
  .ov-search-form__fields {
    grid-template-columns: 1fr 1fr;
  }
  .ov-search-controls {
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
  }
}
/* ==========================================================================
   Sitemap page — section-based
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================= */
.ov-sitemap-page {
  display: flex;
  flex-direction: column;
}
/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.ov-sitemap-hero {
  padding-bottom: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Content
   ------------------------------------------------------------ */
.ov-sitemap-content {
  padding-top: 0;
}
.ov-sitemap-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-3xl);
}
.ov-sitemap-block {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-sitemap-list {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-sitemap-list > li {
  margin-bottom: var(--ov-space-md);
}
.ov-sitemap-sublist {
  margin-top: var(--ov-space-xs);
  margin-left: var(--ov-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
@media (min-width: 768px) {
  .ov-sitemap-grid {
    flex-direction: row;
    gap: var(--ov-space-4xl);
  }
  .ov-sitemap-block {
    flex: 1;
  }
}
/* ==========================================================================
   Special products page (container-based)
   Page SCSS: spacing, grouping, rhythm, responsive behavior only
   ========================================================================= */
.ov-special-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Results
   ------------------------------------------------------------ */
.ov-special-results {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-special-controls {
  display: grid;
  gap: var(--ov-space-lg);
}
.ov-special-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ov-space-xl);
}
/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */
.ov-special-empty {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
@media (min-width: 768px) {
  .ov-special-page {
    gap: var(--ov-space-3xl);
  }
  .ov-special-controls {
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
  }
}
/* ==========================================================================
   OV Store — Success Page
   Page glue only: spacing, rhythm, responsive behavior
   ========================================================================== */
.ov-success-page {
  padding-block: var(--ov-space-xl);
}
@media (max-width: 768px) {
  .ov-success-page {
    padding-block: var(--ov-space-lg);
  }
}
@media (max-width: 576px) {
  .ov-success-page {
    padding-block: var(--ov-space-md);
  }
}
/* Centered success panel */
.ov-success {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
  padding: var(--ov-space-xl);
  border-radius: var(--radius-lg);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-color-soft);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 576px) {
  .ov-success {
    padding: var(--ov-space-md);
    gap: var(--ov-space-md);
  }
}
.ov-success__hero {
  text-align: center;
  display: grid;
  gap: var(--ov-space-sm);
  justify-items: center;
}
.ov-success__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  background: var(--ov-state-success-bg);
  color: var(--ov-state-success-text);
  border: 1px solid rgba(46, 184, 114, 0.25);
}
.ov-success__title {
  margin: 0;
}
.ov-success__subtitle {
  margin: 0;
  color: var(--ov-text-muted);
}
.ov-success__summary {
  padding: var(--ov-space-md);
  border-radius: var(--radius-md);
  background: var(--ov-bg-muted);
  border: 1px solid var(--ov-border-color-soft);
}
.ov-success__summary-title {
  margin: 0 0 var(--ov-space-sm) 0;
}
.ov-success__summary-list {
  display: grid;
  gap: var(--ov-space-xs);
  margin: 0;
}
.ov-success__summary-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ov-space-md);
  align-items: baseline;
}
.ov-success__summary-row dt {
  color: var(--ov-text-muted);
}
.ov-success__summary-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
.ov-success__reassurance {
  text-align: center;
}
.ov-success__actions {
  display: flex;
  gap: var(--ov-space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
/* ==========================================================================
   OV STORE — VENDOR STOREFRONT PAGE
   Page SCSS: spacing, grouping, rhythm, responsive behavior only.
   ========================================================================== */
.ov-vendor-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* Hero spacing → first content card */
.ov-vendor-hero {
  margin-bottom: var(--ov-space-lg);
}
/* Ensure hero identity card doesn’t feel detached on small screens */
.ov-vendor-hero__identity {
  width: 100%;
  max-width: 56rem;
}
/* Meta row: keep items readable and wrap nicely */
.ov-vendor-hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-sm) var(--ov-space-lg);
  margin: var(--ov-space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.ov-vendor-hero__meta-row li {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
}
/* Social links: consistent spacing */
.ov-vendor-hero__social {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ov-space-xs);
  margin-top: var(--ov-space-sm);
}
/* Products section: keep grid comfortably separated from header */
.ov-vendor-page .ov-products-grid {
  margin-top: var(--ov-space-sm);
}
/* Responsive tuning */
@media (min-width: 768px) {
  .ov-vendor-page {
    gap: var(--ov-space-3xl);
  }
  .ov-vendor-hero {
    margin-bottom: var(--ov-space-xl);
  }
}
/* ==========================================================================
   Vendor application page
   Page SCSS: spacing, grouping, rhythm only
   ========================================================================= */
.ov-public-page--vendor-application {
  display: flex;
  flex-direction: column;
}
.ov-public-page--vendor-application .ov-page-header {
  margin-inline: auto;
}
/* ==========================================================================
   OV STORE — Vendor Auth Entry
   Decision-based layout (not card stacking)
   ========================================================================== */
.ov-vendor-auth-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ov-space-xl);
}
@media (min-width: 768px) {
  .ov-vendor-auth-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ov-space-2xl);
    align-items: stretch;
  }
}
/* ==========================================================================
   OV Storefront — Vendor List Page
   ========================================================================== */
.ov-vendor-list {
  display: flex;
  flex-direction: column;
}
.ov-vendor-card__header {
  display: flex;
  gap: var(--ov-space-md);
  align-items: center;
}
.ov-vendor-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}
.ov-vendor-card__products {
  display: flex;
  gap: var(--ov-space-xs);
  margin-top: var(--ov-space-sm);
}
.ov-vendor-card__products img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
/* ------------------------------------------------------------
   Skeleton loaders (CSS-only)
   ------------------------------------------------------------ */
.ov-skeleton-scope .ov-vendor-card {
  position: relative;
}
.ov-skeleton-scope img {
  background: linear-gradient(90deg, var(--ov-grey-100) 25%, var(--ov-grey-200) 37%, var(--ov-grey-100) 63%);
  background-size: 400% 100%;
  animation: ov-skeleton 1.4s ease infinite;
}
@keyframes ov-skeleton {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
/* ==========================================================================
   OV STORE — Vendor Register Page
   Page orchestration only (spacing, centering, rhythm)
   ========================================================================== */
.ov-vendor-register-page {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-2xl);
}
/* ------------------------------------------------------------
   Header
------------------------------------------------------------ */
.ov-vendor-register-header {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
/* ------------------------------------------------------------
   Intro / CTA
------------------------------------------------------------ */
.ov-vendor-register-intro {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-vendor-register-cta {
  margin-top: var(--ov-space-md);
}
/* ------------------------------------------------------------
   Benefits
------------------------------------------------------------ */
.ov-vendor-register-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xl);
}
.ov-vendor-register-benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ov-space-xl);
}
.ov-vendor-register-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-vendor-register-benefit i {
  font-size: 1.25rem;
  color: var(--ov-green);
}
/* ------------------------------------------------------------
   Affiliates
------------------------------------------------------------ */
.ov-vendor-register-affiliate {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-lg);
}
.ov-vendor-register-affiliate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ov-space-md);
}
/* ============================================================
   OV Accordion
   ----------------------------------------------------------------
   Component-level only
   - No layout responsibility
   - Token-driven (OV design system)
   ============================================================ */
.ov-accordion {
  border-radius: var(--radius-md);
  border: 1px solid var(--ov-border-light);
  overflow: hidden;
  background-color: var(--ov-white);
}
.ov-accordion-item + .ov-accordion-item {
  border-top: 1px solid var(--ov-border-light);
}
.ov-accordion-header {
  width: 100%;
  background: var(--ov-grey-100);
  border: 0;
  padding: var(--ov-space-sm) var(--ov-space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  font-family: var(--font-body);
}
.ov-accordion-title {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-sm);
}
.ov-accordion-icon {
  font-size: 1.2rem;
}
.ov-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ov-transition-normal);
}
.ov-accordion-body {
  padding: var(--ov-space-sm) var(--ov-space-md) var(--ov-space-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
/* Expanded state */
.ov-accordion-item.active .ov-accordion-header {
  background: var(--ov-white);
}
/* ==========================================================================
   OV Store — Breadcrumbs (Authoritative v2.0)
   - Shared UI component
   - Token-driven
   - A11Y-first
   - Mobile-safe wrapping
   ========================================================================== */
.ov-breadcrumbs {
  display: block;
  margin-block: 0 var(--ov-space-lg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ov-text-muted);
}
@media (max-width: 576px) {
  .ov-breadcrumbs {
    margin-block-end: var(--ov-space-md);
  }
}
/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */
.ov-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ov-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* --------------------------------------------------------------------------
   Item
   -------------------------------------------------------------------------- */
.ov-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* Separator */
.ov-breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-inline: var(--ov-space-xs);
  color: var(--ov-text-muted);
  opacity: 0.6;
  font-size: 0.85em;
}
/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
.ov-breadcrumbs a {
  color: var(--ov-text-muted);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--ov-transition-fast), background-color var(--ov-transition-fast), text-decoration-color var(--ov-transition-fast);
}
.ov-breadcrumbs a:hover {
  color: var(--ov-green);
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.ov-breadcrumbs a:focus-visible {
  outline: none;
  background-color: var(--ov-focus-surface);
  box-shadow: 0 0 0 2px var(--ov-focus-ring);
}
/* --------------------------------------------------------------------------
   Current page
   -------------------------------------------------------------------------- */
.ov-breadcrumbs .active {
  color: var(--ov-text-main);
  font-weight: 600;
  pointer-events: none;
}
/* ==========================================================================
   OV CART COMPONENT — HEADER TOGGLE + DROPDOWN
   Refactor v2.6
   Scope: component only (no layout / no page concerns)
   ========================================================================== */
.ov-cart {
  position: relative;
  font-family: var(--font-body);
  color: var(--ov-black);
  /* ==========================================================================
     CART TOGGLE (HEADER)
     ========================================================================== */
  /* ==========================================================================
     CART BADGE (COUNT)
     ========================================================================== */
  /* ==========================================================================
     DROPDOWN MENU
     ========================================================================== */
  /* ==========================================================================
     MOBILE — FULL-WIDTH SAFE DROPDOWN
     ========================================================================== */
  /* ==========================================================================
     EMPTY STATE
     ========================================================================== */
  /* ==========================================================================
     ITEM LIST (SCROLLABLE)
     ========================================================================== */
  /* ==========================================================================
     CART ITEM
     ========================================================================== */
  /* ==========================================================================
     ITEM THUMB
     ========================================================================== */
  /* ==========================================================================
     ITEM INFO
     ========================================================================== */
  /* ==========================================================================
     QTY / PRICE / REMOVE
     ========================================================================== */
  /* ==========================================================================
     TOTALS + ACTIONS
     ========================================================================== */
}
.ov-cart__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  height: 34px;
  padding: 0 var(--ov-space-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ov-text-main);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.ov-cart__toggle:hover, .ov-cart__toggle:focus-visible {
  background: var(--ov-grey-150);
  border-color: var(--ov-grey-400);
  color: var(--ov-black);
}
.ov-cart__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--ov-text-muted);
  transition: color var(--transition-fast);
}
.ov-cart__toggle:hover .ov-cart__icon, .ov-cart__toggle:focus-visible .ov-cart__icon {
  color: var(--ov-green-dark);
}
.ov-cart__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ov-green);
  color: var(--ov-black);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  /* animation hooks (JS-driven) */
}
.ov-cart__badge.is-bump {
  animation: ov-cart-bump 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ov-cart__badge.is-updated {
  background: var(--ov-green-dark);
}
.ov-cart__label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ov-text-muted);
}
.ov-cart__menu {
  position: absolute;
  z-index: var(--z-dropdown);
  margin-top: var(--ov-space-xs);
  padding: 0;
  min-width: 360px;
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 768px) {
  .ov-cart__menu {
    width: calc(100vw - 2rem);
    min-width: unset;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-inline: 1rem;
  }
}
.ov-cart__empty {
  padding: var(--ov-space-lg);
  text-align: center;
  font-size: 0.95rem;
  color: var(--ov-text-muted);
}
.ov-cart__items {
  max-height: 350px;
  overflow-y: auto;
  padding: var(--ov-space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--ov-grey-400) transparent;
}
.ov-cart__items::-webkit-scrollbar {
  width: 6px;
}
.ov-cart__items::-webkit-scrollbar-thumb {
  background: var(--ov-grey-400);
  border-radius: var(--radius-sm);
}
.ov-cart__item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto auto;
  gap: var(--ov-space-sm);
  align-items: center;
  padding: var(--ov-space-sm) 0;
  border-bottom: 1px solid var(--ov-grey-200);
}
.ov-cart__item:last-child {
  border-bottom: none;
}
.ov-cart__thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ov-grey-100);
}
.ov-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ov-cart__thumb--empty {
  background: var(--ov-grey-100);
}
.ov-cart__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.87rem;
}
.ov-cart__name {
  font-weight: 600;
  color: var(--ov-black);
  text-decoration: none;
}
.ov-cart__name:hover {
  color: var(--ov-green-dark);
}
.ov-cart__meta, .ov-cart__option {
  font-size: 0.8rem;
  color: var(--ov-text-muted);
}
.ov-cart__qty {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.ov-cart__price {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
.ov-cart__remove-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ov-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ov-cart__remove-btn:hover, .ov-cart__remove-btn:focus-visible {
  background: var(--ov-grey-200);
  color: var(--ov-black);
}
.ov-cart__totals {
  padding: var(--ov-space-md);
  border-top: 1px solid var(--ov-grey-300);
}
.ov-cart__total-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--ov-space-sm);
}
.ov-cart__actions {
  margin-top: var(--ov-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-sm);
}
.ov-cart__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-xs);
}
/* ==========================================================================
   CART BADGE ANIMATION
   ========================================================================== */
@keyframes ov-cart-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
/* ==========================================================================
   LEGACY TOTAL SUPPORT (SAFE KEEP)
   ========================================================================== */
.ov-cart-total__label {
  font-family: var(--font-heading);
  font-size: 1rem;
}
.ov-cart-total__value {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
}
.ov-category-block {
  padding: var(--ov-space-md) 0;
}
.ov-category-block__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ov-space-xl);
  margin: 0 auto;
}
@media (max-width: 576px) {
  .ov-category-block__inner {
    grid-template-columns: 1fr;
    gap: var(--ov-space-lg);
  }
}
.ov-category-card {
  background: var(--ov-nav-dropdown-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  /* Local state token for safe overrides */
  --_cat-title-color: var(--ov-text-main);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ov-category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  /* Safer hover contrast */
  --_cat-title-color: var(--ov-black);
}
/* --------------------------------------------------------------------------
   Media (fixed-ratio, CLS-safe)
   -------------------------------------------------------------------------- */
.ov-category-card__media {
  position: relative;
  width: 100%;
  padding-bottom: 66.66%;
  /* 3:2 ratio */
  overflow: hidden;
}
.ov-category-card__media picture, .ov-category-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.ov-category-card__content {
  background: var(--ov-bg-green-soft);
  padding: var(--ov-space-md);
  text-align: center;
  transition: background-color var(--transition-normal);
}
.ov-category-card:hover .ov-category-card__content {
  background-color: var(--ov-green);
}
/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.ov-category-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--_cat-title-color);
  transition: color var(--transition-normal);
}
/* --------------------------------------------------------------------------
   Link wrapper
   -------------------------------------------------------------------------- */
.ov-category-card__link {
  display: block;
  text-decoration: none;
}
.ov-category-card__link:hover, .ov-category-card__link:focus-visible {
  text-decoration: none;
}
/* ==========================================================================
   OV Store — CTA Card
   --------------------------------------------------------------------------
   Component-only
   - No cross-component styling
   - Layout-agnostic
   ========================================================================== */
.ov-cta-card {
  background: linear-gradient(135deg, rgba(146, 211, 245, 0.18), rgba(183, 201, 105, 0.22)), var(--ov-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ov-border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--ov-space-xl) var(--ov-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-space-md);
}
@media (max-width: 768px) {
  .ov-cta-card {
    padding: var(--ov-space-lg) var(--ov-space-md);
  }
}
/* ==========================================================================
   OV Store — Empty State (Authoritative)
   --------------------------------------------------------------------------
   Used across:
   - Category
   - Search
   - Specials
   - Account lists
   ========================================================================== */
.ov-empty-state {
  text-align: center;
  color: var(--ov-text-muted);
  padding: var(--ov-space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ov-space-sm);
}
.ov-empty-state i {
  font-size: 2rem;
  opacity: 0.7;
}
/* ==========================================================================
   OV Store — FAQ
   --------------------------------------------------------------------------
   Composition-based:
   - Uses ov-accordion
   - FAQ owns layout + filters only
   ========================================================================== */
.ov-faq {
  margin-bottom: var(--ov-space-xl);
  /* Tabs */
  /* Accordion wrapper (composition) */
}
.ov-faq__controls {
  display: grid;
  gap: var(--ov-space-md);
  margin-bottom: var(--ov-space-lg);
}
.ov-faq__search {
  border-radius: var(--radius-lg);
  padding: 10px 14px;
}
.ov-faq__tabs {
  display: inline-flex;
  gap: var(--ov-space-sm);
}
.ov-faq__tabs .tab {
  font-family: var(--font-body);
  border: 1px solid var(--ov-border-light);
  background: var(--ov-white);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--ov-transition-fast);
}
.ov-faq__tabs .tab.active {
  background: var(--ov-green);
  color: var(--ov-black);
  box-shadow: var(--shadow-sm);
}
.ov-faq__accordion {
  margin-top: var(--ov-space-md);
}
.ov-faq__highlight {
  background: #fff59d;
  border-radius: 4px;
  padding: 0 2px;
}
.ov-faq__no-results {
  color: var(--ov-text-muted);
  font-style: italic;
  margin-top: var(--ov-space-sm);
}
/* ============================================================================
   OV Store — Feature Card (Component-only)
   --------------------------------------------------------------------------
   - NO grid / layout responsibility
   - NO cross-component styling
   ============================================================================ */
.ov-feature-card {
  background: var(--ov-nav-dropdown-surface);
  border-radius: var(--radius-xl);
  padding: var(--ov-space-2xl) var(--ov-space-lg);
  border: 1px solid var(--ov-card-border-green);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.ov-feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--ov-green);
}
@media (max-width: 576px) {
  .ov-feature-card {
    padding: var(--ov-space-lg);
  }
}
/* Icon */
.ov-feature-card__icon-wrap {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-feature-card__icon-wrap {
    height: 96px;
    margin-bottom: var(--ov-space-md);
  }
}
.ov-feature-card__icon {
  width: 90px;
  height: 90px;
  display: block;
  filter: brightness(0) saturate(100%) invert(83%) sepia(5%) saturate(3036%) hue-rotate(29deg) brightness(90%) contrast(96%);
}
@media (max-width: 576px) {
  .ov-feature-card__icon {
    width: 72px;
    height: 72px;
  }
}
/* Content */
.ov-feature-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.3vw, 1.85rem);
  color: var(--ov-text-main);
  margin-bottom: var(--ov-space-sm);
}
.ov-feature-card__subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ov-text-muted);
  margin-bottom: var(--ov-space-lg);
}
@media (max-width: 576px) {
  .ov-feature-card__subtitle {
    margin-bottom: var(--ov-space-md);
  }
}
.ov-feature-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ov-feature-card__list li {
  margin-bottom: var(--ov-space-xs);
  color: var(--ov-text-main);
  font-size: 0.95rem;
  line-height: 1.45;
}
/* ==========================================================================
   OV Store — Feature Sections (Brand Blocks)
   Section-level styling only. Grid & cards are owned by feature-card.scss
   ========================================================================== */
.ov-section--brand {
  background: var(--ov-bg-section);
  border-radius: var(--radius-lg);
  padding: var(--ov-space-xl) var(--ov-space-lg);
  margin-block: var(--ov-space-xl);
  box-shadow: var(--shadow-xs);
}
@media (max-width: 768px) {
  .ov-section--brand {
    padding: var(--ov-space-lg) var(--ov-space-md);
    margin-block: var(--ov-space-lg);
  }
}
@media (max-width: 576px) {
  .ov-section--brand {
    padding: var(--ov-space-md);
  }
}
/* Section titles / subtitle shared across home sections */
.ov-section__title {
  font-family: var(--font-heading);
  font-size: var(--title-lg-size);
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--ov-space-md);
  color: var(--ov-text-main);
}
.ov-section__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md-size);
  text-align: center;
  color: var(--ov-text-muted);
  margin: 0 0 var(--ov-space-xl);
}
@media (max-width: 576px) {
  .ov-section__subtitle {
    margin-bottom: var(--ov-space-lg);
  }
}
.ov-section__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--ov-space-xl);
}
@media (max-width: 768px) {
  .ov-section__actions {
    margin-top: var(--ov-space-lg);
  }
}
/* ==========================================================================
   OV Store — Filters (Token-safe)
   ========================================================================== */
.ov-filters {
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--ov-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-md);
}
.ov-filters__grid {
  display: grid;
  gap: var(--ov-space-md);
}
@media (min-width: 768px) {
  .ov-filters__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ov-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
}
.ov-filters__actions {
  display: flex;
  gap: var(--ov-space-sm);
  flex-wrap: wrap;
}
.ov-filters__actions .ov-btn {
  min-width: 120px;
}
/* Read-only select (used for country) */
.ov-select--readonly {
  pointer-events: none;
  background-color: var(--ov-grey-100);
  color: var(--ov-text-muted);
}
/* ==========================================================================
   OV Store — HERO
   Full-width intro with background image + overlay content
   ========================================================================== */
.ov-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: var(--ov-space-xl);
  background: var(--ov-bg-card);
  box-shadow: var(--shadow-md);
  /* Background image */
  /* Overlay layer with content */
  /* Logo inside hero */
  /* Slogan / title */
  /* -------------------------------------------
     Tablet
     ------------------------------------------- */
  /* -------------------------------------------
     Small mobile phones
     ------------------------------------------- */
}
.ov-hero__bg {
  display: block;
  width: 100%;
  height: clamp(260px, 45vh, 520px);
  object-fit: cover;
  object-position: center top;
}
.ov-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ov-space-lg);
  padding: var(--ov-space-xl) var(--ov-space-lg);
  text-align: center;
  background: linear-gradient(128deg, rgba(140, 195, 245, 0.17), rgba(255, 255, 255, 0));
  color: var(--ov-text-inverse);
}
.ov-hero__logo {
  max-width: min(380px, 70vw);
  height: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}
.ov-hero__slogan {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  max-width: 34rem;
}
.ov-hero .ov-section__actions {
  display: flex;
  justify-content: center;
}
.ov-hero .ov-btn {
  box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) {
  .ov-hero {
    margin-block: var(--ov-space-lg);
  }
  .ov-hero__bg {
    height: clamp(220px, 42vh, 480px);
    object-position: center 20%;
  }
  .ov-hero__overlay {
    padding: var(--ov-space-lg);
    gap: var(--ov-space-md);
  }
  .ov-hero__logo {
    max-width: min(260px, 70vw);
  }
  .ov-hero__slogan {
    font-size: 1.4rem;
  }
}
@media (max-width: 576px) {
  .ov-hero__bg {
    height: clamp(200px, 32vh, 360px);
  }
  .ov-hero__overlay {
    padding: var(--ov-space-md);
    gap: var(--ov-space-sm);
  }
  .ov-hero__logo {
    max-width: min(220px, 65vw);
  }
  .ov-hero__slogan {
    font-size: 1.25rem;
    line-height: 1.15;
  }
}
/* ==========================================================================
   OV LANGUAGE SELECTOR — Compact & Accessible (v1.0)
   Works in topbar and footer
   ========================================================================== */
.ov-lang {
  position: relative;
}
.ov-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ov-space-xs);
  padding: var(--ov-space-2xs) var(--ov-space-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ov-text-main);
  transition: background var(--transition-fast);
}
.ov-lang__toggle:hover, .ov-lang__toggle:focus-visible {
  background: var(--ov-bg-section);
}
.ov-lang__flag {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: var(--radius-xxs);
}
.ov-lang__icon {
  font-size: 0.75rem;
  opacity: 0.8;
}
.ov-lang__menu {
  margin-top: var(--ov-space-xs);
  padding: 0;
  min-width: 150px;
  background: var(--ov-nav-dropdown-surface);
  border: 1px solid var(--ov-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ov-lang__item {
  display: flex;
  align-items: center;
  gap: var(--ov-space-sm);
  padding: var(--ov-space-sm) var(--ov-space-md);
  color: var(--ov-text-main);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background var(--transition-fast);
}
.ov-lang__item:hover {
  background: var(--ov-green);
  color: var(--ov-black);
}
/* ==========================================================================
   OV Store — Product Card v1.0
   Canonical storefront visual tile (category/search/vendor)
   ========================================================================== */
.ov-product-card {
  display: flex;
  flex-direction: column;
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  text-decoration: none;
  color: var(--ov-text-main);
  transition: background-color var(--ov-transition-fast), box-shadow var(--ov-transition-fast), transform var(--ov-transition-fast);
}
/* Motion-aware hover */
html[data-motion="auto"] .ov-product-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
html[data-motion="reduced"] .ov-product-card:hover {
  box-shadow: var(--shadow-sm);
}
/* ==========================================================================
   Image container — enforces ratio, prevents content jumps
   ========================================================================== */
.ov-product-card__image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  /* 1:1 ratio */
  overflow: hidden;
  background: var(--ov-grey-100);
}
.ov-product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================================
   Body
   ========================================================================== */
.ov-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ov-space-xs);
  padding: var(--ov-space-md);
}
/* ==========================================================================
   Title — single or two-line clamp
   ========================================================================== */
.ov-product-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ov-text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ==========================================================================
   Price row
   ========================================================================== */
.ov-product-card__price {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ov-black);
}
/* Sale/compare price support */
.ov-product-card__price--compare {
  color: var(--ov-text-muted);
  font-weight: 500;
  text-decoration: line-through;
  font-size: 0.9rem;
}
/* ==========================================================================
   Vendor line (optional)
   ========================================================================== */
.ov-product-card__vendor {
  font-size: 0.85rem;
  color: var(--ov-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
}
/* ==========================================================================
   Compact variant (small blocks, e.g. related items)
   ========================================================================== */
.ov-product-card--sm {
  border-radius: var(--radius-md);
}
.ov-product-card--sm .ov-product-card__body {
  padding: var(--ov-space-sm);
}
.ov-product-card--sm .ov-product-card__title {
  font-size: 0.9rem;
}
/* ==========================================================================
   OV Storefront — Social Icon Row
   ========================================================================== */
.ov-social-row {
  display: inline-flex;
  gap: var(--ov-space-sm);
}
.ov-social-row a {
  font-size: 1.25rem;
  color: var(--ov-black);
}
.ov-social-row a:hover {
  color: var(--ov-green);
}
/* ==========================================================================
   OV Store — Typography Micro-System
   Treats storefront pages as editorial (lighter headings)
   ========================================================================== */
.ov-store-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--ov-black);
  margin-bottom: var(--ov-space-lg);
}
.ov-store-subtitle {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: var(--ov-space-md);
}
.ov-store-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ov-text-main);
}
/* ==========================================================================
   OV Storefront — Vendor Card
   Used in list & future featured blocks
   ========================================================================== */
.ov-vendor-card {
  display: block;
  border-radius: var(--radius-lg);
  background: var(--ov-bg-card);
  border: 1px solid var(--ov-border-subtle);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}
.ov-vendor-card:hover {
  box-shadow: var(--shadow-sm);
}
.ov-vendor-card__banner img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.ov-vendor-card__body {
  padding: var(--ov-space-lg);
}
/* ==========================================================================
   OV Store — Product Grid (CANONICAL)
   --------------------------------------------------------------------------
   This is the ONLY allowed storefront product grid.
   Used by:
   - Category
   - Search
   - Specials
   - Manufacturer
   - Vendor storefronts
   --------------------------------------------------------------------------
   Rules:
   - Do NOT redefine grid columns elsewhere
   - Page SCSS may only space around this grid, never restyle it
   ========================================================================== */
.ov-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--ov-space-xl);
}
@media (max-width: 576px) {
  .ov-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--ov-space-lg);
  }
}