/* ===== BETO CENTER — Global Styles v2 ===== */
/* Brand Palette: Gold #C9A14A | Soft Gold #E5C97B | Deep Gold #A67C2E */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #080808;
}

::-webkit-scrollbar-thumb {
  background: #C9A14A;
  border-radius: 4px;
}

/* ---- Keyframes ---- */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(36px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

@keyframes rotateRing {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes scrollBounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: 0.4;
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 161, 74, 0.45);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(201, 161, 74, 0);
  }
}

@keyframes crossFade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes bronzeShimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* ---- Utility Classes ---- */

/* Hide scrollbar for snap carousels */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Line-clamp for product descriptions */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Nav height shorthand */
.h-18 {
  height: 4.5rem;
}

.text-shimmer {
  background: linear-gradient(90deg, #C9A14A 0%, #E5C97B 30%, #C9A14A 60%, #A67C2E 85%, #C9A14A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

.text-bronze-shimmer {
  background: linear-gradient(90deg, #b5682a 0%, #d4894e 30%, #b5682a 60%, #8c4e1e 85%, #b5682a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bronzeShimmer 4s linear infinite;
}

.animate-fade-up {
  animation: fadeUp 0.8s ease-out both;
}

.animate-float {
  animation: floatY 7s ease-in-out infinite;
}

.animate-scroll {
  animation: scrollBounce 1.6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.2s ease-in-out infinite;
}

/* ---- Hero background ---- */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201, 161, 74, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 15%, rgba(201, 161, 74, 0.04) 0%, transparent 50%),
    linear-gradient(160deg, #0a0a0a 0%, #131310 40%, #0b0b09 70%, #080808 100%);
}

/* ---- Navbar backdrop ---- */
.nav-blur {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* ---- Ring decorations ---- */
.hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(201, 161, 74, 0.08);
  animation: rotateRing linear infinite;
  pointer-events: none;
}

/* ---- Glassmorphism card ---- */
.glass-card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 161, 74, 0.14);
}

/* ---- Product card (Cinematic Brutalist) ----
   Sharp 0px edges, no soft/blurred shadows. Hover = the signature
   brutalist shift: hard translate + solid unblurred gold offset shadow.
   (--gold is defined in the Cinematic Brutalist :root block below.) */
.product-card {
  border-radius: 0;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.18s ease;
}

.product-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px var(--gold);
  border-color: rgba(212, 175, 55, 0.55) !important;
}

/* pointer-events:none while hidden so the invisible overlay never traps
   clicks (e.g. on touch devices with no hover) and swallows navigation. */
.card-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.card-quick-btn {
  transform: translateY(18px);
  opacity: 0;
  transition: all 0.35s ease;
}

.product-card:hover .card-overlay,
.product-card:focus-within .card-overlay {
  opacity: 1;
  pointer-events: auto;
}

.product-card:hover .card-quick-btn,
.product-card:focus-within .card-quick-btn {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Service card hover ---- */
.service-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 161, 74, 0.28) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(201, 161, 74, 0.07);
}

/* ---- Testimonial card hover ---- */
.testi-card {
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.testi-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 161, 74, 0.22) !important;
}

/* ---- Gold CTA button ---- */
.btn-gold {
  background: linear-gradient(135deg, #C9A14A 0%, #E5C97B 50%, #A67C2E 100%);
  box-shadow: 0 8px 28px rgba(201, 161, 74, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-gold:hover {
  box-shadow: 0 14px 42px rgba(201, 161, 74, 0.55);
  transform: translateY(-2px);
}

/* ---- WhatsApp green button ---- */
.btn-whatsapp {
  background: linear-gradient(135deg, #1a8a3e 0%, #25d366 100%);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  color: #fff;
}

.btn-whatsapp:hover {
  box-shadow: 0 14px 42px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}

/* ---- Outlined gold button ---- */
.btn-outline-gold {
  border: 1px solid rgba(201, 161, 74, 0.4);
  color: #C9A14A;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.btn-outline-gold:hover {
  border-color: #C9A14A;
  background: rgba(201, 161, 74, 0.06);
  transform: translateY(-2px);
}

/* ---- Section divider ---- */
.gold-line {
  background: linear-gradient(90deg, transparent, rgba(201, 161, 74, 0.4), transparent);
  height: 1px;
}

/* ---- Wing divider ---- */
.product-wing-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201, 161, 74, 0.2) 20%, rgba(201, 161, 74, 0.5) 50%, rgba(201, 161, 74, 0.2) 80%, transparent 100%);
  margin: 80px 0;
  position: relative;
}

.product-wing-divider::after {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C9A14A;
  font-size: 10px;
  background: #080808;
  padding: 0 12px;
  letter-spacing: 0.2em;
}

/* ---- Floating particles ---- */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(201, 161, 74, 0.55);
  pointer-events: none;
  animation: floatY ease-in-out infinite;
}

/* ---- Lens gallery ---- */
/* Desktop grid (50/50), hero image sizing and slide-image styling are handled
   inline / via Tailwind in LensGallery.jsx */
/* .lens-main-grid and .lens-hero-img-wrap overrides removed — aspect-ratio drives layout */

.lens-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

.lens-thumb:hover {
  transform: scale(1.06);
}

.lens-thumb.active {
  border-color: #C9A14A;
  box-shadow: 0 0 0 1px #C9A14A, 0 6px 24px rgba(201, 161, 74, 0.3);
}

.lens-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 100%);
  pointer-events: none;
}

/* .argan-card / .plasma-card / .plasma-img / .pv-* removed — dead rules from
   the pre-brutalist design (soft shadows, rounded CSS art); no component
   references them any more. */

/* ============================================================ */
/* ===== Cinematic Brutalist — Storefront Hero overhaul ===== */
/* ============================================================ */
/* Palette: deep cinematic black #0a0a0a · pristine white · signature
   gold #d4af37. (This is the dramatic landing aesthetic and intentionally
   uses #d4af37; the rest of the store keeps its brand gold #C9A14A.) */
:root {
  --cine-black: #0a0a0a;
  --cine-gold: #d4af37;
  --gold: #d4af37;
  /* canonical brutalist accent (alias of --cine-gold) */
}

/* Full-bleed cinematic stage. The dark gradient overlay is baked INTO the
   inline background-image set in Hero.jsx (gradient layers painted above the
   photo) so the headline stays legible over the imagery. */
.hero-cinematic {
  background-color: var(--cine-black);
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  animation: heroDrift 26s ease-in-out infinite alternate;
  /* slow anamorphic drift — pans the bg, never the text */
}

@keyframes heroDrift {
  from {
    background-position: 48% 40%;
  }

  to {
    background-position: 54% 46%;
  }
}

/* Content column */
.hero-cinematic__content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

/* Eyebrow */
.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  animation: heroFadeIn 0.8s ease 0.05s both;
}

.hero-eyebrow__line {
  width: 3rem;
  height: 1px;
  background: rgba(212, 175, 55, 0.6);
}

.hero-eyebrow__text {
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.85);
  font-weight: 500;
}

/* Oversized brutalist headline.
   NOTE: mix-blend-mode: difference was removed — against the warm gold/copper
   hero imagery it inverted to an icy cyan that clashed with the palette.
   A warm off-white + soft dark shadow keeps the text legible and premium
   without shifting the imagery's hue. */
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  /* editorial serif headline */
  font-size: clamp(3rem, 8vw, 10rem);
  /* massive — centered on 8vw, clamped for sanity */
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  /* tight */
  letter-spacing: -0.02em;
  margin: 0;
  color: rgba(253, 251, 247, 0.60);
  /* warm off-white, sheer to blend with imagery */
  text-shadow: 0px 4px 30px rgba(0, 0, 0, 0.6);
  /* soft dark plinth for separation, no hue change */
  animation: heroFadeIn 1s ease 0.15s both;
}

/* Subtitle */
.hero-sub {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  animation: heroFadeIn 0.9s ease 0.3s both;
}

/* CTA row */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.75rem;
  animation: heroFadeIn 0.9s ease 0.45s both;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Raw brutalist button — sharp 0px edges, transparent fill, solid gold
   border + bold uppercase gold text. Hover: aggressive translate paired with
   a hard-edged (unblurred) offset drop shadow. */
.btn-brutalist {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 2.4rem;
  border-radius: 0;
  background: transparent;
  border: 2px solid var(--cine-gold);
  color: var(--cine-gold);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0px 0px 0px rgba(212, 175, 55, 0);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease, color 0.2s ease;
}

.btn-brutalist:hover,
.btn-brutalist:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.08);
  outline: none;
}

/* :active keeps the hover transform (resetting it would shift the hitbox out
   from under a press in the 4px shadow band and swallow the click) — press
   feedback comes from collapsing the shadow instead. */
.btn-brutalist:active {
  box-shadow: 1px 1px 0px rgba(212, 175, 55, 0.5);
}

/* Card-scale brutalist button — same language as .btn-brutalist, sized for
   product cards. State colours (added/out-of-stock) are overridden inline by
   the components; this class owns the shape and interaction. */
.btn-brutalist-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-brutalist-sm:hover:not(:disabled),
.btn-brutalist-sm:focus-visible:not(:disabled) {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px var(--gold);
  background: rgba(212, 175, 55, 0.08);
  outline: none;
}

.btn-brutalist-sm:active:not(:disabled) {
  box-shadow: 1px 1px 0px var(--gold);
  /* press = shadow collapse; no transform reset (see .btn-brutalist:active) */
}

.btn-brutalist-sm:disabled {
  cursor: not-allowed;
}

/* When the brutalist button doubles as the card's hover-reveal quick-add
   (.card-quick-btn), its transition must also animate the reveal opacity —
   otherwise this later rule would drop the fade. */
.card-quick-btn.btn-brutalist-sm {
  transition: opacity 0.35s ease,
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Accessibility — kill the motion for users who ask for less. */
@media (prefers-reduced-motion: reduce) {
  .hero-cinematic {
    animation: none;
  }

  .hero-eyebrow,
  .hero-headline,
  .hero-sub,
  .hero-cta-row {
    animation: none;
  }
}

/* ============================================================ */
/* ===== Admin / Staff numeric typography fix ===== */
/* ============================================================ */
/* The dashboard's counts and JD amounts were rendered in the thin
   Cormorant serif, which reads poorly for data. `.ad-num` makes any
   numeric value heavy, filled, high-contrast and tabular (so columns of
   figures line up). Apply it to any number across the admin/staff views;
   add a modifier for accent colour. */
.ad-num {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: #ffffff;
  line-height: 1.05;
}

.ad-num--gold {
  color: #d4af37;
}

.ad-num--danger {
  color: #f87171;
}

.ad-num--blue {
  color: #60a5fa;
}

.ad-num--green {
  color: #34d399;
}

.ad-num--muted {
  color: #e5e7eb;
}