/* ═══════════════════════════════════════════════════
   UX Polish — Maison Van Irene
   Layered refinements over tailwind.css + inline styles
   ═══════════════════════════════════════════════════ */

/* ── Batch 1: Foundational ── */

/* Tighten CTA / button radius to 2px (sharp luxury feel) */
a.metallic-gradient,
a[class*="metallic-gradient"],
button[type="submit"],
form input[type="email"],
.mobile-cta-bar a,
a[class*="rounded-xl"],
button[class*="rounded-xl"],
input[class*="rounded-xl"] {
  border-radius: 2px !important;
}

/* Keep rounded-full items round (avoid flattening pills used intentionally) */
a[class*="rounded-full"],
button[class*="rounded-full"] {
  border-radius: 9999px !important;
}

/* Unify hover scale to refined 1.015 (no startup bounce) */
a[class*="hover:scale-105"]:hover,
a[class*="hover:scale-[1.02]"]:hover,
button[class*="hover:scale-105"]:hover,
button[class*="hover:scale-[1.02]"]:hover {
  transform: scale(1.015) !important;
}

a[class*="active:scale-[0.98]"]:active,
button[class*="active:scale-[0.98]"]:active {
  transform: scale(0.99) !important;
}

/* Standardize hover transitions to 300ms with luxury ease */
a[class*="transition-transform"],
button[class*="transition-transform"],
a[class*="hover:scale"],
button[class*="hover:scale"] {
  transition-duration: 300ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── Batch 2: Motion Restraint ── */

/* Stop ambient glows from pulsing — keep static ambience */
.ambient-glow {
  animation: none !important;
  opacity: 0.14 !important;
}

/* Shimmer once and settle (no perpetual motion) */
.shimmer-text {
  animation: polishShimmerOnce 3.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s 1 forwards !important;
  background-position: 100% center;
}
@keyframes polishShimmerOnce {
  0%   { background-position: -150% center; }
  100% { background-position: 100% center; }
}

/* Remove blur from hero text reveal — cleaner, more restrained */
.hero-text-reveal {
  animation: polishHeroReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
@keyframes polishHeroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Batch 3: Polish Details ── */

/* Line-length cap — prevent fatigue on wide screens (65ch ≈ ideal reading) */
p {
  max-width: 65ch;
}
/* Preserve layout paragraphs that must span full width */
p.max-w-full,
p.max-w-none,
p[class*="max-w-"],
footer p,
.toast p,
.subscribe-confirmation p,
p[class*="mx-auto"] {
  max-width: none;
}
/* Restore centered paragraphs that intentionally have max-widths */
p[class*="mx-auto"][class*="max-w-xl"] { max-width: 36rem; }
p[class*="mx-auto"][class*="max-w-2xl"] { max-width: 42rem; }
p[class*="mx-auto"][class*="max-w-lg"] { max-width: 32rem; }

/* Nav — tighter inactive contrast, upgraded active underline */
nav a[class*="text-[#1C1C18]/60"] {
  color: rgba(28, 28, 24, 0.72) !important;
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
nav a[class*="text-[#1C1C18]/60"]:hover {
  color: #745B17 !important;
}
/* Active nav state — solid gold underline, more confident */
nav a[class*="text-[#745B17]"][class*="border-b"] {
  border-bottom: 1px solid #C5A55A !important;
  border-color: #C5A55A !important;
  padding-bottom: 6px !important;
}

/* Hamburger — refined stroke weight */
#hamburger-btn svg {
  stroke-width: 1.25 !important;
}

/* Footer polish — tighten heading hierarchy where present */
footer h3, footer h4, footer .footer-heading {
  letter-spacing: 0.15em;
}

/* ── Mobile Trust Strip — 2×2 grid layout ── */
@media (max-width: 767px) {
  /* Convert the badge container from flex-col into a 2×2 grid */
  .bg-surface.py-8 > div.flex.flex-col {
    display: grid !important;
    grid-template-columns: auto auto;
    gap: 1.5rem 1.25rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  /* Each badge: left-align icon+label so icons stack vertically within a column */
  .bg-surface.py-8 > div > div.flex.items-center[class*="cin-reveal"] {
    width: auto;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    gap: 0.625rem;
  }
  /* Force each left-column badge to match the widest left-column badge's width,
     so icons stack vertically (left edges align) */
  .bg-surface.py-8 > div > div.cin-stagger-2,
  .bg-surface.py-8 > div > div.cin-stagger-4 {
    min-width: 11rem;
  }
  .bg-surface.py-8 > div > div.cin-stagger-1,
  .bg-surface.py-8 > div > div.cin-stagger-3 {
    min-width: 9.5rem;
  }
  /* Reorder badges on mobile only: Fragrance-Free + Visible Improvement stacked left */
  .bg-surface.py-8 > div > div.cin-stagger-2 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } /* Fragrance-Free → row 1, col 1 */
  .bg-surface.py-8 > div > div.cin-stagger-1 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } /* GMP-Certified  → row 1, col 2 */
  .bg-surface.py-8 > div > div.cin-stagger-4 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } /* Visible Impr.  → row 2, col 1 */
  .bg-surface.py-8 > div > div.cin-stagger-3 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } /* Cruelty-Free   → row 2, col 2 */
  /* Generous vertical breathing room around the strip */
  .bg-surface.py-8 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ── Mobile Product Hero — center content block, balanced typography ── */
@media (max-width: 767px) {
  /* Center-align the right column content (title, meta, price, CTA) */
  .product-hero > div:nth-child(2) {
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .product-hero > div:nth-child(2) > .max-w-xl {
    margin-left: auto;
    margin-right: auto;
  }
  /* Tighten H1 sizing on narrow screens to prevent awkward word-per-line wrapping */
  .product-hero h1.text-4xl {
    font-size: clamp(1.875rem, 8.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
  }
  /* Subtitle: slightly tighter, centered */
  .product-hero p.text-lg {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  /* Bullet list: keep internal left-alignment but center the list as a block */
  .product-hero ul.space-y-4 {
    display: inline-block;
    text-align: left;
    max-width: 22rem;
  }
  /* Bullet items: tighter gap, improved line-height */
  .product-hero ul.space-y-4 li {
    gap: 0.625rem !important;
  }
  .product-hero ul.space-y-4 li span:last-child {
    line-height: 1.55;
  }
  /* Eyebrow: slightly more breathing room from top on mobile */
  .product-hero .hero-text-reveal-d1 {
    margin-bottom: 1.25rem !important;
  }
  /* Price block: center-align naturally via parent text-align */
  .product-hero .mb-8 > .text-3xl {
    display: inline-block;
  }
}

/* ── Batch 4: Accessibility ── */

/* Screen-reader-only utility (visually hidden, available to AT) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-content link — visible when focused via keyboard */
.skip-to-content:focus {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  z-index: 9999 !important;
  background-color: #0B1D3A !important;
  color: #FAF8F4 !important;
  border: 2px solid #C5A55A !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Global keyboard focus ring — gold, only for keyboard (not mouse) users */
*:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid #C5A55A !important;
  outline-offset: 4px !important;
  border-radius: 2px;
}
/* Preserve pill-rounded focus ring on rounded-full elements */
a[class*="rounded-full"]:focus-visible,
button[class*="rounded-full"]:focus-visible {
  border-radius: 9999px;
}
/* Form inputs already use border-bottom focus — tighten offset there */
input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
textarea:focus-visible {
  outline-offset: 2px !important;
}