/* ==========================================================================
   Sections: hero, statement, carousels, fan, rail, grids, product page
   ========================================================================== */

/* --------------------------------------------------------------- Hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--space-4)) var(--page-pad) var(--section-pad);
  overflow: hidden;
  background: var(--bg-hero);
}

.hero__media {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% bottom;
}

/* Phones get the same hero as the desktop - copy over a full-bleed photo.
   Allium's phone photo is blue at the top with the pets along the bottom, so
   the copy sits on the blue; the wash below keeps it readable either way. */
@media (max-width: 767px) {
  .hero:not(.hero--plain) .hero__media img {
    object-position: center bottom;
  }

  .hero:not(.hero--plain) .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(4, 37, 81, 0.55) 0%,
      rgba(4, 37, 81, 0.28) 34%,
      rgba(4, 37, 81, 0) 58%
    );
  }
}

/* The eyebrow and the trust badges sit on a photo, so they carry their own
   background instead of relying on the colour behind them. */
.hero:not(.hero--plain) [data-hero-eyebrow] {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  color: var(--white);
  letter-spacing: 0.08em;
}

.hero:not(.hero--plain) .hero__badges {
  gap: var(--space-3);
}

.hero:not(.hero--plain) .hero__badges .icon-label {
  grid-template-columns: 20px 1fr;
  gap: var(--space-2);
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  background: rgba(4, 37, 81, 0.42);
  backdrop-filter: blur(6px);
  color: var(--white);
}

.hero:not(.hero--plain) .hero__badges .icon-label svg {
  width: 20px;
  height: 20px;
  color: var(--white);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: var(--container-small);
}

.hero__content .btn-row {
  margin-top: var(--space-5);
}

.hero__seal {
  display: block;
  color: var(--color-strong);
  margin-bottom: var(--space-5);
}

.hero__seal svg {
  width: 88px;
  height: 88px;
}

@media (min-width: 1025px) {
  .hero__seal svg {
    width: 104px;
    height: 104px;
  }
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}

.hero__badges .icon-label {
  color: var(--color-strong);
}

.hero__badges .icon-label svg {
  color: currentColor;
}

/* Page heroes without a photo */
.hero--plain {
  min-height: 0;
  background: transparent;
  padding-bottom: var(--space-9);
  align-items: center;
  text-align: center;
}

.hero--plain .hero__content {
  align-items: center;
  max-width: var(--container-medium);
  margin-inline: auto;
  text-align: center;
}

.hero--plain .section-head__description {
  max-width: 520px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Tablets / small laptops: keep the copy left of the pets in the photo */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero:not(.hero--plain) .hero__content {
    max-width: 420px;
  }
}

@media (min-width: 1025px) {
  .hero {
    align-items: center;
    padding-block: var(--header-h) var(--section-pad);
  }

  .hero__media img {
    object-position: center 35%;
  }
}

/* --------------------------------------------------------------- Statement */

.statement {
  overflow: hidden;
  padding-inline: 0;
}

.statement__head {
  padding-inline: var(--page-pad);
  margin-bottom: var(--space-8);
}

.statement__head h2 {
  max-width: var(--container-medium);
}

/* Stacked version (phones, tablets, reduced motion): every part centred in
   the middle of the screen. The pinned sideways version is desktop only. */
.statement__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
  padding-inline: var(--page-pad);
  font-family: var(--ff-soft);
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.statement__head {
  text-align: center;
}

.statement__head h2 {
  margin-inline: auto;
}

.statement__row .part {
  justify-content: center;
}

.statement__row .part--stack,
.statement__row .part--stack.is-right,
.statement__row .part--stack.is-center {
  align-items: center;
}

.statement__row .part--tilt {
  align-self: center !important;
}

/* Phones without the pinned animation (reduced motion, very short windows):
   no part may be wider than the screen, or the whole section drifts sideways
   and gets clipped. Each part wraps and stays centred instead. */
@media (max-width: 767px) {
  .statement.is-static .statement__row .part,
  .statement.is-static .statement__row .chip {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .statement.is-static .statement__row .chip {
    padding: 14px 24px;
  }

  .statement.is-static .statement__row .chip--nested {
    padding: 14px 24px 14px 14px;
  }

  .statement.is-static .statement__row .chip--lg {
    padding: 18px 26px;
  }

  .statement.is-static .statement__row .chip__inner {
    padding: 6px 20px;
  }

  .statement.is-static .statement__row .chip--trail {
    align-self: center;
  }

  .statement.is-static .statement__row .part__art--overlap {
    margin-left: 0;
  }

  .statement.is-static .statement__row .part__art svg {
    max-width: min(100%, 190px);
    height: auto;
  }
}

.part {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.part--stack {
  flex-direction: column;
  align-items: flex-start;
}

.part--stack.is-right {
  align-items: flex-end;
}

.part--stack.is-center {
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 16px 32px;
  border-radius: 100px;
  background: var(--chip-bg, var(--allium-blue));
  color: var(--chip-color, var(--white));
}

.chip--nested {
  padding: 16px 32px 16px 16px;
}

.chip--caps {
  text-transform: uppercase;
}

.chip--lg {
  padding: 24px 40px;
}

.chip--trail {
  margin-top: var(--space-2);
  align-self: flex-end;
}

/* the drawn line tucks under the chip beside it */
.part__art--overlap {
  margin-left: -40px;
}

.chip__inner {
  padding: 8px 28px;
  border-radius: 100px;
  background: var(--chip-inner-bg, var(--allium-mist));
  color: var(--chip-inner-color, var(--allium-blue));
}

.chip svg,
.part svg {
  display: block;
}

.part__art {
  flex: 0 0 auto;
  color: var(--art-color, var(--allium-blue));
}

.part--tilt {
  rotate: -4deg;
}

/* The pinned ("screen lock") sentence, on phones as well as desktop.
   .is-static is the fallback the motion code adds when it can't pin -
   see desktopMotion() in assets/js/motion/core.js. */
.statement:not(.is-static) .statement__row {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  width: max-content;
  text-align: left;
  will-change: transform;
}

.statement:not(.is-static) .part--stack {
  align-items: flex-start;
}

.statement:not(.is-static) .part--stack.is-right {
  align-items: flex-end;
}

.statement:not(.is-static) .part--stack.is-center {
  align-items: center;
}

/* reduced motion on a wide screen: the sentence wraps, centred */
@media (min-width: 768px) {
  .statement.is-static .statement__row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-7);
    max-width: var(--container-large);
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------- Drag carousel */

.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-inline: var(--page-pad);
  padding-bottom: var(--space-4);
  width: max-content;
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 auto;
  width: 269px;
}

/* The stagger uses a margin (not a transform) so the track grows with it
   and the card's buttons are never clipped by the carousel window. */
.carousel--stagger .carousel__slide:nth-child(odd) {
  margin-top: 32px;
}

.carousel__controls {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-7);
}

@media (max-width: 1024px) {
  .carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .carousel__slide {
    scroll-snap-align: center;
  }
}

@media (min-width: 1025px) {
  .carousel__track {
    gap: 100px;
  }

  .carousel__slide {
    width: 370px;
  }

  .carousel--stagger .carousel__slide:nth-child(odd) {
    margin-top: 64px;
  }

  .carousel--drag {
    cursor: none;
  }
}

/* --------------------------------------------------------------- Category fan */

.fan {
  overflow: hidden;
}

.fan__stage {
  position: relative;
  height: 500px;
  margin-top: var(--space-5);
}

.fan__card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 268px;
  margin-left: -134px;
  transform-origin: 50% 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.fan__thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-capsule) var(--r-capsule) 0 0;
  overflow: hidden;
  background: var(--white);
  display: grid;
  place-items: center;
  padding: 16%;
}

.fan__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-4) var(--ease-image);
}

.fan__card:hover .fan__thumb img {
  transform: scale(var(--hover-scale));
}

.fan__title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: var(--color-heading);
  margin-top: var(--space-4);
}

.fan__text {
  max-width: 300px;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fan__card .btn {
  margin-top: var(--space-3);
  min-height: 48px;
  padding: 8px 20px;
}

.fan__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.fan__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-heading);
  opacity: 0.25;
  transition: opacity var(--dur-3) var(--ease-ui), transform var(--dur-3) var(--ease-ui);
}

.fan__dots button[aria-current="true"] {
  opacity: 1;
  transform: scale(1.3);
}

/* desktop sizes for the wheel live in "Pinned sections" at the end of this file */

/* --------------------------------------------------------------- Ingredients rail */

.rail {
  overflow: hidden;
  padding-inline: 0;
}

.rail__head {
  padding-inline: var(--page-pad);
  margin-bottom: var(--space-8);
}

.rail__track {
  display: flex;
  gap: var(--gutter);
  padding-inline: var(--page-pad);
  width: max-content;
  will-change: transform;
}

.rail__item {
  flex: 0 0 auto;
  width: 231px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.rail__item:nth-child(odd) {
  margin-top: var(--space-8);
}

.rail__art {
  width: 120px;
  height: 180px;
  border-radius: var(--r-capsule);
  display: grid;
  place-items: center;
  background: var(--art-bg, var(--color-soft));
  color: var(--art-fg, var(--allium-blue));
}

.rail__art svg {
  width: 64px;
  height: 64px;
}

.rail__title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--color-heading);
}

/* Wherever the rail is not pinned it scrolls sideways by hand instead */
@media (max-width: 767px) {
  .rail__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rail__viewport::-webkit-scrollbar {
    display: none;
  }
}

.rail.is-static .rail__viewport {
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 1025px) {
  .rail__item {
    width: 251px;
  }
}

/* --------------------------------------------------------------- Feature list */

.feature-list {
  display: grid;
  gap: var(--space-8) var(--gutter);
}

.feature-lead__thumb {
  aspect-ratio: 9 / 5;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
  margin-bottom: var(--space-5);
}

.feature-lead__thumb img,
.feature-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-image);
}

.feature-lead:hover .feature-lead__thumb img,
.feature-row:hover .feature-row__thumb img {
  transform: scale(var(--hover-scale));
}

.feature-title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--color-heading);
}

.feature-rows {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.feature-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-soft);
}

.feature-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.feature-row__thumb {
  aspect-ratio: 9 / 5;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
}

@media (min-width: 1025px) {
  .feature-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-row {
    grid-template-columns: 153px 1fr;
  }
}

/* --------------------------------------------------------------- Media + text */

.media-text__figure {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
}

.media-text__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-text__figure--contain {
  display: grid;
  place-items: center;
  padding: 10%;
  background: var(--white);
}

.media-text__figure--contain img {
  object-fit: contain;
}

.media-text__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.media-text__body .rich {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 1025px) {
  .media-text__body .rich,
  .media-text__body .btn-row {
    padding-left: var(--space-7);
  }
}

/* --------------------------------------------------------------- Listing grid */

/* The reveal animation puts a transform on this bar and on the chips below it,
   and a transform starts a new stacking context - so without a z-index here
   the chips paint on top of the open category dropdown. */
.listing__bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.listing__grid {
  display: grid;
  gap: var(--space-8) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.listing__empty {
  padding: var(--space-8) 0;
}

@media (min-width: 640px) {
  .listing__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (min-width: 1025px) {
  .listing__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .listing__grid > *:nth-child(even) {
    margin-top: var(--space-8);
  }
}

/* --------------------------------------------------------------- Stats */

.stats {
  display: grid;
  gap: var(--space-6) var(--gutter);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}

.stats__value {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-heading);
}

.stats__label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-meta);
  margin-top: var(--space-2);
}

@media (min-width: 1025px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------- Product page */

.product-hero__gallery {
  position: relative;
}

.product-hero__figure {
  position: relative;
  width: min(500px, 100%);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--white);
}

.product-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-hero__figure.is-contain img {
  object-fit: contain;
  padding: 18%;
}

/* square poster artwork is shown whole, in a rounded square not a capsule */
.product-hero__figure.is-poster {
  width: min(560px, 100%);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
}


.product-hero__nav {
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -50%;
  display: flex;
  justify-content: space-between;
  padding-inline: 12px;
  pointer-events: none;
}

.product-hero__nav .icon-btn {
  pointer-events: auto;
}

.product-hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.product-hero__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-heading);
  opacity: 0.25;
}

.product-hero__dots button[aria-current="true"] {
  opacity: 1;
}

.product-hero__buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-hero__price {
  font-family: var(--ff-ui);
  font-size: var(--fs-price);
  line-height: 1.4;
  color: var(--color-heading);
}

.product-hero__price--soon {
  font-family: var(--ff-soft);
  color: var(--color-meta);
}

.product-hero__spec {
  display: grid;
  gap: var(--space-1);
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.product-hero__spec li + li {
  color: var(--color-text);
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---- composition + dosage (from the pack) */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.facts > :only-child {
  grid-column: 1 / -1;
  max-width: 720px;
  justify-self: center;
  width: 100%;
}

.facts-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--color-soft);
}

.facts-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.facts-table {
  width: 100%;
  border-collapse: collapse;
}

.facts-table th,
.facts-table td {
  padding: var(--space-2) 0;
  border-bottom: 0.5pt dashed var(--color-line-soft);
  text-align: left;
  font-weight: 400;
}

.facts-table th {
  color: var(--color-heading);
  padding-right: var(--space-4);
}

.facts-table td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.facts-table tr:last-child > * {
  border-bottom: 0;
}

.facts-card__note {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-heading);
}

.facts-card__note svg {
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

.product-details {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-9);
}

.product-details h2,
.product-details h3 {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line-soft);
}

.badges-grid {
  display: grid;
  gap: var(--space-4) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.benefit-list {
  display: grid;
  gap: var(--space-3);
}

.benefit-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.benefit-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  translate: 0 3px;
}

@media (min-width: 1025px) {
  .product-hero__gallery {
    position: sticky;
    top: calc(var(--header-h-sticky) + var(--space-5));
  }
}

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

.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.reviews__score {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--color-heading);
}

/* The reviews sit on their own panel so they stand out from the description
   above them. */
.reviews__panel {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft, 0 2px 40px rgba(4, 37, 81, 0.07));
}

.reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-9);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line-soft);
}

.reviews__score-block {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.reviews__bars {
  display: grid;
  gap: 6px;
  min-width: 220px;
  flex: 1 1 260px;
  max-width: 360px;
}

.reviews__bar {
  display: grid;
  grid-template-columns: auto 14px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-meta);
}

.reviews__bar svg {
  width: 14px;
  height: 14px;
  color: var(--star-color, #f5a623);
}

.reviews__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-soft);
  overflow: hidden;
}

.reviews__track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--star-color, #f5a623);
}

.reviews__bar-count {
  min-width: 1.5em;
  text-align: right;
}

.reviews__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-soft);
}

.review-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--r-lg);
  background: var(--color-bg);
  height: 100%;
}

.review-card__text {
  color: var(--color-text);
}

.review-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: auto;
}

.review-card__author {
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  color: var(--color-heading);
}

@media (min-width: 768px) {
  .reviews__panel {
    padding: var(--space-9) var(--space-8);
  }
}

/* --------------------------------------------------------------- Gallery */

.gallery-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.gallery-grid button {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-image);
}

.gallery-grid button:hover img {
  transform: scale(var(--hover-scale));
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------- Rich text (policies, long copy) */

.rich h2 {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  color: var(--color-heading);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.rich h2:first-child {
  margin-top: 0;
}

.rich p {
  margin-bottom: var(--space-4);
}

.rich ul {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-left: var(--space-5);
}

.rich li {
  list-style: disc;
}

.rich strong {
  color: var(--color-heading);
  font-weight: 500;
}

.rich a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- Cart page */

.cart-table {
  display: grid;
  gap: var(--space-6);
}

.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-5);
  align-items: center;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line-soft);
}

.cart-row__thumb {
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-capsule);
  overflow: hidden;
  background: var(--color-soft);
}

.cart-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-row__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cart-summary {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-pill);
  background: var(--color-soft);
  align-content: start;
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.cart-summary__total {
  font-family: var(--ff-soft);
  font-size: var(--fs-h3);
  color: var(--color-heading);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-soft);
}

/* --------------------------------------------------------------- Pinned sections
   While a section is pinned it is exactly one screen tall and nothing below
   the fold can be reached, so everything inside scales with the screen
   HEIGHT (vh), not just the width. Sized to fit short windows from about
   480px tall (a browser pane or a half-height window) up to large monitors.
   The top padding keeps the content clear of the fixed header pills.
   Phones get the same pinned sections, at phone sizes - see the
   max-width: 767px block further down. */

.statement:not(.is-static),
.fan,
.rail:not(.is-static) {
  --pin-gap: clamp(14px, 5vh, 64px);
  padding-top: clamp(58px, 11vh, 110px);
  padding-bottom: clamp(16px, 4vh, 48px);
}

.statement:not(.is-static) h2,
.fan h2,
.rail:not(.is-static) h2 {
  font-size: min(var(--fs-h2), 7.2vh);
}

.statement:not(.is-static) .statement__row {
  font-size: min(var(--fs-statement), 7vh);
}

.statement:not(.is-static) .statement__head {
  margin-bottom: var(--pin-gap);
}

/* category wheel. --fan-extra is the card's height below the picture
   (title, line of text, button); the stage has to leave room for it or the
   card covers the dots underneath. */
.fan {
  --fan-w: clamp(150px, 30vh, 300px);
  --fan-extra: 190px;
}

.fan .section-head {
  margin-bottom: 0;
}

/* picture (4:5 of the card width) plus the text block under it */
.fan__stage {
  height: calc(var(--fan-w) * 1.25 + var(--fan-extra));
  margin-top: var(--pin-gap);
}

.fan__card {
  width: var(--fan-w);
  margin-left: calc(var(--fan-w) / -2);
}

.fan__title {
  margin-top: clamp(6px, 1.4vh, 16px);
}

.fan__dots {
  margin-top: clamp(8px, 2vh, 24px);
}

/* ingredients rail */
.rail:not(.is-static) {
  --rail-art-h: clamp(78px, 19vh, 180px);
  --rail-offset: clamp(14px, 6vh, 64px);
}

.rail:not(.is-static) .section-head {
  margin-bottom: 0;
}

.rail:not(.is-static) .rail__head {
  margin-bottom: var(--pin-gap);
}

.rail:not(.is-static) .rail__item {
  gap: clamp(12px, 2.5vh, 24px);
}

.rail:not(.is-static) .rail__item:nth-child(odd) {
  margin-top: var(--rail-offset);
}

.rail:not(.is-static) .rail__art {
  width: calc(var(--rail-art-h) * 2 / 3);
  height: var(--rail-art-h);
}

.rail:not(.is-static) .rail__art svg {
  width: 55%;
  height: auto;
}

/* Phones run the same pinned sections, at phone sizes: smaller wheel cards,
   shorter ingredient artwork, and no room for the small print. */
@media (max-width: 767px) {
  .statement:not(.is-static),
  .fan,
  .rail:not(.is-static) {
    --pin-gap: clamp(12px, 3.5vh, 32px);
    padding-top: clamp(76px, 13vh, 104px);
  }

  .statement:not(.is-static) .statement__row {
    font-size: min(var(--fs-statement), 5.2vh);
    gap: var(--space-4) var(--space-5);
  }

  .statement:not(.is-static) .part__art svg {
    max-width: min(46vw, 150px);
    height: auto;
  }

  .fan {
    --fan-w: clamp(128px, 24vh, 190px);
    --fan-extra: 134px;
  }

  .fan__text,
  .fan .t-eyebrow,
  .rail:not(.is-static) .section-head__actions,
  .rail:not(.is-static) .rail__item p {
    display: none;
  }

  .fan__card .btn {
    min-height: 40px;
    padding: 6px 16px;
  }

  .rail:not(.is-static) {
    --rail-art-h: clamp(84px, 16vh, 140px);
    --rail-offset: clamp(12px, 4vh, 40px);
  }

  .rail:not(.is-static) .rail__item {
    width: min(58vw, 210px);
  }
}

/* Short laptop windows: drop the small labels above the wheel and the
   statement to buy a little more room */
@media (min-width: 768px) and (max-height: 720px) {
  .fan .t-eyebrow {
    display: none;
  }

  .rail:not(.is-static) .section-head__actions {
    margin-top: var(--space-2);
  }
}

/* Very short windows (a browser pane, a half-height window): the ingredient
   text and the "see all" link don't fit beside the artwork any more, so trim
   what can go and let the card text shrink with the screen. */
@media (min-width: 768px) and (max-height: 600px) {
  .rail:not(.is-static) .section-head__actions,
  .rail:not(.is-static) .rail__item p,
  .fan__text {
    display: none;
  }

  .fan {
    --fan-extra: 124px;
  }

  .fan__card .btn {
    min-height: 40px;
    padding: 6px 18px;
  }

  .fan__dots {
    margin-top: clamp(6px, 1.5vh, 24px);
  }
}

/* --------------------------------------------------------------- Product card (client reference) */

/* One white card: gallery | info, trust badges across the bottom.
   Stacks to a single column below 1025px. */
.pdp__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow);
}

/* gallery: thumbnails stacked beside the main image on desktop,
   in a row under it on phones */
.pdp__gallery {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
}

.pdp__thumbs {
  display: flex;
  gap: var(--space-3);
}

.pdp__thumb {
  width: 76px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid var(--color-line-soft);
  background: var(--allium-mist);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-ui);
}

.pdp__thumb[aria-current="true"],
.pdp__thumb:hover {
  border-color: var(--color-accent);
}

.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp__thumb.is-contain img {
  object-fit: contain;
}

.pdp__figure {
  position: relative;
  flex: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--allium-mist);
  overflow: hidden;
}

.pdp__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp__figure.is-contain img {
  object-fit: contain;
}

.pdp__figure.is-placeholder img {
  object-fit: contain;
  padding: 24%;
  opacity: 0.85;
}

.pdp__figure figcaption {
  position: absolute;
  inset: auto 0 var(--space-5);
  text-align: center;
}

/* info column */
.pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pdp__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pdp__title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 24px + 1.4vw, 46px);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

.pdp__price {
  font-family: var(--ff-ui);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-heading);
}

.pdp__price.is-soon {
  font-family: var(--ff-soft);
  font-weight: 500;
  color: var(--color-meta);
}

.pdp__body {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.pdp__bullets {
  display: grid;
  gap: var(--space-3);
}

.pdp__bullets li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-heading);
}

.pdp__bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* accordion rows as separate soft boxes with a plus, like the reference */
.pdp__accordion {
  display: grid;
  gap: var(--space-2);
}

.pdp__accordion .accordion__item {
  border: 0;
  border-radius: var(--r-sm);
  background: var(--allium-mist);
}

.pdp__accordion .accordion__button {
  padding: 14px var(--space-4);
  font-family: var(--ff-ui);
  font-size: 15px;
}

.pdp__accordion .accordion__icon {
  width: 14px;
  height: 14px;
}

.pdp__accordion .accordion__panel > div {
  padding: 0 var(--space-4) var(--space-4);
  font-size: 14px;
}

.pdp__accordion .rich p:last-child {
  margin-bottom: 0;
}

.pdp-list {
  display: grid;
  gap: var(--space-2);
}

.pdp__size {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pdp__label {
  font-weight: 500;
  color: var(--color-heading);
}

.pdp__size-option {
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--color-heading);
  color: var(--color-heading);
  font-weight: 500;
}

.pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.pdp__add {
  flex: 1 1 200px;
  justify-content: center;
  height: 56px;
}

.pdp__wish {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0.5pt solid var(--color-line);
  color: var(--color-heading);
  transition: background-color var(--dur-3) var(--ease-ui), color var(--dur-3) var(--ease-ui);
}

.pdp__wish:hover,
.pdp__wish[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--white);
}

.pdp__wish svg {
  width: 20px;
  height: 20px;
}

/* trust badges across the bottom of the card */
.pdp__trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-soft);
}

.pdp__trust li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-heading);
}

.pdp__trust svg {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .pdp__card {
    padding: var(--space-7);
  }

  .pdp__trust {
    grid-template-columns: repeat(5, max-content);
    justify-content: start;
    gap: var(--space-8);
  }
}

@media (min-width: 1025px) {
  .pdp__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-7) var(--space-8);
    padding: var(--space-8);
  }

  .pdp__trust {
    grid-column: 1 / -1;
  }

  .pdp__gallery {
    flex-direction: row;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h-sticky) + var(--space-5));
  }

  .pdp__thumbs {
    flex-direction: column;
  }
}

@media (min-width: 1280px) {
  .pdp__body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* --------------------------------------------------------------- Home (client reference: image-focused) */

.home-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: min(100svh, 900px);
  padding: calc(var(--header-h) + var(--space-5)) var(--page-pad) var(--space-9);
  overflow: hidden;
  background: var(--allium-mist);
}

.home-hero__media {
  position: absolute;
  inset: 0;
}

.home-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* soft wash over the calm wall so the headline always reads */
.home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(232, 237, 245, 0.92) 0%, rgba(232, 237, 245, 0.6) 32%, rgba(232, 237, 245, 0) 56%);
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 560px;
}

.home-hero__eyebrow {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--color-accent);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-hero h1 {
  font-family: var(--ff-display);
  font-size: clamp(44px, 30px + 3.2vw, 88px);
  line-height: 1;
  color: var(--allium-navy);
}

.home-hero p[data-hero-text] {
  font-size: clamp(17px, 15px + 0.4vw, 20px);
  color: var(--allium-slate-700);
  max-width: 34ch;
}

.home-hero .btn-row {
  margin-top: var(--space-4);
}

.home-hero__ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--allium-navy);
  backdrop-filter: blur(4px);
}

.home-hero__ghost:hover {
  background: var(--white);
}

/* phones: the photo keeps the dog in its lower half, so the copy is kept
   compact enough to finish above it */
@media (max-width: 767px) {
  .home-hero {
    min-height: max(100svh, 860px);
  }

  .home-hero__media img {
    object-position: center bottom;
  }

  .home-hero__media::after {
    background: linear-gradient(180deg, rgba(232, 237, 245, 0.85) 0%, rgba(232, 237, 245, 0.45) 30%, rgba(232, 237, 245, 0) 45%);
  }

  .home-hero__eyebrow {
    display: none;
  }

  .home-hero .btn-row {
    flex-wrap: nowrap;
    gap: var(--space-2);
  }

  .home-hero .btn {
    min-height: 48px;
    padding-inline: 16px;
    font-size: 13px;
  }
}

/* trust badges - a white strip that tucks up over the hero */
.home-trust {
  position: relative;
  z-index: 2;
  padding-inline: var(--page-pad);
  margin-top: calc(var(--space-7) * -1);
}

.home-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow);
}

.home-trust__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-heading);
}

.home-trust__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--allium-mist);
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .home-trust__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-6) var(--space-7);
  }

  .home-trust__list li {
    flex-direction: row;
    justify-content: center;
    font-size: var(--fs-body);
  }
}

/* section header with a "View all" link on the right */
.home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.home-head h2 {
  font-family: var(--ff-display);
  font-size: clamp(30px, 22px + 1.6vw, 48px);
  line-height: var(--lh-tight);
  color: var(--allium-navy);
}

.home-head__link {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
}

/* shop by category - pill cards from the client's reference: line icon in a
   circle, name, a decorative line drawn per category, a paw. Stacked on
   phones so every category is visible without swiping. */
.home-cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.cat-pill {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border-radius: var(--r-capsule);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(35, 84, 153, 0.12), 0 8px 22px rgba(4, 37, 81, 0.06);
  color: var(--allium-blue);
  transition: background-color var(--dur-3) var(--ease-ui), color var(--dur-3) var(--ease-ui),
    transform var(--dur-3) var(--ease-ui), box-shadow var(--dur-3) var(--ease-ui);
}

.cat-pill__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e3ecf8 100%);
  box-shadow: inset 0 0 0 2px rgba(35, 84, 153, 0.85);
  color: var(--allium-navy);
  transition: background-color var(--dur-3) var(--ease-ui), box-shadow var(--dur-3) var(--ease-ui),
    transform var(--dur-4) var(--ease-image);
}

.cat-pill__art {
  width: 42px;
  height: 42px;
  overflow: visible;
}

.cat-pill__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cat-pill__name {
  font-family: var(--ff-soft);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--allium-navy);
  transition: color var(--dur-3) var(--ease-ui);
}

.cat-pill__line {
  width: 150px;
  max-width: 100%;
  height: 18px;
  color: #6f9ad6;
}

/* the decorative line draws itself in when the row scrolls into view */
.cat-pill__line path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s var(--ease-image);
}

.home-cats.is-drawn .cat-pill__line path {
  stroke-dashoffset: 0;
}

.home-cats.is-drawn .cat-pill:nth-child(2) .cat-pill__line path { transition-delay: 0.1s; }
.home-cats.is-drawn .cat-pill:nth-child(3) .cat-pill__line path { transition-delay: 0.2s; }
.home-cats.is-drawn .cat-pill:nth-child(4) .cat-pill__line path { transition-delay: 0.3s; }
.home-cats.is-drawn .cat-pill:nth-child(5) .cat-pill__line path { transition-delay: 0.4s; }
.home-cats.is-drawn .cat-pill:nth-child(6) .cat-pill__line path { transition-delay: 0.5s; }

.cat-pill__paw {
  width: 22px;
  height: 22px;
  color: var(--allium-navy);
  transition: color var(--dur-3) var(--ease-ui), transform var(--dur-3) var(--ease-ui);
}

/* hover: the navy filled pill from the reference */
.cat-pill:hover,
.cat-pill:focus-visible {
  background: var(--allium-navy);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(4, 37, 81, 0.22);
}

.cat-pill:hover .cat-pill__name,
.cat-pill:focus-visible .cat-pill__name,
.cat-pill:hover .cat-pill__paw,
.cat-pill:focus-visible .cat-pill__paw {
  color: var(--white);
}

.cat-pill:hover .cat-pill__line,
.cat-pill:focus-visible .cat-pill__line {
  color: rgba(255, 255, 255, 0.6);
}

.cat-pill:hover .cat-pill__icon,
.cat-pill:focus-visible .cat-pill__icon {
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--white), 0 0 0 4px rgba(255, 255, 255, 0.18);
  transform: rotate(-8deg) scale(1.05);
}

.cat-pill:hover .cat-pill__paw {
  transform: rotate(18deg);
}

@media (min-width: 600px) {
  .home-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 1025px) {
  .home-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--gutter);
  }

  .cat-pill__icon {
    width: 76px;
    height: 76px;
  }

  .cat-pill__art {
    width: 50px;
    height: 50px;
  }

  .cat-pill__line {
    width: 180px;
  }

  .cat-pill__name {
    font-size: 24px;
  }
}

/* loved by pet parents - blue banner, copy left, photo right */
.home-loved {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: stretch;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--allium-blue);
  color: var(--white);
}

.home-loved__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
}

.home-loved__eyebrow,
.home-loved__label {
  font-family: var(--ff-soft);
  font-size: clamp(20px, 16px + 1vw, 32px);
  line-height: 1.1;
}

.home-loved__value {
  font-family: var(--ff-display);
  font-size: clamp(44px, 30px + 3vw, 96px);
  line-height: 1;
}

.home-loved__text {
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.82);
  margin-block: var(--space-2) var(--space-4);
}

.home-loved__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

@media (max-width: 599px) {
  .home-loved__text {
    display: none;
  }

  .home-loved .btn {
    min-height: 44px;
    padding-inline: 18px;
    margin-top: var(--space-3);
  }
}

@media (min-width: 1025px) {
  .home-loved__copy {
    justify-content: center;
    padding: var(--space-9) var(--space-8);
  }
}

/* best sellers - card grid, scrolls sideways on phones */
.home-best {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 72%);
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.home-best::-webkit-scrollbar {
  display: none;
}

.home-best > * {
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .home-best {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}

/* stay updated - newsletter card with a photo */
.home-news {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}

.home-news__copy {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  padding: var(--space-6) var(--space-5);
}

.home-news__copy h2 {
  font-family: var(--ff-display);
  font-size: clamp(30px, 22px + 1.6vw, 48px);
  line-height: var(--lh-tight);
  color: var(--allium-navy);
}

.home-news__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.home-news__form .field {
  flex: 1 1 220px;
}

.home-news__form input {
  height: 56px;
}

.home-news__media {
  order: -1;
  aspect-ratio: 16 / 9;
}

.home-news__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .home-news {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .home-news__copy {
    padding: var(--space-8);
  }

  .home-news__media {
    order: 0;
    aspect-ratio: auto;
    min-height: 360px;
  }
}


/* register your pet - the approved build's hero photo (cat + Samoyed on
   blue) fills the card; the copy sits on its open blue side */
.home-register {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 620px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: #0d3e9c;
  color: var(--white);
}

.home-register__media {
  position: absolute;
  inset: 0;
}

.home-register__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform 1.2s var(--ease-image);
}

.home-register:hover .home-register__media img {
  transform: scale(1.03);
}

.home-register__copy {
  position: relative;
  display: grid;
  gap: var(--space-3);
  max-width: 440px;
  padding: var(--space-7) var(--space-5);
}

.home-register__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.home-register h2 {
  font-family: var(--ff-display);
  font-size: clamp(34px, 24px + 2vw, 60px);
  line-height: 1;
}

.home-register__copy > p:not(.home-register__eyebrow) {
  color: rgba(255, 255, 255, 0.85);
}

.home-register .btn-row {
  margin-top: var(--space-3);
}

@media (min-width: 1025px) {
  .home-register {
    align-items: center;
    min-height: 560px;
  }

  .home-register__media img {
    object-position: right bottom;
  }

  .home-register__copy {
    padding: var(--space-8);
  }
}

/* phones: the tall photo sits full width along the bottom (no side crop);
   the card's blue matches the photo's sky so they blend */
@media (max-width: 767px) {
  .home-register {
    flex-direction: column;
    min-height: 0;
    background: #0b48a1;
  }

  .home-register__media {
    position: relative;
    inset: auto;
    order: 2;
  }

  .home-register__media img {
    height: auto;
    object-fit: initial;
  }

  .home-register__copy {
    order: 1;
    z-index: 1;
    padding-bottom: var(--space-2);
  }
}

/* --------------------------------------------------------------- About (Oct 2026 refresh) */

.about-hero {
  padding-bottom: var(--space-7);
}

/* wide photo with the stats card tucked over its lower edge */
.about-band {
  padding-inline: var(--page-pad);
}

.about-band__photo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--color-soft);
}

.about-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

.about-band__stats {
  position: relative;
  z-index: 1;
  margin: calc(var(--space-7) * -1) var(--space-4) 0;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .about-band__photo {
    aspect-ratio: 21 / 9;
  }

  .about-band__stats {
    margin: calc(var(--space-8) * -1) var(--space-8) 0;
    padding: var(--space-6) var(--space-7);
  }
}

/* why choose: numbered cards with an icon */
.about-why {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

.about-why__card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--color-line-soft);
  transition: transform var(--dur-3) var(--ease-ui), box-shadow var(--dur-3) var(--ease-ui);
}

.about-why__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.about-why__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.about-why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--allium-mist);
  color: var(--allium-blue);
}

.about-why__num {
  font-family: var(--ff-display);
  font-size: 32px;
  line-height: 1;
  color: var(--color-line-soft);
}

.about-why__title {
  font-family: var(--ff-soft);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--color-heading);
}

@media (min-width: 640px) {
  .about-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .about-why {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* story sections: rounded photo with floating chips */
.about-story {
  align-items: center;
}

.about-story .t-eyebrow {
  margin-bottom: var(--space-2);
}

.about-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--color-soft);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-image);
}

.about-photo:hover img {
  transform: scale(1.04);
}

.about-photo__chips {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 80%;
}

.about-photo__chips--left {
  right: auto;
  left: var(--space-4);
  justify-content: flex-start;
}

.about-photo__chips li {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px);
  color: var(--allium-navy);
  font-size: var(--fs-small);
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(4, 37, 81, 0.12);
}

/* the firm and its trademarks */
.about-brands {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--shadow);
}

.about-brands__head {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}

.about-brands__logo {
  width: min(320px, 80%);
  height: auto;
}

.about-brands__head p {
  max-width: 44ch;
  color: var(--color-text);
}

.about-brands__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.about-brands__item {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-5) var(--space-3);
  border-radius: var(--r-lg);
  background: var(--allium-mist);
  text-align: center;
  transition: background-color var(--dur-3) var(--ease-ui);
}

.about-brands__item:hover {
  background: #dbe4f1;
}

.about-brands__name {
  font-family: var(--ff-soft);
  font-size: clamp(24px, 18px + 1vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--allium-blue);
}

.about-brands__tag {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-meta);
}

@media (min-width: 900px) {
  .about-brands {
    padding: var(--space-8);
  }

  .about-brands__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

/* --------------------------------------------------------------- Gallery mosaic (Oct 2026 refresh) */

.gallery-grid {
  grid-auto-flow: dense;
}

.gallery-grid button {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
}

.gallery-grid button.is-tall {
  aspect-ratio: 3 / 4;
}

.gallery-grid__cap {
  position: absolute;
  inset: auto var(--space-3) var(--space-3) var(--space-3);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--allium-navy);
  font-size: var(--fs-small);
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-3) var(--ease-ui), transform var(--dur-3) var(--ease-ui);
}

.gallery-grid button:hover .gallery-grid__cap,
.gallery-grid button:focus-visible .gallery-grid__cap {
  opacity: 1;
  transform: none;
}

/* desktop: fixed row height so every row lines up; tall photos span two rows,
   wide ones two columns */
@media (min-width: 1025px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(240px, 22vw, 340px);
    gap: var(--gutter);
  }

  .gallery-grid button,
  .gallery-grid button.is-tall {
    aspect-ratio: auto;
    height: 100%;
  }

  .gallery-grid button.is-tall {
    grid-row: span 2;
  }

  .gallery-grid button.is-wide {
    grid-column: span 2;
  }
}

@media (hover: none) {
  .gallery-grid__cap {
    opacity: 1;
    transform: none;
  }
}