/* =========================================================
   OLLY'S BAKED ASSORTMENTS
   Main Site Stylesheet

   Fonts
   - Fraunces: display / headings
   - Karla: body
   - Space Mono: labels / tags
   ========================================================= */


/* =========================================================
   1. FONT LOADING
   Fonts are requested in the document <head> so this stylesheet
   does not create a second render-blocking Google Fonts request.
   ========================================================= */

/* =========================================================
   2. BRAND VARIABLES
   ========================================================= */

:root {
  --brown: #7A2F00;
  --brown-dark: #55210a;

  --pink: #FF99D8;
  --pink-accessible: #B52B82;
  --pink-soft: #ffe0f2;

  --gold: #FFD21F;
  --gold-soft: #fff3c2;

  --off-white: #F7F7F7;
  --cream: #fffaf0;
  --black: #070606;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-tag: 'Space Mono', monospace;

  --radius-lg: 28px;
  --radius-md: 16px;

  --container: 1120px;

  --catalog-card-width: 340px;
}


/* =========================================================
   3. RESET / BASE
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 83px;

  background: var(--off-white);
  color: var(--black);

  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
}

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

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

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

p {
  margin: 0 0 1em;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 .5em;

  color: var(--brown);

  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

h3 {
  font-size: 1.3rem;
}

.container {
  width: 100%;
  max-width: var(--container);

  margin: 0 auto;
  padding: 0 24px;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================
   4. BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 14px 28px;

  border: 2px solid transparent;
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;

  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

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

.btn-primary {
  background: var(--pink);
  color: var(--brown-dark);

  box-shadow: 4px 4px 0 var(--brown);
}

.btn-primary:hover {
  box-shadow: 6px 6px 0 var(--brown);
}

.btn-secondary {
  background: transparent;
  color: var(--off-white);

  border-color: var(--off-white);
}

.btn-secondary:hover {
  background: rgba(247, 247, 247, .12);
}

.btn-gold {
  background: var(--gold);
  color: var(--brown-dark);

  box-shadow: 4px 4px 0 var(--brown);
}

.btn-gold:hover {
  box-shadow: 6px 6px 0 var(--brown);
}


/* =========================================================
   5. HEADER / NAVIGATION
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  width: 100%;

  background: var(--off-white);

  border-bottom: 3px solid var(--brown);
  box-shadow: 0 3px 12px rgba(85, 33, 10, 0.10);
}

.nav-wrap {
  display: flex;
  align-items: center;

  width: 100%;
  max-width: var(--container);

  margin: 0 auto;
  padding: 14px 18px;

  gap: 18px;
}

.logo {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  flex: 0 0 auto;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.05;
}

.logo > span {
  display: block;
  width: 140px;
}

.logo .logo-mark {
  display: block;

  width: 52px;
  height: 52px;
  min-width: 52px;

  flex: 0 0 52px;

  object-fit: contain;
  object-position: center;
}

.main-nav {
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  gap: 14px;
}

.main-nav li {
  flex: 0 0 auto;
}

.main-nav a {
  position: relative;

  display: inline-block;

  padding: 4px 1px;

  color: var(--brown-dark);

  font-size: .82rem;
  font-weight: 700;

  white-space: nowrap;
}

.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: -3px;

  height: 3px;

  background: var(--gold);

  border-radius: 2px;

  transition: right .18s ease;
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  right: 0;
}

.main-nav a[aria-current="page"] {
  color: var(--brown);
}

.main-nav .nav-order a {
  padding: 9px 16px;

  background: var(--brown);
  color: var(--off-white);

  border-radius: 999px;

  font-weight: 800;
}

.main-nav .nav-order a::after {
  display: none;
}

.main-nav .nav-order a:hover {
  background: var(--brown-dark);
}

.main-nav .nav-cart {
  margin-left: -6px;
}

.nav-toggle {
  display: none;

  margin-left: auto;
  padding: 8px 10px;

  background: none;

  border: 2px solid var(--brown);
  border-radius: 10px;

  cursor: pointer;
}

.nav-toggle span {
  display: block;

  width: 22px;
  height: 2px;

  margin: 4px 0;

  background: var(--brown);
}

/* =========================================================
   MOBILE HEADER ACTIONS
========================================================= */

.mobile-header-actions {
  display: none;
}

/* Keep the mobile Cart + hamburger completely hidden on desktop */
.nav-wrap .mobile-header-actions {
  display: none;
}

/* =========================================================
   6. DECORATIVE ELEMENTS
   ========================================================= */

.spot-field {
  position: relative;
  overflow: hidden;
}

.spot {
  position: absolute;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;

  opacity: .85;
}

.spot--pink {
  background: var(--pink);
}

.spot--gold {
  background: var(--gold);
}

.spot--outline {
  background: transparent;

  border: 3px solid var(--gold);

  opacity: .6;
}

.trail {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  max-width: 500px;

  margin: 0 auto;
  padding: 8px 0;
}

.trail span {
  width: 9px;
  height: 9px;

  background: var(--brown);

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;

  opacity: .35;
}

.trail span:nth-child(3n) {
  width: 11px;
  height: 11px;

  background: var(--pink);

  opacity: .8;
}

.trail span:nth-child(4n) {
  background: var(--gold);

  opacity: .9;
}

.trail-icon {
  width: 22px;
  height: 22px;

  flex-shrink: 0;

  opacity: .9;
}


/* =========================================================
   7. HEROES
   ========================================================= */

.hero {
  position: relative;

  padding: 72px 0 78px;

  background: var(--brown);
  color: var(--off-white);
}

.hero .container {
  position: relative;
  z-index: 2;

  max-width: 760px;

  text-align: center;
}

.hero .eyebrow {
  display: inline-block;

  margin-bottom: 18px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero h1 {
  margin-bottom: .35em;

  color: var(--off-white);
}

.hero-headline {
  white-space: nowrap;

  font-size: clamp(1.7rem, 6.2vw, 4rem);
}

.hero h1 em {
  color: var(--pink);
  font-style: italic;
}

.hero h1 em .walk-yellow {
  color: var(--gold);
}

.hero p.lead {
  max-width: 520px;

  margin: 0 auto 34px;

  color: var(--gold-soft);

  font-size: 1.15rem;
}

.hero .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;
}


/* General page hero */

.page-hero {
  position: relative;

  padding: 64px 0 76px;

  background: var(--brown);
  color: var(--off-white);
}

.page-hero .container {
  position: relative;
  z-index: 2;

  max-width: 860px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.page-hero .eyebrow {
  display: inline-block;

  margin-bottom: 14px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-hero h1 {
  color: var(--off-white);
}

.page-hero p {
  max-width: 700px;

  margin-left: auto;
  margin-right: auto;

  color: var(--gold-soft);
}

.page-hero .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 28px;
}


/* Homepage banner */

.hero-brand-banner {
  display: block;

  width: 100%;
  max-width: 760px;

  margin: 28px auto 30px;

  overflow: hidden;

  border: 5px solid var(--off-white);
  border-radius: 24px;

  box-shadow: 6px 6px 0 var(--brown-dark);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.hero-brand-banner img {
  display: block;

  width: 100%;
  height: auto;
}

.hero-brand-banner:hover {
  transform: translateY(-3px);

  box-shadow: 8px 8px 0 var(--brown-dark);
}

.hero-brand-banner:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* =========================================================
   8. GENERAL SECTIONS / LAYOUT
   ========================================================= */

section {
  padding: 72px 0;
}

.section-head {
  max-width: 620px;

  margin: 0 auto 44px;

  text-align: center;
}

.section-head p {
  color: var(--brown-dark);

  font-size: 1.05rem;
}

.bg-cream {
  background: var(--cream);
}

.bg-pink-soft {
  background: var(--pink-soft);
}

.grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 26px;
}


/* =========================================================
   9. GENERAL CARDS
   ========================================================= */

.card {
  position: relative;

  padding: 26px;

  background: var(--off-white);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.card:hover {
  transform: translateY(-4px);

  box-shadow: 6px 6px 0 var(--pink);
}

.card .icon {
  display: block;

  margin-bottom: 12px;

  font-size: 2.1rem;
}


/* =========================================================
   10. COOKIE CARDS
   ========================================================= */

.cookie-card {
  position: relative;

  min-height: 450px;

  padding: 0;

  overflow: hidden;
  isolation: isolate;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.cookie-card-bg {
  position: absolute;

  inset: 0;
  z-index: -2;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform .35s ease;
}

.cookie-card::after {
  content: "";

  position: absolute;

  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 250, 240, 0) 25%,
      rgba(255, 250, 240, .03) 38%,
      rgba(255, 250, 240, .20) 48%,
      rgba(255, 250, 240, .62) 60%,
      rgba(255, 250, 240, .92) 72%,
      rgba(255, 250, 240, .98) 82%,
      var(--cream) 100%
    );
}

.cookie-card-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  padding: 32px 28px 28px;

  color: var(--brown-dark);
}

.cookie-card-overlay h3 {
  margin: 0 0 8px;
  padding-right: 60px;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;

  text-shadow:
    0 0 3px rgba(255, 250, 240, 0.95),
    0 1px 2px rgba(255, 250, 240, 0.8);
}

.cookie-card-overlay p {
  margin: 0 0 12px;

  color: var(--brown-dark);

  font-size: .96rem;
  line-height: 1.55;
}

.cookie-card-cta {
  display: inline-block;

  color: var(--brown-dark);

  font-size: .95rem;
  font-weight: 800;

  transition: transform .15s ease;
}

.cookie-card .price-tag {
  position: absolute;

  top: 18px;
  right: 18px;
  z-index: 4;

  padding: 7px 13px;

  background: var(--gold);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 999px;

  box-shadow: 2px 2px 0 var(--brown);

  font-family: var(--font-tag);
  font-size: .9rem;
  font-weight: 700;

  transform: rotate(4deg);
}

.cookie-card .price-tag.price-tag-premium {
  background: var(--pink);
}

.cookie-card-link {
  display: block;
}

.cookie-card-link:hover {
  transform: translateY(-4px);

  box-shadow: 7px 7px 0 var(--pink);
}

.cookie-card-link:hover .cookie-card-bg {
  transform: scale(1.04);
}

.cookie-card-link:hover .cookie-card-cta {
  transform: translateX(4px);
}

.cookie-card-link:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}

.cookie-card.dog::before {
  content: "\1F43E  for pups";

  position: absolute;

  top: 18px;
  left: 18px;
  z-index: 4;

  padding: 5px 10px;

  background: var(--cream);
  color: var(--brown);

  border: 2px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
}


/* =========================================================
   11. HOMEPAGE GIRAFFE PACK CARDS
   ========================================================= */

.pack-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.pack-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 26px;
}

.pack-card {
  position: relative;

  display: block;

  min-height: 500px;

  padding: 0;

  overflow: hidden;
  isolation: isolate;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.pack-card-bg {
  position: absolute;

  inset: 0;
  z-index: -2;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform .35s ease;
}

.pack-card::after {
  content: "";

  position: absolute;

  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 250, 240, 0) 25%,
      rgba(255, 250, 240, .03) 38%,
      rgba(255, 250, 240, .20) 48%,
      rgba(255, 250, 240, .62) 60%,
      rgba(255, 250, 240, .92) 72%,
      rgba(255, 250, 240, .98) 82%,
      var(--cream) 100%
    );
}

.pack-card-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;

  padding: 32px 28px 28px;

  color: var(--brown-dark);
}

.pack-count {
  display: block;

  margin-bottom: 7px;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pack-card-overlay h3 {
  margin: 0 0 8px;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
}

.pack-price {
  display: block;

  margin: 4px 0 10px;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.pack-cta {
  display: inline-block;

  margin-top: 4px;

  color: var(--brown-dark);

  font-size: .95rem;
  font-weight: 800;

  transition: transform .15s ease;
}

.pack-card:hover {
  transform: translateY(-4px);

  box-shadow: 7px 7px 0 var(--pink);
}

.pack-card:hover .pack-card-bg {
  transform: scale(1.04);
}

.pack-card:hover .pack-cta {
  transform: translateX(4px);
}

.pack-card:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* =========================================================
   12. GIFT BOX TIERS
   ========================================================= */

.tier-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;

  gap: 26px;
}

.tier {
  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 32px 26px;

  background: var(--off-white);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  text-align: center;
}

.tier.tier--feature {
  background: var(--brown);
  color: var(--off-white);

  box-shadow: 8px 8px 0 var(--gold);

  transform: translateY(-8px);
}

.tier.tier--feature h3,
.tier.tier--feature .tier-price {
  color: var(--off-white);
}

.tier.tier--feature p {
  color: var(--gold-soft);
}

.tier-count {
  font-family: var(--font-tag);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;

  opacity: .75;
}

.tier-price {
  color: var(--brown);

  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
}

.tier .btn {
  align-self: center;

  margin-top: auto;
}


/* =========================================================
   13. EVENTS
   ========================================================= */

.event-list {
  display: flex;
  flex-direction: column;

  gap: 20px;
}

.event-card {
  display: flex;
  align-items: flex-start;

  gap: 20px;

  padding: 22px 24px;

  background: var(--off-white);

  border: 2px dashed var(--brown);
  border-radius: var(--radius-md);
}

.event-date {
  min-width: 84px;

  padding: 14px;

  background: var(--pink);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  font-family: var(--font-tag);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.event-date .month {
  display: block;

  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-date .day {
  display: block;

  font-size: 1.4rem;
}

.pill {
  display: inline-block;

  margin-bottom: 6px;
  padding: 3px 9px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =========================================================
   14. FAQ
   ========================================================= */

.faq-item {
  padding: 20px 4px;

  border-bottom: 2px solid var(--brown);
}

.faq-item:first-child {
  border-top: 2px solid var(--brown);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;

  list-style: none;

  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";

  flex-shrink: 0;

  margin-left: 16px;

  color: var(--pink);

  font-size: 1.6rem;

  transition: transform .2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  max-width: 680px;

  margin-top: 12px;

  color: var(--brown-dark);
}


/* =========================================================
   15. ABOUT
   ========================================================= */

.about-wrap {
  display: grid;

  grid-template-columns: 1.1fr .9fr;
  align-items: center;

  gap: 56px;
}

.giraffe-portrait {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: var(--cream);

  border: 3px solid var(--brown);
  border-radius: var(--radius-lg);
}

.giraffe-portrait span {
  font-size: 5rem;
}


/* =========================================================
   16. ORDER PAGE
   ========================================================= */

.order-panel {
  position: relative;

  max-width: 720px;

  margin: 0 auto;
  padding: 48px;

  overflow: hidden;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);

  text-align: center;
}

.order-panel h2 {
  color: var(--off-white);
}

.order-panel p {
  color: var(--gold-soft);
}

.order-steps {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

  margin: 40px 0;

  text-align: left;
}

.order-steps li {
  padding: 20px;

  background: rgba(247, 247, 247, .08);

  border: 1px solid rgba(247, 247, 247, .25);
  border-radius: var(--radius-md);
}

.order-steps .step-num {
  display: block;

  margin-bottom: 8px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-weight: 700;
}


/* =========================================================
   17. NOTES / CTA
   ========================================================= */

.note-box {
  max-width: 720px;

  margin: 28px auto 0;
  padding: 18px 22px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  font-size: .95rem;
}

.note-box a {
  color: var(--brown);

  font-weight: 800;

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.note-box a:hover {
  color: var(--brown-dark);
}

.cta-band {
  position: relative;

  padding: 48px;

  overflow: hidden;

  background: var(--pink);

  border-radius: var(--radius-lg);

  text-align: center;
}

.cta-band h2 {
  margin-bottom: 8px;

  color: var(--brown-dark);
}

.cta-band p {
  color: var(--brown-dark);
}

.cta-band .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 22px;
}


/* =========================================================
   18. HOMEPAGE IMAGE CAROUSEL
   ========================================================= */

.home-carousel {
  padding: 2rem 1rem 0;
}

.carousel-shell {
  position: relative;

  width: min(100%, 550px);

  margin: 0 auto;
}

.carousel-viewport {
  overflow: hidden;

  border-radius: var(--radius-lg);
}

.carousel-track {
  display: flex;

  transition: transform .45s ease;
}

.carousel-slide {
  min-width: 100%;

  aspect-ratio: 1 / 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.carousel-btn {
  position: absolute;

  top: 50%;
  z-index: 2;

  width: 48px;
  height: 48px;

  background: rgba(0, 0, 0, .45);
  color: #fff;

  border: 2px solid #fff;
  border-radius: 50%;

  font-size: 2rem;
  line-height: 1;

  cursor: pointer;

  transform: translateY(-50%);
}

.carousel-prev {
  left: 18px;
}

.carousel-next {
  right: 18px;
}

.carousel-dots {
  display: flex;
  justify-content: center;

  gap: 8px;

  margin-top: 14px;
}

.carousel-dot {
  position: relative;

  width: 44px;
  height: 44px;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 50%;

  cursor: pointer;
}

.carousel-dot::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #c8b6aa;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition:
    transform .15s ease,
    background .15s ease;
}

.carousel-dot:hover::before {
  background: var(--pink);

  transform: translate(-50%, -50%) scale(1.2);
}

.carousel-dot.active::before,
.carousel-dot[aria-current="true"]::before {
  background: var(--brown);

  transform: translate(-50%, -50%) scale(1.35);
}

.carousel-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}


/* =========================================================
   19. BERTHA SECTION
   ========================================================= */

.bertha-thanks {
  padding-bottom: 22px;

  background: var(--off-white);
}

.bertha-thanks + section {
  padding-top: 22px;
}

.bertha-thanks-card {
  position: relative;

  padding: 58px 48px;

  overflow: hidden;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);

  text-align: center;
}

.bertha-thanks-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 940px;

  margin: 0 auto;
}

.bertha-thanks .eyebrow {
  display: inline-block;

  margin-bottom: 14px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.bertha-thanks h2 {
  margin-bottom: 18px;

  color: var(--off-white);
}

.bertha-lead {
  max-width: 760px;

  margin: 0 auto 28px;

  color: var(--gold-soft);

  font-size: 1.05rem;
}

.bertha-prices {
  display: grid;

  grid-template-columns:
    minmax(240px, 285px)
    minmax(220px, 260px)
    minmax(240px, 285px);

  align-items: center;
  justify-content: center;

  gap: 26px;

  width: 100%;

  margin: 28px auto 36px;
}

.bertha-price {
  position: relative;
  z-index: 2;

  width: 100%;

  padding: 28px 24px;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--gold);
  border-radius: var(--radius-md);

  box-shadow: 6px 6px 0 var(--pink);

  text-align: center;
}

.bertha-price-label {
  display: block;

  margin-bottom: 9px;

  font-family: var(--font-tag);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bertha-price strong {
  display: block;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
}

.bertha-price-mascot {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  padding: 0;
  margin: 0;

  pointer-events: none;
}

.bertha-price-mascot img {
  width: 250px;
  max-width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;

  filter:
    drop-shadow(0 9px 8px rgba(35, 12, 2, .28));
}

.bertha-note {
  max-width: 720px;

  margin: 0 auto 28px;

  color: var(--off-white);
}

.bertha-thanks .hero-actions {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  width: min(100%, 720px);

  margin-left: auto;
  margin-right: auto;
}

.bertha-thanks .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  text-align: center;
}

.bertha-thanks .btn-primary,
.bertha-thanks .btn-gold {
  box-shadow: 4px 4px 0 var(--brown-dark);
}

.bertha-extra-links {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;

  gap: 16px;

  width: min(100%, 720px);

  margin: 18px auto 0;
}

.bertha-extra-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 42px;

  padding: 6px 12px;

  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;

  transition:
    color .15s ease,
    transform .15s ease;
}

.bertha-extra-links a:first-child {
  color: var(--gold);
}

.bertha-extra-links a:first-child:hover {
  color: var(--pink);

  transform: translateY(-2px);
}

.bertha-extra-links a:last-child {
  color: var(--pink);
}

.bertha-extra-links a:last-child:hover {
  color: var(--gold);

  transform: translateY(-2px);
}

.bertha-extra-links a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;

  border-radius: 6px;
}

.bertha-spot-one {
  width: 140px;
  height: 150px;

  top: -45px;
  left: 4%;

  opacity: .45;
}

.bertha-spot-two {
  width: 105px;
  height: 105px;

  right: 6%;
  bottom: -25px;

  opacity: .5;
}


/* =========================================================
   20. PRICING & ORDERING
   ========================================================= */

.pricing-section-kicker {
  display: block;

  margin-bottom: 8px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pricing-route-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;
}

.pricing-route-card {
  position: relative;

  padding: 34px 28px 28px;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);
}

.pricing-route-card--bertha {
  background: var(--brown);
  color: var(--off-white);

  box-shadow: 7px 7px 0 var(--gold);
}

.pricing-route-card--bertha h3 {
  color: var(--off-white);
}

.pricing-route-card--bertha .pricing-route-price {
  color: var(--gold);
}

.pricing-route-tag {
  display: inline-block;

  margin-bottom: 14px;
  padding: 5px 10px;

  background: var(--pink);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pricing-route-price {
  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
}

.pricing-feature {
  max-width: 900px;

  margin: 0 auto;
  padding: 54px;

  border-radius: var(--radius-lg);

  text-align: center;
}

.pricing-feature--bertha {
  background: var(--brown);
  color: var(--off-white);
}

.pricing-feature--bertha h2 {
  color: var(--off-white);
}

.pricing-feature--bertha .eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pricing-feature-lead {
  max-width: 680px;

  margin: 0 auto 18px;

  color: var(--gold-soft);
}

.pricing-feature-note {
  max-width: 640px;

  margin: 28px auto;
}

.pricing-feature .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;
}

.pricing-pair {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 240px));

  justify-content: center;

  gap: 22px;

  margin: 32px 0;
}

.pricing-pair--wide {
  grid-template-columns:
    repeat(2, minmax(0, 300px));
}

.pricing-mini-card {
  padding: 22px 26px;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--gold);
  border-radius: var(--radius-md);

  box-shadow: 5px 5px 0 var(--pink);

  text-align: center;
}

.pricing-mini-card span {
  display: block;

  margin-bottom: 8px;

  font-family: var(--font-tag);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pricing-mini-card strong {
  display: block;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
}

.pricing-mini-card small {
  display: block;

  margin-top: 10px;

  opacity: .75;
}

.pricing-callout {
  max-width: 760px;

  margin: 38px auto 0;
  padding: 22px 26px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);
}

.pricing-callout p:last-child {
  margin-bottom: 0;
}

.pricing-pack-note {
  max-width: 650px;

  margin: 40px auto 0;

  color: var(--brown-dark);

  font-size: .9rem;
  text-align: center;
}

.custom-price-formula {
  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items: center;

  gap: 18px;

  margin: 48px 0;
}

.custom-price-piece {
  min-height: 220px;

  padding: 28px 24px;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  text-align: center;
}

.custom-price-piece > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  margin-bottom: 14px;

  background: var(--pink);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 50%;

  font-family: var(--font-tag);
  font-weight: 700;
}

.custom-price-symbol {
  color: var(--brown);

  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
}

.premium-ingredients {
  max-width: 820px;

  margin: 0 auto 48px;

  text-align: center;
}

.ingredient-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 22px 0;
}

.ingredient-pills span {
  padding: 7px 13px;

  background: var(--pink-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .76rem;
}

.pricing-example {
  max-width: 620px;

  margin: 0 auto;
  padding: 34px;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);
}

.pricing-example h3 {
  color: var(--off-white);
}

.pricing-example .pricing-section-kicker {
  color: var(--gold);
}

.pricing-example-row {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding: 12px 0;

  border-bottom:
    1px solid rgba(247, 247, 247, .22);
}

.pricing-example-total {
  margin-top: 6px;

  color: var(--gold);

  border-bottom: 0;

  font-size: 1.15rem;
}

.pricing-delivery-card {
  padding: 52px;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);
}

.pricing-delivery-content {
  position: relative;
  z-index: 2;

  max-width: 680px;
}

.pricing-delivery-card h2 {
  color: var(--off-white);
}

.pricing-delivery-card .eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pricing-delivery-card p {
  color: var(--gold-soft);
}

.pricing-why-grid {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 18px;
}

.pricing-why-item {
  padding: 24px 18px;

  background: var(--off-white);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  text-align: center;
}

.pricing-why-item > span {
  display: block;

  margin-bottom: 10px;

  font-size: 2rem;
}

.pricing-why-item h3 {
  margin-bottom: 8px;
}

.pricing-why-item p {
  margin: 0;

  color: var(--brown-dark);

  font-size: .9rem;
}
/* =========================================================
   21. FLAVORS / MENU PAGE
   ========================================================= */

/* ---------------------------------------------------------
   Flavor hero headline colors
   --------------------------------------------------------- */

.flavor-hero-title {
  color: var(--off-white);
}

.flavor-hero-title em {
  color: var(--pink);
  font-style: italic;
}

.flavor-hero-title .cookies-yellow {
  color: var(--gold);
  font-style: normal;
}

.flavor-hero-banner {
  display: block;

  width: min(100%, 760px);

  margin: 28px auto 0;

  overflow: hidden;

  border: 5px solid var(--off-white);
  border-radius: 24px;

  box-shadow: 6px 6px 0 var(--brown-dark);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.flavor-hero-banner img {
  display: block;

  width: 100%;
  height: auto;
}

.flavor-hero-banner:hover {
  transform: translateY(-3px);

  box-shadow: 8px 8px 0 var(--brown-dark);
}

.flavor-hero-banner:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   Flavor catalog controls
   --------------------------------------------------------- */

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 34px;
  padding: 20px 22px;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);
}

.catalog-toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.catalog-toolbar-label {
  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.catalog-select {
  min-height: 42px;

  padding: 8px 38px 8px 14px;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;

  cursor: pointer;
}

.catalog-select:hover {
  background: var(--gold-soft);
}

.catalog-select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Flavor catalog grid

   Desktop: 4 cards
   Tablet:  2 cards
   Mobile:  1 card
   --------------------------------------------------------- */

.flavor-catalog-grid,
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 24px;

  width: 100%;
}

/* ---------------------------------------------------------
   Catalog cookie cards
   Supports both catalog-card and flavor-catalog-card markup
   --------------------------------------------------------- */

.catalog-card,
.flavor-catalog-card {
  position: relative;

  display: flex;
  flex-direction: column;

   width: 100%;
   max-width: none;
   min-width: 0;
   min-height: 500px;

  overflow: hidden;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.catalog-card:hover,
.flavor-catalog-card:hover {
  transform: translateY(-4px);

  box-shadow: 7px 7px 0 var(--pink);
}


/* ---------------------------------------------------------
   Flavor card top row
   Badges overlay the cookie image
   --------------------------------------------------------- */

.flavor-card-top {
  position: absolute;

  inset: 0;
  z-index: 5;

  display: block;

  padding: 0;

  background: transparent;

  pointer-events: none;
}

.flavor-status,
.catalog-price {
  position: absolute;
  top: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 11px;

  border: 2px solid var(--brown);
  border-radius: 999px;

  box-shadow: 2px 2px 0 var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}

.flavor-status {
  left: 16px;

  max-width: calc(100% - 90px);

  background: var(--pink-soft);
  color: var(--brown-dark);

  letter-spacing: .03em;
  text-transform: uppercase;
}

.flavor-status-specialty {
  background: var(--gold);
}

.catalog-price {
  right: 16px;

  background: var(--gold);
  color: var(--brown-dark);

  font-size: .78rem;

  transform: rotate(3deg);
}

.catalog-price-premium {
  background: var(--pink);
}


/* ---------------------------------------------------------
   Catalog images
   --------------------------------------------------------- */

.catalog-card-image,
.flavor-catalog-image {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: var(--pink-soft);
}

.catalog-card-image img,
.flavor-catalog-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .3s ease;
}

.catalog-card:hover .catalog-card-image img,
.flavor-catalog-card:hover .flavor-catalog-image img {
  transform: scale(1.035);
}

.catalog-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 30px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Catalog card body
   --------------------------------------------------------- */

.catalog-card-body,
.flavor-catalog-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  padding: 24px 24px 22px;
}

.catalog-card-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 13px;
}

.catalog-card-tag {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;

  background: var(--pink-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.catalog-card-tag--specialty {
  background: var(--gold);
}

.catalog-card-tag--rotation {
  background: var(--gold-soft);
}

.catalog-card-tag--classic {
  background: var(--pink-soft);
}

.catalog-card h3,
.flavor-catalog-card h3 {
  margin-bottom: 9px;

  color: var(--brown);

  font-size: 1.4rem;
}

.catalog-card-description,
.flavor-catalog-body p {
  flex: 1 1 auto;

  margin-bottom: 18px;

  color: var(--brown-dark);

  font-size: .93rem;
  line-height: 1.5;
}

.catalog-card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 14px;

  margin-top: auto;
  padding-top: 16px;

  border-top: 1px solid rgba(122, 47, 0, .2);
}

.catalog-card-price {
  color: var(--brown);

  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.catalog-card-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 2px;

  color: var(--brown-dark);

  font-size: .75rem;
}

.catalog-card-stars {
  color: var(--brown);

  font-size: .9rem;
  letter-spacing: .02em;
}


/* ---------------------------------------------------------
   Catalog card links
   --------------------------------------------------------- */

.catalog-card-link,
.flavor-catalog-link {
  display: inline-flex;
  align-items: center;

  margin-top: auto;

  color: var(--brown);

  font-size: .9rem;
  font-weight: 800;
}

.catalog-card-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


/* ---------------------------------------------------------
   Specialty / dog catalog cards
   --------------------------------------------------------- */

.flavor-catalog-card-specialty {
  background: #fff8fc;
}

.flavor-catalog-card-dog {
  background: var(--gold-soft);
}


/* ---------------------------------------------------------
   Entire flavor catalog card clickable
   --------------------------------------------------------- */

a.catalog-card,
a.flavor-catalog-card {
  color: var(--brown-dark);
  text-decoration: none;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

a.catalog-card:visited,
a.flavor-catalog-card:visited {
  color: var(--brown-dark);
}

a.catalog-card:hover,
a.flavor-catalog-card:hover {
  color: var(--brown-dark);
  text-decoration: none;

  transform: translateY(-4px);

  box-shadow: 7px 7px 0 var(--pink);
}

a.catalog-card:focus-visible,
a.flavor-catalog-card:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* Image subtly enlarges when the card is hovered */

a.catalog-card:hover .catalog-card-image img,
a.flavor-catalog-card:hover .flavor-catalog-image img {
  transform: scale(1.035);
}


/* "Meet This Cookie" acts visually like the card CTA */

.flavor-catalog-link {
  display: inline-flex;
  align-items: center;

  margin-top: auto;

  color: var(--brown);

  font-size: .9rem;
  font-weight: 800;

  transition:
    transform .15s ease,
    color .15s ease;
}

a.flavor-catalog-card:hover .flavor-catalog-link {
  color: var(--brown-dark);

  transform: translateX(5px);
}


/* Specialty and dog cards keep their custom backgrounds */

a.flavor-catalog-card.flavor-catalog-card-specialty {
  background: #fff8fc;
}

a.flavor-catalog-card.flavor-catalog-card-dog {
  background: var(--gold-soft);
}

/* ---------------------------------------------------------
   Empty catalog result
   --------------------------------------------------------- */

.catalog-empty {
  grid-column: 1 / -1;

  max-width: 650px;

  margin: 0 auto;
  padding: 32px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  text-align: center;
}

.catalog-empty[hidden] {
  display: none;
}

/* =========================================================
   FLAVOR CATALOG ORGANIZER
========================================================= */

.catalog-organizer {
  position: relative;

  width: 100%;
  max-width: 960px;

  margin: 0 auto 42px;
  padding: 34px 32px 26px;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  box-shadow: 6px 6px 0 var(--pink);
}


/* ---------------------------------------------------------
   Catalog intro
--------------------------------------------------------- */

.catalog-organizer-heading {
  max-width: 680px;

  margin: 0 auto 26px;

  text-align: center;
}

.catalog-organizer-heading .eyebrow {
  margin-bottom: 8px;
}

.catalog-organizer-heading h2 {
  margin-bottom: 10px;

  color: var(--brown);
}

.catalog-organizer-heading p {
  max-width: 620px;

  margin: 0 auto;

  color: var(--brown-dark);

  font-size: .95rem;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   Filter buttons
   --------------------------------------------------------- */

.catalog-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 24px;
}

.catalog-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 8px 14px;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.catalog-filter:hover {
  background: var(--pink-soft);

  transform: translateY(-1px);
}

.catalog-filter.active,
.catalog-filter[aria-pressed="true"] {
  background: var(--brown);
  color: var(--off-white);

  box-shadow: 3px 3px 0 var(--gold);
}


/* ---------------------------------------------------------
   Search + sort row
   --------------------------------------------------------- */

.catalog-tools {
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);

  align-items: end;

  gap: 18px;

  margin-bottom: 18px;
}

.catalog-search-wrap,
.catalog-sort-wrap {
  min-width: 0;
}

.catalog-control-label {
  display: block;

  margin-bottom: 7px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Search
   --------------------------------------------------------- */

.catalog-search-field {
  position: relative;
}

.catalog-search-icon {
  position: absolute;

  top: 50%;
  left: 15px;

  pointer-events: none;

  transform: translateY(-50%);
}

.catalog-search {
  width: 100%;
  min-height: 48px;

  padding: 11px 16px 11px 45px;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: 1rem;

  appearance: none;
}

.catalog-search::placeholder {
  color: rgba(85, 33, 10, .6);
}

.catalog-search:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   Sort menu
   --------------------------------------------------------- */

.catalog-sort {
  width: 100%;
  min-height: 48px;

  padding: 10px 42px 10px 16px;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;

  cursor: pointer;
}

.catalog-sort:focus {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   Results / reset
   --------------------------------------------------------- */

.catalog-results-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding-top: 16px;

  border-top: 1px solid rgba(122, 47, 0, .18);
}

.catalog-count {
  margin: 0;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.catalog-reset {
  padding: 0;

  background: none;
  color: var(--brown);

  border: 0;

  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 800;

  cursor: pointer;

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.catalog-reset:hover {
  color: var(--pink);
}

/* ---------------------------------------------------------
   Ratings on catalog cards
   --------------------------------------------------------- */

.catalog-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin: 2px 0 17px;

  color: var(--brown-dark);

  font-size: .8rem;
  line-height: 1.25;
}

.catalog-rating > span:first-child {
  color: var(--brown);

  font-size: .92rem;
  letter-spacing: .025em;

  text-shadow: none;
}

.catalog-rating strong {
  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
}

.catalog-rating > span:last-child {
  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .67rem;

  opacity: .7;
}


/* ---------------------------------------------------------
   Hidden filtered cards
   --------------------------------------------------------- */

.flavor-catalog-card.catalog-hidden {
  display: none;
}


/* ---------------------------------------------------------
   Empty state
   --------------------------------------------------------- */

.catalog-empty {
  max-width: 520px;

  margin: 20px auto 38px;
  padding: 38px 26px;

  background: var(--gold-soft);

  border: 2px dashed var(--brown);
  border-radius: var(--radius-lg);

  text-align: center;
}

.catalog-empty[hidden] {
  display: none;
}

.catalog-empty > span {
  display: block;

  margin-bottom: 10px;

  font-size: 2.4rem;
}

.catalog-empty h3 {
  margin-bottom: 8px;
}

.catalog-empty p {
  margin-bottom: 20px;

  color: var(--brown-dark);
}


/* ---------------------------------------------------------
   Smooth reordering
   --------------------------------------------------------- */

.flavor-catalog-card {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

/* =========================================================
   FLAVOR CATALOG — TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .flavor-catalog-grid,
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* =========================================================
   ORGANIZER — TABLET
   ========================================================= */

@media (max-width: 700px) {

  .catalog-organizer {
    padding: 26px 22px;
  }

  .catalog-tools {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   ORGANIZER — MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .catalog-organizer {
    margin-bottom: 30px;
    padding: 24px 16px;

    border-radius: 22px;

    box-shadow: 4px 4px 0 var(--pink);
  }

  .catalog-organizer-heading {
    margin-bottom: 20px;
  }

  .catalog-filters {
    gap: 8px;

    margin-bottom: 22px;
  }

  .catalog-filter {
    flex: 1 1 auto;

    min-height: 40px;

    padding: 8px 11px;

    font-size: .62rem;
  }

  .catalog-tools {
    gap: 14px;
  }

  .catalog-results-row {
    align-items: flex-start;
    flex-direction: column;

    gap: 8px;
  }

  .catalog-search,
  .catalog-sort {
    min-height: 46px;
  }

}

/* =========================================================
   22. CUSTOMER REVIEWS — HOMEPAGE
   VERTICAL CLICKABLE CAROUSEL
   ========================================================= */

.home-reviews {
  position: relative;

  padding: 72px 0;

  background: var(--off-white);
}


/* ---------------------------------------------------------
   Main review shell
   --------------------------------------------------------- */

.reviews-shell {
  position: relative;

  padding: 58px 48px 52px;

  overflow: hidden;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  box-shadow: 8px 8px 0 var(--pink);
}

.reviews-shell > *:not(.reviews-spot) {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   Decorative review spots
   --------------------------------------------------------- */

.reviews-spot {
  position: absolute;
  z-index: 0;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;

  pointer-events: none;
}

.reviews-spot-pink {
  width: 165px;
  height: 165px;

  top: -65px;
  left: -35px;

  background: var(--pink);

  opacity: .7;
}

.reviews-spot-gold {
  width: 125px;
  height: 125px;

  right: -30px;
  bottom: -45px;

  background: var(--gold);

  opacity: .7;
}


/* ---------------------------------------------------------
   Reviews heading
   --------------------------------------------------------- */

.reviews-heading {
  max-width: 760px;

  margin: 0 auto 36px;

  text-align: center;
}

.reviews-heading .eyebrow {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reviews-heading h2 {
  margin-bottom: 16px;

  color: var(--brown);

  font-size: clamp(2rem, 4vw, 3rem);
}

.reviews-heading h2 em {
  color: var(--pink-accessible);

  font-style: italic;
}


/* ---------------------------------------------------------
   Review rating summary
   --------------------------------------------------------- */

.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px 18px;

  max-width: 620px;

  margin: 0 auto;
}

.reviews-summary-stars {
  flex: 0 0 auto;

  color: var(--gold);

  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: .06em;

  text-shadow:
    1px 0 var(--brown),
    -1px 0 var(--brown),
    0 1px var(--brown),
    0 -1px var(--brown);
}

.reviews-summary p {
  margin: 0;

  color: var(--brown-dark);

  font-size: .98rem;
  line-height: 1.45;
}

.reviews-summary strong {
  color: var(--brown);

  font-weight: 800;
}


/* ---------------------------------------------------------
   Vertical carousel wrapper
   --------------------------------------------------------- */

.reviews-carousel {
  position: relative;

  width: min(100%, 760px);

  margin: 42px auto 0;

  padding: 22px 0;
}


/* ---------------------------------------------------------
   Carousel viewport
   --------------------------------------------------------- */

.reviews-carousel-viewport {
  position: relative;

  width: 100%;

  height: 330px;

  overflow: hidden;

  border-radius: var(--radius-lg);
}

.reviews-carousel-viewport:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   Vertical moving track
   --------------------------------------------------------- */

.reviews-carousel-track {
  display: flex;
  flex-direction: column;

  width: 100%;

  transition:
    transform .30s cubic-bezier(.22, .61, .36, 1);

  will-change: transform;
}


/* ---------------------------------------------------------
   Individual review slide
   --------------------------------------------------------- */

.reviews-carousel-slide {
  flex: 0 0 330px;

  width: 100%;
  height: 330px;

  padding: 4px 8px 10px;
}


/* ---------------------------------------------------------
   Homepage review card
   --------------------------------------------------------- */

.reviews-carousel .review-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  min-height: 310px;

  padding: 34px 34px 30px;

  overflow: hidden;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  box-shadow: 5px 5px 0 var(--pink);

  text-decoration: none;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.reviews-carousel .review-card:visited {
  color: var(--brown-dark);
}

.reviews-carousel .review-card:hover {
  color: var(--brown-dark);

  text-decoration: none;

  transform: translateY(-3px);

  box-shadow: 8px 8px 0 var(--pink);
}

.reviews-carousel .review-card:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   Featured review card
   --------------------------------------------------------- */

.reviews-carousel .review-card-featured {
  background: var(--brown);
  color: var(--off-white);

  border-color: var(--brown);

  box-shadow: 6px 6px 0 var(--gold);
}

.reviews-carousel .review-card-featured:visited {
  color: var(--off-white);
}

.reviews-carousel .review-card-featured:hover {
  color: var(--off-white);

  box-shadow: 9px 9px 0 var(--gold);
}


/* ---------------------------------------------------------
   Review stars
   --------------------------------------------------------- */

.reviews-carousel .review-stars {
  position: relative;
  z-index: 2;

  margin-bottom: 16px;

  color: var(--gold);

  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: .05em;
}


/* ---------------------------------------------------------
   Cookie mentioned badge
   --------------------------------------------------------- */

.reviews-carousel .review-cookie {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;

  align-self: flex-start;

  max-width: 100%;

  margin-bottom: 17px;
  padding: 6px 11px;

  background: var(--pink-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.reviews-carousel .review-card-featured .review-cookie {
  background: var(--pink);
  color: var(--brown-dark);

  border-color: var(--off-white);
}


/* ---------------------------------------------------------
   Review quote
   --------------------------------------------------------- */

.reviews-carousel .review-card blockquote {
  position: relative;
  z-index: 2;

  flex: 1 1 auto;

  max-width: 650px;

  margin: 0 0 26px;
  padding: 0;

  color: var(--brown-dark);

  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
}

.reviews-carousel .review-card-featured blockquote {
  color: var(--off-white);
}

.reviews-carousel .review-card blockquote::before {
  content: "\201C";

  position: absolute;

  top: -24px;
  left: -11px;
  z-index: -1;

  color: var(--pink);

  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;

  opacity: .15;

  pointer-events: none;
}

.reviews-carousel .review-card-featured blockquote::before {
  color: var(--gold);

  opacity: .18;
}


/* ---------------------------------------------------------
   Review footer
   --------------------------------------------------------- */

.reviews-carousel .review-footer {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-top: auto;
  padding-top: 19px;

  border-top: 1px solid rgba(122, 47, 0, .18);
}

.reviews-carousel .review-card-featured .review-footer {
  border-top-color: rgba(247, 247, 247, .25);
}

.reviews-carousel .review-footer > div {
  min-width: 0;
}

.reviews-carousel .review-footer strong {
  display: block;

  margin-bottom: 3px;

  color: var(--brown);

  font-size: .98rem;
  font-weight: 800;
  line-height: 1.25;
}

.reviews-carousel .review-card-featured .review-footer strong {
  color: var(--off-white);
}

.reviews-carousel .review-footer > div > span {
  display: block;

  color: var(--brown-dark);

  font-size: .79rem;
  line-height: 1.35;

  opacity: .75;
}

.reviews-carousel .review-card-featured .review-footer > div > span {
  color: var(--gold-soft);

  opacity: .88;
}


/* ---------------------------------------------------------
   Review source
   --------------------------------------------------------- */

.reviews-carousel .review-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 6px 10px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.reviews-carousel .review-card-featured .review-source {
  background: var(--gold);
  color: var(--brown-dark);

  border-color: var(--off-white);
}


/* ---------------------------------------------------------
   Vertical carousel arrows
   --------------------------------------------------------- */

.reviews-carousel-btn {
  position: absolute;

  left: 50%;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  padding: 0;

  background: var(--brown);
  color: var(--off-white);

  border: 2px solid var(--cream);
  border-radius: 50%;

  box-shadow: 3px 3px 0 var(--pink);

  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transform: translateX(-50%);

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.reviews-carousel-btn:hover {
  background: var(--brown-dark);

  box-shadow: 4px 4px 0 var(--gold);
}

.reviews-carousel-btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.reviews-carousel-prev {
  top: 0;
}

.reviews-carousel-next {
  bottom: 0;
}

.reviews-carousel-prev:hover {
  transform: translate(-50%, -2px);
}

.reviews-carousel-next:hover {
  transform: translate(-50%, 2px);
}


/* ---------------------------------------------------------
   Carousel position dots
   --------------------------------------------------------- */

.reviews-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 0;

  max-width: 484px;

  margin: 28px auto 0;
}

.reviews-carousel-dot {
  position: relative;

  width: 44px;
  height: 44px;

  padding: 0;

  background: transparent;

  border: 0;
  border-radius: 50%;

  cursor: pointer;
}

.reviews-carousel-dot::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #c8b6aa;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  transition:
    transform .15s ease,
    background .15s ease;
}

.reviews-carousel-dot:hover::before {
  background: var(--pink);

  transform: translate(-50%, -50%) scale(1.2);
}

.reviews-carousel-dot.active::before,
.reviews-carousel-dot[aria-current="true"]::before {
  background: var(--brown);

  transform: translate(-50%, -50%) scale(1.4);
}

.reviews-carousel-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}


/* ---------------------------------------------------------
   Review actions
   --------------------------------------------------------- */

.reviews-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 34px;
}

.reviews-actions .btn {
  min-width: 210px;
}


/* ---------------------------------------------------------
   Optional review counter
   --------------------------------------------------------- */

.reviews-carousel-counter {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  margin-top: 15px;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
}


/* =========================================================
   23. FULL REVIEWS PAGE
   ========================================================= */

.reviews-page {
  background: var(--off-white);
}


/* ---------------------------------------------------------
   Reviews page introduction
   --------------------------------------------------------- */

.reviews-page-intro {
  max-width: 760px;

  margin: 0 auto 42px;

  text-align: center;
}

.reviews-page-intro p {
  color: var(--brown-dark);

  font-size: 1.05rem;
}


/* ---------------------------------------------------------
   Reviews summary panel
   --------------------------------------------------------- */

.reviews-page-summary {
  display: grid;

  grid-template-columns: auto 1fr;
  align-items: center;

  gap: 28px;

  max-width: 760px;

  margin: 0 auto 50px;
  padding: 28px 32px;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);

  box-shadow: 7px 7px 0 var(--gold);
}

.reviews-page-score {
  min-width: 150px;

  padding-right: 28px;

  border-right: 1px solid rgba(247, 247, 247, .25);

  text-align: center;
}

.reviews-page-score strong {
  display: block;

  color: var(--off-white);

  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
}

.reviews-page-score .review-stars {
  margin: 8px 0;

  color: var(--gold);

  font-size: 1.15rem;
  letter-spacing: .04em;
}

.reviews-page-score span {
  display: block;

  color: var(--gold-soft);

  font-size: .8rem;
}

.reviews-page-summary-copy p {
  margin: 0;

  color: var(--gold-soft);
}


/* ---------------------------------------------------------
   Reviews page toolbar
   --------------------------------------------------------- */

.reviews-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 32px;
  padding: 18px 20px;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);
}

.reviews-page-toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;
}

.reviews-page-toolbar label,
.reviews-page-toolbar-label {
  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.reviews-page-select {
  min-height: 40px;

  padding: 7px 36px 7px 13px;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   Full reviews grid
   --------------------------------------------------------- */

.reviews-page-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: stretch;

  gap: 26px;
}


/* ---------------------------------------------------------
   Full review page cards
   --------------------------------------------------------- */

.reviews-page-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100%;

  padding: 28px 26px 24px;

  overflow: hidden;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.reviews-page-card:hover {
  transform: translateY(-3px);

  box-shadow: 6px 6px 0 var(--pink);
}

.reviews-page-card--featured {
  background: var(--brown);
  color: var(--off-white);

  box-shadow: 6px 6px 0 var(--gold);
}

.reviews-page-card--featured:hover {
  box-shadow: 8px 8px 0 var(--gold);
}

.reviews-page-card .review-stars {
  margin-bottom: 14px;

  color: var(--gold);

  font-size: 1.12rem;
  letter-spacing: .04em;
}

.reviews-page-card .review-cookie {
  display: inline-flex;
  align-self: flex-start;

  margin-bottom: 16px;
  padding: 5px 9px;

  background: var(--pink-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.reviews-page-card--featured .review-cookie {
  background: var(--pink);

  border-color: var(--off-white);
}

.reviews-page-card blockquote {
  flex: 1 1 auto;

  margin: 0 0 24px;

  color: var(--brown-dark);

  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
}

.reviews-page-card--featured blockquote {
  color: var(--off-white);
}

.reviews-page-card .review-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  margin-top: auto;
  padding-top: 17px;

  border-top: 1px solid rgba(122, 47, 0, .18);
}

.reviews-page-card--featured .review-footer {
  border-top-color: rgba(247, 247, 247, .25);
}

.reviews-page-card .review-footer strong {
  display: block;

  margin-bottom: 2px;

  color: var(--brown);

  font-size: .93rem;
  font-weight: 800;
}

.reviews-page-card--featured .review-footer strong {
  color: var(--off-white);
}

.reviews-page-card .review-footer > div > span {
  display: block;

  color: var(--brown-dark);

  font-size: .75rem;

  opacity: .72;
}

.reviews-page-card--featured .review-footer > div > span {
  color: var(--gold-soft);

  opacity: .9;
}

.reviews-page-card .review-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 5px 9px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 1px solid var(--brown);
  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.reviews-page-card--featured .review-source {
  background: var(--gold);

  border-color: var(--off-white);
}


/* ---------------------------------------------------------
   Rating-only review cards
   --------------------------------------------------------- */

.reviews-page-card--rating-only {
  justify-content: center;

  min-height: 240px;

  text-align: center;
}

.reviews-page-card--rating-only .review-stars {
  margin-bottom: 18px;

  font-size: 1.4rem;
}

.reviews-page-card--rating-only .review-footer {
  width: 100%;
}


/* ---------------------------------------------------------
   Reviews page note
   --------------------------------------------------------- */

.reviews-page-note {
  max-width: 760px;

  margin: 42px auto 0;
  padding: 20px 24px;

  background: var(--gold-soft);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: var(--radius-md);

  text-align: center;
}

.reviews-page-note p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   Reviews CTA
   --------------------------------------------------------- */

.reviews-page-cta {
  margin-top: 52px;
  padding: 48px 40px;

  background: var(--pink);

  border-radius: var(--radius-lg);

  text-align: center;
}

.reviews-page-cta h2 {
  color: var(--brown-dark);
}

.reviews-page-cta p {
  max-width: 620px;

  margin-left: auto;
  margin-right: auto;

  color: var(--brown-dark);
}

.reviews-page-cta .hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 16px;

  margin-top: 22px;
}


/* =========================================================
   HOMEPAGE REVIEWS — TABLET
   ========================================================= */

@media (max-width: 860px) {

  .reviews-shell {
    padding: 50px 30px;
  }

  .reviews-heading {
    max-width: 650px;
  }

  .reviews-carousel {
    width: min(100%, 620px);
  }

  .reviews-carousel .review-card {
    min-height: 300px;

    padding: 32px 30px 28px;
  }

}


/* =========================================================
   HOMEPAGE REVIEWS — MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .home-reviews {
    padding: 54px 0;
  }

  .reviews-shell {
    padding: 42px 18px 38px;

    border-radius: 22px;

    box-shadow: 5px 5px 0 var(--pink);
  }

  .reviews-heading {
    margin-bottom: 28px;
  }

  .reviews-heading .eyebrow {
    font-size: .7rem;
  }

  .reviews-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .reviews-summary {
    flex-direction: column;

    gap: 9px;

    text-align: center;
  }

  .reviews-summary-stars {
    font-size: 1.35rem;
  }

  .reviews-summary p {
    max-width: 290px;

    font-size: .92rem;

    text-align: center;
  }

  .reviews-carousel {
    width: 100%;

    margin-top: 36px;
    padding: 20px 0;
  }

.reviews-carousel-viewport {
  height: 360px;

  border-radius: 20px;
}

.reviews-carousel-slide {
  flex-basis: 360px;
  height: 360px;

  padding:
    4px
    4px
    9px;
}

  .reviews-carousel .review-card,
  .reviews-carousel .review-card-featured {
    width: 100%;
    min-height: 0;

    padding: 28px 22px 24px;

    border-radius: 20px;

    transform: none;
  }

  .reviews-carousel .review-card:hover,
  .reviews-carousel .review-card-featured:hover {
    transform: none;
  }

  .reviews-carousel .review-card blockquote {
    margin-bottom: 22px;

    font-size: 1.02rem;
    line-height: 1.58;
  }

  .reviews-carousel .review-footer {
    align-items: center;

    gap: 10px;
  }

  .reviews-carousel .review-footer strong {
    font-size: .94rem;
  }

  .reviews-carousel .review-source {
    padding: 5px 8px;

    font-size: .58rem;
  }

  .reviews-carousel-btn {
    width: 44px;
    height: 44px;

    font-size: 1.3rem;
  }

  .reviews-carousel-dots {
    gap: 0;

    margin-top: 27px;
  }

  .reviews-actions {
    flex-direction: column;

    width: 100%;

    gap: 13px;

    margin-top: 28px;
  }

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

  .reviews-spot-pink {
    width: 115px;
    height: 115px;

    top: -45px;
    left: -35px;
  }

  .reviews-spot-gold {
    width: 90px;
    height: 90px;

    right: -25px;
    bottom: -30px;
  }

}


/* =========================================================
   HOMEPAGE REVIEWS — VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .reviews-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .reviews-carousel .review-card,
  .reviews-carousel .review-card-featured {
    padding-left: 18px;
    padding-right: 18px;
  }

  .reviews-carousel .review-footer {
    gap: 8px;
  }

  .reviews-carousel .review-source {
    padding-left: 7px;
    padding-right: 7px;

    font-size: .56rem;
  }

  .reviews-carousel .review-cookie {
    max-width: 90%;

    font-size: .6rem;
  }

}


/* =========================================================
   FULL REVIEWS PAGE — TABLET
   ========================================================= */

@media (max-width: 900px) {

  .reviews-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   FULL REVIEWS PAGE — MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .reviews-page-summary {
    grid-template-columns: 1fr;

    gap: 20px;

    padding: 26px 22px;

    text-align: center;
  }

  .reviews-page-score {
    min-width: 0;

    padding-right: 0;
    padding-bottom: 20px;

    border-right: 0;
    border-bottom: 1px solid rgba(247, 247, 247, .25);
  }

  .reviews-page-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .reviews-page-toolbar-group {
    justify-content: space-between;

    width: 100%;
  }

  .reviews-page-select {
    flex: 1 1 auto;

    max-width: 220px;
  }

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

  .reviews-page-card {
    padding: 26px 22px 23px;
  }

  .reviews-page-cta {
    padding: 40px 22px;
  }

  .reviews-page-cta .hero-actions {
    flex-direction: column;
  }

  .reviews-page-cta .hero-actions .btn {
    width: 100%;
  }

}

/* =========================================================
   24. FOOTER
   ========================================================= */

.site-footer {
  padding: 52px 0 24px;

  background: var(--brown-dark);
  color: var(--off-white);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    minmax(240px, 1.55fr)
    minmax(135px, .8fr)
    minmax(150px, .9fr)
    minmax(210px, 1.15fr);

  align-items: start;

  gap: 44px;

  margin-bottom: 38px;
}

.footer-brand,
.footer-links,
.footer-contact {
  min-width: 0;
}

.footer-logo {
  display: block;

  margin-bottom: 8px;

  color: var(--off-white);

  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.footer-tagline {
  margin-bottom: 18px;

  color: var(--gold);

  font-family: var(--font-display);
  font-style: italic;
}

.site-footer h3,
.site-footer h4 {
  margin-bottom: 14px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer li {
  margin-bottom: 8px;
}

.site-footer a {
  color: var(--off-white);

  font-size: .9rem;

  opacity: .85;
}

.site-footer a:hover {
  color: var(--pink);

  opacity: 1;
}

.footer-contact ul,
.footer-links ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-cart-trigger {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 0;

  background: transparent;
  color: var(--off-white);

  border: 0;

  font: inherit;
  font-size: .9rem;

  opacity: .85;

  cursor: pointer;

  transition:
    color .15s ease,
    opacity .15s ease;
}

.footer-cart-trigger:hover,
.footer-cart-trigger:focus-visible {
  color: var(--pink);

  opacity: 1;
}

.footer-cart-trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;

  border-radius: 4px;
}

.footer-cart-trigger .cart-count {
  margin-left: 1px;
}

.footer-location > span {
  display: block;

  margin-bottom: 7px;

  color: var(--off-white);

  font-size: .9rem;

  opacity: .85;
}

.footer-map-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 5px 12px;

  padding-left: 0;
}

.footer-map-links a {
  font-size: .82rem;
}

.social-row {
  display: flex;

  gap: 12px;
}

.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(247, 247, 247, .35);
  border-radius: 50%;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.social-row a:hover {
  background: rgba(247, 247, 247, .1);

  border-color: var(--pink);

  transform: translateY(-2px);
}

.social-row svg {
  width: 18px;
  height: 18px;

  fill: var(--off-white);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  padding-top: 20px;

  color: rgba(247, 247, 247, .6);

  border-top: 1px solid rgba(247, 247, 247, .18);

  font-size: .78rem;
}

/* ---------------------------------------------------------
   Footer — responsive
   --------------------------------------------------------- */

@media (max-width: 950px) {

  .footer-grid {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(140px, .8fr)
      minmax(180px, 1fr);

    gap: 38px 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

}


@media (max-width: 640px) {

  .site-footer {
    padding-top: 44px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 34px 24px;

    margin-bottom: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-map-links {
    padding-left: 0;
  }

  .footer-bottom {
    flex-direction: column;

    gap: 8px;
  }

}


@media (max-width: 420px) {

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

    gap: 30px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-map-links {
    gap: 6px 12px;
  }

}

/* =========================================================
   25. UTILITIES
   ========================================================= */

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

.mt-sm {
  margin-top: 16px;
}

.mt-md {
  margin-top: 28px;
}

.mt-lg {
  margin-top: 44px;
}

.mb-0 {
  margin-bottom: 0;
}

.max-700 {
  max-width: 700px;

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   26. RESPONSIVE — LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1000px) {

  .nav-wrap {
    gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo > span {
    width: 125px;
  }

  .main-nav ul {
    gap: 10px;
  }

  .main-nav a {
    font-size: .74rem;
  }

  .main-nav .nav-order a {
    padding: 8px 12px;
  }

  .main-nav .nav-cart {
    margin-left: -5px;
  }

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

  .pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-route-card:last-child {
    grid-column: 1 / -1;

    max-width: 520px;

    margin-left: auto;
    margin-right: auto;
  }

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

}


/* =========================================================
   27. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 860px) {

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  section {
    padding: 62px 0;
  }


  /* -------------------------------------------------------
   Navigation becomes mobile
   ------------------------------------------------------- */

.nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;

  padding: 10px 12px;
}

.logo {
  order: 1;

  min-width: 0;
  flex: 1 1 0;
}

.logo > span {
  min-width: 0;
  width: auto;

  font-size: .96rem;
  line-height: 1.05;
}

.nav-wrap .mobile-header-actions {
  order: 2;

  display: flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 8px;

  margin-left: auto;
}

.mobile-cart-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 6px 2px;

  color: var(--brown-dark);

  font-size: .78rem;
  font-weight: 800;

  white-space: nowrap;
}

.mobile-cart-trigger .cart-count {
  margin-left: 0;
}

.nav-toggle {
  display: block;

  margin-left: 0;
}

.main-nav {
  order: 3;

  display: none;

  flex: 0 0 100%;
  width: 100%;

  margin-left: 0;
}

.main-nav.open {
  display: block;
}

.main-nav .nav-cart {
  display: none;
}

.main-nav ul {
  flex-direction: column;
  align-items: stretch;

  gap: 0;

  width: 100%;

  padding: 12px 0 4px;
}

.main-nav li {
  width: 100%;
}

.main-nav a {
  display: block;

  width: 100%;

  padding: 10px 4px;

  font-size: .92rem;
}

.main-nav a::after {
  display: none;
}

.main-nav .nav-order {
  margin-top: 7px;
}

.main-nav .nav-order a {
  display: inline-flex;
  justify-content: center;

  width: auto;

  padding: 10px 20px;
}


  /* -------------------------------------------------------
     About
     ------------------------------------------------------- */

  .about-wrap {
    grid-template-columns: 1fr;

    gap: 36px;
  }


  /* -------------------------------------------------------
     Gift tiers
     ------------------------------------------------------- */

  .tier-grid {
    grid-template-columns: 1fr;

    max-width: 600px;

    margin-left: auto;
    margin-right: auto;
  }

  .tier.tier--feature {
    transform: none;
  }


  /* -------------------------------------------------------
     Order
     ------------------------------------------------------- */

  .order-steps {
    grid-template-columns: 1fr;
  }


  /* -------------------------------------------------------
     Bertha
     ------------------------------------------------------- */

  .bertha-thanks-card {
    padding: 50px 34px;
  }

  .bertha-prices {
    grid-template-columns:
      minmax(220px, 280px)
      minmax(200px, 240px)
      minmax(220px, 280px);

    gap: 18px;
  }

  .bertha-price {
    padding: 24px 18px;
  }

  .bertha-price strong {
    font-size: 2.8rem;
  }

  .bertha-price-mascot img {
    width: 220px;
  }


  /* -------------------------------------------------------
     Pricing
     ------------------------------------------------------- */

  .custom-price-formula {
    grid-template-columns: 1fr;

    max-width: 620px;

    margin-left: auto;
    margin-right: auto;
  }

  .custom-price-symbol {
    transform: rotate(90deg);

    text-align: center;
  }

  .custom-price-piece {
    min-height: 0;
  }

  .pricing-delivery-card {
    padding: 44px 36px;
  }

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


  /* -------------------------------------------------------
     Catalog
     ------------------------------------------------------- */

  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-toolbar-group {
    justify-content: space-between;

    width: 100%;
  }

}


/* =========================================================
   28. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body {
  padding-top: 71px;
  font-size: 16px;
}

  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  section {
    padding: 54px 0;
  }


  /* -------------------------------------------------------
     Header
     ------------------------------------------------------- */

  .logo {
    gap: 8px;

    font-size: 1.05rem;
  }

  .logo .logo-mark {
    width: 44px;
    height: 44px;
    min-width: 44px;

    flex-basis: 44px;
  }


  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .hero {
    padding: 58px 0 64px;
  }

  .page-hero {
    padding: 54px 0 62px;
  }

  .hero p.lead {
    font-size: 1.03rem;
  }

  .hero .hero-actions,
  .page-hero .hero-actions {
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 420px;

    margin-left: auto;
    margin-right: auto;
  }

  .hero .hero-actions .btn,
  .page-hero .hero-actions .btn {
    width: 100%;
  }

  .hero-brand-banner,
  .flavor-hero-banner {
    border-width: 4px;
    border-radius: 20px;

    box-shadow: 5px 5px 0 var(--brown-dark);
  }


  /* -------------------------------------------------------
     General grids
     ------------------------------------------------------- */

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

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


  /* -------------------------------------------------------
     Cookie cards
     ------------------------------------------------------- */

  .cookie-card,
  .pack-card {
    min-height: 460px;
  }

  .cookie-card-overlay,
  .pack-card-overlay {
    padding: 28px 22px 24px;
  }


  /* -------------------------------------------------------
     Events
     ------------------------------------------------------- */

  .event-card {
    flex-direction: column;
  }


  /* -------------------------------------------------------
     Order
     ------------------------------------------------------- */

  .order-panel {
    padding: 38px 24px;
  }


  /* -------------------------------------------------------
     CTA
     ------------------------------------------------------- */

  .cta-band {
    padding: 38px 24px;
  }

  .cta-band .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band .hero-actions .btn {
    width: 100%;
  }


  /* -------------------------------------------------------
     Homepage image carousel
     ------------------------------------------------------- */

  .home-carousel {
    padding-left: 0;
    padding-right: 0;
  }

  .carousel-btn {
    width: 44px;
    height: 44px;

    font-size: 1.65rem;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }


  /* -------------------------------------------------------
     Bertha
     ------------------------------------------------------- */

  .bertha-thanks-card {
    padding: 44px 24px;
  }

  .bertha-prices {
    grid-template-columns: 1fr;

    gap: 18px;

    max-width: 360px;
  }

  .bertha-price {
    width: 100%;
  }

  .bertha-price-mascot {
    order: 2;
  }

  .bertha-price-mascot img {
    width: 210px;
  }

  .bertha-prices .bertha-price:first-child {
    order: 1;
  }

  .bertha-prices .bertha-price:last-child {
    order: 3;
  }

  .bertha-thanks .hero-actions {
    grid-template-columns: 1fr;

    max-width: 420px;
  }

  .bertha-extra-links {
    grid-template-columns: 1fr;

    max-width: 420px;

    gap: 8px;
  }

  .bertha-extra-links a {
    min-height: 38px;

    font-size: .98rem;
  }


  /* -------------------------------------------------------
     Pricing
     ------------------------------------------------------- */

  .pricing-route-grid {
    grid-template-columns: 1fr;
  }

  .pricing-route-card:last-child {
    grid-column: auto;

    max-width: none;
  }

  .pricing-feature {
    padding: 42px 24px;
  }

  .pricing-pair,
  .pricing-pair--wide {
    grid-template-columns: 1fr;

    max-width: 340px;

    margin-left: auto;
    margin-right: auto;
  }

  .pricing-delivery-card {
    padding: 40px 24px;
  }

  .pricing-why-grid {
    grid-template-columns: 1fr;
  }

  .pricing-example {
    padding: 28px 22px;
  }


  /* -------------------------------------------------------
     Catalog
     ------------------------------------------------------- */

  .catalog-toolbar {
    padding: 18px;
  }

  .catalog-toolbar-group {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-select {
    width: 100%;
  }

  .catalog-filters {
    width: 100%;
  }

  .catalog-filter {
    flex: 1 1 auto;
  }

  .flavor-catalog-grid,
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

.catalog-card,
.flavor-catalog-card {
  max-width: 420px;

  margin-left: auto;
  margin-right: auto;
}

}

/* =========================================================
   29. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  h1 {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }

  h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }


  /* -------------------------------------------------------
     Hero headline
     ------------------------------------------------------- */

  .hero-headline {
    white-space: normal;
  }


  /* -------------------------------------------------------
     Buttons
     ------------------------------------------------------- */

  .btn {
    padding: 13px 21px;

    font-size: .9rem;
  }


  /* -------------------------------------------------------
     Cookie cards
     ------------------------------------------------------- */

  .cookie-card,
  .pack-card {
    min-height: 430px;

    border-radius: 22px;
  }

  .cookie-card-overlay,
  .pack-card-overlay {
    padding: 26px 20px 22px;
  }

  .cookie-card-overlay h3,
  .pack-card-overlay h3 {
    font-size: 1.4rem;
  }


  /* -------------------------------------------------------
     Bertha
     ------------------------------------------------------- */

  .bertha-thanks-card {
    padding: 38px 18px;

    border-radius: 22px;
  }

  .bertha-lead {
    font-size: .98rem;
  }

  .bertha-price {
    padding: 22px 18px;
  }

  .bertha-price strong {
    font-size: 2.7rem;
  }

  .bertha-price-mascot img {
    width: 185px;
  }

  .bertha-note {
    font-size: .92rem;
  }


  /* -------------------------------------------------------
     Pricing
     ------------------------------------------------------- */

  .pricing-feature {
    padding: 36px 18px;
  }

  .pricing-mini-card {
    padding: 20px;
  }

  .pricing-mini-card strong {
    font-size: 2.3rem;
  }

  .pricing-callout {
    padding: 19px 18px;
  }

  .custom-price-piece {
    padding: 24px 18px;
  }

  .pricing-delivery-card {
    padding: 34px 20px;
  }


  /* -------------------------------------------------------
     Reviews page
     ------------------------------------------------------- */

  .reviews-page-intro {
    margin-bottom: 34px;
  }

  .reviews-page-summary {
    margin-bottom: 38px;
  }

  .reviews-page-card {
    border-radius: 22px;
  }


  /* -------------------------------------------------------
     Footer
     ------------------------------------------------------- */

  .site-footer {
    padding-top: 44px;
  }

}


/* =========================================================
   30. RESPONSIVE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  body {
    padding-top: 67px;
  }

  /* rest of your existing rules */

  .nav-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo {
    font-size: .96rem;
  }

  .logo .logo-mark {
    width: 40px;
    height: 40px;
    min-width: 40px;

    flex-basis: 40px;
  }

  .nav-toggle {
    padding: 7px 8px;
  }

  .hero {
    padding-top: 50px;
    padding-bottom: 56px;
  }

  .page-hero {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .hero-brand-banner,
  .flavor-hero-banner {
    border-width: 3px;

    border-radius: 17px;
  }

  .cookie-card,
  .pack-card {
    min-height: 410px;
  }

  .carousel-btn {
    width: 38px;
    height: 38px;

    font-size: 1.45rem;
  }

  .bertha-price-mascot img {
    width: 165px;
  }

  .pricing-example-row {
    gap: 12px;

    font-size: .9rem;
  }

}


/* =========================================================
   31. PRINT
   ========================================================= */

@media print {

  .site-header,
  .site-footer,
  .nav-toggle,
  .hero-actions,
  .carousel-btn,
  .carousel-dots,
  .reviews-carousel-btn,
  .reviews-carousel-dots,
  .reviews-actions,
  .social-row,
  .bertha-extra-links {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  section {
    padding: 24px 0;
  }

  .container {
    max-width: none;

    padding: 0;
  }

  .hero,
  .page-hero,
  .bertha-thanks-card,
  .pricing-feature--bertha,
  .pricing-delivery-card,
  .reviews-page-summary,
  .reviews-carousel .review-card-featured {
    background: #fff !important;
    color: #000 !important;

    border: 1px solid #000;

    box-shadow: none !important;
  }

  .hero h1,
  .page-hero h1,
  .bertha-thanks h2,
  .pricing-feature--bertha h2,
  .pricing-delivery-card h2,
  .reviews-carousel .review-card-featured blockquote {
    color: #000 !important;
  }

}


/* =========================================================
   32. BERTHA COLLAPSIBLE CARD
   ========================================================= */

/*
   CLOSED
   -------
   Eyebrow
   Heading
   Arrow

   OPEN
   ----
   The same brown card expands downward and reveals:
   Story
   Pricing
   Bertha
   Note
   Buttons
   Extra links

   The <summary> contains ONLY the closed-state content.
*/


/* =========================================================
   MAIN DETAILS CARD
   ========================================================= */

.bertha-dropdown {
  position: relative;

  display: block;

  width: 100%;
  margin: 0;

  overflow: hidden;

  background: var(--brown);
  color: var(--off-white);

  border-radius: var(--radius-lg);
}


/* =========================================================
   CLOSED / ALWAYS-VISIBLE SUMMARY
   ========================================================= */

.bertha-dropdown > .bertha-dropdown-summary {
  position: relative;
  z-index: 3;

  display: block;

  width: 100%;

  margin: 0;
  padding: 46px 76px 46px 48px;

  background: transparent;
  color: var(--off-white);

  border: 0;

  list-style: none;
  text-align: center;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


/* Remove native disclosure triangle */

.bertha-dropdown > .bertha-dropdown-summary::-webkit-details-marker {
  display: none;
}

.bertha-dropdown > .bertha-dropdown-summary::marker {
  display: none;
  content: "";
}


/* =========================================================
   SUMMARY INNER CONTENT
   ========================================================= */

.bertha-dropdown-summary-content {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-width: 940px;

  margin: 0 auto;
}


/* =========================================================
   CLOSED EYEBROW
   ========================================================= */

.bertha-dropdown-summary .eyebrow {
  display: inline-block;

  margin: 0 0 12px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}


/* =========================================================
   CLOSED HEADING
   ========================================================= */

.bertha-dropdown-summary h2 {
  margin: 0;

  color: var(--off-white);

  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;

  transition: color .18s ease;
}

.bertha-dropdown-summary:hover h2 {
  color: var(--gold-soft);
}


/* =========================================================
   CUSTOM ARROW
   ========================================================= */

.bertha-dropdown-summary::after {
  content: "\2304";

  position: absolute;

  top: 50%;
  right: 30px;
  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: var(--gold);

  font-family: var(--font-body);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;

  pointer-events: none;

  transform: translateY(-55%);

  transition:
    transform .22s ease,
    color .18s ease;
}


/* Arrow flips when open */

.bertha-dropdown[open] > .bertha-dropdown-summary::after {
  color: var(--pink);

  transform:
    translateY(-45%)
    rotate(180deg);
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

.bertha-dropdown > .bertha-dropdown-summary:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: -8px;

  border-radius: var(--radius-lg);
}


/* =========================================================
   CRITICAL CLOSED-STATE RULE
   ========================================================= */

/*
   The expanded content must never participate in layout
   while <details> is closed.

   This also protects the component from older Bertha rules.
*/

.bertha-dropdown:not([open]) > .bertha-dropdown-content {
  display: none !important;
}


/* =========================================================
   EXPANDED CONTENT
   ========================================================= */

.bertha-dropdown[open] > .bertha-dropdown-content {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;

  margin: 0;

  padding: 4px 48px 58px;

  background: transparent;
  color: var(--off-white);

  animation: berthaReveal .24s ease both;
}


/* =========================================================
   EXPANDED INNER WRAPPER
   ========================================================= */

.bertha-dropdown-content > .bertha-thanks-content,
.bertha-dropdown-content .bertha-thanks-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 940px;

  margin: 0 auto;
}


/* =========================================================
   STORY
   ========================================================= */

.bertha-dropdown-content .bertha-summary-lead {
  display: block;

  max-width: 760px;

  margin: 0 auto 44px;

  color: var(--gold-soft);

  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

.bertha-dropdown-content .bertha-summary-lead strong {
  color: var(--off-white);
}

.bertha-dropdown-content .bertha-summary-lead i {
  color: var(--pink);

  font-family: var(--font-display);
  font-style: italic;
}


/* =========================================================
   PRICING INTRO
   ========================================================= */

.bertha-dropdown-content .bertha-lead {
  max-width: 760px;

  margin: 0 auto 28px;

  color: var(--gold-soft);

  font-size: 1.05rem;
  text-align: center;
}


/* =========================================================
   PRICING GRID
   ========================================================= */

.bertha-dropdown-content .bertha-prices {
  display: grid;

  grid-template-columns:
    minmax(240px, 285px)
    minmax(220px, 260px)
    minmax(240px, 285px);

  align-items: center;
  justify-content: center;

  gap: 26px;

  width: 100%;

  margin: 28px auto 36px;
}


/* =========================================================
   PRICE CARDS
   ========================================================= */

.bertha-dropdown-content .bertha-price {
  position: relative;
  z-index: 2;

  width: 100%;

  padding: 28px 24px;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--gold);
  border-radius: var(--radius-md);

  box-shadow: 6px 6px 0 var(--pink);

  text-align: center;
}

.bertha-dropdown-content .bertha-price-label {
  display: block;

  margin-bottom: 9px;

  font-family: var(--font-tag);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bertha-dropdown-content .bertha-price strong {
  display: block;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
}


/* =========================================================
   BERTHA MASCOT
   ========================================================= */

.bertha-dropdown-content .bertha-price-mascot {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  margin: 0;
  padding: 0;

  pointer-events: none;
}

.bertha-dropdown-content .bertha-price-mascot img {
  display: block;

  width: 250px;
  max-width: 100%;
  height: auto;

  margin: 0 auto;

  object-fit: contain;

  filter:
    drop-shadow(0 9px 8px rgba(35, 12, 2, .28));
}


/* =========================================================
   NOTE
   ========================================================= */

.bertha-dropdown-content .bertha-note {
  max-width: 720px;

  margin: 0 auto 28px;

  color: var(--off-white);

  text-align: center;
}


/* =========================================================
   PRIMARY ACTIONS
   ========================================================= */

.bertha-dropdown-content .hero-actions {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  width: min(100%, 720px);

  margin-left: auto;
  margin-right: auto;
}

.bertha-dropdown-content .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  text-align: center;
}

.bertha-dropdown-content .btn-primary,
.bertha-dropdown-content .btn-gold {
  box-shadow: 4px 4px 0 var(--brown-dark);
}


/* =========================================================
   EXTRA LINKS
   ========================================================= */

.bertha-dropdown-content .bertha-extra-links {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;

  gap: 16px;

  width: min(100%, 720px);

  margin: 18px auto 0;
}

.bertha-dropdown-content .bertha-extra-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 42px;

  padding: 6px 12px;

  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;

  transition:
    color .15s ease,
    transform .15s ease;
}

.bertha-dropdown-content .bertha-extra-links a:first-child {
  color: var(--gold);
}

.bertha-dropdown-content .bertha-extra-links a:first-child:hover {
  color: var(--pink);

  transform: translateY(-2px);
}

.bertha-dropdown-content .bertha-extra-links a:last-child {
  color: var(--pink);
}

.bertha-dropdown-content .bertha-extra-links a:last-child:hover {
  color: var(--gold);

  transform: translateY(-2px);
}

.bertha-dropdown-content .bertha-extra-links a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;

  border-radius: 6px;
}


/* =========================================================
   DECORATIVE SPOTS
   ========================================================= */

.bertha-dropdown .bertha-spot-one,
.bertha-dropdown .bertha-spot-two {
  z-index: 1;

  pointer-events: none;
}


/* =========================================================
   OPENING ANIMATION
   ========================================================= */

@keyframes berthaReveal {

  from {
    opacity: 0;

    transform: translateY(-10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }

}


/* =========================================================
   BERTHA COLLAPSIBLE — TABLET
   ========================================================= */

@media (max-width: 860px) {

  .bertha-dropdown-summary {
    padding: 42px 58px 42px 34px;
  }

  .bertha-dropdown-summary::after {
    right: 24px;
  }

  .bertha-dropdown[open] > .bertha-dropdown-content {
    padding: 4px 34px 50px;
  }

  .bertha-dropdown-content .bertha-summary-lead {
    margin-bottom: 38px;
  }

  .bertha-dropdown-content .bertha-prices {
    grid-template-columns:
      minmax(220px, 280px)
      minmax(200px, 240px)
      minmax(220px, 280px);

    gap: 18px;
  }

  .bertha-dropdown-content .bertha-price {
    padding: 24px 18px;
  }

  .bertha-dropdown-content .bertha-price strong {
    font-size: 2.8rem;
  }

  .bertha-dropdown-content .bertha-price-mascot img {
    width: 220px;
  }

}


/* =========================================================
   BERTHA COLLAPSIBLE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .bertha-dropdown {
    border-radius: 22px;
  }

  .bertha-dropdown-summary {
    padding: 36px 48px 36px 24px;
  }

  .bertha-dropdown-summary .eyebrow {
    margin-bottom: 9px;

    font-size: .7rem;
  }

  .bertha-dropdown-summary h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
  }

  .bertha-dropdown-summary::after {
    right: 14px;

    width: 30px;
    height: 30px;

    font-size: 1.35rem;
  }

  .bertha-dropdown[open] > .bertha-dropdown-content {
    padding: 4px 24px 44px;
  }

  .bertha-dropdown-content .bertha-summary-lead {
    margin-bottom: 34px;

    font-size: .98rem;
  }

  .bertha-dropdown-content .bertha-prices {
    grid-template-columns: 1fr;

    gap: 18px;

    max-width: 360px;
  }

  .bertha-dropdown-content .bertha-prices .bertha-price:first-child {
    order: 1;
  }

  .bertha-dropdown-content .bertha-price-mascot {
    order: 2;
  }

  .bertha-dropdown-content .bertha-prices .bertha-price:last-child {
    order: 3;
  }

  .bertha-dropdown-content .bertha-price {
    width: 100%;
  }

  .bertha-dropdown-content .bertha-price-mascot img {
    width: 210px;
  }

  .bertha-dropdown-content .hero-actions {
    grid-template-columns: 1fr;

    max-width: 420px;
  }

  .bertha-dropdown-content .bertha-extra-links {
    grid-template-columns: 1fr;

    max-width: 420px;

    gap: 8px;
  }

  .bertha-dropdown-content .bertha-extra-links a {
    min-height: 38px;

    font-size: .98rem;
  }

}


/* =========================================================
   BERTHA COLLAPSIBLE — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .bertha-dropdown-summary {
    padding: 32px 42px 32px 18px;
  }

  .bertha-dropdown-summary h2 {
    font-size: clamp(1.65rem, 8vw, 2.1rem);
  }

  .bertha-dropdown-summary::after {
    right: 10px;
  }

  .bertha-dropdown[open] > .bertha-dropdown-content {
    padding: 4px 18px 38px;
  }

  .bertha-dropdown-content .bertha-summary-lead {
    margin-bottom: 30px;

    font-size: .95rem;
  }

  .bertha-dropdown-content .bertha-price {
    padding: 22px 18px;
  }

  .bertha-dropdown-content .bertha-price strong {
    font-size: 2.7rem;
  }

  .bertha-dropdown-content .bertha-price-mascot img {
    width: 185px;
  }

  .bertha-dropdown-content .bertha-note {
    font-size: .92rem;
  }

}


/* =========================================================
   BERTHA COLLAPSIBLE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .bertha-dropdown-content .bertha-price-mascot img {
    width: 165px;
  }

}

/* =========================================================
   33. FINAL SAFETY / LAYOUT FIXES
   ========================================================= */

/*
   Prevent long text or controls from forcing horizontal
   overflow on narrow devices.
*/

.cookie-card,
.pack-card,
.catalog-card,
.flavor-catalog-card,
.review-card,
.reviews-page-card,
.bertha-thanks-card,
.pricing-route-card,
.pricing-mini-card,
.custom-price-piece {
  min-width: 0;
}

.review-card blockquote,
.reviews-page-card blockquote,
.cookie-card p,
.pack-card p,
.catalog-card p,
.flavor-catalog-card p,
.bertha-thanks p,
.pricing-route-card p {
  overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   Prevent accidental horizontal page scrolling
   --------------------------------------------------------- */

html,
body {
  max-width: 100%;

  overflow-x: hidden;
}


/* ---------------------------------------------------------
   Hide explicitly hidden catalog/review elements
   --------------------------------------------------------- */

[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   Accessible clickable cards
   --------------------------------------------------------- */

.cookie-card-link,
.pack-card,
.catalog-card,
.reviews-carousel .review-card {
  -webkit-tap-highlight-color: transparent;
}


/* ---------------------------------------------------------
   Ensure SVG icons inherit their intended size
   --------------------------------------------------------- */

svg {
  max-width: 100%;
}

/* =========================================================
   34. INDIVIDUAL COOKIE / FLAVOR PAGES
   ========================================================= */


/* =========================================================
   COOKIE PAGE — BASE
   ========================================================= */

.cookie-profile-page {
  overflow: hidden;
}


/* ---------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------- */

.cookie-breadcrumbs {
  position: relative;
  z-index: 1;

  padding-top: 16px;
  padding-bottom: 16px;

  color: var(--brown-dark);

  font-size: .9rem;
}

.cookie-breadcrumbs::before {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;

  width: 100vw;

  background: var(--gold);

  transform: translateX(-50%);
}

.cookie-breadcrumbs a {
  color: var(--brown);

  font-weight: 700;
}

.cookie-breadcrumbs a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cookie-breadcrumbs span {
  margin: 0 8px;

  opacity: .5;
}

.cookie-breadcrumbs strong {
  color: var(--brown-dark);
}


/* =========================================================
   COOKIE HERO
   ========================================================= */

.cookie-profile-hero {
  position: relative;

  padding: 34px 0 76px;
}


/* ---------------------------------------------------------
   Cookie title above gallery
   --------------------------------------------------------- */

.cookie-hero-heading {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 950px;

  margin: 0 auto 38px;

  text-align: center;
}


.cookie-profile-title {
  margin: 0 0 18px;

  color: var(--brown);

  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.035em;
}


/* ---------------------------------------------------------
   Status pills under title
   --------------------------------------------------------- */

.cookie-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0;
}


.cookie-pill {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  background: var(--pink-soft);
  color: var(--brown-dark);

  border-radius: 999px;

  font-family: var(--font-tag);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.15;
}


.cookie-pill-available {
  background: #e3f1df;
  color: #315a2c;
}


/* ---------------------------------------------------------
   Hero two-column layout
   --------------------------------------------------------- */

.cookie-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);

  align-items: center;

  gap: 58px;
}


/* =========================================================
   HERO IMAGE GALLERY
   ========================================================= */

.cookie-hero-gallery {
  position: relative;

  min-width: 0;

  padding: 14px;

  background: var(--off-white);

  border: 2px solid rgba(122, 47, 0, .12);
  border-radius: 34px;

  box-shadow:
    0 16px 38px rgba(75, 47, 31, .12);
}


.cookie-hero-gallery-track {
  display: flex;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  border-radius: 24px;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;
}

.cookie-hero-gallery-track::-webkit-scrollbar {
  display: none;
}


.cookie-hero-slide {
  flex: 0 0 100%;

  min-width: 100%;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}


.cookie-hero-slide img {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;
  object-position: center;

  border-radius: 24px;
}


/* ---------------------------------------------------------
   Price badge
   --------------------------------------------------------- */

.cookie-hero-price {
  position: absolute;

  top: 28px;
  right: 28px;
  z-index: 4;

  display: grid;
  place-items: center;

  width: 70px;
  height: 70px;

  background: var(--gold);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 50%;

  box-shadow: 3px 3px 0 var(--brown);

  font-family: var(--font-tag);
  font-size: 1.05rem;
  font-weight: 700;
}


/* ---------------------------------------------------------
   Gallery arrows
   --------------------------------------------------------- */

.cookie-gallery-arrow {
  position: absolute;

  top: 50%;
  z-index: 5;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  padding: 0;

  background: rgba(247, 247, 247, .94);
  color: var(--brown);

  border: 2px solid var(--brown);
  border-radius: 50%;

  box-shadow: 3px 3px 0 var(--pink);

  font-family: var(--font-body);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}


.cookie-gallery-arrow:hover {
  background: var(--gold-soft);

  box-shadow: 4px 4px 0 var(--pink);
}


.cookie-gallery-arrow:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}


.cookie-gallery-prev {
  left: 26px;
}


.cookie-gallery-next {
  right: 26px;
}


/* ---------------------------------------------------------
   Gallery dots
   --------------------------------------------------------- */

.cookie-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 13px 0 2px;
}


.cookie-gallery-dot {
  width: 9px;
  height: 9px;

  padding: 0;

  background: #d8c1b4;

  border: 0;
  border-radius: 50%;

  cursor: pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.cookie-gallery-dot:hover {
  background: var(--pink);

  transform: scale(1.2);
}


.cookie-gallery-dot.active,
.cookie-gallery-dot[aria-current="true"] {
  background: var(--brown);

  transform: scale(1.35);
}


.cookie-gallery-dot:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   Gallery hint
   --------------------------------------------------------- */

.cookie-gallery-hint {
  margin: 8px 0 0;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .66rem;
  line-height: 1.35;
  text-align: center;

  opacity: .6;
}


/* =========================================================
   MEET THE COOKIE — HERO CONTENT
   ========================================================= */

.cookie-hero-content {
  min-width: 0;

  text-align: left;
}


.cookie-meet-eyebrow {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}


.cookie-meet-title {
  margin: 0 0 18px;

  color: var(--brown);

  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.08;
}


.cookie-profile-description {
  max-width: 620px;

  margin: 0 0 24px;

  color: var(--black);

  font-size: 1.05rem;
  line-height: 1.75;
}


.cookie-profile-description p {
  margin-bottom: 1em;
}


.cookie-profile-description p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   CLICKABLE HERO REVIEW SUMMARY
   ========================================================= */

.cookie-rating-link {
  display: inline-block;

  margin-bottom: 26px;

  color: inherit;

  border-radius: 14px;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
}


.cookie-rating-link:visited {
  color: inherit;
}


.cookie-rating-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 0;
  padding: 10px 12px;

  border-radius: 14px;

  transition:
    background .15s ease,
    transform .15s ease;
}


.cookie-rating-link:hover .cookie-rating-summary {
  background: var(--gold-soft);

  transform: translateY(-2px);
}


.cookie-rating-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}


.cookie-rating-stars {
  color: var(--brown);

  font-size: 1.05rem;
  letter-spacing: 2px;
}


.cookie-rating-summary strong {
  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .78rem;
  font-weight: 700;
}


.cookie-rating-summary span:not(.cookie-rating-stars):not(.cookie-rating-arrow) {
  color: var(--brown-dark);

  font-size: .86rem;

  opacity: .72;
}


.cookie-rating-arrow {
  margin-left: 2px;

  color: var(--brown);

  font-weight: 800;

  transition: transform .15s ease;
}


.cookie-rating-link:hover .cookie-rating-arrow {
  transform: translateX(4px);
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.cookie-hero-content .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 16px;
}


.cookie-hero-content .btn-secondary {
  color: var(--brown-dark);

  border-color: var(--brown);
}


.cookie-hero-content .btn-secondary:hover {
  background: var(--gold-soft);
}


/* =========================================================
   FLAVOR & TEXTURE — BROWN
   ========================================================= */

.cookie-flavor-notes {
  position: relative;

  padding: 80px 0;

  overflow: hidden;

  background: var(--brown);
  color: var(--off-white);
}


.cookie-flavor-notes .container {
  position: relative;
  z-index: 2;
}


.cookie-flavor-notes::before,
.cookie-flavor-notes::after {
  content: "";

  position: absolute;
  z-index: 0;

  pointer-events: none;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;
}


.cookie-flavor-notes::before {
  width: 165px;
  height: 165px;

  top: -55px;
  right: 5%;

  background: var(--pink);

  opacity: .88;
}


.cookie-flavor-notes::after {
  display: none;
}


/* ---------------------------------------------------------
   Section heading
   --------------------------------------------------------- */

.cookie-flavor-notes .eyebrow {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--gold);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.cookie-flavor-notes .section-head h2 {
  color: var(--off-white);
}


.cookie-flavor-notes .section-head p {
  color: var(--gold-soft);
}


/* ---------------------------------------------------------
   Flavor cards grid
   --------------------------------------------------------- */

.cookie-notes-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;

  margin-top: 35px;
}


/* ---------------------------------------------------------
   Individual flavor cards
   --------------------------------------------------------- */

.cookie-note-card {
  min-width: 0;

  padding: 28px 20px;

  background: var(--cream);

  border-radius: 24px;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .16);

  text-align: center;
}


.cookie-note-icon {
  display: block;

  margin-bottom: 14px;

  font-size: 2rem;
}


.cookie-note-card strong {
  display: block;

  margin-bottom: 5px;

  color: var(--brown-dark);

  font-weight: 800;
}


.cookie-note-card small {
  display: block;

  color: var(--brown-dark);

  opacity: .72;
}

/* =========================================================
   COOKIE DETAILS — PINK
   ========================================================= */

.cookie-stats-section {
  position: relative;

  padding: 80px 0;

  overflow: hidden;

  background: var(--pink);
}


.cookie-stats-section .container {
  position: relative;
  z-index: 2;
}


.cookie-stats-section::before,
.cookie-stats-section::after {
  content: "";

  position: absolute;
  z-index: 0;

  pointer-events: none;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;
}


.cookie-stats-section::before {
  display: none;
}


.cookie-stats-section::after {
  width: 130px;
  height: 130px;

  right: -42px;
  bottom: 38px;

  background: transparent;

  border: 3px solid var(--brown);

  opacity: .55;
}


/* ---------------------------------------------------------
   Main details panel
   --------------------------------------------------------- */

.cookie-stats-card {
  padding: 42px;

  background: var(--pink-soft);

  border-radius: 28px;

  box-shadow:
    0 14px 35px rgba(75, 47, 31, .12);
}


.cookie-stats-card .section-head {
  margin-bottom: 34px;
}


/* ---------------------------------------------------------
   Details heading
   --------------------------------------------------------- */

.cookie-stats-card .eyebrow {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.cookie-stats-card .section-head h2 {
  color: var(--brown);
}


.cookie-stats-card .section-head p {
  color: var(--brown-dark);
}


/* ---------------------------------------------------------
   Details grid
   --------------------------------------------------------- */

.cookie-stats-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}


/* ---------------------------------------------------------
   Individual detail cards
   --------------------------------------------------------- */

.cookie-stat {
  min-width: 0;

  padding: 24px;

  background: var(--cream);

  border-radius: 20px;

  box-shadow:
    0 7px 18px rgba(75, 47, 31, .07);
}


.cookie-stat-label {
  display: block;

  margin-bottom: 8px;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;

  opacity: .7;
}


.cookie-stat-value {
  display: block;

  color: var(--brown-dark);

  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   INGREDIENTS & ALLERGENS
   ========================================================= */

.cookie-ingredients-section {
  position: relative;

  padding: 80px 0;

  overflow: hidden;

  background: var(--gold);
}


.cookie-ingredients-section .container {
  position: relative;
  z-index: 2;
}


.cookie-ingredients-section::before,
.cookie-ingredients-section::after {
  content: "";

  position: absolute;
  z-index: 0;

  pointer-events: none;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;
}


.cookie-ingredients-section::before {
  width: 150px;
  height: 150px;

  top: 45px;
  right: -50px;

  background: var(--pink);

  opacity: .72;
}


.cookie-ingredients-section::after {
  width: 125px;
  height: 125px;

  left: -48px;
  bottom: 42px;

  background: transparent;

  border: 3px solid var(--brown);

  opacity: .55;
}


.cookie-ingredients-section .eyebrow {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.cookie-ingredients-card {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(260px, .95fr);

  grid-template-areas:
    "ingredients contains"
    "ingredients weight";

  align-items: stretch;

  gap: 20px;

  margin-top: 34px;
}


.cookie-ingredients-main {
  grid-area: ingredients;
}


.cookie-allergens {
  grid-area: contains;
}


.cookie-weight {
  grid-area: weight;
}


.cookie-ingredients-main,
.cookie-allergens,
.cookie-weight {
  min-width: 0;

  padding: 28px;

  background: var(--cream);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 24px;

  box-shadow:
    5px 5px 0 rgba(255, 153, 216, .9);

  text-align: center;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.cookie-ingredients-main {
  padding: 34px 32px;

  background: var(--cream);

  box-shadow:
    7px 7px 0 var(--pink);
}

.cookie-ingredients-main h3 {
  margin: 0 0 16px;

  color: var(--brown);

  font-size: 1.45rem;
  font-weight: 700;

  text-align: center;
}


.cookie-ingredients-main p {
  margin: 0;

  color: var(--brown-dark);

  font-size: .98rem;
  line-height: 1.75;

  text-align: center;
}


.cookie-allergens .cookie-stat-label,
.cookie-weight .cookie-stat-label {
  margin-bottom: 10px;

  color: var(--brown);

  text-align: center;

  opacity: .72;
}


.cookie-allergens strong,
.cookie-weight strong {
  display: block;

  margin-top: 8px;

  color: var(--brown-dark);

  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.5;

  text-align: center;
}

@media (hover: hover) {

  .cookie-ingredients-main:hover,
  .cookie-allergens:hover,
  .cookie-weight:hover {
    transform: translateY(-3px);

    box-shadow:
      7px 7px 0 var(--pink);
  }

}

/* =========================================================
   COOKIE REVIEWS — HOMEPAGE-STYLE SHELL
   ========================================================= */

.cookie-reviews-section {
  padding: 80px 0;

  background: var(--off-white);
}


/* ---------------------------------------------------------
   Main review shell
   --------------------------------------------------------- */

.cookie-reviews-section .container {
  position: relative;

  padding: 58px 48px 52px;

  overflow: hidden;

  background: var(--cream);

  border: 2px solid var(--brown);
  border-radius: var(--radius-lg);

  box-shadow: 8px 8px 0 var(--pink);
}


/* Keep actual content above decorative spots */

.cookie-reviews-section .container > * {
  position: relative;
  z-index: 2;
}


/* ---------------------------------------------------------
   Decorative OBA spots
   --------------------------------------------------------- */

.cookie-reviews-section .container::before,
.cookie-reviews-section .container::after {
  content: "";

  position: absolute;
  z-index: 0;

  pointer-events: none;

  border-radius:
    62% 38% 55% 45% /
    45% 60% 40% 55%;
}


.cookie-reviews-section .container::before {
  width: 150px;
  height: 150px;

  top: -60px;
  left: -35px;

  background: var(--pink);

  opacity: .72;
}


.cookie-reviews-section .container::after {
  display: none;
}


/* ---------------------------------------------------------
   Reviews heading
   --------------------------------------------------------- */

.cookie-reviews-section .section-head {
  max-width: 760px;

  margin-bottom: 36px;
}


.cookie-reviews-section .eyebrow {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.cookie-reviews-section .section-head h2 {
  color: var(--brown);

  font-size: clamp(2rem, 4vw, 3rem);
}


.cookie-reviews-section .section-head p {
  color: var(--brown-dark);
}


/* ---------------------------------------------------------
   Review summary card
   --------------------------------------------------------- */

.cookie-review-summary-card {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 30px;

  margin-top: 32px;
  padding: 34px;

  background: var(--off-white);

  border: 2px solid var(--brown);
  border-radius: 26px;

  box-shadow: 5px 5px 0 var(--pink);
}


/* ---------------------------------------------------------
   Review score
   --------------------------------------------------------- */

.cookie-review-number {
  color: var(--brown-dark);

  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
}


.cookie-review-details .cookie-rating-stars {
  display: block;

  margin-bottom: 6px;

  color: var(--gold);

  font-size: 1.15rem;
  letter-spacing: .04em;

  text-shadow:
    1px 0 var(--brown),
    -1px 0 var(--brown),
    0 1px var(--brown),
    0 -1px var(--brown);
}


.cookie-review-details p {
  margin: 0;

  color: var(--brown-dark);

  opacity: .75;
}


/* ---------------------------------------------------------
   Review button
   --------------------------------------------------------- */

.cookie-review-summary-card .btn-secondary {
  background: var(--gold);
  color: var(--brown-dark);

  border-color: var(--brown);

  box-shadow: 4px 4px 0 var(--brown);
}


.cookie-review-summary-card .btn-secondary:hover {
  background: var(--pink);

  box-shadow: 6px 6px 0 var(--brown);
}

/* =========================================================
   RELATED COOKIES
   ========================================================= */

.related-cookies-section {
  padding: 80px 0;
}


.related-cookies-section .eyebrow {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--brown);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


.related-cookie-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 34px;
}


.related-cookie-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  background: var(--off-white);
  color: var(--brown-dark);

  border: 2px solid var(--brown);
  border-radius: 24px;

  box-shadow:
    0 10px 28px rgba(75, 47, 31, .09);

  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.related-cookie-card:visited {
  color: var(--brown-dark);
}


.related-cookie-card:hover {
  color: var(--brown-dark);

  transform: translateY(-4px);

  box-shadow: 7px 7px 0 var(--pink);
}


.related-cookie-card:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 4px;
}


.related-cookie-card img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  transition: transform .3s ease;
}


.related-cookie-card:hover img {
  transform: scale(1.035);
}


.related-cookie-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  padding: 22px;
}


.related-cookie-body h3 {
  margin: 0 0 8px;
}


.related-cookie-body p {
  flex: 1 1 auto;

  margin: 0 0 12px;

  color: var(--brown-dark);

  font-size: .93rem;
  line-height: 1.55;
}


.related-cookie-link {
  display: inline-flex;

  margin-top: auto;

  color: var(--brown);

  font-size: .9rem;
  font-weight: 800;

  transition: transform .15s ease;
}


.related-cookie-card:hover .related-cookie-link {
  transform: translateX(5px);
}

/* =========================================================
   REVIEW → RELATED COOKIES SPACING
   ========================================================= */

.cookie-reviews-section {
  padding-bottom: 35px;
}

.related-cookies-section {
  padding-top: 45px;
}

/* =========================================================
   GIRAFFE PACK CTA
   ========================================================= */

.flavor-pack-cta {
  padding: 80px 0;
}


.flavor-pack-cta .eyebrow {
  display: inline-block;

  margin-bottom: 8px;

  color: var(--brown-dark);

  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}


/* =========================================================
   INDIVIDUAL COOKIE PAGE — TABLET
   ========================================================= */

@media (max-width: 900px) {

  .cookie-profile-hero {
    padding-top: 30px;
  }


  .cookie-hero-heading {
    margin-bottom: 30px;

    text-align: center;
  }


  .cookie-status-row {
    justify-content: center;
  }


  .cookie-hero-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .cookie-hero-gallery {
    width: min(100%, 620px);

    margin-left: auto;
    margin-right: auto;
  }


  .cookie-hero-content {
    width: min(100%, 620px);

    margin-left: auto;
    margin-right: auto;

    text-align: left;
  }


  .cookie-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .cookie-notes-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .related-cookie-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .cookie-review-summary-card {
    grid-template-columns: 1fr;

    text-align: center;
  }


  .cookie-review-summary-card .btn {
    justify-self: center;
  }

}


/* =========================================================
   INDIVIDUAL COOKIE PAGE — MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .cookie-breadcrumbs {
    font-size: .8rem;
  }


  .cookie-profile-hero {
    padding-top: 24px;
    padding-bottom: 54px;
  }


  /* -------------------------------------------------------
     Keep cookie name + tags centered on mobile
     ------------------------------------------------------- */

  .cookie-hero-heading {
    margin-bottom: 24px;

    text-align: center;
  }


  .cookie-profile-title {
    margin-bottom: 14px;

    font-size: clamp(2.65rem, 13vw, 4rem);
    line-height: .98;

    text-align: center;
  }


  .cookie-status-row {
    justify-content: center;
  }


  /* -------------------------------------------------------
     Hero layout
     ------------------------------------------------------- */

  .cookie-hero-grid {
    gap: 30px;
  }


  .cookie-hero-gallery {
    padding: 9px;

    border-radius: 27px;
  }


  .cookie-hero-gallery-track,
  .cookie-hero-slide img {
    border-radius: 20px;
  }


  .cookie-hero-price {
    top: 20px;
    right: 20px;

    width: 60px;
    height: 60px;

    font-size: .94rem;
  }


  /*
     Swipe becomes the main gallery control on touch devices.
  */

  .cookie-gallery-arrow {
    display: none;
  }


  .cookie-gallery-hint {
    font-size: .61rem;
  }


  /* -------------------------------------------------------
     Keep Meet the Cookie content left-aligned
     ------------------------------------------------------- */

  .cookie-hero-content {
    text-align: left;
  }


  .cookie-meet-eyebrow,
  .cookie-meet-title,
  .cookie-profile-description {
    text-align: left;
  }


  .cookie-meet-title {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }


  .cookie-profile-description {
    font-size: 1rem;
    line-height: 1.7;
  }


  /* -------------------------------------------------------
     Review link
     ------------------------------------------------------- */

  .cookie-rating-link {
    display: block;

    width: fit-content;
    max-width: 100%;
  }


  .cookie-rating-summary {
    padding-left: 0;
  }


  .cookie-rating-link:hover .cookie-rating-summary {
    background: transparent;

    transform: none;
  }


  /* -------------------------------------------------------
     Hero buttons
     ------------------------------------------------------- */

  .cookie-hero-content .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }


  .cookie-hero-content .hero-actions .btn {
    width: 100%;
  }


  /* -------------------------------------------------------
     Section spacing
     ------------------------------------------------------- */

  .cookie-flavor-notes,
  .cookie-stats-section,
  .cookie-ingredients-section,
  .cookie-reviews-section,
  .related-cookies-section,
  .flavor-pack-cta {
    padding-top: 54px;
    padding-bottom: 54px;
  }


  .cookie-stats-card {
    padding: 28px 20px;
  }


  /* -------------------------------------------------------
     Single-column mobile cards
     ------------------------------------------------------- */

.cookie-stats-grid,
.cookie-notes-grid,
.related-cookie-grid {
  grid-template-columns: 1fr;
}


.cookie-ingredients-card {
  grid-template-columns: 1fr;

  grid-template-areas:
    "ingredients"
    "contains"
    "weight";
}


  .cookie-note-card,
  .cookie-stat,
  .cookie-ingredients-main,
  .cookie-allergens,
  .cookie-weight {
    padding: 22px 20px;
  }


  .cookie-review-summary-card {
    padding: 28px 20px;
  }


  .cookie-review-number {
    font-size: 3rem;
  }

  /* -------------------------------------------------------
     Homepage-style cookie reviews on mobile
     ------------------------------------------------------- */

  .cookie-reviews-section .container {
    padding: 42px 18px 38px;

    border-radius: 22px;

    box-shadow: 5px 5px 0 var(--pink);
  }


  .cookie-reviews-section .container::before {
    width: 110px;
    height: 110px;

    top: -42px;
    left: -32px;
  }


  .cookie-reviews-section .container::after {
    width: 85px;
    height: 85px;

    right: -24px;
    bottom: -28px;
  }


  .cookie-review-summary-card {
    gap: 18px;

    padding: 28px 20px;

    border-radius: 22px;
  }


  .cookie-review-number {
    font-size: 3rem;
  }


  .cookie-review-summary-card .btn {
    width: 100%;
  }

  /* -------------------------------------------------------
     Decorative cookie-page spots on mobile
     ------------------------------------------------------- */

  .cookie-flavor-notes::before {
    width: 105px;
    height: 105px;

    top: -35px;
    right: -24px;
  }


  .cookie-flavor-notes::after {
    width: 78px;
    height: 78px;

    left: -24px;
    bottom: -20px;
  }


  .cookie-ingredients-section::before {
    width: 95px;
    height: 95px;

    top: 26px;
    right: -42px;
  }


  .cookie-ingredients-section::after {
    width: 82px;
    height: 82px;

    left: -38px;
    bottom: 28px;
  }


  .cookie-stats-section::before {
    width: 95px;
    height: 95px;

    top: -30px;
    left: -24px;
  }


  .cookie-stats-section::after {
    width: 85px;
    height: 85px;

    right: -38px;
    bottom: 25px;
  }

}

/* =========================================================
   INDIVIDUAL COOKIE PAGE — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .cookie-profile-title {
    font-size: 2.5rem;
  }


  .cookie-pill {
    padding: 7px 10px;

    font-size: .61rem;
  }


  .cookie-hero-price {
    width: 54px;
    height: 54px;
  }


  .cookie-meet-title {
    font-size: 1.7rem;
  }


  .cookie-stats-card {
    padding: 24px 16px;
  }


  .cookie-review-summary-card {
    padding-left: 18px;
    padding-right: 18px;
  }

}

/* =========================================================
   HOMEPAGE REVIEWS — FINAL SPACING CLEANUP
   ========================================================= */

/* Less empty space above/below entire review section */
.home-reviews {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Tighten internal review panel */
.reviews-shell {
  padding-top: 56px;
  padding-bottom: 52px;
}

/* Remove gold/yellow review decoration */
.reviews-spot-gold {
  display: none !important;
}

/* Keep pink decoration */
.reviews-spot-pink {
  display: block;
}

@media (max-width: 560px) {

  .home-reviews {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .reviews-shell {
    padding-top: 40px;
    padding-bottom: 38px;
  }

}

/* =========================================================
   END OF OLLY'S BAKED ASSORTMENTS STYLESHEET
   ========================================================= */

/* Longneck account entry */
.nav-longneck a{white-space:nowrap;font-weight:800}