/* ============================================================
   ▶ START: FOUNDATION (MASTER BLOCK)
   ============================================================
   SUMMARY: Site-wide colors, fonts, sizes and shared pieces
   (buttons, eyebrow labels). Change a color here once and it
   updates everywhere.
   INSIDE: FOUNDATION > Tokens · FOUNDATION > Reset ·
           FOUNDATION > Shared
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: FOUNDATION > Tokens
   ------------------------------------------------------------
   SUMMARY: The design system: colors, fonts, spacing, radius.
   ------------------------------------------------------------ */
:root {
  --bg: #fbf8f3; /* warm white page */
  --surface: #f2eadf; /* soft sand panels */
  --card: #f4ede3; /* product / image cards */
  --ink: #1d1610; /* main text */
  --muted: #5f5244; /* secondary text (darker = easier to read) */
  --line: #e9dfd1; /* hairlines */
  --gold: #a57a3e; /* accent */
  --gold-grad: linear-gradient(100deg, #b8893f 0%, #f3d58f 50%, #c4964a 100%);
  --night: #120c07; /* footer / dark panels */
  --espresso: #1d1209; /* header + footer */
  --espresso-2: #2a1b0f; /* lighter espresso for panels */
  --champagne: #f1e4cd; /* warm champagne band */
  --ivory-text: #f3e6cf; /* light text on espresso */
  --gold-light: #f0cf8a; /* gold text on espresso */

  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(
    1.25rem,
    -1.5rem + 7vw,
    7.5rem
  ); /* side breathing room (20px on phones → 120px on big screens) */
  --container: 90rem; /* widest the content gets (1440px) */
  --edge: max(
    var(--gutter),
    (100% - var(--container)) / 2
  ); /* where content starts, so everything lines up with the logo */
  --radius: 1.125rem;
  --nav-h: 4.5rem; /* slim header (72px) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ------------------------------------------------------------
   ■ END: FOUNDATION > Tokens
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOUNDATION > Reset
   ------------------------------------------------------------
   SUMMARY: Clean, zoom-proof starting point for every element.
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px body text */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
ul {
  list-style: none;
}

:focus-visible {
  outline: 0.125rem solid var(--gold);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
}
.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ------------------------------------------------------------
   ■ END: FOUNDATION > Reset
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOUNDATION > Shared
   ------------------------------------------------------------
   SUMMARY: Eyebrow labels and buttons reused in every section.
   ------------------------------------------------------------ */
.eyebrow {
  font: 600 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--light {
  color: #f6dca0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  font: 600 0.9375rem var(--font-body);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn--gold {
  background: var(--gold-grad);
  color: #2a1606;
}
.btn--gold:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.75rem rgba(165, 122, 62, 0.35);
}
/* ------------------------------------------------------------
   ■ END: FOUNDATION > Shared
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: FOUNDATION (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: HEADER (MASTER BLOCK)
   ============================================================
   SUMMARY: Espresso header, LOGO LEFT · MENU RIGHT. The polished
   gold logo owns the left side; the tabs, a fine divider, a
   gold-ringed search icon and ♡ Saved sit together on the right.
   Search opens as a small panel under the bar. No account icon.
   INSIDE: HEADER > Nav · HEADER > Nav > Logo ·
           HEADER > Nav > Shop menu · HEADER > Nav > Search ·
           HEADER > Phone menu · HEADER > Small laptop · HEADER > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Nav
   ------------------------------------------------------------
   SUMMARY: Sticky espresso bar, gold line on top. The logo sits
   left; margin-left: auto on the tabs pushes the whole menu to
   the right. Ivory links in Inter 500 so they read clearly.
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #24170d 0%, var(--espresso) 100%);
  color: var(--ivory-text);
  border-top: 0.1875rem solid transparent;
  border-image: var(--gold-grad) 1;
  box-shadow:
    inset 0 -1px 0 rgba(201, 161, 94, 0.35),
    0 0.5rem 1.5rem rgba(20, 10, 4, 0.18);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--nav-h);
  padding: 0 var(--gutter);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.25rem + 1.9vw, 2.25rem);
  margin-left: auto; /* pushes the menu to the right */
}
.nav__links > li > a,
.nav__shop-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
  font-size: 0.96875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ivory-text);
  white-space: nowrap;
  transition: color 0.2s;
}
.nav__links > li > a::after,
.nav__shop-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1875rem;
  height: 0.125rem;
  border-radius: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}
.nav__links > li > a:hover,
.nav__shop-btn:hover,
.nav__shop-btn[aria-expanded="true"] {
  color: var(--gold-light);
}
.nav__links > li > a:hover::after,
.nav__shop-btn:hover::after,
.nav__shop-btn[aria-expanded="true"]::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__links a[aria-current="page"] {
  font-weight: 600;
  color: var(--gold-light);
}

.nav__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
/* fine gold divider between the tabs and the icons */
.nav__tools::before {
  content: "";
  width: 1px;
  height: 1.375rem;
  margin-right: 1rem;
  background: rgba(201, 161, 94, 0.4);
}

.nav__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--ivory-text);
  transition: background 0.2s;
}
.nav__icon:hover {
  background: rgba(255, 248, 236, 0.08);
}
.nav__icon svg,
.search__btn svg,
.nav__saved svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav__saved {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ivory-text);
  transition:
    background 0.2s,
    color 0.2s;
}
/* Rose heart: on hover (mouse) or tap (phone) the heart fills
   rose and the word turns rose, like "liking" something */
.nav__saved svg {
  transition:
    fill 0.2s,
    stroke 0.2s;
}
.nav__saved:active,
.nav__saved:focus-visible {
  background: rgba(255, 248, 236, 0.08);
  color: #ec6f86;
}
.nav__saved:active svg,
.nav__saved:focus-visible svg {
  fill: #e0526f;
  stroke: #e0526f;
}
@media (hover: hover) {
  .nav__saved:hover {
    background: rgba(255, 248, 236, 0.08);
    color: #ec6f86;
  }
  .nav__saved:hover svg {
    fill: #e0526f;
    stroke: #e0526f;
  }
}

.nav__burger {
  display: none;
}
/* ------------------------------------------------------------
   ■ END: HEADER > Nav
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Nav > Logo
   ------------------------------------------------------------
   SUMMARY: POLISHED GOLD, matched to the real logo. The CC crest
   (polished-gold picture) sits in a bright gold ring with a soft
   glow; CARAVAN & CO is real text with the same light-to-deep
   gold, plus a hairline dark edge under the letters so it pops.
   Text is drawn by the browser, so it stays razor-sharp.
   ------------------------------------------------------------ */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
.nav__crest {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.09375rem #f3d58f,
    0 0 0.875rem rgba(252, 214, 130, 0.18);
}
.nav__crest img {
  width: 2.5rem;
  height: auto;
}
.nav__name {
  font:
    700 1.125rem/1 "Cinzel",
    "Times New Roman",
    serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  /* bright on top, deeper at the bottom, like polished metal */
  background: linear-gradient(
    180deg,
    #fff3c4 0%,
    #fcdd8f 38%,
    #f0c470 62%,
    #c9923e 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
/* ------------------------------------------------------------
   ■ END: HEADER > Nav > Logo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Nav > Shop menu
   ------------------------------------------------------------
   SUMMARY: COMPACT CARD. A 688px espresso card with a WHISPER
   DAMASK background (the gold pattern turned down to 13%, like a
   texture pressed into leather, so the words stay crisp). It drops
   under the menu, lined up with its right edge (same as search):
   a centered "◆ Shop by category ◆" title, 8 categories in 2
   tight columns (gold icon + name + short line), and a FULL
   PHOTO "Shop all products" card on the right, level with the
   categories. Phones use the ☰ menu instead.
   ------------------------------------------------------------ */
.nav__shop {
  position: static; /* the card lines up with the header, not the tab */
}
.nav__shop-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}
.nav__shop-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.shop-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--edge); /* same right edge as the search panel */
  z-index: 60;
  isolation: isolate; /* keeps the pattern layer behind this card's words */
  overflow: hidden; /* the pattern follows the rounded corners */
  width: min(43rem, 100% - var(--gutter) * 2);
  padding: 1.25rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--espresso-2) 0%, #23170c 100%);
  box-shadow:
    0 0 0 1px rgba(201, 161, 94, 0.4),
    0 1.5rem 3rem rgba(10, 5, 2, 0.5);
}
/* Whisper damask: a separate layer, so only the pattern is faded
   and never the words on top of it */
.shop-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(./images/patterns/damask-gold.webp) repeat center top / 13rem
    auto;
  opacity: 0.13;
  pointer-events: none;
}
.shop-menu[hidden] {
  display: none;
} /* keeps it closed until opened */

/* Left: title + categories. Right: the photo card. Both columns
   stretch to the same height, so their tops and bottoms line up. */
.shop-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11.875rem;
  gap: 1.125rem;
}
/* Centered title with a small gold diamond on each side */
.shop-menu__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.125rem 0 0.625rem;
  font-size: 0.6875rem;
}
/* two thin gold hairlines that fade out at their ends */
.shop-menu__label::before,
.shop-menu__label::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 183, 101, 0), #e0b765);
}
.shop-menu__label::after {
  transform: scaleX(-1); /* mirror it, so it fades out to the right */
}

/* 8 categories: 2 tight columns × 4 rows, filled top-to-bottom */
.shop-menu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 0.125rem 0.5rem;
}
.shop-menu__list a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  transition: background 0.2s;
}
.shop-menu__list a:hover,
.shop-menu__list a:focus-visible {
  background: rgba(255, 248, 236, 0.06);
}
.shop-menu__list svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.0625rem;
  fill: none;
  stroke: #e9c57f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-menu__list strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ivory-text);
  transition: color 0.2s;
}
.shop-menu__list a:hover strong {
  color: var(--gold-light);
}
.shop-menu__list a > span {
  min-width: 0; /* lets the text shrink inside the row */
}
.shop-menu__list small {
  display: block;
  margin-top: 0.0625rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #d3c3a7; /* a touch brighter, to read clearly over the damask */
  /* always one line: a too-long description ends in "…" instead of
     wrapping and making its row taller than the others */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Shop all products" card: the photo fills it, with a dark
   fade at the bottom so the words are easy to read */
.shop-menu__feature {
  position: relative;
  display: block;
  min-height: 14.75rem;
  overflow: hidden;
  border-radius: 0.75rem;
}
.shop-menu__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.6s var(--ease);
}
.shop-menu__feature:hover img {
  transform: scale(1.04);
}
.shop-menu__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 94, 0.45);
  /* a deeper dark fade, so the words always read clearly */
  background: linear-gradient(
    0deg,
    rgba(18, 10, 4, 0.97) 0%,
    rgba(18, 10, 4, 0.88) 42%,
    rgba(18, 10, 4, 0.35) 68%,
    rgba(18, 10, 4, 0) 88%
  );
}
.shop-menu__feature-text {
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  gap: 0.375rem;
}
.shop-menu__feature-text .eyebrow {
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.shop-menu__feature-title {
  font: 500 1.1875rem/1.2 var(--font-head);
  color: #fff8ec;
  text-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.6); /* lifts the words off the photo */
}
.shop-menu__feature-title em {
  display: block; /* "one place." always starts its own line */
  font-style: italic;
  color: #f6d891;
}
/* "Shop all products": a small gold pill with crisp black words */
.shop-menu__feature-cta {
  justify-self: start; /* the pill is only as wide as its words */
  display: inline-flex;
  align-items: center;
  justify-content: center; /* words sit in the exact middle */
  min-height: 2.25rem;
  margin-top: 0.375rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--gold-grad);
  font: 600 0.8125rem/1 var(--font-body);
  letter-spacing: 0.01em;
  color: #140d07;
  transition: box-shadow 0.25s var(--ease);
}
.shop-menu__feature:hover .shop-menu__feature-cta {
  box-shadow: 0 0.5rem 1.25rem -0.25rem rgba(224, 183, 101, 0.45);
}
/* ------------------------------------------------------------
   ■ END: HEADER > Nav > Shop menu
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Nav > Search
   ------------------------------------------------------------
   SUMMARY: A gold-ringed search icon. Clicking it opens the
   search box as a small espresso panel under the bar (right
   side on desktop, full width on phones).
   ------------------------------------------------------------ */
.search {
  display: none; /* hidden until the icon opens it */
  align-items: center;
  padding: 0 0.375rem 0 1.25rem;
  border-radius: 999px;
}
.search.is-open {
  display: flex;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--edge); /* lines up with the right edge of the menu */
  width: min(20rem, 100% - var(--gutter) * 2);
  height: 2.75rem;
  background: var(--espresso-2);
  box-shadow:
    inset 0 0 0 1px rgba(212, 173, 106, 0.75),
    0 1rem 2rem rgba(10, 5, 2, 0.35);
}
.search:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--gold-light),
    0 1rem 2rem rgba(10, 5, 2, 0.35);
}
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 1rem; /* 16px+ stops iPhone auto-zoom */
  color: var(--ivory-text);
}
.search__input::placeholder {
  color: #bba88c;
}
.search__btn {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  color: var(--ivory-text);
}
.nav__search-toggle {
  box-shadow: inset 0 0 0 1px rgba(212, 173, 106, 0.6); /* gold ring */
}
.nav__search-toggle[aria-expanded="true"] {
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px var(--gold-light);
}
/* ------------------------------------------------------------
   ■ END: HEADER > Nav > Search
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Phone menu
   ------------------------------------------------------------
   SUMMARY: GOLD COIN GRID. Categories as gold coins (4 across,
   same coin style as the trust card), a "Shop all" link, then
   the main pages as big Playfair rows with a › arrow. Every row
   is at least 56px tall, so it is easy to tap.
   ------------------------------------------------------------ */
.phone-menu {
  max-height: calc(100svh - var(--nav-h));
  overflow-y: auto;
  border-top: 1px solid rgba(201, 161, 94, 0.3);
  padding: 1.5rem var(--gutter) 2rem;
}
.phone-menu > * {
  max-width: 36rem; /* keeps it tidy on tablets */
}
.phone-menu__label {
  margin-bottom: 1rem;
}

/* 8 categories, 4 across */
/* the 8 categories sit on a soft frosted glass panel with a gold edge */
.phone-menu__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 0.5rem;
  padding: 1rem 0.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 236, 200, 0.06);
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.4);
}
.phone-menu__cats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: #ecdfc8;
}
/* each category shows its photo in a circle with a gold ring */
.phone-menu__coin {
  display: block;
  overflow: hidden;
  width: 3.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f1e3cc; /* shows while the photo loads */
  box-shadow:
    0 0 0 2px var(--espresso),
    0 0 0 3px #e0b765;
  transition: transform 0.2s var(--ease);
}
.phone-menu__coin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-menu__cats a:active .phone-menu__coin {
  transform: scale(0.94); /* small "press" feel on tap */
}

.phone-menu__all {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold-light);
}

/* Main pages: big, roomy rows */
.phone-menu__main {
  margin-top: 1.25rem;
  border-top: 1px solid rgba(201, 161, 94, 0.25);
}
.phone-menu__main a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 1px solid rgba(201, 161, 94, 0.18);
  font: 500 1.25rem var(--font-head);
  color: var(--ivory-text);
}
.phone-menu__main a::after {
  content: "›";
  font: 400 1.25rem var(--font-body);
  color: #bba98c;
}
.phone-menu a:hover {
  color: var(--gold-light);
}

/* Very small phones: slightly smaller coins */
@media (max-width: 22.5em) {
  .phone-menu__coin {
    width: 2.875rem;
  }
}
/* PHONE MENU COLORS: a soft warm-sand sheet (not white, not dark)
   with a faint bronze damask under the dark header, so the menu
   clearly stands apart. Two small bronze vines peek in at the
   empty right-hand corners (beside "Shop by category" and
   "Shop all products"), well away from the words. Bold, dark
   words; a light sand card for the category photos. */
.phone-menu {
  position: relative;
  isolation: isolate; /* keeps the damask behind the menu items */
  background:
    url("images/patterns/menu-vine-top.webp") right -2.25rem top -0.75rem /
      8.5rem auto no-repeat local,
    url("images/patterns/menu-vine-mid.webp") right -2rem top 16.5rem / 7rem
      auto no-repeat local,
    linear-gradient(180deg, #e9dcc4, #e2d1b3);
  box-shadow: inset 0 1px 0 #c9a15e; /* fine gold line under the header */
}
.phone-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    18rem auto;
  opacity: 0.12;
  pointer-events: none;
}
.phone-menu__label {
  font-weight: 800;
  color: #5a3a0c; /* darker, so it's easy to read */
}
.phone-menu .phone-menu__cats {
  position: relative;
  z-index: 1; /* sits in front of the corner vines */
  background: #f0e6d4;
  box-shadow:
    inset 0 0 0 1px rgba(184, 137, 63, 0.45),
    0 1rem 2rem -1.5rem rgba(43, 26, 13, 0.35);
}
.phone-menu .phone-menu__cats a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #140d07;
}
.phone-menu .phone-menu__coin {
  box-shadow:
    0 0 0 2px #f0e6d4,
    0 0 0 3px #b8893f;
}
.phone-menu .phone-menu__all {
  font-weight: 700;
  color: #6b4410;
}
/* "Saved items ♥": the heart comes after the words, in red */
.phone-menu__heart {
  margin-left: 0.375rem;
  margin-right: auto; /* stays right after the words, the › stays far right */
  color: #c0392b;
}
.phone-menu .phone-menu__main {
  border-color: rgba(138, 90, 24, 0.25);
}
.phone-menu .phone-menu__main a {
  color: #140d07;
  border-color: rgba(138, 90, 24, 0.2);
}
.phone-menu .phone-menu__main a::after {
  color: #8a5a18;
}
.phone-menu a:hover {
  color: #8a5a18;
}
/* ------------------------------------------------------------
   ■ END: HEADER > Phone menu
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Small laptop  (≤ 75em ≈ 1200px)
   ------------------------------------------------------------
   SUMMARY: Slightly smaller logo, tighter links, the word
   "Saved" hides (the ♡ stays) so it all fits on one line.
   ------------------------------------------------------------ */
@media (max-width: 75em) {
  .nav {
    gap: 1.5rem;
  }
  .nav__links {
    gap: 1.125rem;
  }
  .nav__links > li > a,
  .nav__shop-btn {
    font-size: 0.9375rem;
  }
  .nav__name {
    font-size: 1rem;
    letter-spacing: 0.15em;
  }
  .nav__saved {
    padding: 0;
    width: 2.75rem;
    justify-content: center;
  }
  .nav__saved-text {
    display: none;
  }
}
/* ------------------------------------------------------------
   ■ END: HEADER > Small laptop
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HEADER > Phone  (≤ 64em ≈ 1024px)
   ------------------------------------------------------------
   SUMMARY: Same idea as desktop: logo LEFT, then search, ♡ and
   ☰ on the RIGHT ("order" moves the ☰ to the end without
   changing the HTML). Search opens full width under the bar.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  :root {
    --nav-h: 4.25rem;
  }
  .nav {
    position: relative;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .nav__links {
    display: none;
  }
  .nav__logo {
    margin-right: auto;
    gap: 0.5rem;
    min-width: 0;
  }
  .nav__tools {
    order: 2;
  }
  .nav__tools::before {
    display: none;
  }
  .nav__crest {
    width: 2.625rem;
  }
  .nav__crest img {
    width: 1.875rem;
  }
  .nav__name {
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
  }

  .nav__burger {
    order: 3; /* ☰ sits at the far right */
    flex: none;
    display: grid;
    align-content: center;
    gap: 0.3125rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.6875rem;
  }
  .nav__burger span {
    display: block;
    height: 1.5px;
    background: var(--ivory-text);
    border-radius: 1px;
    transition:
      transform 0.3s var(--ease),
      opacity 0.2s;
  }
  .nav__burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.4375rem) rotate(45deg);
  }
  .nav__burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav__burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  .nav__tools {
    gap: 0;
  }
  .nav__search-toggle {
    box-shadow: none; /* plain icon on phones, saves space */
  }
  .search.is-open {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
}

/* Very small phones (≤ 22.5em ≈ 360px): logo shrinks a touch */
@media (max-width: 22.5em) {
  .nav__burger {
    flex: none;
  }
  .nav__icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .nav__logo {
    gap: 0.4375rem;
  }
  .nav__crest {
    width: 2rem;
  }
  .nav__crest img {
    width: 1.4375rem;
  }
  .nav__name {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
}
/* ------------------------------------------------------------
   ■ END: HEADER > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: HEADER (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: HERO (MASTER BLOCK)
   ============================================================
   SUMMARY: The welcome carousel.
   DESKTOP = GOLDEN THIRD: full 16:9 photo, words in the left
   third over a soft espresso fade (capped so it never gets
   taller than the screen).
   TABLET = GALLERY SPLIT: photo on top melting into espresso,
   words underneath, so the words never cover the photo.
   PHONE = CINEMATIC: a tall photo with the words over a deep
   fade at the bottom.
   INSIDE: HERO > Slides · HERO > Buttons · HERO > Controls ·
           HERO > Phone & tablet · HERO > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: HERO > Slides
   ------------------------------------------------------------ */
.hero {
  position: relative;
  height: clamp(30rem, 56.25vw, 50rem);
  max-height: calc(100svh - var(--nav-h) - 0.1875rem);
  min-height: 30rem;
  overflow: hidden;
  color: #fff8ec;
  background: #3a2614;
}
/* laptops and desktops: show the full 16:9 photo instead of
   squeezing it to the screen height (short laptop screens were
   cropping the photo and pushing the buttons into the slide dots) */
@media (min-width: 64.0625em) {
  .hero {
    max-height: none;
  }
}

.hero__track {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.9s var(--ease),
    visibility 0.9s;
  /* Warm gold placeholder until the photo is added */
  background:
    radial-gradient(
      ellipse 60% 70% at 72% 55%,
      #f3c98a 0%,
      rgba(243, 201, 138, 0) 70%
    ),
    linear-gradient(120deg, #2b1b10 0%, #6b4524 45%, #c88a4c 100%);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  color: transparent;
  transform: scale(1.04);
  transition: transform 7s linear;
}
.hero__slide.is-active .hero__img {
  transform: scale(1);
}
.hero__img.is-missing {
  display: none;
}

/* Espresso fade on the left so the words are always easy to read,
   while the right side of the photo stays bright and clear */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 11, 5, 0.9) 0%,
    rgba(20, 11, 5, 0.74) 28%,
    rgba(20, 11, 5, 0.42) 48%,
    rgba(20, 11, 5, 0) 68%
  );
}

.hero__content {
  position: absolute;
  z-index: 2;
  /* GOLDEN THIRD: the text block sits in the left third of the photo,
     a little in from the logo line, so it never hugs the edge and the
     right two-thirds stay open for your image. */
  left: calc(var(--edge) + clamp(0rem, -1rem + 3vw, 3.5rem));
  top: calc(50% - var(--trust-lift, 0rem) / 2);
  transform: translateY(-50%);
  /* never wider than the dark left part, so words stay off the photo */
  width: min(30rem, 41vw, 100% - var(--edge) * 2);
}
.hero__content > * {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.hero__slide.is-active .hero__content > * {
  opacity: 1;
  transform: none;
}
.hero__slide.is-active .hero__content > :nth-child(2) {
  transition-delay: 0.1s;
}
.hero__slide.is-active .hero__content > :nth-child(3) {
  transition-delay: 0.2s;
}
.hero__slide.is-active .hero__content > :nth-child(4) {
  transition-delay: 0.3s;
}

.hero__title {
  margin: 1.125rem 0 1.25rem;
  font: 500 clamp(2.5rem, 1rem + 2.6vw, 3.75rem)/1.06 var(--font-head);
  letter-spacing: -0.02em;
}
.hero__title em {
  font-style: italic;
  background: linear-gradient(100deg, #e7c27a 0%, #fff0c2 45%, #d9a85a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__text {
  max-width: 30rem;
  margin-bottom: 2rem;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);
  color: #f1e2c9;
}
/* ------------------------------------------------------------
   ■ END: HERO > Slides
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Buttons
   ------------------------------------------------------------
   SUMMARY: Gold main button + a thin ivory outline button
   ("How it works") side by side; they wrap on small screens.
   ------------------------------------------------------------ */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn--line {
  color: #fff8ec;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 215, 0.6);
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.btn--line:hover {
  background: rgba(255, 248, 236, 0.1);
  box-shadow: inset 0 0 0 1px #f3d58f;
}
/* ------------------------------------------------------------
   ■ END: HERO > Buttons
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Controls
   ------------------------------------------------------------ */
.hero__controls {
  position: absolute;
  z-index: 3;
  left: var(--edge);
  right: var(--edge);
  bottom: calc(clamp(1.25rem, 0.5rem + 2vw, 2.25rem) + var(--trust-lift, 0rem));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero__dots {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.hero__dot {
  padding: 0.75rem 0;
}
.hero__dot span {
  position: relative;
  display: block;
  overflow: hidden;
  width: 2.25rem;
  height: 0.1875rem;
  border-radius: 1px;
  background: rgba(255, 248, 236, 0.4);
  transition: width 0.4s var(--ease);
}
.hero__dot.is-active span {
  width: 4.5rem;
}
.hero__dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f3d58f;
  transform-origin: left;
  transform: scaleX(0);
}
.hero__dot.is-active span::after {
  animation: hero-progress var(--slide-time, 7s) linear forwards;
}
.hero.is-paused .hero__dot.is-active span::after {
  animation-play-state: paused;
}
.hero.no-autoplay .hero__dot.is-active span::after {
  animation: none;
  transform: scaleX(1);
}
@keyframes hero-progress {
  to {
    transform: scaleX(1);
  }
}

.hero__count {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f1e2c9;
}

.hero__arrows {
  display: flex;
  gap: 0.625rem;
}
.hero__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 248, 236, 0.55);
  /* soft dark backing so the arrows stay visible on bright photos */
  background: rgba(20, 11, 5, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background 0.25s,
    color 0.25s;
}
.hero__arrow:hover {
  background: #fff8ec;
  color: var(--ink);
}
.hero__arrow svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ------------------------------------------------------------
   ■ END: HERO > Controls
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Phone & tablet  (≤ 64em ≈ 1024px)
   ------------------------------------------------------------
   SUMMARY: GALLERY SPLIT on phones and tablets (same width
   where the header switches to the ☰ menu). Laptops and
   desktops keep the Golden Third and never change.
   The photo sits on top and melts into espresso; the words sit
   underneath on the espresso, so nothing covers the photo.
   HOW IT WORKS: all 3 slides share one grid cell, so the hero
   grows to fit the longest slide (no text ever gets cut off).
   --photo-h = how tall the photo area is.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  .hero {
    --photo-h: min(75vw, 26rem);
    height: auto;
    max-height: none;
    min-height: 0;
    background: var(--espresso);
  }
  .hero__track {
    position: relative;
    display: grid;
  }
  .hero__slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    padding-top: var(--photo-h);
    /* gold placeholder only in the photo area, espresso below */
    background:
      linear-gradient(120deg, #2b1b10 0%, #6b4524 45%, #c88a4c 100%) top / 100%
        var(--photo-h) no-repeat,
      var(--espresso);
  }
  .hero__img {
    inset: 0 0 auto;
    height: var(--photo-h);
  }
  /* soft fade from the photo into the espresso below it */
  .hero__slide::after {
    inset: 0 0 auto;
    height: var(--photo-h);
    background: linear-gradient(
      0deg,
      var(--espresso) 0%,
      rgba(29, 18, 9, 0.55) 16%,
      rgba(29, 18, 9, 0) 42%
    );
  }
  .hero__content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 40rem;
    margin-top: -1.5rem;
    padding: 0 var(--gutter) calc(5.5rem + var(--trust-lift, 0rem));
  }
  .hero__title {
    margin: 0.75rem 0 0.875rem;
    font-size: clamp(2rem, 1.25rem + 3.5vw, 2.75rem);
  }
  .hero__text {
    margin-bottom: 1.5rem;
  }
  .hero__actions .btn {
    min-height: 2.875rem;
    padding: 0 1.375rem;
  }
  .hero__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .hero__dot span {
    width: 1.5rem;
  }
  .hero__dot.is-active span {
    width: 2.75rem;
  }
}
/* ------------------------------------------------------------
   ■ END: HERO > Phone & tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: HERO > Phone  (≤ 47.9375em)
   ------------------------------------------------------------
   SUMMARY: CINEMATIC + CENTERED. On phones each slide shows a
   portrait crop of its photo (index.html loads the "-phone"
   files) and the words sit centered over a deep espresso fade
   at the bottom (like Tesla and Apple). The ← → arrows are
   hidden because phones swipe; the dots and counter sit
   centered. Tablets, laptops and desktops don't change.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .hero {
    --photo-h: min(158vw, 40rem); /* a tall, full-screen photo */
  }
  .hero__slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* words sit at the bottom of the photo */
    min-height: var(--photo-h);
    padding-top: 0;
  }
  /* a deep fade, so the words read clearly over the photo */
  /* the phone photos are already cropped, so keep them centered */
  .hero__img {
    object-position: 50% 50%;
  }
  .hero__slide::after {
    height: var(--photo-h);
    background: linear-gradient(
      0deg,
      rgba(29, 18, 9, 0.98) 0%,
      rgba(29, 18, 9, 0.93) 42%,
      rgba(29, 18, 9, 0.7) 58%,
      rgba(29, 18, 9, 0) 80%
    );
  }
  .hero__content {
    z-index: 2;
    margin-top: 0;
    padding-bottom: calc(4.75rem + var(--trust-lift, 0rem));
    text-align: center;
  }
  /* bright words with a soft shadow, so they read clearly on any photo */
  .hero__content .eyebrow,
  .hero__title,
  .hero__text {
    text-shadow:
      0 0.0625rem 0.125rem rgba(0, 0, 0, 0.6),
      0 0.125rem 1rem rgba(0, 0, 0, 0.55);
  }
  .hero__content .eyebrow {
    color: #f6d891;
  }
  .hero__title {
    font-size: 2.125rem;
    color: #fffaf1;
  }
  /* the gold words: solid bright gold on phones (a gradient plus a
     shadow looks faded on small screens) */
  .hero__title em {
    background: none;
    color: #f6d891;
  }
  .hero__text {
    max-width: 21rem;
    margin-left: auto;
    margin-right: auto;
    color: #fff6e6;
  }
  .hero__actions {
    justify-content: center;
  }
  /* phones swipe, so no arrows; dots and counter centered */
  .hero__arrows {
    display: none;
  }
  .hero__controls {
    justify-content: center;
  }
}
/* ------------------------------------------------------------
   ■ END: HERO > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: HERO (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: TRUST BAR (MASTER BLOCK)
   ============================================================
   SUMMARY: ESPRESSO CARD. A dark espresso card with a polished
   gold edge that overlaps the bottom of the hero, so it stands
   out clearly against the sand section below. Ivory words, gold
   coin icons with ONE bright gold ring. 4 across on desktop,
   2 × 2 on tablets, a clean one-column list on phones.
   INSIDE: TRUST BAR > Card · TRUST BAR > Badges ·
           TRUST BAR > Tablet · TRUST BAR > Phone
   HOW TO EDIT: --trust-lift = how far the card rises into the
   hero. The hero's arrows and dots move up by the same amount
   automatically, so nothing gets covered.
   ============================================================ */
:root {
  --trust-lift: 2.75rem; /* card rises 44px into the hero */
}

/* ------------------------------------------------------------
   ▶ START: TRUST BAR > Card
   ------------------------------------------------------------
   SUMMARY: The card itself, lined up with the logo edge,
   half over the photo and half over the Categories section.
   Espresso inside, polished gold only on the 2px edge.
   ------------------------------------------------------------ */
.trust {
  position: relative;
  z-index: 3; /* sits on top of the hero photo */
  scroll-margin-top: 6rem; /* "How it works" stops below the menu bar */
  margin-top: calc(var(--trust-lift) * -1);
  padding: 0 var(--edge);
  /* top part is see-through (over the photo), the rest matches
     the caramel Categories section below, so the card sits on the seam */
  background: linear-gradient(transparent var(--trust-lift), #b88a5a 0);
}
.trust__card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.5rem 0.75rem;
  border-radius: var(--radius);
  /* POLISHED GOLD EDGE: a 2px border filled with the logo's gold
     shimmer (espresso inside, gold gradient only on the edge) */
  border: 0.125rem solid transparent;
  background:
    linear-gradient(180deg, var(--espresso-2) 0%, var(--espresso) 100%)
      padding-box,
    linear-gradient(
        100deg,
        #c9923e 0%,
        #fce3a0 30%,
        #d9a750 55%,
        #fff0c0 78%,
        #c9923e 100%
      )
      border-box;
  box-shadow: 0 1.5rem 2.75rem -1.25rem rgba(20, 10, 4, 0.6);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.25rem 1.25rem;
  border-right: 1px solid rgba(201, 161, 94, 0.3);
}
.trust__item:last-child {
  border-right: 0;
}
.trust__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff3dc;
}
.trust__text {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #efe3cd; /* brighter ivory = easy to read on espresso */
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Card
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TRUST BAR > Badges
   ------------------------------------------------------------
   SUMMARY: ESPRESSO COIN, single ring. A slightly lighter
   espresso coin with a bright gold icon, a thin dark gap, then
   ONE bright gold outer ring.
   ------------------------------------------------------------ */
.trust__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #f6d891; /* icon color: bright gold */
  background: radial-gradient(circle at 35% 30%, #4a3420 0%, #2e1f12 70%);
  box-shadow:
    0 0 0 0.1875rem var(--espresso-2),
    0 0 0 0.28125rem #e9c57f;
}
.trust__badge svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Badges
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TRUST BAR > Tablet  (≤ 64em ≈ 1024px)
   ------------------------------------------------------------
   SUMMARY: 2 × 2 grid so the words never get squeezed.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  .trust__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.5rem;
  }
  .trust__item {
    padding: 1rem 1.25rem;
  }
  .trust__item:nth-child(2n) {
    border-right: 0;
  }
  .trust__item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(201, 161, 94, 0.3);
  }
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TRUST BAR > Phone  (≤ 47.9375em ≈ 767px)
   ------------------------------------------------------------
   SUMMARY: APPLE LIST. On phones the four promises become one
   clean list: badge on the left, title and one line beside
   it, a fine gold hairline between rows (no boxes or grid
   lines). The same list works down to 320px.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  :root {
    --trust-lift: 1.75rem;
  }
  .trust__card {
    display: block; /* one column list */
    padding: 0.375rem 1.125rem;
  }
  .trust__item {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border: 0;
  }
  /* a hairline between rows only */
  .trust__item + .trust__item {
    border-top: 1px solid rgba(224, 183, 101, 0.22);
  }
  .trust__badge {
    width: 2.25rem;
  }
  .trust__badge svg {
    width: 1.0625rem;
    height: 1.0625rem;
  }
  .trust__title {
    font-size: 0.9375rem;
  }
  .trust__text {
    font-size: 0.8125rem;
    color: #cbb592;
  }
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: TRUST BAR (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: SHARED PARTS (MASTER BLOCK)
   ============================================================
   SUMMARY: Pieces every section reuses, so the whole page stays
   consistent: section spacing, headlines, "View all" links,
   product cards, the sideways product row and the affiliate note.
   INSIDE: SHARED PARTS > Section · SHARED PARTS > Product card ·
           SHARED PARTS > Product row · SHARED PARTS > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: SHARED PARTS > Section
   ------------------------------------------------------------
   SUMMARY: Even top/bottom padding, max width, headline styles.
   ------------------------------------------------------------ */
.section {
  padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) var(--gutter);
}
.section > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.section--sand {
  background: var(--surface);
}
.section--lines {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.section__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section__title {
  margin-top: 0.625rem;
  font: 500 clamp(2.125rem, 1.4rem + 2.6vw, 3.625rem)/1.05 var(--font-head);
  letter-spacing: -0.015em;
}
.section__title em {
  font-style: italic;
  color: var(--gold);
}

.link-underline {
  font-weight: 600;
  font-size: 0.9375rem;
  padding-bottom: 0.1875rem;
  border-bottom: 1.5px solid var(--ink);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.link-underline:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.affiliate-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.btn--dark {
  background: var(--ink);
  color: var(--bg);
}
.btn--dark:hover {
  background: #3a2a1c;
}
/* ------------------------------------------------------------
   ■ END: SHARED PARTS > Section
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED PARTS > Split centered header
   ------------------------------------------------------------
   SUMMARY: Used by TODAY'S DEALS and BEST SELLERS. The label
   (with a gold hairline on each side) and the headline sit in
   the center; the buttons sit on the right, lined up with the
   bottom of the headline. Tablets and phones: everything stacks
   in the center. Small phones: no hairlines, so the label fits.
   HOW TO USE: add "section__head--split" next to "section__head".
   ------------------------------------------------------------ */
.section__head--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* empty · headline · buttons */
  align-items: end;
  gap: 1rem 2rem;
}
.section__head--split > div:first-child {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section__head--split > :last-child {
  grid-column: 3;
  justify-self: end;
  margin-bottom: 0.5rem; /* lines the buttons up with the headline */
}
/* "— LABEL —": a short hairline on each side of the label */
.section__head--split .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.section__head--split .eyebrow::before,
.section__head--split .eyebrow::after {
  content: "";
  width: 2.75rem;
  height: 1.5px;
  background: currentColor; /* same color as the label */
  opacity: 0.8;
}
@media (max-width: 64em) {
  .section__head--split {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.875rem;
  }
  .section__head--split > div:first-child,
  .section__head--split > :last-child {
    grid-column: 1;
    justify-self: center;
    margin-bottom: 0;
  }
}
@media (max-width: 47.9375em) {
  .section__head--split .eyebrow {
    gap: 0.625rem;
    letter-spacing: 0.14em; /* keeps the label on one line */
  }
  .section__head--split .eyebrow::before,
  .section__head--split .eyebrow::after {
    width: 1.25rem;
  }
}
/* small phones: drop the hairlines so long labels stay on one line */
@media (max-width: 22.5em) {
  .section__head--split .eyebrow {
    letter-spacing: 0.1em;
  }
  .section__head--split .eyebrow::before,
  .section__head--split .eyebrow::after {
    display: none;
  }
}
/* ------------------------------------------------------------
   ■ END: SHARED PARTS > Split centered header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED PARTS > Product card
   ------------------------------------------------------------
   SUMMARY: Soft rectangle photo (same crop for every product so
   the grid looks tidy), badges, ♡ button, text and store link.
   If a photo is missing, the "coming soon" boutique photo with
   the shiny CC crest shows instead.
   ------------------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius);
  /* the "coming soon" boutique photo (AVIF first, WebP for older browsers) */
  background: #2a1d12 url("./images/products/coming-soon-boutique-600.webp")
    center / cover no-repeat;
  background-image: image-set(
    url("./images/products/coming-soon-boutique-600.avif") type("image/avif"),
    url("./images/products/coming-soon-boutique-600.webp") type("image/webp")
  );
}
/* the shiny Caravan & Co crest, centered on the coming-soon photo */
.card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./images/logo/caravan-and-co-crest-shine-320.webp") center
    48% / 44% auto no-repeat;
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 1.25rem rgba(252, 214, 130, 0.35));
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.card:hover .card__media::before {
  transform: scale(1.04);
}
.card__media img {
  position: relative;
  z-index: 1; /* a real product photo sits on top and covers the placeholder */
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  transition: transform 0.6s var(--ease);
}
.card__media img.is-missing {
  visibility: hidden;
}
.card:hover .card__media img {
  transform: scale(1.04);
}
/* the savings badge and ♡ always sit above the photo */
.card__save,
.card__save-btn {
  z-index: 2;
}

.card__save {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--gold);
  color: #fff;
}

/* ♡ save button: dark espresso circle with a gold heart.
   Clicked (saved): the heart fills red. Click again to unsave. */
.card__save-btn {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(20, 13, 7, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(240, 207, 138, 0.6),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  color: #f0cf8a;
  transition:
    transform 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.card__save-btn:hover {
  transform: scale(1.08);
  color: #ffe3a3;
}
.card__save-btn:focus-visible {
  outline: 2px solid #f0cf8a;
  outline-offset: 2px;
}
.card__save-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.card__save-btn[aria-pressed="true"] {
  color: #e0353f;
  box-shadow:
    inset 0 0 0 1px rgba(224, 53, 63, 0.75),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
}
.card__save-btn[aria-pressed="true"] svg {
  fill: currentColor;
}

.card__meta {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__title {
  margin: 0.375rem 0 0.5rem;
  font: 500 1.375rem/1.2 var(--font-head);
}
.card__title a:hover {
  color: var(--gold);
}
.card__price {
  font-size: 1rem;
}
.card__price strong {
  font-weight: 600;
}
.card__price s {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.card__shop {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold);
}
.card__shop:hover {
  text-decoration: underline;
}
/* ------------------------------------------------------------
   ■ END: SHARED PARTS > Product card
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED PARTS > Product row
   ------------------------------------------------------------
   SUMMARY: Sideways-scrolling row that loops forever (swipe on
   phones, ← → buttons on desktop; script.js > LOOPING ROWS does
   the looping) and a 4-column grid that reflows by itself.
   ------------------------------------------------------------ */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(14rem, 9rem + 10vw, 17.5rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail > * {
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
  .rail {
    scroll-behavior: auto; /* jump instead of glide for people who turn off motion */
  }
}

.rail-nav {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rail-nav .link-underline {
  margin-right: 1rem;
}
.rail-btn {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
  transition:
    background 0.2s,
    box-shadow 0.2s;
}
.rail-btn:hover {
  background: #fff;
  box-shadow: 0 0 0 1px var(--ink);
}
.rail-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.grid-4 {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* ------------------------------------------------------------
   ■ END: SHARED PARTS > Product row
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: SHARED PARTS > Phone  (≤ 47.9375em ≈ 767px)
   ------------------------------------------------------------
   SUMMARY: Smaller cards, 2-column grid, arrows hidden (swipe).
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .rail {
    grid-auto-columns: 72%;
    gap: 1rem;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
  .rail-btn {
    display: none;
  }
  .rail-nav .link-underline {
    margin-right: 0;
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.875rem;
  }
  .card__title {
    font-size: 1.125rem;
  }
  .card__save-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
}
/* ------------------------------------------------------------
   ■ END: SHARED PARTS > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: SHARED PARTS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: CATEGORIES (MASTER BLOCK)
   ============================================================
   SUMMARY: Portrait carousel on a warm champagne background.
   Product photos in polished gold frames, names centered
   underneath. The row glides slowly and loops forever (drag,
   swipe or arrows also work); soft fades show on both sides
   while it loops.
   INSIDE: CATEGORIES > Background & header · CATEGORIES > Cards ·
           CATEGORIES > Drag · CATEGORIES > Arrows · CATEGORIES > Compact ·
           CATEGORIES > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Background & header
   ------------------------------------------------------------
   SUMMARY: CARAMEL DUSK + BRONZE DAMASK. Starts as a deep
   caramel right under the dark hero and trust card, then warms
   into toasted sand, so the page flows from dark to light
   instead of jumping. A very light bronze damask (gold scroll)
   pattern sits on top as a soft texture. Text is near-black
   espresso; the sentence is antique-gold italic serif.
   ------------------------------------------------------------ */
.cats {
  --cats-top: #b88a5a; /* top of the caramel fade (trust card uses it too) */
  position: relative;
  isolation: isolate; /* keeps the pattern layer behind this section only */
  /* two layers: the climbing vine on the RIGHT (a mirror of the
     left vine, started at a different point on the stem so the two
     sides don't look copied; it joins the right vine in TODAY'S
     DEALS at the line), then the caramel */
  background:
    url("images/patterns/vine-tall-bronze-right.webp") right -14rem
      bottom -46rem / 26rem auto repeat-y,
    linear-gradient(
      180deg,
      var(--cats-top) 0%,
      #cfa77a 22%,
      #e2c69f 55%,
      #ead6b6 100%
    );
}
/* The damask texture: a small tile that repeats, shown at 11% */
.cats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.11;
  pointer-events: none;
}
/* The climbing vine, part 2 (bronze on the caramel): carries on from
   TODAY'S DEALS up the left edge and fades out just under the trust
   card. It sits behind the category cards, never on top of them. */
.cats::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/vine-tall-bronze.webp") left -14rem bottom
    0 / 26rem auto repeat-y;
  opacity: 0.36;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4rem);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4rem);
  pointer-events: none;
}
.cats__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #2a1608;
}
.cats__eyebrow::before,
.cats__eyebrow::after {
  content: "";
  width: 2.75rem;
  height: 1.5px;
  background: #2a1608;
}
.cats .section__title {
  font-weight: 600;
  color: #140b04;
}
.cats .section__title em {
  font-weight: 500;
  color: #5a3510;
}
/* the sentence: antique-gold italic serif (dark enough to read) */
.cats .cats__lead {
  max-width: 41.25rem;
  margin-top: 0.875rem;
  font: 500 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.6 var(--font-body);
  color: #3d2508; /* clean upright sans, easy to read on the damask */
}
/* card names and small text, darker and a touch bigger */
/* each category name sits on a small frosted ivory box, so it
   reads clearly over the damask and the vines */
.cats .cats__name {
  display: table; /* the box hugs the words */
  margin: 0.875rem auto 0;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background: rgba(251, 245, 234, 0.8); /* solid enough to read; a live blur here would slow the glide */
  box-shadow: inset 0 0 0 1px rgba(201, 161, 94, 0.45);
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap; /* the name always stays on one line */
  color: #140b04;
}
@media (max-width: 47.9375em) {
  .cats .cats__name {
    font-size: 0.9375rem;
  }
}
.cats .cats__go,
.cats .cats__hint {
  font-weight: 800;
  color: #140b04;
}
.cats .cats__go {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}
.cats .cats__bar {
  background: rgba(42, 22, 8, 0.28);
}
.cats .cats__bar span {
  background: #2a1608;
}
.cats .cats__arrow {
  box-shadow:
    0 0 0 0.1875rem #e2c69f,
    0 0 0 0.28125rem #c9923e,
    0 0.625rem 1.125rem -0.5rem rgba(30, 15, 5, 0.5);
}

/* ------------------------------------------------------------
   ■ END: CATEGORIES > Background & header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Cards
   ------------------------------------------------------------
   SUMMARY: cats__frame-window is the window you look through,
   and cats__track is the belt of cards inside it. Each card =
   gold frame around a 4:5 product photo, then the name and
   "EXPLORE →", both centered under the photo. Without
   JavaScript the window simply scrolls; script.js adds is-belt
   to switch it over to the glide.
   ------------------------------------------------------------ */
.cats__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(12.5rem, 9rem + 7vw, 15rem);
  gap: 1.5rem;
  padding: 0.5rem 0.375rem 1.25rem; /* room for the frame's shadow */
}
.cats__frame-window {
  --fade-l: 0rem; /* script.js turns these on while the row loops */
  --fade-r: 0rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0.375rem;
  scrollbar-width: none; /* hide the scrollbar (Firefox) */
  /* soft fade on the edge(s) where cards are cut off */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),
    transparent 100%
  );
}
.cats__frame-window.can-left {
  --fade-l: 3rem;
}
.cats__frame-window.can-right {
  --fade-r: 3rem;
}
.cats__frame-window::-webkit-scrollbar {
  display: none; /* hide the scrollbar (Chrome, Safari) */
}
/* The glide: the window stops scrolling and the belt moves instead */
.cats__frame-window.is-belt {
  overflow-x: hidden; /* for older browsers */
  overflow-x: clip;
  scroll-snap-type: none;
}
.cats__frame-window.is-belt .cats__track {
  will-change: transform; /* keeps the belt on the graphics chip */
  touch-action: pan-y; /* up/down still scrolls the page; sideways moves the belt */
}
.cats__track > li {
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
  .cats__frame-window {
    scroll-behavior: auto; /* jump instead of glide for people who turn off motion */
  }
}

.cats__card {
  display: block;
  text-align: center;
}
.cats__frame {
  display: block;
  padding: 0.375rem;
  border-radius: 1.25rem;
  /* dark antique-gold frame (deep bronze to warm gold) */
  background: linear-gradient(
    140deg,
    #6e4a1c 0%,
    #c9963f 28%,
    #8a5f22 52%,
    #e0b765 76%,
    #6e4a1c 100%
  );
  box-shadow: 0 1.125rem 1.875rem -1.125rem rgba(43, 26, 13, 0.55);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.cats__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.9375rem;
  /* a dark edge, then a thin bright gold line around the photo */
  box-shadow:
    0 0 0 2px #3b2510,
    0 0 0 3px #e0b765;
  pointer-events: none; /* lets the row be dragged from anywhere */
}
.cats__card:hover .cats__frame,
.cats__card:focus-visible .cats__frame {
  transform: translateY(-0.375rem);
  box-shadow: 0 1.5rem 2.25rem -1.125rem rgba(43, 26, 13, 0.6);
}
.cats__name {
  display: block;
  margin-top: 1.125rem;
  font: 600 1.3125rem/1.2 var(--font-head);
  color: var(--ink);
}
.cats__go {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a5520;
}
.cats__card:hover .cats__go {
  color: var(--ink);
}
/* ------------------------------------------------------------
   ■ END: CATEGORIES > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Drag
   ------------------------------------------------------------
   SUMMARY: Hand cursor on desktop. While dragging, the glide
   pauses so the row follows the mouse exactly.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .cats__track {
    cursor: grab;
  }
}
.cats__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.cats__track.is-dragging .cats__frame {
  transform: none; /* no hover lift while dragging */
}
.cats__hint {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6f5a42;
}
/* ------------------------------------------------------------
   ■ END: CATEGORIES > Drag
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Arrows
   ------------------------------------------------------------
   SUMMARY: Espresso coins with one gold ring (same family as
   the trust badges), and a thin line showing how far along
   the row you are.
   ------------------------------------------------------------ */
.cats__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.375rem;
  margin-top: 1.5rem;
}
.cats__arrow {
  display: grid;
  place-items: center;
  width: 3.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #f6d891;
  background: radial-gradient(circle at 35% 30%, #4a3420 0%, #2e1f12 70%);
  box-shadow:
    0 0 0 0.1875rem #efe1c8,
    0 0 0 0.28125rem #c9923e,
    0 0.625rem 1.125rem -0.5rem rgba(30, 15, 5, 0.5);
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s;
}
.cats__arrow:hover {
  transform: translateY(-0.125rem);
}
.cats__arrow svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cats__bar {
  position: relative;
  width: 11.25rem;
  height: 0.125rem;
  overflow: hidden;
  border-radius: 1px;
  background: rgba(138, 99, 38, 0.25);
}
.cats__bar span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30%; /* script.js sets the real size and position */
  border-radius: 1px;
  background: #8a6326;
}
/* ------------------------------------------------------------
   ■ END: CATEGORIES > Arrows
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Compact  (≥ 48em ≈ 768px: tablets + desktop)
   ------------------------------------------------------------
   SUMMARY: Makes the section about 22% shorter on bigger
   screens: less padding, a smaller title, 190px cards, tighter
   gaps and smaller arrows. 6 cards fit on a laptop instead of 4.
   Phones are untouched (they keep the Phone rules below).
   ------------------------------------------------------------ */
@media (min-width: 48em) {
  .cats {
    padding-block: clamp(2.5rem, 1.75rem + 1.5vw, 3.25rem);
  }
  .cats .section__head {
    margin-bottom: 1.75rem;
  }
  .cats .section__title {
    margin-top: 0.5rem;
    font-size: clamp(2.25rem, 1.6rem + 1.5vw, 2.75rem);
  }
  .cats__lead {
    max-width: 40rem;
    margin-top: 0.625rem;
    font-size: 1rem;
  }
  .cats__track {
    grid-auto-columns: 11.875rem; /* 190px cards */
    gap: 1.125rem;
  }
  .cats__name {
    margin-top: 0.75rem;
    font-size: 1.125rem;
  }
  .cats__controls {
    margin-top: 0.75rem;
  }
  .cats__arrow {
    width: 2.75rem;
  }
  .cats__arrow svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .cats__hint {
    margin-top: 0.5rem;
  }
}
/* ------------------------------------------------------------
   ■ END: CATEGORIES > Compact
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CATEGORIES > Phone  (≤ 47.9375em ≈ 767px)
   ------------------------------------------------------------
   SUMMARY: Cards are 62% of the screen so the next one peeks
   in (a hint to swipe). The row runs edge to edge, so no fade
   is needed. "Drag" becomes "Swipe".
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  /* a slimmer right vine (matches Deals) */
  .cats {
    background-position:
      right -9.5rem bottom -28rem,
      0 0;
    background-size:
      16rem auto,
      auto;
  }
  /* a slimmer vine, tucked closer to the edge (matches Deals) */
  .cats::after {
    background-position: left -9.5rem bottom 0;
    background-size: 16rem auto;
  }
  .cats__frame-window {
    margin-inline: calc(var(--gutter) * -1); /* run to the screen edges */
    scroll-padding-inline: var(--gutter);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cats__track {
    grid-auto-columns: 62%;
    gap: 0.875rem;
    padding-inline: var(--gutter);
  }
  .cats__name {
    font-size: 1.1875rem;
  }
  .cats__eyebrow {
    font-size: 0.8125rem;
    gap: 0.625rem;
  }
  .cats__eyebrow::before,
  .cats__eyebrow::after {
    width: 1.5rem;
  }
  .cats__lead {
    font-size: 0.9375rem;
  }
  .cats__bar {
    width: 7.5rem;
  }
  .cats__hint {
    font-size: 0;
  }
  .cats__hint::after {
    content: "Swipe to explore";
    font-size: 0.8125rem;
  }
}
/* ------------------------------------------------------------
   ■ END: CATEGORIES > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: CATEGORIES (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: TODAY'S DEALS (MASTER BLOCK)
   ============================================================
   SUMMARY: MOCHA FRIDAY BANNER, COMPACT. A dark mocha band
   between the caramel Categories above and the champagne Best
   Sellers below. A slim banner counts down to the next Friday
   catalog update; four deal cards with a thin gold border sit
   underneath, words centered, with a sleek gold-hairline "View
   at store" pill. A gold vine climbs each side, joining the
   bronze vines in Categories. Laptops: the button moves under
   the countdown.
   Tablets and phones: the banner stacks and the cards become a
   sideways swipe row.
   INSIDE: TODAY'S DEALS > Band & header ·
           TODAY'S DEALS > Friday banner · TODAY'S DEALS > Cards ·
           TODAY'S DEALS > Laptop · TODAY'S DEALS > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Band & header
   ------------------------------------------------------------ */
.deals {
  position: relative;
  isolation: isolate; /* keeps both patterns behind this section only */
  /* a little less space above and below than other sections */
  padding-top: clamp(2.75rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(2.75rem, 2rem + 2vw, 4rem);
  /* two layers: the climbing vine on the RIGHT (a mirror of the
     left vine, started at a different point on the stem; it joins
     the right vine in CATEGORIES at the line), then the mocha glow */
  background:
    url("images/patterns/vine-tall-gold-right.webp") right -14rem top 46rem /
      26rem auto repeat-y,
    radial-gradient(90% 70% at 80% 0%, #3a2716 0%, #24170d 55%, #1a110a 100%);
  color: #fff3dc;
}
.deals::before,
.deals::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* the faint gold damask, same as Gift Guides */
.deals::before {
  background: url("images/patterns/damask-gold.webp") repeat center top / 20rem
    auto;
  opacity: 0.06;
}
/* The climbing vine, part 1 (gold on the dark band): starts at the
   bottom-left and climbs up the left edge. Part 2 (bronze) carries
   on up through CATEGORIES. The tile repeats with no seam, so the
   two parts always join at the line between the sections. */
.deals::after {
  background: url("images/patterns/vine-tall-gold.webp") left -14rem top 0 /
    26rem auto repeat-y;
  opacity: 0.3;
}
.deals .section__head {
  margin-bottom: 1.25rem;
}
.deals .eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #e9c27a;
}
.deals .section__title {
  color: #fff8ec;
}
.deals .section__title em {
  color: #f0cf8a;
}
/* "Shop all deals": a dark pill with a bright gold ring, so it
   stands out on the mocha band */
.deals .link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background: #120b06;
  box-shadow:
    inset 0 0 0 1.5px #e0b765,
    0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.6);
  color: #f6d891;
  font-size: 0.875rem;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}
.deals .link-underline:hover {
  background: #f0cf8a;
  color: #1d1209;
}
.deals .link-underline:focus-visible {
  outline: 2px solid #f0cf8a;
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Band & header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Friday tile
   ------------------------------------------------------------
   SUMMARY: The Friday tile is the FIRST item in the row, a
   little wider than a product card. Everything is centered:
   label, a big two-line headline, the gold next-drop date, a
   see-through glass countdown, one quiet line, then a gold
   button with a dark arrow chip. The headline sits at the top,
   the button at the bottom, and the countdown in between, so
   the tile always looks evenly filled.
   ------------------------------------------------------------ */
.deals__layout {
  display: grid;
  grid-template-columns: minmax(15.5rem, 1fr) minmax(0, 4fr); /* tile never narrower than 15.5rem · 4 cards */
  gap: 1rem;
  align-items: stretch; /* the tile is as tall as the cards */
}
.deals__box {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.125rem 1.25rem;
  border-radius: 1.125rem;
  text-align: center;
  /* the glass tint on a solid mocha base, so the vine stays behind it */
  background:
    linear-gradient(
      100deg,
      rgba(255, 236, 200, 0.07),
      rgba(255, 236, 200, 0.02)
    ),
    #22160c;
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.45);
  position: relative;
  isolation: isolate; /* keeps the pattern layers behind the words */
}
/* a faint gold damask over the whole tile, and one gold vine
   climbing up the left side. Both sit BEHIND the words. */
.deals__box::before,
.deals__box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit; /* the pattern follows the rounded corners */
  pointer-events: none;
}
.deals__box::before {
  background: url("images/patterns/damask-gold.webp") repeat center top / 11rem
    auto;
  opacity: 0.13;
}
.deals__box::after {
  background: url("images/patterns/vine-tall-gold.webp") left -4.5rem
    bottom -3rem / 9rem auto no-repeat;
  opacity: 0.34;
}
.deals__intro {
  margin-bottom: 0;
}
.deals__box .eyebrow--light {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  color: #f0cf8a;
}
.deals__big {
  margin-top: 0.625rem;
  font: 500 2.375rem / 1.1 var(--font-head);
  color: #fff8ec;
}
.deals__big em {
  font-style: italic;
  color: #f0cf8a;
}
.deals__text {
  margin: auto 0; /* equal space above and below: centered between title and timer */
}
/* "—— NEXT DROP ——" above the date, with a gold hairline on each side */
.deals__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 0.25rem;
  font: 700 0.6875rem var(--font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cbb592;
}
.deals__label::before,
.deals__label::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: rgba(224, 183, 101, 0.6);
}
.deals__text time {
  font: 500 1.375rem var(--font-head);
  color: #f6d891;
}

/* the see-through glass countdown: Hours : Minutes : Seconds */
.countdown {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  padding: 0.75rem 0.5rem;
  border-radius: 0.875rem;
  background: rgba(255, 236, 200, 0.06);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  backdrop-filter: blur(8px); /* blurs the vine behind the glass */
  box-shadow:
    inset 0 0 0 1px rgba(224, 183, 101, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08); /* a thin shine on the top edge */
}
.countdown > div {
  display: grid;
  justify-items: center;
}
/* the Days box only shows while more than a day is left
   (script.js adds the class "has-days") */
.countdown > div:first-child,
.countdown__colon--days {
  display: none;
}
.countdown.has-days {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.countdown.has-days > div:first-child,
.countdown.has-days .countdown__colon--days {
  display: grid;
}
.countdown > div > span {
  font: 600 1.875rem / 1 var(--font-body);
  color: #fff8ec;
  font-variant-numeric: tabular-nums; /* every digit the same width, so nothing jiggles */
}
/* the seconds in shiny gold: a gold gradient painted inside the numbers */
.countdown [data-cd="s"] {
  background: linear-gradient(
    180deg,
    #fff3c4 0%,
    #f6d891 35%,
    #d9a750 65%,
    #f3d58f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 0.35rem rgba(246, 216, 145, 0.35)); /* a soft glow */
}
.countdown.has-days > div > span {
  font-size: 1.375rem; /* 4 numbers instead of 3 */
}
.countdown__colon {
  padding: 0 0.125rem;
  font: 500 1.5rem / 1.1 var(--font-head);
  color: #e0b765;
}
.countdown.has-days .countdown__colon {
  font-size: 1.125rem;
}
.countdown small {
  margin-top: 0.375rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cbb592;
}
.deals__note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #cbb592;
}

/* "Browse categories →": polished gold with a dark arrow chip */
.deals__box .btn {
  justify-content: center; /* the words sit in the middle */
  margin-top: 1rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
  background: linear-gradient(180deg, #f6d891 0%, #d9a750 55%, #b98633 100%);
  color: #1d1209;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 0.75rem 1.25rem -0.75rem rgba(224, 183, 101, 0.6);
}
.deals__box .btn:hover {
  filter: brightness(1.06);
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Friday tile
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Cards
   ------------------------------------------------------------
   SUMMARY: Four cards in a thin gold border on a faint glass
   panel, words centered, light text for the dark band. The
   photo is a little shorter (4:5) to keep the section compact.
   "View at store ↗" is a sleek gold-hairline pill that fills
   with gold on hover.
   ------------------------------------------------------------ */
.deals__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.deals .card {
  align-items: center; /* centers the price and the pill */
  padding: 0.5rem 0.5rem 1rem;
  border-radius: 1.125rem;
  text-align: center;
  /* the glass tint on a solid mocha base, so the vine stays behind it */
  background:
    linear-gradient(rgba(255, 236, 200, 0.05), rgba(255, 236, 200, 0.05)),
    #20150b;
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.4);
}
.deals .card__media {
  align-self: stretch; /* the photo stays full width */
  aspect-ratio: 1 / 1; /* square: shorter photos, a more compact section */
  border-radius: 0.75rem;
  /* outer gold line + soft shadow (the same double frame as Best Sellers) */
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 1rem 1.5rem -1rem rgba(0, 0, 0, 0.6);
}

.deals .card__meta,
.deals .card__title,
.deals .card__price {
  padding: 0 0.375rem;
}
.deals .card__meta {
  margin-top: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #d9b77a;
}
.deals .card__title {
  margin: 0.25rem 0 0.375rem;
  font-size: 1.0625rem;
}
.deals .card__title a:hover {
  color: #f0cf8a;
}
.deals .card__price {
  margin-bottom: 0.75rem; /* space above the pill */
}
.deals .card__price s {
  color: #a99a85;
}
/* "View at store ↗": a slim gold-hairline pill */
.deals .card__shop {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: center;
  min-height: 2.125rem;
  margin: auto 0 0; /* "auto" on top pushes the pill to the card's bottom, so all four line up */
  padding: 0 0.875rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240, 207, 138, 0.8);
  color: #f6d891;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background 0.2s,
    color 0.2s;
}
.deals .card__shop:hover {
  background: #f0cf8a;
  color: #1d1209;
  text-decoration: none;
}
.deals .card__shop:focus-visible {
  outline: 2px solid #f0cf8a;
  outline-offset: 3px;
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Laptop  (≤ 80em ≈ 1280px)
   ------------------------------------------------------------
   SUMMARY: Laptops and tablets: the Friday tile keeps a fixed
   width on the left and the cards become a sideways swipe row
   next to it, so nothing gets squeezed.
   ------------------------------------------------------------ */
@media (max-width: 80em) {
  .deals__layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
  }
  .deals__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 14rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
  .deals__cards::-webkit-scrollbar {
    display: none;
  }
  .deals__cards > * {
    scroll-snap-align: start;
  }
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Laptop
   ------------------------------------------------------------ */

/* the "This week's picks" label is for phones only */
.deals__picks {
  display: none;
}
/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Phone  (≤ 47.9375em)
   ------------------------------------------------------------
   SUMMARY: ONE FLOWING SECTION on phones. The Friday tile loses
   its box and becomes the intro (label, title, date, countdown,
   one line); a gold hairline then leads into "This week's
   picks" and the cards swipe underneath (78% wide, so the next
   one peeks in). The store pill gets a bigger tap area and both
   vines get slimmer.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .deals {
    background-position:
      right -9.5rem top 28rem,
      0 0;
    background-size:
      16rem auto,
      auto;
  }
  .deals__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the Friday tile becomes the section's intro: no box */
  .deals__box {
    padding: 0.5rem 0 0;
    background: none;
    box-shadow: none;
  }
  .deals__box::before,
  .deals__box::after {
    display: none;
  }
  .deals__box .btn {
    display: none; /* the categories are one tap away in the menu */
  }
  .deals__note {
    margin-bottom: 0;
  }
  /* "THIS WEEK'S PICKS ········ Swipe →" under a gold hairline */
  .deals__picks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0 0.875rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(224, 183, 101, 0.35);
    font: 800 0.75rem var(--font-body);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f0cf8a;
  }
  .deals__picks span {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    color: #cbb592;
  }
  .deals__text {
    margin: 1.25rem 0; /* phones have no spare height, so set the gap */
  }
  /* a slimmer vine, tucked closer to the edge (matches Categories) */
  .deals::after {
    background-position: left -9.5rem top 0;
    background-size: 16rem auto;
  }
  .deals__cards {
    grid-auto-columns: 78%;
    gap: 1rem;
  }
  .deals .card__shop {
    min-height: 2.5rem; /* a bigger tap target for thumbs */
    padding: 0 1rem;
    font-size: 0.8125rem;
  }
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: TODAY'S DEALS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: BEST SELLERS (MASTER BLOCK)
   ============================================================
   SUMMARY: CHAMPAGNE SILK WALLPAPER + CLEAR GLASS CARDS. A warm
   champagne band with a soft bronze peony wallpaper and a hint
   of the site's damask. Each product sits on a clear glass card
   (the wallpaper still shows through, softly blurred) with its
   words centered. The store link is an espresso pill, like
   "View all", so people know where to click. Phones keep the
   swipe row with smaller flowers.
   INSIDE: BEST SELLERS > Band & patterns · BEST SELLERS > Header ·
           BEST SELLERS > Cards · BEST SELLERS > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: BEST SELLERS > Band & patterns
   ------------------------------------------------------------ */
.best {
  position: relative;
  isolation: isolate; /* keeps both patterns behind this section only */
  background: linear-gradient(180deg, #f3e6cf 0%, #e7d3b2 100%);
}
/* a hint of the same damask used across the site */
.best::before,
.best::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.best::before {
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.04;
}
/* the peony wallpaper: one tile that repeats without seams */
.best::after {
  background: url("images/patterns/floral-peony-tile.webp") repeat center top /
    40rem auto;
  opacity: 0.16;
}
/* ------------------------------------------------------------
   ■ END: BEST SELLERS > Band & patterns
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BEST SELLERS > Header
   ------------------------------------------------------------ */
.best .eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #3d2508; /* darker, so it reads clearly on the flowers */
}
.best .section__title {
  color: #140d07;
}
.best .section__title em {
  color: #8a5a18;
}
/* "View all": a solid espresso pill so it's easy to spot */
.best .rail-nav {
  gap: 0.5rem;
}
.best .rail-nav .link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem; /* a little smaller and sleeker */
  margin-right: 0.5rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  border: 0;
  border-radius: 999px;
  background: #1d1209;
  color: #f6d891;
  white-space: nowrap;
}
.best .rail-nav .link-underline:hover {
  background: #3a2a1c;
  color: #fff3dc;
}
.best .rail-nav .link-underline:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 3px;
}
/* ← → arrows: solid espresso circles with a gold ring, like "View all" */
.best .rail-btn {
  width: 2.5rem; /* a little smaller and sleeker */
  height: 2.5rem;
  background: #1d1209;
  color: #f6d891;
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 0.5rem 1rem -0.5rem rgba(26, 17, 10, 0.5);
}
.best .rail-btn:hover {
  background: #3a2a1c;
  color: #fff3dc;
}
.best .rail-btn:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 3px;
}
/* a little room so the gold frame isn't clipped by the row */
.best .rail {
  padding-top: 0.25rem;
  padding-left: 0.25rem;
}
/* ------------------------------------------------------------
   ■ END: BEST SELLERS > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BEST SELLERS > Cards
   ------------------------------------------------------------
   SUMMARY: A clear glass card (soft blur, thin gold line) so the
   wallpaper still shows. The photo keeps its gold double frame.
   Words are centered, with a soft champagne glow behind them so
   they read clearly over the flowers. The store link is an
   espresso pill.
   ------------------------------------------------------------ */
.best .card {
  align-items: center; /* centers the price and the pill */
  padding: 0.5rem 0.5rem 1rem;
  border-radius: 1.25rem;
  text-align: center;
  background: rgba(250, 243, 232, 0.28);
  -webkit-backdrop-filter: blur(3px); /* Safari */
  backdrop-filter: blur(3px); /* softens the flowers behind the words */
  box-shadow:
    inset 0 0 0 1px rgba(201, 161, 94, 0.7),
    0 1.25rem 2rem -1.5rem rgba(43, 26, 13, 0.35);
}
.best .card__media {
  align-self: stretch; /* the photo stays full width */
  border-radius: 0.875rem;
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 1.25rem 2rem -1.5rem rgba(43, 26, 13, 0.55);
}
.best .card__media::after {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  z-index: 1;
  border: 1px solid rgba(240, 207, 138, 0.7);
  border-radius: 0.5rem;
  pointer-events: none;
}
.best .card__meta,
.best .card__title,
.best .card__price {
  padding: 0 0.5rem;
  /* a soft champagne glow, so the words never blend into the pattern */
  text-shadow:
    0 0 0.2rem rgba(250, 243, 232, 0.95),
    0 0 0.9rem rgba(250, 243, 232, 0.9);
}
.best .card__meta {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #4e300a;
}
.best .card__title,
.best .card__price {
  color: #140d07;
}
.best .card__title a:hover {
  color: #8a5a18;
}
.best .card__price {
  margin-bottom: 0.625rem; /* space above the pill */
}
.best .card__price strong {
  font-weight: 700;
}
.best .card__price s {
  color: #5e4a33;
}
/* "View at store ↗": an espresso pill, so it's clearly a button */
.best .card__shop {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: center;
  min-height: 2.5rem; /* easy to tap */
  margin-top: auto; /* pushes every pill to the card's bottom, so they line up */
  padding: 0 1.125rem;
  border-radius: 999px;
  background: #1d1209;
  color: #f6d891;
  font-size: 0.8125rem;
  font-weight: 700;
  transition:
    background 0.2s,
    color 0.2s;
}
.best .card__shop:hover {
  background: #3a2a1c;
  color: #fff3dc;
  text-decoration: none;
}
.best .card__shop:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 3px;
}
/* ------------------------------------------------------------
   ■ END: BEST SELLERS > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BEST SELLERS > Phone  (≤ 47.9375em)
   ------------------------------------------------------------
   SUMMARY: Smaller flowers so a few whole blooms fit on screen.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .best::after {
    background-size: 24rem auto;
  }
}
/* ------------------------------------------------------------
   ■ END: BEST SELLERS > Phone
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: BEST SELLERS > Compact  (all screens)
   ------------------------------------------------------------
   SUMMARY: A shorter section. Less padding top and bottom,
   square photos, narrower cards (a full row of 5 on big
   screens) and slightly smaller words and store pills.
   ------------------------------------------------------------ */
.best.section {
  padding-top: clamp(2.75rem, 2rem + 2vw, 4rem);
  padding-bottom: clamp(2.75rem, 2rem + 2vw, 4rem);
}
.best .section__head {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.best .rail {
  grid-auto-columns: clamp(12.5rem, 8rem + 8vw, 15rem); /* narrower cards */
  gap: 1rem;
}
.best .card {
  padding: 0.4375rem 0.4375rem 0.875rem;
}
.best .card__media {
  aspect-ratio: 1 / 1; /* square photos instead of tall ones */
}
.best .card__meta {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
}
.best .card__title {
  margin: 0.25rem 0 0.375rem;
  font-size: 1.1875rem;
  line-height: 1.15;
}
.best .card__price {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}
.best .card__shop {
  min-height: 2.25rem; /* still easy to tap */
  padding: 0 1rem;
  font-size: 0.75rem;
}
/* ------------------------------------------------------------
   ■ END: BEST SELLERS > Compact
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: BEST SELLERS (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: GIFT GUIDES (MASTER BLOCK)
   ============================================================
   SUMMARY: ESPRESSO GALLERY · DIAMOND CENTERED. A deep espresso
   band with a soft glow and fine gold lines top and bottom (like
   the footer). Centered "◆ Gift guides ◆" title and an italic
   serif line, six photo tiles in gold double frames, then a gold
   outline "Explore all gift guides" button. 6 in a row on
   desktop, 3 × 2 on tablets, a swipe row on phones.
   ============================================================ */
.gifts {
  position: relative;
  /* a little less space above and below than other sections */
  padding-top: clamp(2.5rem, 2rem + 1.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 1.5vw, 3rem);
  isolation: isolate; /* keeps the pattern layer behind this section only */
  --gold-edge: linear-gradient(
    90deg,
    transparent,
    #c9a15e 15%,
    #f3d58f 50%,
    #c9a15e 85%,
    transparent
  );
  /* fine gold lines top and bottom, then the espresso glow */
  background:
    var(--gold-edge) top / 100% 2px no-repeat,
    var(--gold-edge) bottom / 100% 2px no-repeat,
    radial-gradient(70% 90% at 50% 0%, #3a2716 0%, #22160b 55%, #170e06 100%);
  color: #fff3dc;
}
/* The gold damask texture: a small tile that repeats, shown at 7% */
.gifts::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-gold.webp") repeat center top / 20rem
    auto;
  opacity: 0.07;
  pointer-events: none;
}
/* The climbing vine, part 1 (gold on the dark band): the TOP of the
   vine, in the bottom-right corner, fading out as it climbs. Part 2
   (bronze) is in THE CARAVAN EDIT. Both use the same size, so the
   stems meet exactly at the gold line between the two sections.
   It sits behind the gift tiles, never on top of them. */
.gifts::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/vine-climb-gold.webp") right -6rem
    bottom -44rem / auto 60rem no-repeat;
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0,
    #000 6.5rem,
    transparent 16rem
  );
  mask-image: linear-gradient(to top, #000 0, #000 6.5rem, transparent 16rem);
  pointer-events: none;
}

/* Header: everything centered, light words on the dark band */
.gifts__head {
  margin-bottom: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
  text-align: center;
}
/* "◆ Gift guides ◆": bigger, bolder, brighter gold */
.gifts__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: #f6d891;
}
/* two thin gold hairlines that fade out at their ends */
.gifts__eyebrow::before,
.gifts__eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 183, 101, 0), #e0b765);
}
.gifts__eyebrow::after {
  transform: scaleX(-1); /* mirror it, so it fades out to the right */
}
.gifts .section__title {
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
  color: #fff3dc;
}
.gifts .section__title em {
  color: #f6d891;
}
/* same serif as the headline, in italic */
.gifts__lead {
  margin-top: 0.5rem;
  font: italic 500 clamp(1.125rem, 1rem + 0.4vw, 1.3125rem)/1.45
    var(--font-head);
  color: #ead9bd;
}

/* Tiles */
.gifts__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.125rem;
}
.gift {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 1.125rem 1.125rem 1rem;
  border-radius: 1.125rem;
  color: #fff8ec;
  background: #2a1c10; /* shows only until the photo loads */
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 1.5rem 2.5rem -1.375rem rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.3s var(--ease);
}
.gift:hover {
  box-shadow:
    0 0 0 1.5px #f0cf8a,
    0 1.5rem 2.5rem -1.25rem rgba(0, 0, 0, 0.9);
}
.gift img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  transition: transform 0.8s var(--ease);
}
.gift img.is-missing {
  visibility: hidden;
}
.gift:hover img {
  transform: scale(1.05);
}
/* dark fade at the bottom so the words are always easy to read */
.gift::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(18, 10, 4, 0.88) 0%,
    rgba(18, 10, 4, 0.45) 34%,
    rgba(18, 10, 4, 0) 58%
  );
}
/* the thin inner gold frame (the "double frame" look) */
.gift::before {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  z-index: 2;
  border: 1px solid rgba(240, 207, 138, 0.55);
  border-radius: 0.75rem;
  pointer-events: none;
}
.gift__text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.375rem;
}
.gift__text strong {
  font: 500 clamp(1.25rem, 0.8rem + 0.6vw, 1.5rem)/1.1 var(--font-head);
  color: #fff8ec;
}
.gift__text small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold-light);
}

/* "Explore all gift guides →": gold outline button, centered */
.gifts__more {
  margin-top: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
  text-align: center;
}
.gifts__all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.625rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f6d891;
  box-shadow: inset 0 0 0 1.5px rgba(240, 207, 138, 0.7);
  transition:
    background 0.2s,
    color 0.2s;
}
.gifts__all:hover {
  background: rgba(240, 207, 138, 0.12);
  color: #fff3dc;
}
.gifts__all:focus-visible {
  outline: 2px solid #f6d891;
  outline-offset: 3px;
}

/* Tablets: 3 × 2, and a smaller vine */
@media (max-width: 64em) {
  .gifts__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gifts::after {
    background-position: right -5rem bottom -34rem;
    background-size: auto 46rem;
    -webkit-mask-image: linear-gradient(to top, #000 0, transparent 12rem);
    mask-image: linear-gradient(to top, #000 0, transparent 12rem);
  }
}
/* Phones: one swipe row, about 1½ tiles showing so people know
   there are more to see */
@media (max-width: 47.9375em) {
  .gifts__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 0.25rem 0.125rem; /* room for the gold edge */
  }
  .gifts__grid::-webkit-scrollbar {
    display: none;
  }
  .gifts__grid > * {
    scroll-snap-align: start;
  }
  .gift__text strong {
    font-size: 1.375rem;
  }
  .gifts::after {
    background-position: right -9rem bottom -26rem;
    background-size: auto 34rem;
    -webkit-mask-image: linear-gradient(to top, #000 0, transparent 8rem);
    mask-image: linear-gradient(to top, #000 0, transparent 8rem);
  }
}
/* ============================================================
   ■ END: GIFT GUIDES (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: STORES (MASTER BLOCK)
   ============================================================
   SUMMARY: ESPRESSO LOGO BAND. Dark espresso background with a
   fine gold line on top; each store logo sits in a gold-outlined
   tile, shown in one light color. Hidden until the "hidden" word
   is removed from the section in index.html.
   INSIDE: STORES > Band · STORES > Logos · STORES > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: STORES > Band
   ------------------------------------------------------------
   SUMMARY: The dark band, gold line and light text.
   ------------------------------------------------------------ */
.stores[hidden] {
  display: none; /* stays off the page until you unhide it */
}
.stores {
  position: relative;
  background: linear-gradient(180deg, #22160b 0%, #170e06 100%);
  color: var(--ivory-text);
}
.stores::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #c9a15e 15%,
    #f3d58f 50%,
    #c9a15e 85%,
    transparent
  );
}
.stores .eyebrow {
  color: var(--gold-light);
}
.stores .section__title {
  color: #fff3dc;
}
.stores .section__title em {
  color: #f6d891;
}
.stores__note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #d6c4a6;
}
/* ------------------------------------------------------------
   ■ END: STORES > Band
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STORES > Logos
   ------------------------------------------------------------
   SUMMARY: Gold-outlined tiles, 4 across. Logo images are kept
   to one size so every store looks equally important.
   ------------------------------------------------------------ */
.stores__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stores__item {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 248, 236, 0.04);
  box-shadow: inset 0 0 0 1px rgba(201, 161, 94, 0.4);
  font-size: 1.125rem;
  font-weight: 600;
  color: #f3e6cf;
  text-align: center;
  transition:
    box-shadow 0.25s,
    background 0.25s;
}
.stores__item img {
  width: auto;
  max-width: 100%;
  height: 2.25rem; /* every logo the same height */
  object-fit: contain;
  opacity: 0.92;
}
.stores__item:hover {
  background: rgba(255, 248, 236, 0.08);
  box-shadow: inset 0 0 0 1px #f3d58f;
}
/* ------------------------------------------------------------
   ■ END: STORES > Logos
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: STORES > Phone  (≤ 47.9375em ≈ 767px)
   ------------------------------------------------------------
   SUMMARY: 2 tiles across, slightly shorter.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .stores__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }
  .stores__item {
    min-height: 4.25rem;
    font-size: 1rem;
  }
  .stores__item img {
    height: 1.75rem;
  }
}
/* ------------------------------------------------------------
   ■ END: STORES > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: STORES (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: THE CARAVAN EDIT (MASTER BLOCK)
   ============================================================
   SUMMARY: IVORY DAMASK GALLERY. Warm ivory background with the
   same faint damask as the categories, a centered header, then
   an arch tile + two wide tiles in gold double frames (like the
   Gift Guides). A grid, so it always reflows cleanly.
   INSIDE: THE CARAVAN EDIT > Background & header ·
           THE CARAVAN EDIT > Mosaic · THE CARAVAN EDIT > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: THE CARAVAN EDIT > Background & header
   ------------------------------------------------------------ */
.collections {
  position: relative;
  isolation: isolate; /* keeps the pattern layer behind this section only */
  /* two layers: the climbing vine, part 2 (bronze, the lower part of
     the vine, along the right side), then the ivory gradient. As
     part of the background, it always sits behind the photo tiles. */
  background:
    url("images/patterns/vine-climb-bronze.webp") right -6rem top -16rem / auto
      60rem no-repeat,
    linear-gradient(180deg, #f4e8d6 0%, #ecdcc2 100%);
}
/* tablets: a smaller vine (matches Gift Guides) */
@media (max-width: 64em) {
  .collections {
    background-position:
      right -5rem top -12rem,
      0 0;
    background-size:
      auto 46rem,
      auto;
  }
}
/* the faint damask texture, lighter than in the categories */
.collections::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.08;
  pointer-events: none;
}
/* the gold-line flower ornament from Reviews & Guides, mirrored so
   it grows from the TOP-LEFT corner and fades out before the photos */
.collections::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 40%;
  background: url("images/patterns/ornament-right-bronze.webp") right top / auto
    100% no-repeat;
  transform: scaleX(-1); /* flip left ↔ right */
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  pointer-events: none;
}
.edit__head {
  margin-bottom: clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem);
  text-align: center;
}
/* "◆ The Caravan Edit ◆" */
.edit__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: #5e3f12;
}
/* two thin gold hairlines that fade out at their ends */
.edit__eyebrow::before,
.edit__eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(165, 122, 62, 0), #a57a3e);
}
.edit__eyebrow::after {
  transform: scaleX(-1); /* mirror it, so it fades out to the right */
}
.collections .section__title {
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
  color: #140d07;
}
.collections .section__title em {
  color: #7a4f14;
}
.edit__lead {
  margin-top: 0.5rem;
  font: italic 500 clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem)/1.45
    var(--font-head);
  color: #553608;
}
/* ------------------------------------------------------------
   ■ END: THE CARAVAN EDIT > Background & header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: THE CARAVAN EDIT > Mosaic
   ------------------------------------------------------------ */
.mosaic {
  display: grid;
  gap: 1.375rem;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: repeat(2, clamp(15rem, 10rem + 8vw, 18.75rem));
}
.mosaic__tile {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  border-radius: 1.125rem;
  color: #fff8ec;
  background: #2a1c10; /* shows only until the photo loads */
  /* outer gold line + soft shadow */
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 1.625rem 2.75rem -1.625rem rgba(43, 26, 13, 0.7);
  transition: box-shadow 0.3s var(--ease);
}
.mosaic__tile:hover {
  box-shadow:
    0 0 0 1.5px #e0b765,
    0 1.75rem 3rem -1.5rem rgba(43, 26, 13, 0.8);
}
.mosaic__tile--arch {
  grid-row: span 2;
  border-radius: 999px 999px 1.125rem 1.125rem;
}
.mosaic__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%; /* keeps the bag and headphones in view */
  color: transparent;
  transition: transform 0.8s var(--ease);
}
.mosaic__tile--arch img {
  object-position: 50% 60%; /* the chair */
}
.mosaic__tile img.is-missing {
  visibility: hidden;
}
.mosaic__tile:hover img {
  transform: scale(1.04);
}
/* dark fade at the bottom so the words are always easy to read */
.mosaic__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(18, 10, 4, 0.82) 0%,
    rgba(18, 10, 4, 0.35) 34%,
    rgba(18, 10, 4, 0) 58%
  );
}
/* the thin inner gold frame (the "double frame" look) */
.mosaic__tile::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  z-index: 2;
  border: 1px solid rgba(240, 207, 138, 0.6);
  border-radius: 0.75rem;
  pointer-events: none;
}
.mosaic__tile--arch::before {
  border-radius: 999px 999px 0.75rem 0.75rem;
}
.mosaic__text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.5rem;
}
.mosaic__text strong {
  max-width: 20rem; /* article titles wrap into 2 tidy lines */
  font: 500 clamp(1.375rem, 1rem + 1vw, 1.875rem)/1.15 var(--font-head);
  color: #fff8ec;
}
/* the small topic label above each article title */
.mosaic__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e9c27a;
}
.mosaic__text small {
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6d891;
}
/* ------------------------------------------------------------
   ■ END: THE CARAVAN EDIT > Mosaic
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: THE CARAVAN EDIT > Phone  (≤ 47.9375em)
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  /* the smallest vine on phones (matches Gift Guides) */
  .collections {
    background-position:
      right -9rem top -8rem,
      0 0;
    background-size:
      auto 34rem,
      auto;
  }
  /* the flower ornament sits top-left behind the header */
  .collections::after {
    bottom: auto;
    width: 75%;
    height: 22rem;
    opacity: 0.18;
  }
  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1rem;
  }
  .mosaic__tile {
    min-height: 13rem;
  }
  .mosaic__tile--arch {
    grid-row: auto;
    min-height: 26rem;
  }
}
/* ------------------------------------------------------------
   ■ END: THE CARAVAN EDIT > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: THE CARAVAN EDIT (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: REVIEWS & GUIDES (MASTER BLOCK)
   ============================================================
   SUMMARY: TAUPE STONE. A stone-beige band (a step between The
   Caravan Edit above and the dark Our Story below, so the page
   darkens gradually). Faint damask on the left two-thirds, the
   gold-line flower ornament on the right third, fading out
   before the card text. Three guide cards: photos in a gold
   double frame, words left-aligned underneath.
   Phones: the cards stack, the flowers sit behind the header.
   INSIDE: REVIEWS & GUIDES > Band & patterns ·
           REVIEWS & GUIDES > Header · REVIEWS & GUIDES > Cards ·
           REVIEWS & GUIDES > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: REVIEWS & GUIDES > Band & patterns
   ------------------------------------------------------------ */
.journal {
  position: relative;
  isolation: isolate; /* keeps both patterns behind this section only */
  overflow: hidden;
  background: linear-gradient(180deg, #e4d3b9 0%, #d8c2a2 100%);
}
/* left two-thirds: the same faint damask as the rest of the site,
   fading out towards the right */
.journal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat left top / 20rem
    auto;
  opacity: 0.11;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 52%,
    transparent 70%
  );
  mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 70%);
  pointer-events: none;
}
/* right third: the flower ornament, growing from the top-right
   corner and fading out before the card text */
.journal::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 40%;
  background: url("images/patterns/ornament-right-bronze.webp") right top / auto
    100% no-repeat;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: REVIEWS & GUIDES > Band & patterns
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: REVIEWS & GUIDES > Header
   ------------------------------------------------------------ */
.journal .eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #3d2508; /* deep espresso, easy to read on the damask */
}
.journal .section__title {
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
  color: #140d07;
}
.journal .section__title em {
  color: #8a5a18;
}
.journal__lead {
  max-width: 36rem;
  margin-top: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: #3a2a18;
}
/* "All guides →": a solid espresso pill so it's easy to spot */
.journal .link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: #1d1209;
  color: #f6d891;
  white-space: nowrap;
}
.journal .link-underline:hover {
  background: #3a2a1c;
  color: #fff3dc;
}
.journal .link-underline:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 3px;
}
/* ------------------------------------------------------------
   ■ END: REVIEWS & GUIDES > Header
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: REVIEWS & GUIDES > Cards
   ------------------------------------------------------------ */
.journal__grid {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.guide__link {
  display: block;
}
/* the photo: outer gold line + soft shadow; the monogram shows
   only if a photo is missing */
.guide__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 0.875rem;
  background: var(--card) url("./images/logo/caravan-and-co-monogram.webp")
    center / 22% auto no-repeat;
  box-shadow:
    0 0 0 1.5px #c9a15e,
    0 1.125rem 1.875rem -1.375rem rgba(43, 26, 13, 0.55);
}
/* the thin inner gold frame (the "double frame" look) */
.guide__media::after {
  content: "";
  position: absolute;
  inset: 0.4375rem;
  border: 1px solid rgba(240, 207, 138, 0.8);
  border-radius: 0.5rem;
  pointer-events: none;
}
.guide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  transition: transform 0.6s var(--ease);
}
.guide__media img.is-missing {
  visibility: hidden;
}
.guide__link:hover .guide__media img {
  transform: scale(1.04);
}
.guide__type {
  display: block;
  margin: 1.125rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3d2508; /* deep espresso, easy to read on the damask */
}
.guide__title {
  font: 500 clamp(1.25rem, 1rem + 0.6vw, 1.4375rem) / 1.22 var(--font-head);
  color: #0e0905;
  transition: color 0.2s;
}
.guide__link:hover .guide__title {
  color: #8a5a18;
}
.guide__link:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 4px;
  border-radius: 0.875rem;
}
/* "• Coming soon" with a small gold dot */
.guide__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #2a1c0e;
}
.guide__meta::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #8a5a18;
}
/* ------------------------------------------------------------
   ■ END: REVIEWS & GUIDES > Cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: REVIEWS & GUIDES > Phone  (≤ 47.9375em)
   ------------------------------------------------------------
   SUMMARY: Cards stack in one column. The damask covers the
   whole band; the flowers sit top-right behind the header.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .journal::before {
    opacity: 0.09;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .journal::after {
    bottom: auto;
    width: 75%;
    height: 22rem;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 75%);
    mask-image: linear-gradient(200deg, #000 20%, transparent 75%);
  }
  .journal__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}
/* ------------------------------------------------------------
   ■ END: REVIEWS & GUIDES > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: REVIEWS & GUIDES (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: OUR STORY (MASTER BLOCK)
   ============================================================
   SUMMARY: SOFT MELT + DAMASK LACE. The photo fills the band and
   a soft dark fade on the left keeps the words easy to read.
   Below the button, the photo melts into the champagne of the
   Get in touch banner: the photo and the dark fade disappear
   together and finish on one straight line. A faint bronze
   damask appears in the melt and carries on into the banner,
   with a thin gold hairline.
   INSIDE: OUR STORY > Band & photo · OUR STORY > Melt & lace ·
           OUR STORY > Text · OUR STORY > Tablet & phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: OUR STORY > Band & photo
   ------------------------------------------------------------ */
.story {
  --melt: clamp(7.5rem, 5.5rem + 4vw, 10rem); /* height of the melt */
  position: relative;
  isolation: isolate; /* keeps the photo layers behind this section only */
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 22rem + 13vw, 37rem);
  /* the bottom padding keeps the button clear of the melt */
  padding: clamp(3rem, 2.25rem + 2vw, 4.25rem) var(--gutter)
    calc(var(--melt) + 1.25rem);
  padding-left: var(--edge); /* lines the text up with the logo */
  /* dark behind the photo, champagne where the photo melts away */
  background: linear-gradient(
    180deg,
    #140d07 0,
    #140d07 calc(100% - var(--melt)),
    #f6ebdb calc(100% - var(--melt))
  );
  color: #fff3dc;
}
.story__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%; /* keeps the perfume, watch and gift in view */
}
/* the soft dark fade behind the words */
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(14, 9, 5, 0.94) 0%,
    rgba(14, 9, 5, 0.86) 34%,
    rgba(14, 9, 5, 0.25) 60%,
    rgba(14, 9, 5, 0) 76%
  );
}
/* LATE BLEND: the photo and the dark fade stay rich for the
   first third of the melt, then blend away together and both
   finish on the same line at the bottom of the section */
.story__media,
.story::before {
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 calc(100% - var(--melt)),
    #000 calc(100% - var(--melt) * 0.7),
    rgba(0, 0, 0, 0.7) calc(100% - var(--melt) * 0.4),
    rgba(0, 0, 0, 0.25) calc(100% - var(--melt) * 0.15),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 calc(100% - var(--melt)),
    #000 calc(100% - var(--melt) * 0.7),
    rgba(0, 0, 0, 0.7) calc(100% - var(--melt) * 0.4),
    rgba(0, 0, 0, 0.25) calc(100% - var(--melt) * 0.15),
    transparent 100%
  );
}
/* ------------------------------------------------------------
   ■ END: OUR STORY > Band & photo
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: OUR STORY > Melt & lace
   ------------------------------------------------------------ */
/* holds the damask lace and the gold hairline over the melt */
.story__melt {
  position: absolute;
  inset: auto 0 0;
  height: var(--melt);
  z-index: -1;
}
/* the damask lace: fades in towards the bottom. The tile sits on
   the bottom edge so it carries on seamlessly into Get in touch */
.story__melt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/patterns/damask-bronze.webp") repeat center bottom /
    20rem auto;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
  mask-image: linear-gradient(180deg, transparent, #000);
}
/* the thin gold hairline across the seam */
.story__melt::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 38%;
  width: min(32rem, 70%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    #c9a15e 25%,
    #f3d58f 50%,
    #c9a15e 75%,
    transparent
  );
}
/* ------------------------------------------------------------
   ■ END: OUR STORY > Melt & lace
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: OUR STORY > Text
   ------------------------------------------------------------ */
.story__text {
  width: min(100%, 31rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* "—— Our story ——" */
.story__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-size: 0.84375rem;
  font-weight: 700;
  color: #f6d891;
}
/* two thin gold hairlines that fade out at their ends */
.story__eyebrow::before,
.story__eyebrow::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 183, 101, 0), #e0b765);
}
.story__eyebrow::after {
  transform: scaleX(-1); /* mirror it, so it fades out to the right */
}
.story .section__title {
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.125rem);
  color: #fff8ec;
}
.story .section__title em {
  display: block; /* the gold line sits on its own line */
  padding-bottom: 0.15em; /* room for the tails of g, j, y so they aren't cut off */
  margin-bottom: -0.15em; /* takes that room back, so the spacing below stays the same */
  font-style: normal;
  /* the same polished-gold words as the opening slide */
  background: linear-gradient(100deg, #e7c27a 0%, #fff0c2 45%, #d9a85a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* plain Inter, the same as the sentence on the hero slides */
.story__lead {
  max-width: 31rem;
  margin-top: 0.875rem;
  text-wrap: balance; /* evens out line lengths so no line is left short */
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.7;
  color: #f1e2c9;
}
.story__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  margin-top: 1.5rem;
  padding: 0 1.625rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f6d891;
  box-shadow: inset 0 0 0 1.5px rgba(240, 207, 138, 0.75);
  transition:
    background 0.2s,
    color 0.2s;
}
.story__link:hover {
  background: rgba(240, 207, 138, 0.12);
  color: #fff3dc;
}
.story__link:focus-visible {
  outline: 2px solid #f6d891;
  outline-offset: 3px;
}
/* ------------------------------------------------------------
   ■ END: OUR STORY > Text
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: OUR STORY > Tablet & phone  (≤ 64em)
   ------------------------------------------------------------
   SUMMARY: On narrower screens the words would cover the
   products, so the words go on top, the photo sits below them
   and fades in, and then it melts into the banner.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  .story {
    --melt: clamp(6.5rem, 5rem + 4vw, 8rem);
    display: block;
    min-height: 0;
    padding: 2.75rem var(--gutter) clamp(17rem, 9rem + 22vw, 23rem);
    background: linear-gradient(
      180deg,
      #2c1d10 0,
      #140d07 45%,
      #140d07 calc(100% - var(--melt)),
      #f6ebdb calc(100% - var(--melt))
    );
  }
  .story::before {
    display: none;
  }
  .story__media {
    top: auto;
    height: clamp(20.5rem, 12rem + 26vw, 27rem);
  }
  .story__media img {
    object-position: 78% 62%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
  .story__text {
    width: 100%;
    margin: 0 auto;
  }
  /* shorter hairlines so "Our story" stays on one line */
  .story__eyebrow::before,
  .story__eyebrow::after {
    width: 2.25rem;
  }
}
/* ------------------------------------------------------------
   ■ END: OUR STORY > Tablet & phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: OUR STORY (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: FOOTER (MASTER BLOCK)
   ============================================================
   SUMMARY: Champagne + espresso footer. A warm champagne band
   with the weekly deals email, a fine gold line, then the deep
   espresso footer: gold logo, 4 link columns and the affiliate
   disclosure.
   INSIDE: FOOTER > Newsletter · FOOTER > Main · FOOTER > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Contact
   ------------------------------------------------------------
   SUMMARY: IVORY RIBBON · ESPRESSO TAG. A slim, light ivory band
   with big, near-black text: a small dark "Get in touch" tag,
   the headline and one line on the left; a wide espresso button
   with a polished-gold arrow chip and the reply time on the
   right. The light band is a contrast to the dark footer below.
   Phones stack it and the button goes full width.
   ------------------------------------------------------------ */
.footer__contact {
  position: relative;
  isolation: isolate; /* keeps the damask lace behind the words */
  padding: clamp(2.5rem, 2rem + 1.5vw, 3.25rem) var(--gutter);
  background: linear-gradient(180deg, #f6ebdb 0%, #f1e3cc 100%);
  color: var(--ink);
}
/* the damask lace carried on from Our Story: the tile starts on
   the top edge (it ends on Our Story's bottom edge), so the
   pattern flows across with no seam, then fades out */
.footer__contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  pointer-events: none;
}
.footer__contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  max-width: var(--container);
  margin: 0 auto;
}

/* The small dark "Get in touch" tag */
.footer__contact-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--espresso);
  color: #f6d891;
  font: 700 0.78125rem/1.2 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer__contact-tag svg {
  width: 0.875rem;
  height: 0.875rem;
}

.footer__contact-title {
  margin-top: 0.875rem;
  font: 500 clamp(1.75rem, 1.25rem + 1.4vw, 2.25rem)/1.15 var(--font-head);
  color: #140d07;
}
.footer__contact-title em {
  font-style: italic;
  color: #7a4f14;
}
.footer__contact-lead {
  margin-top: 0.5rem;
  font: italic 500 clamp(1.125rem, 1rem + 0.4vw, 1.25rem)/1.45 var(--font-head);
  color: #3d2a14;
}

.footer__contact-actions {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 0.625rem;
}
/* Wide espresso pill: words on the left, gold chip on the right */
.footer__contact-btn {
  justify-content: space-between;
  gap: 1rem;
  min-width: 15rem;
  min-height: 3.5rem;
  padding: 0 0.5rem 0 1.75rem;
  background: var(--espresso);
  color: #fff3dc;
  font-size: 1.03125rem;
}
.footer__contact-btn:hover {
  transform: translateY(-0.125rem);
  background: #3a2a1c;
}
.footer__contact-btn:focus-visible {
  outline: 2px solid #7a4f14;
  outline-offset: 3px;
}
/* The polished-gold circle with the arrow */
.footer__contact-chip {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  color: #2a1606;
  background: linear-gradient(135deg, #c4964a 0%, #f3d58f 100%);
}
.footer__contact-chip svg {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke-width: 2.2;
  transition: transform 0.25s var(--ease);
}
/* On hover the arrow nudges right, like it's pointing the way */
.footer__contact-btn:hover .footer__contact-chip svg {
  transform: translateX(0.125rem);
}

/* "We usually reply…" with a small clock icon */
.footer__contact-small {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2a1f16;
  white-space: nowrap;
}
.footer__contact-small svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: #7a4f14;
}

/* Shared look for every small line icon in this banner */
.footer__contact svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__contact-tag svg,
.footer__contact-small svg {
  stroke-width: 1.8;
}

/* Phones: everything stacks; the button stretches full width */
@media (max-width: 47.9375em) {
  .footer__contact-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .footer__contact-text {
    align-self: flex-start;
  }
  .footer__contact-actions {
    justify-items: stretch;
  }
  .footer__contact-btn {
    min-width: 0;
  }
  .footer__contact-small {
    align-items: flex-start;
    white-space: normal;
    font-size: 0.875rem;
  }
  .footer__contact-small svg {
    margin-top: 0.125rem;
  }
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Contact
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Main
   ------------------------------------------------------------
   SUMMARY: APPLE LEFT-ALIGNED, COMPACT. A slim espresso footer
   under a fine gold line: shiny crest + CARAVAN & CO and the
   tagline on the left; on the right, Shop (two short columns,
   4 + 3), Explore, Help and Legal, every group left-aligned with
   quiet muted headings and tight, even spacing (like apple.com).
   "Contact" matches the other links exactly, in a soft gold color
   so it is gently different. Every page shares this one rule.
   Then copyright and the affiliate disclosure in one quiet row.
   ------------------------------------------------------------ */
.footer__main {
  --fgap: clamp(1.5rem, 0.5rem + 2vw, 2.75rem); /* space between columns */
  position: relative;
  padding: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem) var(--gutter) 1rem;
  background: linear-gradient(180deg, #1f140b 0%, #140d07 100%);
  color: #cdbb9f;
}
.footer__main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #c9a15e 15%,
    #f3d58f 50%,
    #c9a15e 85%,
    transparent
  );
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 3.6fr;
  gap: var(--fgap);
  max-width: var(--container);
  margin: 0 auto;
}

/* Shiny logo: crest in a gold ring + the name as metallic text */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.footer__crest {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.09375rem #f6d891,
    0 0 1rem rgba(252, 214, 130, 0.22);
}
.footer__crest img {
  width: 1.875rem;
  height: auto;
}
.footer__name {
  font:
    700 0.9375rem/1 "Cinzel",
    "Times New Roman",
    serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  /* metallic bands: bright top, deep middle, bright edge = shine */
  background: linear-gradient(
    180deg,
    #fff8dc 0%,
    #ffe6a3 30%,
    #e9b866 52%,
    #b07a2e 72%,
    #f3d58f 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 0.5rem rgba(252, 214, 130, 0.18));
}
.footer__brand p {
  max-width: 15rem;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* 5 equal columns: Shop takes 2 of them, the others take 1 each.
   No gap: the left padding on each group makes the space */
.footer__cols {
  display: grid;
  gap: 2rem 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* each group: title and links left-aligned, like apple.com */
.footer__cols > div {
  padding-left: 1.5rem;
  text-align: left;
}
.footer__cols > div:first-child {
  grid-column: span 2; /* Shop is the first group */
  padding-left: 0;
}
/* Shop's 7 links flow into 2 columns (4 on the left, 3 on the right) */
.footer__cols > div:first-child ul {
  column-count: 2;
  column-gap: var(--fgap);
  width: max-content;
}
.footer__heading {
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8977f; /* quiet headings, so the links stand out */
}
.footer__cols li {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  /* a whole-pixel line height (20px), so every row is exactly the
     same distance apart. 1.45 gave 20.3px, which screens round
     unevenly: some gaps ended up 1px bigger than others. */
  line-height: 1.25rem;
  break-inside: avoid; /* a link never splits across 2 columns */
}
.footer__main a {
  color: #e3d4bb;
  transition: color 0.2s;
}
/* Finds the footer link that goes to the contact page, so every
   page gets it without changing the HTML. Only the color differs.
   It sits above the hover rule, so hovering works like the others. */
.footer__cols a[href$="contact.html"] {
  color: #e9c57f;
}
.footer__main a:hover {
  color: #f6d891;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  flex-wrap: wrap;
  max-width: var(--container);
  margin: 1rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px solid #3a2a1a;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #a8977f;
}
.footer__bottom p:first-child {
  max-width: 52rem;
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Main
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: FOOTER > Phone  (≤ 80em)
   ------------------------------------------------------------
   SUMMARY: Laptops & tablets (≤ 80em): logo on top, the 5 link
   columns use the full width below it so no link wraps.
   Phones (≤ 56em): a faint line above each group.
   Shop (4 + 3) runs full width, then Explore and Help side by
   side, then Legal. Small phones (≤ 22.5em):
   slightly smaller links, and Shop's left column borrows the gap,
   so each link stays on one line and every row is evenly spaced.
   ------------------------------------------------------------ */
@media (max-width: 70em) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (max-width: 56em) {
  .footer__main {
    --fgap: 1.25rem;
  }
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem var(--fgap);
  }
  .footer__cols > div {
    padding: 0.875rem 0 0;
    border-top: 1px solid rgba(201, 161, 94, 0.16);
  }
  .footer__cols > div:first-child ul {
    width: auto;
  }
}
@media (max-width: 22.5em) {
  .footer__main {
    --fgap: 1rem;
  }
  .footer__cols li {
    font-size: 0.8125rem;
    line-height: 1.1875rem; /* whole pixels again (19px) */
  }
  /* the left Shop column also uses the gap between columns, so
     "Fashion & Accessories" fits on one line and the right Shop
     column still starts exactly above "Help" */
  .footer__cols > div:first-child ul {
    display: grid;
    grid-template-columns: calc(50% + var(--fgap) / 2) minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-count: auto;
    column-gap: 0; /* the left column already includes the gap */
  }
}
@media (max-width: 47.9375em) {
  .newsletter__form .btn {
    flex: 1 1 100%;
  }
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: FOOTER (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: LEGAL PAGE (MASTER BLOCK)
   ============================================================
   SUMMARY: IVORY DAMASK + READING PANEL. Shared by Affiliate
   Disclosure, Privacy Policy and Terms of Use. An ivory damask
   page with a climbing vine down each side (like the home page);
   a champagne damask title band with the gold flower ornament
   top-right; an "In short" box; the "On this page" list and the
   numbered sections each sit on a soft ivory panel with a thin
   gold line, in dark, larger text that's easy to read.
   INSIDE: LEGAL PAGE > Page & patterns · LEGAL PAGE > Title band ·
           LEGAL PAGE > In short · LEGAL PAGE > On this page ·
           LEGAL PAGE > Sections · LEGAL PAGE > Related ·
           LEGAL PAGE > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Page & patterns
   ------------------------------------------------------------
   SUMMARY: Ivory page, faint damask over all of it, a bronze vine
   on the left and a mirrored one on the right (big screens only,
   where there's room beside the text).
   ------------------------------------------------------------ */
.legal {
  position: relative;
  isolation: isolate; /* keeps the patterns behind this page only */
  background: #fbf5ea;
}
.legal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.1;
  pointer-events: none;
}
/* left vine */
.legal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 14rem;
  background: url("images/patterns/vine-tall-bronze.webp") left -13rem top
    24rem / 24rem auto repeat-y;
  opacity: 0.2;
  pointer-events: none;
}
/* right vine (mirrored, starts lower so the two sides differ) */
.legal__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 14rem;
  background: url("images/patterns/vine-tall-bronze-right.webp") right -13rem
    top 60rem / 24rem auto repeat-y;
  opacity: 0.55;
  pointer-events: none;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Page & patterns
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Title band
   ------------------------------------------------------------ */
.legal__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem) var(--gutter);
  /* two layers: the left vine climbing up through the title band
     (lined up exactly with the vine below it, already faded in the
     file), then the champagne gradient */
  background:
    url("images/patterns/vine-tall-bronze-soft.webp") left -13rem top 24rem /
      24rem auto repeat-y,
    linear-gradient(180deg, #f3e6cf 0%, #ecdcc2 100%);
}
/* a damask texture across the title band */
.legal__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("images/patterns/damask-bronze.webp") repeat left top / 20rem
    auto;
  opacity: 0.12;
  /* fades out before the flower ornament, so the right side stays neat */
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 68%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 68%);
  pointer-events: none;
}
/* the gold-line flower ornament from Reviews & Guides */
.legal__hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 40%;
  background: url("images/patterns/ornament-right-bronze.webp") right top / auto
    100% no-repeat;
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 130% 85% at 100% 0%,
    #000 35%,
    transparent 78%
  );
  pointer-events: none;
}
.legal__hero-inner,
.legal__wrap {
  max-width: 72rem;
  margin: 0 auto;
}
.legal__hero-inner {
  text-align: center; /* title, label, line and date sit in the middle */
}
.legal__crumbs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  color: #2a1c0e;
}
.legal__crumbs a {
  text-decoration: underline;
  text-decoration-color: rgba(138, 90, 24, 0.5);
  text-underline-offset: 0.2em;
}
.legal__crumbs a:hover {
  color: #140d07;
}
/* "LEGAL & TRANSPARENCY ——" */
.legal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #1d1209;
}
.legal__eyebrow::before,
.legal__eyebrow::after {
  content: "";
  width: 2.75rem;
  height: 1.5px;
  background: currentColor;
  opacity: 0.7;
}
.legal__title {
  margin-top: 0.5rem;
  font: 500 clamp(2.5rem, 1.8rem + 3vw, 4rem) / 1.05 var(--font-head);
  letter-spacing: -0.015em;
  color: #140d07;
}
.legal__title em {
  font-style: italic;
  color: #8a5a18;
}
.legal__lead {
  max-width: 40rem;
  margin: 0.625rem auto 0; /* "auto" left and right centers the line */
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  color: #1d1209;
}
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2a1c0e;
}
/* a small dot between "Last updated" and "About 8 min read" */
.legal__meta span + span::before {
  content: "·";
  margin: 0 1.5rem 0 -1rem;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Title band
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > In short
   ------------------------------------------------------------
   SUMMARY: A champagne box with a thin gold line; three points
   side by side, each with a small gold diamond.
   ------------------------------------------------------------ */
.legal__wrap {
  box-sizing: content-box; /* the max-width is for the text, padding sits outside it */
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) var(--gutter)
    clamp(3rem, 2rem + 3vw, 5rem);
}
.legal__summary {
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding: 1.375rem 1.75rem;
  border-radius: 1rem;
  background: #f3e6cf;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 94, 0.6);
}
.legal__summary-title,
.legal__toc summary,
.legal__related p {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5e3a0c;
}
.legal__summary-title {
  margin-bottom: 0.625rem;
}
.legal__summary ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
}
.legal__summary li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #140d07;
}
.legal__summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  transform: rotate(45deg); /* a square turned into a diamond */
  background: #b48a46;
}
.legal__summary strong {
  color: #140d07;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > In short
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > On this page
   ------------------------------------------------------------
   SUMMARY: Two columns: the list (17.5rem) and the text. The list
   sits on a soft ivory panel and is "sticky", so it stays in view
   while you scroll. The section you're reading gets a gold bar
   (set by script.js).
   ------------------------------------------------------------ */
.legal__grid {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.legal__toc {
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 1rem;
  background: rgba(
    255,
    251,
    244,
    0.88
  ); /* 88% solid: the damask barely shows through */
  box-shadow: inset 0 0 0 1px rgba(201, 161, 94, 0.55);
}
.legal__toc summary {
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  list-style: none;
  text-align: center;
  /* a short gold hairline under the label that fades out at both ends */
  background: linear-gradient(90deg, transparent, #e0b765, transparent) center
    bottom / 4.5rem 1px no-repeat;
}
.legal__toc summary::-webkit-details-marker {
  display: none; /* hides the default ▶ arrow */
}
.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(138, 90, 24, 0.45);
}
.legal__toc a {
  display: flex;
  gap: 0.75rem;
  margin-left: -1px;
  padding: 0.4375rem 0 0.4375rem 1rem;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: #1d1209;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.legal__toc a span {
  min-width: 1.25rem;
  font-weight: 700;
  color: #7a4f14;
  font-variant-numeric: tabular-nums;
}
.legal__toc a:hover {
  color: #140d07;
}
.legal__toc a[aria-current="true"] {
  border-left-color: #8a5a18;
  color: #140d07;
  font-weight: 600;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > On this page
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Sections
   ------------------------------------------------------------
   SUMMARY: All sections sit on one soft ivory reading panel.
   Each section: a gold number (01, 02 …), a serif heading, then
   dark, larger reading text, split by a faint gold line.
   ------------------------------------------------------------ */
.legal__body {
  max-width: 50rem; /* about 75 letters per line inside the panel: easy to read */
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: 1.25rem;
  background: rgba(255, 251, 244, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(201, 161, 94, 0.55),
    0 1.5rem 2.5rem -2rem rgba(43, 26, 13, 0.35);
}
.legal__section {
  padding: 1.75rem 0;
  border-top: 1px solid rgba(201, 161, 94, 0.35);
  scroll-margin-top: 6rem; /* jump links stop below the menu bar */
}
.legal__section:first-child {
  padding-top: 0;
  border-top: 0;
}
.legal__section h2 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font: 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.2 var(--font-head);
  color: #140d07;
}
.legal__num {
  flex: none;
  min-width: 2.25rem;
  font: 700 0.875rem var(--font-body);
  letter-spacing: 0.08em;
  color: #7a4f14;
}
/* adds a leading 0 to sections 1–9, so 1 shows as 01 */
.legal__section:nth-child(-n + 9) .legal__num::before {
  content: "0";
}
.legal__section p {
  margin-top: 0.75rem;
  padding-left: 3.25rem; /* lines the text up with the heading */
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #140d07;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Sections
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Related
   ------------------------------------------------------------ */
.legal__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 161, 94, 0.5);
  font-size: 0.875rem;
}
.legal__related a {
  font-weight: 600;
  color: #3d2508;
  text-decoration: underline;
  text-decoration-color: rgba(138, 90, 24, 0.5);
  text-underline-offset: 0.25em;
}
.legal__related a:hover {
  color: #8a5a18;
}
.legal__related .legal__top {
  margin-left: auto; /* pushes "Back to top" to the right */
  text-decoration: none;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Related
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Espresso list & champagne panel
   ------------------------------------------------------------
   SUMMARY: The "On this page" list sits on an espresso panel
   (like the menu bar) with light text and gold numbers. The
   sections sit on a warm champagne panel with the damask woven
   softly into it. These rules come after the ones above, so
   they win.
   ------------------------------------------------------------ */
.legal__toc {
  background: linear-gradient(180deg, #24170d 0%, #1a110a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224, 183, 101, 0.55),
    0 1.25rem 2rem -1.5rem rgba(26, 17, 10, 0.5);
}
.legal__toc summary {
  color: #e9c27a;
}
.legal__toc ol {
  border-left-color: rgba(224, 183, 101, 0.4);
}
.legal__toc a {
  color: #fff3dc;
}
.legal__toc a span {
  color: #e0b765;
}
.legal__toc a:hover {
  color: #f6d891;
}
.legal__toc a[aria-current="true"] {
  border-left-color: #f0cf8a;
  color: #ffffff;
}
.legal__toc a:focus-visible {
  outline: 2px solid #f0cf8a;
  outline-offset: 2px;
}
.legal__body {
  background:
    url("images/patterns/damask-bronze.webp") repeat center top / 20rem auto,
    linear-gradient(180deg, #f6ead6 0%, #efdfc4 100%);
  background-blend-mode: soft-light, normal; /* keeps the damask faint */
  box-shadow:
    inset 0 0 0 1px rgba(201, 161, 94, 0.7),
    0 1.5rem 2.5rem -2rem rgba(43, 26, 13, 0.4);
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Espresso list & champagne panel
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > FAQ questions
   ------------------------------------------------------------
   SUMMARY: Used on the FAQ page only. Each question is a row
   you tap to open its answer, with a gold + that turns into –.
   A faint gold line separates the questions.
   ------------------------------------------------------------ */
.faq__item {
  border-top: 1px solid rgba(201, 161, 94, 0.35);
}
.faq__item:first-of-type {
  border-top: 0;
}
.faq__item summary {
  position: relative;
  padding: 0.875rem 2.5rem 0.875rem 3.25rem; /* lines up with the section text */
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
  display: none; /* hides the default ▶ arrow */
}
/* the gold + / – circle on the right */
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 1px rgba(138, 90, 24, 0.55);
  color: #7a4f14;
  font: 600 1.125rem/1 var(--font-body);
  transition:
    background 0.2s,
    color 0.2s;
}
.faq__item[open] summary::after {
  content: "–";
  background: #1d1209;
  color: #f6d891;
  box-shadow: none;
}
.faq__item summary h3 {
  font: 600 1.0625rem/1.4 var(--font-body);
  color: #140d07;
  transition: color 0.2s;
}
.faq__item summary:hover h3 {
  color: #7a4f14;
}
.faq__item summary:focus-visible {
  outline: 2px solid #8a5a18;
  outline-offset: 2px;
  border-radius: 0.5rem;
}
.faq__answer {
  padding-bottom: 1rem;
}
.faq__answer p:first-child {
  margin-top: 0;
}
@media (max-width: 47.9375em) {
  .faq__item summary {
    padding-left: 0;
  }
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > FAQ questions
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > FAQ topic cards
   ------------------------------------------------------------
   SUMMARY: FAQ page only (":has(.faq__item)" means "only the
   panel that contains FAQ questions"). Instead of one long
   panel, each topic gets its own champagne card with a gold
   line under its heading, so it's easy to see where a new
   topic begins.
   ------------------------------------------------------------ */
.legal__body:has(.faq__item) {
  padding: 0;
  background: none;
  box-shadow: none;
}
.legal__body:has(.faq__item) .legal__section {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-top: 0;
  border-radius: 1.25rem;
  background:
    url("images/patterns/damask-bronze.webp") repeat center top / 20rem auto,
    linear-gradient(180deg, #f6ead6 0%, #efdfc4 100%);
  background-blend-mode: soft-light, normal; /* keeps the damask faint */
  box-shadow:
    inset 0 0 0 1px rgba(201, 161, 94, 0.7),
    0 1.25rem 2rem -1.75rem rgba(43, 26, 13, 0.4);
}
/* the topic heading gets a solid gold line under it */
.legal__body:has(.faq__item) .legal__section h2 {
  margin-bottom: 0.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid #c9a15e;
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > FAQ topic cards
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: LEGAL PAGE > Phone  (≤ 80em laptops, ≤ 64em tablets,
   ≤ 47.9375em phones)
   ------------------------------------------------------------
   SUMMARY: Laptops: no side vines (not enough room). Tablets:
   one column; "In short" points stack; "On this page" becomes a
   box that opens and closes with + / –. Phones: slimmer panel
   padding, so the text uses the full width.
   ------------------------------------------------------------ */
@media (max-width: 80em) {
  .legal::after,
  .legal__wrap::after {
    display: none;
  }
  .legal__hero {
    background: linear-gradient(180deg, #f3e6cf 0%, #ecdcc2 100%);
  }
}
@media (max-width: 64em) {
  .legal__summary ul {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
  .legal__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .legal__toc {
    position: static;
    padding: 1rem 1.25rem;
    border-radius: 0.875rem;
  }
  .legal__toc summary {
    position: relative;
    display: flex;
    justify-content: center; /* label in the middle */
    margin: 0;
    cursor: pointer;
  }
  .legal__toc summary::after {
    content: "+";
    position: absolute;
    right: 0; /* the + / – stays on the right edge */
    font-size: 1rem;
  }
  .legal__toc details[open] summary {
    margin-bottom: 0.75rem;
  }
  /* closed box: hide the hairline so the bar stays slim */
  .legal__toc details:not([open]) summary {
    padding-bottom: 0;
    background: none;
  }
  .legal__toc details[open] summary::after {
    content: "–";
  }
}
@media (max-width: 47.9375em) {
  .legal__hero::after {
    width: 70%;
    opacity: 0.15;
  }
  .legal__summary {
    padding: 1.125rem 1.25rem;
  }
  .legal__body {
    padding: 1.25rem 1rem;
  }
  .legal__section h2 {
    gap: 0.75rem;
  }
  .legal__num {
    min-width: 0;
  }
  .legal__section p {
    padding-left: 0;
  }
}
/* ------------------------------------------------------------
   ■ END: LEGAL PAGE > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: LEGAL PAGE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: CONTACT PAGE (MASTER BLOCK)
   ============================================================
   SUMMARY: CONCIERGE. Concierge photo with the title on its dark
   left side; the espresso form floats over the photo's bottom
   edge; four centered topic cards and a left-aligned order note
   sit beside it. Laptops/tablets: the photo and columns shrink.
   Phones (≤ 56em): one column, the form first, then the topics.
   INSIDE: CONTACT PAGE > Welcome · CONTACT PAGE > Topics ·
           CONTACT PAGE > Form · CONTACT PAGE > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: CONTACT PAGE > Welcome
   ------------------------------------------------------------ */
/* the footer's "Get in touch" strip would repeat this page, so
   it's hidden here only */
body:has(.contact) .footer__contact {
  display: none;
}
.contact__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(20rem, 30vw, 25rem);
  padding: 2.5rem var(--gutter) 6rem; /* the bottom room is where the form overlaps */
  color: #fff8ec;
}
.contact__photo,
.contact__photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%; /* keeps the bell and the arch in view */
}
/* darkens the left side so the words are easy to read */
.contact__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(20, 13, 7, 0.75),
    rgba(20, 13, 7, 0.25) 50%,
    rgba(20, 13, 7, 0) 75%
  );
}
.contact__hero-inner {
  max-width: 72rem;
  margin: 0 auto;
}
.contact__hero .legal__crumbs {
  margin-bottom: 1rem;
  color: #e6d4b6;
}
.contact__hero .legal__crumbs a {
  text-decoration-color: rgba(240, 207, 138, 0.6);
}
.contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #e9c27a;
}
.contact__eyebrow::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.contact__title {
  margin-top: 0.5rem;
  font: 500 clamp(2.5rem, 2rem + 2vw, 3.75rem) / 1.05 var(--font-head);
  letter-spacing: -0.01em;
}
.contact__title em,
.contact__h2 em {
  font-style: italic;
  color: #f0cf8a;
}
.contact__lead {
  max-width: 28rem;
  margin-top: 0.75rem;
  color: #f3e6cf;
}
/* ------------------------------------------------------------
   ■ END: CONTACT PAGE > Welcome
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT PAGE > Topics
   ------------------------------------------------------------
   SUMMARY: Centered heading, 2 × 2 topic cards with tight text,
   then the order note on the left under a gold hairline.
   ------------------------------------------------------------ */
.contact__body {
  position: relative;
  isolation: isolate;
  padding: 0 var(--gutter) 3.5rem;
  background: radial-gradient(
    90% 70% at 80% 0%,
    #3a2716 0%,
    #24170d 55%,
    #1a110a 100%
  );
  color: #fff3dc;
}
/* the faint gold damask and two climbing vines in the empty side
   spaces (the vines hide on phones, where there's no room) */
.contact__body::before,
.contact__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.contact__body::before {
  background: url("images/patterns/damask-gold.webp") repeat center top / 20rem
    auto;
  opacity: 0.08;
}
.contact__body::after {
  background:
    url("images/patterns/vine-tall-gold.webp") left -16.5rem top 0 / 26rem auto
      repeat-y,
    url("images/patterns/vine-tall-gold-right.webp") right -16.5rem top 30rem /
      26rem auto repeat-y;
  opacity: 0.28;
}
@media (max-width: 80em) {
  .contact__body::after {
    background-size:
      18rem auto,
      18rem auto;
    background-position:
      left -11rem top 0,
      right -11rem top 20rem;
  }
}
@media (max-width: 47.9375em) {
  .contact__body::after {
    display: none;
  }
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); /* topics · form */
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
  align-items: start;
}
.contact__topics {
  padding-top: 2.5rem;
  text-align: center;
}
.contact__h2 {
  font: 500 1.75rem / 1.15 var(--font-head);
  color: #fff8ec;
}
.contact__topics ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
/* each card is a button that picks that topic in the form */
.contact__topic {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.875rem 0.75rem;
  border: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s var(--ease);
  border-radius: 0.875rem;
  /* the glass tint on a solid base, so the pattern stays behind the card */
  background:
    linear-gradient(rgba(255, 236, 200, 0.05), rgba(255, 236, 200, 0.05)),
    #22160c;
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.4);
}
.contact__topic:hover {
  transform: translateY(-0.125rem);
  box-shadow: inset 0 0 0 1px rgba(240, 207, 138, 0.8);
}
.contact__topic:focus-visible {
  outline: 2px solid #e0b765;
  outline-offset: 2px;
}
/* the chosen topic: a gold edge and a soft gold glow */
.contact__topic[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 1.5px #f0cf8a,
    0 0 1.25rem -0.25rem rgba(224, 183, 101, 0.45);
}
.contact__topic strong {
  display: block;
  font: 500 1rem / 1.25 var(--font-head);
  color: #fff8ec;
}
.contact__topic span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4; /* tight lines, so 2-line text doesn't spread out */
  color: #cbb592;
}
/* "Order question?": left-aligned, under a gold hairline */
.contact__order {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(224, 183, 101, 0.3);
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #cbb592;
}
.contact__order strong {
  display: block;
  margin-bottom: 0.25rem;
  font: 500 1.0625rem var(--font-head);
  color: #fff8ec;
}
.contact__order a,
.contact__privacy a {
  color: #f6d891;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap; /* "See the FAQ" never breaks across lines */
}
/* ------------------------------------------------------------
   ■ END: CONTACT PAGE > Topics
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT PAGE > Form
   ------------------------------------------------------------
   SUMMARY: An espresso card with a gold line, pulled up over the
   photo. Dark see-through fields, gold labels, centered button.
   ------------------------------------------------------------ */
.contact__form {
  display: grid;
  gap: 0.875rem;
  margin-top: -4.5rem; /* overlaps the photo */
  padding: 2rem;
  border-radius: 1.25rem;
  /* clear warm glass: the page shows through, softly blurred */
  background: rgba(255, 236, 200, 0.07);
  -webkit-backdrop-filter: blur(1rem) saturate(1.2); /* Safari */
  backdrop-filter: blur(1rem) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.3), /* a thin shine along the top edge */
    0 0 0 1px rgba(240, 207, 138, 0.8), /* gold edge */
    0 0 2rem -0.25rem rgba(224, 183, 101, 0.35), /* soft gold glow */
    0 2.5rem 3.5rem -2rem rgba(0, 0, 0, 0.7);
}
.contact__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}
.contact__form label {
  display: grid;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9c27a;
}
.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 0;
  border-radius: 0.625rem;
  background: rgba(20, 13, 7, 0.45); /* darker than the glass, so typing is easy to read */
  box-shadow: inset 0 0 0 1px rgba(240, 207, 138, 0.45);
  font: 400 0.9375rem var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: #fff3dc;
  appearance: none;
}
/* placeholder words: light, so they're easy to see on the glass */
.contact__form ::placeholder {
  color: rgba(255, 248, 236, 0.78);
  opacity: 1; /* Firefox fades placeholders by default */
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: 2px solid #e0b765;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(240, 207, 138, 0.18); /* a soft gold glow while typing */
}
/* a small gold arrow on the topic menu */
.contact__form select {
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #e0b765 50%),
    linear-gradient(135deg, #e0b765 50%, transparent 50%);
  background-position:
    calc(100% - 1.125rem) 50%,
    calc(100% - 0.8125rem) 50%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}
.contact__form select option {
  color: #140d07; /* readable in the open menu list */
}
.contact__form textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.contact__privacy {
  font-size: 0.75rem;
  text-align: center;
  color: #cbb592;
}
.contact__send {
  justify-self: center;
  min-width: 13rem;
  min-height: 2.875rem;
}

/* --- checking the boxes --- */
/* the anti-spam box: off screen, people never see it */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* the message under a box that needs fixing */
.contact__error {
  display: none;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ffb4a1;
}
.contact__error:not(:empty) {
  display: block;
}
.contact__form [aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px #ff9a83 !important;
}
.contact__summary {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  color: #ffb4a1;
}
.contact__summary:empty {
  display: none;
}
.contact__send[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* --- "Message sent" panel: covers the form until it's closed --- */
.contact__form {
  position: relative;
}
/* compact: once sent, the fields step aside and the card shrinks
   to fit the panel */
.contact__form:has(.contact__sent:not([hidden])) {
  padding: 0;
}
.contact__form:has(.contact__sent:not([hidden])) > :not(.contact__sent) {
  display: none;
}
.contact__sent {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem 2.75rem;
  border-radius: inherit;
  text-align: center;
  background: linear-gradient(180deg, #2f1f11, #1d1209);
}
.contact__sent[hidden] {
  display: none;
}
.contact__sent:focus {
  outline: none;
}
.contact__sent-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--gold-grad);
  color: #1d1209;
  font-size: 1.5rem;
  font-weight: 700;
}
.contact__sent-title {
  font: 500 1.75rem / 1.2 var(--font-head);
  color: #fff8ec;
}
.contact__sent p {
  max-width: 22rem;
  color: #eadcc4;
}
.contact__sent-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: grid;
  place-items: center;
  width: 2.75rem; /* easy to tap */
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 236, 200, 0.08);
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.5);
  color: #f6d891;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.contact__sent-close:hover {
  background: rgba(255, 236, 200, 0.16);
}
.contact__sent-close:focus-visible {
  outline: 2px solid #e0b765;
  outline-offset: 2px;
}
/* ------------------------------------------------------------
   ■ END: CONTACT PAGE > Form
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: CONTACT PAGE > Phone  (≤ 56em tablets/phones,
   ≤ 47.9375em phones)
   ------------------------------------------------------------
   SUMMARY: One column with the form first (it still overlaps
   the photo), then the topics. Phones: a darker photo so the
   title reads clearly, name/email stacked, full-width button.
   ------------------------------------------------------------ */
@media (max-width: 56em) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .contact__form {
    order: -1; /* the form comes first */
  }
  .contact__topics {
    padding-top: 2rem;
  }
}
@media (max-width: 47.9375em) {
  .contact__hero::after {
    background: linear-gradient(
      180deg,
      rgba(20, 13, 7, 0.55),
      rgba(20, 13, 7, 0.85)
    );
  }
  .contact__form {
    padding: 1.5rem 1.125rem;
  }
  .contact__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact__send {
    justify-self: stretch;
  }
}
/* ------------------------------------------------------------
   ■ END: CONTACT PAGE > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: CONTACT PAGE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: PREVIEW BADGE (MASTER BLOCK)
   ============================================================
   SUMMARY: A small dark pill with a glowing gold dot, top-left
   of every section that will hold products or articles: "Preview
   · products coming soon". It tells visitors (and affiliate
   networks reviewing the site) that the site is still being
   built. Delete the <p class="soon-badge"> lines in index.html
   when real products go live.
   It sits in the normal flow at the top of its section, so the
   space between the badge and the title below is always the
   same (2rem), on every section and every screen.
   ============================================================ */
/* a section with a badge starts the badge near its top edge */
.section:has(> .soon-badge) {
  padding-top: 1rem;
}
.soon-badge {
  position: relative;
  z-index: 5;
  display: flex;
  width: fit-content;
  /* lines up with the content's left edge; even 2rem gap below */
  margin: 0 auto 2rem max(0px, (100% - var(--container)) / 2);
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: rgba(20, 13, 7, 0.82);
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.55);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6d891;
  pointer-events: none;
}
.soon-badge span {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #e0b765;
  box-shadow: 0 0 0.5rem #e0b765; /* the soft glow */
}
@media (max-width: 47.9375em) {
  .section:has(> .soon-badge) {
    padding-top: 0.75rem;
  }
  .soon-badge {
    margin-bottom: 1.75rem;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
  }
}
/* ============================================================
   ■ END: PREVIEW BADGE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: ABOUT PAGE (MASTER BLOCK)
   ============================================================
   SUMMARY: APPLE CHAPTERS. A full-width opening photo with the
   title over it; three photo + story rows on a champagne band
   woven with damask and bronze vines, with the four promises
   (espresso, blossoms and gold vines) after the first row and
   the full-width "Begin the journey" photo banner after the
   second. Laptops and
   tablets keep two columns with less space; phones stack each
   row (photo first) and show the promises two by two.
   INSIDE: ABOUT PAGE > Opening · ABOUT PAGE > Chapters ·
           ABOUT PAGE > Promises · ABOUT PAGE > Journey banner ·
           ABOUT PAGE > Laptop & tablet · ABOUT PAGE > Phone
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Opening
   ------------------------------------------------------------ */
.about__hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center; /* the title block sits in the middle of the photo */
  min-height: clamp(24rem, 20rem + 10vw, 30rem); /* compact: the story starts sooner */
  padding: clamp(3.75rem, 3rem + 2vw, 4.5rem) var(--gutter); /* even top and bottom; the top leaves room for the breadcrumb */
  color: #fff8ec;
  text-align: center;
}
.about__hero-photo,
.about__hero-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* darkens the bottom so the words are easy to read */
.about__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgba(18, 10, 4, 0.95) 0%,
    rgba(18, 10, 4, 0.72) 55%,
    rgba(18, 10, 4, 0.4) 100%
  ); /* darker, so the words read clearly over the busy photo */
}
.about__hero-inner {
  max-width: 56rem;
  margin: 0 auto;
}
/* "Home / About" in the top-left corner, lined up with the page
   content like on the legal pages */
.about__crumbs {
  position: absolute;
  top: clamp(1.25rem, 1rem + 0.5vw, 1.75rem);
  left: max(var(--gutter), (100% - 72rem) / 2);
  margin: 0;
  color: #e6d4b6;
}
.about__crumbs a {
  text-decoration-color: rgba(240, 207, 138, 0.6);
}
.about__eyebrow {
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #f0cf8a;
}
/* a soft shadow lifts every line off the photo */
.about__hero .about__crumbs,
.about__eyebrow,
.about__title,
.about__lead {
  text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.55);
}
.about__title {
  margin: 0.625rem 0 0.875rem;
  font: 500 clamp(2.5rem, 2rem + 2.5vw, 4rem) / 1.08 var(--font-head);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.about__title em {
  font-style: italic;
  color: #f0cf8a;
}
.about__lead {
  max-width: 36rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.7;
  color: #fff3dc;
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Opening
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Chapters
   ------------------------------------------------------------
   SUMMARY: Champagne band with a faint damask and a bronze vine
   on each side (behind everything). Each row: a tall framed
   photo and the story; the middle row is flipped.
   ------------------------------------------------------------ */
.about__chapters {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 2.25rem + 2.5vw, 4.5rem) var(--gutter); /* compact */
  background: #f6eedf;
}
.about__chapters::before,
.about__chapters::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.about__chapters::before {
  background: url("images/patterns/damask-bronze.webp") repeat center top /
    20rem auto;
  opacity: 0.06;
}
.about__chapters::after {
  background:
    url("images/patterns/vine-tall-bronze.webp") left -15.5rem top / 24rem auto
      no-repeat,
    url("images/patterns/vine-tall-bronze-right.webp") right -15.5rem bottom /
      24rem auto no-repeat;
  opacity: 0.28; /* soft, so the words always read clearly */
}
.about__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 1rem + 5vw, 5rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}
.about__row + .about__row {
  margin-top: clamp(3rem, 2.25rem + 2.5vw, 4.5rem);
}
.about__row--flip .about__photo {
  order: 2; /* photo on the right */
}
.about__photo {
  overflow: hidden;
  aspect-ratio: 1 / 1; /* square: shorter rows, same look */
  border-radius: 1.5rem;
  box-shadow:
    0 0 0 1.5px rgba(20, 13, 7, 0.75), /* soft near-black frame line */
    0 2rem 3rem -2rem rgba(43, 26, 13, 0.5);
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the caravan photo: keep the line of camels in view, not the sky */
.about__photo img[src*="about-name-caravan"] {
  object-position: 50% 62%;
}
.about__kicker {
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #8a5a18;
}
.about__h2 {
  margin: 0.75rem 0 1.25rem;
  font: 500 clamp(2rem, 1.5rem + 1.6vw, 3rem) / 1.1 var(--font-head);
  color: #140d07;
  text-wrap: balance;
}
.about__h2 em {
  font-style: italic;
  color: #8a5a18;
}
.about__text p:not(.about__kicker) {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3d2f22;
}
.about__text p + p {
  margin-top: 1rem;
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Chapters
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Promises
   ------------------------------------------------------------
   SUMMARY: Compact espresso band with a gold damask, cherry
   blossoms (top-right, bottom-left) and gold vines (top-left,
   bottom-right) in the padding, so they never touch the words.
   Four solid photo cards: a photo on top that fades into the
   card, a gold number on the photo's edge, then a bright title
   and one line.
   ------------------------------------------------------------ */
.about__promises {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 3rem + 2.5vw, 5.5rem) var(--gutter)
    clamp(3.5rem, 2.75rem + 2.5vw, 5rem);
  text-align: center;
  color: #fff3dc;
  background: radial-gradient(90% 70% at 50% 0%, #3a2716, #1a110a);
}
.about__promises::before,
.about__promises::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.about__promises::before {
  background: url("images/patterns/damask-gold.webp") repeat center top /
    20rem auto;
  opacity: 0.09;
}
/* the flowers are already faded in their files, so no opacity here */
.about__promises::after {
  background:
    url("images/patterns/blossom-corner-top-right.webp") right -3rem top -2rem /
      clamp(12rem, 8rem + 12vw, 22rem) auto no-repeat,
    url("images/patterns/blossom-corner-bottom-left.webp") left -3rem bottom -2rem /
      clamp(9rem, 6rem + 8vw, 15rem) auto no-repeat,
    url("images/patterns/vine-gold-corner-top-left.webp") left -5rem top -3rem /
      clamp(7rem, 5.5rem + 2.5vw, 9rem) auto no-repeat,
    url("images/patterns/vine-gold-corner-bottom-right.webp") right -5rem bottom -3rem /
      clamp(7rem, 5.5rem + 2.5vw, 9rem) auto no-repeat;
}
.about__promises .about__kicker,
.about__promises .about__h2 em {
  color: #f0cf8a;
}
.about__promises .about__h2 {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  color: #fff8ec;
}
.about__promises ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* solid cards, so the pattern never shows through the words */
.about__promises li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.375rem;
  overflow: hidden;
  padding-bottom: 1.25rem;
  border: 1px solid rgba(224, 183, 101, 0.55); /* a real border, so it frames the photo too */
  border-radius: 1.25rem;
  background: linear-gradient(180deg, #2a1b0f, #1d1209);
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(0, 0, 0, 0.6);
}
/* the photo fills the top of the card and fades into it */
.about__promise-photo {
  position: relative;
  justify-self: stretch;
  aspect-ratio: 2 / 1; /* a slimmer photo strip keeps the cards compact */
}
.about__promise-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__promise-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #2a1b0f 0%, rgba(42, 27, 15, 0) 55%);
}
.about__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem; /* sits on the photo's bottom edge */
  border-radius: 50%;
  background: #1d1209;
  box-shadow: inset 0 0 0 1.5px #c9a15e;
  font: 500 1.0625rem var(--font-head);
  color: #f0cf8a;
}
.about__promises h3 {
  padding: 0 1rem;
  font: 500 1.25rem / 1.25 var(--font-head);
  color: #fff8ec;
}
.about__promises li p {
  padding: 0 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #eadcc4; /* bright enough to read easily on espresso */
}
/* very small phones: the vines tuck a little further off the edges */
@media (max-width: 22.5em) {
  .about__promises::after {
    background-position:
      right -3rem top -2rem,
      left -3rem bottom -2rem,
      left -6.5rem top -3rem,
      right -6.5rem bottom -3rem;
  }
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Promises
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Journey banner
   ------------------------------------------------------------
   SUMMARY: BANNER between "Our mission" and "Why the name".
   The entrance photo fills the band from edge to edge; a dark glow in the middle keeps the centered words
   and buttons easy to read. Compact on every screen.
   ------------------------------------------------------------ */
.about__end {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(22rem, 18rem + 8vw, 26rem);
  padding: clamp(4rem, 3rem + 3vw, 5.5rem) var(--gutter);
  text-align: center;
  background: #140d07; /* shows while the photo loads */
}
.about__end-photo,
.about__end-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%; /* the doors and both olive trees */
}
/* the dark glow behind the words */
.about__end::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60% 75% at 50% 50%,
    rgba(18, 10, 4, 0.82),
    rgba(18, 10, 4, 0.55) 70%,
    rgba(18, 10, 4, 0.4)
  );
}
.about__end-text {
  max-width: 40rem;
}
.about__end .about__h2 {
  margin-bottom: 0.75rem;
  color: #fff8ec;
  text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.55);
}
.about__end .about__h2 em {
  color: #f0cf8a;
}
.about__end-text > p {
  font-weight: 500;
  color: #fff3dc;
  text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.6);
}
.about__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
/* the light outline button, made for dark photos */
.about__end .btn--line {
  color: #fff8ec;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 215, 0.7);
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Journey banner
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Laptop & tablet  (≤ 64em)
   ------------------------------------------------------------
   SUMMARY: Promises go two by two; the vines get smaller and
   softer and sit at the very edges, away from the words.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  .about__promises ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
  }
  .about__chapters::after {
    background-position:
      left -15rem top,
      right -15rem bottom;
    background-size: 18rem auto;
    opacity: 0.16;
  }
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Laptop & tablet
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: ABOUT PAGE > Phone  (≤ 47.9375em)
   ------------------------------------------------------------
   SUMMARY: Each row stacks, photo first, in a wider 4:3 frame.
   The vines sit only at the very edges so they never run
   behind the words. Promise cards get tighter text.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  .about__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  .about__row--flip .about__photo {
    order: 0; /* photo first again */
  }
  .about__photo {
    aspect-ratio: 4 / 3;
  }
  .about__chapters::after {
    background-position:
      left -12.5rem top,
      right -12.5rem bottom;
    background-size: 14rem auto;
    opacity: 0.14;
  }
  .about__promises ul {
    gap: 0.75rem;
  }
  .about__promises h3 {
    padding: 0 0.625rem;
    font-size: 1.125rem;
  }
  .about__promises li p {
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
  .about__actions .btn {
    flex: 1 1 12rem; /* full-width buttons that never squash */
  }
}
/* very small phones: one promise per row */
@media (max-width: 22.5em) {
  .about__promises ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ------------------------------------------------------------
   ■ END: ABOUT PAGE > Phone
   ------------------------------------------------------------ */

/* ============================================================
   ■ END: ABOUT PAGE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: 404 PAGE (MASTER BLOCK)
   ============================================================
   SUMMARY: "Page not found". Clean champagne with a soft warm
   glow behind the logo, no pattern. On THIS page only, the
   "Questions or ideas?" strip below uses the same plain colour,
   so the two read as one smooth band (every other page keeps
   its damask strip). Tablets and bigger: the blossom-and-cat
   painting fills the band; phones keep it plain. The full logo, a bold ERROR 404 label, the
   title, one line and a "Back to home" button, all centered. Phones: a full-width button.
   ============================================================ */
.nf__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(3rem, 2.25rem + 2.5vw, 4.75rem) var(--gutter); /* compact */
  text-align: center;
  color: #140d07;
  /* a warm light behind the logo, on clean champagne */
  background:
    radial-gradient(60% 55% at 50% 30%, #fdf8ee 0%, rgba(253, 248, 238, 0) 70%),
    linear-gradient(180deg, #f7eddc, #f3e5cd);
}
/* 404 page ONLY: the "Questions or ideas?" strip turns the same
   plain champagne (no damask), so it flows on from the band above.
   :has(.nf__band) means "a page that contains the 404 band", so
   no other page is affected. */
body:has(.nf__band) .footer__contact {
  background: #f3e5cd;
}
body:has(.nf__band) .footer__contact::before {
  display: none;
}
.nf__logo {
  width: clamp(10rem, 8.5rem + 4.5vw, 14rem);
  height: auto;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0.5rem 1rem rgba(43, 26, 13, 0.25));
}
/* big and bold, so it's clear this is an error page */
.nf__error {
  font: 800 1.125rem var(--font-body);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6b4410;
}
.nf__title {
  margin: 0.625rem 0 0.875rem;
  font: 500 clamp(2.5rem, 2rem + 2.5vw, 4rem) / 1.08 var(--font-head);
  text-wrap: balance;
}
.nf__title em {
  font-style: italic;
  color: #8a5a18;
}
.nf__lead {
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #3d2f22;
}
.nf__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
/* Tablets, laptops and desktops: the blossom-and-cat painting
   fills the band from just under the header to the bottom, with
   the words in its clear centre. It uses a TALL version of the
   painting (the blossoms continue upward), so on any screen shape
   there is never an empty gap above it: wide screens show the
   lower part, narrower screens show more blossoms at the top.
   The page colour matches the painting's cream, so its edges
   disappear. Phones keep the plain champagne, with no painting. */
@media (min-width: 48em) {
  .nf__band {
    justify-content: center;
    min-height: max(32rem, 33.4vw);
    background: #f8eedf url("images/about/blossom-pond-tall-2000.webp") center
      bottom / cover no-repeat;
    background-image: image-set(
      url("images/about/blossom-pond-tall-2000.avif") type("image/avif"),
      url("images/about/blossom-pond-tall-2000.webp") type("image/webp")
    );
  }
  /* the strip below, on this page only: the painting's cream
     deepening gently, with two small blossom branches from the
     painting peeking in at the corners (top-right and
     bottom-left), well away from the words and the button */
  body:has(.nf__band) .footer__contact {
    overflow: hidden;
    background:
      url("images/patterns/pond-branch-right.webp") right -4.5rem top -4.5rem /
        12rem auto no-repeat,
      url("images/patterns/pond-branch-left.webp") left -5rem bottom -6rem /
        12rem auto no-repeat,
      linear-gradient(180deg, #f8eedf, #f3e4cb);
  }
}
@media (max-width: 47.9375em) {
  .nf__error {
    font-size: 1rem;
  }
  .nf__actions .btn {
    flex: 1 1 12rem; /* a full-width button, easy to tap */
  }
}
/* ============================================================
   ■ END: 404 PAGE (MASTER BLOCK)
   ============================================================ */

/* ============================================================
   ▶ START: PHONE READING (MASTER BLOCK)  (≤ 47.9375em)
   ============================================================
   SUMMARY: On phones the eyes travel straight down the middle,
   so The Caravan Edit, Reviews & Buying Guides and the "This
   week's picks" label are centered on one reading line, and
   so is the "Questions or ideas?" strip on every page, and
   "USD $ · English" sits bottom right in the footer. Those
   three titles sit on one line; each guide card shows its
   label centered with its title on ONE centered line below it.
   The Preview badges sit centered too. Bigger screens don't
   change.
   ============================================================ */
@media (max-width: 47.9375em) {
  /* the Preview badge: centered above each section's title */
  .soon-badge {
    margin-left: auto;
    margin-right: auto;
  }
  /* section headers: label, title, line and button centered */
  .edit__head,
  .journal .section__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .journal .section__head > * {
    margin-left: auto;
    margin-right: auto;
  }
  .journal .eyebrow {
    justify-content: center;
  }
  .edit__eyebrow,
  .journal .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.24em;
  }
  /* the label's side hairlines can't balance a wrapped label */
  .edit__eyebrow::before,
  .edit__eyebrow::after {
    display: none;
  }
  /* titles on ONE centered line (like Gift Guides). The size
     follows the screen width so each title always fits. */
  .edit__head .section__title,
  .journal .section__title {
    margin-left: auto;
    margin-right: auto;
    line-height: 1.15;
    white-space: nowrap;
  }
  .edit__head .section__title {
    font-size: min(1.875rem, 6.45vw);
  }
  .journal .section__title {
    font-size: min(1.875rem, 6.6vw);
  }
  .edit__lead,
  .journal__lead {
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance; /* the line under it uses the full width, evenly */
  }
  /* guide cards: label centered, title on ONE centered line.
     The size grows with the screen so the longest title
     ("Carry-on essentials for long-haul flights") always fits. */
  .guide__link {
    text-align: center;
  }
  .guide__title {
    font-size: min(1.25rem, 4.35vw);
    white-space: nowrap;
  }
  /* "Questions or ideas? Let's talk." strip (every page):
     tag, title, line, button and reply time centered */
  .footer__contact-text {
    align-self: center;
    text-align: center;
  }
  .footer__contact-title {
    font-size: min(1.875rem, 6.5vw);
    white-space: nowrap; /* "Questions or ideas? Let's talk." on one line */
  }
  /* "Questions or ideas? Let's talk." with
     "Here to help with products and partnerships." right under it,
     a small, even gap between the two lines (Apple style) */
  .footer__contact-lead {
    margin-top: 0.375rem;
    margin-left: auto;
    margin-right: auto;
    font-size: min(1.1875rem, 4.6vw);
    white-space: nowrap;
  }
  .footer__contact-more {
    display: none; /* phones drop ", stores" so the line fits */
  }
  .footer__contact-small {
    justify-content: center;
    text-align: center;
    font-size: min(0.875rem, 3.9vw); /* stays on one line on small phones */
  }
  /* "USD $ · English" in the bottom-right corner */
  .footer__bottom p:last-child {
    margin-left: auto;
    text-align: right;
  }
  /* About page chapters: only the small label ("WHY WE BEGAN",
     "OUR MISSION", "WHY THE NAME") is centered; the title and
     the paragraphs stay left-aligned for easy reading */
  .about__row .about__kicker {
    text-align: center;
  }
  /* About page "Four promises": each photo fills its card, with
     the number, title and line over a dark fade at the bottom */
  .about__promises li {
    position: relative;
    aspect-ratio: 3 / 4;
    align-content: end;
    padding: 0;
  }
  .about__promise-photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .about__promise-photo::after {
    background: linear-gradient(
      0deg,
      rgba(20, 13, 7, 0.96) 18%,
      rgba(20, 13, 7, 0.55) 50%,
      rgba(20, 13, 7, 0) 75%
    );
  }
  .about__num {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
  }
  .about__promises h3 {
    position: relative;
    padding: 0 0.5rem;
    font-size: 1rem;
  }
  .about__promises li p {
    position: relative;
    padding: 0 0.625rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  /* Contact page: the opening is centered */
  .contact__hero {
    text-align: center;
  }
  .contact__hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact__eyebrow {
    justify-content: center;
  }
  .contact__eyebrow::after {
    display: none; /* the side line can't balance a centered label */
  }
  .contact__lead {
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
  }
  /* Contact page order: "Choose a topic", a gold divider, the form,
     then "Order question?". display: contents lets the topics'
     heading, list and note line up with the form in one column. */
  .contact__topics {
    display: contents;
  }
  .contact__h2 {
    order: 1;
    padding-top: 2rem;
    text-align: center;
  }
  .contact__topics ul {
    order: 2;
  }
  .contact__grid::before {
    content: "";
    order: 3;
    display: block;
    height: 1px;
    margin: 2rem 0;
    background: linear-gradient(90deg, transparent, rgba(224, 183, 101, 0.55), transparent);
  }
  .contact__form {
    order: 4;
    margin-top: 0;
  }
  .contact__order {
    order: 5;
    margin-top: 1.75rem;
    padding-top: 0;
    border-top: 0;
    text-align: center;
  }
  /* the 4 topics as one clean list: title and line, › on the right */
  .contact__topics ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.4);
  }
  .contact__topic {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.875rem 1rem;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }
  .contact__topics li + li .contact__topic {
    border-top: 1px solid rgba(224, 183, 101, 0.25);
  }
  .contact__topic span {
    grid-column: 1;
  }
  .contact__topic::after {
    content: "›";
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 1.25rem;
    color: #e0b765;
  }
  .contact__topic:hover {
    transform: none;
  }
  /* "THIS WEEK'S PICKS" centered, with "Swipe →" under it */
  .deals__picks {
    flex-direction: column;
    gap: 0.375rem;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    color: #f6d891;
  }
  .deals__picks span {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: #e6d4b6;
  }
}
/* ============================================================
   ■ END: PHONE READING (MASTER BLOCK)
   ============================================================ */

/* ------------------------------------------------------------
   ▶ START: PHONE TAP AREAS
   ------------------------------------------------------------
   SUMMARY: Phones only (767px and below). Adds an invisible zone
   around small buttons so a thumb can hit them easily (about 44px
   tall). Nothing changes in how they look, because each zone is
   an empty see-through layer that belongs to its button, so
   tapping it counts as tapping the button. Tablets, laptops and
   desktops are untouched. The hero dots stay a little narrower
   than 44px so one dot's zone never covers the next dot.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  /* the zones are placed relative to their own button */
  .hero__dot,
  .card__shop,
  .legal__top {
    position: relative;
  }
  .hero__dot::before,
  .card__save-btn::after,
  .card__shop::after,
  .legal__top::after {
    content: "";
    position: absolute;
  }
  .hero__dot::before {
    inset: -0.5625rem -0.3125rem;
  }
  .card__save-btn::after {
    inset: -0.25rem;
  }
  .card__shop::after {
    inset: -0.125rem 0;
  }
  .best .card__shop::after {
    inset: -0.25rem 0; /* this button is a little shorter on phones */
  }
  .legal__top::after {
    inset: -0.6875rem 0;
  }
}
/* ------------------------------------------------------------
   ■ END: PHONE TAP AREAS
   ------------------------------------------------------------ */