/* ============================================
   JERSEY GIRL GLAM — Design System
   Editorial magazine aesthetic
   Refinery29 meets Who What Wear
   ============================================ */

/* === RESET & VARIABLES === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Brand palette */
  --gold: #C9A96E;
  --gold-light: #E8D5B0;
  --gold-muted: rgba(201, 169, 110, 0.15);
  --black: #0f0f0f;
  --charcoal: #1a1a1a;
  --slate: #2a2a2a;
  --blush: #F2D7D9;
  --blush-dark: #D4A0A4;
  --rose: #e8364f;
  --white: #FFFFFF;
  --cream: #FAF8F5;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-300: #d1d1d1;
  --gray-400: #999;
  --gray-500: #666;
  --gray-600: #444;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --nav-height: 72px;
  --container-max: 1200px;
  --container-narrow: 800px;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
}

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

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

ul, ol {
  list-style-position: inside;
}

/* === NAVIGATION === */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo-text .logo-jersey {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-logo-text .logo-glam {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
}

.nav-logo-img {
  height: auto;
  width: 170px;
  display: block;
  filter: brightness(0) invert(1);
}

.logo-jersey {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.logo-glam {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--charcoal);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform 0.2s;
}

/* === MAIN CONTENT === */
main {
  min-height: calc(100vh - var(--nav-height) - 200px);
}

/* === HOME HERO === */
.home-hero {
  padding: 0;
}

.hero-editorial {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.hero-editorial-image {
  width: 100%;
  min-height: 70vh;
  max-height: 80vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b3d 50%, #3d1b2d 100%);
}

/* Real img inside hero — absolutely positioned for full cover effect */
.hero-editorial-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-editorial-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
}

.hero-editorial-overlay {
  position: relative;
  z-index: 2;
  padding: 4rem 3rem;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
}

.hero-category {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 1rem;
  max-width: 700px;
}

.hero-excerpt {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 550px;
  margin-bottom: 1.5rem;
}

.hero-read-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* === SECTIONS === */
.section-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.home-section {
  padding: 5rem 0;
}

.home-section--products {
  background: var(--cream);
}

.home-section--categories {
  padding: 4rem 0;
  border-top: 1px solid var(--gray-200);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1rem;
}

.section-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.5px;
}

.section-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.section-link:hover {
  color: var(--charcoal);
}

/* === POST CARDS === */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

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

.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: var(--white);
  min-height: 0; /* Prevent implicit min-height in grid/flex contexts */
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* Card thumbnail: 4:3 landscape aspect ratio.
   aspect-ratio is universally supported since 2022. No fallback needed. */
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--gray-100);
  overflow: hidden;
  flex-shrink: 0; /* Don't shrink in flex column */
}

/* Image fills container — uses contain to show the full image without cropping.
   Background color matches site palette so letterbox areas blend in.
   Uses inset:0 shorthand + explicit height to override global img reset. */
.card-image > img,
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
  background: var(--gray-100);
}

.post-card:hover .card-img {
  transform: scale(1.03);
}

.card-img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b3d 50%, #3d1b2d 100%);
}

/* Pinterest Save button — overlays on card images */
.pin-save-btn {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  background: #E60023;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-sans);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}

.card-image:hover .pin-save-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* On mobile: always show Pinterest button (no hover) */
@media (hover: none) {
  .pin-save-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Tags/categories hidden from visitors — backend filtering only */
.card-category {
  display: none;
}

.post-tags {
  display: none;
}

.card-body {
  padding: 1.25rem 0.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}


/* New arrivals section header */
.posts-section-header {
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.posts-section-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}

/* New arrivals pinned section (top of list) */
#new-arrivals-grid {
  margin-bottom: 1.5rem;
}

#new-arrivals-grid .post-card {
  opacity: 1;
}
.card-excerpt {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.new-arrival-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rose);
  background: #fdf2f4;
  border: 1px solid #f0c0c8;
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 0.4rem;
  width: fit-content;
}

/* ============================================
   THE CAPSULES — section heading badge + carousel + intro
   ============================================ */

.section-heading-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  background: var(--gold);
  color: #1a1a1a;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.4;
}

.capsule-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fdf2f4;
  color: var(--rose);
  border: 1px solid #f0c0c8;
}

.capsule-badge-new {
  font-size: 0.6rem;
  background: var(--gold);
  color: #1a1a1a;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Capsule intro — subheading + pro-tip block under H1 */
.capsule-intro {
  max-width: 640px;
  margin: 1.5rem auto 0;
  text-align: center;
}

.capsule-subheading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--gray-600);
  margin: 0 0 1.25rem;
}

.capsule-pro-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: #fbf7f1;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 0 auto;
  text-align: left;
}

.capsule-pro-tip-label {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 2px;
}

.capsule-pro-tip-text {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}

/* Capsule carousel — flat-lay + up to 7 hero images */
.capsule-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--gray-100, #f5f3f0);
}

.capsule-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.capsule-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  display: none;
  position: relative;
}

.capsule-carousel-slide.is-active {
  display: block;
}

.capsule-carousel-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.capsule-carousel-prev,
.capsule-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  color: var(--charcoal);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  z-index: 2;
}

.capsule-carousel-prev:hover,
.capsule-carousel-next:hover {
  background: #fff;
  border-color: var(--gold);
  color: var(--gold);
}

.capsule-carousel-prev { left: 0.75rem; }
.capsule-carousel-next { right: 0.75rem; }

.capsule-carousel-dots {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.capsule-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.capsule-carousel-dot:hover {
  background: #fff;
}

.capsule-carousel-dot.is-active {
  background: var(--gold);
  transform: scale(1.15);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--gray-400);
}

.card-author {
  font-weight: 600;
  color: var(--gray-600);
}

/* === PRODUCT CARDS === */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  border-color: var(--gold-light);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.product-image-link {
  display: block;
}

.product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--gray-100);
  padding: 1rem;
}

.product-image--placeholder {
  background: var(--gray-100);
  aspect-ratio: 1;
}

.product-info {
  padding: 1.25rem;
}

.product-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 0.82rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
}

.product-cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s;
}

.product-cta:hover {
  color: var(--charcoal);
}

/* === AFFILIATE NOTICE === */
.affiliate-notice {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 2rem;
  font-style: italic;
}

.post-affiliate-notice {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-style: italic;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
}

/* === CATEGORIES STRIP === */
.categories-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.category-chip {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: all 0.2s ease;
}

.category-chip:hover,
.category-chip.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

/* Capsules chip on Shop My Closet — same style as the other chips but with
   a subtle "New" badge inside. */
.category-chip--capsules {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fdf2f4;
  color: var(--rose);
  border-color: #f0c0c8;
}

.category-chip--capsules:hover,
.category-chip--capsules.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}

.category-chip-badge {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gold);
  color: #1a1a1a;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.4;
}

.category-chip--capsules:hover .category-chip-badge,
.category-chip--capsules.active .category-chip-badge {
  background: var(--gold);
  color: #1a1a1a;
}

/* Per-product capsule badge strip — each merged card shows N capsule labels */
.product-capsule-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.6rem;
}

.product-capsule-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #fdf2f4;
  color: var(--rose);
  border: 1px solid #f0c0c8;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

/* Per-product available-sizes strip — text only, sits under the title */
.product-sizes {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.4;
  margin: -0.2rem 0 0.5rem;
}
.product-sizes-label {
  font-weight: 600;
  color: var(--charcoal);
  margin-right: 0.15rem;
}

/* === PAGE HEADER === */
.page-header {
  padding: 4.5rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid var(--gray-200);
}

/* Hub page header — dark charcoal treatment, visually separated from the photo strip below */
.page-header--hub {
  background: var(--charcoal);
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--gold);
}

.page-header--hub .page-title {
  color: var(--white);
}

.page-header--hub .page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  max-width: none;
  white-space: nowrap;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.page-header--hub .category-chip {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

.page-header--hub .category-chip:hover,
.page-header--hub .category-chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* Background-image variant — banner sits behind the hub header */
.page-header--hub-bg {
  position: relative;
  background-size: cover;
  background-position: center;
}

.page-header__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.page-header--hub-bg .section-container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--gray-500);
  max-width: 500px;
  margin: 0 auto;
}

/* === POSTS SECTION === */
.posts-section {
  padding: 2rem 0 5rem;
}

/* === INDIVIDUAL POST === */
/* Legacy background-image hero (kept for backward compat) */
.post-hero {
  width: 100%;
  height: 50vh;
  max-height: 600px;
  background-size: cover;
  background-position: center;
}

/* Editorial hero — prominent but not a billboard */
.post-hero-wrapper {
  width: 100%;
  max-height: 520px;
  background: var(--black);
  overflow: hidden;
  position: relative;
}

.post-hero-img {
  width: 100%;
  height: 520px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Pinterest Save button on post hero */
.post-pin-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: #E60023;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
  white-space: nowrap;
}

.post-hero-wrapper:hover .post-pin-btn {
  opacity: 1;
}

@media (hover: none) {
  .post-pin-btn {
    opacity: 1;
  }
}

.post-container {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.post-header {
  margin-bottom: 3rem;
  text-align: center;
}

.post-category-link {
  display: inline-block;
  padding: 0.3rem 1rem;
  background: var(--gold-muted);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  transition: background 0.2s;
}

.post-category-link:hover {
  background: var(--gold);
  color: var(--black);
}

.post-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.post-excerpt-large {
  font-size: 1.2rem;
  color: var(--gray-500);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--gray-400);
}

.post-author {
  font-weight: 600;
  color: var(--gray-600);
}

/* === POST BODY === */
.post-body {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.post-body h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 2.5rem 0 1rem;
}

.post-body h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 2rem 0 0.75rem;
}

.post-body p {
  margin-bottom: 1.25rem;
}

.post-body a {
  color: var(--gold);
  font-weight: 500;
  border-bottom: 1px solid var(--gold-light);
  transition: border-color 0.2s;
}

.post-body a:hover {
  border-bottom-color: var(--gold);
}

.post-body ul, .post-body ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

.post-body li {
  margin-bottom: 0.5rem;
}

.post-body img {
  border-radius: 4px;
  margin: 2rem 0;
}

.post-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--cream);
  font-style: italic;
  color: var(--gray-600);
}

.post-body strong {
  color: var(--charcoal);
}

/* === POST PRODUCTS SECTION === */
.post-products {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 2px solid var(--gray-200);
}

.post-products-heading {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 2rem;
  text-align: center;
}

.capsule-layout-gallery {
  margin: 0 auto 2rem;
  max-width: 720px;
}

.capsule-layout-gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

/* === POST TAGS === */
.post-tags {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.35rem 1rem;
  background: var(--gray-100);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* === RELATED POSTS === */
.related-posts {
  padding: 5rem 0;
  background: var(--cream);
}

/* Related posts: simple linked list format */
.related-posts--list {
  padding: 4rem 0;
  background: var(--cream);
  border-top: 1px solid var(--gray-200);
}

.related-list {
  list-style: none;
  max-width: 680px;
  margin: 2rem auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.related-list-item {
  border-bottom: 1px solid var(--gray-200);
}

.related-list-item:first-child {
  border-top: 1px solid var(--gray-200);
}

.related-list-link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem 0.25rem;
  text-decoration: none;
  transition: background 0.15s;
}

.related-list-link:hover {
  background: rgba(201, 169, 110, 0.06);
  padding-left: 0.75rem;
  margin-left: -0.5rem;
  border-radius: 4px;
}

.related-list-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
}

.related-list-link:hover .related-list-title {
  color: var(--gold);
}

.related-list-desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* === FAQ SECTION (POST PAGES) === */
.post-faq {
  padding: 4rem 0;
  background: var(--cream);
  border-top: 1px solid var(--gray-200);
}

.post-faq .section-container {
  max-width: 800px;
}

.post-faq-heading {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 2.5rem;
  text-align: center;
  letter-spacing: -0.5px;
}

.post-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.post-faq-item {
  padding: 1.75rem;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: var(--gold-light);
}

.post-faq-question {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 1rem;
  line-height: 1.4;
  letter-spacing: -0.3px;
  cursor: pointer;
  user-select: none;
}

.post-faq-question::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5rem;
  background: var(--gold);
  border-radius: 50%;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.post-faq-answer {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.8;
  margin: 0;
}

.post-faq-answer a {
  color: var(--charcoal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.post-faq-answer a:hover {
  color: var(--gold);
}

/* === FASHION FAQS PAGE (deduped archive) === */
/* Source line — sits under the answer and links back to the originating Edit post. */
.post-faq-source {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray-400);
  margin: 0.75rem 0 0;
}
.post-faq-source + .post-faq-source {
  margin-top: 0.25rem;
}
.post-faq-source a {
  color: var(--gold);
  text-decoration: none;
  font-style: normal;
  font-weight: 500;
  transition: color 0.2s ease;
}
.post-faq-source a:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

/* Search input — only rendered client-side when > 50 FAQs. */
.fashion-faqs-search-wrap {
  margin: 0 0 1.75rem;
}
.fashion-faqs-search {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  outline: none;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s ease;
}
.fashion-faqs-search:focus {
  border-color: var(--gold);
}

/* === SUBSCRIBE PAGE === */
.subscribe-page {
  background: #0a0a0a;
  color: #fff;
  min-height: 100vh;
  padding: 0 0 5rem;
}

.subscribe-hero {
  background: #1a1a1a;
  padding: 6rem 2rem 4rem;
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.subscribe-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.subscribe-hero-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}

.subscribe-hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

.subscribe-form-wrap {
  padding: 3.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subscribe-form {
  max-width: 500px;
  margin: 0 auto;
}

.subscribe-form-row {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
}

.subscribe-form-input {
  flex: 1;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-right: none;
  color: #fff;
  border-radius: 4px 0 0 4px;
  outline: none;
  transition: border-color 0.2s;
}

.subscribe-form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.subscribe-form-input:focus {
  border-color: var(--gold);
}

.subscribe-form-btn {
  padding: 0.85rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--gold);
  color: #0a0a0a;
  border: 1px solid var(--gold);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.subscribe-form-btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.subscribe-form-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.75rem;
}

.subscribe-form-gdpr input[type="checkbox"] {
  accent-color: var(--gold);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.subscribe-form-fine {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.subscribe-perks {
  padding: 3.5rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}

.subscribe-perk {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.subscribe-perk-icon {
  color: var(--gold);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.subscribe-perk strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}

.subscribe-perk p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  line-height: 1.45;
}

.subscribe-back {
  padding: 2rem 2rem 0;
  text-align: center;
}

.subscribe-back a {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
  transition: color 0.2s;
}

.subscribe-back a:hover {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 580px) {
  .subscribe-perks {
    grid-template-columns: 1fr;
  }
  .subscribe-form-row {
    flex-direction: column;
  }
  .subscribe-form-input {
    border-right: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
  }
  .subscribe-form-btn {
    border-radius: 4px;
    padding: 0.85rem;
  }
}

/* === ABOUT PAGE === */
.about-page {
  padding: 5rem 0;
}

.about-container {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 2rem;
}

.about-header {
  text-align: center;
  margin-bottom: 3rem;
}

.about-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}

.about-subtitle {
  font-size: 1.2rem;
  color: var(--gold);
  font-weight: 500;
}

.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-lead {
  font-size: 1.3rem;
  font-family: var(--font-serif);
  color: var(--charcoal);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.about-text p {
  margin-bottom: 1.25rem;
}

.about-text h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--charcoal);
  margin: 2.5rem 0 1rem;
}

.about-text ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

.about-text li {
  margin-bottom: 0.5rem;
}

.about-sign {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold);
  font-style: italic;
  margin-top: 2rem;
}

.about-edit-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-edit-section p {
  margin-bottom: 1.25rem;
}

.about-journal-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-journal-section p {
  margin-bottom: 1.25rem;
}

/* Cassandra signature block — standalone, bottom of About page */
.about-signature-block {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.about-signature-block .about-sign {
  margin-top: 0;
}

.about-signature-cta {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: 0.75rem 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s;
}

.about-signature-cta:hover {
  background: var(--charcoal);
  color: #fff;
}

.about-section-heading {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
}

.about-inline-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.about-inline-link:hover {
  color: var(--charcoal);
}

/* Gold CTA button inside about page sections */
.about-section-cta-wrap {
  margin-top: 2rem;
  text-align: left;
}

/* === DISCLOSURE PAGE === */
.disclosure-page {
  padding: 5rem 0;
}

.disclosure-container {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 2rem;
}

.disclosure-content {
  margin-top: 2.5rem;
}

.disclosure-content h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--charcoal);
  margin: 2.5rem 0 1rem;
}

.disclosure-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.disclosure-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

.disclosure-content li {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.disclosure-highlight {
  padding: 1.5rem 2rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  font-style: italic;
  color: var(--gray-600);
  line-height: 1.7;
}

/* === ERROR PAGES === */
.error-page {
  text-align: center;
  padding: 8rem 2rem;
}

.error-page h1 {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 1rem;
}

.error-page p {
  font-size: 1.1rem;
  color: var(--gray-500);
  margin-bottom: 2rem;
}

/* Branded 404 page */
.error-page--404 {
  padding: 5rem 2rem 6rem;
  max-width: 640px;
  margin: 0 auto;
}

.error-page-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.error-page-code {
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-page-message {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.error-page-sub {
  font-size: 1rem;
  color: var(--gray-500);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.error-page-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.error-page-hub-link {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem;
  background: var(--cream);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.error-page-hub-link:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.12);
}

.error-hub-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.error-hub-desc {
  font-size: 0.8rem;
  color: var(--gray-500);
  line-height: 1.4;
}

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

.btn--gold:hover {
  background: var(--gold-light);
}

@media (max-width: 640px) {
  .error-page--404 {
    padding: 3rem 1.25rem 4rem;
  }

  .error-page-code {
    font-size: 4rem;
  }

  .error-page-links {
    grid-template-columns: 1fr;
  }
}

.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
}

.btn:hover {
  background: var(--black);
}

/* === EMPTY STATE === */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
}

.empty-state h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
}

.empty-state p {
  color: var(--gray-500);
}

/* === FOOTER === */
/* === FOOTER EMAIL CAPTURE === */
.footer-email-section {
  background: var(--gold-muted);
  border: 1px solid var(--gold-light);
  border-radius: 8px;
  padding: 2.5rem 2.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

.footer-email-heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.footer-email-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.25rem;
}

.footer-email-row {
  display: flex;
  gap: 0.5rem;
  max-width: 440px;
  margin: 0 auto;
}

.footer-email-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  outline: none;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s;
}

.footer-email-input:focus {
  border-color: var(--gold);
}

.footer-email-btn {
  padding: 0.75rem 1.5rem;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.footer-email-btn:hover {
  background: var(--gold);
  color: var(--charcoal);
}

.footer-email-fine {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.65rem;
}

.footer-email-gdpr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  user-select: none;
  margin-top: 0.6rem;
}

.footer-email-gdpr input[type="checkbox"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.footer-gdpr-error,
.popup-gdpr-error,
.subscribe-page-gdpr-error {
  font-size: 0.72rem;
  color: var(--gold);
  margin-top: 0.4rem;
  text-align: left;
  font-style: italic;
  font-weight: 500;
}

/* Inline error state — shown after failed submit attempt */
.footer-gdpr-error.has-error,
.popup-gdpr-error.has-error,
.subscribe-page-gdpr-error.has-error {
  color: var(--gold);
}

/* When consent is unchecked and user tries to submit, highlight the checkbox label */
.footer-email-gdpr.has-error,
.subscribe-popup-gdpr.has-error,
.subscribe-form-gdpr.has-error {
  color: var(--gold);
}

.footer-email-btn:disabled,
.subscribe-popup-btn:disabled,
.subscribe-form-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Subscribe helper text — always visible, below the checkbox */
.subscribe-hint {
  font-size: 0.72rem;
  color: var(--gray-600);
  margin-top: 0.35rem;
  line-height: 1.4;
  font-style: italic;
}

/* Footer: slightly lighter to read on the dark background */
.footer-email-section .subscribe-hint {
  color: rgba(255, 255, 255, 0.5);
}

/* Popup hint */
.subscribe-popup .subscribe-hint {
  margin-top: 0.25rem;
  color: var(--gray-500);
}

/* /subscribe page styles */
.subscribe-form-wrap .subscribe-hint {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  margin-top: 0.35rem;
  text-align: left;
  padding-left: 0.3rem;
}

.subscribe-popup-gdpr {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--gray-500);
  cursor: pointer;
  user-select: none;
  padding: 0.15rem 0;
}

.subscribe-popup-gdpr input[type="checkbox"] {
  accent-color: var(--gold);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.footer-email-success {
  font-size: 0.95rem;
  color: var(--gold);
  font-weight: 600;
  padding: 0.75rem 0;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .footer-email-row {
    flex-direction: column;
  }
  .footer-main {
    flex-direction: column;
  }
  .footer-email-section {
    padding: 2rem 1.5rem;
  }
}

/* === FOOTER === */
.site-footer {
  background: var(--charcoal);
  padding: 4rem 0 2rem;
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-brand {
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.footer-logo .logo-jersey {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-logo .logo-glam {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--white);
}

.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
}

.footer-links {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}

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

.footer-disclosure {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  margin-bottom: 2rem;
  max-width: 600px;
}

.footer-contact {
  margin-bottom: 1.5rem;
}

.footer-contact-link {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  transition: color 0.2s;
  text-decoration: none;
}

.footer-contact-link:hover {
  color: var(--gold);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-bottom p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
}

.footer-polsia {
  margin-top: 0.4rem;
}

.footer-polsia-link {
  color: var(--gold);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.footer-polsia-link:hover {
  opacity: 1;
}

/* === CASSANDRA SIGNATURE SECTION === */
.home-cassandra {
  background: var(--cream);
  padding: 4rem 0;
  border-top: 1px solid var(--gold-light);
}

.cassandra-signature {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 800px;
  margin: 0 auto;
}

.cassandra-signature-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--gold-light);
}

.cassandra-signature-text {
  flex: 1;
}

.cassandra-signature-quote {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.cassandra-signature-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.cassandra-signature-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.cassandra-signature-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .cassandra-signature {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  /* Tighten horizontal padding on mobile for more content space */
  .section-container {
    padding: 0 1.25rem;
  }

  .nav-inner {
    padding: 0 1.25rem;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--black);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-direction: column;
    padding: 0.5rem 1.25rem;
    gap: 0;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    /* Ensure mobile menu closes on link tap */
  }

  .nav-links.open {
    display: flex;
  }

  .nav-link {
    /* 44px tap target minimum */
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    font-size: 1rem;
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  .nav-toggle {
    display: flex;
    /* 44x44 tap target */
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
  }

  .posts-grid,
  .posts-grid--full {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-editorial-overlay {
    padding: 2rem 1.25rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-excerpt {
    font-size: 1rem;
  }

  .section-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .home-section {
    padding: 3rem 0;
  }

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

  .post-container {
    padding: 2rem 1.25rem 4rem;
  }

  .post-hero {
    height: 40vh;
  }

  .post-hero-wrapper {
    max-height: 320px;
  }

  .post-hero-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
  }

  /* Always show Pinterest save on post hero on mobile */
  .post-pin-btn {
    opacity: 1;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }

  .categories-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

  .categories-strip::-webkit-scrollbar {
    display: none;
  }

  .category-chip {
    white-space: nowrap;
    flex-shrink: 0;
    /* Ensure 44px tap target height */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }

  /* Footer links — 44px tap targets */
  .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
  }

  /* About page */
  .about-page {
    padding: 3rem 0;
  }

  /* Disclosure page */
  .disclosure-page {
    padding: 3rem 0;
  }

  /* Breadcrumbs */
  .breadcrumbs .section-container {
    padding: 0 1.25rem;
  }

  /* Page header */
  .page-header {
    padding: 2.5rem 0 1.5rem;
  }
}

/* === BREADCRUMBS === */
.breadcrumbs {
  padding: 1rem 0;
  border-bottom: 1px solid var(--gray-200);
  background: var(--cream);
}

.breadcrumbs .section-container {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  color: var(--gray-400);
  flex-wrap: wrap;
}

.breadcrumb-link {
  color: var(--gray-500);
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: var(--gold);
}

.breadcrumb-sep {
  margin: 0 0.5rem;
  color: var(--gray-300);
}

.breadcrumb-current {
  color: var(--gray-400);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === AUTHOR BYLINE === */
.author-byline-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-light);
}

.author-byline-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.author-byline-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-600);
}

.author-byline-date {
  font-size: 0.78rem;
  color: var(--gray-400);
}

/* === SHOP THE LOOK (IN-BODY) === */
.stl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.stl-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  background: var(--white);
}

.stl-card:hover {
  border-color: var(--gold-light);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.stl-card-body {
  padding: 1.25rem;
}

.stl-card-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.stl-card-desc {
  font-size: 0.85rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.stl-card-price {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  background: var(--cream);
  border-radius: 4px;
}

.stl-card-cta {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  border-bottom: 1px solid transparent;
}

.stl-card-cta:hover {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

/* === PRO TIP === */
.pro-tip {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.6;
}

.pro-tip strong {
  color: var(--charcoal);
  font-weight: 700;
}

.pro-tip a {
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-light);
  transition: border-color 0.2s;
}

.pro-tip a:hover {
  border-bottom-color: var(--gold);
}

/* === THE EDIT HUB FEATURED HERO === */
.edit-hero {
  padding: 0 2rem;
  max-width: var(--container-max);
  margin: 0 auto 2rem;
}

.edit-hero-card {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.edit-hero-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}

.edit-hero-image {
  width: 100%;
  min-height: 400px;
  max-height: 500px;
  display: flex;
  align-items: flex-end;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d1b3d 50%, #3d1b2d 100%);
}

/* Real img inside edit hero */
.edit-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.edit-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 40%, transparent 65%);
}

.edit-hero-overlay {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  width: 100%;
}

.edit-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  max-width: 600px;
}

.edit-hero-excerpt {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 500px;
  margin-bottom: 1rem;
}

/* === HOMEPAGE BRAND INTRO === */
.home-brand-intro {
  padding: 4rem 0;
  background: var(--cream);
  border-bottom: 1px solid var(--gray-200);
}

.brand-intro-inner {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.brand-intro-text {
  flex: 1;
}

.brand-intro-tagline {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.brand-intro-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.brand-intro-body {
  font-size: 1rem;
  color: var(--gray-500);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 1.75rem;
}

.brand-intro-cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}

.brand-intro-cta:hover {
  background: var(--black);
}

.brand-intro-stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex-shrink: 0;
}

.brand-stat {
  text-align: center;
  padding: 1.5rem 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  min-width: 140px;
}

.brand-stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.brand-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.section-subhead {
  font-size: 0.82rem;
  color: var(--gray-400);
  font-style: italic;
}

@media (max-width: 768px) {
  .brand-intro-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .brand-intro-stats {
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
  }
  .brand-stat {
    padding: 1rem;
    min-width: auto;
    flex: 1;
  }
}

/* === ABOUT PAGE PHOTO === */
.about-photo-header {
  text-align: center;
  margin-bottom: 2rem;
}

.about-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--gold-light);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-card {
    display: grid;
    grid-template-columns: 100px 1fr;
  }

  .product-image {
    aspect-ratio: 1;
    height: 100%;
  }

  .stl-grid {
    grid-template-columns: 1fr;
  }

  .edit-hero {
    padding: 0 1rem;
  }

  .edit-hero-image {
    min-height: 280px;
  }

  .edit-hero-overlay {
    padding: 1.5rem;
  }

  .edit-hero-title {
    font-size: 1.6rem;
  }

  .about-photo {
    width: 120px;
    height: 120px;
  }

  .breadcrumb-current {
    max-width: 180px;
  }

  /* Post title on very small screens */
  .post-title {
    font-size: 1.75rem;
  }

  .post-excerpt-large {
    font-size: 1rem;
  }

  /* Hero — tighter padding on small phones */
  .hero-editorial-overlay {
    padding: 1.5rem 1rem;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  /* Tighter section padding */
  .section-container {
    padding: 0 1rem;
  }

  /* Cards — full width with proper tap targets */
  .card-body {
    padding: 1rem 0.25rem;
  }

  .card-title {
    font-size: 1.1rem;
  }

  /* Post body readability on small screen */
  .post-body {
    font-size: 1rem;
  }

  /* Post container */
  .post-container {
    padding: 1.5rem 1rem 3rem;
  }

  /* Disclosure */
  .disclosure-container {
    padding: 0 1rem;
  }

  /* About */
  .about-container {
    padding: 0 1rem;
  }
}

/* ============================================
   THE JOURNAL — SECTION & POST STYLES
   ============================================ */

/* Journal badge on post header */
.post-section-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 0.75rem;
}

.journal-badge {
  background: var(--gold);
  color: #fff;
}

.cheat-sheet-badge {
  background: #2c5f2e;
  color: #fff;
}

/* Cheat Sheet articles — same readable column + link styling as Journal */
.post-article--cheat-sheet .post-container {
  max-width: 780px;
}

.post-article--cheat-sheet .post-body a,
.post-article--cheat-sheet .post-content-col .post-body a {
  color: #2c5f2e;
  text-decoration: underline;
  text-decoration-color: rgba(44, 95, 46, 0.4);
  text-underline-offset: 2px;
}

.post-article--cheat-sheet .post-body a:hover,
.post-article--cheat-sheet .post-content-col .post-body a:hover {
  color: #1e4220;
  text-decoration-color: #1e4220;
}

/* Journal articles get slightly wider readable column */
.post-article--journal .post-container {
  max-width: 780px;
}

/* Journal body links — inline affiliate links */
.post-article--journal .post-body a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.4);
  text-underline-offset: 2px;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.post-article--journal .post-body a:hover {
  color: #b8942e;
  text-decoration-color: #b8942e;
}

/* Homepage Journal section — clean styling matching The Edit */
.home-section--journal {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Subhead text below section header */
.section-subhead-text {
  font-size: 0.95rem;
  color: var(--gray-500);
  margin: -0.5rem 0 1.5rem;
  font-style: italic;
}

/* ============================================
   JOURNAL EDITORIAL TITLE TREATMENT
   Replaces the hero banner image for Journal
   posts with a clean typographic section
   ============================================ */

.journal-title-hero {
  background: var(--cream);
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--gray-200);
}

/* Gold rule at very top — decorative entry line */
.journal-title-hero::before {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 2.5rem;
}

.journal-title-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Larger, editorial-weight title */
.journal-post-title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

/* Italic excerpt — sets the story up */
.journal-post-excerpt {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

/* Closing gold rule under author byline */
.journal-title-hero::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 2rem auto 0;
  opacity: 0.65;
}

/* ============================================
   JOURNAL INLINE HERO IMAGE
   First element in post body — not a banner
   ============================================ */

.journal-inline-hero {
  position: relative;
  width: 100%;
  margin-bottom: 2.5rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
}

.journal-inline-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.journal-inline-hero .post-pin-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.journal-inline-hero:hover .post-pin-btn {
  opacity: 1;
}

@media (hover: none) {
  .journal-inline-hero .post-pin-btn {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .journal-title-hero {
    padding: 2.5rem 1.5rem 2rem;
  }

  .journal-title-hero::before {
    margin-bottom: 2rem;
  }

  .journal-post-title {
    font-size: clamp(1.8rem, 6.5vw, 2.5rem);
  }

  .journal-inline-hero-img,
  .edit-inline-hero-img {
    height: auto;
  }
}

/* ============================================
   EDIT POST TITLE TREATMENT
   Replaces the hero banner for Edit posts
   with clean editorial typography + inline image
   ============================================ */

.edit-title-hero {
  background: var(--cream);
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--gray-200);
}

/* Gold rule at very top */
.edit-title-hero::before {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 2.5rem;
}

.edit-title-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Large editorial title */
.edit-post-title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

/* Italic excerpt */
.edit-post-excerpt {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gray-500);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

/* Closing gold rule under author byline */
.edit-title-hero::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 2rem auto 0;
  opacity: 0.65;
}

/* ============================================
   EDIT INLINE HERO IMAGE
   First element in post body — not a banner
   ============================================ */

.edit-inline-hero {
  position: relative;
  width: 100%;
  margin-bottom: 2.5rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
}

.edit-inline-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.edit-inline-hero .post-pin-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.edit-inline-hero:hover .post-pin-btn {
  opacity: 1;
}

@media (hover: none) {
  .edit-inline-hero .post-pin-btn {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .edit-title-hero {
    padding: 2.5rem 1.5rem 2rem;
  }

  .edit-title-hero::before {
    margin-bottom: 2rem;
  }

  .edit-post-title {
    font-size: clamp(1.8rem, 6.5vw, 2.5rem);
  }
}

/* ============================================
   2-COLUMN GRID (hub pages + "From the Journal")
   ============================================ */

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

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

/* ============================================
   4-COLUMN GRID (The Edit hub)
   Wide container keeps card proportions close
   to the original 3-col at 1200px max-width.
   ============================================ */

/* Expand the container so 4 cards ≈ same width as 3 cards were */
.posts-section--wide .section-container {
  max-width: 1560px;
}

.posts-grid--4col {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1280px) {
  .posts-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .posts-grid--4col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Hidden overflow cards (revealed via Load More) */
.edit-post-hidden {
  display: none;
}

/* Load More button */
.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 3rem 0 1.5rem;
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2.75rem;
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}

.load-more-btn:hover {
  background: var(--gold);
  color: var(--white);
}

/* ============================================
   HOMEPAGE HERO — EDITORIAL SPLIT LAYOUT
   Left: editorial text / Right: portrait image
   ============================================ */

.hero-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 78vh;
  text-decoration: none;
  background: var(--charcoal);
  overflow: hidden;
}

.hero-split-layout--empty {
  pointer-events: none;
}

.hero-split-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4rem 4rem 4.5rem;
  background: var(--charcoal);
  position: relative;
}

/* Decorative gold rule at top of text panel */
.hero-split-text::before {
  content: '';
  display: block;
  position: absolute;
  top: 3rem;
  left: 4rem;
  width: 40px;
  height: 2px;
  background: var(--gold);
}

.hero-split-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: var(--gold);
  color: var(--black);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 1.5rem;
  align-self: flex-start;
}

.hero-split-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 1.25rem;
  letter-spacing: -0.015em;
}

.hero-split-excerpt {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: 2rem;
}

.hero-split-cta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(201, 169, 110, 0.35);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: border-color 0.2s;
}

.hero-split-layout:hover .hero-split-cta {
  border-color: var(--gold);
}

.hero-split-image {
  position: relative;
  overflow: hidden;
  background: var(--slate);
}

.hero-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}

.hero-split-layout:hover .hero-split-img {
  transform: scale(1.03);
}

.hero-split-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #2d1b3d 0%, #3d1b2d 100%);
}

@media (max-width: 900px) {
  .hero-split-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-split-image {
    height: 65vw;
    min-height: 280px;
    max-height: 420px;
    order: -1; /* Image first on mobile */
  }
  .hero-split-text {
    padding: 2.5rem 1.5rem 3rem;
  }
  .hero-split-text::before {
    top: 2rem;
    left: 1.5rem;
  }
}

/* ============================================
   2-COLUMN INDIVIDUAL POST LAYOUT
   Left: sticky portrait image / Right: content
   ============================================ */

.post-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}

.post-hero-col {
  position: sticky;
  top: var(--nav-height);
  /* No fixed height — image shows at natural dimensions, no cropping */
  align-self: start;
}

.post-hero-col-inner {
  position: relative;
  width: 100%;
}

.post-hero-col-img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto; /* Natural height — full image, no cropping */
  display: block;
  object-fit: unset;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}

/* Pinterest button on 2-col hero */
.post-hero-col-inner .post-pin-btn {
  opacity: 0;
}

.post-hero-col-inner:hover .post-pin-btn {
  opacity: 1;
}

@media (hover: none) {
  .post-hero-col-inner .post-pin-btn {
    opacity: 1;
  }
}

/* Right column — content scrolls naturally with the page */
.post-content-col {
  min-height: 100%;
}

/* Editorial header inside right column (replaces journal/edit-title-hero) */
.post-header-section {
  background: var(--cream);
  padding: 4rem 3.5rem 3rem;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--gray-200);
}

/* Gold rule at top */
.post-header-section::before {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 2.5rem;
}

/* Closing gold rule under excerpt */
.post-header-section::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  margin: 2rem auto 0;
  opacity: 0.65;
}

.post-header-section .post-title {
  text-align: center;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.post-header-section .post-excerpt-large {
  margin-left: auto;
  margin-right: auto;
}

.post-header-section .post-category-link {
  margin-bottom: 1.5rem;
}

.post-header-section--journal .post-section-badge {
  margin-bottom: 1rem;
}

/* Body wrap inside right column */
.post-body-wrap {
  padding: 3rem 3.5rem 5rem;
  max-width: 680px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .post-two-col {
    grid-template-columns: 1fr;
  }
  .post-hero-col {
    position: relative;
    /* Full image on tablet — no height constraint */
  }
  .post-header-section {
    padding: 3rem 2rem 2.5rem;
  }
  .post-body-wrap {
    padding: 2.5rem 2rem 4rem;
  }
}

@media (max-width: 768px) {
  .post-hero-col {
    /* Full image on mobile — no height constraint */
  }
  .post-header-section {
    padding: 2.5rem 1.5rem 2rem;
  }
  .post-header-section::before {
    margin-bottom: 2rem;
  }
  .post-body-wrap {
    padding: 2rem 1.25rem 3rem;
  }
}

/* ============================================
   HOMEPAGE HERO — EDITORIAL COLLAGE / MOSAIC
   5 images tiled in a grid with brand overlay
   ============================================ */

.hero-collage {
  position: relative;
  overflow: hidden;
  min-height: 75vh;
  background: var(--charcoal);
}

.hero-collage-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1.15fr 0.9fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 75vh;
  gap: 3px;
}

.hero-collage-tile {
  overflow: hidden;
  position: relative;
}

.hero-collage-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.hero-collage:hover .hero-collage-tile img {
  transform: scale(1.04);
}

/* Tile 1: left column, full height */
.hero-collage-tile--1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Tile 2: second column, top half */
.hero-collage-tile--2 {
  grid-column: 2;
  grid-row: 1;
}

/* Tile 3: center column, full height */
.hero-collage-tile--3 {
  grid-column: 3;
  grid-row: 1 / 3;
}

/* Tile 4: second column, bottom half */
.hero-collage-tile--4 {
  grid-column: 2;
  grid-row: 2;
}

/* Tile 5: right two columns, full height */
.hero-collage-tile--5 {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}

/* Dark gradient overlay — left-weighted so brand text pops */
.hero-collage-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 35%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 80%
  );
  display: flex;
  align-items: center;
  pointer-events: none;
}

.hero-collage-brand {
  padding: 3rem 4.5rem;
  max-width: 580px;
  pointer-events: all;
}

.hero-collage-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.hero-collage-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.hero-collage-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  max-width: 420px;
  margin-bottom: 2.25rem;
}

.hero-collage-cta {
  display: inline-block;
  padding: 0.9rem 2.25rem;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--gold);
  transition: background 0.2s, color 0.2s;
}

.hero-collage-cta:hover {
  background: transparent;
  color: var(--white);
}

/* Standalone fallback (no images available) */
.hero-collage-brand--standalone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 4.5rem;
  min-height: 60vh;
  background: var(--charcoal);
  max-width: 100%;
}

.hero-collage-brand--standalone .hero-collage-title {
  color: var(--white);
}

/* === MOBILE COLLAGE === */
@media (max-width: 900px) {
  .hero-collage {
    min-height: auto;
  }

  .hero-collage-grid {
    height: 55vw;
    min-height: 260px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .hero-collage-tile--1 { grid-column: 1; grid-row: 1; }
  .hero-collage-tile--2 { display: none; }
  .hero-collage-tile--3 { grid-column: 2; grid-row: 1; }
  .hero-collage-tile--4 { display: none; }
  .hero-collage-tile--5 { grid-column: 3; grid-row: 1; }

  .hero-collage-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      transparent 80%
    );
    align-items: flex-end;
  }

  .hero-collage-brand {
    padding: 2rem 1.5rem 2.5rem;
    max-width: 100%;
  }

  .hero-collage-title {
    font-size: 1.75rem;
  }

  .hero-collage-sub {
    font-size: 0.95rem;
    display: none;
  }
}

@media (max-width: 600px) {
  .hero-collage-grid {
    grid-template-columns: 1fr 1fr;
    height: 60vw;
    min-height: 220px;
  }

  .hero-collage-tile--3 { display: none; }
  .hero-collage-tile--5 { grid-column: 2; grid-row: 1; }
}

/* ============================================
   HUB PAGES — STATIC HEADER IMAGE
   Magazine-style header for Cheat Sheet
   ============================================ */

.magazine-header {
  padding: 3.5rem 2rem;
  text-align: center;
  background: var(--white);
  margin-bottom: 2rem;
}

.magazine-header--cheat-sheet {
  background: var(--white);
  border-top: 1px solid #e0d5c7;
  border-bottom: 1px solid #e0d5c7;
}

/* Hero background version */
.magazine-header--with-bg {
  position: relative;
  background-attachment: fixed;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 4rem 2rem;
  margin-bottom: 0;
}

.magazine-header__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.magazine-header__content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.magazine-header__title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--charcoal);
  margin: 0 0 1.5rem 0;
  line-height: 1.1;
}

.magazine-header--with-bg .magazine-header__title {
  color: var(--white);
}

.magazine-header__divider {
  width: 60px;
  height: 2px;
  background: var(--charcoal);
  margin: 0 auto 1.5rem;
  opacity: 0.3;
}

.magazine-header--with-bg .magazine-header__divider {
  background: var(--gold);
  opacity: 0.8;
}

.magazine-header__subtitle {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gray-600);
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.85;
}

.magazine-header--with-bg .magazine-header__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

/* Categories section header — sits above grid */
.categories-header {
  padding: 2rem;
  background: var(--white);
  margin-bottom: 2rem;
}

.categories-header .section-container {
  max-width: 1560px;
}

.categories-header .categories-strip {
  margin-top: 0;
  justify-content: center;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .magazine-header {
    padding: 2.5rem 1.5rem;
  }

  .magazine-header--with-bg {
    min-height: 350px;
    padding: 3rem 1.5rem;
  }

  .magazine-header__title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin-bottom: 1rem;
  }

  .magazine-header__divider {
    margin-bottom: 1rem;
  }

  .categories-header {
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 600px) {
  .magazine-header {
    padding: 2rem 1rem;
    margin-bottom: 1.5rem;
  }

  .magazine-header--with-bg {
    min-height: 300px;
    padding: 2rem 1rem;
  }

  .magazine-header__title {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }

  .magazine-header__subtitle {
    font-size: 0.85rem;
  }

  .categories-header {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .categories-header .categories-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .categories-header .categories-strip::-webkit-scrollbar {
    display: none;
  }

  .categories-header .category-chip {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================
   HUB PAGES — EDITORIAL IMAGE STRIP
   3 tiled images + tagline overlay
   Replaces single-post banner on Edit & Journal
   ============================================ */

.hub-image-strip {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.hub-strip-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  height: 38vh;
  min-height: 220px;
  max-height: 380px;
  gap: 3px;
}

.hub-strip-tile {
  overflow: hidden;
  position: relative;
}

.hub-strip-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}

.hub-strip-tile:hover img {
  transform: scale(1.04);
}

.hub-strip-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.65) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.75rem 2rem;
  pointer-events: none;
}

.hub-strip-tagline {
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  text-align: center;
}

@media (max-width: 600px) {
  .hub-strip-grid {
    grid-template-columns: 1fr 1fr;
    height: 45vw;
    min-height: 180px;
  }

  .hub-strip-tile:last-child {
    display: none;
  }
}

/* Remove old single-col .card-meta author display */
.card-meta {
  display: none;
}

/* ============================================
   SUBSCRIBE POPUP
   Slide-up card — bottom-right, tasteful
   ============================================ */
.subscribe-popup {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;
  width: 340px;
  max-width: calc(100vw - 2.5rem);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.subscribe-popup--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.subscribe-popup-inner {
  background: var(--cream);
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
}

.subscribe-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s;
}

.subscribe-popup-close:hover {
  color: var(--charcoal);
}

.subscribe-popup-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.subscribe-popup-heading {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.subscribe-popup-sub {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.45;
  margin-bottom: 1.1rem;
}

.subscribe-popup-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.subscribe-popup-input {
  width: 100%;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  border: 1px solid var(--gray-300);
  border-radius: 5px;
  outline: none;
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s;
}

.subscribe-popup-input:focus {
  border-color: var(--gold);
}

.subscribe-popup-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

.subscribe-popup-btn:hover {
  background: var(--gold);
  color: var(--charcoal);
}

.subscribe-popup-fine {
  font-size: 0.7rem;
  color: var(--gray-400);
  margin-top: 0.5rem;
  text-align: center;
}

@media (max-width: 480px) {
  .subscribe-popup {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    width: auto;
  }
}

/* ============================================
   THE CHEAT SHEET — About page section
   ============================================ */

.about-cheat-sheet-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-cheat-sheet-section p {
  margin-bottom: 1.25rem;
}

.about-capsules-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-capsules-section p {
  margin-bottom: 1.25rem;
}

.about-guides-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-guides-section p {
  margin-bottom: 1.25rem;
}

.about-shop-my-closet-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--gray-200);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-600);
}

.about-shop-my-closet-section p {
  margin-bottom: 1.25rem;
}

/* ============================================
   HOMEPAGE INTRO BLOCKS
   Descriptive intros for Journal + Cheat Sheet
   ============================================ */

.section-intro-block {
  margin: 0 0 2rem;
  max-width: 720px;
}

.section-intro-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray-600);
  margin: 0 0 1.25rem;
}

.section-intro-cta {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.section-intro-cta:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================================
   HOMEPAGE CHEAT SHEET SECTION
   Clean styling matching The Edit
   ============================================ */

.home-section--cheat-sheet {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ============================================
   CHEAT SHEET HUB PAGE HEADER
   Eyebrow + title treatment
   ============================================ */

.page-header-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

.page-header--cheat-sheet {
  background: #f5f2ec;
}

/* ============================================
   HOMEPAGE THUMBNAIL STRIPS
   3-col random article thumbs per section
   ============================================ */

.home-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.thumb-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--charcoal);
  transition: opacity 0.2s;
}

.thumb-card:hover {
  opacity: 0.85;
}

/* Thumb card: 4:3 landscape ratio. */
.thumb-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gray-100);
  margin-bottom: 0.6rem;
  flex-shrink: 0;
}

.thumb-card-img-wrap--empty {
  background: var(--gray-200);
}

.thumb-card-img-wrap > img,
.thumb-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
  background: var(--gray-100);
}

.thumb-card:hover .thumb-card-img {
  transform: scale(1.03);
}

.thumb-card-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
}

.section-cta-wrap {
  text-align: center;
  margin-top: 0.5rem;
}

.section-cta-row {
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .home-thumbs {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .home-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Hide 3rd card on mid-width so layout doesn't break */
  .home-thumbs .thumb-card:nth-child(3) {
    display: none;
  }
}

/* ============ SEARCH ============ */

/* Search icon in navigation */
.nav-search-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  margin-left: 0.25rem;
  color: rgba(255,255,255,0.65);
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.nav-search-link:hover {
  opacity: 1;
  color: var(--white);
}

/* Search page */
.search-form {
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.search-input-wrap {
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  background: #fff;
  color: var(--charcoal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

.search-submit {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  background: var(--charcoal);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-submit:hover {
  background: #333;
}

/* Search results */
.search-results-section {
  padding: 2rem 0 4rem;
}

.search-results-count {
  font-size: 1rem;
  color: var(--gray-600);
  margin-bottom: 2rem;
}

.search-results-group {
  margin-bottom: 3rem;
}

.search-results-heading {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gray-200);
}

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.search-result-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.search-result-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.search-result-img {
  flex-shrink: 0;
  width: 120px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
}

.search-result-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--gray-100);
}

.search-result-img--empty {
  background: var(--gray-200);
}

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

.result-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.result-badge--edit {
  background: var(--charcoal);
  color: #fff;
}

.result-badge--journal {
  background: #d4a574;
  color: #fff;
}

.result-badge--cheat {
  background: #7c9a6e;
  color: #fff;
}

.search-result-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.search-result-snippet {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Search products grid */
.search-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.search-product-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.search-product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.search-product-img {
  display: block;
  width: 100%;
  height: 180px;
  background: var(--gray-100);
}

.search-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}

.search-product-img--empty {
  background: var(--gray-200);
}

.search-product-info {
  padding: 1rem;
}

.search-product-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.search-product-snippet {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-product-cta {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.search-product-cta:hover {
  opacity: 0.7;
}

/* Empty / No results state */
.search-empty-state,
.search-no-results {
  padding: 3rem 0;
  text-align: center;
  color: var(--gray-600);
}

.search-no-results p {
  margin-bottom: 1rem;
}

.search-no-results a {
  color: var(--charcoal);
  text-decoration: underline;
}

/* Search responsive */
@media (max-width: 768px) {
  .search-results-grid {
    grid-template-columns: 1fr;
  }

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

  .search-result-img {
    width: 100px;
    height: 75px;
  }
}

@media (max-width: 480px) {
  .search-input-wrap {
    flex-direction: column;
  }

  .search-submit {
    width: 100%;
  }

  .search-products-grid {
    grid-template-columns: 1fr;
  }
}

/* Capsules-search result badge variant (companion to .result-badge--edit/--journal/--cheat). */
.result-badge--capsule {
  background: var(--gold);
  color: var(--charcoal);
}

/* Slot result card: parent-capsule line. */
.capsules-search-parent {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-top: 0.5rem;
}

/* Slot-result grid spacing + 1-col collapse on phones (<=720px). */
.capsules-search-results {
  padding: 0 1rem 1rem;
}
@media (max-width: 720px) {
  .search-results-grid.capsules-search-results { grid-template-columns: 1fr; }
  .capsules-search-section .search-form { margin: 1rem auto 0; max-width: 100%; }
  .capsules-search-section .search-input-wrap { flex-direction: column; }
}

/* ============================================
   LEGAL PAGES (Privacy Policy, Terms of Service)
   ============================================ */

.legal-page {
  padding: 4rem 0 6rem;
  min-height: 60vh;
}

.legal-container {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.legal-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-200);
}

.legal-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.legal-updated {
  font-size: 0.875rem;
  color: var(--gray-500);
  font-style: italic;
}

.legal-intro {
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.legal-content h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.5rem;
}

.legal-content h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 1.5rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legal-content p {
  font-size: 0.975rem;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.legal-content ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.25rem 0;
}

.legal-content ul li {
  font-size: 0.975rem;
  line-height: 1.7;
  color: var(--gray-600);
  padding: 0.3rem 0 0.3rem 1.5rem;
  position: relative;
}

.legal-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}

.legal-content a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.legal-content a:hover {
  color: var(--gold);
}

@media (max-width: 768px) {
  .legal-page {
    padding: 2.5rem 0 4rem;
  }

  .legal-title {
    font-size: 1.75rem;
  }
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--charcoal);
  color: var(--white);
  z-index: 9000;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-banner--visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cookie-banner-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  flex: 1;
}

.cookie-banner-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-link:hover {
  color: var(--gold-light);
}

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

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

.cookie-btn--accept:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

.cookie-btn--decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}

.cookie-btn--decline:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}

/* ============================================
   SOCIAL PROFILE LINKS (FOOTER)
   ============================================ */

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gray-400);
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-social-link:hover {
  background: var(--gold-muted);
  color: var(--gold);
}

/* ============================================
   POST SHARE ROW (INLINE, BOTTOM OF POST)
   ============================================ */

.post-share-section {
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--gray-200);
}

.post-share-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.post-share-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  margin-right: 0.25rem;
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--charcoal);
  background: var(--white);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.post-share-btn:hover {
  border-color: var(--gold);
  background: var(--gold-muted);
  color: var(--charcoal);
}

.post-share-btn--whatsapp:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.08);
  color: #25D366;
}

.post-share-btn--pinterest:hover {
  border-color: #E60023;
  background: rgba(230, 0, 35, 0.08);
  color: #E60023;
}

/* ============================================
   STICKY SHARE BAR (FLOATING RIGHT-SIDE)
   ============================================ */

.sticky-share-bar {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(calc(100% + 1rem));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
  opacity: 0;
}

.sticky-share-bar--visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.sticky-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-500);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sticky-share-btn:hover {
  background: var(--gold-muted);
  color: var(--gold);
}

.sticky-share-btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  color: #25D366;
}

.sticky-share-btn--pinterest:hover {
  background: rgba(230, 0, 35, 0.08);
  color: #E60023;
}

.sticky-share-btn--tiktok:hover {
  background: rgba(0, 242, 234, 0.1);
  color: #00F2EA;
}

.sticky-share-btn--facebook:hover {
  background: rgba(59, 89, 152, 0.08);
  color: #3B5998;
}

/* Hide sticky bar on small screens — inline share row takes over */
@media (max-width: 900px) {
  .sticky-share-bar {
    display: none !important;
  }
}

/* Mobile: make share row stack nicely */
@media (max-width: 480px) {
  .post-share-btn span {
    display: none;
  }
  .post-share-btn {
    padding: 0.45rem 0.6rem;
  }
}

/* ============================================================
   HOMEPAGE REDESIGN — shorter hero, tagline strip, 2-col layout
   ============================================================ */

/* ============================================================
   HOMEPAGE v2 — Statement hero + filmstrip + sidebar fix
   ============================================================ */

/* --- Part 1: Typographic statement hero --- */
/* Homepage header uses .page-header--hub (shared with hub pages) */

/* === HOMEPAGE HERO BANNER === */
.homepage-hero {
  width: 100%;
  overflow: hidden;
  display: block;
}

.homepage-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 520px;
}

@media (max-width: 768px) {
  .homepage-hero-img {
    max-height: 280px;
  }
}

@media (max-width: 480px) {
  .homepage-hero-img {
    max-height: 200px;
  }
}

/* === LIFESTYLE BANNER (below footer, constrained) === */
.lifestyle-banner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1rem 2rem;
  overflow: hidden;
}

.lifestyle-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 280px;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .lifestyle-banner {
    padding: 0.75rem 1rem;
  }
  .lifestyle-banner-img {
    max-height: 180px;
  }
}

@media (max-width: 480px) {
  .lifestyle-banner-img {
    max-height: 140px;
  }
}

/* --- Filmstrip: compact horizontal strip of portrait thumbnails, full-width --- */
.home-filmstrip {
  background: var(--charcoal);
  padding: 0.5rem 0;
  overflow: hidden;
  border-bottom: 3px solid var(--gold);
}

.home-filmstrip-track {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0.5rem;
}

.home-filmstrip-frame {
  width: 90px;
  height: 120px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 110, 0.3);
}

.home-filmstrip-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: saturate(0.85);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.home-filmstrip-frame img:hover {
  filter: saturate(1);
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .home-filmstrip-frame {
    width: 80px;
    height: 107px;
  }
}

@media (max-width: 600px) {
  .home-filmstrip {
    display: none;
  }
  .home-filmstrip-frame {
    width: 70px;
    height: 94px;
  }
  /* Hide last 3 frames on mobile for tighter fit */
  .home-filmstrip-frame:nth-child(n+7) {
    display: none;
  }
}

/* Mobile-only Edits highlights section — REMOVED (was a duplicate) */

/* Homepage layout wrapper */
.home-layout {
  padding: 3.5rem 0 4rem;
}

.home-layout .section-container {
  max-width: 1560px;
}

/* Section spacing inside the main column */
.home-layout .home-section {
  padding: 0 0 3.5rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 3.5rem;
}

.home-layout .home-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Right sidebar (~25%) */
.home-sidebar {
  flex: 1;
  min-width: 220px;
  max-width: 290px;
  position: sticky;
  top: 5rem;
}

/* Sidebar widgets */
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gold);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.75rem;
}

.sidebar-widget-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gray-200);
  letter-spacing: 0.01em;
}

.sidebar-post {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  text-decoration: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--gray-100);
  transition: opacity 0.15s;
}

.sidebar-post:last-of-type {
  border-bottom: none;
}

.sidebar-post:hover {
  opacity: 0.8;
}

.sidebar-post:hover .sidebar-post-title {
  color: var(--gold);
}

.sidebar-post-img-wrap {
  width: 56px;
  height: 70px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gray-100);
}

.sidebar-post-img-wrap--empty {
  background: var(--gray-200);
}

.sidebar-post-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.sidebar-post-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.4;
  transition: color 0.15s;
  margin: 0;
}

.sidebar-widget-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-widget-link:hover {
  text-decoration: underline;
}

/* Cassandra's Top Picks product widget */
.sidebar-product-picks {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sidebar-product-pick {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 0.5rem;
  transition: opacity 0.15s;
}

.sidebar-product-pick:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-product-pick:hover {
  opacity: 0.8;
}

.sidebar-product-pick:hover .sidebar-product-name {
  color: var(--gold);
}

.sidebar-product-img-wrap {
  width: 100%;
  height: 100px;
  overflow: hidden;
  background: var(--gray-100);
  border-radius: 2px;
}

.sidebar-product-img-wrap--empty {
  background: var(--gray-200);
}

.sidebar-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sidebar-product-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.35;
  transition: color 0.15s;
  margin: 0;
}

/* Author signature in sidebar */
.sidebar-author {
  background: var(--charcoal);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.sidebar-author-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  margin: 0 auto 0.85rem;
  display: block;
}

.sidebar-author-quote {
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.sidebar-author-link {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-author-link:hover {
  text-decoration: underline;
}

/* Mobile: sidebar stacks below main content */
@media (max-width: 768px) {
  .home-layout-inner {
    flex-direction: column;
    gap: 0;
  }

  .home-sidebar {
    max-width: 100%;
    width: 100%;
    position: static;
    border-top: 2px solid var(--gold);
    padding-top: 2.5rem;
  }
}

/* Tablet: tighten the layout */
@media (max-width: 1024px) and (min-width: 769px) {
  .home-layout-inner {
    gap: 2rem;
  }

  .home-sidebar {
    min-width: 200px;
    max-width: 250px;
  }
}

/* ============================================
   PUSH NOTIFICATION OPT-IN PROMPT
   ============================================ */

.push-prompt {
  position: fixed;
  bottom: 1.5rem;
  left: 1.25rem;
  z-index: 8500;
  background: var(--charcoal);
  color: var(--white);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 10px;
  padding: 1rem 1.15rem 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: none;
}

.push-prompt--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.push-prompt-icon {
  flex-shrink: 0;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(201, 169, 110, 0.12);
  border-radius: 50%;
}

.push-prompt-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.push-prompt-title {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.push-prompt-sub {
  font-family: var(--font-sans);
  font-size: 0.775rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

.push-prompt-allow {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.push-prompt-allow:hover {
  background: #d4b67e;
}

.push-prompt-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
  margin-left: -0.25rem;
}

.push-prompt-dismiss:hover {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 480px) {
  .push-prompt {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: 1rem;
  }
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */

.pwa-install-prompt {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 8500;
  background: var(--cream);
  color: var(--charcoal);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 1rem 1.15rem 1rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: none;
}

.pwa-install-prompt--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.pwa-install-icon {
  flex-shrink: 0;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(201, 169, 110, 0.15);
  border-radius: 50%;
}

.pwa-install-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pwa-install-title {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.3;
}

.pwa-install-sub {
  font-family: var(--font-sans);
  font-size: 0.775rem;
  color: var(--gray-500);
  line-height: 1.4;
}

.pwa-install-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.pwa-install-btn:hover {
  background: #d4b67e;
}

.pwa-install-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s;
  margin-left: -0.25rem;
}

.pwa-install-dismiss:hover {
  color: var(--charcoal);
}

@media (max-width: 480px) {
  .pwa-install-prompt {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    bottom: 1rem;
  }
}

/* ============================================
   THE GLAM ROOM — Style Chat + Lookbook
   ============================================ */

/* Hero */
.consult-hero {
  background: var(--charcoal);
  color: var(--white);
  padding: 3rem 2rem 2.5rem;
}
.consult-hero-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.consult-hero-avatar {
  position: relative;
  flex-shrink: 0;
}
.consult-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
}
.consult-avatar-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.consult-hero-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.consult-hero-sub {
  color: var(--gray-300);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Chat section */
.consult-chat-section {
  padding: 3rem 2rem;
  background: var(--cream);
}
.consult-chat-wrap {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* Suggestions */
.consult-suggestions {
  margin-bottom: 1.75rem;
}
.consult-suggestions-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
}
.consult-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.consult-chip {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.consult-chip:hover {
  border-color: var(--gold);
  background: var(--gold-muted);
}

/* Input */
.consult-input-wrap {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.consult-input-wrap:focus-within {
  border-color: var(--gold);
}
.consult-input {
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--charcoal);
  background: transparent;
  resize: none;
  outline: none;
  display: block;
}
.consult-input::placeholder {
  color: var(--gray-400);
}
.consult-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem 0.6rem 1.25rem;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-100);
}
.consult-char-count {
  font-size: 0.75rem;
  color: var(--gray-400);
}
.consult-submit-btn {
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  padding: 0.65rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s, opacity 0.2s;
}
.consult-submit-btn:hover {
  background: #d4b67e;
}
.consult-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Results */
.consult-results {
  margin-top: 2.5rem;
}
.consult-result-header {
  margin-bottom: 1.75rem;
  text-align: center;
}
.consult-result-badge {
  display: inline-block;
  background: var(--gold-muted);
  color: var(--gold);
  border: 1px solid var(--gold-light);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}
.consult-result-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
}
.consult-result-summary {
  font-size: 0.95rem;
  color: var(--gray-500);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Lookbook Grid — Flat-lay */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.lookbook-item {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lookbook-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.lookbook-item-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--gray-100);
}
.lookbook-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lookbook-item:hover .lookbook-item-img {
  transform: scale(1.04);
}
.lookbook-item-info {
  padding: 0.9rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.lookbook-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.35;
}
.lookbook-item-note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gray-500);
  line-height: 1.4;
  flex: 1;
}
.lookbook-item-cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: auto;
}

/* Result actions */
.consult-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.consult-result-actions .btn {
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
}
.btn--outline {
  background: transparent;
  color: var(--charcoal);
  border: 2px solid var(--charcoal);
}
.btn--outline:hover {
  background: var(--charcoal);
  color: var(--white);
}
.btn--ghost {
  background: transparent;
  color: var(--gray-500);
  border: 1.5px solid var(--gray-300);
}
.btn--ghost:hover {
  background: var(--gray-200);
  color: var(--charcoal);
}

/* Error */
.consult-error {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: #fff0f0;
  border: 1px solid #f5c2c2;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 0.9rem;
  text-align: center;
}

/* Affiliate note */
.consult-affiliate-note {
  font-size: 0.75rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 1rem;
}

/* How it works */
.consult-how {
  border-top: 1px solid var(--gray-200);
  margin-top: 3rem;
  padding-top: 2.5rem;
}
.consult-how-inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.consult-how-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--charcoal);
}
.consult-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.consult-how-step {
  text-align: center;
}
.consult-step-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.consult-step-text {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.6;
}

/* Lookbook page */
.lookbook-page {
  padding: 3rem 2rem;
  background: var(--cream);
}
.lookbook-page-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.lookbook-page-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}
.lookbook-page-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}
.lookbook-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}
.lookbook-page-title {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.lookbook-page-request {
  font-style: italic;
  color: var(--gray-500);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.lookbook-page-summary {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.lookbook-grid--page {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.lookbook-page-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Flat-lay lookbook — role label (The Top, The Shoes, etc.) */
.lookbook-item--flat {
  position: relative;
}
.lookbook-item-role {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--charcoal);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  z-index: 2;
  pointer-events: none;
}

/* Flat-lay grid — editorial 3-column on desktop */
.lookbook-grid--flatlay {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 768px) {
  .lookbook-grid--flatlay {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .lookbook-grid--flatlay {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* Homepage CTA Banner */
.home-consult-cta {
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--slate) 100%);
  border-bottom: 3px solid var(--gold);
  padding: 1.5rem 2rem;
}
.home-consult-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
.home-consult-text {
  color: var(--white);
}
.home-consult-eyebrow {
  display: inline-block;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 0.4rem;
}
.home-consult-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.home-consult-desc {
  font-size: 0.85rem;
  color: var(--gray-300);
  line-height: 1.5;
}
.home-consult-btn {
  flex-shrink: 0;
  font-size: 0.9rem;
  padding: 0.8rem 1.75rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .home-consult-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .home-consult-btn { width: 100%; text-align: center; }
}

/* Navigation — Consult link */
.nav-consult-link {
  background: var(--gold);
  color: var(--charcoal) !important;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.nav-consult-link:hover,
.nav-consult-link.active {
  background: #d4b67e;
}

/* Mobile */
@media (max-width: 768px) {
  .consult-hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  .consult-hero-title { font-size: 1.6rem; }
  .consult-how-steps {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .lookbook-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lookbook-page-title { font-size: 2rem; }
  .consult-result-actions { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .consult-hero { padding: 2rem 1.25rem 1.75rem; }
  .consult-chat-section { padding: 2rem 1.25rem; }
  .lookbook-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .lookbook-page { padding: 2rem 1.25rem; }
}

/* ============================================================
   Shop My Closet — /shop-my-closet page
   ============================================================ */

/* Subtitle under page header */
.page-subtitle-sub {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--gray-400);
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
}

/* Category section within closet page */
.closet-category-section {
  margin-bottom: 3.5rem;
  scroll-margin-top: 80px; /* account for sticky nav */
}

/* Product grid for closet page — reuse 4col grid */
.closet-product-grid {
  margin-top: 1.25rem;
}

/* ============================================================
   Sidebar closet CTA — added inside Cassandra's Top Picks widget
   ============================================================ */
.sidebar-closet-cta {
  border-top: 1px solid var(--gray-800, #2a2a2a);
  margin-top: 1.25rem;
  padding-top: 1rem;
  text-align: center;
}
.sidebar-closet-cta-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal, #1a1a1a);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.sidebar-closet-cta-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold, #C9A96E);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}
.sidebar-closet-cta-link:hover {
  opacity: 0.75;
}

@media (max-width: 768px) {
  .closet-category-section {
    margin-bottom: 2.5rem;
  }
}

/* === GUIDES PAGE === */

.guides-hero {
  background: var(--black);
  padding: 4rem 0 3rem;
  border-bottom: 2px solid var(--gold);
}
.guides-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.guides-hero-img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.guides-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.guides-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.guides-cta-primary {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  border-radius: 3px;
  margin-bottom: 0.85rem;
}
.guides-hero .guides-cta-primary,
.guides-price-cta .guides-cta-primary,
.guides-final-cta .guides-cta-primary {
  color: var(--black);
  border: 2px solid var(--gold);
  background-color: #C9A96E;
  color: #0f0f0f;
}
.guides-hero .guides-cta-primary:hover,
.guides-price-cta .guides-cta-primary:hover,
.guides-final-cta .guides-cta-primary:hover {
  background-color: #b8935a;
  color: #0f0f0f;
}
.guides-cta-secondary {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--gray-400);
  margin-top: 0.25rem;
}
.guides-cta-secondary a {
  color: var(--gold-light);
  text-decoration: underline;
}

.guides-problem {
  padding: 4rem 0;
  background: var(--cream);
}
.guides-problem-inner {
  max-width: 700px;
}
.guides-section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 1.75rem;
  line-height: 1.25;
}
.guides-pain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.guides-pain-item {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--charcoal);
  padding: 0.9rem 1.1rem 0.9rem 1.5rem;
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
}

.guides-included {
  padding: 4rem 0;
  background: var(--white);
}
.guides-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.guides-item-card {
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.guides-card-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--gray-100);
}
.guides-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guides-card-no-img {
  aspect-ratio: 3/4;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--blush-dark);
}
.guides-worksheets-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 1.25rem;
  text-align: center;
}
.guides-card-body {
  padding: 1rem 1.1rem 1.25rem;
  flex: 1;
}
.guides-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.guides-card-desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.5;
}

.guides-how {
  padding: 4rem 0;
  background: var(--cream);
}
.guides-how-inner {
  max-width: 700px;
}
.guides-steps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
  counter-reset: step;
}
.guides-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  counter-increment: step;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--charcoal);
  padding: 0.85rem 1rem;
  background: var(--white);
  border-radius: 4px;
}
.guides-step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
}

.guides-price-cta {
  padding: 4rem 0;
  background: var(--charcoal);
  text-align: center;
}
.guides-price-inner {
  max-width: 600px;
  margin: 0 auto;
}
.guides-price-badge {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.guides-price-meta {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--gray-400);
  margin-bottom: 1.75rem;
}
.guides-price-disclosure {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: #C9A96E;
  margin-top: 0.75rem;
  font-style: italic;
}
.guides-price-cta .guides-section-heading {
  color: var(--white);
}
.guides-price-cta .guides-cta-secondary {
  color: var(--gray-400);
}

.guides-checkout {
  padding: 3rem 0 4rem;
  background: var(--white);
}
.guides-checkout-inner {
  max-width: 700px;
  margin: 0 auto;
}
.guides-checkout-fallback {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: center;
  margin-top: 1.5rem;
}
.guides-checkout-fallback a {
  color: var(--gold);
  text-decoration: underline;
}

.guides-faq {
  padding: 4rem 0;
  background: var(--cream);
}
.guides-faq .section-container {
  max-width: 800px;
}
.guides-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.guides-faq-item {
  background: var(--white);
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.guides-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--charcoal);
  text-align: left;
  gap: 0.75rem;
}
.guides-faq-question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.2s;
}
.guides-faq-question[aria-expanded="true"]::after {
  transform: rotate(45deg);
}
.guides-faq-answer {
  padding: 0 1.25rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-600);
}

.guides-final-cta {
  padding: 4rem 0;
  background: var(--black);
  text-align: center;
}
.guides-final-inner {
  max-width: 600px;
  margin: 0 auto;
}
.guides-final-body {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2rem;
  line-height: 1.3;
}
.guides-final-meta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-top: 0.5rem;
}
.guides-final-cta .guides-cta-secondary {
  margin-top: 0.85rem;
  color: var(--gray-500);
}

@media (max-width: 768px) {
  .guides-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .guides-hero-img-col {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
  .guides-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* === HUB PAGES — PORTRAIT CARDS (3:4, cover) ===
   Scoped to The Edit, The Journal, and The Cheat Sheet hub listing pages only.
   Uses !important to override the inline aspect-ratio:4/3 set by postCard() in lib/layout.js.
   Homepage portrait cards are scoped under .home-layout. Guides uses its own .guides-card-img-wrap. */

.posts-section--hub-edit .card-image,
.posts-section--hub-journal .card-image,
.posts-section--hub-cheatsheet .card-image {
  aspect-ratio: 3 / 4 !important;
}

.posts-section--hub-edit .card-img,
.posts-section--hub-journal .card-img,
.posts-section--hub-cheatsheet .card-img {
  object-fit: cover;
  object-position: center top;
}

/* === HOMEPAGE — PORTRAIT CARDS (3:4, cover) ===
   Scoped to the editorial grid inside .home-layout.
   Uses !important to override the inline aspect-ratio:4/3 set by postCard() in lib/layout.js. */

.home-layout .home-section--edit .card-image,
.home-layout .home-section--journal .card-image,
.home-layout .home-section--cheat-sheet .card-image,
.home-layout .home-section--guides .card-image {
  aspect-ratio: 3 / 4 !important;
}

.home-layout .home-section--edit .card-img,
.home-layout .home-section--journal .card-img,
.home-layout .home-section--cheat-sheet .card-img,
.home-layout .home-section--guides .card-img {
  object-fit: cover;
  object-position: center top;
}

/* Hide card excerpts on homepage sections — title only */
.home-layout .home-section--edit .card-excerpt,
.home-layout .home-section--journal .card-excerpt,
.home-layout .home-section--cheat-sheet .card-excerpt,
.home-layout .home-section--guides .card-excerpt {
  display: none !important;
}

/* ============================================================
   Shop My Closet — live keyword search bar
   ============================================================ */
.closet-search-bar-section {
  padding: 1.25rem 0 0;
}

.closet-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 520px;
}

.closet-search-input {
  flex: 1;
}

.closet-search-count {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-500, #888);
  white-space: nowrap;
  min-width: 4ch;
}

/* Category filter count line — sits below the chip strip on /shop-my-closet */
.categories-header .closet-count-line {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--gray-500, #888);
  margin: 0.85rem 0 0;
  text-align: center;
}

.categories-header .closet-count-line[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .closet-search-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .closet-search-count {
    text-align: center;
  }
}