/*
Theme Name:   Hello Elementor Child
Theme URI:    https://vampsalon.com/
Template:     hello-elementor
Description:  Child theme of Hello Elementor for Vamp Salon. Houses
              custom site code that must survive parent-theme updates:
              marketing funnel attribution hidden-field reader (Task #4),
              and any future Vamp-side hooks / overrides.
Author:       Vamp Salon LLC (built by CrestonGE under client-services /
              work-for-hire engagement per company/CLIENT-SERVICES-MODEL.md)
Version:      1.5.7
Text Domain:  hello-elementor-child
*/

/* =========================================================================
   Vamp Salon Marketing Funnel — sensible form widths.
   --------------------------------------------------------------------------
   Fluent Forms render full-width by default; on a Hello Elementor full-
   width template, an unconstrained form spans the entire viewport
   (uncomfortable to read; D7 violation).

   GLOBAL RULE: every Fluent Forms instance is capped at 520px and
   centered. This produces a readable line-length for labels + inputs
   regardless of where the form is embedded — plain WP page content,
   Elementor section, popup, sidebar widget, etc.

   When a wider form is intentionally desired in an Elementor section
   (rare for opt-in forms; not the case for Path B/C/D), override via
   the section's column styling with a more specific selector.
   ========================================================================= */
.fluentform,
.fluentform_wrapper {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================================
   Vamp Salon Marketing Funnel — Form Branding (per FORM-BRANDING-DESIGN-SPEC.md §8)
   --------------------------------------------------------------------------
   Implements the chip-authored branding spec for the funnel's capture-path
   forms (Path B/C/D). All values are SEMANTIC TOKENS (CSS custom properties)
   so swapping interim hex values for Pantone-locked values is a one-line edit
   per token once VAMP-BRAND-IDENTITY.md (chip Deliverable 2, pending) lands.

   Source tokens extracted from live Elementor Kit-11 CSS (per spec §1.3).
   WCAG 2.2 contrast verified for every text-on-background pair (per spec §2.3
   + compliance/ACCESSIBILITY.md §2.1 SC 1.4.3 / 1.4.11). Operator-chosen
   warm-dark button text on pink resolves spec §2.4 Option A — preserving
   the pink button as the Distinctive Brand Asset per Sharp while passing
   WCAG AAA from day one.

   Per Sharp's DBA + spec §9: Path B/C/D forms inherit IDENTICAL visual tokens.
   ========================================================================= */

:root {
  /* Vamp brand palette.
     BRAND PINK MIGRATION 2026-05-29 (operator decision): #E3B5C2 dusty
     blush → #ED829D true hot pink ("vampy", magenta-leaning). The
     CTA scheme also flipped from pink-fill+dark-text to BLACK-fill+
     PINK-text (see --vamp-cta-* below + .ff-btn-submit). Tokenized so
     the migration propagates to every funnel surface from here.
     WCAG: #ED829D on black #19191A = 6.93:1 (AA normal, AAA large —
     CTA text is large). See VAMP-BRAND-IDENTITY.md + WCAG audit. */
  --vamp-pink:               #ED829D; /* brand hot pink — accent + CTA text on dark */
  --vamp-pink-soft:          #FCECF0; /* ~85% white-tint of --vamp-pink — callout backgrounds (e.g. quiz-result urgency block) */
  --vamp-black:              #19191A; /* near-black — CTA fill, footer/headings (Neutral Black C) */
  --vamp-grey-accent:        #B0B0B0; /* mid-grey */
  --vamp-grey-text:          #595959; /* body text grey */
  --vamp-grey-divider:       #ECECEC; /* light grey divider */
  --vamp-white:              #FFFFFF; /* page background, base */
  --vamp-cream:              #F5F1EC; /* warm bone — section bands */

  /* CTA scheme — PINK fill + BLACK text (operator decision 2026-05-31; flips
     the prior 05-29 black-on-pink scheme). Header BOOK A CONSULTATION
     button (Elementor element 6f09b74, set pink-fill+dark-text in 05-29
     audit) is now the site-wide CTA standard; every primary CTA matches.
     On hover, the pink lightens (#F291AC) instead of inverting, so the
     button stays "pink" and the hover signals elevation. WCAG 2.2 SC 1.4.3:
     resting #19191A on #ED829D = 6.93:1 (AA normal / AAA large);
     hover    #19191A on #F291AC = 7.88:1 (AAA normal).
     See https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
     Floating intent-router CTA (inc/intent-router-cta.php @ 99900c3) uses
     the same #F291AC hover for visual harmony. */
  --vamp-cta-bg:             #ED829D; /* hot-pink CTA fill */
  --vamp-cta-text:           #19191A; /* black CTA text */
  --vamp-cta-bg-hover:       #F291AC; /* lighter pink on hover (7.88:1 w/ #19191A) */
  --vamp-cta-text-hover:     #19191A; /* black text holds through hover */

  /* LEGACY token (still referenced by older rules). The current --vamp-cta-*
     scheme is now identical (pink-fill + black-text), so this stays in
     lock-step with --vamp-cta-text. */
  --vamp-button-text-on-pink: #19191A;

  /* Semantic colors (form-state communication) */
  --vamp-error:              #B91C1C;
  --vamp-error-bg:           rgba(185, 28, 28, 0.06);
  --vamp-error-border:       rgba(185, 28, 28, 0.30);
  --vamp-success:            #15803D;
  --vamp-success-bg:         rgba(21, 128, 61, 0.06);
  --vamp-success-border:     rgba(21, 128, 61, 0.30);

  /* Typography (Vamp brand families — loaded by Hello Elementor / Elementor) */
  --vamp-font-heading:       "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --vamp-font-body:          "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --vamp-font-ui-label:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Sizing — matches Vamp's brand rhythm (10px radius across buttons + cards) */
  --vamp-radius:             10px;
  --vamp-field-height:       48px; /* WCAG 2.2 SC 2.5.8 touch target ≥24px; D7 Mobile 44pt iOS / 48dp Android */
  --vamp-button-height:      56px; /* generous primary CTA */

  /* Focus indicators (SC 2.4.7) */
  --vamp-focus-shadow-field:  0 0 0 3px rgba(237, 130, 157, 0.45); /* new hot pink #ED829D @45% */
  --vamp-focus-shadow-button: 0 0 0 3px rgba(26, 26, 26, 0.30);
}

/* --- Field wrapper spacing ----------------------------------------------- */
.fluentform .ff-el-form-control {
  margin-bottom: 20px;
}
.fluentform .ff-el-form-control:last-of-type {
  margin-bottom: 28px;
}

/* --- Label --------------------------------------------------------------- */
.fluentform .ff-el-input--label label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--vamp-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vamp-black);
}

/* Required field asterisk */
.fluentform .ff-el-is-required label::after {
  content: " *";
  color: var(--vamp-error);
  font-weight: 500;
  margin-left: 2px;
}

/* --- Text + email inputs — resting --------------------------------------- */
.fluentform .ff-el-input--text input[type="text"],
.fluentform .ff-el-input--text input[type="email"],
.fluentform .ff-el-form-control input[type="text"],
.fluentform .ff-el-form-control input[type="email"] {
  display: block;
  width: 100%;
  min-height: var(--vamp-field-height);
  padding: 14px 16px;
  font-family: var(--vamp-font-body);
  font-size: 16px; /* 16px+ prevents iOS auto-zoom on focus */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--vamp-black);
  background-color: var(--vamp-white);
  border: 1px solid var(--vamp-grey-text);
  border-radius: var(--vamp-radius);
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder — Firefox default opacity 0.54 → override to 1 so contrast holds */
.fluentform .ff-el-input--text input::placeholder,
.fluentform .ff-el-form-control input::placeholder {
  color: var(--vamp-grey-text);
  opacity: 1;
}

/* --- Inputs — focus state (SC 2.4.7) ------------------------------------ */
.fluentform .ff-el-input--text input:focus,
.fluentform .ff-el-form-control input:focus {
  outline: none;
  border-color: var(--vamp-black);
  box-shadow: var(--vamp-focus-shadow-field);
}

/* --- Inputs — error state ------------------------------------------------ */
.fluentform .ff-has-error .ff-el-input--text input,
.fluentform .ff-has-error .ff-el-form-control input,
.fluentform .ff-el-input--text input[aria-invalid="true"],
.fluentform .ff-el-form-control input[aria-invalid="true"] {
  border-color: var(--vamp-error);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.20);
}

/* --- Inputs — disabled (future-proofing) -------------------------------- */
.fluentform .ff-el-input--text input:disabled,
.fluentform .ff-el-form-control input:disabled {
  background-color: #F5F5F5;
  border-color: var(--vamp-grey-divider);
  color: var(--vamp-grey-accent);
  cursor: not-allowed;
}

/* --- Helper text --------------------------------------------------------- */
.fluentform .ff-el-input--label .ff-el-help-message {
  display: block;
  margin-top: 6px;
  font-family: var(--vamp-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vamp-grey-text);
}

/* --- Inline field error message ----------------------------------------- */
.fluentform .error,
.fluentform .ff-el-form-message.ff-error,
.fluentform .text-danger {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--vamp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vamp-error);
}
.fluentform .ff-el-form-message.ff-error::before {
  content: "⚠";
  display: inline-block;
  font-size: 14px;
}

/* --- Submit button — resting -------------------------------------------- */
/* CTA scheme 2026-05-31: PINK fill + BLACK text (matches site-wide CTA
   pattern set by the header BOOK A CONSULTATION button). The pink button
   is the Distinctive Brand Asset; black text carries copy. On hover the
   pink lightens to #F291AC (does not invert). Weight reduced to 700 (was
   600) to match the floating intent-router CTA's heavier weight, which
   reads better as dark-on-pink. WCAG 2.2 SC 1.4.3:
   resting #19191A on #ED829D = 6.93:1 (AA normal / AAA large);
   hover    #19191A on #F291AC = 7.88:1 (AAA normal).
   https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html */
.fluentform .ff_btn_style,
.fluentform button[type="submit"],
.fluentform .ff-btn-submit {
  display: block;
  width: 100%;
  min-height: var(--vamp-button-height);
  padding: 16px 24px;
  margin: 0;
  font-family: var(--vamp-font-body);
  font-size: 17px;
  font-weight: 700; /* matches floating intent-router CTA; dark-on-pink reads cleaner at 700 */
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: capitalize; /* matches Vamp brand button discipline */
  color: var(--vamp-cta-text);          /* black */
  background-color: var(--vamp-cta-bg);  /* hot pink */
  border: none;
  border-radius: var(--vamp-radius);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 50ms ease;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 599px) {
  .fluentform .ff_btn_style,
  .fluentform button[type="submit"],
  .fluentform .ff-btn-submit {
    font-size: 16px;
  }
}

/* Hover (mouse) — pink lightens to #F291AC, text stays black (7.88:1) */
.fluentform .ff_btn_style:hover:not(:disabled),
.fluentform button[type="submit"]:hover:not(:disabled),
.fluentform .ff-btn-submit:hover:not(:disabled) {
  background-color: var(--vamp-cta-bg-hover);   /* lighter pink #F291AC */
  color: var(--vamp-cta-text-hover);            /* black */
}

/* Focus (keyboard-visible — SC 2.4.7) */
.fluentform .ff_btn_style:focus-visible,
.fluentform button[type="submit"]:focus-visible,
.fluentform .ff-btn-submit:focus-visible {
  outline: none;
  box-shadow: var(--vamp-focus-shadow-button);
}

/* Active (pressed) — holds the lighter-pink hover fill + black text, pressed feel */
.fluentform .ff_btn_style:active:not(:disabled),
.fluentform button[type="submit"]:active:not(:disabled),
.fluentform .ff-btn-submit:active:not(:disabled) {
  background-color: var(--vamp-cta-bg-hover); /* lighter pink */
  color: var(--vamp-cta-text-hover);          /* black */
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* Disabled / loading */
.fluentform .ff_btn_style:disabled,
.fluentform button[type="submit"]:disabled,
.fluentform .ff-btn-submit:disabled {
  background-color: var(--vamp-grey-divider);
  color: var(--vamp-grey-text); /* #595959 on #ECECEC = 4.6:1, AA (was grey-accent, too faint) */
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Reduced motion accessibility (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .fluentform .ff_btn_style,
  .fluentform button[type="submit"],
  .fluentform .ff-btn-submit,
  .fluentform .ff-el-input--text input,
  .fluentform .ff-el-form-control input {
    transition: none;
  }
}

/* --- Form-level success message (after submission) ---------------------- */
.fluentform .ff-message-success,
.fluentform .ff_message_success {
  display: block;
  padding: 24px;
  margin: 0;
  font-family: var(--vamp-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vamp-black);
  background-color: var(--vamp-success-bg);
  border: 1px solid var(--vamp-success-border);
  border-radius: var(--vamp-radius);
}
.fluentform .ff-message-success::before {
  content: "✓ ";
  color: var(--vamp-success);
  font-weight: 600;
}

/* --- Form-level error banner -------------------------------------------- */
.fluentform .ff-errors-in-stack,
.fluentform .ff_message_error,
.fluentform .ff-el-form-message-error {
  display: block;
  padding: 16px;
  margin-bottom: 20px;
  font-family: var(--vamp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vamp-black);
  background-color: var(--vamp-error-bg);
  border: 1px solid var(--vamp-error-border);
  border-radius: var(--vamp-radius);
}
.fluentform .ff-errors-in-stack::before {
  content: "⚠ ";
  color: var(--vamp-error);
  font-weight: 600;
}

/* --- Popup context (form inside Elementor popup) ------------------------ */
.elementor-popup-modal .fluentform_wrapper,
.dialog-message .fluentform_wrapper {
  padding: 32px 24px;
  background-color: var(--vamp-white);
  border-radius: var(--vamp-radius);
  box-shadow: 0 4px 20px rgba(26, 26, 26, 0.10);
}

@media (max-width: 599px) {
  .elementor-popup-modal .fluentform_wrapper,
  .dialog-message .fluentform_wrapper {
    padding: 24px 16px;
  }
}

/* --- Form section heading (when present) -------------------------------- */
.fluentform .ff-el-section-title {
  margin: 0 0 16px;
  font-family: var(--vamp-font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--vamp-black);
}

@media (min-width: 600px) {
  .fluentform .ff-el-section-title {
    font-size: 26px;
  }
}

/* =========================================================================
   Vamp Salon — Fluent Forms empty-error-stack cleanup (2026-05-25).
   --------------------------------------------------------------------------
   Fluent Forms always renders an empty error-stack container per form
   (<div id="fluentform_<id>_errors" class="ff-errors-in-stack"></div>).
   Plugin's default styling gives this container a red-tinted border +
   warning icon background, which appears as an empty red bar below the
   submit button on EVERY form on the site — even when there are no
   errors to display.

   Hiding empty stacks via :empty pseudo-class. As soon as Fluent Forms
   injects an actual error message into the container (validation
   failure), it stops being :empty and renders normally.

   Verified affects every Fluent Forms instance on vampsalon.com (not
   model-call-specific). Discovered during Model Call sprint deploy
   smoke check 2026-05-25.
   ========================================================================= */
.fluentform .ff-errors-in-stack:empty,
.ff-errors-in-stack:empty {
    display: none !important;
}

/* =========================================================================
   Vamp Salon — Site-wide Elementor button CTA inversion (2026-05-31).
   --------------------------------------------------------------------------
   Operator directive: make the header BOOK A CONSULTATION button's visual
   style (pink-fill + black-text) the site-wide primary-CTA standard. The
   prior scheme (black-fill + pink-text, set in the 2026-05-29 WCAG audit
   /Users/jamescreston/Developer/vamp-salon/website/docs/CHANGE-2026-05-29-BUTTON-WCAG-COMPLIANCE.md
   commit ba51dab on website repo) is flipped here.

   WHY THIS RULE EXISTS (not just the token flip above):
   Elementor renders per-widget colors as a higher-specificity inline
   <style> block in the page <head>, e.g.
       .elementor-element-69a1586 .elementor-button {
         background-color: #19191A; color: #ED829D;
       }
   That selector's specificity (0,2,1) beats the global Kit (0,1,1) AND
   beats a generic theme rule. The chip's per-widget WCAG patch wrote
   those literal hex values directly into _elementor_data, so flipping
   the Kit alone does NOT flip the body CTAs — those per-widget hex values
   would still render dark-on-pink-text.

   Rather than editing dozens of _elementor_data blobs across pages (each
   edit is irreversible-without-backup and needs WPE varnish purge + page
   re-save), this single CSS rule lifts the body-CTA color pair via
   higher specificity + !important. Trade-off: a global override is
   coarser than per-widget data, but it lives in ONE auditable file and
   auto-applies to every existing widget plus any future widget that
   inherits the dark-pattern Kit defaults.

   SCOPE (intentionally broad):
     - .elementor-widget-button .elementor-button — every Elementor Button
       widget instance (the primary site-wide CTA component)
     - .elementor-widget-form .elementor-button[type="submit"] — Elementor
       Form widget submit buttons (e.g. newsletter Subscribe in footer);
       these share the .elementor-button look with body CTAs and would
       otherwise render in the prior dark-fill scheme via Kit defaults,
       creating visible inconsistency. Per operator visual-consistency
       intent, flip them too. FluentForms submit buttons (.ff-btn-submit)
       are handled separately above; both pick up the same token values
       so the entire site renders one CTA color scheme.

   EXCLUSIONS:
     - .vamp-router-cta — the floating intent-router CTA in
       inc/intent-router-cta.php (already pink-fill+dark-text @ commit
       99900c3); :not() guard keeps it self-styled.
     - .elementor-element-6f09b74 — header BOOK A CONSULTATION button
       (already pink-fill+dark-text — the visual standard we're matching;
       no override needed, its own inline rule already paints the right
       colors at higher specificity than ours).
     - .elementor-element-84d0107 — Get Directions GOLD button
       (separate brand element per memory
        pattern_vamp_salon_brand_a11y_finding; gold #D69A2D on dark
        #19191A = 7.13:1, kept gold per the 2026-05-29 WCAG audit).
       Re-asserted below with !important defense-in-depth.

   WCAG 2.2 SC 1.4.3 Contrast (Minimum) Level AA:
     Resting: #19191A on #ED829D = 6.93:1 (AA normal / AAA large)
     Hover:   #19191A on #F291AC = 7.88:1 (AAA normal)
     Focus:   3px outline at #19191A on pink, offset 3px (SC 2.4.7)
   https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
   https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html
   Touch target ≥48×48px (SC 2.5.8): existing padding 17px×24px on
   17px text yields ~51px tall, untouched here.
   https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
   ========================================================================= */
.elementor-widget-button .elementor-button:not(.vamp-router-cta),
.elementor-widget-form .elementor-button[type="submit"]:not(.vamp-router-cta) {
  background-color: var(--vamp-cta-bg) !important;       /* hot pink #ED829D */
  color: var(--vamp-cta-text) !important;                /* black  #19191A */
  fill: var(--vamp-cta-text) !important;                  /* SVG glyphs match text */
}
.elementor-widget-button .elementor-button:not(.vamp-router-cta):hover,
.elementor-widget-button .elementor-button:not(.vamp-router-cta):focus,
.elementor-widget-form .elementor-button[type="submit"]:not(.vamp-router-cta):hover,
.elementor-widget-form .elementor-button[type="submit"]:not(.vamp-router-cta):focus {
  background-color: var(--vamp-cta-bg-hover) !important; /* lighter pink #F291AC */
  color: var(--vamp-cta-text-hover) !important;          /* black */
  fill: var(--vamp-cta-text-hover) !important;
}
.elementor-widget-button .elementor-button:not(.vamp-router-cta):focus-visible,
.elementor-widget-form .elementor-button[type="submit"]:not(.vamp-router-cta):focus-visible {
  outline: 3px solid var(--vamp-cta-text) !important;    /* SC 2.4.7 — visible focus */
  outline-offset: 3px !important;
}

/* RE-PRESERVE the two excluded buttons explicitly. The Elementor per-widget
   <style> block already paints them correctly — these rules are an extra
   guard so an upstream cascade change can't make them inherit the body
   scheme accidentally. */
/* Header pink CTA: stays pink-fill + black-text (no override needed; already
   matches the new scheme). */

/* Gold Get Directions: stays gold-fill + black-text. */
.elementor-element-84d0107 .elementor-button,
.elementor-widget-button .elementor-button.vamp-gold-cta {
  background-color: #D69A2D !important; /* brand gold */
  color: #19191A !important;             /* black */
  fill: #19191A !important;
}
.elementor-element-84d0107 .elementor-button:hover,
.elementor-element-84d0107 .elementor-button:focus,
.elementor-widget-button .elementor-button.vamp-gold-cta:hover,
.elementor-widget-button .elementor-button.vamp-gold-cta:focus {
  background-color: #19191A !important;  /* hover inverts to dark */
  color: #D69A2D !important;
  fill: #D69A2D !important;
}

/* === VAMP-SHOP START (auto-managed; do not edit inside markers) === */
/* ============================================================================
   Vamp Salon — WooCommerce Shop brand layer
   Aligns the R+Co retail shop (archive + single product) with the LOCKED Vamp
   brand canon (VAMP-BRAND-IDENTITY.md, 2026-05-29) + WCAG 2.2 AA.

   Tokens (literal, WooCommerce-scoped):
     PINK #ED829D · BLACK #19191A · GOLD #D69A2D · WARM-BROWN #775135
     BODY-GREY #53565A · MID-GREY #B1B3B3 · BONE #F5F1EC · DIVIDER #ECECEC
   Type: Alexandria (headings+body) · Poppins (eyebrow/labels)
   CTA scheme: BLACK fill + PINK text (6.93:1), invert on hover. White-on-pink BANNED.

   NOTE: !important + body-scoped specificity are required to win over Elementor's
   Kit global button styles (which load after the child-theme stylesheet and
   otherwise force the banned pink-fill + white-text treatment).
   ============================================================================ */

/* ---- Product card grid (archive / [products]) ---------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 10px;
  padding: 14px 14px 20px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 22px rgba(25,25,26,.10);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product a img { border-radius: 8px; margin-bottom: 12px; }

/* Product titles — Alexandria, neutral black */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title {
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.5px;
  color: #19191A !important;
  line-height: 1.3;
}
.woocommerce div.product .product_title { letter-spacing: -1px; }

/* Price — body grey */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .woocommerce-Price-amount {
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: #53565A !important;
  font-weight: 500;
}
.woocommerce div.product p.price { font-size: 1.5rem; }

/* ---- CTA buttons: BLACK fill + PINK text, invert on hover ----------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product a.button,
.woocommerce-page a.button,
.woocommerce div.product .cart .button,
.woocommerce div.product p.cart a {
  background-color: #19191A !important;
  background-image: none !important;
  color: #ED829D !important;
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;       /* Title Case, never uppercase */
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce div.product form.cart .button:hover {
  background-color: #ED829D !important;  /* invert — pink fill, black text (6.93:1) */
  color: #19191A !important;
}

/* Keyboard focus — visible gold ring (WCAG 2.2 SC 2.4.7) */
.woocommerce a.button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible,
.woocommerce ul.products li.product a:focus-visible {
  outline: 2px solid #D69A2D !important;
  outline-offset: 2px !important;
}

/* ---- Single product short description ------------------------------------- */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #19191A;
  line-height: 1.6;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 10px; }

/* ---- Canonical container for the native WC single-product page -----------
   Native WC isn't wrapped in the Elementor container, so it rendered full-bleed
   (breadcrumb + image flush to the viewport edge). Constrain to the brand
   container (1280px, centered, 24px gutters — FORM-BRANDING-DESIGN-SPEC §1.6). */
.single-product .content-area,
.single-product main.site-main {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.single-product div.product { margin-top: 6px; }
.single-product div.product .product_title { margin-top: 0; }

/* ---- Breadcrumb + result count: Poppins eyebrow feel ---------------------- */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #53565A;
}
.woocommerce .woocommerce-breadcrumb a { color: #775135; text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: #19191A; }
.single-product .woocommerce-breadcrumb {
  margin: 30px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ECECEC;
}

/* Sale flash — gold on black (7.13:1), never white-on-pink */
.woocommerce span.onsale {
  background-color: #19191A !important;
  color: #D69A2D !important;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* ---- High-specificity guarantee for the primary external CTA -------------
   WC's purple `a.button.alt` rule (0,3,1) was beating equal-specificity rules;
   this (0,5,3) + `background` shorthand !important is unambiguous. ----------- */
.woocommerce div.product .cart a.single_add_to_cart_button,
.woocommerce div.product .cart a.single_add_to_cart_button.alt,
.woocommerce ul.products li.product a.add_to_cart_button.alt {
  background: #19191A !important;
  color: #ED829D !important;
}
.woocommerce div.product .cart a.single_add_to_cart_button:hover,
.woocommerce div.product .cart a.single_add_to_cart_button.alt:hover {
  background: #ED829D !important;
  color: #19191A !important;
}

/* ---- Afterpay / Square installment messaging ----------------------------
   In-salon only ( minimum) — does NOT apply to online R+Co affiliate
   orders, so suppress the messaging widget on shop + product pages. -------- */
.woocommerce square-placement,
.woocommerce-page square-placement,
.single-product square-placement,
.woocommerce afterpay-modal,
.single-product afterpay-modal { display: none !important; }

/* ---- "Suggested retail" tag + price disclaimer (external products) -------- */
.woocommerce .price .vamp-msrp,
.vamp-msrp {
  display: inline-block;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.6em; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  color: #53565A; vertical-align: middle; margin-left: 7px;
}
.vamp-price-disclaimer {
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8rem; line-height: 1.45; color: #53565A; max-width: 48ch; margin: 10px 0 2px;
}

/* ---- Salon-only kits ------------------------------------------------------ */
.vamp-salon-only-note {
  font-family: "Alexandria", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem; line-height: 1.5; color: #19191A;
  background: #F5F1EC; border-left: 3px solid #D69A2D;
  padding: 14px 18px; border-radius: 8px; max-width: 48ch; margin: 6px 0 14px;
}
.vamp-salon-only-note a { color: #775135; font-weight: 600; }
.vamp-salon-badge {
  display: inline-block; font-family: "Poppins", sans-serif; font-size: 0.62rem;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: #D69A2D; background: #19191A; border-radius: 999px;
  padding: 3px 10px; margin-bottom: 8px;
}

/* ---- Shop trust row (real signals) --------------------------------------- */
.vamp-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px;
  margin: 4px auto 6px; max-width: 920px;
}
.vamp-trust-item {
  font-family: "Poppins", -apple-system, sans-serif; font-size: 0.8rem; color: #53565A;
  line-height: 1.35; text-align: center; min-width: 150px;
}
.vamp-trust-item b {
  display: block; font-family: "Alexandria", -apple-system, sans-serif; font-weight: 600;
  font-size: 0.95rem; color: #19191A; letter-spacing: -0.2px; margin-bottom: 2px;
}
@media (max-width: 600px) {
  .vamp-trust { gap: 12px 16px; }
  .vamp-trust-item { min-width: 42%; font-size: 0.74rem; }
}

/* ---- Shop landing: image-led category cards (R+Co parity) ----------------- */
.woocommerce ul.products li.product-category {
  text-align: center;
  border: 1px solid #ECECEC;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product-category:hover {
  box-shadow: 0 8px 26px rgba(25,25,26,.12);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product-category a { display: block; text-decoration: none; }
.woocommerce ul.products li.product-category a img {
  display: block !important;
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #F5F1EC; padding: 16px; margin: 0 0 12px;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title,
.woocommerce ul.products li.product-category h2 {
  font-family: "Alexandria", -apple-system, sans-serif !important;
  font-size: 1rem !important; font-weight: 500 !important; color: #19191A !important;
  letter-spacing: -0.2px; padding: 0 10px 16px !important; text-transform: none;
}
.woocommerce ul.products li.product-category .count {
  display: block; background: transparent !important; color: #53565A !important;
  font-family: "Poppins", sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 1px; margin-top: 4px;
}

/* ---- Mobile (WCAG target size; 2-col grid) -------------------------------- */
@media (max-width: 768px) {
  .woocommerce ul.products li.product { padding: 10px 10px 16px; }
  .woocommerce a.button,
  .woocommerce .single_add_to_cart_button { min-height: 44px !important; }
  .woocommerce div.product p.price { font-size: 1.3rem; }
}

/* === VAMP-SHOP END === */