/* ============================================================
   AVELOR — Global tokens, base reset, typography utilities
   Source: AVELOR_brandbook.pdf v1.0
   Premium · clean · active lifestyle · curated store
   Inter + Manrope fonts loaded via wp_enqueue_style
   ============================================================ */

:root {
  /* ----- Brand color tokens ----- */
  --avelor-graphite:       #202322;
  --avelor-logo-graphite:  #404040;
  --avelor-milk:           #FEFEFE;
  --avelor-white:          #FFFFFF;
  --avelor-deep-green:     #1F3D35;
  --avelor-sage:           #5A695F;
  --avelor-champagne:      #D8C4A6;
  --avelor-line:           #D8D2CA;
  --avelor-muted:          #6F6F6A;

  /* ----- Semantic colors ----- */
  --bg-page:        var(--avelor-milk);
  --bg-surface:     var(--avelor-white);
  --bg-inverse:     var(--avelor-graphite);
  --bg-accent-warm: var(--avelor-champagne);
  --bg-accent-cool: var(--avelor-deep-green);

  --fg-primary:     var(--avelor-graphite);
  --fg-secondary:   var(--avelor-sage);
  --fg-muted:       var(--avelor-muted);
  --fg-on-dark:     var(--avelor-white);
  --fg-on-warm:     var(--avelor-graphite);

  --border-hairline: var(--avelor-line);
  --border-strong:   var(--avelor-graphite);
  --border-input:    #E5E0D8;

  /* Status — restrained, never red as brand accent */
  --status-error:   #B23A3A;
  --status-success: var(--avelor-deep-green);
  --status-info:    var(--avelor-sage);

  /* ----- Type families ----- */
  --font-sans:    "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", "Manrope", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ----- Type scale ----- */
  --fs-h1: 52px;  --lh-h1: 1.05; --tracking-h1: -0.02em;
  --fs-h2: 32px;  --lh-h2: 1.15; --tracking-h2: -0.015em;
  --fs-h3: 22px;  --lh-h3: 1.25; --tracking-h3: -0.01em;
  --fs-h4: 18px;  --lh-h4: 1.3;  --tracking-h4: 0;
  --fs-body:    16px; --lh-body:    1.55;
  --fs-body-lg: 17px; --lh-body-lg: 1.55;
  --fs-body-sm: 14px; --lh-body-sm: 1.5;
  --fs-caption: 12px; --lh-caption: 1.4; --tracking-caption: 0.04em;
  --fs-eyebrow: 11px; --lh-eyebrow: 1.2; --tracking-eyebrow: 0.18em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ----- Spacing (8px base) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --section-pad-y-desktop: 96px;
  --section-pad-y-mobile:  48px;
  --container-max:         1280px;
  --container-pad:         24px;

  /* ----- Radii ----- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ----- Borders ----- */
  --border-1:        1px solid var(--border-hairline);
  --border-2:        1px solid var(--border-input);
  --border-strong-1: 1px solid var(--avelor-graphite);

  /* ----- Shadows — restrained ----- */
  --shadow-xs:      0 1px 2px rgba(32, 35, 34, 0.04);
  --shadow-sm:      0 2px 6px rgba(32, 35, 34, 0.05), 0 1px 2px rgba(32, 35, 34, 0.04);
  --shadow-md:      0 8px 24px rgba(32, 35, 34, 0.06), 0 2px 6px rgba(32, 35, 34, 0.04);
  --shadow-lg:      0 24px 48px rgba(32, 35, 34, 0.10), 0 4px 12px rgba(32, 35, 34, 0.04);
  --shadow-popover: 0 12px 32px rgba(32, 35, 34, 0.08), 0 2px 6px rgba(32, 35, 34, 0.04);

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  400ms;

  /* ----- Z layers ----- */
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-modal:    500;
  --z-toast:    600;
}

/* ============================================================
   Base reset & body
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

::selection      { background: var(--avelor-champagne) !important; color: var(--avelor-graphite) !important; }
::-moz-selection { background: var(--avelor-champagne) !important; color: var(--avelor-graphite) !important; }

/* ============================================================
   Typography utilities (.t-*)
   Use these classes for one-off type without redefining elements.
   ============================================================ */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: var(--fw-medium); color: var(--fg-primary);
  margin: 0;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--fw-medium); color: var(--fg-primary);
  margin: 0;
}
.t-h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  margin: 0;
}
.t-h4 {
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  font-weight: var(--fw-semibold); color: var(--fg-primary);
  margin: 0;
}
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--fg-primary); margin: 0; }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.t-muted   { color: var(--fg-muted); }
.t-caption {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: var(--tracking-caption); color: var(--fg-muted);
}
.t-eyebrow {
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--fg-secondary);
}
.t-brand {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  letter-spacing: 0.22em; text-transform: uppercase;
}

/* ============================================================
   Buttons (.av-btn) — global component, used in header, buybox,
   accordion, cart drawer, Complete the Look, etc.
   ============================================================ */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.005em;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color     var(--dur-base) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out);
}
.av-btn:active { transform: scale(0.985); }

.av-btn--primary,
.av-btn--primary:hover,
.av-btn--primary:focus,
.av-btn--primary:active,
.av-btn--primary:visited { color: var(--avelor-white); }
.av-btn--primary  { background: var(--avelor-deep-green); }
.av-btn--primary:hover  { background: #173027; }

.av-btn--graphite,
.av-btn--graphite:hover,
.av-btn--graphite:focus,
.av-btn--graphite:active,
.av-btn--graphite:visited { color: var(--avelor-white); }
.av-btn--graphite { background: var(--avelor-graphite); }
.av-btn--graphite:hover { background: #0F1110; }

.av-btn--secondary,
.av-btn--secondary:hover,
.av-btn--secondary:focus,
.av-btn--secondary:active,
.av-btn--secondary:visited { color: var(--avelor-graphite); }
.av-btn--secondary {
  background: var(--avelor-white);
  border-color: var(--avelor-graphite);
}
.av-btn--secondary:hover {
  background: rgba(32, 35, 34, 0.04);
  border-color: var(--avelor-graphite);
}
.av-btn--secondary.is-active {
  border-color: var(--avelor-deep-green);
  color: var(--avelor-deep-green);
}

.av-btn--ghost {
  background: transparent;
  color: var(--avelor-graphite);
  border-color: var(--avelor-line);
}
.av-btn--ghost:hover { border-color: var(--avelor-graphite); }

.av-btn--block { width: 100%; }
.av-btn--lg    { padding: 18px 24px; font-size: 15px; }

.av-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.av-btn-ic { display: inline-flex; }
.av-btn-ic svg { width: 18px; height: 18px; }

/* ============================================================
   Underline link
   ============================================================ */
.av-link {
  font-size: 14px;
  color: var(--fg-primary);
  border-bottom: 1px solid var(--avelor-graphite);
  padding-bottom: 1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.av-link:hover {
  color: var(--avelor-deep-green);
  border-bottom-color: var(--avelor-deep-green);
}

/* ============================================================
   Section spacer utility — top margin between PDP carousels etc
   ============================================================ */
.av-section { margin-top: 44px; }
@media (max-width: 900px) {
  .av-section { margin-top: 28px; }
}

/* ============================================================
   Breadcrumbs — left-align, thin font, full container width on product
   ============================================================ */
.ct-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px !important;
  font-weight: 300 !important;
  --horizontal-alignment: flex-start;
  --theme-font-weight: 300 !important;
  --theme-font-size: 13px !important;
}
.ct-breadcrumbs * { font-weight: 300 !important; font-size: 13px !important; }
.ct-breadcrumbs .ct-separator {
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  color: var(--avelor-line);
}
.ct-breadcrumbs .ct-separator svg { width: 8px; height: 8px; }
.ct-breadcrumbs > span > a { color: var(--fg-muted); }
.ct-breadcrumbs > span > a:hover { color: var(--fg-primary); }
.ct-breadcrumbs > span:last-child { color: var(--fg-primary); }

/* On single product, hero-section wraps breadcrumbs. Don't let it shrink. */
[data-prefix="product"] .hero-section.is-width-constrained { max-width: 100%; }

/* =========================================================
   Slice 9 — Accessibility polish
   ========================================================= */

/* sr-only utility — visually hidden but exposed to AT */
.avelor-sr-only,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus-visible rings — only when keyboard-navigating (not on mouse click).
   Brand color, subtle 2px outline + offset so the ring is clear but on-tone. */
:where(
	a,
	button,
	input,
	select,
	textarea,
	[role="button"],
	[tabindex]:not([tabindex="-1"]),
	.ct-swatch-container,
	.avelor-product__look-card,
	.ct-wishlist-button-single,
	.ct-increase,
	.ct-decrease
):focus-visible {
	outline: 2px solid var(--avelor-deep-green) !important;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Subtle ring on circular elements (like wishlist heart, close ×, qty +/−)
   so the outline follows their shape */
.ct-wishlist-button-single:focus-visible,
.ct-toggle-close:focus-visible,
.ct-increase:focus-visible,
.ct-decrease:focus-visible {
	outline-offset: 3px;
	border-radius: 999px !important;
}

/* Swatches keep their natural shape on focus */
.ct-swatch-container:focus-visible {
	border-radius: 50%;
	outline-offset: 3px;
}

/* Size buttons (rectangular pills) */
.variations .ct-variation-swatches [data-value]:focus-visible {
	outline: 2px solid var(--avelor-deep-green) !important;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Reduced motion — kill all CSS animations + transitions for users who
   request reduced motion. Keeps essential UX (popup open/close) functional
   via instant switches instead of fades/slides. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================
   Currency symbol — ₴ rendered AFTER the price (set via WC's
   woocommerce_currency_pos = right_space). Make it smaller and
   slightly muted so the number reads as the dominant element.
   Per-component overrides (av-ck-total, av-pcard2-info, etc.)
   can tighten the spacing/colour further if needed.
   ========================================================= */
.woocommerce-Price-currencySymbol {
	font-size: 0.72em;
	font-weight: inherit;
	margin-left: 2px;
	vertical-align: 1px;
	color: var(--fg-muted, #6F6F6A);
}