/* =====================================================================
   RAJGHARANA CENTRAL — GLOBAL DESIGN SYSTEM
   Premium Indian ethnic fashion e-commerce — Step 3
   Vanilla CSS3 only. No framework.
   =====================================================================
   Table of contents:
     1.  CSS variables
     2.  Reset and base styles
     3.  Typography
     4.  Container and layout utilities
     5.  Buttons
     6.  Form controls
     7.  Header
     8.  Navigation
     9.  Mobile menu
     10. Breadcrumbs
     11. Section headings
     12. Category cards
     13. Product cards
     14. Promotional banners
     15. Trust / feature blocks
     16. Footer
     17. WhatsApp floating button
     18. Utility classes
     19. Responsive breakpoints
     20. Accessibility and reduced-motion styles
   ===================================================================== */


/* =====================================================================
   1. CSS VARIABLES
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* --- Brand palette (do not rename — referenced throughout) --- */
  --color-maroon:   #4A0E17;
  --color-burgundy: #651D32;
  --color-ivory:    #FBF8F2;
  --color-white:    #FFFFFF;
  --color-gold:     #C5A869;
  --color-gold-light: #E6C887;
  --color-gold-dark:  #9D7B32;
  --color-charcoal: #292525;
  --color-grey:     #77716D;
  --color-border:   #E9E1D7;

  /* --- Semantic color roles (built from the palette above) --- */
  --color-bg:             var(--color-ivory);
  --color-surface:        var(--color-white);
  --color-text:           var(--color-charcoal);
  --color-text-muted:     var(--color-grey);
  --color-text-inverse:   var(--color-ivory);
  --color-primary:        var(--color-maroon);
  --color-primary-hover:  var(--color-burgundy);
  --color-accent:         var(--color-gold);
  --color-border-default: var(--color-border);
  --color-success:        #3F7A4E;
  --color-success-bg:     #EAF3EC;
  --color-error:          #B3261E;
  --color-error-bg:       #FBEAE9;

  /* --- Typography --- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', 'Segoe UI', Tahoma, Arial, sans-serif;

  --fs-xs:  0.75rem;   /* 12px */
  --fs-sm:  0.875rem;  /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md:  1.125rem;  /* 18px */
  --fs-lg:  1.375rem;  /* 22px */
  --fs-xl:  1.75rem;   /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 2.75rem;   /* 44px */

  --lh-tight:  1.2;
  --lh-normal: 1.65;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-padding: var(--space-4);

  /* --- Borders / radius (kept small and restrained, per brand direction) --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --border-width: 1px;

  /* --- Shadow (subtle only — no heavy drop shadows) --- */
  --shadow-sm: 0 1px 2px rgba(41, 37, 37, 0.07);
  --shadow-md: 0 4px 16px rgba(41, 37, 37, 0.09);

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* --- Z-index scale --- */
  --z-header: 100;
  --z-search-panel: 110;
  --z-mobile-overlay: 200;
  --z-mobile-nav: 210;
  --z-whatsapp: 150;
}


/* =====================================================================
   2. RESET AND BASE STYLES
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Prevent background scroll while the mobile menu/search overlay is open */
body.no-scroll {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border-default);
  margin: var(--space-6) 0;
}


/* =====================================================================
   3. TYPOGRAPHY
   ===================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}

.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.link:hover,
.link:focus-visible {
  color: var(--color-primary-hover);
}


/* =====================================================================
   4. CONTAINER AND LAYOUT UTILITIES
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-7);
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }


/* =====================================================================
   5. BUTTONS
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* touch-friendly target */
  padding: var(--space-3) var(--space-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-charcoal);
  color: var(--color-text-inverse);
  border-color: var(--color-charcoal);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: #171414;
  border-color: #171414;
}

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-gold {
  background: var(--color-accent);
  color: var(--color-charcoal);
  border-color: var(--color-accent);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background: #a5824a;
  border-color: #a5824a;
}

.btn-text {
  min-height: auto;
  padding: var(--space-1) 0;
  background: none;
  color: var(--color-primary);
  text-transform: none;
  letter-spacing: normal;
  border-bottom: var(--border-width) solid currentColor;
  border-radius: 0;
}

.btn-block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* =====================================================================
   6. FORM CONTROLS
   ===================================================================== */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.form-control {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(101, 29, 50, 0.12);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* Every <select class="form-control"> site-wide (sort dropdowns,
   filter dropdowns, address/checkout forms) was previously left to
   render the browser's own native dropdown arrow, which reserves its
   own (large, inconsistent-across-browsers) right-hand padding and
   can look oversized next to this site's otherwise compact controls.
   A small, fixed-size custom chevron replaces it everywhere. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2377716D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 11px 8px;
}

.form-error {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-error);
}

.form-control.has-error {
  border-color: var(--color-error);
}


/* =====================================================================
   7. HEADER
   ===================================================================== */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-3);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

.site-header {
  position: relative;
  z-index: var(--z-header);
}

.announcement-bar {
  background: #4A0E17;
  color: #FAF7F0;
  border-bottom: 1px solid rgba(197, 168, 105, 0.25);
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow: hidden;
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding-block: 6px;
  gap: 16px;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.announcement-bar__left,
.announcement-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.announcement-bar__center {
  flex: 1 1 auto;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-inline: 8px;
  font-weight: 500;
  color: #FAF7F0;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

@media (max-width: 1024px) {
  .announcement-bar__center {
    display: none;
  }
}

@media (max-width: 680px) {
  .announcement-bar__inner {
    justify-content: center;
  }
  .announcement-bar__right,
  .announcement-bar__left .announcement-bar__shipping-badge,
  .announcement-bar__left .announcement-bar__divider {
    display: none;
  }
}

.announcement-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FAF7F0;
  white-space: nowrap;
  font-size: 0.8125rem;
}

.announcement-bar__link {
  color: #FAF7F0;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.announcement-bar__link:hover,
.announcement-bar__link:focus-visible {
  color: var(--color-gold);
}

.announcement-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--color-gold);
}

.announcement-bar__icon svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  display: block;
}

.announcement-bar__divider {
  color: rgba(233, 225, 215, 0.35);
  user-select: none;
}

.header-main {
  position: sticky;
  top: 0;
  background: #FBF8F2;
  border-bottom: 1px solid #ECE4D8;
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.header-main.is-stuck {
  box-shadow: 0 4px 20px rgba(74, 14, 23, 0.08);
  background: #FAF7F0;
}

.header-main__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: 10px;
}

/* --- Logo --- */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.site-logo__image {
  height: 54px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  transition: transform var(--transition-fast);
}

.site-logo:hover .site-logo__image {
  transform: scale(1.02);
}

.site-logo__text {
  display: none; /* shown only as a fallback when the logo image fails to load */
  flex-direction: column;
  line-height: 1.1;
}

.site-logo.logo-fallback .site-logo__image {
  display: none;
}

.site-logo.logo-fallback .site-logo__text {
  display: flex;
}

.site-logo__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.site-logo__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Header actions (search / wishlist / account / cart / hamburger) --- */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  color: #3B0A11;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.icon-button:hover,
.icon-button:focus-visible {
  background: rgba(197, 168, 105, 0.12);
  color: #4A0E17;
  transform: translateY(-1px);
}

.icon-button--cart {
  position: relative;
}

.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4A0E17;
  color: #FAF7F0;
  border: 1px solid #C5A869;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

@keyframes cartBadgePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.cart-badge-pop {
  animation: cartBadgePop 0.35s ease;
}
}

/* --- Search panel (collapsible, triggered by the search icon) --- */

.search-panel {
  border-top: var(--border-width) solid var(--color-border-default);
  background: var(--color-bg);
  z-index: var(--z-search-panel);
}

.search-panel[hidden] {
  display: none;
}

.search-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.search-form__input {
  flex: 1;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.search-form__input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}

.search-form__clear {
  display: none;
  width: 32px;
  height: 32px;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-text-muted);
}

.search-form__clear.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding-inline: var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.search-form__submit svg {
  width: 16px;
  height: 16px;
}


/* =====================================================================
   8. NAVIGATION (desktop horizontal nav + mega-menu)
   ===================================================================== */

.main-nav {
  display: none; /* shown at the desktop breakpoint, section 19 */
  justify-self: center;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}

.main-nav__item {
  position: relative;
}

.main-nav__link,
.main-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3B0A11;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.main-nav__trigger svg {
  width: 9px;
  height: 9px;
  transition: transform var(--transition-fast);
}

.main-nav__link:hover,
.main-nav__link:focus-visible,
.main-nav__trigger:hover,
.main-nav__trigger:focus-visible,
.main-nav__item.is-open .main-nav__trigger,
.main-nav__link.is-active,
.main-nav__trigger.is-active {
  color: #4A0E17;
}

/* Active gold underline with diamond flourish matching reference */
.main-nav__flourish {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.main-nav__flourish::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #C5A869;
}

.main-nav__flourish::after {
  content: '◆';
  position: relative;
  z-index: 1;
  font-size: 8px;
  line-height: 1;
  color: #C5A869;
  background: #FBF8F2;
  padding: 0 4px;
}

.main-nav__item.is-open .main-nav__trigger svg {
  transform: rotate(180deg);
}

/* --- Mega menu panel --- */

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 560px;
  margin-top: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.main-nav__item.has-mega:hover > .mega-menu,
.main-nav__item.has-mega.is-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega-menu__inner {
  padding: var(--space-6);
}

.mega-menu__view-all {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: var(--border-width) solid var(--color-border-default);
  padding-bottom: var(--space-3);
  width: 100%;
}

.mega-menu__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-3);
}

.mega-menu__link {
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  color: var(--color-primary);
  padding-left: var(--space-2);
}


/* =====================================================================
   9. MOBILE MENU
   ===================================================================== */

.mobile-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(41, 37, 37, 0.5);
  z-index: var(--z-mobile-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mobile-nav-overlay[hidden] {
  display: none;
}

.mobile-nav-overlay.is-visible {
  opacity: 1;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobile-nav);
  visibility: hidden;
}

.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav.is-open {
  visibility: visible;
}

.mobile-nav.is-open .mobile-nav__panel {
  transform: translateX(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border-default);
}

.mobile-nav__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
}

.mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.mobile-nav__close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav__list {
  padding: var(--space-3) 0;
}

.mobile-nav__link,
.mobile-nav__accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border-default);
}

.mobile-nav__accordion-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform var(--transition-fast);
}

.mobile-nav__item.is-open > .mobile-nav__accordion-trigger svg {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  background: var(--color-bg);
}

.mobile-nav__submenu[hidden] {
  display: none;
}

.mobile-nav__submenu li a {
  display: block;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-7);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.mobile-nav__submenu li a:hover,
.mobile-nav__submenu li a:focus-visible {
  color: var(--color-primary);
}


/* =====================================================================
   10. BREADCRUMBS
   ===================================================================== */

.breadcrumbs {
  padding-block: var(--space-4);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.breadcrumbs__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs__list li:not(:last-child)::after {
  content: '/';
  color: var(--color-border-default);
}

.breadcrumbs__list a:hover,
.breadcrumbs__list a:focus-visible {
  color: var(--color-primary);
}

.breadcrumbs__list li[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}


/* =====================================================================
   11. SECTION HEADINGS
   ===================================================================== */

.section-heading {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-heading__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.section-heading__title {
  margin-bottom: var(--space-2);
}

.section-heading__subtitle {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.section-heading__rule {
  display: inline-block;
  width: 56px;
  height: 2px;
  margin-top: var(--space-3);
  background: var(--color-accent);
}


/* =====================================================================
   12. CATEGORY CARDS
   ===================================================================== */

.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-border-default);
}

.category-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.category-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.category-card:hover .category-card__image-wrap img,
.category-card:focus-visible .category-card__image-wrap img {
  transform: scale(1.04);
}

.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(41, 37, 37, 0.65) 0%, rgba(41, 37, 37, 0) 55%);
}

.category-card__label {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
}


/* =====================================================================
   13. PRODUCT CARDS
   ===================================================================== */

.product-card {
  position: relative;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.product-card:hover,
.product-card:focus-within {
  box-shadow: var(--shadow-md);
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-bg);
}

.product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.product-card:hover .product-card__image-wrap img,
.product-card:focus-within .product-card__image-wrap img {
  transform: scale(1.03);
}

.product-card__wishlist {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

.product-card__wishlist svg {
  width: 16px;
  height: 16px;
}

/* Shared by both wishlist buttons (product-card.php icon and
   product.php's labeled button) — Step 14, Tier 2. */
.js-wishlist-toggle.is-active {
  color: var(--color-primary);
}

.js-wishlist-toggle.is-active svg {
  fill: currentColor;
}

.product-card__body {
  padding: var(--space-4);
}

.product-card__category {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.product-card__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 8px;
}

.product-card__price {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #4A0E17;
}

.product-card__price--regular {
  font-size: 13px;
  color: #8C827A;
  text-decoration: line-through;
}

.product-card__badge-discount {
  display: inline-block;
  background-color: #4A0E17;
  color: #FAF7F0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* Reusable solid maroon ADD TO CART button on all product cards */
.btn-product-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin-top: 8px;
  background-color: #4A0E17;
  color: #FFFFFF;
  border: 1px solid #4A0E17;
  border-radius: 4px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 1.2;
  box-sizing: border-box;
}

.btn-product-cart__icon {
  display: inline-flex;
  align-items: center;
}

.btn-product-cart svg {
  width: 15px;
  height: 15px;
  stroke: #FFFFFF;
  transition: stroke 0.25s ease;
}

.btn-product-cart:hover,
.btn-product-cart:focus-visible {
  background-color: #C5A869;
  border-color: #C5A869;
  color: #3A080F;
  box-shadow: 0 4px 12px rgba(197, 168, 105, 0.35);
  transform: translateY(-1px);
}

.btn-product-cart:hover svg,
.btn-product-cart:focus-visible svg {
  stroke: #3A080F;
}

.btn-product-cart:active {
  transform: translateY(0);
}

.btn-product-cart.is-success {
  background-color: #2E7D32;
  border-color: #2E7D32;
  color: #FFFFFF;
}

.btn-product-cart.is-out-of-stock {
  background-color: #E0D7CD;
  border-color: #D1C5B8;
  color: #8C8075;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.product-card__status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Product grid — used on the homepage (New Arrivals/Best Sellers) and
   on the Step 5 Shop/Category/Search listing pages. Lives here, not in
   a page-specific stylesheet, because it's shared by both. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

/* Below ~380px two columns leave too little room per card (image,
   name, price and wishlist button all competing for the same narrow
   width) — drop to one column only on genuinely small phones. */
@media (max-width: 380px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Graceful image fallback — wrap any <img> whose source may not exist
   yet in `.media`. assets/js/main.js detects a failed/broken image and
   adds `.img-fallback` to this wrapper; the image is hidden and a
   neutral placeholder message takes its place instead of a broken-image
   icon. Used by the hero, category/craft/product cards and promo
   banners (home.css) as well as the Step 5 listing pages (shop.css). */
.media {
  position: relative;
}

.media__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-border-default);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.media.img-fallback img {
  display: none;
}

.media.img-fallback .media__fallback {
  display: flex;
}


/* =====================================================================
   14. PROMOTIONAL BANNERS
   ===================================================================== */

.promo-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 280px;
  padding: var(--space-7) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.promo-banner__content {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.promo-banner__eyebrow {
  color: var(--color-accent);
}

.promo-banner__title {
  color: var(--color-text-inverse);
  margin-bottom: var(--space-3);
}

.promo-banner__text {
  color: rgba(250, 247, 240, 0.85);
  margin-bottom: var(--space-5);
}


/* =====================================================================
   15. TRUST / FEATURE BLOCKS
   ===================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.feature-block {
  text-align: center;
}

.feature-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-primary);
}

.feature-block__icon svg {
  width: 26px;
  height: 26px;
}

.feature-block__title {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}

.feature-block__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}


/* =====================================================================
   16. FOOTER
   ===================================================================== */

.site-footer {
  background: var(--color-charcoal);
  color: rgba(250, 247, 240, 0.85);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding-block: var(--space-8);
}

.footer-col__heading {
  color: var(--color-text-inverse);
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col__text {
  color: rgba(250, 247, 240, 0.75);
  font-size: var(--fs-sm);
  max-width: 320px;
}

.footer-col__list li {
  margin-bottom: var(--space-3);
}

.footer-col__list a {
  font-size: var(--fs-sm);
  color: rgba(250, 247, 240, 0.75);
  transition: color var(--transition-fast);
}

.footer-col__list a:hover,
.footer-col__list a:focus-visible {
  color: var(--color-accent);
}

.footer-col__list--contact li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-whatsapp-link svg {
  width: 16px;
  height: 16px;
}

.site-logo--footer .site-logo__title,
.site-logo--footer .site-logo__subtitle {
  color: var(--color-text-inverse);
}

.footer-social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.footer-social__link {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.75);
  border-bottom: var(--border-width) solid rgba(250, 247, 240, 0.3);
  padding-bottom: 2px;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.footer-bottom {
  border-top: var(--border-width) solid rgba(250, 247, 240, 0.12);
  padding-block: var(--space-4);
}

.footer-bottom p {
  margin: 0;
  font-size: var(--fs-xs);
  text-align: center;
  color: rgba(250, 247, 240, 0.6);
}


/* =====================================================================
   17. WHATSAPP FLOATING BUTTON
   ===================================================================== */

.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-whatsapp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: var(--color-white);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.06);
}


/* =====================================================================
   18. UTILITY CLASSES
   ===================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared honeypot pattern (Step 14, Tier 3) — same visual treatment
   api/newsletter-subscribe.php's form has used since Step 4
   (home.css's .newsletter-form__honeypot), promoted here so any form
   site-wide can reuse it instead of redefining it per page. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-wrap { flex-wrap: wrap; }

.max-w-xs { max-width: 280px; }
.max-w-sm { max-width: 360px; }
.max-w-md { max-width: 480px; }

/* Neutral placeholder block — used only where a real image/data source
   does not exist yet (e.g. component-preview.php); never used for real
   catalog imagery. */
.preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-border-default);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.preview-placeholder--inverse {
  background: var(--color-primary);
  color: rgba(250, 247, 240, 0.7);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border: var(--border-width) solid transparent;
}

.alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state__title {
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
}

.skeleton--line {
  height: 24px;
  width: 100%;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}


/* =====================================================================
   19. RESPONSIVE BREAKPOINTS
   =====================================================================
   Reference scale used throughout this stylesheet (component-specific
   responsive rules live next to each component above, grouped under
   these same breakpoints, for easier maintenance):
     Mobile:  360px, 375px, 390px, 414px  → base styles below are mobile-first
     Tablet:  768px, 820px, 1024px
     Desktop: 1280px, 1440px, 1920px
   This section holds only the cross-cutting rules that affect overall
   page chrome rather than one single component.
   ===================================================================== */

@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .main-nav {
    display: block;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .mobile-nav,
  .mobile-nav-overlay {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}

@media (max-width: 1023px) {
  .header-main__inner {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 480px) {
  .header-actions {
    gap: 0;
  }

  .mega-menu {
    min-width: 92vw;
  }
}


/* =====================================================================
   20. ACCESSIBILITY AND REDUCED-MOTION STYLES
   ===================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}