/* Perfume Valley design tokens - tasks 183-192
   Single source of truth for colour, type, spacing and the shared components.
   Rule from here: no component defines its own colour. */

:root {
  /* Brand - taken from what the site actually uses, not the Elementor defaults */
  --pv-brand:        #981945;
  --pv-brand-dark:   #80002A;
  --pv-brand-soft:   #F7E7E8;
  --pv-accent:       #C9A227;

  /* Ink */
  --pv-ink:          #1A1A1A;
  --pv-ink-muted:    #6B6B6B;
  --pv-ink-inverse:  #FFFFFF;

  /* Surface */
  --pv-surface:      #FFFFFF;
  --pv-surface-alt:  #FAF7F2;
  --pv-border:       #E6E0D8;

  /* Status */
  --pv-success:      #1E7A4C;
  --pv-sale:         #981945;
  --pv-warning:      #B4690E;

  /* Spacing scale */
  --pv-s1: 4px;  --pv-s2: 8px;  --pv-s3: 12px; --pv-s4: 16px;
  --pv-s5: 24px; --pv-s6: 32px; --pv-s7: 48px; --pv-s8: 64px; --pv-s9: 96px;

  /* Layout */
  --pv-gutter:   16px;
  --pv-radius:   8px;
  --pv-radius-lg:12px;
  --pv-tap:      48px;

  /* Type */
  --pv-font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pv-font-display: 'Playfair Display', Georgia, serif;
  --pv-fs-body:  16px;
  --pv-fs-sm:    14px;
  --pv-fs-xs:    12px;
  --pv-lh-body:  1.6;

  /* Elevation */
  --pv-shadow:    0 1px 3px rgba(0,0,0,.08);
  --pv-shadow-lg: 0 4px 24px rgba(0,0,0,.08);
}

/* ---- Task 188: the mobile gutter, as a hard rule.
   This is what structurally prevents the 149px checkout squeeze recurring. ---- */
@media (max-width: 767px) {
  .elementor-section.elementor-section-boxed > .elementor-container,
  .woocommerce .col2-set,
  .woocommerce-page .col2-set,
  #order_review,
  #payment,
  .cart-collaterals,
  .woocommerce-checkout .elementor-widget-container {
    padding-left: var(--pv-gutter) !important;
    padding-right: var(--pv-gutter) !important;
    box-sizing: border-box;
  }
  #order_review, #payment, .cart-collaterals { width: 100% !important; max-width: 100% !important; float: none !important; }
  html, body { overflow-x: hidden; }
}

/* ---- Task 189: one button system. 48px minimum tap target on mobile. ---- */
.pv-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-s2);
  min-height: var(--pv-tap);
  padding: var(--pv-s3) var(--pv-s5);
  border-radius: var(--pv-radius);
  font-family: var(--pv-font-body);
  font-size: var(--pv-fs-body); font-weight: 600; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pv-btn--primary,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit {
  background: var(--pv-brand); color: var(--pv-ink-inverse);
}
.pv-btn--primary:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover { background: var(--pv-brand-dark); color: var(--pv-ink-inverse); }
.pv-btn--secondary { background: transparent; color: var(--pv-brand); border-color: var(--pv-brand); }
.pv-btn--secondary:hover { background: var(--pv-brand); color: var(--pv-ink-inverse); }
.pv-btn--tertiary { background: transparent; color: var(--pv-brand); padding-left: 0; padding-right: 0; }

/* ---- Task 191: one badge system, one stack order ---- */
.pv-badge {
  display: inline-block; padding: var(--pv-s1) var(--pv-s2);
  border-radius: 4px; font-size: var(--pv-fs-xs); font-weight: 700;
  line-height: 1.4; letter-spacing: .02em; text-transform: uppercase;
}
.pv-badge--sale   { background: var(--pv-sale);    color: var(--pv-ink-inverse); }
.pv-badge--new    { background: var(--pv-accent);  color: var(--pv-ink); }
.pv-badge--format { background: var(--pv-surface-alt); color: var(--pv-ink-muted); border: 1px solid var(--pv-border); text-transform: none; font-weight: 600; }

/* ---- Task 192: one review-star colour ---- */
.star-rating span::before,
.star-rating::before,
.woocommerce .star-rating span::before,
.wrci-star.is-on,
.pv-stars { color: var(--pv-accent) !important; }
/* ---- Task 186: type scale. Body drops 19px -> 16px; the scale keys off it. ---- */
body,
.woocommerce, .elementor-widget-text-editor, .elementor-widget-theme-post-content p,
.woocommerce-page p, .entry-content p {
  font-size: var(--pv-fs-body);
  line-height: var(--pv-lh-body);
  color: var(--pv-ink);
}
small, .pv-text-sm, .woocommerce-product-details__short-description small { font-size: var(--pv-fs-sm); }
.pv-text-muted { color: var(--pv-ink-muted); }

/* ---- Task 190: one product card, used by the grid, every homepage rail and search ---- */
.products .product .footer-inner .button,
li.product .footer-inner .button { width: 100%; }

li.product .woocommerce-loop-product__title,
.products .product h3.woocommerce-loop-product__title {
  font-family: var(--pv-font-body);
  font-size: var(--pv-fs-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--pv-ink);
  margin: var(--pv-s2) 0 var(--pv-s1);
}
li.product .price,
.products .product .price {
  font-size: var(--pv-fs-body);
  font-weight: 600;
  color: var(--pv-ink);
}
li.product .price del,
.products .product .price del { color: var(--pv-ink-muted); font-weight: 400; }
li.product .price ins,
.products .product .price ins { color: var(--pv-sale); text-decoration: none; }

/* ---- Task 193: the last of the ad-hoc colours, pointed at tokens ---- */
.wrci-stars .is-on, .wrci-rating__star--full, .wrci-rating__star--half { color: var(--pv-accent) !important; }
.onsale, .woocommerce span.onsale {
  background: var(--pv-sale) !important;
  color: var(--pv-ink-inverse) !important;
  border-radius: 4px;
  font-size: var(--pv-fs-xs);
  font-weight: 700;
  min-height: 0;
  line-height: 1.4;
  padding: var(--pv-s1) var(--pv-s2);
}
/* ==== HEADER FIXES (2026-09-22) ============================================
   Delete from this marker down to revert both of the changes below.

   1. Top-bar marquee text.
      The white comes only from Elementor's regenerable per-post CSS
      (uploads/elementor/css/post-1186.css and post-1189.css). If either file
      is stale, missing, or loses the cascade, the text falls back to the
      inherited body colour (#444) and goes near-black on the maroon bar.
      Pinned here so it no longer depends on a regenerable file.
   2. The four header action icons (search / wishlist / account / cart) were
      set to #000 in the Elementor header settings. Pointed at the brand
      token so they match the maroon count badges and the logo.
   ========================================================================= */

.elementor-location-header .etheme-marquee-item,
.elementor-location-header .etheme-marquee-item p,
.elementor-location-header .etheme-marquee-item span {
  color: var(--pv-ink-inverse) !important;
  fill:  var(--pv-ink-inverse) !important;
}

.elementor-location-header .etheme-modal-popup-button,
.elementor-location-header .etheme-modal-popup-button svg,
.elementor-location-header .etheme-elementor-off-canvas__toggle .elementor-button,
.elementor-location-header .etheme-elementor-off-canvas__toggle .elementor-button .elementor-button-icon,
.elementor-location-header .etheme-elementor-off-canvas__toggle .elementor-button i,
.elementor-location-header .etheme-elementor-off-canvas__toggle .elementor-button svg {
  color: var(--pv-brand) !important;
}
/* the count bubbles keep their own maroon fill + white numerals */
.elementor-location-header .elementor-button-icon-qty {
  color: var(--pv-ink-inverse) !important;
}