/* ============================================================
   ▶ 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 that 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;
  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);
}
.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: #c9b799;
  /* 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);
  background: linear-gradient(
    0deg,
    rgba(18, 10, 4, 0.95) 0%,
    rgba(18, 10, 4, 0.6) 36%,
    rgba(18, 10, 4, 0) 62%
  );
}
.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;
}
.shop-menu__feature-title em {
  display: block; /* "one place." always starts its own line */
  font-style: italic;
  color: #f6d891;
}
.shop-menu__feature-cta {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold-light);
}
/* ------------------------------------------------------------
   ■ 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 */
.phone-menu__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 0.5rem;
}
.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;
}
.phone-menu__coin {
  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 var(--espresso),
    0 0 0 0.28125rem #e9c57f;
  transition: transform 0.2s var(--ease);
}
.phone-menu__cats a:active .phone-menu__coin {
  transform: scale(0.94); /* small "press" feel on tap */
}
.phone-menu__coin svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.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__coin svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}
/* ------------------------------------------------------------
   ■ 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).
   PHONE + TABLET = GALLERY SPLIT: photo on top melting into espresso,
   words underneath, so the words never cover the photo.
   INSIDE: HERO > Slides · HERO > Buttons · HERO > Controls ·
           HERO > Phone & tablet
   ============================================================ */

/* ------------------------------------------------------------
   ▶ 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;
}

.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
   ------------------------------------------------------------ */

/* ============================================================
   ■ 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 and phones, 1 column on very small phones.
   INSIDE: TRUST BAR > Card · TRUST BAR > Badges ·
           TRUST BAR > Tablet · TRUST BAR > Phone ·
           TRUST BAR > Small 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 */
  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: Smaller lift; badge sits above the words in each
   square so the text has the full width.
   ------------------------------------------------------------ */
@media (max-width: 47.9375em) {
  :root {
    --trust-lift: 1.75rem;
  }
  .trust__card {
    padding: 0.25rem;
  }
  .trust__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0.875rem;
  }
  .trust__badge {
    width: 2.5rem;
  }
  .trust__badge svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  .trust__title {
    font-size: 0.875rem;
  }
  .trust__text {
    font-size: 0.875rem;
  }
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Phone
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TRUST BAR > Small phone  (≤ 22.5em ≈ 360px)
   ------------------------------------------------------------
   SUMMARY: One promise per row, badge on the left, so the
   words stay big enough to read on 320px screens.
   ------------------------------------------------------------ */
@media (max-width: 22.5em) {
  .trust__card {
    grid-template-columns: 1fr;
  }
  .trust__item {
    flex-direction: row;
    align-items: center;
    padding: 0.875rem;
    border-right: 0;
    border-bottom: 1px solid rgba(201, 161, 94, 0.3);
  }
  .trust__item:last-child {
    border-bottom: 0;
  }
}
/* ------------------------------------------------------------
   ■ END: TRUST BAR > Small 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 > 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 (swipe on phones, ← → buttons
   on desktop) 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;
}

.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 slides sideways (drag, swipe or arrows)
   and snaps into place; soft fades appear on whichever side
   has more cards to see.
   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 */
.cats .cats__name {
  font-weight: 600;
  color: #140b04;
}
.cats .cats__go,
.cats .cats__hint {
  font-weight: 700;
  color: #2a1608;
}
.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: A sideways-scrolling row. Each card = gold frame
   around a 4:5 product photo, then the name and "EXPLORE →",
   both centered under the photo.
   ------------------------------------------------------------ */
.cats__track {
  --fade-l: 0rem; /* script.js turns these on when there is more to see */
  --fade-r: 0rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(12.5rem, 9rem + 7vw, 15rem);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.375rem 1.25rem; /* room for the frame's shadow */
  scroll-padding-inline: 0.375rem; /* first card snaps flush, so ← can fade out */
  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__track.can-left {
  --fade-l: 3rem;
}
.cats__track.can-right {
  --fade-r: 3rem;
}
.cats__track::-webkit-scrollbar {
  display: none; /* hide the scrollbar (Chrome, Safari) */
}
.cats__track > li {
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
  .cats__track {
    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, snapping and
   gliding switch off so the row follows the mouse exactly.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .cats__track {
    cursor: grab;
  }
}
.cats__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  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__controls[hidden],
.cats__controls[hidden] + .cats__hint {
  display: none; /* script.js hides the arrows when everything fits */
}
.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:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.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__track {
    grid-auto-columns: 62%;
    gap: 0.875rem;
    margin-inline: calc(var(--gutter) * -1); /* run to the screen edges */
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .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;
}
.deals .link-underline {
  color: #f6d891;
  border-color: #f6d891;
}
.deals .link-underline:hover {
  color: #fff3dc;
  border-color: #fff3dc;
}

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

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Friday banner
   ------------------------------------------------------------
   SUMMARY: One clean gold hairline around a soft glass panel.
   Three columns: words · countdown · button.
   ------------------------------------------------------------ */
.deals__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.25rem 3rem;
  margin-bottom: 1.5rem;
  padding: 1.375rem 2rem;
  border-radius: 1.25rem;
  /* 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);
}
.deals__box .eyebrow--light {
  color: #f0cf8a;
}
.deals__big {
  margin: 0.5rem 0 0.375rem;
  font: 500 clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem) / 1.1 var(--font-head);
  color: #fff8ec;
}
.deals__big em {
  font-style: italic;
  color: #f0cf8a;
}
.deals__text {
  font-size: 1rem;
  color: #e6d4b6;
}
.deals__text time {
  font-weight: 600;
  color: #fff3dc;
}
.deals__box .btn {
  white-space: nowrap;
}

/* four equal tiles, each as wide as the widest label */
.countdown {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.countdown > div {
  display: grid;
  place-items: center;
  padding: 0.625rem 0.75rem;
  border-radius: 0.875rem;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(224, 183, 101, 0.35);
}
.countdown > div > span {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: #f6d891;
  font-variant-numeric: tabular-nums; /* every digit the same width, so nothing jiggles */
}
.countdown small {
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cbb592;
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Friday banner
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ 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: 1.25rem;
}
.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: 4 / 5;
  border-radius: 0.75rem;
}
.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.25rem;
}
.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: Words on the left; countdown with the button under
   it on the right, so the headline never gets squeezed.
   ------------------------------------------------------------ */
@media (max-width: 80em) {
  .deals__box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2.5rem;
  }
  .deals__intro {
    grid-row: span 2;
  }
  .deals__box .btn {
    justify-self: stretch;
  }
}
/* ------------------------------------------------------------
   ■ END: TODAY'S DEALS > Laptop
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ▶ START: TODAY'S DEALS > Phone  (≤ 64em tablets, ≤ 47.9375em phones)
   ------------------------------------------------------------
   SUMMARY: Tablets: the banner stacks (words, countdown, button)
   and the cards become a sideways swipe row. Phones: the
   countdown and button go full width, the labels shorten to
   MIN / SEC so the numbers always fit, the cards fill 78% of
   the screen so the next one peeks in, the store pill gets a
   bigger tap area, and both vines get slimmer.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  .deals__box {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .deals__intro {
    grid-row: auto;
  }
  .deals__box .btn {
    justify-self: start;
  }
  .deals__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(15rem, 42%, 18rem);
    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;
  }
}
@media (max-width: 47.9375em) {
  .deals {
    background-position:
      right -9.5rem top 28rem,
      0 0;
    background-size:
      16rem auto,
      auto;
  }
  .deals__box {
    justify-items: stretch;
    padding: 1.25rem 1.125rem;
  }
  .deals__box .btn {
    justify-self: stretch;
  }
  .countdown {
    gap: 0.5rem;
  }
  .countdown > div {
    padding: 0.625rem 0.25rem;
  }
  .countdown > div > span {
    font-size: 1.625rem;
  }
  .countdown small {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
  }
  .countdown__long {
    display: none; /* "Minutes" → "Min", "Seconds" → "Sec" */
  }
  /* 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 .link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  padding: 0 1.5rem;
  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 {
  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
   ------------------------------------------------------------ */

/* ============================================================
   ■ 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 {
  font: 500 clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem)/1.1 var(--font-head);
  color: #fff8ec;
}
.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 {
  color: #f6d891;
}
/* plain Inter, the same as the sentence on the hero slides */
.story__lead {
  max-width: 29rem;
  margin-top: 0.875rem;
  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).
   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;
  line-height: 1.45;
  break-inside: avoid; /* a link never splits across 2 columns */
}
.footer__main a {
  color: #e3d4bb;
  transition: color 0.2s;
}
.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 so each stays on one line.
   ------------------------------------------------------------ */
@media (max-width: 80em) {
  .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;
  }
}
@media (max-width: 47.9375em) {
  .newsletter__form .btn {
    flex: 1 1 100%;
  }
}
/* ------------------------------------------------------------
   ■ END: FOOTER > Phone
   ------------------------------------------------------------ */

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