/* ==========================================================================
   CHIMINI LUXURY ECOMMERCE STYLESHEET
   ========================================================================== */

/* --- 1. DESIGN TOKENS & CUSTOM PROPERTIES --- */
:root {
  --bg-primary: #FAF9F6;      /* Ivory - Main clean background */
  --bg-secondary: #F5F2EB;    /* Soft Beige - Alternate sections, inputs */
  --bg-card: #FFFFFF;         /* Pure White - Product and testimonial cards */
  --text-primary: #2C1E14;    /* Dark Espresso - Main typography */
  --text-secondary: #5A4A42;  /* Muted Cocoa - Subtitles, descriptions */
  --text-light: #8E7C73;      /* Soft Taupe - Muted info */
  --accent: #C5A880;          /* Satin Gold - Accents, borders, links */
  --accent-hover: #A4855C;    /* Deep Gold - Hover states */
  --dark-charcoal: #1A110B;   /* Announcement, footer background */
  --white: #FFFFFF;
  --black: #000000;
  
  /* Fonts */
  --font-serif: 'Playfair Display', Georgia, serif;          /* Headings, titles, product names */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* UI: nav, buttons, labels, badges */
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif; /* Body: paragraphs, descriptions, captions */
  
  /* Layout */
  --max-width: 1400px;
  --header-height: 140px;
  --header-height-sticky: 90px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(44, 30, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(44, 30, 20, 0.06);
  --shadow-lg: 0 16px 40px rgba(44, 30, 20, 0.08);
  --shadow-drawer: -10px 0 30px rgba(44, 30, 20, 0.15);
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-medium: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- 2. BASE RESET & GLOBAL STYLES --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body); /* Poppins for all base body text */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ALL HEADINGS keep Playfair Display — no Poppins here */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Paragraphs, descriptions, captions — Poppins */
p, li, blockquote, figcaption, caption, small {
  font-family: var(--font-body);
  line-height: 1.75;
}

/* UI controls (buttons, inputs, selects) inherit Inter via --font-sans */
button, input, textarea, select, label {
  font-family: var(--font-sans);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Reset: UI controls use Inter (--font-sans), not Poppins */
button, input, textarea, select {
  font-family: var(--font-sans);
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


.icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* ==========================================================================
   TYPOGRAPHY PINNING — Font assignment by element role
   — Playfair Display (--font-serif): headings, titles, product names, logo
   — Inter (--font-sans): nav, buttons, badges, labels, UI controls, prices
   — Poppins (--font-body): body copy, paragraphs, descriptions, captions
   ========================================================================== */

/* Navigation — locked to Inter for sharp luxury UI legibility */
.nav-link,
.nav-links a {
  font-family: var(--font-sans);
}

/* Product names — keep Playfair Display */
.product-name {
  font-family: var(--font-serif);
}

/* Prices, badges, counts — Inter for clean numerical clarity */
.product-price,
.current-price,
.original-price,
.discount-badge,
.product-badge,
.cart-item-price,
.wishlist-item-price,
.badge,
.product-count,
.cart-subtotal,
.control-label,
.admin-subtitle {
  font-family: var(--font-sans);
}

/* Buttons explicitly Inter */
.btn,
.add-to-cart-btn,
.filter-toggle-btn,
.layout-btn,
.filter-btn,
.sort-icon-btn,
.admin-toggle-btn span {
  font-family: var(--font-sans);
}

/* Announcement bar — Inter for legibility */
.announcement-container,
#announcement-text {
  font-family: var(--font-sans);
}

/* Footer navigation links — Inter */
.footer-col a,
.footer-col h3 {
  font-family: var(--font-serif);
}

/* Footer description text and copyright — Poppins */
.footer-desc,
.footer-bottom p {
  font-family: var(--font-body);
}

/* Subpage hero subtitles — Poppins */
.subpage-subtitle {
  font-family: var(--font-body);
}

/* Testimonials — text body Poppins, author Inter */
.testimonial-text {
  font-family: var(--font-body);
}
.testimonial-author {
  font-family: var(--font-sans);
}

/* Collection and category title overlays — serif */
.collection-title-overlay,
.category-title {
  font-family: var(--font-serif);
}

/* Admin drawer UI — sans */
.admin-details summary,
.admin-card-title {
  font-family: var(--font-sans);
}

.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 40px;
}

.section-title {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 48px;
  position: relative;
  text-transform: capitalize;
}

.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background-color: var(--accent);
  margin: 16px auto 0;
}

/* --- 3. COMMON COMPONENTS (BUTTONS, INPUTS, TOAST) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
  border-radius: 0;
  position: relative;
}

.btn-primary {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border: 1px solid var(--text-primary);
}

.btn-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-primary);
}

.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.75rem;
}

/* Toast Notifications */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--dark-charcoal);
  color: var(--bg-primary);
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* --- 4. TOP ANNOUNCEMENT BAR --- */
.announcement-bar {
  background-color: var(--dark-charcoal);
  color: var(--bg-primary);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 20px;
  text-align: center;
  position: relative;
  z-index: 1002;
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.announcement-container {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 1200px;
  position: relative;
}

#announcement-text {
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 38px;
  will-change: transform, opacity;
}

.sticky-header-container {
  display: contents;
}

.main-header {
  background-color: var(--bg-primary);
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
  position: sticky;
  top: 0;
  z-index: 1001;
  transition: all var(--transition-medium);
  width: 100%;
  box-shadow: var(--shadow-sm);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px 40px; /* Reduced vertical padding for a compact layout */
  transition: padding var(--transition-medium);
}

/* Search Bar (Left) */
.header-search {
  flex: 1;
  max-width: 300px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(90, 74, 66, 0.3);
  padding: 6px 0;
  transition: border var(--transition-fast);
}

.search-input-wrapper:focus-within {
  border-bottom-color: var(--accent);
}

.search-icon {
  margin-right: 10px;
  color: var(--text-secondary);
}

.search-input-wrapper input {
  width: 100%;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.search-input-wrapper input::placeholder {
  color: var(--text-light);
  opacity: 0.8;
}

/* Logo (Center) */
.header-logo {
  text-align: center;
  flex: 1;
}

.logo-link {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-primary);
  transition: letter-spacing var(--transition-medium);
}

.logo-link:hover {
  color: var(--accent);
}

.logo-img {
  max-height: 65px; /* Consistent size at all times (Desktop) */
  width: auto;
  display: inline-block;
  vertical-align: middle;
  mix-blend-mode: multiply; /* Blend white background out on ivory header */
}

/* Actions (Right) */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex: 1;
  max-width: 300px;
}

.action-btn {
  position: relative;
  color: var(--text-primary);
  padding: 4px;
}

.action-btn:hover {
  color: var(--accent);
}

.action-btn:hover .icon {
  transform: translateY(-1px);
}

.action-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--accent);
  color: var(--text-primary);
  font-size: 0.65rem;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Navigation below Header Top */
.main-navigation {
  padding: 8px 0 10px; /* Reduced vertical padding for a compact layout */
  text-align: center;
  border-top: 1px solid rgba(197, 168, 128, 0.1);
  transition: all var(--transition-medium);
}

.nav-links {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 40px;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 4px 0;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-fast);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}

.nav-link:hover::after, .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Spacer for sticky header in content is no longer needed since sticky container stays in the flow */
body.has-sticky-header {
  padding-top: 0;
}

/* --- 6. HERO CAROUSEL BANNER --- */
.hero-section {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  min-height: 500px;
  max-height: 800px;
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  cursor: pointer;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.hero-slide:hover img {
  transform: scale(1.02);
}

.carousel-nav {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot.active {
  background-color: var(--white);
  transform: scale(1.2);
  border-color: var(--accent);
}

/* --- 7. BEST SELLERS SECTION --- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.product-card {
  /* Simplified flat card - no background, no border */
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-medium);
}

.product-card:hover {
  /* No hover elevation or border color change */
  transform: translateY(-2px);
  /* optional subtle lift */
  
}

/* Image Container */
.product-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Forced Square 1:1 Aspect Ratio (1000x1000px) */
  overflow: hidden;
  background-color: var(--bg-secondary);
}

.product-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-image-wrapper img {
  transform: scale(1.06);
}

/* Overlays inside Product Card */
.wishlist-toggle-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 5;
  transition: all var(--transition-fast);
}

.wishlist-toggle-btn:hover {
  background-color: var(--white);
  transform: scale(1.08);
}

.wishlist-toggle-btn.active {
  color: #D32F2F; /* Warm Red for Active Wishlist */
}

.wishlist-toggle-btn.active svg {
  fill: #D32F2F;
  stroke: #D32F2F;
}

/* Card details */
.product-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}

.product-name {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-weight: 400;
}

.product-price {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 12px;
}

/* Add to Cart Card Button */
.product-card-btn {
  margin-top: auto;
  width: auto;
  padding: 8px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border: 1px solid var(--text-primary);
  
}

.section-footer {
  text-align: center;
  margin-top: 50px;
}

/* --- 8. SHOP BY FRAGRANCE / CATEGORY --- */
.shop-by-fragrance {
  padding-top: 0;
}

.categories-scroll-wrapper {
  overflow-x: auto;
  padding: 10px 0 25px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-secondary);
}

.categories-scroll-wrapper::-webkit-scrollbar {
  height: 4px;
}

.categories-scroll-wrapper::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.categories-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}

.categories-container {
  display: flex;
  justify-content: center;
  gap: 50px;
  min-width: max-content;
  margin: 0 auto;
  padding: 0 40px;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.category-circle-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(197, 168, 128, 0.2);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all var(--transition-medium);
}

.category-circle-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.category-item:hover .category-circle-wrapper {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.category-item:hover .category-circle-wrapper img {
  transform: scale(1.1);
}

.category-title {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.category-item:hover .category-title {
  color: var(--text-primary);
}

/* --- 9. FEATURED COLLECTIONS GRID --- */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.collection-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Forced Square 1:1 Aspect Ratio (1000x1000px) */
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bg-secondary);
}

.collection-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.collection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(44, 30, 20, 0.1), rgba(44, 30, 20, 0.65));
  display: flex;
  align-items: flex-end;
  padding: 40px;
  transition: background var(--transition-medium);
}

.collection-title-overlay {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 8px;
}

.collection-title-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: var(--accent);
  transition: width var(--transition-medium);
}

.collection-card:hover img {
  transform: scale(1.05);
}

.collection-card:hover .collection-overlay {
  background: linear-gradient(to bottom, rgba(44, 30, 20, 0.2), rgba(44, 30, 20, 0.75));
}

.collection-card:hover .collection-title-overlay::after {
  width: 100px;
}

/* --- 10. MARKETING & FULL WIDTH BANNERS --- */
.full-width-banner-section {
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bg-secondary);
}

.full-width-banner-section a {
  display: block;
  width: 100%;
}

/* Force standard dimensions using aspect-ratio */
.hero-banner a,
.hero-banner img {
  width: 100%;
  aspect-ratio: 1920 / 800; /* Standard: 1920x800 px */
  object-fit: cover;
  display: block;
}

.products-ads-banner a,
.products-ads-banner img {
  width: 100%;
  aspect-ratio: 1920 / 600; /* Standard: 1920x600 px */
  object-fit: cover;
  display: block;
}

.brand-story-banner a,
.brand-story-banner img {
  width: 100%;
  aspect-ratio: 1920 / 700; /* Standard: 1920x700 px */
  object-fit: cover;
  display: block;
}

.full-width-banner-section img {
  transition: transform var(--transition-slow);
}

.full-width-banner-section:hover img {
  transform: scale(1.01);
}

/* Add descriptive spacings around elements */
section.full-width-banner-section {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* Top Hero Banner should not have top margin below header */
.hero-banner {
  margin-top: 0 !important;
}

/* Specific details for Brand Story Banner */
.brand-story-banner {
  margin-bottom: 0 !important;
}



.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  width: 120px;
}

.category-circle-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(197, 168, 128, 0.2);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all var(--transition-medium);
}

.category-circle-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.category-item:hover .category-circle-wrapper {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.category-item:hover .category-circle-wrapper img {
  transform: scale(1.1);
}

.category-title {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.category-item:hover .category-title {
  color: var(--text-primary);
}

/* --- 9. FEATURED COLLECTIONS GRID --- */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.collection-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Forced Square 1:1 Aspect Ratio (1000x1000px) */
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bg-secondary);
}

.collection-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.collection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(44, 30, 20, 0.1), rgba(44, 30, 20, 0.65));
  display: flex;
  align-items: flex-end;
  padding: 40px;
  transition: background var(--transition-medium);
}

.collection-title-overlay {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 8px;
}

.collection-title-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: var(--accent);
  transition: width var(--transition-medium);
}

.collection-card:hover img {
  transform: scale(1.05);
}

.collection-card:hover .collection-overlay {
  background: linear-gradient(to bottom, rgba(44, 30, 20, 0.2), rgba(44, 30, 20, 0.75));
}

.collection-card:hover .collection-title-overlay::after {
  width: 100px;
}

/* --- 10. MARKETING & FULL WIDTH BANNERS --- */
.full-width-banner-section {
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--bg-secondary);
}

.full-width-banner-section a {
  display: block;
  width: 100%;
}

/* Prevent cropping and maintain natural aspect ratio */
.hero-banner a,
.hero-banner img,
.products-ads-banner a,
.products-ads-banner img,
.brand-story-banner a,
.brand-story-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.full-width-banner-section img {
  transition: transform var(--transition-slow);
}

.full-width-banner-section:hover img {
  transform: scale(1.01);
}

/* Add descriptive spacings around elements */
section.full-width-banner-section {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* Top Hero Banner should not have top margin below header */
.hero-banner {
  margin-top: 0 !important;
}

/* Specific details for Brand Story Banner */
.brand-story-banner {
  margin-bottom: 0 !important;
}

/* --- 11. CUSTOMER TESTIMONIALS — 3-CARD GRID --- */
.testimonials-grid-section {
  background-color: #FFFFFF;
  padding: 80px 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.tg-header {
  text-align: center;
  margin-bottom: 50px;
}

.tg-eyebrow {
  color: #00A896;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.tg-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: #1A1A1A;
  margin-bottom: 10px;
  font-weight: 400;
}

.tg-heading-italic {
  font-style: italic;
  color: #F5A623;
}

.tg-subheading {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #888888;
  font-weight: 300;
}

/* Grid */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 60px;
}

.tg-card {
  background-color: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.tg-card:hover {
  transform: translateY(-3px);
}

.tg-card-accent-bar {
  height: 5px;
  width: 100%;
}

/* Card Themes */
.card-gold { border: 1.5px solid rgba(245, 166, 35, 0.3); }
.card-gold:hover { border-color: #F5A623; }
.card-gold .tg-card-accent-bar { background-color: #F5A623; }
.card-gold .tg-photo-zone { background-color: #FFF9F0; }
.card-gold .tg-camera-icon { background-color: #F5A623; color: #FFF; }
.card-gold .tg-upload-btn { background-color: #F5A623; color: #FFF; }
.card-gold .tg-avatar { border: 2px solid #F5A623; background-color: #F5A623; color: #FFF; }
.card-gold .tg-divider-line { background-color: #F5A623; }
.card-gold .tg-quote-mark { color: #F5A623; }

.card-teal { border: 1.5px solid rgba(0, 168, 150, 0.3); }
.card-teal:hover { border-color: #00A896; }
.card-teal .tg-card-accent-bar { background-color: #00A896; }
.card-teal .tg-photo-zone { background-color: #F0FBF8; }
.card-teal .tg-camera-icon { background-color: #00A896; color: #FFF; }
.card-teal .tg-upload-btn { background-color: #00A896; color: #FFF; }
.card-teal .tg-avatar { border: 2px solid #00A896; background-color: #00A896; color: #FFF; }
.card-teal .tg-divider-line { background-color: #00A896; }
.card-teal .tg-quote-mark { color: #00A896; }

.card-coral { border: 1.5px solid rgba(255, 107, 107, 0.3); }
.card-coral:hover { border-color: #FF6B6B; }
.card-coral .tg-card-accent-bar { background-color: #FF6B6B; }
.card-coral .tg-photo-zone { background-color: #FFF3F3; }
.card-coral .tg-camera-icon { background-color: #FF6B6B; color: #FFF; }
.card-coral .tg-upload-btn { background-color: #FF6B6B; color: #FFF; }
.card-coral .tg-avatar { border: 2px solid #FF6B6B; background-color: #FF6B6B; color: #FFF; }
.card-coral .tg-divider-line { background-color: #FF6B6B; }
.card-coral .tg-quote-mark { color: #FF6B6B; }

/* Photo Zone */
.tg-photo-zone {
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tg-camera-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.tg-camera-icon svg {
  width: 16px;
  height: 16px;
}

.tg-photo-name {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #1A1A1A;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.tg-photo-caption {
  font-family: var(--font-sans);
  font-weight: 300;
  color: #888888;
  font-size: 0.7rem;
  margin-bottom: 10px;
}

.tg-upload-btn {
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.tg-upload-btn:hover {
  opacity: 0.9;
}

/* Review Zone */
.tg-review-zone {
  padding: 15px;
  background-color: #FFFFFF;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tg-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.tg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
}

.tg-avatar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tg-avatar-name {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #1A1A1A;
  font-size: 0.85rem;
}

.tg-avatar-city {
  font-family: var(--font-sans);
  font-weight: 400;
  color: #AAAAAA;
  font-size: 0.7rem;
}

.tg-stars {
  display: flex;
  gap: 3px;
  color: #F5A623;
  margin-bottom: 8px;
}

.tg-stars svg {
  width: 14px;
  height: 14px;
}

.tg-divider-line {
  height: 2px;
  width: 40px;
  margin-bottom: 8px;
}

.tg-quote-mark {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 0.5;
  margin-bottom: 2px;
}

.tg-review-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  line-height: 1.5;
  color: #888888;
  margin: 0;
  padding: 0;
  border: none;
}

/* Bottom Stats Bar */
.tg-stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 40px;
}

.tg-stat {
  text-align: center;
}

.tg-stat-value {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: #1A1A1A;
  margin-bottom: 5px;
}

.tg-stat-label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  color: #888888;
}

.tg-stat-divider {
  width: 1px;
  height: 50px;
  background-color: rgba(0,0,0,0.08);
}

/* Bottom Decor */
.tg-bottom-decor {
  text-align: center;
}

.tg-pattern {
  color: rgba(245, 166, 35, 0.4);
  letter-spacing: 15px;
  margin-bottom: 30px;
  font-size: 1rem;
}

.tg-cta-btn {
  background-color: #1A1A1A;
  color: #FFFFFF;
  border: none;
  border-radius: 30px;
  padding: 14px 35px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tg-cta-btn:hover {
  background-color: #F5A623;
}

/* --- 12. FOOTER --- */
.main-footer {
  background-color: var(--dark-charcoal);
  color: rgba(250, 249, 246, 0.7);
  padding: 80px 40px 40px;
  border-top: 1px solid rgba(197, 168, 128, 0.1);
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
}

.footer-col h3 {
  font-family: var(--font-serif);
  color: var(--bg-primary);
  font-size: 1.2rem;
  margin-bottom: 25px;
  font-weight: 400;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col ul li a {
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}

.footer-col ul li a:hover {
  color: var(--accent);
}

.brand-info .footer-logo {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--bg-primary);
  margin-bottom: 20px;
  display: inline-block;
  letter-spacing: 0.1em;
}

.footer-logo-img {
  max-height: 45px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  filter: invert(1); /* Invert colors so dark logo turns light on dark background */
  mix-blend-mode: screen; /* Blend out black background leaving light text */
}

.brand-info .footer-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 25px;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  background-color: rgba(250, 249, 246, 0.05);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--bg-primary);
}

.social-icons a:hover {
  background-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.contact-info p {
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.6;
}

.contact-info p strong {
  color: var(--bg-primary);
  font-weight: 500;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 60px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(250, 249, 246, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(250, 249, 246, 0.4);
}

/* --- 13. SLIDING DRAWERS & OVERLAYS --- */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(44, 30, 20, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1010;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-medium);
}

.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: -480px;
  width: 480px;
  height: 100vh;
  background-color: var(--bg-primary);
  box-shadow: var(--shadow-drawer);
  z-index: 1011;
  display: flex;
  flex-direction: column;
  transition: right var(--transition-medium);
}

.drawer.active {
  right: 0;
}

.drawer-header {
  padding: 30px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header h2 {
  font-size: 1.5rem;
}

.close-drawer-btn {
  color: var(--text-primary);
  padding: 4px;
}

.close-drawer-btn:hover {
  color: var(--accent);
}

.drawer-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 30px;
}

.drawer-footer {
  padding: 30px;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
  background-color: var(--bg-secondary);
}

/* --- SHOPPING CART DRAWER DETAIL --- */
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.cart-item {
  display: flex;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.1);
}

.cart-item-img {
  width: 80px;
  height: 100px;
  background-color: var(--bg-secondary);
  border-radius: 0;
  overflow: hidden;
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.cart-item-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.cart-item-price {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 8px;
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.qty-btn {
  border: 1px solid rgba(90, 74, 66, 0.3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.qty-btn:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.qty-val {
  font-size: 0.85rem;
  font-weight: 500;
  min-width: 15px;
  text-align: center;
}

.cart-item-remove {
  color: var(--text-light);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.cart-item-remove:hover {
  color: var(--text-primary);
}

.cart-empty-message {
  text-align: center;
  padding: 40px 0;
  color: var(--text-secondary);
}

/* --- WISHLIST DRAWER DETAIL --- */
.wishlist-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.1);
}

.wishlist-item-img {
  width: 70px;
  height: 85px;
  background-color: var(--bg-secondary);
}

.wishlist-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wishlist-item-details {
  flex-grow: 1;
}

.wishlist-item-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin-bottom: 4px;
}

.wishlist-item-price {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.wishlist-item-actions {
  display: flex;
  gap: 15px;
  font-size: 0.75rem;
}

.wishlist-add-to-cart {
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}

.wishlist-add-to-cart:hover {
  color: var(--accent-hover);
}

.wishlist-remove {
  color: var(--text-light);
  cursor: pointer;
  text-decoration: underline;
}

.wishlist-remove:hover {
  color: var(--text-primary);
}

/* --- 14. ADMIN CUSTOMIZER PANEL DRAWER --- */
.admin-drawer {
  background-color: #1E1B18; /* Sophisticated Dark Charcoal/Bronze Admin */
  color: #E2DDD5;
  border-left: 1px solid #3A322C;
}

.admin-drawer .drawer-header {
  border-bottom-color: #3A322C;
}

.admin-drawer .drawer-header h2 {
  color: #FFFFFF;
  font-family: var(--font-serif);
}

.admin-drawer .close-drawer-btn {
  color: #E2DDD5;
}

.admin-drawer .close-drawer-btn:hover {
  color: var(--accent);
}

.admin-subtitle {
  font-size: 0.85rem;
  color: #A69E94;
  margin-bottom: 25px;
  line-height: 1.5;
}

.admin-details {
  border: 1px solid #3A322C;
  background-color: #26221F;
  margin-bottom: 15px;
  border-radius: 2px;
}

.admin-details summary {
  padding: 14px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: #FFFFFF;
  outline: none;
}

.admin-details summary:hover {
  color: var(--accent);
}

.admin-details[open] summary {
  border-bottom: 1px solid #3A322C;
}

.admin-details .admin-form-group,
.admin-details .admin-item-list,
.admin-details .admin-banner-edit-card {
  padding: 20px;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.admin-form-group:last-child {
  margin-bottom: 0;
}

.admin-form-group label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A69E94;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
  background-color: #151311;
  border: 1px solid #3A322C;
  padding: 10px 14px;
  color: #FFFFFF;
  font-size: 0.85rem;
  transition: border var(--transition-fast);
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus {
  border-color: var(--accent);
}

.admin-file-input {
  margin-top: 6px;
  padding: 6px !important;
  font-size: 0.75rem !important;
}

.admin-banner-edit-card {
  border-bottom: 1px solid #3A322C;
  padding-bottom: 25px !important;
  margin-bottom: 20px;
}

.admin-banner-edit-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0 !important;
}

.admin-banner-edit-card h4 {
  font-size: 1rem;
  color: #FFFFFF;
  margin-bottom: 15px;
  font-family: var(--font-serif);
}

.admin-item-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding-bottom: 5px !important;
}

.admin-card {
  background-color: #151311;
  border: 1px solid #3A322C;
  padding: 15px;
  position: relative;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #26221F;
  padding-bottom: 8px;
}

.admin-card-title {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--accent);
}

.admin-card-delete {
  color: #D32F2F;
  font-size: 0.75rem;
  cursor: pointer;
}

.admin-card-delete:hover {
  text-decoration: underline;
}

.admin-drawer-footer {
  border-top-color: #3A322C;
  background-color: #151311;
  display: flex;
  gap: 15px;
}

.admin-drawer-footer .btn {
  flex: 1;
}

.admin-drawer-footer .btn-secondary {
  color: #FFFFFF;
  border-color: #3A322C;
}

.admin-drawer-footer .btn-secondary:hover {
  background-color: #26221F;
}

/* Floating customizer button */
.admin-toggle-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: var(--dark-charcoal);
  color: var(--bg-primary);
  border: 1px solid var(--accent);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-medium);
  z-index: 999;
}

.admin-toggle-btn:hover {
  background-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.admin-toggle-btn span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- 15. ANIMATIONS & TRANSITIONS --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fade {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- 16. RESPONSIVE MEDIA QUERIES --- */

/* Desktop & Large screens (widths up to 1200px) */
@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .footer-container {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
  }
}

/* Tablets (widths up to 768px) */
@media (max-width: 768px) {

  /* =========================================================
     MOBILE SHOP CATALOG TOOLBAR & VIEW MODES (<= 768px)
     ========================================================= */
  .catalog-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 20px !important;
    align-items: stretch !important;
  }

  /* Row 1: 3 view icons on left, product count centered */
  .catalog-toolbar-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
  }

  .layout-switchers {
    display: flex !important;
    gap: 6px !important;
    z-index: 2;
  }

  /* 3 icons on mobile: 1-col (|), 2-col (||), list (=) */
  .layout-btn-1 {
    display: flex !important;
  }
  .layout-btn-2 {
    display: flex !important;
  }
  .layout-btn-3 {
    display: none !important;
  }
  .layout-btn-4 {
    display: none !important;
  }
  .layout-btn-list {
    display: none !important; /* Hide list view icon on mobile */
  }

  .layout-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }

  .layout-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Right-aligned "products found" text in Row 1 (not next to icons, pushed to right) */
  .product-count {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    text-align: right !important;
    font-size: 0.82rem !important;
    font-family: var(--font-sans) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }

  /* Row 2: Sort dropdown on left, Filter button on right */
  .catalog-controls {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .shop-sort-select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 32px 10px 14px !important;
    font-size: 0.82rem !important;
  }

  .filter-toggle-btn {
    flex: 0 0 auto !important;
    padding: 10px 20px !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  /* Grid layout modes on mobile */
  .shop-products-grid.grid-1 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .shop-products-grid.grid-1 .product-card {
    width: 100% !important;
  }
  .shop-products-grid.grid-1 .product-image-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* 2-column mode: STRICT 50/50 exact equal width split */
  .shop-products-grid.grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .shop-products-grid.grid-2 .product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .shop-products-grid.grid-2 .product-image-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .shop-products-grid.grid-2 .product-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .shop-products-grid.grid-2 .product-info {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .shop-products-grid.grid-2 .product-name {
    font-size: 0.95rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .shop-products-grid.list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }


  /* --- MOBILE HEADER & NAVIGATION REFINEMENTS --- */
  .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .main-navigation {
    display: none !important; /* Hide horizontal nav bar on mobile - converted to hamburger */
  }

  .header-top {
    padding: 8px 16px !important;
  }

  /* --- MOBILE LOGO: shift left (search is hidden, so logo drifts right without fix) --- */
  .header-logo {
    text-align: left !important;
    flex: 0 1 auto !important;     /* don't grow to fill empty search space */
    margin-left: 4px !important;   /* small nudge from left edge */
  }

  .header-actions {
    gap: 6px !important;
  }

  .header-actions .action-btn {
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  /* --- MOBILE BANNER FIT: full width, no cropping, no fixed heights --- */
  /* Hero banner */
  .hero-banner {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-primary) !important;
    overflow: hidden !important;
  }

  .hero-banner a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-banner img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* Products-ads, brand-story, and all other full-width banners */
  .full-width-banner-section {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .full-width-banner-section a,
  .products-ads-banner a,
  .brand-story-banner a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .full-width-banner-section img,
  .products-ads-banner img,
  .brand-story-banner img,
  .banner-slot-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* Override fixed max-heights on specific banner slots */
  #hero-banner .banner-slot-img,
  #products-ads-banner-1 .banner-slot-img,
  #products-ads-banner-2 .banner-slot-img,
  #brand-story-banner .banner-slot-img {
    max-height: none !important;
    object-fit: contain !important;
    height: auto !important;
  }

  /* --- ELIMINATE LARGE GAP BETWEEN BANNER & BEST SELLERS --- */
  section#best-sellers.section-container,
  #best-sellers.section-container {
    padding-top: 18px !important;
    padding-bottom: 36px !important;
  }

  #best-sellers .section-title {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-size: 1.65rem !important;
  }

  body {
    font-size: 15px;
  }

  .section-container {
    padding: 60px 20px;
  }
  
  .section-title {
    font-size: 1.8rem;
    margin-bottom: 35px;
  }

  .header-top {
    padding: 10px 20px; /* Consistent compact padding */
  }

  .logo-link {
    font-size: 1.8rem;
  }

  .logo-img {
    max-height: 50px; /* Consistent size at all times (Mobile) */
  }

  .header-search {
    display: none; /* Hide search bar on mobile headers, load as modal or in drawer if requested */
  }

  .nav-links {
    gap: 15px;
    overflow-x: auto;
    padding: 0 10px 5px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-link {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Hero slide settings */
  /* Responsive Banner Heights for legibility on mobile */
  /* hero-banner mobile rule moved to refined mobile block */
  
  /* products-ads and brand-story banners: use auto aspect ratio so full image shows on mobile */
  .products-ads-banner a,
  .products-ads-banner img,
  .brand-story-banner a,
  .brand-story-banner img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
    height: auto !important;
  }

  /* Grid layout modifications */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .product-info {
    padding: 12px;
  }
  
  .product-name {
    font-size: 1rem;
  }

  .collections-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .collection-card {
    aspect-ratio: 1 / 1;
  }

  .collection-overlay {
    padding: 20px;
  }

  .collection-title-overlay {
    font-size: 1.5rem;
  }

  .categories-container {
    gap: 25px;
    padding: 0 20px;
  }

  .category-item {
    width: 90px;
  }

  .category-circle-wrapper {
    width: 80px;
    height: 80px;
  }

  .testimonial-text {
    font-size: 1.15rem;
    padding: 0 10px;
  }

  /* Drawer mobile scaling */
  .drawer {
    width: 100vw;
    right: 0; transform: translateX(100%); visibility: hidden;
  }
  
  .drawer-header, .drawer-content, .drawer-footer {
    padding: 20px;
  }

  .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
    text-align: left;
  }
  
  .brand-info, .contact-info {
    align-items: flex-start;
  }

  .social-icons {
    justify-content: center;
  }

  .admin-toggle-btn {
    bottom: 20px;
    right: 20px;
    padding: 10px 16px;
  }
  
  .admin-toggle-btn span {
    display: none; /* Icon only on mobile screens */
  }

  /* Shop, Collections, Gifts, About, Contact Mobile Overrides */
  .subpage-hero {
    padding: 60px 20px 40px;
  }
  .subpage-title {
    font-size: 2.2rem;
  }
  .shop-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .shop-sidebar {
    position: static;
    padding: 20px;
  }
  .shop-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .collections-page-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .gift-features {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .about-story-grid,
  .about-story-grid.reverse {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .about-story-image {
    order: 2; /* always push images below paragraphs in flow on mobile */
  }
  .about-story-grid.reverse .about-story-image {
    order: 2;
  }
  .about-story-text {
    padding-right: 0;
  }
  .about-story-grid.reverse .about-story-text {
    padding-left: 0;
  }
  .about-quote {
    font-size: 1.4rem;
  }
  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

/* Small mobile devices (widths up to 480px) */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-image-wrapper {
    aspect-ratio: 1 / 1;
  }

  .announcement-bar {
    font-size: 0.65rem;
    padding: 0 10px;
    height: 36px;
    min-height: 36px;
  }
  #announcement-text {
    line-height: 36px;
  }

  .shop-products-grid {
    grid-template-columns: 1fr;
  }
  .luxury-contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   17. SUBPAGE SPECIFIC STYLING
   ========================================================================== */
.subpage-hero {
  background-color: var(--bg-secondary);
  text-align: center;
  padding: 100px 20px 80px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  margin-bottom: 40px;
}

.subpage-title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.subpage-subtitle {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Shop Section Styling */
.shop-layout-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.shop-sidebar {
  background-color: var(--bg-secondary);
  padding: 30px;
  border: 1px solid rgba(197, 168, 128, 0.15);
  position: sticky;
  top: 110px; /* clean offset below header */
}

.sidebar-section {
  margin-bottom: 35px;
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  padding-bottom: 8px;
}

.sidebar-categories {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-cat-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-cat-item:hover,
.sidebar-cat-item.active {
  color: var(--accent);
  padding-left: 5px;
}

.shop-sort-select {
  width: 100%;
  padding: 10px 15px;
  background-color: var(--bg-primary);
  border: 1px solid rgba(197, 168, 128, 0.25);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border var(--transition-fast);
}

.shop-sort-select:focus {
  border-color: var(--accent);
}

.shop-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Collections Section Styling */
.collections-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-bottom: 80px;
}

.collection-page-card {
  background-color: var(--bg-secondary);
  border: 1px solid rgba(197, 168, 128, 0.1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-medium);
}

.collection-page-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(197, 168, 128, 0.25);
}

.collection-page-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.collection-page-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.collection-page-card:hover .collection-page-card-image img {
  transform: scale(1.04);
}

.collection-page-card-content {
  padding: 30px;
  text-align: center;
}

.collection-page-card-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.collection-page-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.collection-page-card-btn {
  display: inline-flex;
}

/* Gifts Section Styling */
.gift-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  padding-bottom: 50px;
}

.gift-feature-item h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 400;
}

.gift-feature-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* About Section Styling */
.about-story-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.about-story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: center;
}

.about-story-grid.reverse {
  direction: ltr; /* normal reading order but image left, text right */
}

.about-story-text {
  padding-right: 20px;
}

.about-story-grid.reverse .about-story-text {
  padding-right: 0;
  padding-left: 20px;
}

.about-section-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 25px;
  font-weight: 400;
}

.about-paragraph {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-story-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.1);
  box-shadow: var(--shadow-md);
}

.about-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-quote-banner {
  background-color: var(--bg-secondary);
  padding: 80px 20px;
  text-align: center;
  border-top: 1px solid rgba(197, 168, 128, 0.1);
  border-bottom: 1px solid rgba(197, 168, 128, 0.1);
  margin: 40px 0;
}

.about-quote {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: italic;
  color: var(--text-primary);
  max-width: 800px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.about-quote-author {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.about-values {
  margin-top: 40px;
  margin-bottom: 80px;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.value-card {
  padding: 40px 30px;
  background-color: var(--bg-secondary);
  border: 1px solid rgba(197, 168, 128, 0.1);
  transition: all var(--transition-medium);
}

.value-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.value-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  font-weight: 400;
}

.value-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Contact Section Styling */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 80px;
}

.contact-col-heading {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 30px;
  font-weight: 400;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  padding-bottom: 10px;
}

.contact-detail-item {
  margin-bottom: 30px;
}

.contact-detail-item h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 8px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.contact-detail-item p {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.contact-detail-hours {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.luxury-contact-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.luxury-contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.luxury-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.luxury-contact-form label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.luxury-contact-form input[type="text"],
.luxury-contact-form input[type="email"],
.luxury-contact-form textarea,
.contact-form-select {
  padding: 14px 18px;
  background-color: var(--bg-secondary);
  border: 1px solid rgba(197, 168, 128, 0.25);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: all var(--transition-fast);
}

.luxury-contact-form input[type="text"]:focus,
.luxury-contact-form input[type="email"]:focus,
.luxury-contact-form textarea:focus,
.contact-form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(197, 168, 128, 0.15);
}

.contact-submit-btn {
  padding: 16px;
  font-size: 0.85rem;
}

/* ==========================================================================
   18. ECOMMERCE CATALOG & FILTER DRAWER SYSTEM
   ========================================================================== */

/* Toolbar & Layout Switchers */
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 20px 40px;
  border-top: 1px solid rgba(197, 168, 128, 0.15);
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  margin-bottom: 40px;
  background-color: var(--bg-primary);
}

.layout-switchers {
  display: flex;
  gap: 8px;
}

.layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(197, 168, 128, 0.2);
  color: var(--text-secondary);
  background: transparent;
  transition: all var(--transition-fast);
}

.layout-btn:hover,
.layout-btn.active {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.layout-btn svg {
  width: 18px;
  height: 18px;
}

.product-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

/* Sort Dropdown — premium styled native select */
.shop-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 36px 9px 14px;
  border: 1px solid rgba(197, 168, 128, 0.3);
  background-color: var(--bg-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-width: 160px;
}

.shop-sort-select:hover {
  border-color: rgba(197, 168, 128, 0.6);
}

.shop-sort-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.12);
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.control-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.shop-sort-select {
  padding: 8px 16px;
  border: 1px solid rgba(197, 168, 128, 0.25);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  transition: border var(--transition-fast);
}

.shop-sort-select:focus {
  border-color: var(--accent);
}

.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--text-primary);
  background-color: transparent;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.filter-toggle-btn:hover {
  background-color: var(--text-primary);
  color: var(--bg-primary);
}

.filter-toggle-btn svg {
  width: 15px;
  height: 15px;
}

/* Premium Layout Modifier Options */
.shop-products-grid {
  display: grid;
  gap: 30px;
  transition: all var(--transition-medium);
}

.shop-products-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.shop-products-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.shop-products-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Premium List Layout Styling */
.shop-products-grid.list {
  grid-template-columns: 1fr;
  gap: 25px;
}

.shop-products-grid.list .product-card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 20px;
  gap: 35px;
}

.shop-products-grid.list .product-image-wrapper {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.shop-products-grid.list .product-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  padding: 0;
  text-align: left;
  gap: 30px;
}

.shop-products-grid.list .product-details-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.shop-products-grid.list .product-price-action {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.shop-products-grid.list .product-price-wrapper {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Luxury Card Accents (Badges, Swatches, Pricing Details) */
.product-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--dark-charcoal);
  color: var(--bg-primary);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  text-transform: uppercase;
  z-index: 4;
}

/* Hover-fade Dual Images */
.product-image-hover {
  opacity: 0;
  transition: opacity 0.4s ease, transform var(--transition-slow) !important;
  z-index: 2;
}

.product-image-main {
  opacity: 1;
  transition: opacity 0.4s ease, transform var(--transition-slow) !important;
  z-index: 1;
}

.product-card:hover .product-image-hover {
  opacity: 1;
}

.product-card:hover .product-image-main {
  opacity: 0;
}

/* Corner "+" Add to Cart Button Overlay */
.product-cart-overlay-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  color: #1a110b;
  border: none;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 5;
  transition: all var(--transition-fast);
}

.product-cart-overlay-btn:hover {
  background-color: var(--text-primary);
  color: var(--white);
  transform: scale(1.08);
}

/* Pricing layout */
.product-price-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mrp-label {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.current-price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.original-price {
  font-size: 0.85rem;
  color: var(--text-light);
  text-decoration: line-through;
}

.discount-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #1B5E20; /* Luxury deep green discount tag */
  background-color: #E8F5E9;
  padding: 2px 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 0;
}

.discount-badge-green {
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  background-color: #388E3C; /* solid leaf green */
  padding: 3px 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  display: inline-block;
}

.scent-swatches {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
}

.shop-products-grid.list .scent-swatches {
  justify-content: flex-start;
  margin: 4px 0 0 0;
}

.swatch-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(44, 30, 20, 0.15);
  display: inline-block;
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.swatch-dot:hover {
  transform: scale(1.3);
  border-color: var(--accent);
}

/* Collapsible Filter Drawer Details */
.filter-drawer {
  background-color: var(--bg-primary);
  border-left: 1px solid rgba(197, 168, 128, 0.2);
}

.filter-section {
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.1);
  padding-bottom: 30px;
}

.filter-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.filter-section h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.filter-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  padding: 8px 18px;
  border: 1px solid rgba(197, 168, 128, 0.2);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background-color: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
}

.price-range-inputs {
  display: flex;
  gap: 15px;
}

.price-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.price-input-group label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 500;
}

.price-input-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(197, 168, 128, 0.25);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border var(--transition-fast);
}

.price-input-group input:focus {
  border-color: var(--accent);
}

/* Media Queries Override for Catalog Components */
@media (max-width: 992px) {
  .shop-products-grid.grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .catalog-toolbar {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 20px;
  }
  
  .catalog-controls {
    width: 100%;
    justify-content: space-between;
    gap: 15px;
  }

  .sort-control {
    flex-grow: 1;
  }
  
  .shop-sort-select {
    width: 100%;
  }

  .shop-products-grid.grid-4,
  .shop-products-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-products-grid.list .product-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 20px;
  }

  .shop-products-grid.list .product-image-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .shop-products-grid.list .product-info {
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
  }

  .shop-products-grid.list .product-details-text {
    align-items: center;
  }

  .shop-products-grid.list .scent-swatches {
    justify-content: center;
  }

  .shop-products-grid.list .product-price-action {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .shop-products-grid.list .product-price-wrapper {
    justify-content: center;
  }

  .shop-products-grid.list .add-to-cart-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .shop-products-grid.grid-4,
  .shop-products-grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- Responsive: 4-Card Grid Testimonials --- */
@media (max-width: 1024px) {
  .tg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .tg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tg-stats-bar {
    flex-direction: column;
    gap: 20px;
  }
  .tg-stat-divider {
    width: 60px;
    height: 1px;
  }
  .testimonials-grid-section {
    padding: 60px 20px;
  }
}


/* ==========================================================================
   COLLECTIONS INDEX PAGE STYLING (CHIMINI LUXURY DESIGN)
   ========================================================================== */
.collections-index-section {
  padding: 40px 20px 80px;
}

.collections-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px auto;
}

.collections-badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
  margin-bottom: 12px;
  font-weight: 600;
}

.collections-main-title {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 15px;
}

.collections-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.collections-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px;
}

.collection-index-card {
  background-color: var(--bg-secondary, #FAF8F5);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.18);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.collection-index-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
}

.collection-card-inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.collection-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f0ebe4;
}

.collection-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.collection-index-card:hover .collection-card-img {
  transform: scale(1.06);
}

.collection-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 100%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.collection-card-badge {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.collection-index-card:hover .collection-card-badge {
  background-color: var(--color-text-dark, #2A2A2A);
  color: #FFFFFF;
}

.collection-card-info {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.collection-card-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.collection-index-card:hover .collection-card-title {
  color: var(--color-gold, #C5A880);
}

.collection-card-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
  flex-grow: 1;
}

.collection-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-top: auto;
  transition: color 0.3s ease;
}

.arrow-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.collection-index-card:hover .arrow-icon {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .collections-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
  }
  .collections-main-title {
    font-size: 2.2rem;
  }
}


/* --- Updated Collection Card Styling (Text inside image) --- */
.collection-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.7) 100%);
  opacity: 0.8;
  transition: opacity 0.4s ease;
}

.collection-index-card:hover .collection-card-overlay {
  opacity: 0.9;
}

.collection-card-text-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 24px;
  z-index: 2;
}

.collection-card-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: color 0.3s ease;
}

.collection-index-card:hover .collection-card-title {
  color: #F3E5AB;
}

.collection-card-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.collection-index-card:hover .collection-card-badge {
  background-color: var(--color-gold, #C5A880);
  color: #FFFFFF;
  transform: translateX(2px);
}


/* ==========================================================================
   GIFTS PAGE REDESIGN STYLING (CHIMINI LUXURY DESIGN)
   ========================================================================== */

/* 1. Gifts Hero Section */
.gifts-hero-section {
  background: linear-gradient(135deg, #FAF7F2 0%, #F5EFE6 100%);
  padding: 80px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  margin-bottom: 50px;
}

.gifts-hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
  font-weight: 600;
  margin-bottom: 15px;
}

.gifts-hero-title {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.gifts-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

.gifts-hero-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* 2. Interactive Gift Customizer */
.gift-customizer-section {
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 70px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.customizer-header {
  text-align: center;
  margin-bottom: 40px;
}

.customizer-header h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.customizer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.customizer-controls {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.custom-step-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.custom-option-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.custom-opt-btn {
  padding: 10px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #FAF8F5;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.custom-opt-btn.active, .custom-opt-btn:hover {
  border-color: var(--color-gold, #C5A880);
  background: #2A2A2A;
  color: #FFFFFF;
}

.swatch-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.swatch-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #E2E8F0;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.swatch-btn.active {
  border-color: var(--color-text-dark, #2A2A2A);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.4);
}

.custom-text-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 80px;
}

.customizer-preview-card {
  background: #FAF7F2;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: sticky;
  top: 110px;
}

.preview-image-container {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  position: relative;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-details {
  width: 100%;
}

.preview-note-box {
  background: #FFFFFF;
  border: 1px dashed var(--color-gold, #C5A880);
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-primary);
  font-size: 0.95rem;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 15px;
}

/* 3. Promo Banner Section */
.gifts-promo-banner {
  background: #2A2A2A;
  color: #FFFFFF;
  padding: 60px 40px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 70px;
  position: relative;
  overflow: hidden;
}

.gifts-promo-banner h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 10px;
  color: #F3E5AB;
}

.gifts-promo-banner p {
  font-size: 1rem;
  color: #E2E8F0;
  max-width: 600px;
  margin: 0 auto 25px auto;
}

/* 4. Shop by Price Rows */
.price-section-block {
  margin-bottom: 60px;
}

.price-section-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-section-title::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: rgba(197, 168, 128, 0.25);
}

.price-scroll-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold, #C5A880) #FAF8F5;
}

.price-scroll-row::-webkit-scrollbar {
  height: 5px;
}

.price-scroll-row::-webkit-scrollbar-thumb {
  background: var(--color-gold, #C5A880);
  border-radius: 4px;
}

.price-card-item {
  flex: 0 0 240px;
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.18);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.price-card-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #FFF;
}

.price-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.price-card-cost {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-gold, #C5A880);
  margin-bottom: 12px;
}

.price-card-btn {
  margin-top: auto;
  width: 100%;
  padding: 8px;
  font-size: 0.75rem;
}

/* 5. Tile Grids (Recipient & Occasion) */
.tile-grid-section {
  margin-bottom: 70px;
}

.tile-grid-header {
  text-align: center;
  margin-bottom: 35px;
}

.tile-grid-header h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text-primary);
}

.tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.tile-card {
  background: var(--bg-secondary, #FAF8F5);
  border: 1px solid rgba(197, 168, 128, 0.2);
  border-radius: 8px;
  padding: 25px 15px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tile-card:hover {
  background: #2A2A2A;
  color: #FFFFFF;
  border-color: #2A2A2A;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.tile-card-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.tile-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .customizer-grid {
    grid-template-columns: 1fr;
  }
  .gifts-hero-title {
    font-size: 2.4rem;
  }
  .gift-customizer-section {
    padding: 20px;
  }
}


/* ==========================================================================
   UPDATED GIFTS PAGE STYLING (CORRECTIONS)
   ========================================================================== */

/* 1. Round Price Tiles (Single Unified Row) */
.price-round-tiles-row {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
}

.price-round-tile {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(197, 168, 128, 0.3);
  text-decoration: none;
  display: block;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.price-round-tile:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  border-color: var(--color-gold, #C5A880);
}

.price-round-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.price-round-tile:hover .price-round-img {
  transform: scale(1.08);
}

.price-round-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65) 100%);
}

.price-round-label {
  position: absolute;
  bottom: 15px;
  left: 18px;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  z-index: 2;
}

/* 2. Shop by Recipient Grid (3 Tiles Per Row) */
.recipient-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.recipient-box-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.2);
  text-decoration: none;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.recipient-box-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

.recipient-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.recipient-box-tile:hover .recipient-box-img {
  transform: scale(1.06);
}

.recipient-box-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
}

.recipient-box-label {
  position: absolute;
  bottom: 18px;
  left: 20px;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 2;
  transition: color 0.3s ease;
}

.recipient-box-tile:hover .recipient-box-label {
  color: #F3E5AB;
}

/* 3. Shop by Occasion Grid (4 Tiles Per Row) */
.occasion-tiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.occasion-box-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.2);
  text-decoration: none;
  display: block;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.occasion-box-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

.occasion-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.occasion-box-tile:hover .occasion-box-img {
  transform: scale(1.06);
}

.occasion-box-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
}

.occasion-box-label {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: #FFFFFF;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 2;
  transition: color 0.3s ease;
}

.occasion-box-tile:hover .occasion-box-label {
  color: #F3E5AB;
}

/* 4. Gift Cards Grid (4 Per Row, Sized 500x625px Aspect Ratio 4:5) */
.gift-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.gift-card-item {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 625;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.25);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.gift-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}

.gift-card-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gift-card-item:hover .gift-card-bg-img {
  transform: scale(1.06);
}

.gift-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

.gift-card-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: color 0.3s ease;
}

.gift-card-item:hover .gift-card-title {
  color: var(--color-gold, #C5A880);
}

.gift-card-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
}

@media (max-width: 992px) {
  .recipient-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .occasion-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .recipient-tiles-grid { grid-template-columns: 1fr; }
  .occasion-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-cards-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   BANNER SLOTS — Pure image+link, no text overlay
   ========================================================================== */
.banner-slot-link {
  display: block;
  width: 100%;
  line-height: 0;
  cursor: pointer;
  overflow: hidden;
}

.banner-slot-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.banner-slot-link:hover .banner-slot-img {
  transform: scale(1.02);
}

.page-top-banner-wrap {
  width: 100%;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Hero banner: full width, no fixed height, auto aspect */
#hero-banner .banner-slot-link,
#hero-banner .banner-slot-img {
  max-height: 600px;
  object-fit: cover;
}

/* Ads banners: constrained height */
#products-ads-banner-1 .banner-slot-img,
#products-ads-banner-2 .banner-slot-img {
  max-height: 500px;
  object-fit: cover;
}

/* Brand story banner */
#brand-story-banner .banner-slot-img {
  max-height: 450px;
  object-fit: cover;
}

/* In-page slot wrappers (gifts promo etc.) */
.gifts-img-banner {
  width: 100%;
  margin-bottom: 50px;
  border-radius: 8px;
  overflow: hidden;
}

.gifts-img-banner .banner-slot-img {
  max-height: 380px;
  object-fit: cover;
  border-radius: 8px;
}

/* ==========================================================================
   ABOUT PAGE: 3 FULL-WIDTH BANNERS — EDGE TO EDGE, NO GAPS
   ========================================================================== */
#about-page-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.about-banners-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

.about-banners-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

.about-banner-slot {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.about-banner-slot.filled-slot {
  line-height: 0 !important;
  font-size: 0 !important;
}

.about-banner-slot.filled-slot:hover {
  box-shadow: none !important;
}

.about-banner-slot.empty-slot {
  background-color: #f0ede8;
  border: none;
  border-bottom: 1px dashed #dcd6cc;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 21 / 9;
}

.about-banner-empty-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.about-placeholder-icon {
  color: #c4bcb0;
  width: 52px;
  height: 52px;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.about-banner-slot.empty-slot:hover .about-placeholder-icon {
  opacity: 1;
  transform: scale(1.06);
}

.about-banner-img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom !important;
}

.about-banner-link {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

@media (max-width: 768px) {
  .about-banners-wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }

  .about-banners-container {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .about-banner-slot {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .about-banner-slot.empty-slot {
    min-height: 160px;
    aspect-ratio: 16 / 9;
    border-radius: 0 !important;
  }

  .about-placeholder-icon {
    width: 40px;
    height: 40px;
  }
}


/* ==========================================================================
   CHIMINI LUXURY PRODUCT DETAIL PAGE (PDP) STYLES
   ========================================================================== */

.pdp-page-wrapper {
  max-width: var(--max-width, 1400px) !important;
  margin: 0 auto !important;
  padding: 24px 40px 80px 40px !important;
  background-color: var(--bg-primary, #FAF9F6);
  min-height: 80vh;
  box-sizing: border-box !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .pdp-page-wrapper {
    padding: 20px 24px 60px 24px !important;
  }
}

@media (max-width: 768px) {
  .pdp-page-wrapper {
    padding: 16px 16px 50px 16px !important;
  }
}

.pdp-breadcrumb-container {
  margin-bottom: 24px;
}

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #8C827A;
  font-family: var(--font-sans, 'Inter', sans-serif);
  flex-wrap: wrap;
}

.pdp-breadcrumb a {
  color: #8C827A;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pdp-breadcrumb a:hover {
  color: var(--color-gold, #C5A880);
}

.pdp-breadcrumb-sep {
  color: #CFC5BC;
  font-size: 0.75rem;
}

.pdp-breadcrumb-current {
  color: var(--color-text-dark, #2C221E);
  font-weight: 500;
}

/* Two-Column Main Layout */
.pdp-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  margin-bottom: 70px;
}

@media (max-width: 968px) {
  .pdp-main-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left Column: Media Gallery */
.pdp-gallery-column {
  position: sticky;
  top: 100px;
}

@media (max-width: 968px) {
  .pdp-gallery-column {
    position: static;
  }
}

.pdp-main-image-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #F3EFEA;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #EBE4DC;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(44, 34, 30, 0.04);
}

.pdp-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
}

.pdp-main-image-card:hover .pdp-main-image {
  transform: scale(1.04);
}

.pdp-badge-floating {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(44, 34, 30, 0.88);
  backdrop-filter: blur(8px);
  color: #FFF;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.pdp-badge-gold {
  background: linear-gradient(135deg, #C5A880 0%, #A3845B 100%);
  color: #FFF;
}

.pdp-thumbnails-strip {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #D4C9BF transparent;
}

.pdp-thumbnails-strip::-webkit-scrollbar {
  height: 4px;
}

.pdp-thumbnails-strip::-webkit-scrollbar-thumb {
  background-color: #D4C9BF;
  border-radius: 4px;
}

.pdp-thumb-item {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background-color: #F3EFEA;
  transition: all 0.25s ease;
  position: relative;
}

.pdp-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-thumb-item:hover {
  transform: translateY(-2px);
  border-color: #C5A880;
}

.pdp-thumb-item.active {
  border-color: #C5A880;
  box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.3);
}

/* Right Column: Product Information & Actions */
.pdp-info-column {
  display: flex;
  flex-direction: column;
}

.pdp-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pdp-category-tag {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold, #C5A880);
}

.pdp-share-btn-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #E2D9CF;
  color: #6E6259;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pdp-share-btn-top:hover {
  background-color: #F3EFEA;
  border-color: #C5A880;
  color: #2C221E;
}

.pdp-product-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--color-text-dark, #2C221E);
  line-height: 1.25;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .pdp-product-title {
    font-size: 1.85rem;
  }
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}

.pdp-stars {
  color: #D4AF37;
  letter-spacing: 2px;
}

.pdp-rating-val {
  font-weight: 600;
  color: #2C221E;
}

.pdp-rating-count {
  color: #8C827A;
}

.pdp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2E7D32;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: #E8F5E9;
  padding: 3px 10px;
  border-radius: 12px;
}

.pdp-stock-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #2E7D32;
}

/* Price block */
.pdp-price-container {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #EBE4DC;
  border-bottom: 1px solid #EBE4DC;
  margin-bottom: 24px;
}

.pdp-price-current {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-dark, #2C221E);
  font-family: var(--font-sans, 'Inter', sans-serif);
}

.pdp-price-original {
  font-size: 1.15rem;
  color: #A3978E;
  text-decoration: line-through;
}

.pdp-discount-badge {
  background-color: #E8F5E9;
  color: #2E7D32;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

.pdp-tax-note {
  font-size: 0.78rem;
  color: #8C827A;
  margin-left: auto;
}

/* Scent / Variant Selector */
.pdp-variant-section {
  margin-bottom: 24px;
}

.pdp-variant-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4A3E39;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.pdp-variant-title span {
  color: var(--color-gold, #C5A880);
  text-transform: none;
  font-weight: 500;
}

.pdp-swatches-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pdp-swatch-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 24px;
  border: 1px solid #DED5CB;
  background-color: #FFF;
  cursor: pointer;
  font-size: 0.85rem;
  color: #2C221E;
  transition: all 0.2s ease;
}

.pdp-swatch-chip .swatch-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

.pdp-swatch-chip:hover {
  border-color: #C5A880;
  background-color: #FAF8F5;
}

.pdp-swatch-chip.active {
  border-color: #2C221E;
  background-color: #2C221E;
  color: #FFF;
}

.pdp-swatch-chip.active .swatch-color-dot {
  border-color: #FFF;
}

/* Quantity and Action Buttons */
.pdp-actions-wrapper {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .pdp-actions-wrapper {
    flex-direction: column;
  }
}

.pdp-qty-picker {
  display: inline-flex;
  align-items: center;
  border: 1px solid #DED5CB;
  border-radius: 8px;
  background-color: #FFF;
  overflow: hidden;
  height: 52px;
}

.pdp-qty-btn {
  width: 44px;
  height: 100%;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #2C221E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.pdp-qty-btn:hover {
  background-color: #F3EFEA;
}

.pdp-qty-input {
  width: 44px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: #2C221E;
  background: transparent;
}

.pdp-qty-input::-webkit-outer-spin-button,
.pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-add-cart-btn {
  flex: 1;
  height: 52px;
  background: #2C221E;
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 14px rgba(44, 34, 30, 0.12);
}

.pdp-add-cart-btn:hover {
  background: #17110E;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 34, 30, 0.2);
}

.pdp-wishlist-btn-main {
  height: 52px;
  padding: 0 20px;
  background: #FFF;
  border: 1px solid #DED5CB;
  border-radius: 8px;
  color: #4A3E39;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.pdp-wishlist-btn-main:hover {
  border-color: #C5A880;
  background-color: #FAF8F5;
  color: #2C221E;
}

.pdp-wishlist-btn-main.active {
  background-color: #FBF4E8;
  border-color: #C5A880;
  color: #8C6A3D;
}

.pdp-wishlist-btn-main.active svg {
  fill: #8C6A3D;
  stroke: #8C6A3D;
}

/* Value Props Strip */
.pdp-value-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background-color: #F5F1EB;
  border-radius: 8px;
  margin-bottom: 28px;
}

@media (max-width: 600px) {
  .pdp-value-pillars {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pdp-pillar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #4A3E39;
}

.pdp-pillar-icon {
  font-size: 1.1rem;
}

/* Accordion Section */
.pdp-accordion-group {
  border-top: 1px solid #EBE4DC;
}

.pdp-accordion-item {
  border-bottom: 1px solid #EBE4DC;
}

.pdp-accordion-trigger {
  width: 100%;
  padding: 18px 0;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-dark, #2C221E);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif, 'Playfair Display', serif);
  letter-spacing: 0.02em;
}

.pdp-accordion-icon {
  font-size: 1.2rem;
  color: #8C827A;
  transition: transform 0.3s ease;
}

.pdp-accordion-item.open .pdp-accordion-icon {
  transform: rotate(45deg);
}

.pdp-accordion-content {
  display: none;
  padding-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #6E6259;
}

.pdp-accordion-item.open .pdp-accordion-content {
  display: block;
  animation: fadeInDown 0.25s ease forwards;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Below the Fold: You Might Also Like Section */
.pdp-related-section {
  padding-top: 50px;
  border-top: 1px solid #EBE4DC;
}

.pdp-related-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
}

.pdp-related-title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.9rem;
  color: var(--color-text-dark, #2C221E);
  margin: 0 0 6px 0;
  font-weight: 500;
}

.pdp-related-subtitle {
  font-size: 0.9rem;
  color: #8C827A;
  margin: 0;
}

.pdp-related-nav-btns {
  display: flex;
  gap: 10px;
}

.pdp-nav-arrow-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #DED5CB;
  background-color: #FFF;
  color: #2C221E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.pdp-nav-arrow-btn:hover {
  background-color: #2C221E;
  color: #FFF;
  border-color: #2C221E;
}

.pdp-related-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: none;
}

.pdp-related-carousel::-webkit-scrollbar {
  display: none;
}

.pdp-related-card-item {
  flex: 0 0 calc(25% - 18px);
  min-width: 240px;
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .pdp-related-card-item {
    flex: 0 0 calc(33.333% - 16px);
  }
}

@media (max-width: 768px) {
  .pdp-related-card-item {
    flex: 0 0 calc(50% - 12px);
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .pdp-related-card-item {
    flex: 0 0 80%;
  }
}

/* Share Modal Popup */
.pdp-share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(44, 34, 30, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.pdp-share-modal {
  background: #FFF;
  border-radius: 14px;
  max-width: 460px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.pdp-share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pdp-share-header h3 {
  margin: 0;
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 1.25rem;
  color: #2C221E;
}

.pdp-share-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #8C827A;
  cursor: pointer;
}

.pdp-share-product-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background-color: #F8F5F1;
  border-radius: 8px;
  margin-bottom: 18px;
}

.pdp-share-product-preview img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
}

.pdp-share-link-box {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.pdp-share-link-box input {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.85rem;
  border: 1px solid #DED5CB;
  border-radius: 6px;
  background-color: #F8F5F1;
}

.pdp-share-social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pdp-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.pdp-share-btn:hover {
  opacity: 0.9;
}

.pdp-share-btn.share-wa { background-color: #25D366; color: #FFF; }
.pdp-share-btn.share-fb { background-color: #1877F2; color: #FFF; }
.pdp-share-btn.share-tw { background-color: #1DA1F2; color: #FFF; }
.pdp-share-btn.share-em { background-color: #2C221E; color: #FFF; }


/* Ensure Explore badge is removed on collections */
.collection-card-badge {
  display: none !important;
}


/* Hide testimonials stats bar and bottom reviews CTA */
.tg-stats-bar,
.tg-bottom-decor {
  display: none !important;
}


/* ── Live Search Dropdown ── */
.header-search {
  position: relative;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(44, 34, 30, 0.13);
  z-index: 2000;
  display: none;
  animation: fadeIn 0.18s ease-out;
}

.search-dropdown.active {
  display: block;
}

.search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text-primary, #2C221E);
}

.search-dropdown-item:hover {
  background: #FAF8F5;
}

.search-dropdown-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: #f5f0eb;
}

.search-dropdown-item-info {
  flex: 1;
  min-width: 0;
}

.search-dropdown-item-name {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary, #2C221E);
}

.search-dropdown-item-price {
  font-size: 0.76rem;
  color: var(--accent, #8C6A3D);
  margin-top: 2px;
}

.search-dropdown-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #8C6A3D);
  cursor: pointer;
  text-align: center;
  background: #FAF8F5;
  border-radius: 0 0 8px 8px;
}

.search-dropdown-footer:hover {
  background: #f0ebe3;
}

.search-dropdown-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary, #8C827A);
  font-style: italic;
}


/* ==========================================================================
   CUSTOMER AUTH MODAL & PROFILE STYLES
   ========================================================================== */

.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 34, 30, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.auth-modal-card {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(44, 34, 30, 0.25);
  border: 1px solid rgba(197, 168, 128, 0.25);
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 32px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-secondary, #8C827A);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, transform 0.2s;
}

.auth-modal-close:hover {
  color: var(--dark-charcoal, #2C221E);
  transform: scale(1.1);
}

.auth-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-modal-brand {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.4rem;
  letter-spacing: 0.25em;
  color: var(--dark-charcoal, #2C221E);
  font-weight: 600;
  margin-bottom: 4px;
}

.auth-modal-subtitle {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--accent, #8C6A3D);
  text-transform: uppercase;
  margin: 0;
}

/* Gate Notice Banner */
.auth-gate-notice {
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-left: 3px solid var(--accent, #8C6A3D);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: var(--text-primary, #2C221E);
  line-height: 1.4;
}

/* Alert Banner */
.auth-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  margin-bottom: 18px;
  line-height: 1.4;
  text-align: center;
}

.auth-alert.error {
  background: #FFF2F0;
  border: 1px solid #FFCCC7;
  color: #CF1322;
}

.auth-alert.success {
  background: #F6FFED;
  border: 1px solid #B7EB8F;
  color: #389E0D;
}

/* Views & Tabs */
.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
  margin-bottom: 22px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #8C827A);
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: color 0.2s;
}

.auth-tab.active {
  color: var(--dark-charcoal, #2C221E);
  font-weight: 600;
}

.auth-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dark-charcoal, #2C221E);
}

/* Form Groups */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form-group label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-primary, #2C221E);
  text-transform: uppercase;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-forgot-link {
  background: none;
  border: none;
  font-size: 0.72rem;
  color: var(--accent, #8C6A3D);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.auth-form-group input {
  padding: 10px 14px;
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--text-primary, #2C221E);
  background: #FAF8F5;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.auth-form-group input:focus {
  border-color: var(--accent, #8C6A3D);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
}

.auth-hint {
  font-size: 0.72rem;
  color: var(--text-secondary, #8C827A);
  margin-top: 2px;
}

.auth-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-password-wrapper input {
  width: 100%;
  padding-right: 40px;
}

.auth-toggle-pwd {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
  padding: 4px;
}

.auth-toggle-pwd:hover {
  opacity: 1;
}

.auth-submit-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}

.auth-footer-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--text-secondary, #8C827A);
}

.auth-switch-btn,
.auth-text-link {
  background: none;
  border: none;
  color: var(--accent, #8C6A3D);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* OTP Specific UI */
.auth-otp-header {
  text-align: center;
  margin-bottom: 20px;
}

.auth-otp-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.auth-otp-header h3 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.15rem;
  color: var(--dark-charcoal, #2C221E);
  margin-bottom: 6px;
}

.auth-otp-header p {
  font-size: 0.82rem;
  color: var(--text-secondary, #8C827A);
  line-height: 1.4;
}

.otp-inputs-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 20px;
}

.otp-digit {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 600;
  font-family: var(--font-sans, sans-serif);
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: 8px;
  background: #FAF8F5;
  outline: none;
  transition: all 0.2s;
}

.otp-digit:focus {
  border-color: var(--accent, #8C6A3D);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.2);
  transform: translateY(-2px);
}

.auth-resend-wrapper {
  text-align: center;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-secondary, #8C827A);
}

.auth-resend-btn {
  background: none;
  border: none;
  color: var(--accent, #8C6A3D);
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
}

.auth-resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-secondary, #8C827A);
}

.auth-change-email-row {
  text-align: center;
  margin-top: 14px;
}

/* Logged-In Profile UI */
.auth-profile-card {
  text-align: center;
  padding: 20px 10px;
  background: #FAF8F5;
  border-radius: 10px;
  border: 1px solid rgba(197, 168, 128, 0.3);
  margin-bottom: 20px;
}

.auth-avatar-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--dark-charcoal, #2C221E);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 auto 12px;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(44, 34, 30, 0.15);
}

.profile-name {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.1rem;
  color: var(--dark-charcoal, #2C221E);
  margin-bottom: 4px;
}

.profile-email {
  font-size: 0.82rem;
  color: var(--text-secondary, #8C827A);
  margin-bottom: 2px;
}

.profile-phone {
  font-size: 0.8rem;
  color: var(--text-secondary, #8C827A);
  margin-bottom: 10px;
}

.profile-badge-verified {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #389E0D;
  background: #F6FFED;
  border: 1px solid #B7EB8F;
  padding: 3px 10px;
  border-radius: 20px;
}

.profile-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* User account button badge indicator in header */
.user-logged-in-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #52C41A;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
}


/* Auth Alert Info state */
.auth-alert.info {
  background: #FFFBE6;
  border: 1px solid #FFE58F;
  color: #D48806;
}

.auth-toggle-pwd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #8C827A);
  opacity: 0.75;
  z-index: 10;
  pointer-events: auto;
  transition: opacity 0.2s, color 0.2s;
}

.auth-toggle-pwd:hover {
  opacity: 1;
  color: var(--dark-charcoal, #2C221E);
}

.auth-tabs {
  position: relative;
  z-index: 5;
}

.auth-tab {
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}


/* ==========================================================================
   9. MULTI-STEP CHECKOUT & WHATSAPP MODAL STYLES
   ========================================================================== */

.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 34, 30, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.checkout-modal-card {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(44, 34, 30, 0.35);
  border: 1px solid rgba(197, 168, 128, 0.3);
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.checkout-modal-header {
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAF8F5;
}

.checkout-header-title {
  display: flex;
  flex-direction: column;
}

.checkout-brand-title {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  color: var(--dark-charcoal, #2C221E);
  font-weight: 600;
  margin: 0;
}

.checkout-header-subtitle {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent, #8C6A3D);
  text-transform: uppercase;
  margin-top: 2px;
}

.checkout-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-secondary, #8C827A);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.2s, transform 0.2s;
}

.checkout-modal-close:hover {
  color: var(--dark-charcoal, #2C221E);
  transform: scale(1.1);
}

/* Steps Progress Indicator */
.checkout-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
  gap: 16px;
}

.checkout-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #8C827A);
  letter-spacing: 0.04em;
}

.checkout-step-item.active {
  color: var(--dark-charcoal, #2C221E);
  font-weight: 600;
}

.checkout-step-item.completed {
  color: #389E0D;
}

.checkout-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F0EAE1;
  color: var(--text-secondary, #8C827A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.checkout-step-item.active .checkout-step-num {
  background: var(--dark-charcoal, #2C221E);
  color: #FFFFFF;
}

.checkout-step-item.completed .checkout-step-num {
  background: #389E0D;
  color: #FFFFFF;
}

.checkout-step-divider {
  width: 32px;
  height: 1px;
  background: rgba(197, 168, 128, 0.3);
}

/* Modal Body */
.checkout-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.checkout-view {
  display: none;
}

.checkout-view.active {
  display: block;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 768px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.checkout-section-title {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.checkout-form-full {
  grid-column: span 2;
}

@media (max-width: 540px) {
  .checkout-form-grid {
    grid-template-columns: 1fr;
  }
  .checkout-form-full {
    grid-column: span 1;
  }
}

.checkout-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-input-group label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-primary, #2C221E);
  text-transform: uppercase;
}

.checkout-input-group input,
.checkout-input-group select {
  padding: 9px 12px;
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 6px;
  font-size: 0.85rem;
  background: #FAF8F5;
  color: var(--text-primary, #2C221E);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.checkout-input-group input:focus,
.checkout-input-group select:focus {
  border-color: var(--accent, #8C6A3D);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.15);
}

/* Coupon Box */
.checkout-coupon-card {
  background: #FAF8F5;
  border: 1px dashed rgba(197, 168, 128, 0.6);
  border-radius: 8px;
  padding: 14px;
  margin-top: 18px;
}

.checkout-coupon-row {
  display: flex;
  gap: 8px;
}

.checkout-coupon-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 6px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #FFFFFF;
}

.checkout-coupon-btn {
  padding: 8px 16px;
  background: var(--dark-charcoal, #2C221E);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.checkout-coupon-btn:hover {
  background: #44342E;
}

.coupon-active-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F6FFED;
  border: 1px solid #B7EB8F;
  color: #389E0D;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-top: 8px;
}

.coupon-remove-btn {
  background: none;
  border: none;
  color: #CF1322;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* Order Summary Box in Step 1 & 2 */
.checkout-summary-card {
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 10px;
  padding: 18px;
}

.checkout-items-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-right: 4px;
}

.checkout-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.15);
}

.checkout-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: #EAE3D9;
  border: 1px solid rgba(197, 168, 128, 0.2);
}

.checkout-item-info {
  flex: 1;
  min-width: 0;
}

.checkout-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark-charcoal, #2C221E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-item-meta {
  font-size: 0.72rem;
  color: var(--text-secondary, #8C827A);
}

.checkout-item-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-charcoal, #2C221E);
  white-space: nowrap;
}

.checkout-totals-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(197, 168, 128, 0.25);
  font-size: 0.85rem;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary, #8C827A);
}

.checkout-total-row.discount {
  color: #389E0D;
  font-weight: 500;
}

.checkout-total-row.grand-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-charcoal, #2C221E);
  padding-top: 10px;
  border-top: 1px dashed rgba(197, 168, 128, 0.4);
  margin-top: 4px;
}

/* Action Buttons */
.checkout-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn-checkout-primary {
  flex: 1;
  padding: 12px 20px;
  background: var(--dark-charcoal, #2C221E);
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-checkout-primary:hover {
  background: #44342E;
  transform: translateY(-1px);
}

.btn-checkout-whatsapp {
  flex: 1;
  padding: 13px 20px;
  background: #25D366;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-checkout-whatsapp:hover {
  background: #20BA59;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

.btn-checkout-back {
  padding: 12px 18px;
  background: transparent;
  color: var(--text-secondary, #8C827A);
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-checkout-back:hover {
  color: var(--dark-charcoal, #2C221E);
  border-color: var(--dark-charcoal, #2C221E);
}

/* Step 2 Review Specifics */
.checkout-review-box {
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}

.checkout-review-row {
  display: flex;
  margin-bottom: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.checkout-review-row:last-child {
  margin-bottom: 0;
}

.checkout-review-label {
  width: 130px;
  color: var(--text-secondary, #8C827A);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  flex-shrink: 0;
}

.checkout-review-val {
  color: var(--dark-charcoal, #2C221E);
  font-weight: 500;
}

.whatsapp-notice-banner {
  background: #E8F8EE;
  border: 1px solid #A3E5B9;
  border-left: 4px solid #25D366;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: #155724;
  line-height: 1.4;
}

/* Step 3 Confirmation Specifics */
.checkout-confirmation-card {
  text-align: center;
  padding: 24px 16px;
  max-width: 520px;
  margin: 0 auto;
}

.checkout-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E8F8EE;
  color: #25D366;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  border: 2px solid #A3E5B9;
}

.checkout-order-ref {
  font-size: 0.88rem;
  color: var(--accent, #8C6A3D);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.checkout-conf-title {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.35rem;
  color: var(--dark-charcoal, #2C221E);
  margin-bottom: 12px;
}

.checkout-conf-desc {
  font-size: 0.88rem;
  color: var(--text-secondary, #8C827A);
  line-height: 1.5;
  margin-bottom: 24px;
}


/* ==========================================================================
   11. STATIC SUBPAGES (Sustainability, Shipping, FAQ, Store Locator)
   ========================================================================== */

.page-hero-banner {
  background: linear-gradient(135deg, #FAF8F5 0%, #F0EAE1 100%);
  padding: 60px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
  margin-bottom: 40px;
}

.page-hero-subtitle {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent, #8C6A3D);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

.page-hero-title {
  font-family: var(--font-serif, "Playfair Display", "Cinzel", serif);
  font-size: 2.4rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 14px 0;
  line-height: 1.2;
}

.page-hero-desc {
  max-width: 680px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary, #8C827A);
}

/* Sustainability Page */
.sustainability-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.pillar-card {
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(44, 34, 30, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(44, 34, 30, 0.08);
}

.pillar-icon {
  width: 56px;
  height: 56px;
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 18px;
}

.pillar-card h3 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.15rem;
  color: var(--dark-charcoal, #2C221E);
  margin-bottom: 12px;
}

.pillar-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary, #8C827A);
  margin: 0;
}

.eco-stats-banner {
  background: var(--dark-charcoal, #2C221E);
  color: #FFFFFF;
  padding: 40px 20px;
  border-radius: 12px;
  margin: 50px 0;
}

.eco-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  text-align: center;
}

.eco-stat-val {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-light, #E8D8C0);
  margin-bottom: 6px;
}

.eco-stat-label {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #D1C7BD;
}

/* Shipping & Returns Page */
.policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 40px 0;
}

@media (max-width: 768px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }
}

.policy-box {
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 12px;
  padding: 36px 30px;
  box-shadow: 0 4px 20px rgba(44, 34, 30, 0.04);
}

.policy-box h2 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.4rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.policy-step-item:last-child {
  margin-bottom: 0;
}

.policy-step-icon {
  width: 36px;
  height: 36px;
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.policy-step-content h4 {
  font-size: 0.92rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 4px 0;
  font-weight: 600;
}

.policy-step-content p {
  font-size: 0.85rem;
  color: var(--text-secondary, #8C827A);
  line-height: 1.5;
  margin: 0;
}

/* FAQ Page */
.faq-container {
  max-width: 840px;
  margin: 0 auto 60px;
}

.faq-category-header {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.3rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 40px 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent, #8C6A3D);
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-category-header:first-of-type {
  margin-top: 0;
}

.faq-accordion-item {
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.faq-accordion-item.active {
  border-color: var(--accent, #8C6A3D);
  box-shadow: 0 4px 16px rgba(140, 106, 61, 0.08);
}

.faq-question-btn {
  width: 100%;
  padding: 18px 22px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark-charcoal, #2C221E);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 12px;
}

.faq-icon-chevron {
  font-size: 18px;
  color: var(--accent, #8C6A3D);
  transition: transform 0.3s;
}

.faq-accordion-item.active .faq-icon-chevron {
  transform: rotate(180deg);
}

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;
  padding: 0 22px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary, #8C827A);
  background: #FAF8F5;
}

.faq-accordion-item.active .faq-answer-panel {
  max-height: 300px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(197, 168, 128, 0.15);
}

.faq-cta-box {
  background: linear-gradient(135deg, #FAF8F5 0%, #F0EAE1 100%);
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  margin-top: 40px;
}

.faq-cta-box h3 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.25rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 8px 0;
}

.faq-cta-box p {
  font-size: 0.88rem;
  color: var(--text-secondary, #8C827A);
  margin-bottom: 20px;
}

/* Store Locator Page */
.locator-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  margin: 40px 0 60px;
  align-items: start;
}

@media (max-width: 768px) {
  .locator-layout {
    grid-template-columns: 1fr;
  }
}

.locator-card {
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 12px;
  padding: 36px 30px;
  box-shadow: 0 4px 20px rgba(44, 34, 30, 0.04);
}

.locator-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #E8F8EE;
  color: #155724;
  border: 1px solid #A3E5B9;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.locator-card h2 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.5rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 16px 0;
}

.locator-item {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.88rem;
  line-height: 1.5;
}

.locator-icon {
  font-size: 18px;
  color: var(--accent, #8C6A3D);
  flex-shrink: 0;
}

.locator-info strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #8C827A);
  margin-bottom: 2px;
}

.locator-perks-box {
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 12px;
  padding: 30px;
}

.locator-perks-box h3 {
  font-family: var(--font-serif, "Cinzel", serif);
  font-size: 1.2rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 18px 0;
}

.locator-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.locator-perk-item:last-child {
  margin-bottom: 0;
}

.locator-perk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #8C6A3D);
  margin-top: 6px;
  flex-shrink: 0;
}

.locator-perk-text h4 {
  font-size: 0.9rem;
  color: var(--dark-charcoal, #2C221E);
  margin: 0 0 2px 0;
}

.locator-perk-text p {
  font-size: 0.82rem;
  color: var(--text-secondary, #8C827A);
  margin: 0;
  line-height: 1.4;
}


/* Forgot Password & Google OAuth UI */
.auth-forgot-link {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--accent, #8C6A3D);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-weight: 500;
  transition: opacity 0.2s;
}

.auth-forgot-link:hover {
  opacity: 0.8;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0 14px 0;
  color: var(--text-secondary, #8C827A);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(197, 168, 128, 0.3);
}

.auth-divider span {
  padding: 0 12px;
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  background: #FFFFFF;
  color: #3C4043;
  border: 1px solid #DADCE0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.auth-google-btn:hover {
  background: #F8F9FA;
  border-color: #C6C8CA;
  box-shadow: 0 1px 3px rgba(60,64,67, 0.08);
}

.auth-google-btn svg {
  flex-shrink: 0;
}


/* Checkout Validation Alert & Input Error Highlights */
.checkout-alert {
  padding: 10px 14px;
  background-color: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  color: #991B1B;
  font-size: 0.82rem;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: shakeAlert 0.35s ease;
}

@keyframes shakeAlert {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.checkout-input-group input.input-error {
  border-color: #E53E3E !important;
  background-color: #FFF5F5 !important;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15) !important;
}


/* =========================================================
   MOBILE NAVIGATION DRAWER & TOGGLE (DESKTOP HIDDEN)
   ========================================================= */
.mobile-menu-toggle {
  display: none; /* Hidden on desktop by default */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 6px;
  border-radius: 50%;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu-toggle:hover {
  background-color: rgba(197, 168, 128, 0.15);
  color: var(--accent);
}

.mobile-menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* Mobile Nav Drawer Styles */
.mobile-nav-drawer {
  background-color: var(--bg-primary);
  border-left: 1px solid rgba(197, 168, 128, 0.3);
  display: flex;
  flex-direction: column;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
}

.mobile-nav-logo .mobile-logo-img {
  height: 42px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.mobile-nav-content {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background-color: rgba(197, 168, 128, 0.12);
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 20px;
}

.mobile-nav-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(197, 168, 128, 0.3), transparent);
  margin: 16px 0 24px 0;
}

.mobile-nav-extras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  padding: 0 8px;
}

.mobile-extra-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color var(--transition-fast);
}

.mobile-extra-link:hover {
  color: var(--accent);
}

.mobile-nav-concierge {
  margin-top: auto;
  padding-top: 16px;
}

.mobile-concierge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 30px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  transition: all var(--transition-fast);
}

.mobile-concierge-btn:hover {
  background-color: #20BA56;
  transform: translateY(-1px);
}


/* --- FRAGRANCE CONTINUOUS MARQUEE AUTO-SCROLL (> 3 ITEMS) --- */
.categories-scroll-wrapper.marquee-mode {
  overflow: hidden !important;
  position: relative;
  width: 100%;
  padding: 15px 0 25px 0;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.categories-container.marquee-track {
  display: flex !important;
  width: max-content !important;
  min-width: max-content !important;
  justify-content: flex-start !important;
  gap: 40px !important;
  animation: fragranceMarquee 25s linear infinite;
  will-change: transform;
  padding: 0 20px;
}

.categories-container.marquee-track:hover {
  animation-play-state: paused !important;
}

@keyframes fragranceMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 20px));
  }
}

@media (max-width: 768px) {
  .categories-scroll-wrapper.marquee-mode {
    padding: 10px 0 20px 0;
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  }
  .categories-container.marquee-track {
    gap: 24px !important;
    animation: fragranceMarqueeMobile 20s linear infinite;
  }
  @keyframes fragranceMarqueeMobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 12px));
    }
  }
}


/* Desktop default for catalog-toolbar-top */
.catalog-toolbar-top {
  display: contents;
}
.layout-btn-1 {
  display: none; /* Hidden on desktop */
}


/* =========================================================
   CUSTOM COMPACT DROPDOWNS (SORT & FILTER)
   ========================================================= */
.catalog-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.custom-dropdown {
  position: relative;
  display: inline-block;
}

.sort-dropdown {
  flex: 1 1 auto;
}

.filter-dropdown {
  flex: 0 0 auto;
}

.dropdown-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background-color: var(--bg-primary);
  border: 1px solid rgba(197, 168, 128, 0.3);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.dropdown-trigger-btn:hover,
.dropdown-trigger-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(197, 168, 128, 0.15);
}

.filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 4px;
  cursor: pointer;
}

.dropdown-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--text-secondary);
}

[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  background-color: var(--bg-primary);
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.filter-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 180px;
}

.dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.dropdown-option:hover {
  background-color: rgba(197, 168, 128, 0.12);
  color: var(--accent);
}

.dropdown-option.active {
  background-color: rgba(197, 168, 128, 0.2);
  color: var(--accent);
  font-weight: 600;
}

.dropdown-option.active::after {
  content: "✓";
  margin-left: 10px;
  font-size: 0.85rem;
  color: var(--accent);
}


/* =========================================================
   RICH COMPACT FILTER DROPDOWN
   ========================================================= */
.filter-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 290px;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  overflow-y: auto;
  padding: 16px;
  background: #fdfbf7;
  border: 1px solid rgba(197, 168, 128, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  z-index: 1200;
}

.filter-dropdown-menu::-webkit-scrollbar {
  width: 5px;
}
.filter-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(197, 168, 128, 0.5);
  border-radius: 4px;
}

.filter-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(197, 168, 128, 0.25);
}

.filter-menu-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-reset-link {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.filter-reset-link:hover {
  color: var(--primary);
}

.filter-section-block {
  margin-bottom: 14px;
}

.filter-section-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.filter-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.filter-chip:hover {
  border-color: var(--accent);
  background: rgba(197, 168, 128, 0.1);
}

.filter-chip.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 500;
}

.filter-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.filter-price-input {
  width: 100%;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.4);
  border-radius: 4px;
  font-size: 0.76rem;
  font-family: var(--font-sans);
  color: var(--text-primary);
  outline: none;
}
.filter-price-input:focus {
  border-color: var(--accent);
}

.filter-price-separator {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.filter-menu-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(197, 168, 128, 0.25);
}

.filter-apply-btn {
  flex: 1;
  padding: 8px 12px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.filter-apply-btn:hover {
  background: var(--accent);
}

.filter-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
}


/* =========================================================
   GLOBAL VIEWPORT & MOBILE HORIZONTAL OVERFLOW FIX
   (Ensures zero horizontal scroll across all pages & devices)
   ========================================================= */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

.storefront-content,
.main-wrapper,
#app,
.section-container,
.main-footer,
.footer-container,
.header-top,
.main-header,
.announcement-bar,
.hero-slider,
.full-width-banner-section,
.marquee-container,
.fragrance-marquee,
.fragrance-carousel,
.catalog-toolbar,
.catalog-layout,
.about-story-section,
.about-values,
.contact-layout,
.gifts-page-container {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* 1. Global container padding containment */
  .section-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 2. Core Principles & Values grid on About Us and other pages */
  .values-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
  }

  .value-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 20px !important;
  }

  /* 3. Story grid on About page */
  .about-story-grid,
  .about-story-grid.reverse {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-story-image,
  .about-story-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .about-story-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  /* 4. Contact Us page layout */
  .contact-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .luxury-contact-form,
  .contact-info-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 18px !important;
  }

  .luxury-contact-form .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* 5. Gifts and Collections pages */
  .gift-features,
  .collections-page-grid,
  .collections-grid-container,
  .customizer-grid,
  .recipient-tiles-grid,
  .occasion-tiles-grid,
  .gift-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6. PDP Main & Pillar grids */
  .pdp-main-grid,
  .pdp-value-pillars,
  .policy-grid,
  .locator-layout,
  .pillars-grid,
  .certifications-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

/* =========================================================
     MOBILE FOOTER: 2-COLUMN LAYOUT & LEFT-ALIGNED TEXT (<= 768px)
     ========================================================= */
  .main-footer {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 45px 20px 24px !important;
  }

  .footer-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    align-items: start !important;
  }

  /* 1. Brand Info (Full width span across the top of the footer) */
  .footer-col.brand-info {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .brand-info .footer-logo {
    display: inline-block !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }

  .brand-info .footer-logo-img {
    height: 38px !important;
    width: auto !important;
  }

  .footer-desc {
    font-size: 0.84rem !important;
    line-height: 1.6 !important;
    color: rgba(250, 249, 246, 0.75) !important;
    text-align: left !important;
    margin-bottom: 16px !important;
  }

  .social-icons {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* 2. Side-by-Side 2-Column Sections (Quick Links & Shop) */
  .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .footer-col h3 {
    font-size: 1.05rem !important;
    font-family: var(--font-serif) !important;
    color: var(--bg-primary) !important;
    margin-bottom: 14px !important;
    text-align: left !important;
  }

  .footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  .footer-col ul li {
    margin-bottom: 10px !important;
    text-align: left !important;
  }

  .footer-col ul li a {
    font-size: 0.82rem !important;
    color: rgba(250, 249, 246, 0.75) !important;
    text-align: left !important;
    display: inline-block !important;
    transition: color 0.15s ease !important;
  }

  .footer-col ul li a:hover {
    color: var(--accent) !important;
  }

  /* 3. Contact Info Column (Left-aligned & cleanly formatted) */
  .footer-col.contact-info {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .footer-col.contact-info p {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
    color: rgba(250, 249, 246, 0.75) !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }

  .footer-bottom {
    margin-top: 28px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(197, 168, 128, 0.2) !important;
    text-align: center !important;
  }

  .footer-bottom p {
    font-size: 0.75rem !important;
    color: rgba(250, 249, 246, 0.5) !important;
    text-align: center !important;
  }

  /* 8. Fix Sliding Drawers to eliminate offscreen canvas stretching */
  .drawer {
    width: 100% !important;
    max-width: 100vw !important;
    right: 0 !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s !important;
  }

  .drawer.active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* 9. Marquee and hero banners */
  .marquee-track {
    max-width: none !important; /* Allow track to animate smoothly inside hidden container */
  }

  .marquee-container,
  .fragrance-marquee,
  .full-width-banner-section {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}


@media (max-width: 768px) {
  /* Override the 3-column grid - hide all cards by default on mobile */
  .tg-grid {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .tg-card {
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    animation: none !important;
    transition: opacity 0.5s ease !important;
  }

  .tg-card.mobile-active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Dot indicators for mobile testimonial slider */
  .tg-mobile-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }

  .tg-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(197, 168, 128, 0.3) !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    border: none !important;
    padding: 0 !important;
  }

  .tg-dot.active {
    background: var(--accent, #c5a880) !important;
    transform: scale(1.25) !important;
  }
}

@media (min-width: 769px) {
  /* On desktop, hide the dot indicators */
  .tg-mobile-dots {
    display: none !important;
  }
}


/* --- OUT OF STOCK BADGES & BUTTONS --- */
.product-badge.out-of-stock,
.badge-out-of-stock {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35) !important;
}

.btn-out-of-stock,
.product-card-btn.btn-out-of-stock,
.add-to-cart-btn.btn-out-of-stock,
.product-cart-overlay-btn.btn-out-of-stock {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #f8fafc !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
}

.pdp-add-cart-btn.pdp-btn-out-of-stock,
.pdp-btn-out-of-stock {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
  box-shadow: none !important;
}

.pdp-qty-picker.disabled {
  opacity: 0.5;
  pointer-events: none;
  background-color: #f1f5f9;
}

.pdp-stock-status.out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc2626;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.pdp-stock-status.out-of-stock .pdp-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #dc2626;
}

.product-card.is-out-of-stock .product-image-main,
.product-card.is-out-of-stock .product-image-hover {
  opacity: 0.85;
}