/* ============================================
   AngiePicks — Design System
   Coral, warm white & warm black palette
   ============================================ */

:root {
  /* Color palette — AngiePicks brand
     Coral #D94F61 · Warm cream #FAF8F5 · Soft black #222222
     Gold accent #C99A45 (small decorative details only) · White #FFFFFF */
  --color-cream: #FAF8F5;
  --color-gold: #C99A45;
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FFFFFF;
  --color-surface-warm: #FAF8F5;
  --color-accent: #D94F61;
  --color-accent-dark: #BE4053;
  --color-accent-light: #EBAEB5;
  --color-accent-coral: #D94F61;
  --color-beige: #E4DCD2;
  --color-taupe: #A39A90;
  --color-brown: #8A6A57;
  --color-text: #222222;
  --color-text-muted: #5C5A57;
  --color-text-light: #8A8783;
  --color-border: #E7E3DD;
  --color-divider: #EFEBE5;
  --color-success: #7A9E7E;
  --color-shadow: rgba(34, 34, 34, 0.06);

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Dancing Script', cursive;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2.25rem;
  --text-hero: clamp(2rem, 6vw, 3.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(34, 34, 34, 0.05);
  --shadow-md: 0 4px 16px rgba(34, 34, 34, 0.07);
  --shadow-lg: 0 12px 40px rgba(34, 34, 34, 0.1);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
}

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

a:hover {
  color: var(--color-accent-dark);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  max-width: 70ch;
}

::selection {
  background: var(--color-accent-light);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* === Layout utilities === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

.section-sm {
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
}

/* === Header === */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}

.header--scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-4);
}

.header-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.header-menu-btn:hover {
  background: var(--color-surface-warm);
}

.header-menu-btn span,
.header-menu-btn span::before,
.header-menu-btn span::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.header-menu-btn span::before {
  transform: translateY(-7px);
}

.header-menu-btn span::after {
  transform: translateY(5px);
}

.header-menu-btn[aria-expanded="true"] span {
  background: transparent;
}

.header-menu-btn[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.header-menu-btn[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.logo-mark {
  display: block;
  width: auto;
  height: 58px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .logo-mark {
    height: 44px;
  }

  .logo-angie {
    font-size: 1.4rem;
  }

  .logo-picks {
    font-size: 1.15rem;
  }
}

.logo-mark--footer {
  height: 72px;
  margin-inline: auto;
}

.logo-text {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.logo-angie {
  font-family: var(--font-script);
  font-size: 1.75rem;
  color: var(--color-text);
  line-height: 1;
}

.logo-picks {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.logo-star {
  color: var(--color-accent);
  font-size: 0.85rem;
}

.logo-tagline {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.header-search-btn:hover {
  background: var(--color-surface-warm);
}

.header-search-btn svg {
  width: 20px;
  height: 20px;
}

/* === Mobile nav drawer === */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform var(--transition);
  z-index: 100;
  padding: var(--space-6);
  overflow-y: auto;
}

.nav-drawer[open] {
  transform: translateX(0);
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 99;
}

.nav-drawer-overlay[open] {
  opacity: 1;
  visibility: visible;
}

.nav-drawer-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 1.5rem;
  color: var(--color-text);
  line-height: 1;
}

.nav-drawer-list {
  list-style: none;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-drawer-list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.nav-drawer-list a:hover {
  background: var(--color-surface-warm);
  color: var(--color-accent);
}

.nav-drawer-disclosure {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  line-height: 1.5;
}

/* === Search overlay === */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-24);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.search-overlay[open] {
  opacity: 1;
  visibility: visible;
}

.search-overlay-inner {
  width: 100%;
  max-width: 600px;
  padding-inline: var(--space-6);
}

.search-overlay-input {
  width: 100%;
  padding: var(--space-4) var(--space-2);
  border: none;
  border-bottom: 2px solid var(--color-accent);
  font-size: var(--text-xl);
  font-family: var(--font-display);
  color: var(--color-text);
  background: transparent;
  outline: none;
}

.search-overlay-input::placeholder {
  color: var(--color-text-light);
}

.search-overlay-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: 1.75rem;
  color: var(--color-text);
}

.search-results {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: box-shadow var(--transition);
}

.search-result-item:hover {
  box-shadow: var(--shadow-sm);
}

.search-result-item img {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.search-result-tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.search-no-results {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-8);
}

/* === Hero cover (Angie's own banner + real text) === */
.hero-cover {
  background: #fff;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-top: var(--space-6);
}

.hero-cover-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-14);
}

.hero-cover-logo {
  display: block;
  width: auto;
  height: 132px;
  margin-bottom: var(--space-6);
}

.hero-cover-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  margin-bottom: var(--space-4);
}

.hero-cover-sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0 0 var(--space-8);
}

.hero-cover-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero-cover-figure {
  margin: 0;
  text-align: center;
}

.hero-cover-figure img {
  display: block;
  width: 100%;
  max-width: 340px;
  border-radius: 2px;
  margin-inline: auto;
}

.hero-cover-figure figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-cover-link {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

@media (max-width: 860px) {
  .hero-cover-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-10);
    text-align: center;
  }

  .hero-cover-logo {
    height: 104px;
    margin-inline: auto;
  }

  .hero-cover-sub {
    font-size: var(--text-base);
    margin-inline: auto;
  }

  .hero-cover-actions {
    justify-content: center;
  }

  .hero-cover-figure {
    order: -1;
  }

  .hero-cover-figure img {
    max-width: 230px;
  }
}

/* === Hero (clean, editorial — alternative) === */
.hero-clean {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}

.hero-clean-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16);
}

.hero-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.hero-eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-3);
}

.hero-clean-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.12;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

.hero-clean-sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero-clean-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero-clean-link {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

.hero-clean-figure {
  margin: 0;
  text-align: center;
}

.hero-clean-figure img {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 2px;
  margin-inline: auto;
}

.hero-clean-figure figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .hero-clean-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-10);
  }

  .hero-clean-figure {
    order: -1;
  }

  .hero-clean-figure img {
    max-width: 240px;
  }

  .hero-clean-sub {
    font-size: var(--text-base);
  }
}

/* === Hero banner (legacy cover image) === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero-banner {
  background: #fff;
}

.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1642px;
  margin-inline: auto;
}

.hero-banner-cta {
  display: flex;
  justify-content: center;
  padding: var(--space-8) var(--space-4) var(--space-4);
}

@media (max-width: 640px) {
  .hero-banner-cta {
    padding-top: var(--space-6);
  }
}

/* === Hero (legacy) === */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.74) 32%, rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0.06) 82%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  padding-block: var(--space-16);
}

.hero-title {
  font-size: var(--text-hero);
  line-height: 1.1;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

/* Los dos botones llevan el mismo borde de 1.5px (transparente en el coral),
   para que midan exactamente igual de alto. Sin esto, el de contorno queda 3px
   mas alto que el relleno y la pareja se ve desalineada. */
.btn-primary {
  background: var(--color-accent);
  color: #FFFFFF;
  border: 1.5px solid var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: var(--color-cream);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.btn-outline:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

.btn-amazon {
  background: var(--color-accent);
  color: #fff;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.btn-amazon:hover {
  background: var(--color-accent-dark);
  color: #fff;
}

/* === Categories carousel === */
.categories {
  padding-block: var(--space-10);
  background: var(--color-bg);
}

.categories-scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-6);
  gap: var(--space-6);
  overflow-x: visible;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/* Wide screens: spread the ten categories evenly across the full width */
@media (min-width: 992px) {
  .categories-scroll {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--space-4);
    justify-items: center;
  }

  .categories-scroll .category-item:first-child {
    justify-self: start;
  }

  .categories-scroll .category-item:last-child {
    justify-self: end;
  }
}

@media (min-width: 992px) and (max-width: 1150px) {
  .categories-scroll {
    grid-template-columns: repeat(5, 1fr);
    row-gap: var(--space-6);
  }
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform var(--transition);
}

.category-item:hover {
  transform: translateY(-3px);
}

.category-item.active .category-circle {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.category-circle {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: #fff;
}

.category-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.category-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  letter-spacing: 0.03em;
}

.category-item.active .category-label {
  color: var(--color-accent);
}

/* === Product grid === */
.products-section {
  padding-block: var(--space-12);
}

.products-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--space-8);
  gap: var(--space-2);
}

.products-title {
  font-size: var(--text-xl);
  color: var(--color-text);
}

.products-view-all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Flex instead of grid so an incomplete last row centers itself under the
   rows above it, rather than hanging on the left with a hole on the right.
   The basis is a fixed fraction, so tiles never stretch to fill the gap. */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  align-items: stretch;
}

.products-grid > .product-card {
  flex: 0 0 calc((100% - 3 * var(--space-6)) / 4);
  max-width: calc((100% - 3 * var(--space-6)) / 4);
}

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card-image {
  aspect-ratio: 1;
  background: var(--color-surface-alt);
  overflow: hidden;
}

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

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

/* The whole upper area of a tile is one button: photo, name, one line, and a
   quiet prompt. Making it a button (not a div with a click handler) means the
   keyboard and screen readers get it for free. */
.product-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.product-card-open:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-card-body {
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.product-card-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

/* La voz de Angie. Antes estaba topada en dos líneas y se cortaba con puntos
   suspensivos en cuanto la columna se estrechaba: en tablet se cortaban nueve
   de las diez. Ahora caben tres líneas y el hueco de tres queda reservado
   siempre, así que las fichas se mantienen a nivel sin comerse el texto. */
.product-card-tagline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 3);
}

/* The invitation to read. Small, in the accent, with an arrow that nudges on
   hover so the tile feels alive without shouting. */
.product-card-more {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  /* La invitación y su flecha van juntas o no van. Sin esto, en columnas
     estrechas la flecha se caía sola a la línea de abajo y se veía roto. */
  white-space: nowrap;
}

.product-card-more span {
  display: inline-block;
  transition: transform var(--transition);
}

.product-card:hover .product-card-more span {
  transform: translateX(3px);
}

/* The buy action lives outside the reading trigger: someone who already knows
   they want it should never have to open the panel first. */
.product-card-foot {
  margin-top: auto;
  padding: 0 var(--space-4) var(--space-4);
}

.product-card-cta {
  margin-top: auto;
  padding-top: var(--space-2);
}

.product-card-ad {
  text-align: center;
  font-size: 0.65rem;
  color: var(--color-text-light);
  margin-top: var(--space-2);
  letter-spacing: 0.05em;
}

.product-card-date {
  font-size: 0.65rem;
  color: var(--color-text-light);
  text-align: center;
  padding-bottom: var(--space-3);
}

/* === Promo banner === */
.promo-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--color-surface-alt);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-block: var(--space-12);
}

.promo-banner-content {
  padding: clamp(var(--space-8), 4vw, var(--space-16));
  text-align: center;
}

/* El titulo va solo en el panel: sin boton debajo, el margen inferior dejaba
   un hueco muerto y descolocaba el centro optico. */
.promo-banner-title {
  font-size: var(--text-2xl);
  margin-bottom: 0;
  color: var(--color-text);
}

.promo-banner-image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.promo-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Value props === */
.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-divider);
}

.value-prop {
  text-align: center;
  padding: var(--space-4);
  position: relative;
}

.value-prop:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(var(--space-6) * -0.5);
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--color-divider);
}

.value-prop-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-prop-icon svg {
  width: 32px;
  height: 32px;
}

.value-prop-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.value-prop-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* === Footer === */
.footer {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-12) var(--space-8);
  margin-top: var(--space-16);
}

.footer-disclosure {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-6);
  line-height: 1.6;
}

.footer-disclosure strong {
  color: var(--color-text);
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

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

.footer-copy {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.footer-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.footer-logo .logo-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.footer-logo .logo-angie {
  font-size: 2rem;
}

.footer-logo .logo-picks {
  font-size: 1.6rem;
}

/* === Affiliate disclosure banner (global) === */
.affiliate-banner {
  background: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* === Legal pages === */
.legal-page {
  padding-block: var(--space-12) var(--space-24);
}

.legal-page h1 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.legal-page h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}

.legal-page p,
.legal-page li {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  line-height: 1.7;
  max-width: 70ch;
}

.legal-page ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.legal-page .updated-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.legal-page a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* === Empty state === */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
}

.empty-state h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

/* === Responsive === */
@media (max-width: 768px) {
  .promo-banner {
    grid-template-columns: 1fr;
  }

  .promo-banner-image {
    order: -1;
    aspect-ratio: 16 / 9;
  }

  .value-props {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .value-prop:not(:last-child)::after {
    display: none;
  }

  .value-prop:not(:last-child) {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: var(--space-6);
  }

  .hero {
    min-height: 420px;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(250, 246, 240, 0.85) 0%, rgba(250, 246, 240, 0.5) 100%);
  }

  .hero-content {
    padding-block: var(--space-12);
  }

  .products-grid {
    gap: var(--space-4);
  }

  .products-grid > .product-card {
    flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
    max-width: calc((100% - 2 * var(--space-4)) / 3);
  }
}

@media (max-width: 480px) {
  .products-grid > .product-card {
    flex: 0 0 calc((100% - var(--space-4)) / 2);
    max-width: calc((100% - var(--space-4)) / 2);
  }

  .product-card-body {
    padding: var(--space-3);
  }

  .product-card-name {
    font-size: var(--text-xs);
  }

  .product-card-tagline {
    font-size: 0.7rem;
  }

  /* La invitación a leer cabe en una línea: la flecha no debe quedar sola. */
  .product-card-more {
    font-size: 0.625rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .btn-amazon {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Experience badges ====================================================
   Two tiers, always visible on the card. 'I use this' is reserved for
   products Angie physically owns; everything else reads 'Curated by Angie'.
   ======================================================================== */
.product-badge {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  display: inline-block;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  font-family: var(--font-sans, 'Poppins', sans-serif);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

.product-badge--owned {
  background: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 1px 6px rgba(34, 34, 34, 0.16);
}

.product-badge--curated {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-brown);
  border: 1px solid var(--color-beige);
}

.product-card-image { position: relative; }

/* === Typographic card (curated picks, no publishable photo) ==============
   A curated pick has no photograph Angie is allowed to publish, so the card
   is led by type instead of by an image. The name fills the panel so the card
   reads as a deliberate editorial choice rather than a missing picture.
   ======================================================================== */
.product-card-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Same square as a photo tile, so a row of products looks even whether or
     not Angie has photographed that item yet. */
  aspect-ratio: 1;
  min-height: 0;
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(170deg, #FFFFFF 0%, var(--color-cream) 100%);
  border-bottom: 1px solid var(--color-divider);
  text-align: center;
  overflow: hidden;
}

.product-card-type-cat {
  flex: none;
  font-family: 'Poppins', sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

/* The name is the artwork. Serif, generous, optically centred in the panel. */
.product-card-type-name {
  flex: none;
  display: block;
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--color-text);
  text-wrap: balance;
  /* No hyphens: cortar "Con-cealer" o "Bet-ter" a mitad de palabra se ve
     descuidado en los nombres de producto, sobre todo en celular. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.product-card-type-rule {
  flex: none;
  width: 28px;
  height: 1px;
  margin-bottom: var(--space-1);
  background: var(--color-gold);
}

.product-card-type .product-badge {
  position: static;
  flex: none;
}

/* No duplicate name in the body: the panel already carries it. */
.product-card--type .product-card-tagline {
  margin-top: 0;
}

/* Narrow screens: let a long name grow the panel instead of squeezing it. */
@media (max-width: 700px) {
  .product-card-type {
    min-height: 0;
  }
}

/* === Angie's honest notes (expandable, zero JS) =========================
   The long first-person write-up is the whole point of the site, but it must
   not bury the grid. <details> keeps it one tap away and needs no script.
   ====================================================================== */
.product-notes {
  margin: 0 0 var(--space-4);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.product-notes-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brown);
  transition: color 0.2s ease;
}

.product-notes-toggle::-webkit-details-marker { display: none; }

.product-notes-toggle::after {
  content: '+';
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.product-notes[open] .product-notes-toggle::after {
  content: '\2212';
}

.product-notes-toggle:hover { color: var(--color-accent-dark); }

.product-notes-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.product-notes-body {
  padding-bottom: var(--space-4);
}

.product-notes-body p {
  margin: 0 0 var(--space-3);
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.product-notes-body p:last-child { margin-bottom: 0; }

.product-notes-body strong {
  font-weight: 600;
  color: var(--color-text);
}

/* === Quick take strip ===================================================
   Warmth without emojis: a scannable, labelled strip so a reader gets the
   gist in four seconds and reads the long notes only if they want to.
   ====================================================================== */
.product-facts {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-warm);
  border-radius: 4px;
  display: grid;
  gap: var(--space-3);
}

.product-fact {
  display: grid;
  gap: 1px;
}

.product-fact + .product-fact {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(172, 161, 150, 0.22);
}

.product-facts dt {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-taupe);
}

.product-facts dd {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text);
}

.product-facts { gap: var(--space-3); }

/* === Hero cover banner (real photo + real text) === */
.hero-cover-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.hero-cover-band {
  padding-inline: 0;
  text-align: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.hero-cover-band .hero-cover-title {
  margin: 0 0 var(--space-3);
}

.hero-cover-band .hero-cover-sub {
  margin: 0 auto var(--space-5);
  max-width: 44rem;
}

.hero-cover-band .hero-cover-actions {
  justify-content: center;
}

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

/* === Short story strip === */
.story-strip {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-8);
}

.story-strip-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-6);
  text-align: center;
}

.story-strip-body {
  display: grid;
  gap: var(--space-4) var(--space-10);
}

@media (min-width: 860px) {
  .story-strip-body {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-12);
  }

  .story-strip-body p:first-child {
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-text);
  }
}

.story-strip p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 62ch;
}

.story-strip-footer {
  text-align: center;
  margin-top: var(--space-4);
}

.story-strip-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* === Directional arrows: down = same page, right = another page === */
.btn-arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateY(2px);
}

.hero-cover-link span {
  display: inline-block;
  margin-left: 0.25em;
  transition: transform 0.2s ease;
}

.hero-cover-link:hover span {
  transform: translateX(3px);
}

/* === Hero cover action buttons, matched sizing === */
.hero-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero-cover-actions .btn {
  min-width: 15rem;
}

/* Espacio identico entre los dos botones en cualquier ancho. */
.hero-cover-actions {
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .hero-cover-actions {
    flex-direction: column;
  }

  .hero-cover-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

/* === Product detail panel ================================================
   The reading surface. A centred sheet on desktop, a full-height sheet that
   rises from the bottom on the phone, because that is where the thumb is.
   ====================================================================== */
.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(38, 32, 30, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.detail-overlay[open] {
  opacity: 1;
  visibility: visible;
}

.detail-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(38, 32, 30, 0.22);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform var(--transition);
}

.detail-overlay[open] .detail-panel {
  transform: translateY(0);
}

.detail-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition);
}

.detail-close:hover {
  background: #fff;
}

.detail-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-6);
}

.detail-image {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
}

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

.detail-head {
  margin-bottom: var(--space-5);
  text-align: center;
}

.detail-cat {
  display: block;
  margin-bottom: var(--space-2);
  font-family: 'Poppins', sans-serif;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-taupe);
}

.detail-name {
  margin: 0 0 var(--space-3);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.detail-head .product-badge {
  position: static;
  display: inline-block;
}

.detail-tagline {
  margin: var(--space-3) 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.detail-notes {
  padding-top: var(--space-2);
}

.detail-notes-title {
  margin: 0 0 var(--space-4);
  font-family: 'Poppins', sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Reading measure and rhythm: this is the part people actually read. */
.detail-notes p {
  margin: 0 0 var(--space-4);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  line-height: 1.72;
  color: var(--color-text);
}

.detail-notes p:last-child {
  margin-bottom: 0;
}

.detail-notes strong {
  font-weight: 600;
  color: var(--color-text);
}

.detail-cta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

.detail-date {
  margin-top: var(--space-2);
  font-size: 0.65rem;
  color: var(--color-text-light);
}

@media (max-width: 640px) {
  .detail-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .detail-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }

  .detail-scroll {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .detail-image {
    margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-5);
  }
}

/* A tile with nothing written yet is not interactive, so it must not pretend to
   be: no pointer, no lift on hover. Only the Amazon button responds. */
.product-card-open--static {
  cursor: default;
}

.product-card:has(.product-card-open--static):hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Pantallas muy estrechas (iPhone SE y similares). Con dos tarjetas por fila a
   360 px o menos la columna queda tan angosta que hasta tres líneas se quedan
   cortas, así que ahí damos una cuarta. Se mide, no se adivina. */
@media (max-width: 380px) {
  .product-card-tagline {
    -webkit-line-clamp: 4;
    min-height: calc(1.45em * 4);
  }
}

/* 320 px (iPhone 5 / SE de primera generación) es el ancho más estrecho que se
   ve hoy. Ahí una frase larga como la de tarte necesita cinco líneas. */
@media (max-width: 340px) {
  .product-card-tagline {
    -webkit-line-clamp: 5;
    min-height: calc(1.45em * 5);
  }
}

/* ============================================================================
   PÁGINA DE RESEÑA (una por producto, generada por build.py)
   ----------------------------------------------------------------------------
   Reutiliza el sistema de la portada — mismas variables, mismas tipografías,
   mismas insignias — para que abrir una reseña no se sienta como salir del
   sitio. Es una columna angosta de lectura, sin nada que compita con el texto.
   ========================================================================= */

/* Una tarjeta de la portada ahora es un enlace real, no un botón. Hereda los
   estilos de .product-card-open; esto solo le quita el subrayado del enlace. */
a.product-card-open {
  text-decoration: none;
  color: inherit;
}

.review-page {
  padding: var(--space-8) 0 var(--space-16);
  background: var(--color-bg);
}

.review-container {
  max-width: 44rem;
}

.review-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.review-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.review-breadcrumb a:hover {
  color: var(--color-accent);
}

.review-head {
  text-align: center;
  margin-bottom: var(--space-10);
}

.review-cat {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* El nombre del producto es el titular de la página. Serif y grande, pero sin
   llegar al tamaño del héroe de la portada: aquí lo que manda es el texto. */
.review-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.review-head .product-badge {
  position: static;
  display: inline-block;
  margin-bottom: var(--space-4);
}

.review-tagline {
  margin: 0 auto;
  max-width: 32rem;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.review-photo {
  margin: 0 0 var(--space-10);
}

/* Un techo de alto para que una foto vertical no empuje la reseña fuera de la
   pantalla. object-fit: contain respeta la foto tal como Angie la tomó en lugar
   de recortarla, que es lo último que quiere quien fotografía su propio producto. */
.review-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32rem;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}

.review-photo figcaption {
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.review-facts {
  margin-bottom: var(--space-10);
}

.review-notes {
  margin-bottom: var(--space-12);
}

.review-notes-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-text);
}

/* La reseña es lo que la persona vino a leer, así que se le da tamaño y aire
   de verdad en lugar del cuerpo pequeño de una ficha. */
.review-notes p {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--color-text);
  text-wrap: pretty;
}

.review-notes p:last-child {
  margin-bottom: 0;
}

.review-notes strong {
  font-weight: 600;
  color: var(--color-text);
}

.review-cta {
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.btn-amazon--lg {
  min-width: 15rem;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* La divulgación va debajo del botón, en la misma pantalla. No se toca. */
.review-cta .product-card-ad {
  margin: var(--space-4) auto 0;
  max-width: 28rem;
}

.review-date {
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.review-nav {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.review-nav-link {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.review-nav-link:hover {
  border-color: var(--color-accent-light);
  transform: translateY(-2px);
}

.review-nav-link--next {
  text-align: right;
}

.review-nav-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.review-nav-name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
}

.review-back {
  margin: var(--space-10) 0 0;
  text-align: center;
}

.review-back a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-light);
  padding-bottom: 2px;
}

.review-back a:hover {
  color: var(--color-accent-dark);
}

@media (min-width: 40rem) {
  .review-nav {
    grid-template-columns: 1fr 1fr;
  }
  .review-nav-link--next:only-child {
    grid-column: 2;
  }
}

/* --- La ventana emergente de la portada ---------------------------------- */

/* Mientras llega la reseña. El nombre del producto ya está en pantalla, así que
   esto solo confirma que algo está pasando. */
.detail-loading {
  margin: var(--space-8) 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* El enlace a la página propia de la reseña, para quien quiera copiarlo. */
.detail-permalink {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.detail-permalink a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
}

.detail-permalink a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent-light);
}

/* ==========================================================================
   PÁGINA COMPARATIVA
   Reutiliza las variables y el ritmo de la página de reseña. La tabla es el
   corazón: tres columnas, una fila por criterio, todo en palabras de Angie.
   ========================================================================== */

.cmp-intro {
  max-width: 44rem;
  margin: 0 auto var(--space-8);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--color-text-muted);
}
.cmp-intro p { margin: 0 0 1em; }

/* El envoltorio desplaza la tabla dentro de su propia caja. Así en un teléfono
   la tabla se arrastra con el dedo pero la página NO se desborda. tabindex lo
   hace alcanzable con el teclado, que es la contraparte obligatoria. */
.cmp-table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.cmp-table-wrap:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cmp-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  line-height: 1.6;
}
.cmp-table thead td { background: transparent; }
.cmp-table th[scope="col"] {
  position: sticky;
  top: 0;
  background: var(--color-surface-warm);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-accent);
  vertical-align: bottom;
}
.cmp-table th[scope="row"] {
  width: 10.5rem;
  min-width: 9rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: left;
  vertical-align: top;
  padding: var(--space-4);
  background: var(--color-surface-warm);
}
.cmp-table td {
  padding: var(--space-4);
  vertical-align: top;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
}
.cmp-table tbody tr + tr th,
.cmp-table tbody tr + tr td { border-top: 1px solid var(--color-border); }

.cmp-table-note {
  margin: 0 0 var(--space-12);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
}

.cmp-block {
  max-width: 44rem;
  margin: 0 auto var(--space-12);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--color-text-muted);
}
.cmp-block p { margin: 0 0 1em; }
.cmp-block p:last-child { margin-bottom: 0; }
.cmp-block strong { color: var(--color-text); font-weight: 600; }

.cmp-block-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  text-align: center;
}

/* El bloque de "si solo compras uno" se destaca: es la respuesta que la
   persona vino a buscar, y merece verse distinta del resto del texto. */
.cmp-block--first {
  background: var(--color-surface-warm);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
}
.cmp-block--honest {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-8);
}

.cmp-cards { margin: 0 0 var(--space-12); }
.cmp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.cmp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cmp-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-2) 0 0;
  line-height: 1.3;
}
.cmp-card-full {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.cmp-card-line {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.6;
}
.cmp-card .btn-amazon { width: 100%; text-align: center; }
.cmp-card .product-card-ad { margin: var(--space-2) 0 0; }
.cmp-card-more {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.cmp-card-more:hover { border-bottom-color: var(--color-accent); }

/* Enlace desde la ficha de un producto hacia la comparativa donde aparece.
   Es el enlazado interno que hace que las páginas se sostengan entre sí. */
.review-compare {
  max-width: 44rem;
  margin: 0 auto var(--space-12);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-warm);
  border-radius: var(--radius-lg);
  text-align: center;
}
.review-compare-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.review-compare a {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
}
.review-compare a:hover { color: var(--color-accent); }

@media (max-width: 40rem) {
  .cmp-table { min-width: 40rem; font-size: 0.875rem; }
  .cmp-table th[scope="row"] { width: 8rem; min-width: 7.5rem; }
  .cmp-block-title { font-size: 1.25rem; }
  .cmp-block--first { padding: var(--space-4) var(--space-6); }
}

/* Texto solo para lectores de pantalla. No se oculta con display:none porque
   entonces el lector tampoco lo lee. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TARJETA DE GUÍA EN LA PORTADA
   Va encima de la rejilla porque responde la pregunta amplia que trae a la
   gente al sitio, y una ficha sola no la responde.
   ========================================================================== */

.guides-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.guides-strip[hidden] { display: none; }

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-surface-warm) 0%, #FFF 100%);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--color-shadow);
}
.guide-card-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
}
.guide-card-line {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.guide-card-cta {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
}

@media (max-width: 40rem) {
  .guide-card { padding: var(--space-4); }
  .guide-card-title { font-size: 1.2rem; }
  .guide-card-line { font-size: var(--text-base); }
}

/* --- correcciones de la página comparativa -------------------------------
   1. La comparativa necesita más ancho que una reseña: son tres columnas que
      tienen que caber en pantalla sin arrastrar. La reseña se lee en una
      columna estrecha, la comparativa se lee de lado a lado.
   2. .product-badge está posicionada en absoluto para la tarjeta de la
      portada. Dentro de la tarjeta comparativa hay que devolverla al flujo,
      o se va al borde de la página. */
.cmp-page .review-container {
  max-width: 64rem;
}
.cmp-table { min-width: 42rem; }

.cmp-card .product-badge {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  align-self: flex-start;
  margin-bottom: var(--space-2);
}

.cmp-cards-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

@media (min-width: 60rem) {
  .cmp-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Aviso de arrastre. Solo en pantallas donde la tabla de verdad no cabe: en
   computadora la tabla entra completa y el aviso sería una mentira. */
.cmp-swipe { display: none; }
@media (max-width: 62rem) {
  .cmp-swipe {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-align: right;
  }
}

/* ==========================================================================
   BOTONES DE CIERRE
   Van después del banner "Everyday Essentials You'll Love". Arriba competían
   con la foto y empujaban las fichas hacia abajo; aquí aparecen justo cuando
   la persona terminó de leer y necesita saber a dónde ir.
   ========================================================================== */

.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-12) 0 var(--space-10);
  padding: 0 var(--space-4);
  text-align: center;
}

.closing-actions-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.closing-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

@media (max-width: 30rem) {
  .closing-actions { margin: var(--space-10) 0 var(--space-8); }
  .closing-actions-line { font-size: var(--text-lg); }
  .closing-actions-buttons { width: 100%; flex-direction: column; }
  .closing-actions-buttons .btn { width: 100%; }
}

/* ==========================================================================
   SUBIR EL CONTENIDO
   Los botones ya no están debajo de la frase de portada, así que el aire que
   ellos necesitaban sobra. Al quitarlo, las categorías y "Angie's Top Picks"
   suben y se ven sin tener que bajar la pantalla.
   ========================================================================== */

.hero-cover-band {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.hero-cover-band .hero-cover-sub {
  margin-bottom: 0;
}
.categories { padding-block: var(--space-6); }
.products-section { padding-top: var(--space-6); }
.products-header { margin-bottom: var(--space-6); }

@media (max-width: 40rem) {
  .hero-cover-band { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .categories { padding-block: var(--space-5); }
  .products-section { padding-top: var(--space-5); }
}

/* Segundo recorte: la frase de portada ya no necesita su propia franja de aire,
   y la foto tampoco necesita separarse tanto del encabezado. */
.hero-cover { padding-top: var(--space-3); }
.hero-cover-band {
  padding-top: var(--space-2);
  padding-bottom: 0;
}
.categories { padding-block: var(--space-4); }
.products-section { padding-top: var(--space-3); }
.products-header { margin-bottom: var(--space-5); }

@media (max-width: 40rem) {
  .hero-cover { padding-top: var(--space-2); }
  .hero-cover-band { padding-top: var(--space-2); padding-bottom: 0; }
  .categories { padding-block: var(--space-3); }
  .products-section { padding-top: var(--space-2); }
}

/* Tercer ajuste: solo "Angie's Top Picks". Las categorías se quedan donde
   están; lo que se cierra es el espacio entre ellas y el título. */
.categories { padding-bottom: var(--space-1); }
.products-section { padding-top: 0; }
.products-header { margin-bottom: var(--space-4); }

@media (max-width: 40rem) {
  .categories { padding-bottom: var(--space-1); }
  .products-section { padding-top: 0; }
}

/* ---------- Tira de fotos extra en una reseña ----------
   Va debajo de la foto principal. Dos columnas en escritorio, una en móvil.
   Las tapas de los pies de foto usan el mismo tono suave que el resto. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}
.photo-strip-item { margin: 0; }
.photo-strip-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px var(--color-shadow);
  /* Recorte igual para las dos, para que los pies de foto queden a la misma
     altura. Sin esto una foto vertical y una horizontal dejan un hueco. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}
.photo-strip-item figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --- "I use it with": pareja de productos que Angie usa juntos -------------
   Vive debajo del botón de Amazon, no arriba, para que no compita con la
   compra principal de la página. Quien llegó por el jabón se lleva el
   dispensador, y al contrario. */
.review-pair {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: var(--space-5);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.review-pair-photo {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #fff;
}
.review-pair-body { min-width: 0; }
.review-pair-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.review-pair-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.review-pair-why {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.review-pair-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-pair-link:hover { color: var(--color-accent-dark); }
@media (max-width: 34rem) {
  .review-pair { flex-direction: column; align-items: flex-start; }
}

/* --- "The short answer": el veredicto en tres líneas, arriba de todo --------
   Va antes de la tabla porque quien busca "mejor corrector para ojeras" quiere
   la respuesta, no estudiar un cuadro de nueve filas. */
.cmp-bl {
  margin: var(--space-8) 0 var(--space-10);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--color-cream);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-md);
}
.cmp-bl-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 var(--space-4);
}
.cmp-bl-list { margin: 0; }
.cmp-bl-item + .cmp-bl-item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.cmp-bl-item dt {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.cmp-bl-item dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Foto del producto dentro de cada tarjeta de la comparativa. */
.cmp-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: var(--space-4);
}

/* Desplegable con el resto de las filas. El texto sigue en el HTML, así que
   Google lo lee igual, pero al entrar no aparece el recuadro completo. */
.cmp-more { margin: var(--space-6) 0 var(--space-4); }
.cmp-more-summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  color: var(--color-accent);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cmp-more-summary:hover { color: var(--color-accent-dark); }
.cmp-more[open] .cmp-more-summary { border-bottom-color: transparent; }

/* ---- Foto principal de la comparativa ---- */
.cmp-top {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  margin: var(--space-8) 0 var(--space-10);
}
@media (min-width: 900px) {
  .cmp-top {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-10);
  }
}
.cmp-top > .cmp-bl { margin: 0; }
.cmp-hero {
  margin: 0;
}
.cmp-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-cream);
}
.cmp-hero-cap {
  margin-top: var(--space-3);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}