/* =====================================================================
   1. ROOT VARIABLES
   ===================================================================== */
:root {
  /* Core palette */
  --color-primary: #11100e;
  --color-secondary: #292622;
  --color-accent: #f26b45;
  --color-accent-dark: #df5634;
  --color-bg: #f5eee7;
  --color-bg-soft: #eee5dc;
  --color-bg-cream: #eadccd;
  --color-white: #ffffff;
  --color-off-white: #fcfaf7;

  /* Text */
  --text-primary: #11100e;
  --text-secondary: #5e5953;
  --text-muted: #8b857e;

  /* Borders */
  --border-light: rgba(17, 16, 14, 0.1);
  --border-medium: rgba(17, 16, 14, 0.16);

  /* Typography */
  --font-display: "Cormorant Garamond", serif;
  --font-body: "Inter", sans-serif;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;

  /* Shadows */
  --shadow-soft: 0 10px 40px rgba(30, 24, 18, 0.06);
  --shadow-card: 0 20px 60px rgba(30, 24, 18, 0.08);

  /* Transitions */
  --transition-fast: 0.25s ease;
  --transition-normal: 0.45s ease;
  --transition-slow: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --section-padding: clamp(70px, 8vw, 130px);
  --container-max: 1400px;

  /* Hero-section palette (originally its own :root) */
  --beige: #eedbc8;
  --beige-2: #e7cfb8;
  --cream: #f3e3d4;
  --white: #ffffff;
  --black: #0e0e0e;
  --text: #5d5149;
  --accent: #e68f70;
  --border: #e5a080;

  /* Glow / About section palette (originally its own :root) */
  --glow-orange: #df694d;
  --glow-bg-light: #fdfbf8;
  --glow-bg-main: #f4efea;
  --text-dark: #222222;
  --text-gray: #777777;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Inter", sans-serif;
  --font-cursive: "Great Vibes", cursive;
}

/* =====================================================================
   2. GLOBAL RESET & BASE ELEMENTS
   ===================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-off-white);
  color: var(--text-primary);
  line-height: 1.6;
}

.container-custom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 50px);
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}

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

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

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  outline: none;
}

section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* =====================================================================
   3. UTILITY CLASSES
   ===================================================================== */
.display-font {
  font-family: var(--font-display);
}

.body-font {
  font-family: var(--font-body);
}

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

.section-heading {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}

.section-heading-lg {
  font-size: clamp(42px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.section-subtext {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 520px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-primary:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(242, 107, 69, 0.25);
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 14px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-accent:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.circular-btn {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-primary);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--transition-normal);
  cursor: pointer;
}

.circular-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.05);
}

.circular-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, 22px);
  opacity: 0.4;
  transition: var(--transition-normal);
}

.circular-btn:hover::after {
  opacity: 0;
}

.rounded-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.rounded-img-xl {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.rounded-img-md {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rounded-img-sm {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform var(--transition-slow);
}

.img-zoom:hover img {
  transform: scale(1.08);
}

.space-y-xs > * + * {
  margin-top: var(--space-xs);
}
.space-y-sm > * + * {
  margin-top: var(--space-sm);
}
.space-y-md > * + * {
  margin-top: var(--space-md);
}
.space-y-lg > * + * {
  margin-top: var(--space-lg);
}
.space-y-xl > * + * {
  margin-top: var(--space-xl);
}

/* =====================================================================
   4. NAVBAR
   ===================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 20px 0;
  transition: var(--transition-normal);
  /* Always-on frosted backdrop so the navbar looks identical on every page,
     whether it sits over a light hero (home) or a dark banner image (inner
     pages) — one consistent professional look, not a per-page color switch. */
  background: rgba(252, 250, 247, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(17, 16, 14, 0.05);
}

.navbar.scrolled {
  background: rgba(252, 250, 247, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 0;
  box-shadow: 0 2px 30px rgba(17, 16, 14, 0.06);
  border-bottom: 1px solid var(--border-light);
}

.navbar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.navbar-logo {
  display: block;
  height: 64px;
  width: auto; /* derive width from the logo's real aspect ratio (now that the source PNG is cropped tight to the artwork, this renders it at its true visible size instead of mostly empty padding) */
  object-fit: contain;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-direction: row;
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 6px 0;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: var(--transition-normal);
}

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

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.navbar-actions .nav-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 19px;
  transition: var(--transition-fast);
  cursor: pointer;
}

.navbar-actions .nav-icon:hover {
  background: var(--color-bg-soft);
  color: var(--color-accent);
}

.currency-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 50px;
  transition: var(--transition-fast);
  cursor: pointer;
}

.currency-selector:hover {
  background: var(--color-bg-soft);
  color: var(--text-primary);
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 1001;
  transition: var(--transition-fast);
}

.mobile-toggle:hover {
  background: var(--color-bg-soft);
}

/* ---------- Mega Menu (Shop) ---------- */
.nav-item-mega {
  position: relative;
}

.mega-caret {
  font-size: 15px;
  vertical-align: -2px;
  transition: var(--transition-fast);
}

.nav-item-mega:hover .mega-caret {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.mega-menu {
  position: absolute;
  /* top: 100% (no gap) on purpose — a gap here (it used to be
     calc(100% + 22px)) is a dead zone the cursor has to cross with
     nothing under it, which drops :hover on .nav-item-mega before the
     mouse ever reaches the menu, so it closes the instant you move
     toward it. Touching the nav item keeps the hover chain unbroken;
     the slide-down feel still comes from the translateY(8px)->0 below. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 680px;
  max-width: 90vw;
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1000;
}

.nav-item-mega:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.3fr;
  gap: 28px;
  padding: 32px;
}

.mega-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  white-space: nowrap;
}

.mega-col a {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  padding: 7px 0;
  transition: var(--transition-fast);
}

.mega-col a:hover {
  color: var(--color-accent);
  transform: translateX(3px);
}

.mega-promo {
  display: block;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-soft);
  text-align: left;
}

.mega-promo img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.mega-promo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}

.mega-promo-text {
  padding: 14px 16px 18px;
}

.mega-promo-text h5 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mega-promo-text p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.mega-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 1280px) {
  .mega-menu {
    width: 600px;
  }

  .mega-menu-inner {
    grid-template-columns: repeat(3, 1fr) 1.1fr;
    gap: 20px;
    padding: 26px;
  }
}

/* ---------- Mega Menu (Categories variant: 2 columns + Best Selling list) ---------- */
.mega-menu-cats {
  width: 600px;
}

.mega-menu-cats .mega-menu-inner {
  grid-template-columns: 1fr 1fr 1.5fr;
}

.mega-best-selling {
  border-left: 1px solid var(--border-light);
  padding-left: 24px;
}

.mega-best-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.mega-best-item img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-bg-soft);
  flex-shrink: 0;
}

.mega-best-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-best-name {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.mega-best-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
}

.mega-best-item:hover .mega-best-name {
  color: var(--color-accent);
}

@media (max-width: 1280px) {
  .mega-menu-cats {
    width: 560px;
  }
}

/* ---------- Mobile submenu (Shop categories accordion) ---------- */
.mobile-submenu-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-submenu-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.mobile-submenu-toggle:hover {
  background: var(--color-bg-soft);
}

.mobile-submenu-toggle.open i {
  transform: rotate(180deg);
}

.mobile-submenu-toggle i {
  transition: var(--transition-fast);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-submenu.open {
  max-height: 500px;
}

.mobile-submenu li {
  list-style: none;
}

.mobile-submenu a {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--border-light);
}

.mobile-submenu a:hover {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-off-white);
  z-index: 1000;
  padding: 100px 32px 32px;
  /* Parked off-canvas with a transform (not `right: -100%`) — a percentage
     offset on a fixed element is relative to the viewport, so it doesn't
     just move by its own width, it moves by a full extra viewport-width,
     which browsers still count toward the page's scrollable area (a
     "phantom" horizontal scroll on every page). `translateX` moves the box
     visually without affecting layout/scroll size, and — unlike the
     overflow-x:hidden fix tried earlier — doesn't break `position: sticky`
     elsewhere on the page (an ancestor with overflow-x:hidden stops sticky
     from working at all, which is worse than the scroll gap it fixed). */
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: -10px 0 60px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.4);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

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

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-nav .nav-link {
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu-nav .nav-link::after {
  display: none;
}

.mobile-menu-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 32px;
  flex-wrap: wrap;
}

.mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.mobile-close:hover {
  background: var(--color-bg-soft);
  transform: rotate(90deg);
}

/* =====================================================================
   5. RESPONSIVE NAVBAR (Media Queries)
   ===================================================================== */

/* Tablets & Mobile Landscape (1024px aur us se neechay) */
@media (max-width: 1024px) {
  .navbar-nav {
    display: none !important; 
  }

  .mobile-toggle {
    display: flex !important; 
  }

  .navbar-actions {
    gap: 12px; 
  }
}

/* Mobile Portrait (576px aur us se neechay) */
@media (max-width: 576px) {
  .navbar {
    padding: 15px 0; 
  }

  .navbar-brand {
    font-size: 18px;
    gap: 6px;
  }

  .navbar-logo {
    height: 52px;
    width: auto;
  }

  .navbar-actions .nav-icon {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }

  .mobile-toggle {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .mobile-menu {
    max-width: 80vw;
    padding: 80px 24px 24px;
  }
}

/* Extra Small Phones (320px - 360px) */
@media (max-width: 360px) {
  .navbar-wrapper {
    gap: 15px; 
  }

  .navbar-actions {
    gap: 5px;
  }
 
  .navbar-actions .nav-icon[aria-label="Account"] {
    display: none; 
  }
}


/* =====================================================================
   5. HERO SECTION
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f1dfcc 0%, #e9d2bc 60%, #e4cbb2 100%);
  padding: 25px 0 0 0;
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  min-height: 620px;
}

/* ---------- Left content ---------- */
.content {
  position: relative;
  z-index: 4;
  padding-right: 20px;
  padding-top: 70px;
}

.heading {
  font-family: "Bodoni Moda", serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -2px;
  line-height: 0.68;
  color: var(--black);
  font-size: clamp(38px, 4.6vw, 62px);
  margin: 0;
  position: relative;
}

.heading .line {
  display: block;
}

.heading .script {
  font-family: "Allura", cursive;
  text-transform: none;
  color: var(--color-accent);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.99em;
  display: inline-block;
  margin: 0 2px;
}

.desc {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  max-width: 380px;
  margin: 30px 0 30px 0;
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  font-family: "Poppins", sans-serif;
}

.cta-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
  flex-shrink: 0;
}

.cta-circle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.cta:hover .cta-circle {
  transform: scale(1.08);
  background: var(--color-accent);
  color: #fff;
}
.cta:hover .cta-circle svg {
  transform: translate(2px, -2px);
}

.cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--black);
}

/* ---------- Reviews ---------- */
.reviews {
  display: flex;
  flex-direction: row;
  gap: 10px;
  position: relative;
  z-index: 5;
}

.avatars {
  display: flex;
}

.avatars .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--beige);
  margin-left: -10px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.avatars .avatar:first-child {
  margin-left: 0;
}

.rating-row {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0px;
}

.stars {
  color: var(--black);
  font-size: 13px;
  letter-spacing: 2px;
}

.rating-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
}

.happy-text {
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* ---------- Premium badge ---------- */
.badge {
  position: absolute;
  bottom: -60px;
  width: 128px;
  right: 20px;
  height: 128px;
  z-index: 6;
}

.badge-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(14, 14, 14, 0.12);
}

.badge svg.rotate {
  width: 100%;
  height: 100%;
  animation: spin 18s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.badge text {
  font-family: "Poppins", sans-serif;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 2px;
  word-spacing: 5px;
  text-transform: uppercase;
  fill: var(--black);
}

.badge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

/* ---------- Right image ---------- */
.image-area {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 58%;
  z-index: 2;
}

.image-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: -20px;
}

.image-scene img {
  position: absolute;
  right: -4%;
  height: 92%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(60, 40, 20, 0.18));
}

/* ---------- Bottom white curve ---------- */
.bottom-curve {
  position: relative;
  z-index: 3;
  background-image: url("../Images/Website/hero-bottom.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -130px;
  border-top-left-radius: 0;
  height: 250px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* ---------- Bottom media card ---------- */
.media-card {
  position: relative;
  width: 54.45%;
  margin-top: 20px;
  margin-right: 20px;
  overflow: visible;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255, 255, 255, 0.5);
}
.play-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 3px;
}

/* ---------- Hero entrance animations ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim {
  animation: fadeUp 0.8s ease both;
}
.anim.d1 {
  animation-delay: 0.05s;
}
.anim.d2 {
  animation-delay: 0.2s;
}
.anim.d3 {
  animation-delay: 0.35s;
}
.anim.d4 {
  animation-delay: 0.5s;
}
.anim.d5 {
  animation-delay: 0.65s;
}

/* =====================================================================
   6. HERO SECTION - RESPONSIVE (MEDIA QUERIES)
   ===================================================================== */

   /* =====================================================================
   FIX FOR TEXT SPACING (1280px to 992px)
   ===================================================================== */
@media (max-width: 1280px) and (min-width: 992px) {
  .hero-inner {
    padding-left: 40px; /* Text aur left screen edge ke darmiyan spacing */
    padding-right: 20px; /* Right side se bhi thora safe zone */
  }
}

/* Ultra Wide Screens (1920px, 2560px) */
@media (min-width: 1440px) {
  .media-card {
    max-width: 830px; /* Prevent image from getting excessively large */
  }
}

/* Small Laptops & Landscape Tablets (1024px, 912px) */
@media (max-width: 1199px) {
  .hero-inner {
    grid-template-columns: 50% 50%; /* Equalize grid */
  }
  .image-area {
    width: 50%; /* Match grid */
  }
  .media-card {
    width: 60%;
  }
}

@media (max-width: 1024px) {
  .content {
    padding-top: 50px;
  }
  .heading {
    font-size: clamp(32px, 4.5vw, 48px); /* Slightly scale down */
  }
  .desc {
    max-width: 95%;
  }
  .badge {
    width: 100px;
    height: 100px;
    bottom: -30px;
  }
  .bottom-curve {
    margin-top: -80px;
    height: 200px;
  }
}

/* Tablets Portrait & Mobile Landscape (820px, 768px) - STACKING LAYOUT */
@media (max-width: 991px) {
  .hero-inner {
    display: flex;
    flex-direction: column; /* Stack elements top to bottom */
    padding: 0 20px;
    min-height: auto;
  }
  
  .content {
    padding-top: 120px; /* Space for fixed mobile navbar */
    padding-right: 0;
    width: 100%;
    z-index: 10;
  }
  
  .desc {
    max-width: 100%;
    margin-right: auto;
  }
  
  /* Badge adjustments for stacked layout */
  .badge {
    bottom: -80px;
    right: 10px;
    z-index: 15;
  }

  /* Change Absolute image to Relative so it flows below text */
  .image-area {
    position: relative;
    width: 100%;
    height: 500px; /* Fixed height for products to sit in */
    margin-top: 30px;
  }
  
  .image-scene {
    margin-top: 0;
    height: 100%;
  }
  
  .image-scene img {
    position: relative;
    right: auto;
    left: 50%;
    transform: translateX(-50%); /* Center the products horizontally */
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Adjust bottom curve so it doesn't break on mobile */
  .bottom-curve {
    margin-top: 0;
    background-image: none; /* Desktop background curve is removed for mobile */
    background-color: #ffffff; /* Added white background instead */
    border-top-left-radius: 40px; /* Simulated CSS curve */
    border-top-right-radius: 40px;
    height: auto;
    padding: 25px;
    justify-content: center;
  }
  
  .media-card {
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    border-radius: 20px;
    overflow: hidden;
  }
}

/* Mobile Phones (576px, 480px, 414px) */
@media (max-width: 768px) {
  .image-area {
    height: 400px; /* Smaller product image container */
  }
  .badge {
    width: 90px;
    height: 90px;
    bottom: -60px;
  }
}

@media (max-width: 576px) {
  .hero {
    padding-top: 0;
  }
  .content {
    padding-top: 100px;
  }
  .image-area {
    height: 320px;
  }
  .bottom-curve {
    padding: 15px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
  .reviews {
    flex-wrap: wrap; /* Prevent overlap on tight screens */
  }
}

/* Extra Small Phones (390px, 375px, 320px) */
@media (max-width: 400px) {
  .heading {
    font-size: 34px;
  }
  .heading .script {
    font-size: 1.6em;
  }
  .image-area {
    height: 260px;
  }
  .badge {
    width: 75px;
    height: 75px;
    bottom: -40px;
  }
}

/* =====================================================================
   FIX FOR SMALL DESKTOPS & TABLETS (992px to 1440px)
   ===================================================================== */
@media (max-width: 1440px) and (min-width: 992px) {
  
  .hero-inner {
    grid-template-columns: 50% 50%; /* Dono sections (Text aur Image) ko equal 50/50 space diya */
  }
  
  .image-area {
    width: 50%; /* Product area ko grid ke hisab se set kiya */
  }
  
  .image-scene img {
    right: 0; /* Product image ko overlap hone se roka */
  }

  /* 🛠️ Bottom Curve (White shape) Fix */
  .bottom-curve {
    background-size: 100% 100%; /* Image ko dono taraf perfectly stretch karega (cut nahi hogi) */
    background-position: right bottom;
    height: 18vw; /* Height ko screen size ke hisab se dynamic (responsive) kar diya */
    margin-top: -10vw; /* Curve ko text ke qareeb kiya */
  }

  /* 🛠️ Girl Image (Media Card) Fix */
  .media-card {
    width: 52%; /* Image card ko perfect width par lock kiya */
    margin-top: 1.5vw;
    margin-right: 20px;
  }
  
  /* Badge spacing fix */
  .badge {
    right: 5px; 
  }
}

/* =====================================================================
   6. STYLE / ACCORDION SECTION
   ===================================================================== */
.style-section {
  margin-top: -10px;
  z-index: 5;
  position: relative;
  padding-bottom: 60px;
  background-color: var(--color-white);
}

/* ---------- Header layout ---------- */
.style-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}

.style-header .section-heading {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 54px);
}

.style-header .section-subtext {
  text-align: left;
  max-width: 500px;
  margin-right: 85px;
  margin-top: 44px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- Main flex layout ---------- */
.style-content-flex {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

/* ---------- Left column: accordion ---------- */
.style-accordion {
  width: 32%; /* exactly 1/3rd space */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-item {
  background-color: #f8f7f5; /* light cream background */
  border-radius: var(--radius-md) !important;
  padding: 22px 28px;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.accordion-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accordion-item h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

/* Accordion icons */
.acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* Small grey dot for inactive items */
.inactive-icon {
  width: 6px;
  height: 6px;
  background-color: #b0b0b0;
  border-radius: 50%;
  display: block;
}

.active-icon {
  display: none;
  color: var(--color-accent);
}

/* Accordion body (text below title) */
.accordion-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all var(--transition-normal);
  padding-left: 32px; /* align text under the heading */
}

.accordion-body p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Active state of accordion */
.accordion-item.active {
  background-color: #11100e;
  box-shadow: var(--shadow-card);
}

.accordion-item.active h3 {
  color: var(--color-white);
}

.accordion-item.active .inactive-icon {
  display: none;
}

.accordion-item.active .active-icon {
  display: flex;
}

.accordion-item.active .accordion-body {
  max-height: 120px;
  opacity: 1;
}

/* ---------- Middle column: tall image ---------- */
.style-img-middle {
  width: 29%;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
}

.style-img-middle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Right column: wide image + link ---------- */
.style-img-right {
  width: 40%;
  display: flex;
  flex-direction: column;
}

.style-img-right .img-wrapper {
  flex-grow: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.style-img-right .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.learn-more-link {
  align-self: flex-end;
  color: var(--color-secondary);
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
  margin-top: 25px;
  line-height: 17px;
  transition: color var(--transition-fast);
}

/* This whole 3-column flex row (accordion + two images) had no responsive
   rule at all, so at tablet/mobile widths the fixed 32%/29%/40% split kept
   squeezing all three side by side into ~100-150px columns — the accordion
   headings were wrapping one word per line inside tiny boxes. Stack it. */
@media (max-width: 991px) {
  .style-content-flex {
    flex-direction: column;
  }

  .style-accordion,
  .style-img-middle,
  .style-img-right {
    width: 100%;
  }

  .style-img-middle {
    aspect-ratio: 16 / 10;
  }

  .style-img-right .img-wrapper {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 576px) {
  .style-header .section-subtext {
    margin-right: 0;
    margin-top: 16px;
  }

  .accordion-item {
    padding: 18px 20px;
  }
}

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

/* =====================================================================
   7. CURVED CARDS SLIDER SECTION
   ===================================================================== */
.curved-slider-section {
  padding: var(--section-padding) 0 30px;
  background: var(--color-off-white);
  overflow: hidden;
}

.curved-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.curved-slider-header .section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(32px, 4.2vw, 56px);
  max-width: 640px;
  margin: 0;
  color: var(--text-primary);
}

.curved-slider-header .section-subtext {
  text-align: left;
  max-width: 500px;
  margin-top: 44px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ---------- Swiper wrapper ---------- */
.curved-swiper-outer {
  position: relative;
  padding: 40px 0 70px;
}

.curved-swiper {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 100px;
  /* room for the tilted side cards so nothing clips */
}

.curved-swiper .swiper-slide {
  width: 300px;
  height: 430px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  background: var(--color-bg-soft);
  cursor: grab;
  transition: box-shadow var(--transition-normal);
}

.curved-swiper .swiper-slide:active {
  cursor: grabbing;
}

.curved-swiper .swiper-slide-active {
  box-shadow: 0 30px 70px rgba(17, 16, 14, 0.18);
}

.curved-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark gradient so name text is legible on any photo */
.curved-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.25) 32%,
    rgba(0, 0, 0, 0) 60%
  );
  pointer-events: none;
}

.curved-card {
  position: relative;
  width: 100%;
  height: 100%;
}

.curved-card-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 16px;
  border-radius: 50px;
  backdrop-filter: blur(6px);
}

.curved-card-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 24px;
  z-index: 3;
  color: var(--color-white);
}

.curved-card-caption h4 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.15;
}

.curved-card-caption span {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.01em;
}

/* ---------- Nav arrows ---------- */
.curved-swiper-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.curved-swiper-nav .nav-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--text-primary);
  background: transparent;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: var(--transition-normal);
}

.curved-swiper-nav .nav-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.06);
}

.curved-swiper-nav .nav-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Pagination dots ---------- */
.curved-swiper-pagination {
  position: static !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -35px;
}

.curved-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--border-medium);
  opacity: 1;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.curved-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
  width: 22px;
  border-radius: 50px;
}

/* =====================================================================
   8. GLOW / ABOUT SECTION (Features bar + Ingredients)
   ===================================================================== */
.glow-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Top features bar ---------- */
.glow-features-bar {
  padding: 30px 0;
}

.features-row {
  background-color: var(--glow-bg-light);
  border-radius: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  box-shadow: 0 0px 30px rgb(0 0 0 / 5%);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.f-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-dark);
}

.f-content {
  display: flex;
  flex-direction: column;
}

.f-num {
  color: var(--glow-orange);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  margin-bottom: 2px;
}

.f-content h4 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 3px 0;
  letter-spacing: 0.5px;
}

.f-content p {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-gray);
}

.f-divider {
  width: 1px;
  height: 35px;
  background-color: #e2dcd5;
}

/* ---------- Main glow section ---------- */
.glow-main-section {
  padding: 0px;
}

.wrapper-box {
  background-color: #f1e8df;
  border-radius: 20px;
  display: flex;
  padding: 0px;
  position: relative;
  overflow: hidden;
}

/* Left column */
.glow-left-col {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding: 60px;
  background-image: url(../Images/Website/about-main.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  z-index: 2;
}

.orange-tag {
  color: var(--glow-orange);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 20px;
}

.main-heading {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.1;
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 20px;
}

.cursive-text {
  font-family: "Allura", cursive;
  color: var(--glow-orange);
  font-size: 80px;
  line-height: 0.8;
  display: block;
  margin-top: 10px;
}

.main-desc {
  font-family: var(--font-sans);
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 90%;
}

.glow-btn {
  display: inline-block;
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 30px;
  letter-spacing: 1px;
  transition: 0.3s ease;
}

.glow-btn:hover {
  background-color: #c7563d;
}

.product-img-box {
  margin-top: 40px;
  width: 100%;
}

.main-product-img {
  width: 100%;
  max-width: 350px;
  border-radius: 15px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Right column */
.glow-right-col {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 40px;
}

.ingredient-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Image + gradient cards */
.ig-card {
  border-radius: 15px;
  padding: 30px;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.ig-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 15px;
  line-height: 1.2;
}

.ig-card hr {
  border: none;
  border-top: 1.5px solid var(--text-dark);
  width: 25px;
  margin-bottom: 15px;
}

.ig-benefits {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 15px;
}

.ig-card p {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-gray);
  line-height: 1.5;
  margin-bottom: 25px;
  max-width: 80%;
}

.explore-link {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
  letter-spacing: 1px;
}

/* Neither the features bar nor the ingredients ("glow") section had any
   responsive rule. The features bar's 5 items + dividers had no wrap, so
   they just got clipped past the viewport edge on small screens. The glow
   section's 40%/60% columns squeezed the 48px heading and cursive script
   into a ~150px-wide box; long words like "BEHIND" couldn't wrap and spilled
   past their column, visually overlapping the ingredient cards next to it. */
@media (max-width: 991px) {
  .wrapper-box {
    flex-direction: column;
  }

  .glow-left-col,
  .glow-right-col {
    width: 100%;
  }

  .glow-left-col {
    padding: 48px 32px;
    background-position: center;
  }

  .glow-right-col {
    padding: 32px 28px;
  }

  .main-desc {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .features-row {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
    column-gap: 32px;
    padding: 24px 28px;
    border-radius: 28px;
  }

  .f-divider {
    display: none;
  }
}

@media (max-width: 576px) {
  .main-heading {
    font-size: clamp(30px, 9vw, 48px);
  }

  .cursive-text {
    font-size: clamp(46px, 14vw, 80px);
  }

  .ingredient-cards-grid {
    grid-template-columns: 1fr;
  }

  .ig-card p {
    max-width: 100%;
  }
}

/* Bottom trust badges */
.bottom-trust-badges {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-item i {
  font-size: 24px;
  color: var(--text-dark);
}

.badge-item h5 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.badge-item span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-gray);
}

/* =====================================================================
   9. PRODUCTS SLIDER SECTION
   ===================================================================== */
.products-slider-section {
  padding: 60px 0;
  margin-top: 40px;
  background: var(--color-off-white);
  overflow: hidden;
}

.products-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: clamp(44px, 5vw, 70px);
}

.products-slider-header .tag-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.products-slider-header .section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(28px, 3.4vw, 42px);
  max-width: 560px;
  margin: 0;
  color: var(--text-primary);
}

.products-slider-header .section-subtext {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 320px;
  margin-top: 40px;
  text-align: left;
  margin-right: 80px;
}

/* ---------- Swiper wrapper ---------- */
.products-swiper-outer {
  position: relative;
}

.products-swiper {
  width: 100%;
  padding-bottom: 8px;
}

.products-swiper .swiper-slide {
  width: 100%;
  height: auto;
  display: flex;
  align-self: stretch;
}

/* ---------- Product card ----------
   Single seamless surface: the card itself carries the background,
   radius and shadow; the image and info panel are just sections inside
   it (no separate rounded corners / overlap trick that used to make
   two adjoining cards read as a stack). */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: grab;
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 16, 14, 0.07);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.product-card:hover {
  box-shadow: var(--shadow-card);
}

.product-card:active {
  cursor: grabbing;
}

.product-card-img {
  position: relative;
  overflow: hidden;
  /* 4:5 ratio gives every card the same image height.
     object-fit: cover ensures the image always fills the frame
     completely — professional full-bleed look, no white gaps. */
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
}

.product-card-img img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform var(--transition-normal);
}

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

/* ---------- Out of stock ---------- */
.product-card.is-out-of-stock .product-card-img img {
  filter: grayscale(85%);
  opacity: 0.65;
}

/* Same hover zoom would look odd on a muted, unbuyable card — freeze it. */
.product-card.is-out-of-stock:hover .product-card-img img {
  transform: none;
}

.out-of-stock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered ribbon over the dimmed image reads better here than the small
   top-left corner tag every other badge (.product-card-tag,
   .discount-badge) uses, so it's positioned independently of
   .product-card-badges' top-left stack rather than joining it. */
.out-of-stock-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-block;
  background: rgba(17, 16, 14, 0.85);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  white-space: nowrap;
}

/* Shop and Categories both drop to a single column at 576px (see the
   .shop-grid / .cat-products-grid @media (max-width: 576px) blocks) —
   cap the image height there so one product card doesn't fill the
   whole screen on a phone. */
@media (max-width: 576px) {
  .product-card-img {
    max-height: 380px;
  }
}


.product-card-info {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  flex-grow: 1;
}

.product-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.product-card-title-row h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve space for 2 lines even when the name only takes 1, so cards
     in the same row stay aligned. */
  min-height: calc(1.25em * 2);
}

.product-card-text .product-subtitle {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.product-card-text .product-price {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Compact icon button, sits beside the product name rather than over
   the image. */
.product-cart-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  background: var(--color-white);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition-fast);
}

/* Icon-only by default; list view (shop.php) reveals this label to make
   it a full labelled "Add to cart" button instead. */
.product-cart-btn .cart-btn-label {
  display: none;
}

.product-cart-btn:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  background: var(--color-bg-soft);
  border-color: var(--border-medium);
}

.product-cart-btn:disabled:hover {
  /* Override the normal hover fill/scale — a disabled control shouldn't
     look interactive even on mouseover. */
  background: var(--color-bg-soft);
  border-color: var(--border-medium);
  color: var(--text-muted);
  transform: none;
}

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

/* ---------- Pagination dots ---------- */
.products-swiper-pagination {
  position: static !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(30px, 4vw, 46px);
}

.products-swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--border-medium);
  opacity: 1;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.products-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
  width: 24px;
  border-radius: 50px;
}

/* =====================================================================
   10. SHARED SLIDER HEADER + PAGINATION
   ===================================================================== */
.slider-section-header {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: clamp(44px, 5vw, 64px);
}

.slider-section-header .tag-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.slider-section-header .section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(26px, 3.2vw, 40px);
  max-width: 480px;
  margin: 0;
  color: var(--text-primary);
}

.slider-section-header .section-subtext {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 320px;
  margin-top: 10px;
  text-align: left;
}

/* ---------- Shared pagination dots ---------- */
.dots-pagination {
  position: static !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(30px, 4vw, 44px);
}

.dots-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--border-medium);
  opacity: 1;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.dots-pagination .swiper-pagination-bullet-active {
  background: var(--color-accent);
  width: 24px;
  border-radius: 50px;
}

/* =====================================================================
   11. TESTIMONIALS SECTION
   ===================================================================== */
.testimonials-section {
  padding: 40px 0;
  background: var(--color-off-white);
  overflow: hidden;
}

.testimonials-swiper-outer {
  position: relative;
}

.testimonials-swiper {
  width: 100%;
  padding: 4px 2px 8px;
}

.testimonials-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 28px 26px;
}

.testimonial-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-cream);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-quote-icon {
  flex-shrink: 0;
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 0.6;
  color: var(--color-accent);
  opacity: 0.55;
  margin-top: 4px;
}

.testimonial-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.testimonial-stars {
  color: var(--color-accent);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.testimonial-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}

.testimonial-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
}

.testimonial-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.testimonial-role .verified-icon {
  color: var(--color-accent);
  font-size: 13px;
}

/* ---------- Nav arrows ---------- */
.testimonials-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border-medium);
  background: var(--color-off-white);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 5;
}

.testimonials-nav-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.testimonials-nav-btn.tm-prev {
  left: -22px;
}

.testimonials-nav-btn.tm-next {
  right: -22px;
}

/* =====================================================================
   12. BLOG SECTION
   ===================================================================== */
.blog-section {
  padding: 60px 0;
  background: var(--color-bg-soft);
  overflow: hidden;
}

.blog-swiper {
  width: 100%;
  padding: 4px 2px 8px;
}

.blog-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.blog-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: grab;
}

.blog-card:active {
  cursor: grabbing;
}

.blog-card-img {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 210px;
  flex-shrink: 0;
  background: var(--color-bg-cream);
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

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

.blog-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  backdrop-filter: blur(6px);
}

.blog-card-body {
  padding-top: 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.blog-card-date {
  font-size: 12.5px;
  color: var(--text-muted);
}

.blog-card-readmore {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.blog-card:hover .blog-card-readmore {
  color: var(--color-accent);
  gap: 9px;
}

/* =====================================================================
   13. NEWSLETTER SECTION
   ===================================================================== */
.newsletter-section {
  padding-top: 60px;
  padding-bottom: var(--section-padding);
  background: var(--color-off-white);
}

.newsletter-card {
  background: var(--color-accent);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.newsletter-card::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.newsletter-card::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.newsletter-content {
  position: relative;
  z-index: 2;
}

.newsletter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

.newsletter-heading {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.newsletter-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 420px;
}

/* Matches Includes/newsletter.php's .newsletter-legal paragraph (same
   look the inline version used to set via a style="" attribute). */
.newsletter-legal {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 16px;
  padding-left: 20px;
}

.newsletter-form-wrapper {
  position: relative;
  z-index: 2;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  background: var(--color-white);
  padding: 8px;
  border-radius: 50px;
  box-shadow: 0 20px 60px rgba(17, 16, 14, 0.15);
}

.newsletter-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text-primary);
}

.newsletter-input::placeholder {
  color: var(--text-muted);
}

.newsletter-submit {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}

.newsletter-submit:hover {
  background: var(--color-secondary);
}

/* The newsletter card was a fixed 2-column grid at every width, so on
   mobile the desc text and the signup form got squeezed into ~140px
   columns each — the paragraph wrapped to one word per line right next
   to the (also squeezed) form, reading as if they overlapped. Stack it. */
@media (max-width: 768px) {
  .newsletter-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .newsletter-desc {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
    border-radius: 20px;
  }

  .newsletter-submit {
    width: 100%;
  }
}

/* =====================================================================
   14. FOOTER
   ===================================================================== */
.site-footer {
  background: var(--color-bg-cream);
  padding: clamp(50px, 6vw, 80px) 0 28px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: clamp(40px, 5vw, 64px);
}

/* Five fixed columns with no responsive rule meant Shop/Company/Help/
   Contact got squeezed into slivers on mobile — mostly clipped past the
   edge and unreadable. Two columns at tablet, one at phone width. */
@media (max-width: 991px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-xl);
  }

  .footer-brand-block {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .footer-tagline {
    max-width: 420px;
  }
}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ---------- Brand column ---------- */
.footer-brand-block {
  padding-right: var(--space-md);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.footer-logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}

.footer-tagline {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 260px;
  margin-bottom: 22px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 16px;
  transition: var(--transition-fast);
}

.footer-socials a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* ---------- Link columns ---------- */
.footer-col-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  font-size: 13.5px;
  position: relative;
  display: inline-block;
  width: fit-content;
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.footer-links a::after {
  content: "";
  position: absolute;
  background-color: var(--color-accent);
  height: 1px;
  width: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-links a:hover::after {
  width: 100%;
}

/* ---------- Contact column ---------- */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.footer-contact-item + .footer-contact-item {
  margin-top: 14px;
}

.footer-contact-item i {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-primary);
  margin-top: 1px;
}

/* ---------- Bottom bar ---------- */
.footer-bottom {
  border-top: 1px solid var(--border-medium);
  padding-top: 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* =====================================================================
   15. INNER PAGE BANNER (Shop / About / Blog / Contact hero)
   ===================================================================== */
.page-banner {
  position: relative;
  overflow: hidden;
  --pb-image: none;
  background-image: linear-gradient(180deg, rgba(14, 13, 11, 0.62) 0%, rgba(17, 16, 14, 0.68) 45%, rgba(12, 11, 10, 0.82) 100%), var(--pb-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 190px 0 110px;
  text-align: center;
}

/* ---------- Per-page banner imagery ----------
   Shop / About / Blog / Contact / Categories now render through the shared
   Includes/page-hero.php component (see "PAGE HERO" section below) — only
   Checkout still uses this older .page-banner implementation directly, so
   only .pb-checkout remains here. */
.page-banner.pb-checkout {
  --pb-image: url("../Images/Website/hero-products.png");
  background-position: center 30%;
}

.page-banner::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.page-banner::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.page-banner-inner {
  position: relative;
  z-index: 2;
}

.page-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 22px;
}

.page-banner-tag i {
  color: var(--color-accent);
}

.page-banner h1 {
  font-family: "Bodoni Moda", serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: clamp(40px, 6vw, 72px);
  color: #ffffff;
  line-height: 1;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.page-banner-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}

.page-banner-crumbs a {
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition-fast);
}

.page-banner-crumbs a:hover {
  color: #ffffff;
}

.page-banner-crumbs .sep {
  opacity: 0.4;
}

.page-banner-crumbs .current {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Inner-page content spacing ----------
   These sections combine with .container-custom, whose own padding
   shorthand (0 <sides>) otherwise zeroes out the generic <section>
   top/bottom padding — so each gets an explicit value here to keep
   proper breathing room below the banner and above the footer. */
.shop-section {
  padding-top: var(--section-padding);
  padding-bottom: 60px;
}

.blog-page-section {
  padding-top: var(--section-padding);
  padding-bottom: 60px;
}

.contact-section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

/* =====================================================================
   16. SHOP PAGE
   ===================================================================== */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* ---------- Sidebar filters ---------- */
.shop-sidebar {
  position: sticky;
  top: 110px;
}

.sidebar-panel {
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 22px;
  margin-bottom: 20px;
}

.sidebar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sidebar-panel-head h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-panel-toggle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  transition: var(--transition-fast);
}

.sidebar-panel-toggle:hover {
  background: var(--color-bg-soft);
  color: var(--text-primary);
}

.sidebar-panel-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.35s ease;
}

.sidebar-panel-body.collapsed {
  max-height: 0;
}

.sidebar-check,
.sidebar-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 7px 0;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sidebar-check:hover,
.sidebar-radio:hover {
  color: var(--text-primary);
}

.sidebar-check input,
.sidebar-radio input {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-check span,
.sidebar-radio span {
  flex: 1;
}

.sidebar-check em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- Main column: toolbar + grid ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-light);
}

.shop-count {
  font-size: 13.5px;
  color: var(--text-muted);
}

.shop-count strong {
  color: var(--text-primary);
}

.shop-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shop-sort-select {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 9px 16px;
  cursor: pointer;
}

.shop-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 4px;
}

.view-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 16px;
  transition: var(--transition-fast);
}

.view-btn:hover {
  color: var(--text-primary);
}

.view-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
}

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

.shop-grid .product-card {
  cursor: default;
}

.shop-grid .product-card.is-hidden {
  display: none;
}

.product-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 14px;
  border-radius: 50px;
  backdrop-filter: blur(6px);
}

/* ---------- Sale pricing & discount badge ----------
   Dormant until a product actually carries a real sale price — no
   product does right now, so nothing renders differently yet. Add
   .product-card-price-row (instead of the plain .product-price span)
   and a .discount-badge to a card once there's a real markdown to
   show; the percentage should be computed from the two real prices,
   never typed in by hand. When a card needs both the Bestseller tag
   and a discount badge, wrap them in .product-card-badges so they
   stack instead of overlapping. */
.product-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.product-card-badges .product-card-tag,
.product-card-badges .discount-badge {
  position: static;
}

.discount-badge {
  background: var(--color-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 50px;
}

.product-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-price-original {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product-price-sale {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
}

.shop-grid.view-list .product-price-original {
  font-size: 14px;
}

.shop-grid.view-list .product-price-sale {
  font-size: 18px;
}

/* ---------- Star rating ----------
   Two stacked star strings: a muted 5-star track underneath, and an
   accent-colored 5-star copy on top clipped to the rating's percentage
   of 5 (e.g. 4.9 -> 98%) via a fixed-width, overflow-hidden wrapper.
   No icon font/SVG needed — same plain-glyph approach the testimonial
   cards already use (.testimonial-stars) elsewhere on the site. */
.product-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.product-card-stars {
  position: relative;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1px;
}

.product-card-stars-track {
  color: var(--border-medium);
}

.product-card-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
  color: #f5a623;
}

.product-card-review-count {
  font-size: 11.5px;
  color: var(--text-muted);
}

.shop-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 14px;
  grid-column: 1 / -1;
}

.shop-empty.show {
  display: block;
}

/* ---------- List view ----------
   Its own layout, not a patch on the grid card: image and content share
   one surface (background + radius) as a single row, rather than the
   grid card's stacked "image block, then separate overlapping info
   block" construction. Scoped to >=768px only — below that, list mode
   falls back to the grid card (a 200px image plus text doesn't fit a
   phone), so the toggle is visually inert on small screens. */
.shop-grid.view-list {
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .shop-grid.view-list .product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--color-off-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .shop-grid.view-list .product-card-img {
    position: relative;
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 0;
    aspect-ratio: unset;
  }

  .shop-grid.view-list .product-card-img img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center center;
  }

  .shop-grid.view-list .product-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: transparent;
    margin-top: 0;
    border-radius: 0;
    padding: 20px 26px;
    position: static;
    z-index: auto;
  }

  .shop-grid.view-list .product-card-title-row h3 {
    -webkit-line-clamp: unset;
    min-height: 0;
    font-size: 17px;
  }

  .shop-grid.view-list .product-card-text .product-subtitle {
    white-space: normal;
    margin-bottom: 4px;
  }
}

@media (max-width: 1200px) {
  .shop-layout {
    grid-template-columns: 220px 1fr;
    gap: 28px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .cat-products-grid's matching 2-column override lives further down,
     after its unconditional base rule (source order matters here — a
     rule placed before that base rule would just get overridden by it
     despite the media query matching) — see the "Product grid" section
     near .cat-products-grid. */
}

@media (max-width: 860px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
  }
}

@media (max-width: 576px) {
  .shop-sidebar {
    grid-template-columns: 1fr;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }
  /* .cat-products-grid's matching 1-column override lives further down
     — see the note in the @media (max-width: 1200px) block above. */

  .shop-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
   17. ABOUT PAGE
   ===================================================================== */
.about-story-section {
  overflow: hidden;
  padding-top: var(--section-padding);
  padding-bottom: 70px;
}

.about-story-flex {
  display: flex;
  align-items: center;
  gap: 70px;
}

.about-story-images {
  position: relative;
  width: 46%;
  flex-shrink: 0;
  min-height: 480px;
}

.about-story-images .img-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 78%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.about-story-images .img-main img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.about-story-images .img-float {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 6px solid var(--color-off-white);
  box-shadow: var(--shadow-card);
}

.about-story-images .img-float img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.about-story-content {
  flex: 1;
}

.about-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}

.about-story-content h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 24px;
  line-height: 1.1;
}

.about-story-content p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 500px;
}

.about-signature {
  font-family: "Allura", cursive;
  font-size: 36px;
  color: var(--color-accent);
  margin-top: 20px;
}

/* ---------- Stats strip ---------- */
.about-stats-section {
  padding-top: 0;
  padding-bottom: 70px;
}

.values-section {
  padding-top: 0;
  padding-bottom: 70px;
}

.team-section {
  padding-top: 0;
  padding-bottom: 70px;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-stat-item {
  text-align: center;
  padding: 48px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.about-stat-item:last-child {
  border-right: none;
}

.about-stat-number {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
  margin-bottom: 10px;
}

.about-stat-number span {
  color: var(--color-accent);
}

.about-stat-label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-stat-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ---------- Values grid ---------- */
.values-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

.values-header .section-heading {
  margin-bottom: 16px;
}

.values-header .section-subtext {
  margin: 0 auto;
  text-align: center;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.value-card {
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 34px 26px;
  text-align: center;
  transition: var(--transition-normal);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}

.value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}

.value-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.value-card p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}

@media (max-width: 992px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ---------- Team grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.team-card {
  text-align: center;
}

.team-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--color-bg-cream);
}

.team-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

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

.team-card h4 {
  font-size: 17px;
  margin-bottom: 4px;
}

.team-card span {
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .about-story-flex {
    flex-direction: column;
  }
  .about-story-images {
    width: 100%;
    min-height: 380px;
  }
  /* img-main/img-float had fixed pixel heights (460px/220px) that didn't
     scale down, so they overflowed past this container's min-height and
     ran into the "Our Story" text that follows in normal flow below. */
  .about-story-images .img-main img {
    height: 320px;
  }
  .about-story-images .img-float img {
    height: 160px;
  }
}

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

/* =====================================================================
   18. BLOG PAGE
   ===================================================================== */
.blog-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 70px;
}

.blog-featured-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
}

.blog-featured-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.blog-featured-body {
  padding: 20px 30px 20px 0;
}

.blog-featured-body .blog-card-tag {
  position: static;
  display: inline-block;
  margin-bottom: 18px;
  background: var(--color-accent);
  color: var(--color-white);
}

.blog-featured-body h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  margin-bottom: 16px;
}

.blog-featured-body p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 480px;
}

.blog-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}

.blog-page-grid .blog-card-img {
  aspect-ratio: 16 / 9;
  height: auto;
}

@media (max-width: 1100px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-img img {
    max-height: 320px;
  }
  .blog-featured-body {
    padding: 0 10px 30px;
  }
}

@media (max-width: 900px) {
  .blog-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .blog-page-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   19. CONTACT PAGE
   ===================================================================== */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 80px;
}

.contact-info-card {
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  text-align: center;
  transition: var(--transition-normal);
}

.contact-info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.contact-info-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
}

.contact-info-card h4 {
  font-size: 15px;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.contact-info-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.contact-main-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

.contact-form-col .about-tag {
  margin-bottom: 14px;
}

.contact-form-col h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 16px;
  line-height: 1.15;
}

.contact-form-col > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 34px;
}

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

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

.contact-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1.5px solid var(--border-medium);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.contact-field textarea {
  resize: vertical;
  min-height: 130px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-muted);
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--color-accent);
  background: var(--color-white);
}

.contact-form .btn-primary {
  align-self: flex-start;
  border: none;
  margin-top: 6px;
}

.contact-map-col {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 100%;
  min-height: 520px;
}

.contact-map-col iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(1.02);
}

@media (max-width: 991px) {
  .contact-main-flex {
    grid-template-columns: 1fr;
  }
  .contact-map-col {
    min-height: 380px;
  }
  .contact-map-col iframe {
    min-height: 380px;
  }
}

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

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

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

/* =====================================================================
   20. BACK TO TOP BUTTON
   ===================================================================== */
.back-to-top {
  position: fixed;
  right: 26px;
  /* At max scroll this sits above the viewport's bottom-most content on
     every page, since footer.php's copyright row is shared sitewide.
     Previously 26px, which put the button's own 48px box flush against
     (and overlapping) that row's text at full scroll depth. 90px clears
     it with room to spare, verified against the footer's actual height. */
  bottom: 90px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 12px 30px rgba(17, 16, 14, 0.22);
  /* Raised above card-level overlays (product tags/buttons sit at z-index
     2-4) so it never traps clicks meant for the grid. */
  z-index: 950;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), visibility var(--transition-fast);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-accent);
  transform: translateY(-3px);
}

@media (max-width: 576px) {
  .back-to-top {
    /* Moved to the left edge on mobile: each card's Add to cart button
       sits at the right edge of its single-column card, and as the grid
       scrolls it periodically lines up with this fixed button's screen
       position, hiding the cart button underneath it. The left corner
       has no competing controls. */
    right: auto;
    left: 16px;
    bottom: 76px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

/* =====================================================================
   21. CART, WISHLIST & TOAST SYSTEM
   ===================================================================== */

/* ---------- Navbar icon badges ---------- */
.nav-icon {
  position: relative;
}

.icon-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 50px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--color-off-white);
}

.navbar.scrolled .icon-badge {
  box-shadow: 0 0 0 2px rgba(252, 250, 247, 0.85);
}

/* ---------- Product card wishlist toggle (injected by JS) ---------- */
.product-wishlist-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: var(--transition-fast);
}

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

.product-wishlist-btn.active {
  color: var(--color-accent);
}

.product-wishlist-btn.active i {
  font-weight: 700;
}

.product-cart-btn.added,
.product-add-btn.added {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Drawer overlay ---------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

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

/* ---------- Side drawer (cart / wishlist) ---------- */
.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  background: var(--color-off-white);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 60px rgba(0, 0, 0, 0.12);
  /* transform, not `right: -100%` — see .mobile-menu above for why. */
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.side-drawer.active {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 28px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.drawer-header h3 {
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--color-bg-soft);
  padding: 2px 9px;
  border-radius: 50px;
}

.drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.drawer-close:hover {
  background: var(--color-bg-soft);
  transform: rotate(90deg);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 28px;
}

.drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 40px 20px;
  color: var(--text-muted);
}

.drawer-empty i {
  font-size: 42px;
  color: var(--border-medium);
  margin-bottom: 14px;
}

.drawer-empty p {
  font-size: 13.5px;
  margin-bottom: 20px;
}

/* ---------- Cart / wishlist line item ---------- */
.drawer-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
}

.drawer-item-img {
  width: 74px;
  height: 74px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-cream);
}

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

.drawer-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.drawer-item-info h4 {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.drawer-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-medium);
  border-radius: 50px;
  padding: 4px 6px;
}

.qty-stepper button {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
}

.qty-stepper span {
  font-size: 12.5px;
  font-weight: 600;
  min-width: 14px;
  text-align: center;
}

.qty-stepper button:disabled {
  cursor: not-allowed;
  color: var(--text-muted);
  opacity: 0.4;
}

/* Inline, per-item — sits right under that item's own stepper rather
   than a drawer-wide banner, so it's obvious which product hit its
   limit when there's more than one item in the cart. */
.drawer-item-stock-warning {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #c23f3f;
}

.drawer-item-stock-warning i {
  font-size: 13px;
}

.drawer-item-remove {
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.drawer-item-remove:hover {
  color: var(--color-accent-dark);
}

.drawer-item-move {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-dark);
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- Cart footer ---------- */
.drawer-footer {
  padding: 22px 28px 28px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.drawer-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.drawer-checkout-btn {
  width: 100%;
  border: none;
}

.drawer-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .drawer-header,
  .drawer-body,
  .drawer-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- Toast notifications ---------- */
.toast-container {
  position: fixed;
  top: 100px;
  right: 26px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  padding: 14px 20px;
  border-radius: 50px;
  box-shadow: 0 14px 34px rgba(17, 16, 14, 0.28);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast i {
  color: var(--color-accent);
  font-size: 16px;
}

@media (max-width: 480px) {
  .toast-container {
    left: 16px;
    right: 16px;
    top: 90px;
    align-items: stretch;
  }
  .toast {
    justify-content: center;
  }
}

/* =====================================================================
   22. SEARCH OVERLAY
   ===================================================================== */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1150;
  background: var(--color-off-white);
  box-shadow: 0 20px 60px rgba(17, 16, 14, 0.15);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease, visibility 0.4s;
  max-height: 85vh;
  overflow-y: auto;
}

.search-overlay.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.search-overlay-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 24px 40px;
}

#searchForm {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--text-primary);
  padding-bottom: 16px;
}

.search-overlay-icon {
  font-size: 22px;
  color: var(--text-muted);
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text-primary);
}

#searchInput::placeholder {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 18px;
}

.search-overlay-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.search-overlay-close:hover {
  background: var(--color-bg-soft);
  transform: rotate(90deg);
}

.search-results {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.search-result-item:hover {
  background: var(--color-bg-soft);
}

.search-result-img {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-cream);
}

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

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

.search-result-info h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.search-result-info span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.search-result-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.search-hint,
.search-empty {
  padding: 20px 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

.search-see-all {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-dark);
  border-top: 1px solid var(--border-light);
}

.search-see-all:hover {
  color: var(--color-accent);
}

@media (max-width: 576px) {
  .search-overlay-inner {
    padding: 90px 18px 30px;
  }
  #searchInput {
    font-size: 20px;
  }
}

/* =====================================================================
   23. CHECKOUT PAGE
   ===================================================================== */
.checkout-section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.checkout-empty {
  text-align: center;
  padding: 60px 20px;
  max-width: 460px;
  margin: 0 auto;
}

.checkout-empty i {
  font-size: 56px;
  color: var(--border-medium);
  margin-bottom: 20px;
}

.checkout-empty h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

.checkout-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

.checkout-form-col h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 10px;
}

.checkout-form-col > p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 30px;
  max-width: 460px;
}

.checkout-fieldset {
  margin-bottom: 26px;
}

.checkout-fieldset-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ---------- Payment method selector ---------- */
.payment-method-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.payment-method-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
}

.payment-method-option:hover {
  border-color: var(--color-accent);
}

.payment-method-option.active {
  border-color: var(--color-accent);
  background: var(--color-bg-soft);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.payment-method-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.payment-method-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  transition: var(--transition-fast);
}

.payment-method-option.active .payment-method-icon {
  background: var(--color-accent);
  color: var(--color-white);
}

.payment-method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payment-method-text strong {
  font-size: 13.5px;
  color: var(--text-primary);
}

.payment-method-text small {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .payment-method-options {
    grid-template-columns: 1fr;
  }
}

.checkout-summary-col {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: sticky;
  top: 110px;
}

.checkout-summary-col h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.checkout-summary-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 4px;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.checkout-summary-item .drawer-item-img {
  width: 54px;
  height: 54px;
  position: relative;
}

.checkout-summary-item .drawer-item-img .qty-pill {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-summary-item-info {
  flex: 1;
  min-width: 0;
}

.checkout-summary-item-info h5 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-summary-item-info span {
  font-size: 12px;
  color: var(--text-muted);
}

.checkout-summary-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.checkout-summary-totals {
  border-top: 1px solid var(--border-medium);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.checkout-summary-row.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  padding-top: 8px;
  border-top: 1px dashed var(--border-medium);
}

.checkout-place-order-btn {
  width: 100%;
  border: none;
  margin-top: 22px;
}

.checkout-summary-note {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

/* ---------- Order confirmation state ---------- */
.checkout-success {
  display: none;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
}

.checkout-success.show {
  display: block;
}

/* Continue Shopping / Back to Home (or Back to Checkout / Contact Us):
   `gap` handles spacing whether the two buttons sit side by side or wrap
   to stacked rows on a narrow screen — a plain `margin-left` on the
   second button (the old approach) only ever covers the side-by-side
   case and leaves them touching once they wrap. */
.checkout-success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.checkout-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  font-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.checkout-success h2 {
  font-size: 28px;
  margin-bottom: 14px;
}

.checkout-success p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 10px;
}

.checkout-order-ref {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  background: var(--color-bg-soft);
  padding: 8px 18px;
  border-radius: 50px;
  margin: 12px 0 28px;
  letter-spacing: 0.02em;
}

@media (max-width: 991px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
  .checkout-summary-col {
    position: static;
    /* No `order` override — falls back to natural DOM order (form col,
       then summary col) instead of the old `order: -1`, which forced
       Order Summary above the form fields on mobile. */
  }
}
/* =====================================================================
   24. CATEGORIES PAGE
   ===================================================================== */

/* ---------- Hero ----------
   Categories now renders through the shared Includes/page-hero.php
   component (see "PAGE HERO" section) instead of its own .cat-hero markup. */

/* ---------- Shared section heading ---------- */
.cat-section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.cat-section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--text-primary);
}

/* ---------- Section 1: Category grid ---------- */
.cat-grid-section {
  padding-top: var(--section-padding);
  padding-bottom: 40px;
}

.cat-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cat-category-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  transition: box-shadow var(--transition-fast);
}

.cat-category-card:hover {
  box-shadow: var(--shadow-card);
}

.cat-category-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-cream);
}

.cat-category-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.cat-category-card:hover .cat-category-card-img img {
  transform: scale(1.04);
}

.cat-category-card-body {
  padding: 18px 20px 22px;
  text-align: center;
}

.cat-category-card-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cat-category-card-count {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---------- Section 2: Featured collection strip ---------- */
.cat-featured-strip {
  padding-top: 40px;
  padding-bottom: 40px;
}

.cat-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cat-feature-card {
  display: flex;
  align-items: stretch;
  min-height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cat-feature-bg, var(--color-bg-soft));
}

.cat-feature-text {
  flex: 0 0 42%;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.cat-feature-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.cat-feature-text h3 {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.15;
  color: var(--text-primary);
}

.cat-feature-line {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cat-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
  width: fit-content;
  transition: var(--transition-fast);
}

.cat-feature-card:hover .cat-feature-link {
  color: var(--color-accent);
}

.cat-feature-img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cat-feature-img img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

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

/* ---------- Section 3: Product listing ---------- */
.cat-listing-section {
  padding-top: 40px;
  padding-bottom: var(--section-padding);
}

.cat-shop-layout.shop-layout {
  align-items: start;
}

.cat-filter-drawer-head {
  display: none;
}

.cat-filter-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 50px;
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  margin-bottom: 22px;
}

.cat-filter-trigger:hover {
  border-color: var(--border-medium);
}

.cat-filter-trigger .cat-filter-count {
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50px;
  padding: 1px 7px;
}

.cat-filter-trigger .cat-filter-count[hidden] {
  display: none;
}

.filters-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1099;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
}

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

/* ---------- Active filter chips ---------- */
.active-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.active-filters-row:empty {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg-soft);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 6px 8px 6px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-primary);
}

.filter-chip button {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 16, 14, 0.08);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-chip button:hover {
  background: var(--color-accent);
  color: #fff;
}

.clear-all-link {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
}

/* ---------- Price range slider ---------- */
.price-range-values {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 16px;
}

.price-range-slider {
  position: relative;
  height: 4px;
  background: var(--border-medium);
  border-radius: 4px;
  margin: 0 2px 8px;
}

.price-range-fill {
  position: absolute;
  height: 4px;
  background: var(--color-accent);
  border-radius: 4px;
}

.price-range-slider input[type="range"] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.price-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-off-white);
  border: 2px solid var(--color-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 16, 14, 0.2);
}

.price-range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-off-white);
  border: 2px solid var(--color-accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 16, 14, 0.2);
}

.price-range-slider input[type="range"]::-moz-range-track {
  background: transparent;
}

/* ---------- Product grid (Section 3 cards) ---------- */
.cat-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}

.cat-products-grid .product-card.is-hidden {
  display: none;
}

/* Same breakpoints as .shop-grid (see the @media (max-width: 1200px)/
   (max-width: 576px) blocks near .shop-grid) so Shop and Categories
   always break to 2- and then 1-column at the same viewport width —
   they used to diverge (1200/576px on .shop-grid vs 1279/767px on
   .cat-products-grid), which made one page look 3-column and the other
   2-column in the gap between. Placed after the unconditional rule
   above on purpose: an equal-specificity rule earlier in the file would
   just be overridden by it despite the media query matching. */
@media (max-width: 1200px) {
  .cat-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .cat-products-grid {
    grid-template-columns: 1fr;
  }
}

.cat-listing-card .product-card-text .product-price {
  display: block;
  margin-top: 2px;
}

.cat-card-icons {
  position: absolute;
  /* A card can show both the tag and the discount badge stacked (see
     .product-card-badges), which together run from top:14px to ~75px —
     84px clears that worst case with room to spare, so the quick-view/
     compare icons never sit on top of the badges (they're always visible
     on touch devices — see the @media (hover: none) block below). */
  top: 84px;
  left: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.cat-listing-card:hover .cat-card-icons {
  opacity: 1;
  transform: translateX(0);
}

.cat-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.cat-icon-btn:hover {
  background: #ffffff;
  transform: scale(1.08);
}

.cat-icon-btn.active {
  color: #ffffff;
  background: var(--color-accent);
}

@media (hover: none) {
  .cat-card-icons {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Pagination ---------- */
.cat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}

.cat-page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-fast);
}

.cat-page-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.cat-page-btn.active {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.cat-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Quick View modal ---------- */
.quickview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.55);
  backdrop-filter: blur(3px);
  z-index: 1150;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: var(--transition-normal);
}

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

.quickview-modal {
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  box-shadow: var(--shadow-card);
}

.quickview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 2;
  transition: var(--transition-fast);
}

.quickview-close:hover {
  background: var(--color-bg-soft);
  transform: rotate(90deg);
}

.quickview-img {
  background: var(--color-bg-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.quickview-img img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.quickview-info {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quickview-info .cat-feature-label {
  margin-bottom: -4px;
}

.quickview-info h3 {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--text-primary);
  line-height: 1.15;
}

.quickview-info p.quickview-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.quickview-price {
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
}

.quickview-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.quickview-add-btn {
  margin-top: 10px;
  width: fit-content;
}

@media (max-width: 680px) {
  .quickview-modal {
    grid-template-columns: 1fr;
  }
  .quickview-img {
    padding: 20px;
  }
  .quickview-info {
    padding: 28px 24px 34px;
  }
}

/* ---------- Account modal ---------- */
.account-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 16, 14, 0.55);
  backdrop-filter: blur(3px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: var(--transition-normal);
}

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

.account-modal {
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-card);
  padding: 40px 36px 32px;
}

.account-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-primary);
  cursor: pointer;
  z-index: 2;
  transition: var(--transition-fast);
}

.account-close:hover {
  background: var(--color-bg-soft);
  transform: rotate(90deg);
}

.account-modal-head {
  margin-bottom: 22px;
}

.account-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.account-modal-head h2 {
  font-size: 26px;
  margin-bottom: 6px;
}

.account-modal-head p {
  font-size: 13.5px;
  color: var(--text-muted);
}

.account-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-medium);
}

.account-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.account-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--color-accent);
}

.account-form {
  display: none;
  flex-direction: column;
}

.account-form.active {
  display: flex;
}

.account-form label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  margin-top: 16px;
}

.account-form label:first-of-type {
  margin-top: 0;
}

.account-form input {
  width: 100%;
  border: 1.5px solid var(--border-medium);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--text-primary);
  transition: var(--transition-fast);
}

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

.account-form input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.account-password-field {
  position: relative;
}

.account-password-field input {
  padding-right: 44px;
}

.account-password-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
}

.account-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12.5px;
}

.account-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}

.account-form-meta a {
  color: var(--color-accent);
}

.account-submit {
  margin-top: 22px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 600;
  transition: var(--transition-fast);
}

.account-submit:hover {
  background: var(--color-accent);
}

.account-guest-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline;
}

@media (max-width: 480px) {
  .account-modal {
    padding: 32px 22px 26px;
  }
}

.account-form-error {
  background: rgba(224, 90, 90, 0.1);
  border: 1px solid rgba(224, 90, 90, 0.3);
  color: #c23f3f;
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* ---------- Account widget (logged-in header state) ---------- */
.account-widget {
  position: relative;
}

.account-widget-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px 0 10px;
  border-radius: 50px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.account-widget-trigger:hover,
.account-widget.open .account-widget-trigger {
  background: var(--color-bg-soft);
  color: var(--color-accent);
}

.account-widget-trigger i:first-child {
  font-size: 20px;
}

.account-widget-caret {
  font-size: 16px;
  transition: transform 0.2s;
}

.account-widget.open .account-widget-caret {
  transform: rotate(180deg);
}

.account-widget-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-widget-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--color-off-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: var(--transition-fast);
  z-index: 500;
}

.account-widget.open .account-widget-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-widget-menu-head {
  padding: 10px 12px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-medium);
  margin-bottom: 6px;
}

.account-widget-menu-head strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.account-widget-menu a,
.account-widget-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-fast);
}

.account-widget-menu a:hover {
  background: var(--color-bg-soft);
  color: var(--color-accent);
}

.account-widget-menu button {
  color: #c23f3f;
}

.account-widget-menu button:hover {
  background: rgba(224, 90, 90, 0.08);
}

@media (max-width: 991px) {
  .account-widget-name { display: none; }
  .account-widget-trigger { padding: 0 10px; }
}

/* ---------- Compare tray ---------- */
.compare-tray {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(140%);
  /* translateY(140%) alone leaves an ~8px sliver of this 40px-tall bar
     visible above the viewport bottom edge (140% of its own height is a
     few px short of the ~64px needed to clear `bottom: 24px` + its own
     height). visibility guarantees it's actually gone when hidden,
     regardless of that math — delayed on hide so the slide-down
     transition still plays, instant on show. */
  visibility: hidden;
  z-index: 1000;
  background: var(--color-primary);
  color: #ffffff;
  border-radius: 50px;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 16px 40px rgba(17, 16, 14, 0.28);
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 350ms;
  max-width: 92vw;
}

.compare-tray.visible {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

.compare-tray-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.compare-tray-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.compare-tray-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50px;
  padding: 5px 6px 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
}

.compare-tray-chip button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  cursor: pointer;
}

.compare-tray-clear {
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.85;
  background: none;
  border: none;
  color: #fff;
}

.compare-tray-clear:hover {
  opacity: 1;
}

/* ---------- Trust strip ---------- */
.cat-trust-strip {
  padding: 20px 0 var(--section-padding);
}

.cat-trust-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--color-off-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 36px 40px;
}

.cat-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 200px;
}

.cat-trust-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.cat-trust-text h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cat-trust-text p {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Focus rings (keyboard accessibility) ---------- */
.cat-hero-crumbs a:focus-visible,
.cat-category-card:focus-visible,
.cat-feature-card:focus-visible,
.cat-feature-link:focus-visible,
.cat-icon-btn:focus-visible,
.filter-chip button:focus-visible,
.clear-all-link:focus-visible,
.cat-page-btn:focus-visible,
.cat-filter-trigger:focus-visible,
.sidebar-check input:focus-visible,
.sidebar-radio input:focus-visible,
.price-range-slider input:focus-visible,
.quickview-close:focus-visible,
.quickview-modal button:focus-visible,
.quickview-modal a:focus-visible,
.compare-tray button:focus-visible,
.filters-drawer-apply:focus-visible,
#filtersDrawerClose:focus-visible,
.shop-sort-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */
/* .cat-products-grid's own column count is now unified with .shop-grid's
   breakpoints (see the @media (max-width: 1200px)/(max-width: 576px)
   blocks right after .cat-products-grid's base rule) so the two pages'
   product grids never diverge — only the other Categories-only grids
   (category tiles, featured strip) still use this page's original
   1279px breakpoint. */
@media (max-width: 1279px) {
  .cat-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-feature-grid {
    grid-template-columns: 1fr;
  }
  .cat-feature-card {
    min-height: 0;
  }
}

@media (max-width: 1023px) {
  .cat-shop-layout.shop-layout {
    grid-template-columns: 1fr;
  }

  .cat-filter-trigger {
    display: inline-flex;
  }

  .cat-shop-layout .shop-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 88vw;
    height: 100vh;
    z-index: 1100;
    background: var(--color-off-white);
    overflow-y: auto;
    padding: 26px 24px 40px;
    box-shadow: -10px 0 60px rgba(0, 0, 0, 0.14);
    /* transform, not `right: -100%` — see .mobile-menu's rule for why. */
    transform: translateX(100%);
    transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
    margin: 0;
  }

  .cat-shop-layout .shop-sidebar.drawer-open {
    transform: translateX(0);
  }

  /* Scoped to .cat-shop-layout (categories.php's drawer wrapper) — this
     head/close-button is only meaningful inside the actual off-canvas
     drawer. Shop.php includes the same shared filter-sidebar.php markup
     but never wraps it in .cat-shop-layout and has no drawer to close, so
     an unscoped rule here was making "Filters" + a dead close button show
     up as a stray grid item next to the Category panel on shop.php. */
  .cat-shop-layout .cat-filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
  }

  .cat-shop-layout .cat-filter-drawer-head h3 {
    font-family: var(--font-display);
    font-size: 22px;
  }

  .filters-drawer-apply {
    display: block;
    width: 100%;
    margin-top: 20px;
  }
}

@media (min-width: 1024px) {
  .filters-drawer-apply {
    display: none;
  }
}

@media (max-width: 767px) {
  .cat-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-trust-row {
    padding: 28px 24px;
  }
}

@media (max-width: 480px) {
  .quickview-add-btn {
    width: 100%;
  }
  .compare-tray {
    left: 12px;
    right: 12px;
    transform: translateY(140%);
    max-width: none;
  }
  .compare-tray.visible {
    transform: translateY(0);
    visibility: visible;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cat-category-card-img img,
  .cat-card-icons,
  .cat-feature-img img,
  .compare-tray,
  .shop-sidebar {
    transition: none !important;
  }
  .cat-card-icons {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   25. BLOG POST PAGE
   ===================================================================== */

/* ---------- Not-found fallback ---------- */
.post-not-found {
  padding: 140px 0;
  text-align: center;
}

.post-not-found h1 {
  font-family: var(--font-display);
  font-size: 36px;
  margin-bottom: 12px;
}

.post-not-found p {
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* ---------- Post hero (own content, not the shared dark page-banner —
   a post's cover image is worth seeing on its own, not dimmed behind
   text) ---------- */
.post-hero {
  padding: 150px 0 0;
  text-align: center;
}

.post-hero-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.post-hero-crumbs a {
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.post-hero-crumbs a:hover {
  color: var(--text-primary);
}

.post-hero-crumbs .sep {
  opacity: 0.5;
}

.post-hero-crumbs .current {
  color: var(--color-accent);
  font-weight: 600;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-hero-tag {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.post-hero-title {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto 20px;
}

.post-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.post-hero-meta .dot {
  opacity: 0.6;
}

.post-hero-cover {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.post-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Layout: article + sticky sidebar ---------- */
.post-layout-section {
  padding: 60px 0 var(--section-padding);
}

.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}

/* The sidebar is a genuinely empty placeholder until Phase 2 gives it
   real content (TOC, recent posts, newsletter, etc. — see blog-post.php).
   Reserving a permanently-empty 320px column made the article read as
   pushed over to the left with a wide dead strip of blank space beside
   it, so collapse to one centered column whenever there's nothing in the
   sidebar; the two-column layout comes back on its own, no CSS to
   revisit, the moment real content is added there. */
.post-layout:has(.post-sidebar:empty) {
  grid-template-columns: 1fr;
}

.post-layout:has(.post-sidebar:empty) .post-article-body {
  margin-left: auto;
  margin-right: auto;
}

.post-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 1px; /* keeps the sticky column from collapsing to 0 height while empty in Phase 1 */
}

/* ---------- Article body typography ----------
   Deliberately capped at ~720px (~70 characters per line) even though
   the grid column itself may render wider — full-width body text is
   the most common blog readability defect (the eye loses its place on
   the return sweep), so the text block stays narrow regardless. */
.post-article-body {
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.post-article-body > *:first-child {
  margin-top: 0;
}

.post-article-body p {
  margin: 0 0 24px;
}

.post-article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.3;
  color: var(--text-primary);
  /* More space above than below, so a heading groups with the text it
     introduces rather than floating between two blocks. */
  margin: 52px 0 18px;
}

.post-article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.35;
  color: var(--text-primary);
  margin: 40px 0 14px;
}

.post-article-body h2:first-child,
.post-article-body h3:first-child {
  margin-top: 0;
}

.post-article-body ul,
.post-article-body ol {
  margin: 0 0 24px;
  padding-left: 26px;
}

.post-article-body li {
  margin-bottom: 12px;
  padding-left: 4px;
}

.post-article-body li:last-child {
  margin-bottom: 0;
}

.post-article-body li > p {
  margin-bottom: 0;
}

.post-article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 26px;
  margin: 36px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.6;
  color: var(--text-primary);
}

.post-article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: var(--transition-fast);
}

.post-article-body a:hover {
  color: var(--color-primary);
}

.post-article-body img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.post-article-body figure {
  margin: 36px 0;
}

.post-article-body figcaption {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}

.post-article-body strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .post-hero {
    padding-top: 130px;
  }

  .post-article-body {
    font-size: 17px;
  }
}

/* ---------- Focus & motion ---------- */
.post-hero-crumbs a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .post-hero-crumbs a,
  .post-article-body a {
    transition: none !important;
  }
}

/* =====================================================================
   26. PRODUCT DETAIL PAGE (PDP)
   ===================================================================== */

/* ---------- Shared light section tag (reused by PDP / Results / Welcome) ---------- */
.pdp-section-tag,
.results-tag,
.welcome-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--color-bg-cream);
  border: 1px solid var(--border-light);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 18px;
}

.pdp-section-tag i,
.results-tag i,
.welcome-tag i {
  color: var(--color-accent);
}

.pdp-section-header {
  max-width: 640px;
  margin: 0 auto 50px;
  text-align: center;
}

.pdp-section-header .section-heading {
  margin-bottom: 14px;
}

.pdp-section-header .section-subtext {
  max-width: 100%;
  margin: 0 auto;
}

/* ---------- Breadcrumb bar ---------- */
.pdp-breadcrumb-bar {
  padding: 150px 0 18px;
}

.pdp-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

.pdp-breadcrumbs a {
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.pdp-breadcrumbs a:hover {
  color: var(--color-accent);
}

.pdp-breadcrumbs i {
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0.6;
}

.pdp-breadcrumbs span[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- Hero stage: gallery + purchase column ---------- */
.pdp-hero-section {
  padding: 30px 0 var(--section-padding);
}

.pdp-stage-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

.pdp-gallery-sticky {
  position: sticky;
  top: 110px;
}

.pdp-main-viewport {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-cream);
}

.pdp-main-img-wrap {
  aspect-ratio: 1 / 1;
}

.pdp-main-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

.pdp-floating-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
}

.pdp-wishlist-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-wishlist-toggle:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.06);
}

.pdp-wishlist-toggle.active i,
.pdp-wishlist-toggle.active {
  color: var(--color-accent);
}

.pdp-thumbnails {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.pdp-thumb {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--color-bg-cream);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

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

.pdp-thumb.active,
.pdp-thumb:hover {
  border-color: var(--color-accent);
}

.pdp-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

.pdp-trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
}

.pdp-trust-pill i {
  color: var(--color-accent);
  font-size: 17px;
  flex-shrink: 0;
}

/* ---------- Purchase details column ---------- */
.pdp-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.pdp-category-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.pdp-stock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.pdp-stock-status.in-stock {
  color: #3f8f5f;
}

.pdp-stock-status i {
  font-size: 8px;
}

.pdp-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 8px;
}

.pdp-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.pdp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-body);
  font-size: 13px;
}

.pdp-stars {
  color: var(--color-accent);
  font-size: 15px;
  display: flex;
  gap: 2px;
}

.pdp-rating-score {
  font-weight: 700;
  color: var(--text-primary);
}

.pdp-rating-divider {
  color: var(--text-muted);
}

.pdp-reviews-count {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-fast);
}

.pdp-reviews-count:hover {
  color: var(--color-accent);
}

.pdp-price-box {
  padding: 20px 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.pdp-price-wrap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.pdp-current-price {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 700;
  color: var(--text-primary);
}

.pdp-old-price {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pdp-discount-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent-dark);
  background: rgba(242, 107, 69, 0.12);
  padding: 5px 12px;
  border-radius: 50px;
}

.pdp-installments {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
}

.pdp-installments strong {
  color: var(--text-primary);
}

.pdp-concern-block {
  margin-bottom: 18px;
}

.pdp-block-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pdp-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-concern-pill,
.pdp-skin-pill {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--color-bg-cream);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: 50px;
}

.pdp-desc-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.pdp-selector-block {
  margin-bottom: 22px;
}

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

.pdp-active-size-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

.pdp-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdp-size-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--color-white);
  border: 1.5px solid var(--border-medium);
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-size-btn:hover {
  border-color: var(--color-primary);
}

.pdp-size-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pdp-action-box {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 26px;
}

.pdp-qty-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-medium);
  border-radius: 50px;
  overflow: hidden;
  flex-shrink: 0;
  width: 130px;
}

.pdp-qty-btn {
  flex: 1;
  height: 52px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pdp-qty-btn:hover {
  background: var(--color-bg-cream);
}

.pdp-qty-input {
  flex: 1.4;
  width: 100%;
  height: 52px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  -moz-appearance: textfield;
}

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

.pdp-add-cart-btn {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.pdp-add-cart-btn:hover {
  background: var(--color-accent);
  box-shadow: 0 12px 30px rgba(242, 107, 69, 0.25);
}

.pdp-add-cart-btn i {
  font-size: 18px;
}

.pdp-perks-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

.pdp-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.pdp-perk-item i {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-bg-cream);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.pdp-perk-item h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.pdp-perk-item p {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Key active ingredients ---------- */
.pdp-actives-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg-soft);
}

.pdp-actives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.pdp-active-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: var(--transition-normal);
}

.pdp-active-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.pdp-active-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(242, 107, 69, 0.1);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
}

.pdp-active-role {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.pdp-active-name {
  font-size: 21px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.pdp-active-desc {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Routine guide ---------- */
.pdp-routine-section {
  padding: var(--section-padding) 0;
}

.pdp-routine-box {
  background: var(--color-bg-cream);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 54px);
}

.pdp-routine-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.pdp-routine-header .section-heading {
  margin-bottom: 0;
}

.pdp-routine-subtext {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.7;
}

.pdp-routine-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pdp-step-node {
  position: relative;
  background: var(--color-white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align: center;
  transition: var(--transition-normal);
}

.pdp-step-node.active-step {
  border-color: var(--color-accent);
  background: rgba(242, 107, 69, 0.06);
}

.step-num {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}

.pdp-step-node.active-step .step-num {
  background: var(--color-accent);
}

.step-title {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.step-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.step-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-accent);
  padding: 4px 12px;
  border-radius: 50px;
}

/* ---------- Clinical proof banner ---------- */
.pdp-proof-section {
  padding: 0 0 var(--section-padding);
}

.pdp-proof-banner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
}

.pdp-proof-content {
  padding: clamp(30px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pdp-proof-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 20px;
  width: fit-content;
}

.pdp-proof-tag i {
  color: var(--color-accent);
}

.pdp-proof-heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.pdp-proof-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.7;
  margin-bottom: 26px;
  max-width: 420px;
}

.pdp-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--color-accent);
  padding-bottom: 4px;
  transition: var(--transition-fast);
  width: fit-content;
}

.pdp-proof-link:hover {
  color: var(--color-accent);
  gap: 12px;
}

.pdp-proof-media {
  position: relative;
  min-height: 280px;
}

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

.pdp-proof-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 50px;
}

/* ---------- Expandable accordions ---------- */
.pdp-details-accordion-section {
  padding: 0 0 var(--section-padding);
}

.pdp-accordion-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.pdp-acc-item {
  border-bottom: 1px solid var(--border-light);
}

.pdp-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.pdp-acc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.pdp-acc-title i {
  color: var(--color-accent);
  font-size: 19px;
}

.pdp-acc-chevron {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.pdp-acc-item.active .pdp-acc-chevron {
  transform: rotate(135deg);
  color: var(--color-accent);
}

.pdp-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}

.pdp-acc-body > .pdp-acc-content {
  overflow: hidden;
  min-height: 0;
}

.pdp-acc-item.active .pdp-acc-body {
  grid-template-rows: 1fr;
}

.pdp-acc-content {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  padding: 0 4px 24px;
}

.pdp-pro-tip {
  margin-top: 16px;
  background: var(--color-bg-cream);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.pdp-pro-tip i {
  color: var(--color-accent);
}

.pdp-inci-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
}

.pdp-free-from-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.pdp-free-from-grid span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.pdp-free-from-grid i {
  color: #3f8f5f;
  font-size: 16px;
}

/* ---------- Customer reviews ---------- */
.pdp-reviews-section {
  padding: 0 0 var(--section-padding);
}

.pdp-reviews-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}

.pdp-reviews-header .section-heading {
  margin-bottom: 0;
}

.pdp-reviews-summary-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  box-shadow: var(--shadow-soft);
}

.badge-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.badge-stars-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge-stars-col .stars {
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

.badge-stars-col span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.pdp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.pdp-review-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.review-stars {
  color: var(--color-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

.review-date {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-muted);
}

.review-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 10px;
}

.review-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.author-name {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.author-skin {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ---------- Related products ---------- */
.pdp-related-section {
  padding: 0 0 var(--section-padding);
}

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* ---------- PDP Responsive ---------- */
@media (max-width: 1200px) {
  .pdp-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .pdp-gallery-sticky {
    position: static;
  }

  .pdp-routine-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdp-proof-banner {
    grid-template-columns: 1fr;
  }

  .pdp-proof-media {
    min-height: 220px;
    order: -1;
  }
}

@media (max-width: 767px) {
  .pdp-breadcrumb-bar {
    padding-top: 130px;
  }

  .pdp-breadcrumbs {
    font-size: 12px;
  }

  .pdp-main-viewport {
    aspect-ratio: 4 / 5;
  }

  .pdp-actives-section,
  .pdp-routine-section,
  .pdp-proof-section,
  .pdp-details-accordion-section,
  .pdp-reviews-section,
  .pdp-related-section {
    padding-top: 0;
    padding-bottom: 60px;
  }

  .pdp-actives-section {
    padding-top: 60px;
  }

  .pdp-routine-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pdp-routine-subtext {
    max-width: 100%;
    text-align: left;
  }

  .pdp-routine-steps {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-reviews-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pdp-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .pdp-action-box {
    flex-direction: column;
  }

  .pdp-qty-wrap {
    width: 100%;
  }

  .pdp-routine-steps {
    grid-template-columns: 1fr;
  }

  .pdp-reviews-grid {
    grid-template-columns: 1fr;
  }

  .pdp-related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pdp-reviews-summary-badge {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .pdp-related-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   27. HOMEPAGE RESULTS SECTION (Before / After Slider)
   ===================================================================== */
.results-section {
  padding: var(--section-padding) 0;
  background: var(--color-bg-soft);
  overflow: hidden;
}

.results-header {
  max-width: 640px;
  margin: 0 auto 20px;
  text-align: center;
}

.results-header .section-heading {
  margin-bottom: 14px;
}

.results-header .section-subtext {
  max-width: 100%;
  margin: 0 auto;
}

.results-tabs-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  overflow-x: auto;
}

.results-tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  padding: 6px;
  border-radius: 50px;
}

.results-tab {
  background: transparent;
  border: none;
  border-radius: 50px;
  padding: 11px 24px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}

.results-tab:hover {
  color: var(--text-primary);
}

.results-tab.active {
  background: var(--color-primary);
  color: var(--color-white);
}

.results-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  align-items: center;
}

.results-slider-outer {
  width: 100%;
}

.results-slider-container {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-cream);
  cursor: ew-resize;
  box-shadow: var(--shadow-card);
  touch-action: pan-y;
}

.results-slide-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.results-slide-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.result-img {
  position: absolute;
  inset: 0;
}

.result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.result-after-img {
  z-index: 1;
}

.result-before-img {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.slider-badge {
  position: absolute;
  top: 18px;
  z-index: 3;
  background: rgba(17, 16, 14, 0.65);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 50px;
  pointer-events: none;
}

.badge-before {
  left: 18px;
}

.badge-after {
  right: 18px;
}

.slider-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: var(--color-white);
  transform: translateX(-50%);
  z-index: 4;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--text-primary);
  font-size: 15px;
  box-shadow: var(--shadow-card);
}

.results-slider-container.is-dragging .slider-handle {
  transform: translate(-50%, -50%) scale(1.08);
}

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

.results-copy-col {
  padding: 10px 0;
}

.results-case-card {
  display: none;
}

.results-case-card.active {
  display: block;
  animation: resultsFadeIn 0.4s ease;
}

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

.results-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.case-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.timeframe-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--color-bg-cream);
  padding: 6px 14px;
  border-radius: 50px;
}

.timeframe-badge i {
  color: var(--color-accent);
}

.results-case-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 14px;
}

.results-case-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 26px;
}

.results-stat-box {
  border-left: 3px solid var(--color-accent);
  padding: 4px 0 4px 20px;
  margin-bottom: 26px;
}

.stat-number {
  display: inline-block;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-basis-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.results-product-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
}

.res-prod-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-cream);
}

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

.res-prod-details {
  flex-grow: 1;
  min-width: 0;
}

.res-prod-used-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.res-prod-title {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.res-prod-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.res-prod-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.res-prod-price {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.res-prod-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-accent);
  transition: var(--transition-fast);
}

.res-prod-btn:hover {
  gap: 8px;
  color: var(--color-accent-dark);
}

.results-disclaimer {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 46px;
}

/* ---------- Results section responsive ---------- */
@media (max-width: 1023px) {
  .results-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .results-slider-container {
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  .results-tabs-wrapper {
    justify-content: flex-start;
  }

  .results-header {
    text-align: left;
    margin-left: 0;
  }

  .results-slider-container {
    max-width: 100%;
    aspect-ratio: 1 / 1.05;
  }

  .results-product-link-card {
    flex-wrap: wrap;
  }

  .res-prod-details {
    width: 100%;
  }
}

/* =====================================================================
   28. WELCOME MODAL POPUP (Sitewide first-visit offer)
   ===================================================================== */
.welcome-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 16, 14, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.welcome-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.welcome-modal-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transform: scale(0.94) translateY(16px);
  transition: transform 0.35s ease;
}

.welcome-modal-overlay.active .welcome-modal-card {
  transform: scale(1) translateY(0);
}

.welcome-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.welcome-modal-close:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: rotate(90deg);
}

.welcome-modal-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.welcome-modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.welcome-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 16, 14, 0) 55%, rgba(17, 16, 14, 0.55) 100%);
}

.welcome-media-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 50px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: badgeDotPulse 1.8s ease-in-out infinite;
}

@keyframes badgeDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(242, 107, 69, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(242, 107, 69, 0);
  }
}

.welcome-modal-content {
  padding: clamp(32px, 4vw, 50px) clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-heading {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 14px;
}

.welcome-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 26px;
}

.welcome-desc strong {
  color: var(--text-primary);
  font-weight: 700;
}

.welcome-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.welcome-input-group {
  position: relative;
}

.welcome-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 17px;
}

.welcome-input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1.5px solid var(--border-medium);
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--color-off-white);
  transition: var(--transition-fast);
}

.welcome-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-white);
}

.welcome-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 28px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition-normal);
}

.welcome-submit-btn:hover {
  background: var(--color-accent);
  box-shadow: 0 12px 30px rgba(242, 107, 69, 0.25);
}

.welcome-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.welcome-dismiss-link {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

.welcome-dismiss-link:hover {
  color: var(--text-primary);
}

.welcome-privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Success state ---------- */
.welcome-success-state {
  text-align: center;
}

.success-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(63, 143, 95, 0.12);
  color: #3f8f5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.welcome-success-state .welcome-heading,
.welcome-success-state .welcome-desc {
  text-align: center;
}

.welcome-coupon-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1.5px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  background: rgba(242, 107, 69, 0.06);
  padding: 14px 18px;
  margin-bottom: 22px;
}

.coupon-code {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.coupon-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 50px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.coupon-copy-btn:hover {
  background: var(--color-accent);
}

.welcome-shop-now-btn {
  text-decoration: none;
}

/* ---------- Welcome modal responsive ---------- */
@media (max-width: 767px) {
  .welcome-modal-card {
    grid-template-columns: 1fr;
    max-height: 92vh;
  }

  .welcome-modal-media {
    min-height: 160px;
  }

  .welcome-modal-content {
    padding: 30px 24px 34px;
  }
}

@media (max-width: 420px) {
  .welcome-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* =====================================================================
   29. PAGE HERO (Shared component — Includes/page-hero.php)
   Used by: Shop, Categories, About Us, Blog, Contact Us.
   Page Heroes — Consistency & Legibility Spec, Phase 1.
   (Checkout keeps the older .page-banner markup — see section 15 — since
   it wasn't part of this spec.)
   ===================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 190px 0 110px;
  text-align: center;
}

.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos-mobile, center);
  z-index: 0;
}

@media (min-width: 768px) {
  .page-hero-img {
    object-position: var(--hero-pos, center);
  }
}

.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Phase 1 carries over the existing flat linear-gradient wash as-is so
     this phase stays a pure structural refactor — Phase 2 replaces this
     with the radial scrim and unifies the opacity across all 5 pages. */
  background-image: linear-gradient(180deg, rgba(14, 13, 11, 0.62) 0%, rgba(17, 16, 14, 0.68) 45%, rgba(12, 11, 10, 0.82) 100%);
}

.page-hero-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.page-hero-decor::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.page-hero-decor::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
}

.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 22px;
}

.page-hero-tag i {
  color: var(--color-accent);
}

.page-hero h1 {
  font-family: "Bodoni Moda", serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: clamp(40px, 6vw, 72px);
  color: #ffffff;
  line-height: 1;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.page-hero-crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}

.page-hero-crumbs a {
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition-fast);
}

.page-hero-crumbs a:hover {
  color: #ffffff;
}

.page-hero-crumbs .sep {
  opacity: 0.4;
}

.page-hero-crumbs .current {
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Editorial variant (About Us, Blog, Contact Us) ----------
   Left-aligned, non-uppercase heading + an optional description
   paragraph, for the more content-led pages — as opposed to Shop/
   Categories' centered, high-impact listing-page treatment. */
.page-hero.page-hero-editorial .page-hero-inner {
  text-align: left;
}

.page-hero.page-hero-editorial h1 {
  text-transform: none;
  font-style: italic;
  letter-spacing: 0;
}

.page-hero-description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
  margin: 0 0 18px;
}

.page-hero.page-hero-editorial .page-hero-crumbs {
  justify-content: flex-start;
}

/* ---------- My Orders (customer order history) ---------- */
.orders-page {
  padding: 60px 0 90px;
}

/* Account pages that opt out of the full photographic Includes/page-hero.php
   banner (see profile.php) use this instead — quiet, on-brand, and far
   shorter, so the actual task (editing a form) starts near the top of
   the viewport instead of a full screen down. */
.utility-page-header {
  /* padding-top clears the fixed navbar (~104px tall) plus a little
     breathing room — versus .page-hero's 190px, built around a full
     hero photo this page deliberately doesn't have. */
  padding: 130px 0 32px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--border-light);
}

.utility-page-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.utility-page-crumbs a {
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.utility-page-crumbs a:hover {
  color: var(--color-accent);
}

.utility-page-crumbs .sep {
  opacity: 0.5;
}

.utility-page-crumbs .current {
  color: var(--color-accent);
  font-weight: 600;
}

.utility-page-header .about-tag {
  margin-bottom: 10px;
}

.utility-page-header h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  margin-bottom: 6px;
}

.utility-page-header p {
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 480px;
}

.utility-page-content {
  padding-top: 44px;
}

/* ---------- FAQ page (faq.php) ---------- */
.faq-page {
  padding: 70px 0 100px;
}

.faq-groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.faq-group-head i {
  font-size: 22px;
  color: var(--color-accent);
}
.faq-group-head h2 {
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.faq-item.open {
  border-color: rgba(242, 107, 69, 0.35);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.faq-chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}
.faq-item.open .faq-chevron {
  transform: rotate(135deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-fast);
}
.faq-answer p {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-item.open .faq-answer p {
  padding-bottom: 20px;
}

.faq-still-need-help {
  max-width: 760px;
  margin: 56px auto 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
}
.faq-still-need-help > i {
  font-size: 30px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.faq-still-need-help h3 {
  font-size: 17px;
  margin: 0 0 4px;
}
.faq-still-need-help p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.faq-still-need-help .btn-primary {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .faq-still-need-help {
    flex-direction: column;
    text-align: center;
  }
  .faq-still-need-help .btn-primary {
    margin-left: 0;
  }
}

.orders-empty {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px;
}

.orders-empty i {
  font-size: 48px;
  color: var(--color-accent);
  margin-bottom: 14px;
}

.orders-empty h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.orders-empty p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 22px;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.order-card {
  background: var(--color-off-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}

.order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-medium);
}

.order-card-ref {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-right: 12px;
}

.order-card-date {
  font-size: 12.5px;
  color: var(--text-muted);
}

.order-card-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.order-card-status-pending   { background: rgba(212, 175, 106, 0.16); color: #9a7527; }
.order-card-status-confirmed { background: rgba(90, 150, 224, 0.14); color: #2f6fb8; }
.order-card-status-shipped   { background: rgba(154, 106, 224, 0.14); color: #7c4fc4; }
.order-card-status-delivered { background: rgba(76, 175, 125, 0.14); color: #2f8a5e; }
.order-card-status-cancelled { background: rgba(224, 90, 90, 0.14); color: #c23f3f; }

.order-card-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.order-card-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.order-card-item-name {
  flex: 1;
  color: var(--text-primary);
}

.order-card-item-qty {
  color: var(--text-muted);
}

.order-card-item-price {
  font-weight: 600;
  min-width: 64px;
  text-align: right;
}

.order-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-medium);
  font-size: 14px;
}

.order-card-foot strong {
  color: var(--color-accent);
  font-size: 16px;
}

/* ---------- Profile Settings ---------- */
.profile-panel-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
}

/* Alongside .order-card's base surface (background/border/radius/shadow,
   shared with My Orders) — more generous outer padding than that card
   gets by default, for a settings page that should feel spacious at its
   edges even while the fields inside sit closer together. */
.profile-form-card {
  padding: 32px 34px;
}

@media (max-width: 560px) {
  .profile-form-card {
    padding: 24px 20px;
  }
}

.profile-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}

.profile-card-head i {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-accent);
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-card-head h3 {
  font-size: 17px;
  margin: 0 0 3px;
}

.profile-card-head p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

#profileInfoForm .contact-field,
#passwordForm .contact-field {
  margin-bottom: 16px;
}

/* Slightly tighter than the checkout form's inputs (14px 18px) — this
   page packs more fields into view at once, and the difference is small
   enough that it costs nothing in comfort while visibly shortening the
   page. */
#profileInfoForm .contact-field input,
#passwordForm .contact-field input {
  padding: 12px 16px;
}

#profileInfoForm .btn-primary,
#passwordForm .btn-primary {
  border: none;
  margin-top: 4px;
}

.contact-field input:disabled {
  background: var(--color-bg-soft);
  color: var(--text-muted);
  cursor: not-allowed;
}

.account-form-success {
  background: rgba(76, 175, 125, 0.1);
  border: 1px solid rgba(76, 175, 125, 0.3);
  color: #2f8a5e;
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}