:root {
  /* Brand Colors */
  --odonata-primary: hsl(62.4 12.1% 40.6%);  /* olive #73745b */
  --odonata-primary-foreground: hsl(30 25% 97%);
  --odonata-secondary: hsl(28 18% 91%);       /* beige */
  --odonata-secondary-foreground: hsl(20 35% 20%);
  --odonata-background: hsl(40 37.5% 96.9%);  /* warm off-white #faf8f4 */
  --odonata-foreground: hsl(20 10% 15%);      /* dark text */
  --odonata-muted: hsl(28 15% 85%);
  --odonata-muted-foreground: hsl(20 10% 45%);
  --odonata-accent: hsl(28 18% 91%);
  --odonata-border: hsl(28 20% 82%);
  --odonata-input: hsl(28 20% 82%);
  --odonata-ring: hsl(20 45% 36%);
  
  /* Custom Brand Colors */
  --odonata-leaf: hsl(38 55% 45%);            /* warm gold/green */
  --odonata-bark: hsl(20 35% 20%);            /* dark brown */
  --odonata-petal: hsl(15 50% 88%);           /* soft pink */
  --odonata-moss: hsl(35 25% 55%);            /* muted tan */
  --odonata-sand: hsl(30 30% 90%);            /* light sand */
  
  /* Badge Colors */
  --odonata-badge-new: hsl(210 80% 55%);      /* blue for НОВО */
  --odonata-badge-bestseller: hsl(20 45% 36%); /* brown for БЕСТСЕЛЪР */
  --odonata-badge-sale: hsl(0 70% 50%);       /* red for -X% */
  
  /* Typography */
  --odonata-font-display: 'Cormorant Garamond', Georgia, serif;
  --odonata-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Spacing & Layout */
  --odonata-container-max: 1400px;
  --odonata-container-padding: 1rem;
  --odonata-radius: 0;
  --odonata-radius-sm: 0;
  --odonata-radius-full: 0;
  
  /* Shadows */
  --odonata-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --odonata-shadow: 0 4px 12px rgba(0,0,0,0.1);
  --odonata-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* Fonts are owned solely by the Tailwind base layer (single source of truth). Do not set font-family/weight here. */
body {
  background-color: var(--odonata-background);
  color: var(--odonata-foreground);
  line-height: 1.6;
}

/* Container Width Override */
.col-full,
.storefront-full-width-content .entry-content,
.site-header .col-full,
.site-footer .col-full {
  max-width: var(--odonata-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--odonata-container-padding);
  padding-right: var(--odonata-container-padding);
}

/* Static page (terms/cookies/privacy/about…) prose: readable measure, centered.
   Higher specificity than .prose so it wins regardless of stylesheet order. */
.entry-content .odo-page-prose {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* Order received page — break out of the container constraint and center content */
body.woocommerce-order-received .storefront-full-width-content .entry-content,
body.woocommerce-order-received .entry-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide default page title on order-received page */
body.woocommerce-order-received .entry-header .entry-title,
body.woocommerce-order-received h1.entry-title {
  display: none;
}

/* Global Border Radius */
.button,
button,
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.wc-block-components-text-input input,
.wc-block-components-select select {
  border-radius: var(--odonata-radius-sm) !important;
}

/* Primary Button Color */
.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  background-color: var(--odonata-primary) !important;
  color: var(--odonata-primary-foreground) !important;
  border-radius: var(--odonata-radius-sm) !important;
}

.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--odonata-bark) !important;
}

/* Background Color */
body,
.site {
  background-color: var(--odonata-background);
}

/* ── Shop by Brand landing (page-brands.php / [odonata_brands_az]) ────────── */
.odo-brands-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.odo-brands-header__title {
  font-family: var(--font-display, Montserrat), system-ui, sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 600;
  margin: 0;
  color: hsl(var(--foreground));
}
.odo-brands-header__sub {
  margin: 0.5rem 0 0;
  color: hsl(var(--muted-foreground));
}

/* Sticky A–Z quick-jump index */
.odo-brands__index {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0;
  margin-bottom: 2rem;
  background-color: hsl(var(--background) / 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid hsl(var(--border));
}
.odo-brands__index-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.odo-brands__index-link:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.odo-brands__group {
  scroll-margin-top: 4.5rem;
  margin-top: 2.75rem;
}
.odo-brands__letter {
  font-family: var(--font-display, Montserrat), system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
}

.odo-brands__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .odo-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .odo-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .odo-brands__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}

.odo-brands__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1.25rem 1rem;
  text-decoration: none;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.odo-brands__card:hover {
  border-color: hsl(var(--foreground) / 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.odo-brands__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.5rem;
}
.odo-brands__logo img {
  max-height: 4.5rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.odo-brands__logo-fallback {
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: center;
}
.odo-brands__name {
  font-size: 0.8rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  transition: color 0.15s;
}
.odo-brands__card:hover .odo-brands__name {
  color: hsl(var(--foreground));
}
.odo-brands__empty {
  text-align: center;
  color: hsl(var(--muted-foreground));
  padding: 3rem 0;
}

/* ── Category "circles" — image + name row (before/after description) ─────── */
.odo-circles {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
}
.odo-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 8.5rem;
  max-width: 40vw;
  text-decoration: none;
  color: hsl(var(--foreground));
}
.odo-circle__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.odo-circle__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.odo-circle:hover .odo-circle__img {
  border-color: hsl(var(--foreground) / 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.odo-circle__name {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  color: hsl(var(--foreground));
}
a.odo-circle:hover .odo-circle__name {
  color: hsl(var(--primary));
}

/* Order-summary promo/points row (between items and totals) — strip the table
   cell's border/padding so the inputs block sits seamlessly. */
/* Responsive order review (flex, non-table). Items + promo/points are fluid
   flex rows so the name wraps and the price stays right at any width; only the
   compact totals remain a <table> (short label/amount rows + the shipping radios
   the checkout cards mirror). */
.odo-review {
  display: flex;
  flex-direction: column;
}
/* Flex children must be allowed to shrink (default min-width:auto keeps them at
   content width → overflow on very narrow screens). */
.odo-review__items,
.odo-review__inputs,
.odo-review__totals,
.odo-review .odo-checkout-points,
.odo-review .odo-checkout-coupon {
  min-width: 0;
}
/* The points card is a CSS grid; its default auto column sizes to content and
   overflows on narrow screens. minmax(0,1fr) lets the column (and its stepper)
   shrink to the card width. */
.odo-review .odo-checkout-points {
  grid-template-columns: minmax(0, 1fr);
}
/* Points card head: title + balance wrap instead of forcing a min width. */
.odo-review .odo-checkout-points__head {
  flex-wrap: wrap;
}
.odo-review__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.odo-review__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.odo-review__item-name {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
.odo-review__item-price {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
.odo-review__inputs {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border));
}
.odo-review__totals {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsl(var(--border));
}

/* Promo code is now a plain always-visible field + Apply button (no collapsible
   box) — strip the old <details> box styling around the input row. */
.odo-checkout-coupon {
  border: 0;
  background: transparent;
  overflow: visible;
  margin-bottom: 0.75rem;
}

/* Green-points amount: the currency symbol is an addon inside the input field
   (one bordered group [ 3.48 € ]) rather than a separate box. */
.odo-checkout-points__field {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0;
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
}
.odo-checkout-points__field:focus-within {
  border-color: hsl(var(--ring));
}
.odo-checkout-points__field .odo-checkout-points__input {
  flex: 1 1 0%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  padding-right: 0.4rem;
}
.odo-checkout-points__field .odo-checkout-points__input:focus {
  outline: 0;
}
.odo-checkout-points__field .odo-checkout-points__unit {
  flex: 0 0 auto;
  padding-right: 0.6rem;
  color: hsl(var(--muted-foreground));
}

/* "Use maximum" is a subtle text link under the stepper, not a big button. */
.odo-checkout-points__max {
  justify-self: end;
  margin-top: -0.15rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: hsl(var(--primary));
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  width: auto;
}
.odo-checkout-points__max:hover {
  color: hsl(var(--foreground));
}

/* Mobile shipping cards: keep two per row, but stack the card (icon on top,
   label centered below full-width) so long labels wrap to ~2 lines instead of
   cramming 3 lines beside the icon. */
@media (max-width: 639px) {
  .odo-checkout-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.85rem 0.5rem;
  }
  .odo-checkout-card__body {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .odo-checkout-card__badge {
    align-self: center;
  }
  .odo-checkout-card__label {
    font-size: 0.9rem;
  }
}

/* Checkout notices row (free-shipping bar + greeting/login) — was still capped
   at 72rem, so it was narrower than and misaligned with the widened form. Match
   the form's container width + padding, and add a gap so it clears the sticky
   header instead of sitting crammed against it. */
body .odo-checkout-info {
  max-width: var(--odonata-container-max);
  margin-top: 1.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  body .odo-checkout-info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  body .odo-checkout-info {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Checkout width: match the site container (was 72rem, narrower than the
   1400px content width) + a slightly wider order-summary column. `body` prefix
   raises specificity over the compiled Tailwind `.odo-checkout{max-width:72rem}`. */
body .odo-checkout {
  max-width: var(--odonata-container-max);
}
@media (min-width: 1024px) {
  body .odo-checkout-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}
/* Mobile: drop the checkout's own 1rem side padding — the .entry-content
   container already provides a gutter — so the content gets more width. */
@media (max-width: 639px) {
  body .odo-checkout,
  body .odo-checkout-info {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* WPBakery/Porto compat shortcodes (includes/wpbakery-compat.php) —
   headings, feature rows and buttons rebuilt from legacy page content. */
.odo-vc-heading {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-align: center;
  margin: 2.5rem 0 1rem;
}
.odo-vc-subheading { text-align: center; margin-bottom: 1rem; }
.odo-vc-feature-box {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.75rem;
  margin: 0.75rem 0;
}
.odo-vc-feature-box::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: hsl(var(--primary));
  font-weight: 700;
}
.odo-vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.75rem;
  margin: 0.5rem 0;
  border-radius: 0.5rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground)) !important;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.odo-vc-btn:hover { opacity: 0.9; }

/* ------------------------------------------------------------------ */
/* Info pages (10 причини / Какво означава Одоната / Нашата концепция)
   — rebuilt as clean HTML (.odo-info), rendered inside page.php. */
.odo-info-lead {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  margin: 0 0 2.5rem;
}
.odo-reasons { display: flex; flex-direction: column; gap: 1rem; }
.odo-reason {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem 4rem;
  align-items: center;
  padding: 2.5rem 0;
  border-top: 1px solid hsl(var(--border));
}
.odo-reason:nth-child(even) { grid-template-columns: 1fr 16rem; }
.odo-reason:nth-child(even) .odo-reason-visual { order: 2; }
.odo-reason-visual { position: relative; justify-self: center; }
.odo-reason-visual img { width: 13rem; height: 13rem; display: block; }
.odo-reason-num {
  position: absolute;
  top: -1.25rem;
  left: -1.5rem;
  font-family: var(--font-display, inherit);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
  color: hsl(var(--primary) / 0.18);
  user-select: none;
}
.odo-reason-text h2 {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 0.625rem;
}
.odo-reason-text ul { padding-left: 1.1rem; margin: 0 0 0.75rem; }
.odo-reason-text li { margin: 0.25rem 0; }
.odo-reason-note { font-size: 0.8125rem; opacity: 0.75; }
@media (max-width: 767px) {
  .odo-reason,
  .odo-reason:nth-child(even) { grid-template-columns: 1fr; text-align: left; }
  .odo-reason:nth-child(even) .odo-reason-visual { order: 0; }
  .odo-reason-visual { justify-self: start; }
  .odo-reason-visual img { width: 7.5rem; height: 7.5rem; }
}

.odo-story { text-align: left; }
.odo-story-mark { display: block; width: 10rem; height: auto; margin: 0 auto 2rem; }
.odo-story .odo-info-lead { text-align: center; }
.odo-story-tale {
  font-family: var(--font-display, inherit);
  font-style: italic;
  font-size: 1.125rem;
  color: hsl(var(--foreground));
  border-left: 3px solid hsl(var(--primary) / 0.4);
  padding-left: 1.25rem;
  margin-top: 2rem;
}

.odo-mission-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.25rem 0;
}
@media (max-width: 640px) { .odo-mission-stats { grid-template-columns: 1fr; } }
.odo-stat {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background-color: hsl(var(--muted) / 0.35);
  padding: 1.25rem 1.25rem 1.375rem;
}
.odo-stat-num {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 0.375rem;
}
.odo-stat-label { font-size: 0.8125rem; line-height: 1.5; }
.odo-mission-contact {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background-color: hsl(var(--muted) / 0.35);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
}
.odo-mission-contact p { margin: 0; }

/* Self-hosted [video] in product descriptions — native HTML5 player,
   sized like a phone clip instead of the raw 720px element. */
.prose .wp-video,
.odo-page-content .wp-video {
  width: auto !important;
  max-width: 20rem;
  margin: 1.5rem auto;
}
.prose .wp-video video,
.odo-page-content .wp-video video,
.prose video.wp-video-shortcode {
  width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem;
  display: block;
}
/* YouTube embeds (vc_video shim + autoembed) */
.odo-vc-video {
  position: relative;
  max-width: 40rem;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
}
.odo-vc-video iframe,
.prose iframe[src*="youtube"],
.odo-page-content iframe[src*="youtube"] {
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 0.75rem;
}
.odo-vc-video iframe { position: absolute; inset: 0; height: 100%; margin: 0; }

/* Page width management: plain pages (legal, text) keep a comfortable reading
   column; .odo-info pages (10 причини / концепция / одоната) run wide and
   manage their own inner widths. Header centers on info pages. */
.odo-page .odo-page-content { max-width: 48rem; }
.odo-page:has(.odo-info) .odo-page-content { max-width: none; }
.odo-page:has(.odo-info) .odo-page-header { text-align: center; margin-bottom: 1.5rem; }
.odo-page:has(.odo-info) .odo-page-header h1 { font-size: 2rem; }
@media (min-width: 768px) {
  .odo-page:has(.odo-info) .odo-page-header h1 { font-size: 2.5rem; }
}
.odo-info .odo-info-lead {
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
.odo-reasons { max-width: 72rem; margin: 0 auto; }
.odo-story { max-width: 44rem; margin: 0 auto; }
.odo-mission { max-width: 58rem; margin: 0 auto; }
.odo-mission > p { max-width: 48rem; margin-left: auto; margin-right: auto; }
.odo-mission > p + p { margin-top: 1rem; }
.odo-page--wide .odo-page-content { max-width: none; }

/* "Coming soon" placeholder pages (e.g. бюти студио). The default reading column
   is 48rem and deliberately NOT auto-centred — correct for legal/long-form text,
   but it left a short centred notice hugging the left edge of a 1400px page.
   Same treatment as .odo-info: release the column and centre the header. */
.odo-page:has(.odo-soon) .odo-page-content { max-width: none; }
.odo-page:has(.odo-soon) .odo-page-header { text-align: center; }

/* Body paints pure white via WP custom-background (Storefront customizer),
   while the content surface is the warm off-white token — the mismatch reads
   as pale side "shadows" beside the content on wide screens. Unify. */
body,
body.custom-background {
  background-color: var(--odonata-background) !important;
}
#page,
.site,
.site-content {
  box-shadow: none !important;
}

/* Off-canvas drawers parked at translateX(±100%) still cast their shadow-2xl
   ~10px back into the viewport — the permanent left/right "shadow" strips.
   No shadow while closed (aria-hidden is synced by side-cart.js / header.js). */
[data-cart-drawer][aria-hidden="true"],
[data-mobile-menu-panel][aria-hidden="true"] {
  box-shadow: none;
}