/* ==========================================================================
   SOUL AURUM GLOBAL STYLES (GOLDEN MASTER)
   
   1.  CONFIGURATION ...... Variables, Fonts, Resets
   2.  TYPOGRAPHY ......... Headings, Body Text
   3.  UI PATTERNS ........ Buttons, Inputs, Cards, Animations
   4.  GLOBAL LAYOUT ...... Nav, Footer, Cart Drawer, Toast
   5.  PAGE: HOME ......... Hero, Features, Newsletter
   6.  PAGE: SHOP ......... Grids, Sidebar, Filters
   7.  PAGE: PRODUCT ...... Gallery, Details, Accordions
   8.  PAGE: JOURNAL ...... Blog Grid, Reading Layout
   9.  PAGE: CHECKOUT ..... Forms, Summary
   10. PAGE: STANDARDS .... Hero, Woodcut Icons
   11. RESPONSIVE ......... Mobile & Tablet Overrides
   ========================================================================== */

/* =========================================
   1. CONFIGURATION
   ========================================= */

/* Prevent Flash of Unstyled Content (FOUC) */
[x-cloak] {
  display: none !important;
}

/* Hide component containers until injected */
#global-nav:empty,
#global-footer:empty,
#cart-drawer:empty {
  opacity: 0;
  visibility: hidden;
  min-height: 0;
}

/* Reserve space for nav to prevent layout shift */
#global-nav {
  min-height: 80px;
}

/* Prevent hero pop-in on all pages */
header[class*="hero"],
header[class*="-hero"] {
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}

/* Fade in main content after hero */
body > main {
  opacity: 0;
  animation: heroFadeIn 0.5s ease-out 0.3s forwards;
}

#global-nav:not(:empty),
#global-footer:not(:empty),
#cart-drawer:not(:empty) {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes footerFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}

/* DT Nouveau Font Definition */
@font-face {
  font-family: 'DT Nouveau';
  src: url('../assets/fonts/dtnouveau-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Stardom removal — using DT Nouveau as the replacement. */
.stardom-title {
  font-family: "DT Nouveau", serif !important;
}
[style*="DT Nouveau"] {
  font-family: "DT Nouveau", serif !important;
}

/* Remove all focus outlines */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  color-scheme: light;
  font-size: 14.5px;

  /* --- PALETTE --- */
  --pico-background-color: #eaebef; /* Ancestral Cream */
  --pico-color: #1a2e22; /* Deep Forest Green */
  --pico-muted-color: #5c6f66; /* Sage Grey */
  --surface-color: #fff; /* Card/panel/dropdown surfaces */
  --surface-dim: #f3f4f6; /* Slightly dimmed surface */
  --surface-warm: #f9f6e6; /* Warm cream surface */
  --border-light: var(--border-light); /* Subtle borders */

  /* --- Pico Color Variables (Overwritten for Soul Aurum) --- */
  --pico-muted-border-color: #202632;
  --pico-primary: #292929; /* Charcoal */
  --pico-primary-background: #e6e6fa; /* Lavender */
  --pico-primary-border: #8d77ab; /* Lavender Border */
  --pico-primary-underline: #5b21b680; /* Deep Purple Underline */
  --pico-primary-hover: #5b21b6; /* Deep Purple */
  --pico-primary-hover-background: #e6e6fa; /* Lavender */
  --pico-primary-hover-border: #5b21b6;
  --pico-primary-hover-underline: #5b21b6;
  --pico-primary-focus: #5a21b560;
  --pico-primary-inverse: #f8fafc; /* Moonlight */
  --pico-secondary: #5c6f66; /* Sage Grey */
  --pico-secondary-background: var(--pico-primary) /* Mint */
  --pico-secondary-border: #daece1;
  --pico-secondary-underline: rgba(218, 236, 225, 0.5);
  --pico-secondary-hover: #166534; /* Deep Green */
  --pico-secondary-hover-background: var(--pico-primary);
  --pico-secondary-hover-border: #daece1;
  --pico-secondary-hover-underline: #166534;
  --pico-secondary-focus: rgba(218, 236, 225, 0.25);
  --pico-secondary-inverse: #fff;
  --pico-contrast: #dfe3eb;
  --pico-contrast-background: #eff1f4;
  --pico-contrast-border: #eff1f4;
  --pico-contrast-underline: rgba(223, 227, 235, 0.5);
  --pico-contrast-hover: #fff;
  --pico-contrast-hover-background: var(--surface-color);
  --pico-contrast-hover-border: #fff;
  --pico-contrast-hover-underline: #fff;
  --pico-modal-overlay-background-color: rgba(41, 41, 41, 0.6);
  --pico-form-element-focus-color: var(--pico-primary);
  


  /* --- Global Toast Containers --- */
  .sa-toast-container-top-right {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 10000;
    pointer-events: none; /* Container passes clicks */
  }

  .sa-toast-container-bottom-right {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 10000;
    pointer-events: none;
  }

  /* --- Global Layout Toast Items --- */
  .sa-toast-base {
    position: relative !important; /* Changed from fixed */
    pointer-events: auto; /* Re-enable clicks on items */
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .sa-toast-standard {
    /* Removed top/right fixed positioning */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--pico-primary-background);
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    
    /* Glow Effect similar to Luxury Cart Toast */
    box-shadow: 
      0 0 0 1px rgba(0, 0, 0, 0.2),
      0 10px 30px -5px rgba(0, 0, 0, 0.5),
      0 0 15px rgba(212, 175, 55, 0.1);
      
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    min-width: 280px;
    gap: 1rem;
    transition: all 0.3s ease;
  }

  .sa-toast-cart {
    /* Removed bottom/right fixed positioning */
    /* Sleek Dark Frosted Look - More Opaque */
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: var(--pico-primary-background);
    padding: 1.5rem 2rem; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; 
    /* Glow Effect */
    box-shadow: 
      0 0 0 1px rgba(0, 0, 0, 0.2),
      0 15px 40px -10px rgba(0, 0, 0, 0.6),
      0 0 25px rgba(212, 175, 55, 0.1); 
    
    font-size: 1rem; 
    font-weight: 600;
    letter-spacing: 0.03em;
    min-width: 280px;
    gap: 1rem;
    display: flex; 
    flex-direction: row; 
    justify-content: center;
    align-items: center; 
    text-align: left;
    gap: 1rem;
    
    /* Smoothness */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Clickable variant — cursor + hover glow */
  .sa-toast-cart--clickable {
    cursor: pointer;
  }

  .sa-toast-cart--clickable:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.4),
      0 20px 50px -10px rgba(0, 0, 0, 0.7),
      0 0 30px rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.3);
    filter: brightness(1.08);
  }

  .sa-toast-cart--clickable:active {
    transform: scale(0.99);
    filter: brightness(0.95);
  }
  
  /* Additional safety for containers */
  .sa-toast-container-bottom-right, 
  .sa-toast-container-bottom-right > div {
    overflow: visible !important;
  }

  /* Wishlist Remove Toast */
  .sa-toast-wishlist-remove {
    /* Removed top/right fixed positioning */
    background: var(--pico-primary-background);
    color: var(--pico-primary);
    padding: 1rem 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    min-width: 280px;
    gap: 1rem;
  }

  /* --- HEADINGS --- */
  --pico-h1-color: #0f1a13;
  --pico-h2-color: #1a2e22;
  --pico-h3-color: var(--pico-primary);
  --pico-h4-color: var(--pico-background-color);

  h1, h2,
  .font-display,
  .page-hero-title,
  .section-title {
    font-family: 'DT Nouveau', serif !important;
    font-weight: 400;
  }

  h3, h4, h5, h6,
  .card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
  }

  /* --- ACCENTS --- */
  --pico-primary: #292929; /* Charcoal */
  --pico-primary-background: #e6e6fa;
  --pico-primary-border: #8d77ab;
  --pico-primary-hover: #5b21b6; /* Deep Purple */
  --pico-primary-inverse: #f8fafc; /* Moonlight */
  --pico-primary-hover-border: pico(--pico-primary-hover);
  --pico-primary-hover-background: pico(--pico-primary-hover);


}

/* Standard Global Checkbox Aesthetics */
input[type="checkbox"], 
.sa-massive-checkbox {
  accent-color: rgba(41, 41, 41, 0.85) !important;
  cursor: pointer;
}

/* --- MODERN ELEGANT SWITCH (Restyle) --- */
input[type="checkbox"][role="switch"] {
  --switch-width: 38px;
  --switch-height: 20px;
  --switch-knob-size: 16px;
  --switch-bg: rgba(0, 0, 0, 0.1);
  --switch-bg-active: var(--pico-primary);
  
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative;
  width: var(--switch-width) !important;
  height: var(--switch-height) !important;
  background: var(--switch-bg) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  outline: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

input[type="checkbox"][role="switch"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: var(--switch-knob-size);
  height: var(--switch-knob-size);
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="checkbox"][role="switch"]:checked {
  background: var(--switch-bg-active) !important;
  border-color: var(--pico-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

input[type="checkbox"][role="switch"]:checked::after {
  left: calc(var(--switch-width) - var(--switch-knob-size) - 3px);
  background: #fff !important;
}

input[type="checkbox"][role="switch"]:focus {
  box-shadow: 0 0 0 2px rgba(91, 33, 182, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

input[type="checkbox"][role="switch"]:hover {
  filter: brightness(0.95);
}

/* --- DARK MODE DISABLED — Force Light Mode on all devices --- */

header {
  background-color: var(--pico-background-color) !important;
}

footer {
  background-color: var(--pico-background-color) !important;
}

/* --- Colors for order status cards --- */

.status-pending {
  background-color: #f9e892;
  color: #fda88c;
}
.status-processing {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary);
}
.status-completed {
  background-color: #daece1;
  color: #166534;
}
.status-cancelled {
  background-color: #fda88c;
  color: #991b1b;
}

/* --- Colors for supply level buttons --- */

.supply-btn {
  padding: 0.5rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.supply-btn:hover {
  opacity: 1 !important;
  filter: grayscale(0) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.supply-100 {
  background-color: #daece1 !important;
  color: #166534 !important;
  border-color: #166534 !important;
}
.supply-75 {
  background-color: var(--pico-primary-background) !important;
  color: var(--pico-primary) !important;
  border-color: var(--pico-primary) !important;
}
.supply-50 {
  background-color: #f9e892 !important;
  color: #854d0e !important;
  border-color: #854d0e !important;
}
.supply-25 {
  background-color: #fda88c !important;
  color: #991b1b !important;
  border-color: #991b1b !important;
}

/* --- Stripe Elements (Checkout) --- */
.stripe-card-wrapper {
  background: var(--border-light);
  padding: 1.5rem;
  border-radius: 6px;
}

.stripe-card-element {
  padding: 0.85rem 0.9rem;
  background: var(--surface-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
}

/* --- Progress bar supply level colors --- */
progress.supply-100::-webkit-progress-value {
  background-color: #166534;
}
progress.supply-100::-moz-progress-bar {
  background-color: #166534;
}
progress.supply-100 {
  color: #166534;
}

progress.supply-75::-webkit-progress-value {
  background-color: var(--pico-primary);
}
progress.supply-75::-moz-progress-bar {
  background-color: var(--pico-primary);
}
progress.supply-75 {
  color: var(--pico-primary);
}

progress.supply-50::-webkit-progress-value {
  background-color: #854d0e;
}
progress.supply-50::-moz-progress-bar {
  background-color: #854d0e;
}
progress.supply-50 {
  color: #854d0e;
}

progress.supply-25::-webkit-progress-value {
  background-color: #991b1b;
}
progress.supply-25::-moz-progress-bar {
  background-color: #991b1b;
}
progress.supply-25 {
  color: #991b1b;
}

/* =========================================
   2. TYPOGRAPHY & TEXTURE
   ========================================= */
html {
    height: 100%;
    overflow-y: scroll; /* Force scrollbar */
}
body {
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  /* height: auto !important; remove conflict */
  /* overflow-y: auto !important; remove conflict */
  position: relative; 

  /* 1. Base Color */
  background-color: var(--pico-background-color);
}

/* =========================================
   3. UI PATTERNS (The "Design System")
   ========================================= */

/* --- Category Drag-and-Drop (Admin) --- */
.category-row {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.category-row.is-dragging {
  opacity: 0.6;
  transform: scale(0.99);
}

.category-row.is-drop-target {
  outline: 2px dashed var(--pico-primary);
  outline-offset: 3px;
  background-color: rgba(91, 33, 182, 0.08);
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* --- A. BUTTONS (Unified Pattern) --- */
/* Base Style for ALL Buttons */
.add-btn,
.card-btn,
.hero-btn,
.newsletter-btn,
.quantity-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  background-color: var(--pico-primary);
  color: var(--pico-primary);
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  padding: 0.8rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Close Button Variable */
.close {
  color: var(--pico-primary) !important;
  opacity: 100% !important;
}

/* Variant 1: Primary (Dark Green) - Used for 'Add to Cart', 'Submit' */
.add-btn {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary);
}
.add-btn:hover {
  transform: translateY(-2px);
  color: var(--pico-primary);
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 0 25px rgba(196, 181, 253, 0.6);
}

/* Product modal tab button active state */
.tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem;
  white-space: nowrap;
}
.tab-btn--active {
  background-color: var(--pico-primary) !important;
  color: white !important;
  border-color: var(--pico-primary) !important;
}
.tab-btn--active img {
  filter: brightness(0) invert(1);
}

.outline {
  background: none;
  box-shadow: none;
  border: 2px solid var(--pico-primary);
  color: var(--pico-primary);
}

.outline:hover {
  background-color: var(--pico-primary);
  transform: scale(1.01) translateY(-2px);
  box-shadow: 0 0 15px var(--pico-primary-background);
  color: var(--pico-primary-background) !important;
  border: 2px solid var(--pico-primary);
}

.outline:active {
  background-color: var(--pico-primary);
  transform: scale(1.01) translateY(-2px);
  box-shadow: 0 0 15px var(--pico-primary-background);
  color: var(--pico-primary-background);
  border: 2px solid var(--pico-primary);
} 


.activeType {
  background-color: var(--pico-primary);
  color: var(--pico-primary-background);
  box-shadow: 0 0 10px var(--pico-primary-background);
  border-color: var(--pico-primary);
}

.secondary {
  background-color: var(--pico-background-color) !important;
  color: var(--pico-primary);
}

.secondary:hover {
  color: var(--pico-primary);
  transform: scale(1.02) translateY(-2px);
}


/* Wishlist Button */
.wishlist-active {
  background-color: rgba(220, 38, 38, 0.1) !important;
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

.wishlist-active:hover {
  background-color: #af5050 !important;
  color: white !important;
  border-color: #af5050 !important;
}

/* Variant 2: Accent (Lavender) - Used inside Cards, Newsletter */
.card-btn,
.newsletter-btn {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary);
  width: 100%; /* Full width for cards */
}

.cancel-btn {
  background-color: #fda88c;
  color: var(--pico-primary);
  border-radius: 3px !important;
  border-color: var(--pico-primary);
}

.start-btn {
  background-color: #daece1;
  color: var(--pico-primary);
  border-radius: 3px !important;
}

.card-btn:hover,
.newsletter-btn:hover {
  color: var(--pico-primary-hover);
  box-shadow: 0 4px 12px rgba(91, 33, 182, 0.3);
  transform: translateY(-2px);
}

/* Variant 3: Hero (Light) - Used on Dark Backgrounds */
.hero-btn {
  background-color: #e6e6fa;
  color: #4c1d95;
  font-size: 0.9rem;
  padding: 1rem 2.5rem;
}
.hero-btn:hover {
  background-color: var(--surface-color);
  color: var(--pico-primary-hover);
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 0 25px rgba(196, 181, 253, 0.6);
}

/* Variant 4: Icon/Ghost - Quantity Selectors */
.quantity-btn {
  background: none;
  box-shadow: none;
  color: var(--pico-h1-color);
  font-size: 1.5rem;
  padding: 0 0.8rem;
}
.quantity-btn:hover {
  color: var(--pico-primary-hover);
  transform: none;
  background: none;
  transform: scale(1.5);
}

/* --- D. PAGE HERO (Standard Banner) --- */
.page-hero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 6rem 0; /* Clean vertical spacing */
  background-color: var(--pico-muted-color); /* Fallback */
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) sepia(0.2); /* The "Antique" filter */
  z-index: 0;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 1rem;
  max-width: 800px;
}

.page-hero-title {
  font-family: "DT Nouveau";
  font-size: 3.5rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.page-hero-sub {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  opacity: 0.95;
  color: #f9f6e6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVE: Fix for Mobile */
@media (max-width: 768px) {
  .page-hero {
    height: 250px; /* Shorter on phones */
    margin: 4rem 0;
  }
  .page-hero-title {
    font-size: 2rem;
  }
  .page-hero-sub {
    font-size: 0.9rem;
  }
}

/* --- B. INPUTS (Luxury Underline Style) --- */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.search-input,
.newsletter-form input {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.5rem !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif;
  color: var(--pico-primary) !important;
  transition: border-color 0.3s ease;
}

.input[type="file"]  {
  background-color: var(--pico-primary) !important;
  color: var(--pico-primary-background) !important;
}

label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-muted-color);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

/* --- C. CARDS (Seamless, Full Bleed, No Underlines) --- */
.product-card {
  display: flex;
  flex-direction: column;

  /* 1. MATCH BACKGROUND: Transparent lets your "Ancestral Cream" texture show through */
  background: transparent;

  border: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
}

/* 2. NO UNDERLINES: Force removal of all link decorations */
.product-card a,
.product-link {
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit;
}

/* Hover Effect: Simple lift, no color change */
.product-card:hover {
  transform: translateY(-5px);
  /* Optional: A very soft shadow to lift it off the "paper" */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.05));
  z-index: 2;
}

/* 3. FULL FILL IMAGES */
.card-figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: transparent;

  /* KEY CHANGE: 0 padding so image hits the edges */
  padding: 0;
}

.card-img {
  width: 100%;
  height: 100%;

  /* KEY CHANGE: 'cover' forces the image to fill every pixel of the box */
  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}

/* Hover Zoom */
.product-card:hover .card-img {
  transform: scale(1.05);
}

.card-img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure hover image also fills */
  padding: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

/* Typography */
.card-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--pico-color);
  margin: 1.5rem 0 0.2rem 0; /* Spacing below image */
  line-height: 1.2;
}

.card-price {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  margin: 0 0 1rem 0;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Hide Rating */
.card-rating {
  display: none;
}

/* The "ADD" Bar */
.card-btn {
  margin-top: auto;
  background-color: rgb(37, 37, 37, .85) !important;
  width: 100%;
  border-radius: 0;
  color: var(--pico-primary-background) !important;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  padding: 1rem 0;
  text-align: center;
  border: none;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.product-card:hover .card-btn {
  opacity: 1;
  transform: translateY(0);
  background-color: var(--pico-primary-background) !important;
  color: #292929 !important;
}

@media (max-width: 768px) {
  .card-btn {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Wishlist Icon --- */
.wishlist-icon {
  transition: all 0.2s ease;
  opacity: 0.6;
}

.wishlist-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

.wishlist-icon-active {
  opacity: 1;
}

.wishlist-icon-active:hover {
  transform: scale(1.15);
}

/* --- Ingredient Tooltip --- */
.ing-wrapper {
  position: relative;
  display: inline-block;
}

.ing-link {
  text-decoration: underline;
  text-decoration-style: dotted; /* Subtle dotted line indicates "Hover me" */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  color: var(--pico-color);
  cursor: help;
  transition: color 0.2s;
}
.ing-link:hover {
  color: var(--pico-primary);
}

.ing-tooltip {
  position: absolute;
  bottom: 100%; /* Sits above the text */
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: var(--surface-color);
  border: 1px solid var(--border-light);
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 100;
  margin-bottom: 12px; /* Gap between text and box */
  text-align: left;
  pointer-events: none; /* Let clicks pass through to the link */
}

/* Little arrow pointing down */
.ing-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* --- Universal Accordion Slider (No Plugin Needed) --- */
.accordion-slider {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Luxury ease */
}

.accordion-slider.open {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
  /* Basic padding/styling fixes */
  opacity: 0;
  transition: opacity 0.5s ease;
}

.accordion-slider.open .accordion-inner {
  opacity: 1;
}

/* =========================================
   4. GLOBAL LAYOUT
   ========================================= */





.icon-img {
  width: 1rem;
  height: 1rem;
}

/* --- A. NAVIGATION (3-Row Masthead) --- */
.nav-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  z-index: 1000;
  width: 100%;
}

/* Navbar Width Fix for Mid-range screens */
@media (max-width: 1280px) {
  .nav-container .container {
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.nav-row-utility {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.utility-right {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 1.5rem !important;
  align-items: center !important;
}

.utility-item {
  color: #2e1065;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1em;
}

.utility-item:hover {
  opacity: 0.7;
}

.nav-row-main {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  min-height: 70px;
}

.nav-logo-block {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    height: 55px; /* Scaled up */
    text-decoration: none;
}

.logo-icon {
    height: 100%;
    width: auto;
    padding: 0.1rem; /* Tightened padding for larger presence */
}

.logo-text {
    height: 20px; /* Scaled up to match */
    width: auto;
}

.nav-row-categories {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(46, 16, 101, 0.05);
}

.cat-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #2e1065;
    text-decoration: none;
    transition: opacity 0.2s;
}

.cat-link:hover {
    opacity: 0.6;
}

/* Desktop Search */
.nav-col-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.search-bar-clean {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  border: 1px solid var(--pico-primary);
  border-radius: 99px;
  padding: 0 0.5rem;
  background-color: var(--pico-background-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.search-bar-clean input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}

.search-bar-clean input:focus {
  border: none !important;
  box-shadow: none !important;
}
.search-btn {
  background: none;
  border: none;
  padding: 0;
  margin-right: 1rem;
  display: flex;
  width: auto !important;
  margin-bottom: 0 !important;
  align-items: center;
  color: var(--pico-h1-color);
  cursor: pointer;
  box-shadow: none;
}
.search-btn:hover {
  transform: none;
  box-shadow: none;
  background: none;
  color: var(--pico-primary);
}
.search-wrapper-global {
  max-width: 380px;
  width: 100%;
}
.search-input {
  margin-top: 0;
  width: 100%;
  color: var(--pico-primary) !important;
  opacity: 1 !important;
}

/* Admin search bar wrapper */
.search-bar-wrapper {
  display: flex;
  border: 1px solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  width: 100%;
}

.search-bar-inventory {
  display: flex;
  align-items: center;
  width: 100%;
}

.search-bar-wrapper .search-input {
  border: none;
  border-radius: 0;
  flex: 1;
  padding: 0.5rem;
  width: auto;
  margin-top: 0;
}

.search-bar-wrapper .search-btn {
  background: var(--pico-background-color);
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  font-size: 1rem;
}

.search-bar-wrapper .search-btn:hover {
  background: var(--pico-primary-border);
}

/* Desktop Logo */
.nav-col-center {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-logo-block {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 200px;
  height: 50px;
}

.logo-icon {
  height: 38px;
  width: auto;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0.8);
}

.logo-text {
  height: 18px;
  width: auto;
  opacity: 1;
  transition: all 0.3s ease;
}

.nav-logo-block:hover .logo-icon {
  opacity: 1;
  transform: scale(1);
}

.nav-logo-block:hover .logo-text {
  opacity: 0;
  transform: scale(1.1);
}

/* Mobile: Just Logo Icon */
@media (max-width: 768px) {
  .logo-text {
    display: none !important;
  }
  .logo-icon {
    position: relative !important;
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}

/* Desktop Links */
.nav-col-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}
.info-links-list {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-links-list li a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-color);
  text-decoration: none;
  font-weight: 500;
}
.info-links-list li a:hover {
  color: var(--pico-primary);
}

/* --- Dropdown Menu Styling --- */
.nav-dropdown-parent {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-link-item {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-color);
  text-decoration: none;
  font-weight: 500;
  padding: 1rem 0; /* Increase touch target/hover area */
  cursor: pointer;
}
.nav-link-item:hover {
  color: var(--pico-primary);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: -75%; /* Aligns to right edge of "Insight" */
  width: 200px;
  background: var(--pico-background-color);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 0.5rem 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  margin-top: -10px; /* Slight overlap to prevent mouse gap */
}

.nav-dropdown-menu a {
  margin-top: 0.5rem;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  font-family: "DT Nouveau"; /* Use your brand font for submenu */
  font-size: 1rem;
  color: #2e1065;
  transition: all 0.2s;
  text-align: left;
}

.nav-dropdown-menu a:hover {
  background: var(--pico-primary-background);
  color: var(--pico-primary);
  padding-left: 1.8rem; /* Subtle slide effect */
}


/* --- Smart Navbar (Scroll Reveal) --- */
.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--pico-background-color);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.nav-container.nav-hidden {
  transform: translateY(-100%);
}
.nav-container.nav-visible {
  transform: translateY(0);
}

/* Ensure Logo Block scales correctly in fixed container */
.nav-logo-block {
    /* ... existing styles ... */
}

/* Desktop Categories */
.nav-row-categories {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-light);
  margin-bottom: 0;
}
.cat-link {
  font-family: "DT Nouveau";
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pico-color);
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.2s;
}
.cat-link:hover {
  opacity: 1;
  color: var(--pico-primary);
  transform: translateY(-1px);
}
.cat-link.main-cat {
  font-weight: bold;
}

/* --- Search Dropdown --- */
.search-wrapper-global {
  position: relative;
  width: 100%;
}
.search-preview-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  background: var(--surface-color);
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0.5rem 0;
  z-index: 1100;
  margin-top: 10px;
}
.preview-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.preview-item:hover {
  background: rgba(26, 46, 34, 0.03);
}
.preview-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface-warm);
}
.preview-title {
  font-family: "DT Nouveau";
  font-size: 0.95rem;
  color: #2e1065;
  line-height: 1.2;
}
.preview-meta {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  text-transform: uppercase;
  margin-top: 2px;
}
.preview-empty {
  padding: 1rem;
  text-align: center;
  color: var(--pico-muted-color);
  font-style: italic;
  font-size: 0.9rem;
}
.preview-footer {
  display: block;
  text-align: center;
  padding: 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-primary);
  text-decoration: none;
  font-weight: bold;
  background: rgba(26, 46, 34, 0.02);
}
/* --- B. MOBILE & TABLET NAVBAR --- */
/* Elements hidden by default, shown via Media Query */
.mobile-bar {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  height: 80px;
}
/* --- B2. MOBILE MENU OVERLAY --- */

/* Buttons (mobile bar) */
.mobile-menu-btn,
.mobile-cart-btn {
  background: none;
  border: none;
  color: var(--pico-h1-color);
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none;
}
.mobile-menu-btn:hover,
.mobile-cart-btn:hover {
  background: none;
  transform: none;
  color: var(--pico-primary);
}
.mobile-logo img {
  height: 40px;
  width: auto;
}
.mobile-cart-count {
  background: var(--pico-color);
  color: var(--pico-background-color);
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

/* Full-Screen Overlay */
.admin-more-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white !important;
  z-index: 999999 !important; /* Extreme z-index to dominate all stacking contexts */
  display: flex;
  flex-direction: column;
}

.admin-more-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4rem 1.5rem 6rem 1.5rem; /* Increased top padding to clear overlaps */
  overflow-y: auto;
}

.admin-more-header h2 {
  color: var(--pico-color) !important;
  margin: 0;
}

.admin-more-close {
  background: none;
  border: none;
  color: var(--pico-color);
  padding: 0.5rem;
  cursor: pointer;
}

.admin-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.admin-more-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  text-decoration: none;
  color: #334155;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.admin-more-card:active {
  background: #f1f5f9;
  transform: scale(0.98);
}

.admin-more-card.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}

.admin-more-card svg {
  color: #64748b;
}

.admin-more-card.active svg {
  color: #3b82f6;
}

.admin-more-footer {
  margin-top: auto;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.footer-wide {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid var(--pico-border-color);
}
/* Full-Screen Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 8, 32, 0.95); /* Deep obsidian curtain */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow-anchor: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Overlay Header: Close (left) + Menu (right) */
.mobile-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}
.mobile-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.5rem 0;
  box-shadow: none;
}
.mobile-close-btn:hover {
  background: none;
  transform: none;
  color: #fff;
}
.mobile-overlay-title {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-overlay-title::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
}

/* Menu Content Area */
.mobile-menu-content {
  padding: 2rem 2rem 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
}

/* Link Groups */
.mobile-menu-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-menu-group a {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
  padding: 0.15rem 0;
  transition: opacity 0.2s;
}
.mobile-menu-group a:hover {
  opacity: 0.7;
}

/* Smaller groups (tertiary, account) */
.mobile-menu-group-sm a {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}
.mobile-menu-group-sm a:hover {
  color: #fff;
  opacity: 1;
}/* [PURGED: .site-footer] */


/* --- CONTACT PAGE SPECIFIC --- */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-form-inner {
  width: 100%;
  margin: 0;
}

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

/* Contact page visuals */
.contact-section .stardom-title {
  margin-bottom: 1.5rem;
}
.contact-section .lead {
  font-size: 1.12rem;
  color: var(--pico-muted-color);
  margin-bottom: 1.5rem;
}
.contact-info h2 {
  margin-top: 0;
}
.contact-info ul {
  list-style: none;
  padding: 0;
}
.contact-info li {
  margin-bottom: 0.6rem;
}

/* Form Card */
.contact-form-inner {
  padding: 0;
}
.contact-form-inner form {
  margin-top: 0.5rem;
  background: var(--pico-background-color);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(26, 46, 34, 0.04);
}
.contact-form-inner .add-btn {
  width: 100%;
}

@media (max-width: 768px) {
  .contact-form-inner form {
    padding: 1rem;
  }
}

/* Contact hero */
.contact-hero {
  /* use standards styling but allow overriding the background image */
  position: relative;
  background-image: url('/assets/images/contact/contact-hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 30vh;
  display: flex;
  align-items: center;
  padding: 5rem 1rem;
  color: #fff;
  border-radius: 0 0 1.5rem 1.5rem;
  margin-bottom: 3rem;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}
.contact-hero .standards-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.contact-hero .standards-title {
  color: #fff;
}
.contact-hero .standards-subtitle {
  color: rgba(255,255,255,0.9);
}
.contact-hero .page-hero-sub {
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.25rem;
  font-size: 1rem;
}

/* --- D. CART DRAWER --- */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(18, 8, 32, 0.9); /* Deep obsidian curtain */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: white;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--pico-background-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cart-heading-text {
  font-family: "DT Nouveau", serif;
  font-size: 1.8rem;
  color: var(--pico-primary);
  margin: 0;
  font-weight: 600;
}

.cart-close-btn {
  background: none;
  border: none;
  color: var(--pico-primary);
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s;
  box-shadow: none;
}

.cart-close-btn:hover {
  opacity: 1;
  background: none;
  transform: scale(1.1);
}

.cart-items-area {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}

.cart-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cart-empty-state p {
  font-family: "DT Nouveau", serif;
  font-size: 1.8rem;
  color: var(--pico-muted-color);
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cart-item-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.2rem;
  align-items: start;
}

.cart-thumb {
  width: 100px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

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

.cart-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cart-title {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: var(--pico-primary);
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.cart-price {
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.5rem;
}

.cart-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0;
  overflow: hidden;
}

.qty-selector button {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  color: var(--pico-primary);
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: none;
  line-height: 1;
}

.qty-selector button:hover {
  background: rgba(0, 0, 0, 0.03);
}

.qty-selector span {
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  color: var(--pico-color);
}

.cart-remove-link {
  background: none;
  border: none;
  padding: 0;
  color: #ef4444;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.cart-remove-link:hover {
  opacity: 1;
  background: none;
  text-decoration: underline;
}

/* Removal Confirmation Popover */
.cart-remove-wrapper {
  position: relative;
}

.cart-confirm-popover {
  position: absolute;
  bottom: 110%; /* Just above the button */
  right: 0;
  background: var(--pico-background-color);
  border: 1px solid var(--pico-primary-border);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 140px;
  border: 1px solid var(--pico-primary);
}

.confirm-msg {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--pico-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.confirm-actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.confirm-actions button {
  flex: 1;
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  margin: 0;
}

.confirm-yes {
  background: #ef4444 !important;
  color: white !important;
  border: none !important;
}

.confirm-yes:hover {
  background: #dc2626 !important;
}

.confirm-no {
  background: transparent !important;
  color: var(--pico-muted-color) !important;
  border: 1px solid var(--pico-muted-border) !important;
}

.confirm-no:hover {
  color: var(--pico-color) !important;
  border-color: var(--pico-color) !important;
}

/* Transitions */
.pop-enter {
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pop-enter-start {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
}
.pop-leave {
  transition: all 0.15s ease-in;
}
.pop-leave-end {
  opacity: 0;
  transform: translateY(5px) scale(0.95);
}

.cart-footer {
  padding: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.3);
}

.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "DT Nouveau", serif;
  font-size: 1.5rem;
  color: var(--pico-color);
  margin-bottom: 0.5rem;
}

.checkout-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0;
  padding: 1rem;
  font-size: 0.95rem;
}

/* Cart Animation */
.luxury-slide-active {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.luxury-slide-hidden {
  transform: translateX(100%);
}
.luxury-slide-visible {
  transform: translateX(0);
}

/* --- E. TOASTS --- */
#toast-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}/* [PURGED: .ritual-toast] */
/* [PURGED: .ritual-toast-processing] */
/* [PURGED: .ritual-toast-shipped] */
/* [PURGED: .ritual-toast-delivered] */
/* [PURGED: .ritual-toast-cancelled] */
/* [PURGED: .ritual-toast-pending] */
/* [PURGED: .toast-enter-start, .toast-leave-end] */
/* [PURGED: .toast-enter-end, .toast-leave-start] */


/* --- D. FOOTER --- */
.global-footer {
  background-color: var(--pico-background-color);
  padding: 5rem 0 2rem 0;
  margin-top: 6rem;
  border-top: 1px solid var(--border-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

/* Brand Column (Wider) */
.footer-brand {
  max-width: 400px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.footer-logo-icon {
  width: 36px;
  height: 36px;
}

.footer-logo-text {
  height: 20px;
  width: auto;
}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--pico-muted-color);
  margin-bottom: 2rem;
  font-family: "Montserrat", sans-serif;
}

/* Newsletter */
.footer-newsletter {
  margin-top: 1rem;
}

.footer-heading {
  font-family: "DT Nouveau", serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pico-h2-color);
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
}

.newsletter-form input {
  font-size: 0.9rem;
}

.newsletter-btn {
  font-size: 0.7rem;
  padding: 0.7rem 1.2rem;
}

.footer-success {
  color: #166534;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem;
  background: #daece1;
  border-radius: 4px;
  margin-top: 0.5rem;
}

/* Footer Links */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: var(--pico-color);
  text-decoration: none;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--pico-primary-hover);
  transform: translateX(3px);
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(26, 46, 34, 0.08);
}

.footer-copyright {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  margin: 0;
  letter-spacing: 0.05em;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-social a {
  color: var(--pico-muted-color);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social a:hover {
  color: var(--pico-primary-hover);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: .25rem;
  }
}

@media (max-width: 768px) {
  .global-footer {
    padding: 3rem 0 2rem 0;
    margin-top: 4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
  }

  .footer-col {
    align-items: center;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

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


/* --- Confirmation Dialog (Above Button) --- */
.confirm-dialog {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-color);
  border: 2px solid var(--pico-primary);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200px;
  white-space: nowrap;
}

.confirm-dialog::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--pico-primary);
}

.confirm-dialog-message {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: var(--pico-color);
  font-weight: 500;
}

.confirm-dialog-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.confirm-dialog-buttons button {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
}

.confirm-btn-yes {
  background: var(--pico-primary);
  color: white;
  border-color: var(--pico-primary);
}

.confirm-btn-yes:hover {
  background: var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
}

.confirm-btn-no {
  background: var(--surface-color);
  color: var(--pico-muted-color);
  border-color: var(--pico-muted-border-color);
}

.confirm-btn-no:hover {
  background: var(--pico-secondary-background);
  color: var(--pico-secondary);
  border-color: var(--pico-secondary);
}

/* Confirm dialog animations */
.confirm-dialog-enter {
  animation: confirmDialogIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirmDialogIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* --- Confirmation Modal Styles --- */
.confirm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.confirm-modal {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.confirm-modal-title {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pico-primary);
}

.confirm-modal-message {
  margin: 0 0 1.5rem 0;
  color: var(--pico-color);
  line-height: 1.5;
}

.confirm-modal-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.confirm-modal-buttons button {
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
}

.confirm-modal-cancel {
  background: var(--surface-color);
  color: var(--pico-muted-color);
  border-color: var(--pico-muted-border-color);
}

.confirm-modal-cancel:hover {
  background: var(--pico-secondary-background);
  border-color: var(--pico-secondary);
  color: var(--pico-secondary);
}

.confirm-modal-confirm {
  background: var(--pico-primary);
  color: white;
  border-color: var(--pico-primary);
}

.confirm-modal-confirm:hover {
  background: var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
}

/* Modal animations */
.confirm-modal-enter {
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Dialog Elements (Account Modals, etc.) --- */
dialog[open] {
  z-index: 10001;
}


@keyframes modalFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* =========================================
   5. PAGE: HOMEPAGE
   ========================================= */
.hero-ritual {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-color: var(--pico-background-color);
  padding-bottom: 4rem;
  padding-left: 2rem;
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-ritual video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.15);
  object-fit: cover;
  filter: contrast(1.1) sepia(20%) brightness(0.4);
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.hero-ritual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    transparent 40%,
    var(--pico-background-color) 110%
  );
  pointer-events: none;
  z-index: 1;
}
.hero-content {
  justify-content: center;
  z-index: 2;
  text-align: left;
  color: #fff;
  max-width: 80vw;
  padding: 0 1rem;
}
.hero-title {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  color: var(--pico-primary-background);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  line-height: 1.1;
}
.hero-subtitle {
  font-size: 1.25rem;
  opacity: 0.95;
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--pico-primary-background);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  max-width: 30vw;
}

.features-section {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.features-grid {
  text-align: center;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 3rem 0;
}
.feature-title {
  margin-bottom: 0.5rem;
  color: var(--pico-primary);
  font-weight: bold;
}
.feature-sub {
  text-transform: uppercase;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.newsletter-section {
  margin: 6rem auto;
  padding: 4rem 2rem;
  background-color: var(--pico-background-color);
  border-radius: 1.5rem;
  text-align: center;
  border: 1px solid rgba(141, 119, 171, 0.15);
  box-shadow: 0 20px 40px rgba(0,0,0,0.02);
}

.footer-newsletter .newsletter-section {
  margin: 2rem 0 0 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.footer-newsletter .newsletter-section .newsletter-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.footer-newsletter .newsletter-section .newsletter-sub {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Spacer styles (used by buildSpacerHtml) */

/* --- Luxury Hero Content Customization --- */
.luxury-hero-content h1.stardom-title,
.luxury-hero-content .luxury-hero-sub {
  color: var(--pico-background-color) !important;
}
.luxury-hero-content h1.stardom-title {
  font-size: 4rem !important;
  color: var(--pico-background-color) !important;
  text-shadow:
    0 4px 32px #000a,
    0 2px 12px #fff8;
}
.luxury-hero-content .luxury-hero-sub {
  font-size: 2rem !important;
  color: var(--pico-background-color) !important;
  font-weight: 700;
  text-shadow:
    0 2px 16px #0008,
    0 1px 6px #fff8;
}
.spacer-section {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spacer-line {
  height: 1px;
  width: 100%;
  background: var(--pico-primary) !important;
  position: relative;
  display: flex;
  justify-content: center;
}
.spacer-star {
  background: var(--pico-background-color);
  padding: 0 1rem;
  color: var(--pico-primary);
  font-size: 1.2rem;
}

@media (max-width: 768) {
  .spacer-section {
    visibility: hidden;
  }
}

.newsletter-title {
  font-size: 2.5rem;
  color: var(--pico-color);
  margin-bottom: 1rem;
}
.newsletter-sub {
  color: var(--pico-muted-color);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
}
.newsletter-form {
  display: flex;
  gap: 1rem;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
}

/* =========================================
   6. PAGE: SHOP
   ========================================= */
.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 3rem;
  margin-top: 4rem;
  align-items: start;
}
.filter-group {
  margin-bottom: 2rem;
}
.filter-group h4 {
  font-family: var(--pico-font-family);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
  color: var(--pico-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-light);
}
.filter-link {
  display: block;
  padding: 0.4rem 0;
  color: var(--pico-muted-color);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 1.2rem;
}
.filter-link:hover,
.filter-link.active {
  color: var(--pico-primary);
  transform: translateX(5px);
}

.shop-controls-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}
.shop-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--pico-muted-color);
  padding: 4rem;
}
.bestseller-header {
  text-align: left;
  margin-bottom: 6rem;
}
.bestseller-title {
  font-family: "DT Nouveau";
  font-size: 2.5rem;
  color: var(--pico-color);
}

/* =========================================
   7. PAGE: PRODUCT DETAILS
   ========================================= */
.product-page-container {
  margin-top: 4rem;
  margin-bottom: 6rem;
}
.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-gallery-main {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--surface-color);
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar {
  display: none;
}
.thumb-item {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--surface-color);
  transition: all 0.2s ease;
}
.thumb-item.active {
  border-color: var(--pico-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-title {
  font-family: "DT Nouveau";
  color: var(--pico-h1-color);
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.product-price {
  font-size: 1.5rem;
  color: var(--pico-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.product-description {
  opacity: 0.9;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
  color: var(--pico-color);
  padding: 1rem;
}
.product-controls {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
}
.quantity-selector {
  display: flex;
  color: var(--pico-primary-border);
  background-color: lavender;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(26, 46, 34, 0.2);
  border-radius: 50px;
  padding: 0.2rem 0.5rem;
  min-width: 120px;
}
.quantity-display {
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
}/* [PURGED: .accordion-header] */
/* [PURGED: .accordion-header] */
/* [PURGED: .accordion-content] */


/* =========================================
   8. PAGE: JOURNAL / BLOG
   ========================================= */
.journal-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 4rem;
  margin-top: 4rem;
  align-items: start;
}
.journal-main-header {
  font-family: "DT Nouveau";
  font-size: 2.5rem;
  color: #2e1065;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 1rem;
}
.journal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--pico-primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  position: relative;
  margin-bottom: 2rem;
}

/* Interactive variant for address cards and similar */
.blog-card--interactive {
  cursor: pointer;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card--interactive {
    transition: none;
  }
}

/* Disable hover effects on touch devices */
@media (hover: none) {
  .blog-card--interactive:hover {
    transform: none;
    box-shadow: none;
  }
}

.blog-card--interactive:hover,
.blog-card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background-color: var(--pico-primary-inverse);
}

/* Base blog-card hover (non-interactive) */
.blog-card:hover {
  transform: translateY(-5px);
}
.blog-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}
.blog-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-muted-color);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.blog-title {
  font-family: "DT Nouveau";
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--pico-primary);
}
.blog-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pico-color);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-read-more {
  margin-top: auto;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--pico-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: max-content;
}
.blog-read-more:hover {
  border-bottom-color: var(--pico-primary);
}

.journal-sidebar {
  position: sticky;
  top: 2rem;
  padding-left: 2rem;
  border-left: 1px solid var(--border-light);
}
.sidebar-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--pico-muted-color);
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.5rem;
}
.sidebar-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
  text-decoration: none;
}
.sidebar-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.sidebar-title {
  font-family: "DT Nouveau";
  font-size: 1rem;
  line-height: 1.3;
  color: #2e1065;
  transition: color 0.2s;
}
.sidebar-item:hover .sidebar-title {
  color: var(--pico-primary);
}

/* =========================================
   13. PAGE: ARTICLE (Editorial Layout)
   ========================================= */

/* The Canvas */
.article-container {
  max-width: 740px; /* Optimal reading width */
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
  background-color: var(--pico-background-color);
}

/* 1. HERO SECTION */
.article-header {
  text-align: center;
  margin: 6rem auto 4rem auto;
  max-width: 900px;
}

.article-category {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--pico-muted-color);
  margin-bottom: 1.5rem;
  display: inline-block;
  border-bottom: 1px solid rgba(26, 46, 34, 0.2);
  padding-bottom: 0.5rem;
}

.article-title {
  font-family: "DT Nouveau";
  font-size: 4rem; /* Massive, Editorial size */
  line-height: 1.1;
  color: #2e1065; /* Deep Purple/Navy */
  margin-bottom: 1.5rem;
}

.article-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--pico-color);
  line-height: 1.6;
  max-width: 80%;
  margin: 0 auto;
  opacity: 0.9;
}

/* 2. THE SUMMARY BOX (From your Reference) */
.article-summary-box {
  background-color: var(--pico-primary-background); /* Darker Beige/Taupe */
  padding: 3rem;
  margin: 4rem 0;
  border-radius: 4px; /* Slight rounding, mostly square */
  border-left: 4px solid #2e1065; /* Accent line */
}

.summary-heading {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  color: #2e1065;
}

/* 3. BODY TYPOGRAPHY */
.article-body {
  font-family:
    "DT Nouveau", serif; /* Switching to Serif for body text feels more "Book-like" */
  font-size: 1.4rem; /* Larger for easy reading */
  line-height: 1.8;
  color: #1a2e22;
}

.article-body p {
  margin-bottom: 2rem;
}

.article-body h2 {
  font-family: "DT Nouveau";
  font-size: 2.2rem;
  color: #2e1065;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

/* Dropcap for the first letter */
.dropcap::first-letter {
  font-family: "DT Nouveau";
  font-size: 5rem;
  float: left;
  line-height: 0.8;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  color: #2e1065;
}

/* 4. VISUAL BREAKS */
.article-image-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 600px;
  object-fit: cover;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.article-image-inline {
  width: 100%;
  height: auto;
  border-radius: 2px;
  margin: 2rem 0;
  filter: sepia(0.1);
}

/* 5. AUTHOR SIGNATURE */
.author-block {
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.author-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

/* =========================================
   9. PAGE: CHECKOUT
   ========================================= */
.checkout-page-container {
  margin-top: 4rem;
  margin-bottom: 6rem;
  padding: 0 2rem;
}

@media (max-width: 1100px) {
  .checkout-page-container {
    padding: 0 0.5rem;
    margin-top: 2rem;
  }
}


.checkout-form-card {
  background: var(--surface-color);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

@media (max-width: 1100px) {
  .checkout-form-card {
    padding: 1.5rem 1rem;
  }
}



/* --- Inventory Tracker Filter Tabs --- */
.inventory-filter-tab {
  background: transparent;
  color: var(--pico-primary);
  border: 2px solid transparent;
  padding: 0.6rem 1.2rem;
  font-weight: 700;
  border-radius: 0.7rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  outline: none;
  box-shadow: none;
}

.inventory-filter-tab:hover {
  background: rgba(91, 33, 182, 0.06); /* subtle purple tint */
  color: var(--pico-primary-hover);
  border-color: rgba(91, 33, 182, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.inventory-filter-tab.active,
.inventory-filter-tab.selected {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border: 2px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.inventory-filter-tab.active:hover,
.inventory-filter-tab.selected:hover {
  background: #1f1f1f; /* slightly darker charcoal for hover */
  color: var(--pico-primary-inverse);
  border-color: rgba(0, 0, 0, 0.16);
}

/* Inventory Manager: Outline-like group buttons */
[x-data="inventoryManager"] [role="group"] button {
  background: none;
  border: 2px solid var(--pico-primary);
  color: var(--pico-primary);
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

/* Active (no .outline) = filled */
[x-data="inventoryManager"] [role="group"] button:not(.outline) {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  outline: none;
  box-shadow: none;
}

[x-data="inventoryManager"] [role="group"] button:not(.outline):hover {
  background: #1f1f1f;
  color: var(--pico-primary-inverse);
  border-color: rgba(0, 0, 0, 0.16);
}

[x-data="inventoryManager"] [role="group"] button.outline:hover {
  background-color: var(--pico-primary);
  color: var(--pico-primary-inverse);
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.12);
}

[x-data="inventoryManager"] [role="group"] button:active {
  outline: none;
  box-shadow: none;
  border-color: var(--pico-primary);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .order-summary-card {
    position: relative;
    top: 0;
    order: -1; /* Summary at top for mobile stacking */
    padding: 1.5rem 1rem;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}


.checkout-section {
  margin-bottom: 3rem;
}
.checkout-heading {
  font-family: "DT Nouveau";
  font-size: 1.8rem;
  color: var(--pico-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}
@media (max-width: 600px) {
  .checkout-heading {
    font-size: 1.5rem;
  }
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.order-summary-card {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-light);
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}



.summary-title {
  font-family: "DT Nouveau";
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--pico-color);
}
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  gap: 1rem;
}
.summary-item > div:first-child {
  flex: 1;
  min-width: 0;
}
.summary-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
  background: var(--surface-warm);
  flex-shrink: 0;
}
.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: 1.5rem 0;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  font-family: "DT Nouveau";
  font-size: 1.5rem;
  color: var(--pico-color);
  margin-bottom: 2rem;
}

/* =========================================
   10. PAGE: STANDARDS
   ========================================= */
.standards-hero-bg {
  position: relative;
  background-image: url("/assets/images/standards/cow_hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  padding: 6rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  border-radius: 0 0 2rem 2rem;
  margin-bottom: 6rem;
  overflow: hidden;
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}
.standards-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.standards-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

/* =========================================
   PAGE: GLOSSARY
   ========================================= */
.glossary-hero-bg {
  position: relative;
  background-image: url("/assets/images/glossary/glossary-hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 42vh;
  padding: 4.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  border-radius: 0 0 1.5rem 1.5rem;
  margin-bottom: 3rem;
  overflow: hidden;
  opacity: 0;
  animation: heroFadeIn 0.6s ease-out 0.1s forwards;
}
.glossary-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.glossary-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}
.glossary-strap {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color:#fcd34d;
}
.glossary-title {
  font-family: "DT Nouveau", serif;
  font-size: clamp(2.5rem, 8vw, 8rem);
  color: #fff;
  font-size: 3rem !important ;
  margin-top: 1.5rem;
}
.glossary-subtitle {
  max-width: 350px;
  font-size: 1rem;
  margin: 2rem auto 0;
  color: rgba(255, 255, 255, 0.95);
}
.standards-title {
  font-family: "DT Nouveau";
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: var(--pico-background-color);
  line-height: 1.1;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.standards-subtitle {
  font-size: 1.3rem;
  line-height: 1.6;
  opacity: 0.95;
  color: var(--pico-background-color);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ===== SHOP HERO SECTION ===== */
.shop-hero-bg {
  position: relative;
  background-image: url("/assets/images/shop/collection.jpg");
  background-size: cover;
  background-position: center;
  padding: 8rem 2rem 6rem;
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
  margin-bottom: 4rem;
}

.shop-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.shop-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  margin-bottom: 1.5rem;
  display: block;
  color: #fcd34d;
  font-weight: 600;
  font-size: 0.85rem;
}

.shop-hero-title {
  font-family: "DT Nouveau", serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.shop-hero-subtitle {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .shop-hero-bg {
    padding: 5rem 1.5rem 4rem;
  }
  
  .hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2rem;
  }
  
  .shop-hero-title {
    font-size: 2rem;
  }
  
  .shop-hero-subtitle {
    font-size: 1rem;
  }
}

.standards-divider {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 2rem;
}
.standards-card {
  background: var(--pico-color);
  padding: 4rem;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-light);
}



.standards-card-header {
  font-family: "DT Nouveau";
  font-size: 2rem;
  color: var(--pico-background-color) !important;
  margin-bottom: 1rem;
}
.icon-danger {
  color: #af5050;
  font-weight: 700;
  font-size: 1.1rem;
}
.icon-gold {
  color: #e7c75b;
  font-weight: 700;
  font-size: 1.1rem;
}
.standards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  position: relative;
  z-index: 2;
  color: var(--pico-background-color) !important;
}
.sacred-list-good {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sacred-list-good li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  color: var(--pico-background-color) !important;
  }

.sacred-list-good li:hover {
  transform: scale(1.05);
  color: rgb(231, 199, 91) !important;
  cursor: default;
  transition: transform 0.8s ease;
}

.sacred-list-bad {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sacred-list-bad li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
  color: var(--pico-background-color) !important;
}

.sacred-list-bad li:hover {
  transform: scale(1.05);
  color: #af5050 !important;
  cursor: default;
  transition: transform 0.8s ease;
}/* [PURGED: .woodcut-card] */
/* [PURGED: .woodcut-icon] */
/* [PURGED: .woodcut-card, .woodcut-icon] */
/* [PURGED: .woodcut-label] */


/* =========================================
   11. COMPONENT: FAQ
   ========================================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--border-light);
}
.faq-item:first-child {
  border-top: 1px solid var(--border-light);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: "DT Nouveau";
  font-size: 1.4rem;
  color: #2e1065;
  cursor: pointer;
  transition: color 0.3s ease;
  box-shadow: none;
}
.faq-question:hover {
  color: var(--pico-primary);
  background: none;
  transform: none;
  box-shadow: none;
}
.faq-icon {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--pico-muted-color);
  transition: transform 0.3s ease;
}
.faq-question.active {
  color: var(--pico-primary);
}
.faq-answer {
  color: var(--pico-color);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}

/* =========================================
   12. RESPONSIVE (TABLET & MOBILE)
   ========================================= */

/* --- TABLET (And Smaller) STARTING AT 1024px --- */
@media (max-width: 1024px) {
  /* 1. Hide Desktop Nav, Show Mobile Nav */
  nav.nav-container,
  nav.container {
    display: none !important;
    margin: 0 !important;
    padding: .25rem 1rem .25rem !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
  }

  .container-fluid {
    padding: 0 !important;
  } 


  /* 2. Show Mobile Bar (from mobileNav component) */
  #global-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background-color: var(--pico-background-color);
  }
  .mobile-bar {
    display: flex !important;
    width: 100%;
    padding: 0.25rem 1rem;
    height: 80px;
    background-color: var(--pico-background-color);
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  body {
    padding-top: 80px !important;
  }

  /* 3. Hero Adjustments */
  .hero-ritual {
    height: 65vh;
    padding: 0 1.5rem 3rem !important;
    align-items: flex-end;
    justify-content: center !important;
  }
  .hero-ritual video {
    transform: translate(-50%, -50%) !important;
  }
  .hero-ritual::after {
    background: linear-gradient(to top, var(--pico-background-color) 0%, transparent 60%) !important;
  }
  .hero-content {
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
  }
  .hero-title {
    font-size: 2.5rem !important;
    line-height: 1.1;
  }
  .hero-subtitle {
    font-size: 1rem !important;
    max-width: 100% !important;
    margin: 0 auto 2rem !important;
  }

  /* Product Grid — 2 columns at tablet/mobile */
  .shop-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 4. Account Layout Adjustments */
  .account-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .account-sidebar {
    display: none !important;
  }
}

/* --- MOBILE SPECIFIC (Under 768px) --- */
@media (max-width: 768px) {

  /* A. Global Spacing & Typography */
  :root {
    font-size: 15px;
  }
  body {
    line-height: 1.7;
  }
  
  

  /* B. Grid stacking (shop grid handled at 900px breakpoint above) */
  .grid:not(.shop-product-grid),
  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  /* C. Product Cards — mobile optimized */
  .product-card {
    font-size: 0.85rem;
  }
  .product-card .card-title {
    font-size: 0.9rem;
    line-height: 1.3;
  }
  .product-card .card-price {
    font-size: 0.85rem;
  }
  .card-img-wrap {
    aspect-ratio: 1 / 1;
  }
  .card-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  

  /* D. Product Detail Stacks */
  .product-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .product-gallery-main {
    margin: 0 -1rem;
    border-radius: 0;
    width: calc(100% + 2rem);
  }
  .product-controls {
    flex-direction: column;
    gap: 1rem;
  }
  .product-controls button,
  .product-controls .btn {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }
  .quantity-selector {
    width: 100%;
  }
  .quantity-selector button {
    min-width: 44px;
    min-height: 44px;
  }

  /* E. Checkout Stacks — Handled above at 1100px */


  /* E2. Split Section — overlapping card on mobile */
  .split-section {
    position: relative;
  }
  .split-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: relative;
    gap: 0 !important;
    padding: 0 !important;
  }
  .split-wrap figure.mobile-order-2 {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
    width: 100%;
  }
  .split-wrap figure.mobile-order-2 img {
    width: 100%;
    height: 100vh !important;
    object-fit: cover;
    border-radius: 1rem !important;
    display: block;
  }
  .split-wrap .mobile-order-1 {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 1;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 0 0 1rem 1rem;
    padding: 1.5rem;
    color: #fff !important;
  }
  .split-wrap .mobile-order-1 h2,
  .split-wrap .mobile-order-1 div,
  .split-wrap .mobile-order-1 small,
  .split-wrap .mobile-order-1 p {
    color: #fff !important;
  }
  .split-wrap .mobile-order-1 small {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .split-wrap .mobile-order-1 h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* F. Journal Stacks */
  .journal-layout {
    grid-template-columns: 1fr;
  }
  .journal-grid {
    grid-template-columns: 1fr;
  }
  .journal-sidebar {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-light);
    padding-top: 3rem;
  }

  /* G. Standards */
  .standards-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .standards-divider {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    padding-right: 0;
  }
  .standards-card {
    padding: 2rem;
  }
  .standards-card-header {
    font-size: 1.5rem;
  }

  /* H. Cart Drawer */
  .cart-drawer {
    width: 100%;
    padding: 1rem;
  }
  .cart-drawer .quantity-selector button {
    min-width: 44px;
    min-height: 44px;
  }

  /* I. Ingredient Circles */
  .ing-circles-grid {
    gap: 2rem;
  }
  .ing-circle {
    width: 200px;
    height: 200px;
  }
  .ing-circle-name {
    font-size: 0.9rem;
  }
  .ing-circle-latin {
    font-size: 0.7rem;
  }

  /* J. Footer — see dedicated footer @media block above */

  /* K. Account Page */
  .account-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }
  .account-sidebar {
    display: none !important;
  }
  .account-sidebar a,
  .account-sidebar button {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  /* L. Hero adjustments */
  .hero-ritual {
    height: 55vh;
  }
  .hero-title {
    font-size: 1.8rem !important;
  }
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
}

/* --- VERY SMALL PHONES (Under 380px) --- */
@media (max-width: 380px) {
  .shop-product-grid {
    grid-template-columns: fr !important;
  }
}

/* --- Ingredient Circles (Apothecary Style - LARGE) --- */
.ing-circles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the whole group on the page */
  gap: 4rem; /* More breathing room for big circles */
  margin-bottom: 4rem;
  padding-top: 2rem;
}

.ing-circle-item {
  position: relative;
  width: 200px; /* MATCHES WRAPPER SIZE to center text */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The Circle Image Container */
.ing-circle-wrapper {
  width: 300px; /* INCREASED SIZE */
  height: 300px; /* INCREASED SIZE */
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface-color);
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;
  margin-bottom: 1.5rem; /* More space between circle and name */
}

/* Hover: Grow & Glow */
.ing-circle-item:hover .ing-circle-wrapper {
  transform: scale(1.05); /* Subtle grow (since it's already big) */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.ing-circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.2);
}

/* Ingredient Name */
.ing-circle-name {
  font-family: "DT Nouveau";
  font-size: 1.1rem; /* Larger font to match big circles */
  color: var(--pico-color);
  line-height: 1.2;
  transition: color 0.2s;
}

.ing-circle-item:hover .ing-circle-name {
  color: var(--pico-primary);
}

/* The Tooltip (Description) */
.ing-circle-tooltip {
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px; /* Wider tooltip for better readability */
  background: var(--surface-color);
  padding: 1.5rem;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 100;
  text-align: center;
  pointer-events: none;
}

.ing-circle-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* =========================================
   14. PAGE: GLOSSARY (Interactive List)
   ========================================= */

/* --- SEARCH BAR (Fixed Alignment) --- */
.glossary-search-wrapper {
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;

  /* Make it behave like the nav search */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.glossary-search-input {
  width: 100%;
  background: transparent;
  border: none !important;
  border-bottom: 1px solid rgba(26, 46, 34, 0.12) !important;
  border-radius: 0 !important;

  padding: 0.5rem 0.5rem 0.5rem 0.75rem !important;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  color: var(--pico-primary) !important;
  transition: all 0.2s ease;
}

/* Icon sits inline, like nav's button */
.glossary-search-icon {
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  color: var(--pico-muted-color);
  pointer-events: none;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover/Focus state similar to nav */
.glossary-search-input:focus {
  outline: none;
  border-bottom-color: var(--pico-primary-hover);
}

.glossary-search-wrapper:focus-within .glossary-search-icon {
  color: var(--pico-primary-hover);
}

/* --- THE LIST --- */
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ITEM CONTAINER */
.glossary-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px; /* Slight rounding */
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  background: #000;

  /* DEFAULT STATE: Compact */
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 1. BACKGROUND IMAGE */
.glossary-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;

  /* DEFAULT: Dimmed & Artsy */
  opacity: 0.4;
  filter: grayscale(100%) sepia(20%);

  transform: scale(1.05);
  transition: all 0.6s ease;
}

/* 2. OVERLAY (Readability Layer) */
.glossary-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* 3. CONTENT TEXT */
.glossary-content {
  position: relative;
  z-index: 2;
  padding: 0 3rem; /* Side padding */
  color: #fff;
  transition: all 0.4s ease;
}

.glossary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.glossary-title {
  font-family: "DT Nouveau";
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.glossary-arrow {
  font-size: 1.5rem;
  opacity: 0.6;
  transition: transform 0.5s ease;
  color: #fff;
}

/* --- ACTIVE STATE (The "Big Reveal") --- */
.glossary-item.active {
  /* MASSIVE HEIGHT: Creates the "Window" effect */
  min-height: 500px;
  justify-content: flex-end; /* Push text to bottom */
  padding-bottom: 3rem;
  border-color: transparent;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* Active BG: Full Color, No Dim */
.glossary-item.active .glossary-bg {
  opacity: 1; /* Fully visible */
  filter: grayscale(0%) sepia(0%); /* Full color */
  transform: scale(1);
}

/* Active Overlay: Remove it so image pops (or make very subtle) */
.glossary-item.active .glossary-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  opacity: 1;
}

.glossary-item.active .glossary-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* --- ACTIVE + HOVER (Interaction #3) --- */
/* When active AND hovered, dim image slightly to focus on text */
.glossary-item.active:hover .glossary-bg {
  opacity: 0.6; /* Dim slightly */
  transform: scale(1.02); /* Breathe */
}

.glossary-item.active:hover .glossary-title {
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); /* Glow effect */
}

/* --- DESCRIPTION TEXT --- */
.glossary-details {
  margin-top: 1.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  max-width: 600px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 1.5rem;
}

/* =========================================
   15. ADMIN DASHBOARD (New Layout)
   ========================================= */

/* The Main Wrapper: Full Screen, No Scrolling on Body */
.dashboard-wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: var(--surface-dim);
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

/* --- A. SIDEBAR --- */
.dashboard-sidebar {
  width: 260px;
  height: 100%;
  background-color: var(--pico-background-color);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 100;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.dashboard-sidebar.collapsed {
  width: 80px;
  padding: 1.5rem 0.5rem;
}

.dashboard-sidebar.collapsed .sidebar-logo {
  justify-content: center;
  gap: 0;
}

.dashboard-sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 1rem 0.5rem;
}

.dashboard-sidebar.collapsed .sidebar-link-sub {
  padding-left: 0.5rem;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 3rem;
  font-family: "DT Nouveau";
  font-size: 1.4rem;
  color: #2e1065;
  text-decoration: none;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pico-muted-color);
  padding: 1rem 1rem 0.3rem 1rem;
  margin-top: 0.5rem;
  opacity: 0.6;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  color: var(--pico-muted-color);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
}

.sidebar-link-sub {
  padding-left: 1.5rem;
  font-size: 0.85rem;
}

.sidebar-link:hover {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary);
}

.sidebar-link.active {
  background-color: var(--pico-primary-border);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(46, 16, 101, 0.2);
}

/* Badge for notifications */
.sidebar-badge {
  margin-left: auto;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
}

/* ====================================================
   ACCOUNT PAGE (Customer Dashboard)
   ==================================================== */

/* Account Layout - Two Column Grid */
.account-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 18rem auto 8rem; /* Clear 3-row fixed desktop navbar */
  padding: 0 2rem;
  min-height: 60vh;
}

/* Account Sidebar */
.account-sidebar {
  background-color: var(--pico-background-color);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  height: fit-content;
  position: sticky;
  top: 18rem; /* Stuck below the 3-row persistent navbar */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Force Navbar Visibility on Account Page (Persistent Header) */
.page-account .nav-container {
  transform: translateY(0) !important;
  transition: none !important;
}

/* Ensure account body doesn't break sticky/fixed via main transform */
.page-account-body main#planet-content {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Ensure account body doesn't break sticky/fixed via main transform */
.page-account-body main#planet-content {
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Profile Summary Card */
.profile-summary {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: linear-gradient(
    135deg,
    rgba(126, 58, 242, 0.1),
    rgba(46, 16, 101, 0.1)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar svg {
  color: var(--pico-primary);
  opacity: 0.7;
}

.profile-summary h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--pico-color);
  font-weight: 600;
}

.profile-summary p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

/* Account Navigation Menu */
.account-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.account-menu a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  color: var(--pico-muted-color);
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.account-menu a:hover {
  background-color: rgba(126, 58, 242, 0.05);
  color: var(--pico-primary);
}

.account-menu a.active {
  background-color: var(--pico-background-color);
  color: var(--pico-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(126, 58, 242, 0.15);
}

/* Logout Button with Primary Border */
.account-sidebar .logout-btn,
.logout-btn.pico-primary {
  color: var(--pico-primary) !important;
  border: 1px solid var(--pico-primary) !important;
  background: transparent !important;
}

.account-sidebar .logout-btn:hover,
.logout-btn.pico-primary:hover {
  color: var(--pico-primary) !important;
  background-color: var(--pico-primary-background) !important;
  border: 1px solid var(--pico-primary) !important;
}

/* Account Content Area */
.account-content {
  max-width: 900px;
}

.account-content h1 {
  margin-bottom: 0.5rem;
}

.account-content > div > p {
  margin-bottom: 2rem;
}

/* Order Filter Tabs */
.order-filter-tab {
  background: transparent;
  color: var(--pico-muted-color);
  font-weight: 400;
}

.order-filter-tab.active {
  background-color: var(--pico-primary);
  color: var(--pico-primary-background);
  font-weight: 600;
}

.order-filter-tab:hover {
  background-color: var(--pico-primary);
  color: var(--pico-primary-background);
}

/* --- Account Layout (Desktop) --- */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem 8rem 2rem; 
  min-height: 80vh;
  overflow: visible !important; /* CRITICAL for sticky */
}

.account-sidebar {
  position: sticky;
  top: 240px; /* Slight overlap with 230px nav to kill gaps */
  align-self: start;
  height: fit-content;
}

/* Account Bottom Bar — Hidden by default (desktop) */
.account-bottom-bar {
  display: none;
}

/* --- Account Badge Styles --- */
.badge-success {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}





.account-tab-row {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 0;
}

.account-search-row {
  display: flex; 
  gap: 1rem; 
  align-items: center; 
  justify-content: space-between; 
  margin-top: 0.75rem;
}

/* Account Bottom Bar — Hidden by default (desktop) */
.account-bottom-bar {
  display: none;
}

/* Mobile/Tablet Responsive — Bottom Tab Bar */
@media (max-width: 1024px) {
  .account-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 1rem;
    padding-bottom: 90px;
    margin-top: 8rem !important; /* Clear fixed mobile navbar (approx 60-80px) */
  }

  .account-sidebar {
    display: none !important;
  }

  .account-content {
    max-width: 100%;
    min-width: 0;
  }

  

  /* Order filter tabs — horizontal scroll on mobile */
  .account-sticky-header > div:first-child {
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .account-sticky-header > div:first-child::-webkit-scrollbar {
    display: none;
  }

  .account-content .order-filter-tab {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Order cards — prevent overflow */
  .account-content .stat-card {
    overflow: hidden;
    word-break: break-word;
  }

  /* Smaller title on mobile */
  .account-content .stardom-title {
    font-size: 1.75rem !important;
  }

  /* Search bar fits on mobile */
  .account-content .search-wrapper-global {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-account-body .account-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
    padding: 0.6rem 0;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  }

  .account-bottom-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--pico-muted-color);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .account-bottom-bar a img {
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }

  .account-bottom-bar a.active {
    color: var(--pico-primary);
  }

  .account-bottom-bar a.active img {
    opacity: 1;
    filter: invert(23%) sepia(85%) saturate(5217%) hue-rotate(262deg) brightness(75%) contrast(95%);
  }
}

@media (min-width: 1025px) {
  html, body {
    height: auto;
    overflow-x: hidden;
  }
}

/* --- B. MAIN CONTENT AREA --- */
.dashboard-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--surface-dim);
}

/* Top Header */
.dashboard-header {
  height: 80px;
  background-color: var(--pico-primary-border) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dashboard-title {
  font-family: "DT Nouveau";
  font-size: 1.8rem;
  color: var(--pico-background-color);
  margin: 0;
}

/* The Scrollable Canvas */
.dashboard-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 2rem 2rem 2rem; /* Remove top padding to sit flush */
  position: relative;
}

.sticky-admin-header {
  position: sticky;
  top: 0; /* Sit flush at the top of the scroll container */
  background-color: var(--surface-dim);
  z-index: 50;
  padding: 1rem 0;
  margin-bottom: 2rem;
  margin-top: 0;
}

/* --- C. STAT CARDS (For Overview) --- */
.stat-card {
  background: var(--pico-background-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: black !important;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.stat-value {
  font-family: "DT Nouveau";
  font-size: 2rem;
  color: #2e1065;
}


/* --- D. MODALS --- */
dialog.glass-modal {
  z-index: 10002;
}
dialog.glass-modal::backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1001;
}
dialog.glass-modal > article {
  width: 80vw;
  height: 80vh;
  max-width: 100%;
  background-color: var(--pico-background-color);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

dialog.glass-modal > article > header,
dialog.glass-modal > article > footer {
  background-color: var(--pico-primary);
  padding: 1rem 2rem;
  margin: 0;
  flex-shrink: 0;
}

dialog.glass-modal > article > .grid,
dialog.glass-modal > article > form {
  flex-grow: 1;
  overflow-y: auto;
  padding: 2rem;
  margin: 0;
  scrollbar-gutter: stable;
}

dialog.glass-modal table tbody tr {
  background-color: var(--pico-primary-background);
}

/* ── Admin modal tab pill navigation ───────────────────────────────────── */
.sa-tab-active {
  background: white;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.sa-tab-inactive {
  background: transparent;
  color: #64748b;
}
.sa-tab-inactive:hover {
  color: #1e293b;
  background: rgba(255,255,255,0.6);
}

/* Create Order modal: override glass-modal article sizing so inline styles win */
#manual-create-order-modal > article {
  width: 1100px;
  max-width: 95vw;
  height: auto;
  max-height: 90vh;
}

/* Subtle borders on modal inputs */
dialog.glass-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
dialog.glass-modal select,
dialog.glass-modal textarea {
  border: 1.5px solid rgba(46, 16, 101, 0.2) !important;
  border-radius: 6px !important;
  padding: 0.55rem 0.75rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

dialog.glass-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):focus,
dialog.glass-modal select:focus,
dialog.glass-modal textarea:focus {
  border-color: rgba(46, 16, 101, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(46, 16, 101, 0.08) !important;
  outline: none !important;
}

/* --- E. ADMIN INGREDIENTS GRID --- */
.ingredients-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  max-height: 250px;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--pico-border-color);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
}

.ingredients-selection-grid label {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.ingredients-selection-grid label:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Hide default search clear icon in Chrome/Edge */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Inventory Tracker Filter Tabs */
.inventory-filter-tab {
  background: transparent;
  color: var(--pico-color);
  border: none;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

/* Active/Selected State */
.inventory-filter-tab.active,
.inventory-filter-tab.selected {
  background: #232323; /* Dark background */
  color: #fff; /* Light text */
}

/* Optional: Hover effect for inactive tabs */
.inventory-filter-tab:not(.active):not(.selected):hover {
  background: #e5e5e5;
  color: #232323;
}

/* Tab Content Spacing */
.dashboard-content [x-show] {
  padding: 1.5rem 0;
}

/* Order Detail Modal Tab Content */
dialog.glass-modal [x-show] {
  padding: 1rem 1.5rem;
}

dialog.glass-modal [x-show] > .grid,
dialog.glass-modal [x-show] > div:not([style*="display: flex"]) {
  margin-top: 0.5rem;
}

/* Timeline Tab Specific Spacing */
dialog.glass-modal [x-show] > div[style*="position: relative"] {
  padding-top: 1rem;
}

/* Details Tab Horizontal Overflow */
dialog.glass-modal .details-tab-content {
  overflow-x: auto;
}

/* Order Detail Modal Tab Navigation Buttons */
dialog.glass-modal .tab-button {
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--pico-border-color) !important;
  border-bottom: none !important;
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--pico-muted-color);
  font-weight: 600;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

dialog.glass-modal .tab-button:hover {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary);
  border: 1px solid var(--pico-border-color) !important;
  border-bottom: none !important;
  box-shadow: inset 0 0 0 1px var(--pico-border-color) !important;
}

dialog.glass-modal .tab-button-active {
  background-color: var(--pico-background-color);
  color: var(--pico-primary);
  border: 1px solid var(--pico-border-color) !important;
  border-bottom: none !important;
  box-shadow: inset 0 0 0 1px var(--pico-border-color) !important;
}

/* ====================================================
   RTF EDITOR — Reusable Rich Text Editor
   ==================================================== */

.rtf-editor-wrapper {
  margin-bottom: 1rem;
}

.rtf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.4rem;
  background: #f5f3f0;
  border: 1px solid var(--pico-border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.rtf-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--pico-primary);
  font-size: 0.85rem;
  line-height: 1;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
}

.rtf-toolbar button:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--pico-border-color);
}

.rtf-toolbar button:active {
  background: var(--pico-primary-background);
  color: var(--pico-primary);
}

.rtf-divider {
  width: 1px;
  background: var(--pico-border-color);
  margin: 0 0.25rem;
  align-self: stretch;
}

.rtf-content {
  border: 1px solid var(--pico-border-color);
  border-radius: 0 0 8px 8px;
  padding: 1rem;
  min-height: 150px;
  background: white;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.6;
  outline: none;
}

.rtf-content:focus {
  border-color: var(--pico-primary);
  box-shadow: 0 0 0 2px rgba(46, 16, 101, 0.1);
}

.admin-grid {
  margin-top: 3rem;
}

/* ====================================================
   ADMIN MOBILE — Bottom Bar + More Menu
   ==================================================== */

/* Hidden by default (desktop) */
.admin-bottom-bar {
  display: none;
}

.admin-more-menu {
  display: none;
}

/* Mobile orders header — hidden on desktop */
.admin-orders-mobile-header {
  display: none;
}

/* Mobile admin topbar — hidden on desktop */
.admin-mobile-topbar {
  display: none;
}

@media (max-width: 1024px) {
  /* Hide desktop sidebar */
  .dashboard-sidebar {
    display: none !important;
  }

  /* Let page scroll naturally instead of 100vh lock */
  .dashboard-wrapper {
    position: relative !important; /* Break the fixed lock */
    min-height: 100vh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    flex-direction: column;
  }

  html, body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Main area fills screen */
  .dashboard-main {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
    flex-grow: 1;
  }

  /* Hide top header bar on mobile */
  .dashboard-header {
    display: none !important;
  }

  /* Reduce content padding, add room for bottom bar */
  .dashboard-content {
    padding: 0 1rem 120px 1rem !important;
    overflow: visible !important;
    height: auto !important;
    position: relative !important;
  }

  .dashboard-content [x-show] {
    padding: 1rem 0;
  }

  /* Page title — readable color on mobile */
  .dashboard-title {
    color: var(--pico-primary) !important;
    font-size: 1.4rem !important;
  }

  /* Card headers — darker for readability */
  .stat-card h3,
  .stat-card h4,
  .stat-card h5,
  .stat-card strong,
  .stat-label {
    color: var(--pico-primary) !important;
  }

  .stat-value {
    color: var(--pico-color) !important;
  }

  /* Mobile mini topbar */
  .admin-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--pico-background-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .admin-back-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--pico-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .admin-mobile-topbar .dashboard-title {
    margin: 0;
    font-size: 1.1rem !important;
  }

  .admin-refresh-btn {
    background: none;
    border: none;
    color: var(--pico-primary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
  }

  /* Admin orders — hide desktop header, show mobile header */
  .admin-orders-desktop-header {
    display: none !important;
  }

  .admin-orders-mobile-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: var(--pico-background-color);
    padding: 0.75rem 0 0.5rem;
    margin-bottom: 1rem;
  }

  /* Hide scrollbar on filter tabs */
  .admin-orders-mobile-header > div:first-child::-webkit-scrollbar {
    display: none;
  }

  /* Order grid — single column on mobile */
  .dashboard-content .grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Admin Bottom Bar --- */
  .admin-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: var(--pico-background-color);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }

  .admin-bottom-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0;
    text-decoration: none;
    color: var(--pico-muted-color);
    font-size: 0.65rem;
    font-weight: 500;
    transition: color 0.2s ease;
  }

  .admin-bottom-bar a img,
  .admin-bottom-bar a svg {
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }

  .admin-bottom-bar a.active {
    color: var(--pico-primary);
    font-weight: 600;
  }

  .admin-bottom-bar a.active img,
  .admin-bottom-bar a.active svg {
    opacity: 1;
    filter: invert(23%) sepia(85%) saturate(5217%) hue-rotate(262deg) brightness(75%) contrast(95%);
  }

  .admin-bottom-bar a.active svg {
    filter: none;
    color: var(--pico-primary);
    opacity: 1;
  }

  /* --- Admin More Menu (Full-Screen Overlay) --- */
  .admin-more-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .admin-more-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    overflow-y: auto;
  }

  .admin-more-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  .admin-more-header h2 {
    color: var(--pico-primary); /* Changed from #fff for better visibility */
    font-size: 1.5rem;
    margin: 0;
  }

  .admin-more-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pico-primary);
    cursor: pointer;
  }

  .admin-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
  }

  .admin-more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .admin-more-card:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.8);
  }

  .admin-more-card img {
    opacity: 0.7;
  }

  .admin-more-logout {
    color: #ef4444;
  }

  .admin-more-logout svg {
    stroke: #ef4444;
  }

  /* --- Full-Screen Slide-In Modals --- */
  dialog.glass-modal {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }

  dialog.glass-modal > article {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  dialog.glass-modal > article > header {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
  }

  dialog.glass-modal > article > form {
    padding: 1rem;
    padding-bottom: 2rem;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack 2-column grids to single column */
  dialog.glass-modal .grid {
    grid-template-columns: 1fr !important;
  }

  /* Product tab buttons scroll horizontally */
  .product-tab-nav {
    bar-width: none;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.85rem;
    height: 80px;
    
  }

  .product-tab-nav button {
    color: var(--pico-primary) !important;
    border-color: var(--pico-primary) !important;
    min-height: auto !important;
  }

  .product-tab-nav button:active,
  .product-tab-nav button:focus {
    color: var(--pico-primary) !important;
    border-color: var(--pico-primary) !important;
  } 

  .product-tab-nav::-webkit-scrollbar {
    display: none;
  }


  /* --- RTF Editor Mobile --- */
  .rtf-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .rtf-toolbar::-webkit-scrollbar {
    display: none;
  }

  .rtf-toolbar button {
    flex-shrink: 0;
  }

  .rtf-content {
    min-height: 200px;
  }

  /* --- Sticky Admin Header --- */
  .sticky-admin-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background-color: var(--pico-background-color);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    transform: translateY(0);
    opacity: 1;
  }

  .sticky-admin-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 1024px) {
    .sticky-admin-header {
      top: 0; 
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      margin-bottom: 2rem;
      z-index: 1000; 
    }
    
    .flex-responsive {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 1rem !important;
    }
    
    .flex-responsive > div,
    .flex-responsive > hgroup {
      width: 100% !important;
    }
  }
}

/* ACTINIC OVERRIDE: Ultimate Sticky Context Recovery */
html, 
body,
.celestial-body,
#planet-content,
main,
.page-account,
.account-layout,
.account-content,
#account-orders,
#account-addresses,
#account-wishlist,
#account-profile {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
    min-height: 100vh;
}

/* Force sticky on all devices for these specific classes */
.account-sidebar {
    position: sticky !important;
    top: 240px !important; /* Sub-pixel overlap to seal gap */
    align-self: start !important; 
    height: fit-content !important;
    min-height: auto !important; 
    z-index: 100 !important;
    padding-top: 72px !important; 
    background-color: var(--pico-background-color) !important;
}

.account-sticky-header {
    position: sticky !important;
    top: 200px !important; 
    z-index: 100 !important;
    padding-top: 3rem !important; 
    background-color: var(--pico-background-color) !important;
    margin: 1rem 1rem 1rem 1rem ;
}

@media (max-width: 1200px) {
  .account-sticky-header {
  position: sticky !important;
  top: 50px !important; /* Slight overlap to kill gaps */
  z-index: 100!important; 
  background-color: var(--pico-background-color);/* Maintain visual 300px total offset */
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
}

/* Ensure parents of absolute/sticky elements don't clip */
.account-layout > div {
    overflow: visible !important;
}

body.antigravity-scroll-lock {
    overflow: visible !important;
    overflow-y: visible !important;
}

/* --- CHECKOUT ENHANCEMENTS --- */
.shipping-rate-option {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.shipping-rate-option:hover {
    border-color: var(--pico-primary) !important;
    background: rgba(26, 46, 34, 0.02);
}

.shipping-rate-option.selected {
    border-color: var(--pico-primary) !important;
    background: rgba(26, 46, 34, 0.05);
    box-shadow: 0 0 0 1px var(--pico-primary);
}

.shipping-rate-option input[type='radio'] {
    accent-color: var(--pico-primary);
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    flex-shrink: 0;
}

/* --- Shipping Info Tooltip (Desktop) --- */
.shipping-info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a1a1a;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    width: 200px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.shipping-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
}

@media (min-width: 1024px) {
    .shipping-rate-option:hover .shipping-info-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* --- Mobile Details Area --- */
.shipping-mobile-details {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}

.rate-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.rate-carrier-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.carrier-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.carrier-text {
    min-width: 0;
    overflow: hidden;
}

.carrier-name {
    font-weight: 600;
    color: var(--pico-color);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-name {
    font-weight: 500;
    opacity: 0.7;
}

.rate-right {
    text-align: right;
    margin-left: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rate-amount {
    font-weight: 700;
    color: var(--pico-primary);
    font-size: 1.1rem;
}

.shipping-methods-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 600px) {
    .shipping-rate-option {
        padding: 0.75rem;
    }
    .carrier-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
    .carrier-name {
        font-size: 0.9rem;
        white-space: normal; /* Allow wrapping to prevent horizontal push */
    }
    .rate-amount {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .mobile-info-btn {
        display: block !important;
    }
}




.loader-small {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(26, 46, 34, 0.1);
    border-radius: 50%;
    border-top-color: var(--pico-primary);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.checkout-form-card select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24/24' fill='none' stroke='%231a2e22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 1.2rem !important;
    padding-right: 2.5rem !important;
}




.packing-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .packing-details-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Responsive Overflow Safety --- */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    main {
        overflow-x: hidden !important;
    }

    .checkout-page-container {
        padding: 0 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    input, select, textarea {
        max-width: 100% !important;
    }

    .stardom-title {
        font-size: 2.2rem !important;
    }
}


.admin-panel {
  height: 85vh !important; 

}


/* --- ADMIN NEWSLETTER & SUBSCRIBERS --- */
.newsletter-container { padding: 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-value { font-size: 2rem; font-weight: bold; color: var(--pico-primary); }
.stat-label { font-size: 0.875rem; color: var(--pico-muted-color); text-transform: uppercase; }
.badge-success { background: #daece1; color: #166534; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-muted { background: #f3f4f6; color: #6b7280; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1rem; }
.data-table th { text-align: left; padding: 1rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 0.875rem; color: #4b5563; }
.data-table td { padding: 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; color: #111827; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal-content { background: #fff; width: 100%; max-width: 600px; border-radius: 1rem; overflow: hidden; }
.modal-header { padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 1rem; }
.tab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; background-color: transparent !important;}/* [PURGED: .btn-muted] */

.btn-icon { background: none; border: none; cursor: pointer; color: #6b7280; border-radius: 0.375rem; transition: background 0.2s; }
.btn-icon:hover { background: #f3f4f6; }
.btn-close { background: none; border: none;  cursor: pointer; color: #6b7280; border-radius: 0.375rem; transition: background 0.2s; }
.btn-close:hover { background: #f3f4f6; }
/* Order progress step pulse animation */
@keyframes pulse-step {
  0%, 100% { background-color: rgba(22, 101, 52, 0.03); border-color: rgba(22, 101, 52, 0.25); }
  50%       { background-color: rgba(22, 101, 52, 0.07); border-color: rgba(22, 101, 52, 0.55); }
}

/* Progress Tracker System */
.progress-list {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 1.5rem;
}

.progress-step-container {
  display: flex !important;
  flex-direction: column !important;
}

.progress-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  padding: 1rem !important;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  width: 100%;
}

.progress-row.active {
  animation: pulse-step 2.5s ease-in-out infinite;
  border-color: rgba(22, 101, 52, 0.35);
  background: rgba(22, 101, 52, 0.03);
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.progress-bullet {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease;
}

.progress-bullet.complete {
  background: var(--pico-primary) !important;
  color: white !important;
}

.progress-bullet.active {
  background: transparent !important;
  color: var(--pico-primary) !important;
  border: 2px solid rgba(22, 101, 52, 0.45) !important;
}

.progress-bullet.pending {
  background: transparent !important;
  color: var(--pico-muted-color) !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

.progress-content {
  flex: 1 !important;
  min-width: 0;
}

.progress-title {
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.progress-desc {
  font-size: 0.85rem !important;
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.4 !important;
  color: var(--pico-muted-color);
}

.progress-connector {
  width: 2px !important;
  height: 20px !important;
  margin-left: 28px !important; /* Center of 38px bullet + padding/align adjustments */
  transition: background 0.4s ease;
  background: rgba(0, 0, 0, 0.1);
}

.progress-connector.complete {
  background: var(--pico-primary) !important;
}

/* --- Inventory Card Optimization --- */
.inventory-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--surface-color) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.inventory-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -5px rgba(0,0,0,0.1) !important;
}

.inventory-card-body {
  overflow-y: auto !important;
  flex-grow: 1 !important;
  padding: 1rem !important;
  scrollbar-width: thin;
  scrollbar-color: var(--pico-muted-border-color) transparent;
}

.inventory-card-body::-webkit-scrollbar {
  width: 4px;
}

.inventory-card-body::-webkit-scrollbar-track {
  background: transparent;
}

.inventory-card-body::-webkit-scrollbar-thumb {
  background-color: var(--pico-muted-border-color);
  border-radius: 10px;
}

@media (min-width: 1024px) {
  .inventory-card {
    height: 300px !important;
  }
}


.toolbar-row{
  display: flex !important;
}