/* ============================================================
   Beyond Packaging — custom styles
   Rebuilt to match Figma frame 1:2 (1440 × 5144) exactly.
   Desktop-first, responsive at 1200 / 992 / 768 / 576.
   ============================================================ */

:root {
  --brand-red: #9e1c2c;
  --brand-maroon: #68262e;
  --ink: #000000;
  --white: #ffffff;

  --hero-bg: #f2f2f2;
  --card-alt: #f1f0f4;
  --tile-grey: #f6f6f6;
  --section-pink: #fff9f9;
  --footer-pink: #f9efee;

  --border-soft: #e9e9e9;
  --border-hair: #eaeaea;
  --border-card: #e5e5e5;
  --muted: #a9a1a0;
  --icon-grey: #897979;
  --quote-grey: #cfcfcf;

  --radius-band: 9px;
  --radius-card: 10px;
  --radius-tile: 20px;
  --radius-pill: 60px;
  --shadow-strip: 0 4px 39.5px rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { text-decoration: none; }

/* ---------- Cross-browser normalisation ----------
   Bootstrap Reboot handles the basics; these are the differences it leaves
   behind. Declared early so component rules below still win. */
html {
  -webkit-text-size-adjust: 100%; /* iOS enlarges text when rotated to landscape */
  text-size-adjust: 100%;
}
body { -webkit-tap-highlight-color: transparent; } /* grey flash on tap in iOS */

/* iOS Safari forces its own rounded corners and inner shadow onto text fields.
   Checkbox, radio, file and number inputs are deliberately left alone — the
   admin relies on their native controls, and appearance:none would hide them. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Strips native button chrome; each component sets its own radius below. */
button,
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit puts its own clear button inside search fields. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Firefox renders placeholders at ~54% opacity; every other engine draws them
   solid, so the same grey looks lighter there unless this is pinned. */
::placeholder { opacity: 1; }

/* ---------- Autofill ----------
   Chrome, Edge and Safari paint autofilled fields with their own pale blue and
   lock background-color for that state, so the colour can only be replaced with
   a large inset shadow. Every field on the storefront sits on white — either its
   own background or the white pill it lives inside — so one value covers all. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--white) inset;
  box-shadow: 0 0 0 100px var(--white) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  /* Chrome re-applies its own colour on a delayed transition; parking that
     transition stops the blue flashing back in after focus. */
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* Firefox honours background directly. */
input:autofill,
textarea:autofill,
select:autofill {
  background: var(--white);
  color: var(--ink);
}

/* Content wrappers (Figma side margins at 1440: 160 / 55 / 141) */
.wrap-1120 { width: min(1120px, 100% - 48px); margin-inline: auto; }
.wrap-1330 { width: min(1330px, 100% - 48px); margin-inline: auto; }
.wrap-1158 { width: min(1158px, 100% - 48px); margin-inline: auto; }

.section-title {
  color: var(--brand-red);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  margin: 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Shared black pill button (Figma: h40, radius 60, white 36px arrow) */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 30px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.btn-pill:hover { color: var(--white); opacity: .85; }
.btn-pill__arrow { width: 36px; height: 36px; display: block; }
.btn-pill--shopall { font-size: 18px; padding-left: 26px; }

/* ============ HEADER (Figma: 77px tall) ============ */
.site-header { background: var(--white); }

.header-wrap {
  max-width: 1440px;
  margin-inline: auto;
  height: 77px;
  display: flex;
  align-items: center;
  padding: 0 127px 0 127px;
}

.header-logo img { width: 173px; height: 42px; display: block; }

.header-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: 62px;
}
.header-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.header-nav__link:hover { color: var(--brand-red); }
.header-nav__link .chev { width: 12px; height: 7px; transform: rotate(180deg); }

/* Search (Figma: 226×40, border #f2f2f2, radius 10, icon on the RIGHT, black 14px text) */
.search-box {
  display: flex;
  align-items: center;
  width: 226px;
  height: 40px;
  border: 1px solid var(--hero-bg);
  border-radius: var(--radius-card);
  padding: 0 14px 0 20px;
  margin-left: auto;
  background: var(--white);
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.search-box input::placeholder { color: var(--ink); opacity: 1; }
.search-box__icon { width: 20px; height: 20px; flex: 0 0 auto; }

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 20px;
  gap: 15px;
}
.header-icon img { width: 22px; height: 22px; display: block; }

/* Cart: red bag icon, count "20" to the RIGHT of it (Figma 81:445 / 81:452) */
.header-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-cart img { width: 24px; height: 24px; display: block; }
.header-cart__count {
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Mobile toggle + menu */
.header-toggle {
  border: 0;
  background: none;
  padding: 6px 4px;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.header-toggle span { width: 24px; height: 2px; background: var(--ink); display: block; }

.search-box--mobile { width: 100%; margin: 0 0 4px; }

/* ============ MOBILE NAV (off-canvas drawer, < 992px) ============ */
.mobile-nav {
  width: min(340px, 86vw);
  background: var(--white);
}
.mobile-nav__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}
/* The logo SVG is preserveAspectRatio="none" with height="100%", so height:auto
   has nothing to resolve against and it stretches. Both axes are set here, on
   the same 172.675 x 42.428 ratio as its viewBox. */
.mobile-nav__logo img { width: 148px; height: 36px; display: block; }
.mobile-nav__close {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
}
.mobile-nav__close::before,
.mobile-nav__close::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 17px;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.mobile-nav__close::before { transform: rotate(45deg); }
.mobile-nav__close::after { transform: rotate(-45deg); }

.mobile-nav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 28px;
}
.mobile-nav__promo {
  display: block;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  background: var(--brand-maroon);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}

.mobile-nav__groups { margin-top: 6px; }
.mobile-nav__group + .mobile-nav__group { border-top: 1px solid var(--border-hair); }
.mobile-nav__group > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav__group > summary::-webkit-details-marker { display: none; }
.mobile-nav__group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .2s;
}
.mobile-nav__group[open] > summary::after { transform: rotate(-135deg); }
.mobile-nav__group a {
  display: block;
  padding: 9px 0 9px 14px;
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 500;
}

.mobile-nav__cats {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}
/* No hairlines between the category rows — the icon chips already separate them
   and five dividers in a row reads as clutter. */
.mobile-nav__group--cat + .mobile-nav__group--cat { border-top: 0; }
.mobile-nav__group--cat > summary { padding: 8px 0; font-weight: 500; }
.mobile-nav__cat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* The category icons are white artwork drawn for the red bar, so they sit on a
   red chip here rather than disappearing into the white drawer. */
.mobile-nav__chip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Sub-links line up with the label, clearing the icon chip. */
.mobile-nav__group--cat a { padding-left: 46px; }

/* ============ MEGA MENU (hover dropdown on both nav bars) ============ */
.site-header { position: relative; z-index: 20; }
.mega-layer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
}
/* One persistent panel that stays open and resizes as you move between
   triggers — the content slides in/out, the box itself never closes. */
.mega-viewport {
  position: absolute;
  top: 8px;
  left: 0;
  width: 620px;
  max-width: calc(100vw - 32px);
  height: 0;
  background: var(--white);
  border-radius: var(--radius-tile);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    height .3s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}
.mega-viewport.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    height .3s cubic-bezier(.4, 0, .2, 1),
    opacity .18s ease,
    transform .18s ease,
    visibility 0s;
}
.mega {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 24px;
  padding: 28px 32px;
}
.mega[hidden] { display: none; }

@keyframes megaEnterFromRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes megaEnterFromLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes megaExitToLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-48px); }
}
@keyframes megaExitToRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(48px); }
}
.mega[data-motion="from-end"]   { animation: megaEnterFromRight .45s cubic-bezier(.4, 0, .2, 1); }
.mega[data-motion="from-start"] { animation: megaEnterFromLeft  .45s cubic-bezier(.4, 0, .2, 1); }
.mega[data-motion="to-start"]   { animation: megaExitToLeft     .45s cubic-bezier(.4, 0, .2, 1) forwards; }
.mega[data-motion="to-end"]     { animation: megaExitToRight    .45s cubic-bezier(.4, 0, .2, 1) forwards; }

.mega__links {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.mega__links a {
  display: block;
  padding: 7px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.mega__links a:hover,
.mega__links a:focus-visible { color: var(--brand-red); }
.mega__links li:first-child a { font-weight: 700; }
.mega__media {
  flex: 0 0 250px;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hero-bg);
}
.mega__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Triggers show the open state the same way a hover does */
.header-nav__link[aria-expanded="true"] { color: var(--brand-red); }
.category-bar__list a[aria-expanded="true"] { opacity: .75; }

/* Hover targets fill the full height of their row. The label text is only ~26px
   tall in a 60px bar, so without this the pointer drops off the trigger as soon
   as it drifts above or below the words and the panel starts closing. Padding
   is transparent, so nothing moves visually. */
.header-nav { align-self: stretch; }
.header-nav__link { height: 100%; }

.category-bar__list { align-self: stretch; align-items: stretch; }
.category-bar__list li { display: flex; }

/* Invisible bridge across the 8px gap between the bar and the panel, so moving
   down into the menu never crosses dead space. Only live while the menu is
   open, otherwise it would swallow clicks on the section underneath. */
.mega-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
}
.mega-layer:has(.mega-viewport.is-open)::before { pointer-events: auto; }

/* Touch/small screens use the collapsed mobile menu instead */
@media (max-width: 991.98px) {
  .mega-layer { display: none; }
}

/* ============ CATEGORY BAR (Figma: 60px tall) ============ */
/* Maroon segment bleeds to the left screen edge; boundary at 50% − 358px (matches 1440 layout) */
.category-bar {
  height: 60px;
  background: linear-gradient(90deg,
    var(--brand-maroon) 0,
    var(--brand-maroon) calc(50% - 358px),
    var(--brand-red) calc(50% - 358px),
    var(--brand-red) 100%);
}
.category-bar__wrap {
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
}
.category-bar__promo {
  flex: 0 0 auto;
  width: 362px;
  padding-left: 128px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.category-bar__list {
  flex: 1;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 46px;
  margin: 0;
  padding: 0 24px 0 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-bar__list::-webkit-scrollbar { display: none; }
.category-bar__list a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.category-bar__list a:hover { color: var(--white); opacity: .85; }
/* Category icons come from the database now, so they are sized by rule rather
   than per-icon classes — an uploaded icon of any dimensions still fits. The
   24px height sits in the middle of the original 22-26px artwork. */
.cat-ic {
  display: block;
  width: auto;
  height: 24px;
  max-width: 28px;
  object-fit: contain;
}

/* ============ HERO (Figma: grey band 1510×600, radius 9, white card 430×360) ============ */
.hero__band {
  position: relative;
  height: 600px;
  background: var(--hero-bg);
  border-radius: var(--radius-band);
  overflow: hidden;

  /* The hero is composed on the same centred 1440 grid as .header-wrap, so the
     card stays pinned to it while the band bleeds to the screen edges. */
  --hero-stage: max(0px, (100% - 1440px) / 2);

  /* Card's left gutter — tracks .header-wrap's padding so the two line up. */
  --hero-gutter: 127px;
}
.hero__photo {
  /* The photo is the band: one 1440x600 artwork carrying its own grey backdrop,
     padded out to 2560 by repeating its edge columns. Cover then scales it 1:1
     at every band width up to 2560 — the cups never grow, never crop top or
     bottom, and the grey reaches both screen edges with no seam against
     --hero-bg. Below 1440 it crops evenly from both sides. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The anchor takes the photo's place in the band so the whole backdrop is
   clickable; .hero__card follows it in source order and so stays on top. */
.hero__photo-link {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__card {
  position: absolute;
  /* Straight onto the 1440 grid's gutter. The artwork leaves its left third
     clear for exactly this, so the card needs no measurement off the photo. */
  left: calc(var(--hero-stage) + var(--hero-gutter));
  top: 120px;
  width: 430px;
  min-height: 360px;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 57px 51px 48px;
}
.hero__title {
  color: var(--brand-red);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.28;
  margin: 0 0 44px;
  max-width: 314px;
}
.hero__text {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 30px;
  max-width: 314px;
}
.hero__card .btn-pill { margin-left: -3px; }

/* Shared by every clickable homepage photo outside the hero. The tiles already
   size themselves and clip the overflow, so the anchor just fills its box and
   leaves the image's own object-fit rules doing the work. */
.media-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============ FEATURE STRIP (Figma: 1200×100, overlaps hero by 44px) ============ */
.features { position: relative; z-index: 2; }
.features__card {
  width: min(1200px, 100% - 48px);
  margin: -44px auto 0;
  height: 100px;
  background: var(--white);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-strip);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.feature {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 12px;
}
.feature__icon { width: 40px; height: 40px; flex: 0 0 auto; }
.feature__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  max-width: 118px;
}
.feature-divider {
  width: 1px;
  height: 50px;
  background: var(--border-soft);
  flex: 0 0 auto;
}

/* ============ BEST SELLERS ============ */
.bestsellers { margin-top: 46px; }
.bestsellers .section-head { margin-bottom: 33px; }

.carousel-nav { display: flex; align-items: center; gap: 27px; }
.carousel-nav__btn {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}
.carousel-nav__btn:hover { opacity: .6; }
.carousel-nav__btn.is-disabled { cursor: default; }
.carousel-nav__btn.is-disabled:hover { opacity: 1; }
.carousel-nav__btn img { width: 43px; height: 44px; display: block; }
.carousel-nav__btn--next img { transform: scaleX(-1); }

/* Track starts at the 1120 wrap's left edge and bleeds to the right screen edge (Figma) */
.bestsellers__viewport {
  overflow: hidden;
  margin-left: calc(max((100% - 1120px) / 2, 24px));
}
.carousel-track {
  display: flex;
  gap: 29px;
  transform: translateX(0);
  transition: transform .45s ease;
  will-change: transform;
}

/* Product card (Figma: 300×534, border #e9e9e9 r10; image area 300×400; divider; text pad-left 38) */
.product-card {
  flex: 0 0 300px;
  height: 534px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
}
.product-card__media {
  height: 399px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--white);
}
.product-card__media--alt { background: var(--card-alt); }
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.product-card__body { padding: 28px 20px 0 38px; }
.product-card__name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 10px;
}
.product-card__price {
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* ============ REAL BRANDS (Figma: 370px tiles, 5px gaps, middle tile #f6f6f6) ============ */
.brands { margin-top: 68px; }
.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.brands__tile {
  border-radius: var(--radius-tile);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.brands__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brands__tile--copy {
  background: var(--tile-grey);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.brands__tile--copy .section-title { margin-bottom: 28px; }
.brands__text {
  font-size: 16px;
  font-weight: 500;
  max-width: 326px;
  margin: 0 0 32px;
}
.brands__tile--copy .btn-pill { font-size: 16px; }

/* ============ PRODUCT COLLECTIONS (Figma: 316×345 tiles, ~22px gaps, 55px margins) ============ */
.collections { margin-top: 100px; }
.collections .section-head { margin-bottom: 45px; }
.collections__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.collection-card__media {
  border-radius: var(--radius-tile);
  overflow: hidden;
  aspect-ratio: 316 / 345;
}
.collection-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card__name {
  font-size: 20px;
  font-weight: 500;
  margin: 26px 0 6px;
  padding-left: 24px;
}
.collection-card__link {
  display: inline-block;
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 500;
  padding-left: 24px;
}
.collection-card__link:hover { color: var(--brand-red); text-decoration: underline; }

/* ============ HOW ITS WORKS (Figma: #fff9f9 403px band) ============ */
.how {
  margin-top: 63px;
  background: var(--section-pink);
  padding: 59px 0 78px;
}
.how__title { text-align: center; }
.how__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 62px;
}
.how__step {
  flex: 0 1 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.how__icon {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.how__icon img { width: 44px; height: 44px; object-fit: contain; }
.how__step-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
  max-width: 252px;
}
.how__step-text {
  color: var(--brand-maroon);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  max-width: 243px;
}
.how__arrow {
  width: 177px;
  height: 8px;
  flex: 0 1 auto;
  margin-top: 20px; /* aligns with icon row centre */
  min-width: 60px;
}

/* ============ TESTIMONIAL (Figma: all three blocks 345px tall) ============ */
.testimonial { margin-top: 83px; }
.testimonial__heading { text-align: center; }
.testimonial__intro {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  max-width: 503px;
  margin: 20px auto 0;
}
.testimonial__row {
  display: flex;
  gap: 13px;
  justify-content: center;
  margin-top: 59px;
}
.testimonial__photo {
  flex: 0 0 316px;
  height: 345px;
  border-radius: var(--radius-tile);
  overflow: hidden;
}
.testimonial__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial__card {
  flex: 0 1 670px;
  height: 345px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-tile);
  margin: 0;
  padding: 36px 60px 0 67px;
  position: relative;
}
.testimonial__quote-mark {
  font-family: "Judson", Georgia, serif;
  font-size: 128px;
  line-height: .55;
  color: var(--quote-grey);
  display: block;
  height: 62px;
  overflow: hidden;
}
.testimonial__text {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  margin: 8px 0 0;
  max-width: 520px;
}
.testimonial__author {
  color: var(--brand-red);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 18px;
}

/* ============ ENQUIRY FORM ("Speak with Our Experts") ============ */
.enquiry {
  width: min(770px, 100% - 48px);
  margin: 72px auto 0;
  text-align: center;
}
.enquiry__title { margin-bottom: 14px; }
.enquiry__intro {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 auto 44px;
  max-width: 620px;
}
.enquiry__status {
  margin: 0 0 28px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  background: var(--section-pink);
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 600;
}

/* Two columns while each one can still hold 260px, one column below that. No
   breakpoint needed — it reflows off the form's own width. */
.enquiry__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.enquiry__field { text-align: left; }
.enquiry__field--message { margin-top: 20px; }
.enquiry__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.enquiry input,
.enquiry textarea {
  width: 100%;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}
.enquiry input { height: 58px; padding: 0 20px; }
.enquiry textarea {
  min-height: 170px;
  padding: 18px 20px;
  line-height: 1.6;
  resize: vertical;
}
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: #6f6f6f; }
.enquiry input:focus,
.enquiry textarea:focus {
  outline: none;
  border-color: var(--brand-red);
}
.enquiry [aria-invalid="true"] { border-color: var(--brand-red); }
.enquiry__error {
  display: block;
  margin-top: 6px;
  color: var(--brand-red);
  font-size: 13px;
  font-weight: 500;
}

.enquiry__submit {
  width: 370px;
  max-width: 100%;
  height: 56px;
  margin-top: 34px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-red);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
}
.enquiry__submit:hover { opacity: .9; }

/* ============ FOOTER (Figma: #f9efee, 403px, margins 141) ============ */
.site-footer {
  margin-top: 83px;
  background: var(--footer-pink);
  padding: 63px 0 35px;
}
.footer__grid { display: flex; align-items: flex-start; }
.footer__col--main { flex: 0 0 410px; }
.footer__col--products { margin-left: 99px; }
.footer__col--products { flex: 0 0 286px; }
.footer__col:nth-child(3) { flex: 0 0 218px; }
.footer__col:last-child { flex: 1 1 auto; }

.footer__lead {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 24px;
  max-width: 414px;
}

.newsletter__field {
  display: flex;
  align-items: center;
  width: 409px;
  max-width: 100%;
  height: 49px;
  background: var(--white);
  border-radius: 100px;
  padding: 0 6px 0 25px;
}
.newsletter__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.newsletter__field input::placeholder { color: var(--muted); opacity: 1; }
.newsletter__btn {
  flex: 0 0 auto;
  width: 104px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .2s ease;
}
.newsletter__btn:hover { opacity: .85; }
.newsletter__msg { font-size: 13px; margin: 8px 4px 0; min-height: 18px; }
.newsletter__msg.is-error { color: var(--brand-red); }
.newsletter__msg.is-success { color: #1a7d3c; }

/* Spacing sits on the link, not the image, so wrapping the logo in an anchor
   can't change the footer's layout through margin collapsing. */
.footer__logo-link { display: inline-block; margin-top: 62px; }
.footer__logo { width: 173px; height: 42px; display: block; }

.footer__heading {
  font-size: 16px;
  font-weight: 600;
  line-height: 27px;
  margin: 0 0 13px;
}
.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { line-height: 27px; }
.footer__links a { color: var(--ink); font-size: 14px; font-weight: 400; }
.footer__links a:hover { color: var(--brand-red); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 14px;
  line-height: 27px;
}
.footer__legal a { color: var(--ink); }
.footer__legal a + a { margin-left: 40px; }
.footer__legal a:hover { color: var(--brand-red); }

/* ============================================================
   RESPONSIVE (desktop-first)
   ============================================================ */

@media (max-width: 1200px) {
  .header-wrap { padding: 0 24px; }
  .header-nav { margin-left: 32px; gap: 24px; }
  .category-bar__promo { width: auto; padding-left: 24px; padding-right: 20px; }
  .category-bar { background: var(--brand-red); }
  .category-bar__promo { background: var(--brand-maroon); height: 100%; display: inline-flex; align-items: center; }

  /* Header padding drops to 24px here, so the hero gutter follows it and the
     card keeps tracking the logo. The photo is no longer cropped to fill the
     band height: object-fit: cover trims the sides as the box narrows, which
     dragged the green cup left — at 992px it cropped the cup's left edge off
     entirely and parked the rest under the card. Natural aspect keeps the cup
     a fixed 8.67% into the photo, which is what the clearance maths assumes. */
  .hero__band { --hero-gutter: 24px; }

  /* Side photos shrink and stretch to match the card, which grows as its text wraps */
  .testimonial__row { align-items: stretch; }
  .testimonial__photo { flex: 0 0 clamp(150px, 22vw, 300px); height: auto; }
  .testimonial__card {
    flex: 1 1 auto;
    height: auto;
    min-height: 345px;
    padding: 32px 40px 36px 44px;
  }
  .testimonial__text { font-size: 20px; max-width: none; }

  .footer__col--main { flex-basis: 340px; }
  .footer__col--products { margin-left: 40px; flex-basis: 230px; }
  .footer__col:nth-child(3) { flex-basis: 180px; }
}

@media (max-width: 991.98px) {
  .section-title { font-size: 30px; }

  .search-box { margin-left: 0; }
  .header-actions { margin-left: auto; }

  /* Category links live in the off-canvas drawer at this size, so the red
     scrolling bar comes out of the header entirely. */
  .category-bar { display: none; }

  /* Stacked layout: photo and card share one column width so their left and
     right edges line up. Bottom padding keeps the -44px feature strip from
     covering the card's button. */
  .hero__band { height: auto; padding: 32px 24px 80px; --hero-stack-w: 520px; }
  /* Stacked, the band no longer supplies the backdrop, so the photo becomes a
     tile of its own: a fixed height cropping to the middle of the cups rather
     than a 4:1 sliver of mostly empty grey. */
  .hero__photo-link { position: static; width: 100%; height: 240px; max-width: var(--hero-stack-w); margin: 0 auto; border-radius: var(--radius-tile); overflow: hidden; }
  .hero__photo { transform: none; display: block; }
  .hero__card { position: static; width: 100%; max-width: var(--hero-stack-w); margin: 0 auto; min-height: 0; padding: 40px 32px; }
  /* The 314px cap is sized for the narrow desktop card; here the card is much
     wider, so the heading runs the full content width instead of leaving a gap
     down its right side. */
  .hero__title { max-width: none; }

  .features__card { height: auto; flex-wrap: wrap; padding: 16px 8px; justify-content: flex-start; }
  .feature { width: 50%; padding: 14px 16px; }
  .feature-divider { display: none; }

  /* dense flow backfills the hole left when the copy tile spans both columns;
     the leftover odd tile spans the full row so no cell is left empty */
  .brands__grid { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .brands__tile--copy { grid-column: span 2; aspect-ratio: auto; padding: 48px 24px; }
  .brands__tile:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }

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

  .how__row { flex-wrap: wrap; row-gap: 40px; }
  .how__step { flex: 0 0 50%; }
  .how__arrow { display: none; }

  /* Quote card takes the full first row; the two photos share the row beneath it */
  .testimonial__row { flex-wrap: wrap; }
  .testimonial__card {
    order: -1;
    flex: 0 0 100%;
    height: auto;
    min-height: 0;
    padding: 32px 40px 40px 44px;
  }
  .testimonial__photo { flex: 1 1 0; min-width: 0; height: 240px; }

  .footer__grid { flex-wrap: wrap; row-gap: 40px; }
  .footer__col--main { flex: 0 0 100%; }
  .footer__col--products { margin-left: 0; }
}

@media (max-width: 767.98px) {
  .category-bar__promo { display: none; }
  .category-bar { background: var(--brand-red); }
  .category-bar__list { padding-left: 24px; gap: 30px; }

  .hero__title { font-size: 26px; margin-bottom: 24px; }

  .enquiry { margin-top: 44px; }
  .enquiry__intro { margin-bottom: 32px; }
  .enquiry__submit { width: 100%; margin-top: 26px; }

  .feature { width: 100%; }

  .brands__grid { grid-template-columns: 1fr; }
  .brands__tile--copy { grid-column: auto; }
  .brands__tile:last-child { grid-column: auto; aspect-ratio: 1 / 1; }

  .how__step { flex: 0 0 100%; }

  .testimonial__text { font-size: 20px; }

  .footer__col--products,
  .footer__col:nth-child(3),
  .footer__col:last-child { flex: 0 0 100%; }
}

@media (max-width: 575.98px) {
  .section-head { flex-wrap: wrap; gap: 16px; }
  .section-title { font-size: 26px; }

  .product-card { flex-basis: 260px; height: auto; padding-bottom: 24px; }
  .product-card__media { height: 300px; }

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

  .testimonial__photo { flex: 0 0 100%; height: 220px; }

  .newsletter__field { width: 100%; }
  .footer__lead { font-size: 20px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}