/* ============================================================
   OMOLUV BEAUTY HUB — Production CSS
   Generated: Tailwind-equivalent utility classes extracted
   from index.html. No CDN required at runtime.
   ============================================================ */

/* ── Preflight / Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-feature-settings: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background-color: #f5f0eb; color: #1a1a1e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, [type='button'], [type='reset'], [type='submit'] { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
input, button, select, textarea { font-size: 1rem; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption { margin: 0; }
strong, b { font-weight: 600; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
a img { display: block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f0eb; }
::-webkit-scrollbar-thumb { background: #c9a227; border-radius: 3px; }

/* ── Custom Animations ── */
.gold-shimmer {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, #c9a227, transparent);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

.service-card {
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(26,58,42,0.12);
}

.gallery-img { transition: transform 0.5s cubic-bezier(.4,0,.2,1); }
.gallery-img:hover { transform: scale(1.06); }

@keyframes wpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}
.wp-pulse { animation: wpPulse 2.4s ease infinite; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
  50%      { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.55,0.055,0.675,0.19); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* ============================================================
   LAYOUT
   ============================================================ */
.block          { display: block; }
.inline-flex    { display: inline-flex; }
.flex           { display: flex; }
.grid           { display: grid; }
.hidden         { display: none; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-1         { flex: 1 1 0%; }
.flex-shrink-0  { flex-shrink: 0; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }

/* Grid cols */
.grid-cols-1    { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Position */
.static         { position: static; }
.relative       { position: relative; }
.absolute       { position: absolute; }
.fixed          { position: fixed; }

/* Inset / Offsets */
.inset-0        { top: 0; right: 0; bottom: 0; left: 0; }
.top-0          { top: 0; }
.top-3          { top: 0.75rem; }
.top-6          { top: 1.5rem; }
.top-1\/2       { top: 50%; }
.right-0        { right: 0; }
.right-5        { right: 1.25rem; }
.right-6        { right: 1.5rem; }
.bottom-0       { bottom: 0; }
.bottom-5       { bottom: 1.25rem; }
.bottom-6       { bottom: 1.5rem; }
.left-0         { left: 0; }
.left-3         { left: 0.75rem; }
.left-1\/2      { left: 50%; }

/* Negative offsets */
.-bottom-4      { bottom: -1rem; }
.-right-4       { right: -1rem; }

/* z-index */
.z-10           { z-index: 10; }
.z-50           { z-index: 50; }

/* Overflow */
.overflow-hidden{ overflow: hidden; }

/* ============================================================
   SIZING
   ============================================================ */
/* Width */
.w-full         { width: 100%; }
.w-px           { width: 1px; }
.w-2            { width: 0.5rem; }
.w-3\.5         { width: 0.875rem; }
.w-4            { width: 1rem; }
.w-5            { width: 1.25rem; }
.w-6            { width: 1.5rem; }
.w-7            { width: 1.75rem; }
.w-8            { width: 2rem; }
.w-10           { width: 2.5rem; }
.w-12           { width: 3rem; }
.w-14           { width: 3.5rem; }
.w-16           { width: 4rem; }
.w-24           { width: 6rem; }
.w-48           { width: 12rem; }
.w-64           { width: 16rem; }

/* Height */
.h-full         { height: 100%; }
.h-0\.5         { height: 0.125rem; }
.h-2            { height: 0.5rem; }
.h-3\.5         { height: 0.875rem; }
.h-4            { height: 1rem; }
.h-5            { height: 1.25rem; }
.h-7            { height: 1.75rem; }
.h-8            { height: 2rem; }
.h-10           { height: 2.5rem; }
.h-12           { height: 3rem; }
.h-14           { height: 3.5rem; }
.h-16           { height: 4rem; }
.h-20           { height: 5rem; }
.h-24           { height: 6rem; }
.h-44           { height: 11rem; }
.h-48           { height: 12rem; }
.h-64           { height: 16rem; }

.min-h-screen   { min-height: 100vh; }

/* Max-width */
.max-w-xl       { max-width: 36rem; }
.max-w-2xl      { max-width: 42rem; }
.max-w-4xl      { max-width: 56rem; }
.max-w-6xl      { max-width: 72rem; }

/* Aspect */
.aspect-square  { aspect-ratio: 1 / 1; }

/* ============================================================
   SPACING
   ============================================================ */
/* Margin */
.mx-auto        { margin-left: auto; margin-right: auto; }
.mt-0\.5        { margin-top: 0.125rem; }
.mt-1           { margin-top: 0.25rem; }
.mt-2           { margin-top: 0.5rem; }
.mt-3           { margin-top: 0.75rem; }
.mt-4           { margin-top: 1rem; }
.mt-5           { margin-top: 1.25rem; }
.mt-6           { margin-top: 1.5rem; }
.mt-8           { margin-top: 2rem; }
.mt-10          { margin-top: 2.5rem; }
.mt-12          { margin-top: 3rem; }
.mt-28          { margin-top: 7rem; }
.mb-2           { margin-bottom: 0.5rem; }
.mb-3           { margin-bottom: 0.75rem; }
.mb-4           { margin-bottom: 1rem; }
.mb-5           { margin-bottom: 1.25rem; }
.mb-6           { margin-bottom: 1.5rem; }
.mb-12          { margin-bottom: 3rem; }
.mb-14          { margin-bottom: 3.5rem; }

/* Padding */
.p-4            { padding: 1rem; }
.p-5            { padding: 1.25rem; }
.p-6            { padding: 1.5rem; }
.p-8            { padding: 2rem; }
.px-3           { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4           { padding-left: 1rem; padding-right: 1rem; }
.px-5           { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6           { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7           { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8           { padding-left: 2rem; padding-right: 2rem; }
.py-1           { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2           { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5        { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3           { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5        { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4           { padding-top: 1rem; padding-bottom: 1rem; }
.py-16          { padding-top: 4rem; padding-bottom: 4rem; }
.py-24          { padding-top: 6rem; padding-bottom: 6rem; }
.pt-2           { padding-top: 0.5rem; }
.pt-6           { padding-top: 1.5rem; }

/* Gap */
.gap-1          { gap: 0.25rem; }
.gap-1\.5       { gap: 0.375rem; }
.gap-2          { gap: 0.5rem; }
.gap-2\.5       { gap: 0.625rem; }
.gap-3          { gap: 0.75rem; }
.gap-4          { gap: 1rem; }
.gap-5          { gap: 1.25rem; }
.gap-6          { gap: 1.5rem; }
.gap-8          { gap: 2rem; }
.gap-10         { gap: 2.5rem; }
.gap-16         { gap: 4rem; }

/* Space */
.space-y-2      > :not(:first-child) { margin-top: 0.5rem; }
.space-y-2\.5   > :not(:first-child) { margin-top: 0.625rem; }
.space-y-3      > :not(:first-child) { margin-top: 0.75rem; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.font-serif     { font-family: 'Playfair Display', Georgia, serif; }
.font-sans      { font-family: 'Inter', system-ui, sans-serif; }

.font-light     { font-weight: 300; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

.text-xs        { font-size: 0.75rem; line-height: 1rem; }
.text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
.text-base      { font-size: 1rem; line-height: 1.5rem; }
.text-lg        { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl        { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl       { font-size: 1.5rem; line-height: 2rem; }
.text-3xl       { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl       { font-size: 2.25rem; line-height: 2.5rem; }
.text-8xl       { font-size: 6rem; line-height: 1; }

.leading-snug   { line-height: 1.375; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed{ line-height: 1.625; }

.tracking-tight   { letter-spacing: -0.025em; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }

.uppercase      { text-transform: uppercase; }
.italic         { font-style: italic; }
.not-italic     { font-style: normal; }

.text-left      { text-align: left; }
.text-center    { text-align: center; }

/* ============================================================
   COLOURS — Brand Palette
   ============================================================ */
/* Text */
.text-white           { color: #fff; }
.text-cream           { color: #f5f0eb; }
.text-cream\/30       { color: rgba(245,240,235,0.3); }
.text-cream\/40       { color: rgba(245,240,235,0.4); }
.text-cream\/45       { color: rgba(245,240,235,0.45); }
.text-cream\/50       { color: rgba(245,240,235,0.5); }
.text-cream\/55       { color: rgba(245,240,235,0.55); }
.text-cream\/60       { color: rgba(245,240,235,0.6); }
.text-cream\/65       { color: rgba(245,240,235,0.65); }
.text-cream\/70       { color: rgba(245,240,235,0.7); }
.text-cream\/75       { color: rgba(245,240,235,0.75); }
.text-cream\/80       { color: rgba(245,240,235,0.8); }
.text-gold            { color: #c9a227; }
.text-gold\/40        { color: rgba(201,162,39,0.4); }
.text-emerald         { color: #1a3a2a; }
.text-charcoal        { color: #1a1a1e; }
.text-ash             { color: #6b6b6f; }

/* Background */
.bg-white             { background-color: #fff; }
.bg-cream             { background-color: #f5f0eb; }
.bg-gold              { background-color: #c9a227; }
.bg-emerald           { background-color: #1a3a2a; }
.bg-emerald\/30       { background-color: rgba(26,58,42,0.3); }
.bg-emerald\/40       { background-color: rgba(26,58,42,0.4); }
.bg-charcoal          { background-color: #1a1a1e; }
.bg-charcoal\/95      { background-color: rgba(26,26,30,0.95); }
.bg-whatsapp          { background-color: #25d366; }
.bg-green-600         { background-color: #16a34a; }
.bg-yellow-500        { background-color: #eab308; }

/* ============================================================
   BORDERS
   ============================================================ */
.border             { border-width: 1px; border-style: solid; }
.border-2           { border-width: 2px; border-style: solid; }
.border-t           { border-top-width: 1px; border-top-style: solid; }

/* Border colours — must come AFTER .border so they win */
.border-gold          { border-color: #c9a227; }
.border-gold\/10      { border-color: rgba(201,162,39,0.1); }
.border-gold\/40      { border-color: rgba(201,162,39,0.4); }
.border-emerald       { border-color: #1a3a2a; }
.border-cream\/5      { border-color: rgba(245,240,235,0.05); }
.border-cream\/8      { border-color: rgba(245,240,235,0.25); }
.border-cream\/10     { border-color: rgba(245,240,235,0.28); }
.border-cream\/15     { border-color: rgba(245,240,235,0.3); }
.border-cream\/20     { border-color: rgba(245,240,235,0.35); }
.border-cream\/35     { border-color: rgba(245,240,235,0.45); }

/* Gradient bg */
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-black\/40       { --tw-gradient-from: rgba(0,0,0,0.4); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }
.via-black\/20        { --tw-gradient-stops: var(--tw-gradient-from), rgba(0,0,0,0.2), var(--tw-gradient-to, rgba(0,0,0,0)); }
.to-black\/60         { --tw-gradient-to: rgba(0,0,0,0.6); }
.from-cream\/40       { --tw-gradient-from: rgba(245,240,235,0.4); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,240,235,0)); }
.to-transparent       { --tw-gradient-to: transparent; }

/* ============================================================
   BORDER RADIUS
   ============================================================ */
.rounded-full       { border-radius: 9999px; }
.rounded-lg         { border-radius: 0.5rem; }
.rounded-xl         { border-radius: 0.75rem; }
.rounded-2xl        { border-radius: 1rem; }

/* ============================================================
   SHADOWS
   ============================================================ */
.shadow-sm          { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-lg          { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.shadow-xl          { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }

/* ============================================================
   TRANSFORMS
   ============================================================ */
.translate-x-1\/2     { transform: translateX(50%); }
.-translate-x-1\/2    { transform: translateX(-50%); }
.translate-x-3        { transform: translateX(0.75rem); }
.-translate-x-3       { transform: translateX(-0.75rem); }
.translate-y-1\/2     { transform: translateY(50%); }
.-translate-y-1\/2    { transform: translateY(-50%); }
.translate-y-2        { transform: translateY(0.5rem); }
.-translate-y-2       { transform: translateY(-0.5rem); }
.-translate-y-4       { transform: translateY(-1rem); }
.rotate-45            { transform: rotate(45deg); }
.-rotate-45           { transform: rotate(-45deg); }

/* Combined transform states used in hamburger + mobile menu */
/* These are managed via Alpine :class bindings; base states live here */

/* ============================================================
   OPACITY
   ============================================================ */
.opacity-0            { opacity: 0; }
.opacity-100          { opacity: 1; }

/* ============================================================
   OBJECT FIT
   ============================================================ */
.object-cover         { object-fit: cover; }

/* ============================================================
   TRANSITIONS
   ============================================================ */
.transition-all       { transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-colors    { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-shadow    { transition-property: box-shadow; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-300         { transition-duration: 300ms; }

/* ============================================================
   INTERACTION STATES — hover / active / group-hover
   ============================================================ */
.hover\:text-gold:hover                 { color: #c9a227; }
.hover\:text-cream:hover                { color: #f5f0eb; }
.hover\:bg-emerald:hover                { background-color: #1a3a2a; }
.hover\:bg-green-600:hover              { background-color: #16a34a; }
.hover\:bg-yellow-500:hover             { background-color: #eab308; }
.hover\:bg-cream\/5:hover               { background-color: rgba(245,240,235,0.05); }
.hover\:bg-cream\/40:hover              { background-color: rgba(245,240,235,0.4); }
.hover\:border-gold:hover               { border-color: #c9a227; }
.hover\:shadow-md:hover                 { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.active\:scale-90:active                { transform: scale(0.9); }
.active\:scale-95:active                { transform: scale(0.95); }

/* group-hover */
.group:hover .group-hover\:text-gold    { color: #c9a227; }

/* ============================================================
   RESPONSIVE — sm (640px)
   ============================================================ */
@media (min-width: 640px) {
  .sm\:flex-row          { flex-direction: row; }
  .sm\:inline            { display: inline; }
  .sm\:col-span-2        { grid-column: span 2; }
  .sm\:row-span-2        { grid-row: span 2; }
  .sm\:grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:gap-3             { gap: 0.75rem; }
  .sm\:gap-5             { gap: 1.25rem; }
  .sm\:gap-6             { gap: 1.5rem; }
  .sm\:gap-12            { gap: 3rem; }
  .sm\:px-6              { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-8              { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-20             { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:py-32             { padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:p-7               { padding: 1.75rem; }
  .sm\:p-10              { padding: 2.5rem; }
  .sm\:mt-0              { margin-top: 0; }
  .sm\:h-8               { height: 2rem; }
  .sm\:h-9               { height: 2.25rem; }
  .sm\:h-16              { height: 4rem; }
  .sm\:h-20              { height: 5rem; }
  .sm\:w-8               { width: 2rem; }
  .sm\:w-9               { width: 2.25rem; }
  .sm\:w-16              { width: 4rem; }
  .sm\:text-sm           { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-base         { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-xl           { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl          { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-5xl          { font-size: 3rem; line-height: 1; }
  .sm\:bottom-8          { bottom: 2rem; }
  .sm\:right-8           { right: 2rem; }
  .sm\:-bottom-6         { bottom: -1.5rem; }
  .sm\:-right-6          { right: -1.5rem; }
  .sm\:-translate-x-5    { transform: translateX(-1.25rem); }
  .sm\:translate-x-5     { transform: translateX(1.25rem); }
  .sm\:min-h-\[380px\]   { min-height: 380px; }
}

/* ============================================================
   RESPONSIVE — md (768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:text-3xl          { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-5xl          { font-size: 3rem; line-height: 1; }
  .md\:text-6xl          { font-size: 3.75rem; line-height: 1; }
}

/* ============================================================
   RESPONSIVE — lg (1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:flex              { display: flex; }
  .lg\:hidden            { display: none; }
  .lg\:grid-cols-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:gap-24            { gap: 6rem; }
  .lg\:text-7xl          { font-size: 4.5rem; line-height: 1; }
}

/* ============================================================
   RESPONSIVE — xl (1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .xl\:gap-8             { gap: 2rem; }
}

/* ============================================================
   ALPINE.JS TRANSITION HELPERS
   (Alpine injects inline styles, but these ensure the base
    classes referenced in x-transition directives are present)
   ============================================================ */

/* ============================================================
   min-h arbitrary
   ============================================================ */
.min-h-\[220px\]        { min-height: 220px; }
.min-h-\[380px\]        { min-height: 380px; }

/* ============================================================
   aspect-ratio arbitrary
   ============================================================ */
.aspect-\[4\/5\]        { aspect-ratio: 4 / 5; }

/* ============================================================
   UTILITY CATCH — any leftover helpers
   ============================================================ */
.text-left              { text-align: left; }
.sr-only                { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }