/* ═══════════════════════════════════════════════════════════════
   IBRAHIM FASHION — Utilities & Animations
   Motion language, reveal effects, preloader, marquee.
   Loaded last, after all other CSS.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. MOTION LANGUAGE — keyframes
   A consistent, premium set. No bouncy / cartoon effects.
   ───────────────────────────────────────────────────────────── */

@keyframes if-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes if-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes if-fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes if-fade-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes if-fade-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes if-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes if-line-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes if-line-reveal-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes if-ken-burns {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1)    translate(0, 0); }
}

@keyframes if-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes if-spin {
  to { transform: rotate(360deg); }
}

@keyframes if-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes if-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes if-bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.06); opacity: 1; }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}


/* ─────────────────────────────────────────────────────────────
   2. ANIMATION UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */
.if-animate-fade    { animation: if-fade-in   var(--if-dur-slow) var(--if-ease) both; }
.if-animate-up      { animation: if-fade-up   var(--if-dur-slow) var(--if-ease) both; }
.if-animate-down    { animation: if-fade-down var(--if-dur-slow) var(--if-ease) both; }
.if-animate-left    { animation: if-fade-left var(--if-dur-slow) var(--if-ease) both; }
.if-animate-right   { animation: if-fade-right var(--if-dur-slow) var(--if-ease) both; }
.if-animate-scale   { animation: if-scale-in  var(--if-dur-slow) var(--if-ease) both; }
.if-animate-bounce  { animation: if-bounce-in 500ms var(--if-ease-spring) both; }

/* Delay helpers */
.if-delay-1 { animation-delay: 100ms; }
.if-delay-2 { animation-delay: 200ms; }
.if-delay-3 { animation-delay: 300ms; }
.if-delay-4 { animation-delay: 400ms; }
.if-delay-5 { animation-delay: 500ms; }
.if-delay-6 { animation-delay: 600ms; }


/* ─────────────────────────────────────────────────────────────
   3. SCROLL REVEAL
   Add data-reveal to any element. JS adds .is-revealed
   when it scrolls into view.
   ───────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--if-dur-slower) var(--if-ease),
    transform var(--if-dur-slower) var(--if-ease);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(32px); }
[data-reveal="right"] { transform: translateX(-32px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children with data-reveal-stagger on parent */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--if-ease),
    transform 600ms var(--if-ease);
}

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-revealed > *:nth-child(n+7) { transition-delay: 480ms; }


/* ─────────────────────────────────────────────────────────────
   4. PRELOADER
   Appears instantly, disappears as soon as page is ready.
   Never used as an excuse to delay loading.
   ───────────────────────────────────────────────────────────── */
.if-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--if-z-preloader);
  background: var(--if-white);
  display: grid;
  place-items: center;
  transition:
    opacity var(--if-dur-slow) var(--if-ease),
    visibility var(--if-dur-slow) var(--if-ease);
}

.if-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.if-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--if-s5);
}

.if-preloader__logo {
  font-family: var(--if-font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-charcoal);
  animation: if-fade-in 600ms var(--if-ease) both;
}

.if-preloader__logo b {
  color: var(--if-gold);
  font-weight: var(--if-fw-semi);
}

.if-preloader__line {
  width: 120px;
  height: 1px;
  background: var(--if-line);
  position: relative;
  overflow: hidden;
}

.if-preloader__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--if-gold);
  transform-origin: left;
  animation: if-line-reveal 1400ms var(--if-ease) infinite;
}


/* ─────────────────────────────────────────────────────────────
   5. MARQUEE
   Smooth infinite scroll of text or logos. Pauses on hover.
   ───────────────────────────────────────────────────────────── */
.if-marquee {
  overflow: hidden;
  background: var(--if-charcoal-bg);
  color: var(--if-champagne);
  padding-block: 18px;
  position: relative;
}

.if-marquee__track {
  display: flex;
  gap: var(--if-s7);
  white-space: nowrap;
  width: max-content;
  animation: if-marquee var(--if-marquee-speed, 34s) linear infinite;
}

.if-marquee:hover .if-marquee__track {
  animation-play-state: paused;
}

.if-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--if-s7);
  font-size: var(--if-fs-xs);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-champagne);
}

.if-marquee__item::after {
  content: "◆";
  color: var(--if-gold);
  font-size: 0.6rem;
}

/* Variants */
.if-marquee--light {
  background: var(--if-ivory);
  color: var(--if-charcoal);
  border-block: 1px solid var(--if-line);
}

.if-marquee--light .if-marquee__item {
  color: var(--if-charcoal);
}


/* ─────────────────────────────────────────────────────────────
   6. KEN BURNS — hero image subtle motion
   ───────────────────────────────────────────────────────────── */
.if-ken-burns {
  animation: if-ken-burns 24s ease-in-out infinite;
  will-change: transform;
}


/* ─────────────────────────────────────────────────────────────
   7. PARALLAX — applied by JS via CSS variable --if-parallax-y
   ───────────────────────────────────────────────────────────── */
.if-parallax {
  transform: translate3d(0, var(--if-parallax-y, 0), 0);
  will-change: transform;
}


/* ─────────────────────────────────────────────────────────────
   8. HOVER EFFECTS
   ───────────────────────────────────────────────────────────── */

/* Lift — cards, tiles */
.if-hover-lift {
  transition: transform var(--if-dur) var(--if-ease),
              box-shadow var(--if-dur) var(--if-ease);
}

.if-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--if-shadow-lg);
}

/* Underline grow — links */
.if-hover-underline {
  position: relative;
  display: inline-block;
}

.if-hover-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--if-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--if-dur) var(--if-ease);
}

.if-hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Gold overlay on images */
.if-hover-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(198, 161, 91, 0.15);
  opacity: 0;
  transition: opacity var(--if-dur) var(--if-ease);
  z-index: 2;
  pointer-events: none;
}

.if-hover-gold:hover::before {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   9. LOADING STATES
   ───────────────────────────────────────────────────────────── */
.if-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.if-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--if-line);
  border-top-color: var(--if-gold);
  border-radius: 50%;
  animation: if-spin 700ms linear infinite;
}

.if-spin {
  animation: if-spin 1s linear infinite;
}

.if-pulse {
  animation: if-pulse 2s ease-in-out infinite;
}


/* ─────────────────────────────────────────────────────────────
   10. RIPPLE EFFECT (for buttons — click feedback)
   ───────────────────────────────────────────────────────────── */
.if-ripple {
  position: relative;
  overflow: hidden;
}

.if-ripple__wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: if-ripple-anim 600ms var(--if-ease);
  pointer-events: none;
}

@keyframes if-ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* ─────────────────────────────────────────────────────────────
   11. TEXT EFFECTS
   ───────────────────────────────────────────────────────────── */

/* Underline highlight */
.if-text-highlight {
  background: linear-gradient(to top, var(--if-gold-soft) 38%, transparent 38%);
  padding-inline: 2px;
}

/* Gold gradient text */
.if-text-gradient-gold {
  background: linear-gradient(135deg, var(--if-gold), var(--if-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Letter-spaced small caps label */
.if-text-label {
  font-size: var(--if-fs-xs);
  font-weight: var(--if-fw-medium);
  letter-spacing: var(--if-track-widest);
  text-transform: uppercase;
  color: var(--if-gold-deep);
}


/* ─────────────────────────────────────────────────────────────
   12. SKELETON / SHIMMER
   ───────────────────────────────────────────────────────────── */
.if-skeleton-lines {
  display: grid;
  gap: var(--if-s2);
}

.if-skeleton-line {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--if-line-soft) 25%,
    var(--if-line) 50%,
    var(--if-line-soft) 75%
  );
  background-size: 200% 100%;
  animation: if-shimmer 1.6s infinite linear;
  border-radius: var(--if-r-xs);
}

.if-skeleton-line--title  { height: 18px; width: 60%; }
.if-skeleton-line--short  { width: 40%; }
.if-skeleton-line--long   { width: 90%; }


/* ─────────────────────────────────────────────────────────────
   13. NUMBER FORMATTING
   ───────────────────────────────────────────────────────────── */
.if-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ─────────────────────────────────────────────────────────────
   14. SPACER HELPERS
   ───────────────────────────────────────────────────────────── */
.if-spacer-4  { height: var(--if-s4); }
.if-spacer-5  { height: var(--if-s5); }
.if-spacer-6  { height: var(--if-s6); }
.if-spacer-7  { height: var(--if-s7); }
.if-spacer-8  { height: var(--if-s8); }
.if-spacer-9  { height: var(--if-s9); }
.if-spacer-10 { height: var(--if-s10); }


/* ─────────────────────────────────────────────────────────────
   15. BORDER HELPERS
   ───────────────────────────────────────────────────────────── */
.if-border       { border: 1px solid var(--if-line); }
.if-border-top   { border-top: 1px solid var(--if-line); }
.if-border-bottom{ border-bottom: 1px solid var(--if-line); }
.if-border-left  { border-left: 1px solid var(--if-line); }
.if-border-right { border-right: 1px solid var(--if-line); }

.if-border-gold  { border-color: var(--if-gold); }
.if-border-charcoal { border-color: var(--if-charcoal); }

.if-rounded-sm   { border-radius: var(--if-r-sm); }
.if-rounded-md   { border-radius: var(--if-r-md); }
.if-rounded-lg   { border-radius: var(--if-r-lg); }
.if-rounded-pill { border-radius: var(--if-r-pill); }


/* ─────────────────────────────────────────────────────────────
   16. BACKGROUND HELPERS
   ───────────────────────────────────────────────────────────── */
.if-bg-white     { background: var(--if-white); }
.if-bg-ivory     { background: var(--if-ivory); }
.if-bg-champagne { background: var(--if-champagne); }
.if-bg-gold-wash { background: var(--if-gold-wash); }
.if-bg-charcoal  { background: var(--if-charcoal-bg); }


/* ─────────────────────────────────────────────────────────────
   17. OVERFLOW CONTROL
   ───────────────────────────────────────────────────────────── */
.if-scroll-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.if-scroll-x-auto::-webkit-scrollbar {
  height: 6px;
}

.if-scroll-x-auto::-webkit-scrollbar-thumb {
  background: var(--if-line-strong);
  border-radius: var(--if-r-pill);
}

/* Snap scroll — horizontal carousels */
.if-snap-x {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--if-s4);
}

.if-snap-x::-webkit-scrollbar {
  display: none;
}

.if-snap-x > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   18. SCREEN READER / ACCESSIBILITY — extra helpers
   ───────────────────────────────────────────────────────────── */

/* Show element only when focused (for skip links inside components) */
.if-focus-only {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.if-focus-only:focus {
  position: static;
  opacity: 1;
  pointer-events: auto;
}

/* Content that should only show to keyboard users */
.if-keyboard-only:focus-visible {
  outline: var(--if-focus-width) solid var(--if-focus-color);
  outline-offset: var(--if-focus-offset);
}


/* ─────────────────────────────────────────────────────────────
   19. PRINT UTILITIES
   ───────────────────────────────────────────────────────────── */
@media print {
  .if-no-print {
    display: none !important;
  }

  .if-print-only {
    display: block !important;
  }
}

.if-print-only {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   20. RESPONSIVE VISIBILITY — small / medium / large
   ───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .if-show-sm-up   { display: none !important; }
}

@media (min-width: 480px) {
  .if-hide-sm-up   { display: none !important; }
}

@media (max-width: 767px) {
  .if-show-md-up   { display: none !important; }
}

@media (min-width: 768px) {
  .if-hide-md-up   { display: none !important; }
}

@media (max-width: 1023px) {
  .if-show-lg-up   { display: none !important; }
}

@media (min-width: 1024px) {
  .if-hide-lg-up   { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   21. REDUCED MOTION — final override
   Must be the last rule in the file. Disables all motion
   for users who have requested it in their OS settings.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .if-marquee__track,
  .if-ken-burns,
  .if-spin,
  .if-pulse,
  .if-preloader__line::after {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .if-parallax {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY - Headings dark black, accents light gold
   Applies to every page: home, shop, product, cart, checkout, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ALL HEADINGS — dark black */
h1, h2, h3, h4, h5, h6,
.if-page-title,
.if-section__head h2,
.if-category-card__title,
.if-product-card__title,
.if-product-card__title a,
.if-footer__title,
.if-newsletter h2,
.if-pre-footer h2,
.if-testimonials h2,
.if-value-card h3,
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.woocommerce-tabs ul.tabs li a,
.single-product .product_title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review::before,
.cart_totals h2,
.woocommerce-order h1,
.woocommerce-thankyou-order-received,
.if-empty h3,
.if-search-empty h4 {
  color: #0A0A0A !important;
}

/* Eyebrow labels — LIGHT GOLD */
.if-eyebrow,
.if-section__head .if-eyebrow,
.if-hero-slider__eyebrow,
.if-category-card__eyebrow,
.if-newsletter__eyebrow,
.if-product-card__cat,
.if-product-details__label,
.if-trust__text strong + span,
.woocommerce-breadcrumb,
.if-breadcrumbs {
  color: var(--if-gold, #C6A15B) !important;
}

/* Breadcrumb links — light gold */
.woocommerce-breadcrumb a,
.if-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--if-gold, #C6A15B) !important;
}

.woocommerce-breadcrumb a:hover,
.if-breadcrumbs a:hover {
  color: #0A0A0A !important;
}

/* Current breadcrumb item — dark black */
.woocommerce-breadcrumb > :last-child,
.if-breadcrumbs [aria-current="page"],
.if-breadcrumbs li:last-child {
  color: #0A0A0A !important;
}

/* Buttons — keep their own colors (no change) */
.if-btn,
button,
.single_add_to_cart_button,
.checkout-button,
#place_order {
  /* Don't touch — preserve button styles */
}

/* Section heads — heading dark black, eyebrow gold */
.if-section__head h2,
.if-section__head h3 {
  color: #0A0A0A !important;
}

/* WooCommerce specific */
.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  color: #0A0A0A !important;
}

/* Payment method labels — dark */
.woocommerce-checkout #payment ul.wc_payment_methods li label {
  color: #0A0A0A !important;
}

/* Category card title — dark on dark bg, keep white */
.if-category-card__title {
  color: #FFFFFF !important;
}

/* Newsletter heading on dark bg — keep white */
.if-newsletter h2,
.if-pre-footer h2 {
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════
   GLOBAL HEADINGS - Light gold background + Dark black text
   Applies to ALL headings across the site.
   ═══════════════════════════════════════════════════════════════ */

/* Base style for every heading */
h1, h2, h3, h4, h5, h6,
.if-page-title,
.if-section__head h2,
.if-category-card__title,
.if-product-card__title,
.if-product-card__title a,
.if-footer__title,
.if-newsletter h2,
.if-pre-footer h2,
.if-value-card h3,
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.single-product .product_title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.cart_totals h2,
.woocommerce-order h1,
.woocommerce-thankyou-order-received,
.if-empty h3,
.if-search-empty h4,
.if-testimonials h2 {
  color: #0A0A0A !important;
  background: #F4E9CF !important;
  display: inline-block !important;
  padding: 6px 16px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* Remove gold bg from small/plain headings that are inside cards */
.if-product-card__title,
.if-product-card__title a,
.if-value-card h3,
.if-category-card__title {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #0A0A0A !important;
}

/* Category card title — on dark overlay, use white text */
.if-category-card__title {
  color: #FFFFFF !important;
}

/* Newsletter & Pre-footer headings — on dark bg, keep white text but light gold pill */
.if-newsletter h2,
.if-pre-footer h2 {
  color: #0A0A0A !important;
  background: #F4E9CF !important;
  padding: 8px 20px !important;
  border-radius: 3px !important;
  display: inline-block !important;
}

/* Footer column titles — on dark bg, subtle gold bg */
.if-footer__title {
  color: #0A0A0A !important;
  background: #F4E9CF !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  font-weight: 600 !important;
}

/* Product page main title — larger pill */
.single-product .product_title {
  padding: 10px 20px !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
}

/* Cart/Checkout main page titles — bigger pill */
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.if-page-title {
  padding: 10px 24px !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
}

/* Section heads */
.if-section__head h2 {
  padding: 8px 22px !important;
}

/* Cart totals heading */
.woocommerce-cart .cart_totals > h2,
.cart_totals h2 {
  padding: 10px 18px !important;
  margin-bottom: 20px !important;
}

/* Order review heading on checkout */
.woocommerce-checkout #order_review_heading {
  padding: 8px 18px !important;
  margin-bottom: 20px !important;
}

/* WooCommerce tabs (Description / Reviews) */
.woocommerce-tabs ul.tabs li a {
  background: transparent !important;
  color: #0A0A0A !important;
  padding: 12px 20px !important;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li.active a {
  background: #F4E9CF !important;
  color: #0A0A0A !important;
  padding: 12px 20px !important;
  border-radius: 3px 3px 0 0 !important;
}

/* Product details / Complete the look / Related section headings */
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.related.products > h2,
.upsells.products > h2 {
  padding: 8px 20px !important;
  display: inline-block !important;
}

/* Eyebrow labels stay as small gold text, no background */
.if-eyebrow,
.if-section__head .if-eyebrow,
.if-hero-slider__eyebrow,
.if-category-card__eyebrow,
.if-newsletter__eyebrow,
.if-product-card__cat,
.if-product-details__label {
  background: transparent !important;
  padding: 0 !important;
  color: var(--if-gold, #C6A15B) !important;
  display: inline-block !important;
}

/* Force headings that contain <a> tags to also be black */
.if-product-card__title a,
.if-section__head h2 a,
h1 a, h2 a, h3 a, h4 a {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Hover effect for links inside headings */
.if-product-card__title a:hover {
  color: var(--if-gold-deep, #A9834A) !important;
}

/* WooCommerce "Order received" heading */
.woocommerce-thankyou-order-received {
  padding: 14px 28px !important;
}

/* Empty state heading */
.if-empty h3,
.if-search-empty h4 {
  padding: 8px 18px !important;
}

/* Testimonials section heading */
.if-testimonials h2 {
  padding: 8px 22px !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6,
  .if-page-title,
  .if-section__head h2,
  .if-product-card__title {
    padding: 6px 14px !important;
  }

  .woocommerce-cart .if-page-title,
  .woocommerce-checkout .if-page-title,
  .if-page-title {
    padding: 10px 18px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HEADINGS REVERSE - remove gold background pill
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.if-page-title,
.if-section__head h2,
.if-category-card__title,
.if-product-card__title,
.if-product-card__title a,
.if-footer__title,
.if-newsletter h2,
.if-pre-footer h2,
.if-value-card h3,
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.single-product .product_title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.cart_totals h2,
.woocommerce-order h1,
.woocommerce-thankyou-order-received,
.if-empty h3,
.if-search-empty h4,
.if-testimonials h2 {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  color: #0A0A0A !important;
}

/* Hero headline sits over dark imagery — keep it light for contrast */
.if-hero-slider__title {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

/* Restore dark-bg headings to white */
.if-newsletter h2,
.if-pre-footer h2,
.if-category-card__title {
  color: #FFFFFF !important;
}

/* Footer titles back to light */
.if-footer__title {
  color: #FFFFFF !important;
}

/* Section heads back to centered, no pill */
.if-section__head h2 {
  padding: 0 !important;
  display: block !important;
  text-align: center !important;
}

/* Product card title inline */
.if-product-card__title {
  display: block !important;
  padding: 0 !important;
}

/* Tabs — plain */
.woocommerce-tabs ul.tabs li a {
  background: transparent !important;
  padding: 14px 0 !important;
  border-radius: 0 !important;
}

.woocommerce-tabs ul.tabs li.active a {
  background: transparent !important;
  padding: 14px 0 !important;
}

/* Cart totals heading */
.woocommerce-cart .cart_totals > h2,
.cart_totals h2,
.woocommerce-checkout #order_review_heading {
  padding: 0 0 16px 0 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

/* Page title */
.if-page-title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title {
  padding: 0 !important;
  text-align: center !important;
}

.single-product .product_title {
  padding: 0 !important;
}

/* All headings back to dark */
h1, h2, h3, h4, h5, h6 {
  color: #0A0A0A !important;
}


/* ═══════════════════════════════════════════════════════════════
   HEADINGS REVERSE - remove forced colors (both updates)
   Restores original theme colors.
   ═══════════════════════════════════════════════════════════════ */

/* Remove forced dark on all headings — use theme defaults */
h1, h2, h3, h4, h5, h6,
.if-page-title,
.if-section__head h2,
.if-category-card__title,
.if-product-card__title,
.if-product-card__title a,
.if-footer__title,
.if-newsletter h2,
.if-pre-footer h2,
.if-value-card h3,
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.single-product .product_title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.cart_totals h2,
.woocommerce-order h1,
.woocommerce-thankyou-order-received,
.if-empty h3,
.if-search-empty h4,
.if-testimonials h2 {
  color: inherit !important;
  background: transparent !important;
}

/* Undo eyebrow gold overrides */
.if-eyebrow,
.if-section__head .if-eyebrow,
.if-hero-slider__eyebrow,
.if-category-card__eyebrow,
.if-newsletter__eyebrow,
.if-product-card__cat,
.if-product-details__label {
  color: inherit !important;
}

/* Undo breadcrumb color overrides */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.if-breadcrumbs,
.if-breadcrumbs a {
  color: inherit !important;
}

.woocommerce-breadcrumb > :last-child,
.if-breadcrumbs [aria-current="page"],
.if-breadcrumbs li:last-child {
  color: inherit !important;
}

/* Undo WooCommerce table heading overrides */
.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  color: inherit !important;
}

/* Undo payment label override */
.woocommerce-checkout #payment ul.wc_payment_methods li label {
  color: inherit !important;
}


/* ═══════════════════════════════════════════════════════════════
   EMERGENCY REVERSE - undo "color: inherit" damage
   Restores proper heading colors from theme tokens
   ═══════════════════════════════════════════════════════════════ */

/* Restore dark headings */
h1, h2, h3, h4, h5, h6,
.if-page-title,
.if-section__head h2,
.if-product-card__title,
.if-product-card__title a,
.if-value-card h3,
.if-product-details__head h2,
.if-complete-look h2,
.if-related h2,
.single-product .product_title,
.woocommerce-cart .if-page-title,
.woocommerce-checkout .if-page-title,
.woocommerce-account .if-page-title,
.woocommerce-cart .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.cart_totals h2,
.woocommerce-order h1,
.woocommerce-thankyou-order-received,
.if-empty h3,
.if-search-empty h4,
.if-testimonials h2 {
  color: #1C1B19 !important;
  background: transparent !important;
}

/* Dark-bg headings stay white */
.if-newsletter h2,
.if-pre-footer h2,
.if-category-card__title {
  color: #FFFFFF !important;
}

.if-footer__title {
  color: #FFFFFF !important;
}

/* Eyebrows back to gold */
.if-eyebrow,
.if-section__head .if-eyebrow,
.if-hero-slider__eyebrow,
.if-category-card__eyebrow,
.if-newsletter__eyebrow,
.if-product-card__cat,
.if-product-details__label {
  color: #A9834A !important;
}

/* Breadcrumbs */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.if-breadcrumbs,
.if-breadcrumbs a {
  color: #857F74 !important;
}

.woocommerce-breadcrumb > :last-child,
.if-breadcrumbs [aria-current="page"],
.if-breadcrumbs li:last-child {
  color: #1C1B19 !important;
}

/* WooCommerce tables */
.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
.woocommerce-cart .cart_totals table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  color: #1C1B19 !important;
}

.woocommerce-cart .cart_totals table td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
  color: #1C1B19 !important;
}

.woocommerce-checkout #payment ul.wc_payment_methods li label {
  color: #1C1B19 !important;
}

/* ═════════════════════════════════════════════════════════════
   HERO HEADLINE — authoritative (must stay light over dark imagery)
   ═════════════════════════════════════════════════════════════ */
.if-hero-slider__title {
  color: #FFFFFF !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.62), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE R — MOBILE PERFECT: scroll-reveal without horizontal shift
   [data-reveal="left"/"right"] start at translateX(±32px). Until the
   IntersectionObserver fires, the hidden element extends 32px past the
   viewport (body scrollWidth +16px @375, +50px @320 — measured). On
   mobile the reveal now moves on the Y axis only (same 32px travel,
   same duration) so nothing ever occupies horizontal space outside
   the viewport. Desktop behaviour is untouched (≤767px only).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(32px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE R — MOBILE PERFECT: global form touch minimums
   WooCommerce's stylesheet is not enqueued on non-WC pages (e.g. the
   404 screen), so the WP core search form's submit button lived at
   65×27px / 14px font there. These rules live in utilities.css, which
   loads on every screen.
   ═══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  input.search-submit,
  button.search-submit,
  input[type="search"] {
    font-size: 16px !important;
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
  }
}