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

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

.mobile-menu { padding: 8px 24px 20px; border-top: 1px solid var(--hero-bg); }
.mobile-menu a {
  display: block;
  padding: 10px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.mobile-menu__group > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__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-menu__group[open] > summary::after { transform: rotate(-135deg); }
.mobile-menu__group a { padding: 8px 0 8px 14px; color: #4a4a4a; }
.search-box--mobile { width: 100%; margin: 10px 0 0; }

/* ============ 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; }
.cat-ic { display: block; }
.cat-ic--cups { width: 17px; height: 23px; }
.cat-ic--food { width: 25px; height: 26px; }
.cat-ic--bags { width: 17px; height: 23px; }
.cat-ic--acc  { width: 22px; height: 22px; }
.cat-ic--ice  { width: 17px; height: 25px; }

/* ============ 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. Past
     that width the photo and card stay pinned to it, so the pair keeps its
     designed relationship while the grey band still bleeds to the screen edges.
     Without this the photo caps at 948px and walks right, stranding the card. */
  --hero-stage: max(0px, (100% - 1440px) / 2);

  /* Card's left gutter — tracks .header-wrap's padding so the two line up. */
  --hero-gutter: 127px;
  /* Breathing room between the card's right edge and the green cup. */
  --hero-clear: 17px;

  /* The green cup starts 8.67% into the photo, so 91.33% of the photo's width
     is the distance from its right edge back to the cup — that is the line the
     card must stop short of. The third term caps the photo at whatever width
     still leaves room for the gutter, the card and its clearance. */
  --hero-photo-w: min(66%, 948px, calc((100% - var(--hero-gutter) - 430px - var(--hero-clear)) / 0.9133));
}
.hero__photo {
  position: absolute;
  right: var(--hero-stage);
  top: 0;
  width: var(--hero-photo-w);
  height: 100%;
  object-fit: cover;
  /* Crop from the right edge only. Centre-cropping (the default) trims both
     sides, which walks the green cup left and straight under the card as the
     box narrows. Anchoring left pins the cup at a fixed 8.67% of the rendered
     image, so the card's clearance holds at every width — and the photo fills
     the band top to bottom instead of floating with grey above and below it. */
  object-position: left center;
  mix-blend-mode: multiply; /* blends the white photo bg into the grey band */
  pointer-events: none;
}
.hero__card {
  position: absolute;
  /* Right edge parked --hero-clear before the green cup, so the card always
     overlaps the photo's blank left margin and never crosses the cup. The
     numbers work out so the card's left edge lands on --hero-gutter — the same
     gutter as the header logo — at every width where the photo isn't capped. */
  left: calc(100% - var(--hero-stage) - 0.9133 * var(--hero-photo-w) - 430px - var(--hero-clear));
  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; }

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

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

.footer__logo { width: 173px; height: 42px; margin-top: 62px; 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; }

  /* 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; }
  .hero__photo { position: static; transform: none; width: 100%; height: auto; max-width: var(--hero-stack-w); margin: 0 auto; display: block; object-fit: contain; }
  .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; }

  .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; }
}