/*
 * Floreva polish — additive, non-destructive overrides.
 *
 * Loaded site-wide AFTER floreva.css + page-specific CSS.
 * Pure CSS, no DOM changes, no schema touched, no JS — zero SEO/AIEO impact.
 *
 * Phase 1: touch-hover safety.
 * Touch devices fire :hover on tap, which leaves elements visually stuck in
 * their hover state. The rules below cancel hover-transforms when the
 * browser reports no real mouse pointer. Color/background hovers are left
 * alone because they do not get visually stuck on touch.
 */

@media (hover: none) {
  .fl-collection-wrap:hover .fl-collection-img,
  .fl-cart-link:hover .fl-cart-count {
    transform: none;
  }
}

/*
 * Phase 2: tap/click feedback on homepage CTAs.
 *
 * Subtle scale-down on :active confirms to the user that the interface
 * registered their press. Works for both touch and mouse — :active fires
 * on both. Custom ease-out curve gives a snappy, intentional feel.
 *
 * Targets only stable class/id hooks. No DOM edits, no schema impact.
 */

:root {
  --fl-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hero "Shop Now" button */
.fl-btn-shop {
  transition: background 200ms ease, transform 160ms var(--fl-ease-out);
}
.fl-btn-shop:active {
  transform: scale(0.97);
}

/* Skin concern tab buttons */
#fl-concern-btn-dark-spots,
#fl-concern-btn-acne,
#fl-concern-btn-dullness,
#fl-concern-btn-brightening {
  transition: border-color 200ms ease, background 200ms ease, transform 160ms var(--fl-ease-out);
}
#fl-concern-btn-dark-spots:active,
#fl-concern-btn-acne:active,
#fl-concern-btn-dullness:active,
#fl-concern-btn-brightening:active {
  transform: scale(0.98);
}

/* FAQ accordion buttons (already animate via .fl-accordion-icon, this adds press feel) */
.fl-accordion-item button {
  transition: transform 160ms var(--fl-ease-out);
}
.fl-accordion-item button:active {
  transform: scale(0.99);
}

/*
 * Phase 3: upgrade weak built-in easings on visible homepage transitions
 * to the custom ease-out curve. Same timing or slightly faster — different
 * feel. No behavior change. Pure perceived-quality polish.
 *
 * Pattern: redefine `transition` on each target. Other properties on the
 * original rule (display, etc.) cascade normally; CSS overrides only the
 * `transition` property.
 */

/* Fixed header — background + blur fade as user scrolls past hero */
.fl-header {
  transition: background 350ms var(--fl-ease-out),
              backdrop-filter 350ms var(--fl-ease-out),
              border-color 350ms var(--fl-ease-out);
}
.fl-header:not(.fl-scrolled) .fl-header-logo {
  transition: filter 350ms var(--fl-ease-out);
}

/* FAQ chevron rotation — already animated, upgrade easing for stronger landing */
.fl-accordion-icon {
  transition: transform 250ms var(--fl-ease-out);
}

/* Category card image zoom (desktop hover) — 700ms was draggy, tighten to 500ms */
.fl-collection-img {
  transition: transform 500ms var(--fl-ease-out);
}

/*
 * Phase 4: single product page polish.
 *
 * Targets the highest-impact interactive elements on product pages:
 * - Product accordion (touch-hover safety)
 * - Tab buttons (Description / How to Use / Ingredients) — fix `transition: all`
 * - Quantity +/- buttons (press feedback)
 * - Sticky add-to-cart bar (press feedback)
 * - Accordion chevron — snappier landing
 *
 * The main add-to-cart button already has press feedback via the
 * existing .fl-btn:active rule in floreva.css (.fl-btn class is applied).
 */

/* Touch-hover safety — product accordion summary color sticks on touch */
@media (hover: none) {
  details:hover > summary {
    color: inherit !important;
  }
}

/* Product info tabs — replace `transition: all` with explicit properties + press feedback */
.fl-tab-btn {
  transition: color 200ms var(--fl-ease-out),
              border-bottom-color 200ms var(--fl-ease-out),
              transform 160ms var(--fl-ease-out);
}
.fl-tab-btn:active {
  transform: scale(0.97);
}

/* Quantity +/- buttons — small buttons need stronger press */
.fl-qty button {
  transition: background 160ms var(--fl-ease-out), transform 160ms var(--fl-ease-out);
}
.fl-qty button:active {
  transform: scale(0.92);
}

/* Sticky add-to-cart bar — mobile/scroll-revealed CTA */
#fl-sticky-atc a {
  transition: background 200ms ease, transform 160ms var(--fl-ease-out);
}
#fl-sticky-atc a:active {
  transform: scale(0.97);
}

/* Accordion chevron landing — snappier */
details > summary > .material-symbols-outlined {
  transition: transform 250ms var(--fl-ease-out);
}

/*
 * Phase 5: cart + checkout polish.
 *
 * Conversion-critical pages. Three surgical changes only:
 *  - Press feedback on Remove link in cart
 *  - Press feedback on payment method labels (radio cards)
 *  - Custom ease-out curve on form field focus transitions
 *
 * Place Order button + main CTAs already use .fl-btn class which has
 * press feedback defined in floreva.css. Quantity buttons in cart use
 * .fl-qty which already inherits press feedback from phase 4.
 */

/* Cart — Remove link press feedback */
.fl-cart-item-remove {
  transition: color 160ms var(--fl-ease-out), transform 160ms var(--fl-ease-out);
  display: inline-block;
}
.fl-cart-item-remove:active {
  transform: scale(0.97);
}

/* Checkout — payment method tap feedback */
.fl-pay-option {
  transition: border-color 200ms var(--fl-ease-out),
              background 200ms var(--fl-ease-out),
              box-shadow 200ms var(--fl-ease-out),
              transform 160ms var(--fl-ease-out);
}
.fl-pay-option:active {
  transform: scale(0.99);
}

/* Checkout — form field focus, snappier landing */
.fl-chk-input input,
.fl-chk-input textarea,
.fl-chk-input select {
  transition: border-color 200ms var(--fl-ease-out),
              box-shadow 200ms var(--fl-ease-out),
              background 200ms var(--fl-ease-out);
}

/*
 * Phase 6: shop / browsing + nav polish.
 *
 *  - Touch-hover safety on product cards (lift + image zoom both stuck on tap)
 *  - Press feedback on product cards, pagination, drawer close
 *  - Pagination: replace `transition: all 0.2s` with explicit properties
 *  - Mobile slide-in menu: custom ease-out curve
 *
 * Product card hover behaviour preserved for real-mouse devices.
 */

/* Touch-hover safety: product cards lift + image zoom don't stick on tap */
@media (hover: none) {
  .fl-product-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .fl-product-card:hover .fl-product-img {
    transform: none !important;
  }
}

/* Shop — product card press feedback (works alongside the hover lift on desktop) */
.fl-product-card {
  transition: box-shadow 200ms var(--fl-ease-out),
              transform 200ms var(--fl-ease-out);
}
.fl-product-card:active {
  transform: scale(0.99);
}

/* Pagination buttons — explicit properties + press feedback */
.fl-page-btn {
  transition: background 200ms var(--fl-ease-out),
              color 200ms var(--fl-ease-out),
              border-color 200ms var(--fl-ease-out),
              transform 160ms var(--fl-ease-out);
}
.fl-page-btn:active {
  transform: scale(0.95);
}

/* Cart drawer close button — small button needs noticeable press */
.fl-drawer-close {
  transition: background 160ms var(--fl-ease-out), transform 160ms var(--fl-ease-out);
}
.fl-drawer-close:active {
  transform: scale(0.92);
}

/* Mobile slide-in menu — replace default ease with custom curve */
#fl-mobile-menu {
  transition: left 350ms var(--fl-ease-out);
}