/* ============================================================
   LUAU FLOWERS — "The Botanical Atelier" Custom Theme
   Base: Vela Fashion (EasyOrders)
   Design System: Noto Serif + Plus Jakarta Sans, Maroon/Pink/Cream
   ============================================================ */

/* ─────────────────────────────────────────────
   1. CSS VARIABLES — Override Vela's skin system
   ───────────────────────────────────────────── */
:root {
  /* Primary palette */
  --color-primary: #411528;          /* Deep maroon (primary container) */
  --color-primary-hover: #260212;    /* Darkest maroon on hover */
  --color-secondary: #974358;        /* Soft romantic pink */
  --color-secondary-hover: #7a2c41;  /* Deeper pink on hover */
  --color-tertiary: #E2A9C0;         /* Light blush */
  --color-accent: #ff98ae;           /* Bright accent pink */

  /* Surfaces — like fine stationery */
  --color-background: #f9f9f9;       /* Cream base */
  --color-surface: #f9f9f9;
  --color-surface-low: #f3f3f3;      /* Soft secondary bg */
  --color-surface-card: #ffffff;     /* Lifted cards */
  --color-surface-dim: #eeeeee;

  /* Text */
  --color-text-primary: #1a1c1c;     /* Warm almost-black (never pure #000) */
  --color-text-secondary: #514347;   /* Muted text */
  --color-text-on-primary: #ffffff;  /* White text on maroon */
  --color-text-muted: #837377;       /* Captions, labels */

  /* Borders — "ghost borders" only */
  --color-border: rgba(65, 21, 40, 0.08);  /* Maroon tint at 8% */
  --color-border-focus: rgba(65, 21, 40, 0.20);

  /* Shadows — maroon mist, never grey */
  --shadow-soft: 0 4px 20px rgba(38, 2, 18, 0.05);
  --shadow-hover: 0 12px 32px rgba(38, 2, 18, 0.08);
  --shadow-elevated: 0 20px 40px rgba(38, 2, 18, 0.06);

  /* Gradient — velvet button feel */
  --gradient-primary: linear-gradient(135deg, #260212 0%, #411528 100%);
  --gradient-secondary: linear-gradient(135deg, #974358 0%, #7a2c41 100%);
}


/* ─────────────────────────────────────────────
   2. GLOBAL RESET & TYPOGRAPHY
   ───────────────────────────────────────────── */

/* Override Raleway with our editorial fonts */
body,
html {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Serif for all headings — editorial authority */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif !important;
  color: var(--color-text-primary) !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

/* Body text refinement */
p, span, a, li, td, th, label, input, select, textarea, button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Labels — luxury brand tag feel */
.text-\[10px\],
.text-xs {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ─────────────────────────────────────────────
   3. ANNOUNCEMENT BAR
   ───────────────────────────────────────────── */
[class*="bg-skin-primary"][class*="text-center"][class*="text-xs"] {
  background: var(--gradient-primary) !important;
  color: var(--color-text-on-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  padding: 10px 0 !important;
}


/* ─────────────────────────────────────────────
   4. HEADER & NAVIGATION
   ───────────────────────────────────────────── */

/* Header background */
header,
.sticky.top-0,
[class*="sticky"][class*="top-0"][class*="bg-white"] {
  background-color: var(--color-surface-card) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* Navigation links */
nav a,
[class*="text-sm"][class*="font-semibold"][class*="hover\\:underline"] {
  color: var(--color-text-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

nav a:hover {
  color: var(--color-secondary) !important;
  text-decoration: none !important;
}

/* Underline animation on nav hover */
nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-secondary);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* Logo refinement */
header img[alt],
.sticky img {
  filter: none !important;
  max-height: 50px !important;
}

/* Search and cart icons */
header svg,
.sticky svg {
  color: var(--color-text-primary) !important;
  stroke: var(--color-text-primary) !important;
}

header button:hover svg,
header a:hover svg {
  color: var(--color-secondary) !important;
  stroke: var(--color-secondary) !important;
}


/* ─────────────────────────────────────────────
   5. HERO / BANNER SECTION
   ───────────────────────────────────────────── */

/* Hero section overlay for editorial depth */
[class*="swiper"],
.banner-slider {
  border-radius: 0 !important;
}

/* Hero CTA buttons */
[class*="swiper"] a,
[class*="swiper"] button,
.banner-slider a {
  background: var(--gradient-primary) !important;
  color: var(--color-text-on-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

[class*="swiper"] a:hover,
[class*="swiper"] button:hover {
  background: var(--gradient-secondary) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────
   6. SECTION HEADINGS
   ───────────────────────────────────────────── */

/* Big section titles — editorial serif */
[class*="text-2xl"][class*="font-bold"],
[class*="text-3xl"][class*="font-bold"],
section h2,
.section-title {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 2rem !important;
}

/* "View All" / "More" links — editorial italic style */
[class*="text-sm"] a[href*="collection"],
a[href*="search"],
.view-all-link {
  font-family: 'Noto Serif', Georgia, serif !important;
  font-style: italic !important;
  color: var(--color-secondary) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--color-secondary) !important;
  padding-bottom: 4px !important;
  font-weight: 400 !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}

[class*="text-sm"] a[href*="collection"]:hover,
a[href*="search"]:hover {
  color: var(--color-primary-hover) !important;
  border-bottom-color: var(--color-primary-hover) !important;
}


/* ─────────────────────────────────────────────
   7. CATEGORY / COLLECTION CARDS
   ───────────────────────────────────────────── */
[class*="rounded-lg"][class*="overflow-hidden"][class*="group"] {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border: none !important;
}

[class*="rounded-lg"][class*="overflow-hidden"][class*="group"]:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* Category titles */
[class*="rounded-lg"][class*="group"] h4,
[class*="rounded-lg"][class*="group"] h3 {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}


/* ─────────────────────────────────────────────
   8. PRODUCT CARDS — The hero of the store
   ───────────────────────────────────────────── */

/* Card container */
[class*="box-border"][class*="flex-col"][class*="rounded-md"] {
  background-color: var(--color-surface-card) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden !important;
}

[class*="box-border"][class*="flex-col"][class*="rounded-md"]:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-6px) !important;
  background-color: var(--color-surface-low) !important;
}

/* Product image */
[class*="box-border"][class*="flex-col"] img {
  border-radius: 0 !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  /* Force all product images to be exactly the same size and ratio */
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  width: 100% !important;
  object-position: center !important;
}

[class*="box-border"][class*="flex-col"]:hover img {
  transform: scale(1.05) !important;
}

/* Product title */
[class*="text-skin-base"][class*="text-sm"][class*="font-semibold"] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* Product price */
[class*="text-skin-base"][class*="font-semibold"]:not([class*="text-sm"]) {
  color: var(--color-secondary) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Discount badge — The "Gift Tag" chip */
[class*="bg-skin-primary"][class*="rounded-full"][class*="text-\\[10px\\]"],
.discount-badge,
[class*="rounded-full"][class*="px-2"][class*="py-1"][class*="text-\\[10px\\]"] {
  background-color: var(--color-accent) !important;
  color: var(--color-secondary-hover) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
}

/* Variant selectors (size buttons on card) */
[class*="box-border"] button[class*="border"],
.size-selector button {
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  background-color: transparent !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.75rem !important;
  transition: all 0.2s ease !important;
}

[class*="box-border"] button[class*="border"]:hover,
.size-selector button:hover {
  border-color: var(--color-secondary) !important;
  color: var(--color-secondary) !important;
  background-color: rgba(151, 67, 88, 0.05) !important;
}

/* Color swatches on product cards */
[class*="box-border"] [class*="rounded-full"][class*="w-4"],
[class*="box-border"] [class*="rounded-full"][class*="w-5"] {
  border: 2px solid var(--color-border) !important;
  transition: border-color 0.2s ease !important;
}

[class*="box-border"] [class*="rounded-full"][class*="w-4"]:hover,
[class*="box-border"] [class*="rounded-full"][class*="w-5"]:hover {
  border-color: var(--color-secondary) !important;
}


/* ─────────────────────────────────────────────
   9. BUTTONS — Velvet gradient styling
   ───────────────────────────────────────────── */

/* Primary buttons (Add to Cart, Shop Now, etc.) */
[class*="bg-skin-primary"],
button[class*="bg-skin-primary"],
a[class*="bg-skin-primary"] {
  background: var(--gradient-primary) !important;
  color: var(--color-text-on-primary) !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
}

[class*="bg-skin-primary"]:hover {
  background: var(--gradient-secondary) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / outline buttons */
button[class*="border"][class*="rounded"],
a[class*="border"][class*="rounded"] {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

button[class*="border"][class*="rounded"]:hover,
a[class*="border"][class*="rounded"]:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
}


/* ─────────────────────────────────────────────
   10. STORE ADVANTAGES / FEATURES SECTION
   ───────────────────────────────────────────── */
[class*="grid"][class*="grid-cols-1"][class*="lg\\:grid-cols-4"][class*="gap-4"] > div {
  background-color: var(--color-surface-low) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

[class*="grid"][class*="grid-cols-1"][class*="lg\\:grid-cols-4"][class*="gap-4"] > div:hover {
  background-color: var(--color-surface-card) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Advantage icons */
[class*="grid"][class*="grid-cols-1"][class*="lg\\:grid-cols-4"] svg {
  color: var(--color-secondary) !important;
}

/* Advantage titles */
[class*="grid"][class*="grid-cols-1"][class*="lg\\:grid-cols-4"] h4,
[class*="grid"][class*="grid-cols-1"][class*="lg\\:grid-cols-4"] h3 {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-primary) !important;
  font-size: 1rem !important;
}


/* ─────────────────────────────────────────────
   11. FOOTER — Warm editorial base
   ───────────────────────────────────────────── */
footer,
footer > div {
  background-color: var(--color-primary) !important;
  color: var(--color-tertiary) !important;
}

footer h3,
footer h4,
footer h5 {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-on-primary) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

footer a {
  color: var(--color-tertiary) !important;
  transition: color 0.3s ease !important;
}

footer a:hover {
  color: var(--color-text-on-primary) !important;
}

footer p,
footer span,
footer li {
  color: var(--color-tertiary) !important;
}

/* Social icons in footer */
footer [class*="rounded-full"][class*="flex"][class*="items-center"][class*="justify-center"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text-on-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease !important;
}

footer [class*="rounded-full"][class*="flex"][class*="items-center"][class*="justify-center"]:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  transform: translateY(-2px) !important;
}

/* Copyright bar */
footer [class*="border-t"],
footer [class*="text-center"][class*="py"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text-muted) !important;
}


/* ─────────────────────────────────────────────
   12. PRODUCT DETAIL PAGE
   ───────────────────────────────────────────── */

/* Product title on detail page */
[class*="product-detail"] h1,
[class*="product"] h1,
main h1 {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-primary) !important;
  font-size: 2.2rem !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Product price on detail page */
[class*="product-detail"] [class*="text-2xl"],
[class*="product"] [class*="text-2xl"],
[class*="product"] [class*="text-3xl"] {
  color: var(--color-secondary) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* "Add to Cart" button on product page */
[class*="product"] button[class*="bg-skin-primary"],
[class*="product-detail"] button[class*="bg-skin-primary"] {
  background: var(--gradient-primary) !important;
  padding: 16px 48px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
  letter-spacing: 0.1em !important;
}

/* Quantity selector */
[class*="product"] input[type="number"],
[class*="product"] [class*="quantity"] {
  border-color: var(--color-border) !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Product description area — "The Florist's Note" */
[class*="product"] [class*="prose"],
[class*="product"] [class*="description"],
[class*="product-detail"] p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.8 !important;
  font-size: 0.95rem !important;
}


/* ─────────────────────────────────────────────
   13. CART / CHECKOUT ELEMENTS
   ───────────────────────────────────────────── */

/* Cart sidebar / page */
[class*="cart"] h2,
[class*="drawer"] h2 {
  font-family: 'Noto Serif', Georgia, serif !important;
  color: var(--color-text-primary) !important;
}

/* Cart item styling */
[class*="cart"] [class*="border-b"],
[class*="cart-item"] {
  border-color: var(--color-border) !important;
  padding: 20px 0 !important;
}

/* Checkout button */
[class*="cart"] [class*="bg-skin-primary"],
.checkout-btn {
  background: var(--gradient-primary) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.1em !important;
}


/* ─────────────────────────────────────────────
   14. SEARCH
   ───────────────────────────────────────────── */
[class*="search"] input,
input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-surface-low) !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-text-primary) !important;
  transition: all 0.3s ease !important;
}

[class*="search"] input:focus,
input[type="search"]:focus {
  border-color: var(--color-secondary) !important;
  background-color: var(--color-surface-card) !important;
  box-shadow: 0 0 0 3px rgba(151, 67, 88, 0.1) !important;
  outline: none !important;
}


/* ─────────────────────────────────────────────
   15. SLIDER / CAROUSEL NAVIGATION
   ───────────────────────────────────────────── */
[class*="slider_button"],
.swiper-button-next,
.swiper-button-prev,
[class*="rounded-full"][class*="bg-white"][class*="shadow-navigation"] {
  background-color: var(--color-surface-card) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: all 0.3s ease !important;
}

[class*="slider_button"]:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Pagination dots */
.swiper-pagination-bullet {
  background-color: var(--color-text-muted) !important;
  opacity: 0.4 !important;
  transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-secondary) !important;
  opacity: 1 !important;
  transform: scale(1.3) !important;
}


/* ─────────────────────────────────────────────
   16. FORMS & INPUTS (Checkout, Contact)
   ───────────────────────────────────────────── */
input, select, textarea {
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  background-color: var(--color-surface-card) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-text-primary) !important;
  padding: 12px 16px !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-secondary) !important;
  background-color: var(--color-surface-card) !important;
  box-shadow: 0 0 0 3px rgba(151, 67, 88, 0.1) !important;
  outline: none !important;
}

/* Form labels */
label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
}


/* ─────────────────────────────────────────────
   17. MICRO-ANIMATIONS & POLISH
   ───────────────────────────────────────────── */

/* Smooth scroll */
html {
  scroll-behavior: smooth !important;
}

/* Selection color */
::selection {
  background-color: var(--color-tertiary) !important;
  color: var(--color-primary) !important;
}

/* Scrollbar — subtle maroon tint */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-low);
}

::-webkit-scrollbar-thumb {
  background: var(--color-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Image loading placeholder — prevents layout shift */
img {
  background-color: var(--color-surface-low);
}

/* All links — no garish default blue */
a {
  color: var(--color-text-primary) !important;
  transition: color 0.3s ease !important;
}

a:hover {
  color: var(--color-secondary) !important;
}

/* No ugly outlines */
*:focus-visible {
  outline: 2px solid var(--color-secondary) !important;
  outline-offset: 2px !important;
}


/* ─────────────────────────────────────────────
   18. RESPONSIVE REFINEMENTS
   ───────────────────────────────────────────── */

/* Mobile typography scaling */
@media (max-width: 768px) {
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.2rem !important; }

  /* Reduce card lift on mobile (no hover on touch) */
  [class*="box-border"][class*="flex-col"][class*="rounded-md"]:hover {
    transform: none !important;
  }

  /* Stack footer nicely */
  footer [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  footer [class*="flex"][class*="space-x"] {
    justify-content: center !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  [class*="text-2xl"][class*="font-bold"],
  section h2 {
    font-size: 1.8rem !important;
  }
}

/* Large screens — generous editorial spacing */
@media (min-width: 1280px) {
  [class*="text-2xl"][class*="font-bold"],
  section h2 {
    font-size: 2.4rem !important;
  }

  /* Extra whitespace between sections */
  section,
  [class*="mb-10"],
  [class*="mb-12"],
  [class*="mb-14"],
  [class*="mb-16"] {
    margin-bottom: 5rem !important;
  }
}