/* ==========================================================================
   Homepage — editorial layout (front-page only)
   ========================================================================== */

.home-section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.home-section-head .eyebrow {
  margin-bottom: 12px;
}

.home-section-head h2 {
  margin-bottom: 16px;
}

.home-section-head__text {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  max-width: 520px;
}

/* -------------------------------------------------------------------------- */
/* Hero — type over a full-bleed photographic ground                          */
/* -------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  /* Equal top and bottom so align-items: center lands on the true middle. */
  padding-block: clamp(56px, 8vw, 116px);
  /* Fills what is left of the first screen on every device. The offset is the
     announcement bar plus the sticky header and its border (35 + 73 here,
     33 + 65 below 900px). svh is the viewport with mobile browser bars shown,
     so the hero never runs under them; vh is the fallback for older browsers. */
  --hero-offset: 108px;
  min-height: calc(100vh - var(--hero-offset));
  min-height: calc(100svh - var(--hero-offset));
  display: flex;
  align-items: center;
}

/* Photographic ground. Sits under the scrim, which is what keeps the copy
   legible — the photo itself is never asked to carry contrast. */
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

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

.home-hero__media img {
  object-fit: cover;
  /* Holds the valley and the jar on the right; only sky is given up when the
     section is wider than the 16:9 crop. */
  object-position: 50% 58%;
}

/* Warm light behind the frame, a faint earth wash under the type. */
.home-hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 56% at 78% 26%, rgba(196, 154, 82, 0.24) 0%, rgba(196, 154, 82, 0) 70%),
    radial-gradient(52% 58% at 6% 90%, rgba(168, 91, 67, 0.1) 0%, rgba(168, 91, 67, 0) 70%);
}

/* With a photo underneath, the same layer also has to be the scrim. One even
   black wash across the whole frame, so the photo reads the same everywhere
   and the copy flips to light type on top of it. */
.home-hero__decor--over-media {
  background: rgb(0 0 0 / 50%);
}

/* --- Light type, for the photographic ground only ---
   Scoped to the modifier so the no-backdrop fallback keeps its dark-on-cream
   treatment. The shadows are insurance: 50% black over a sunlit sky is a much
   lighter ground than over the mountains, and the type crosses both. */

.home-hero--on-media .home-hero__title {
  color: var(--color-bg);
  text-shadow: 0 1px 12px rgb(0 0 0 / 28%);
}

/* --color-honey is too dark to sit on this ground, so the accent line takes a
   lifted tint of it — 3.6:1, which clears the large-text floor. */
.home-hero--on-media .home-hero__title em {
  color: #f2d9ab;
}

.home-hero--on-media .home-hero__eyebrow {
  color: #f2d9ab;
  text-shadow: 0 1px 8px rgb(0 0 0 / 34%);
}

.home-hero--on-media .home-hero__eyebrow::before {
  background: #f2d9ab;
}

.home-hero--on-media .home-hero__text {
  color: rgb(255 255 255 / 92%);
  text-shadow: 0 1px 10px rgb(0 0 0 / 34%);
}

/* Forest green on a dark ground disappears, so the pair inverts: gold fill for
   the primary, a white rule for the secondary. */
.home-hero--on-media .home-hero__cta .btn {
  background: var(--color-honey);
  color: var(--color-primary);
  border-color: var(--color-honey);
}

.home-hero--on-media .home-hero__cta .btn--outline {
  background: transparent;
  color: var(--color-bg);
  border-color: rgb(255 255 255 / 62%);
}

@media (hover: hover) and (pointer: fine) {
  .home-hero--on-media .home-hero__cta .btn:hover {
    background: #d6ab5e;
    color: var(--color-primary);
    border-color: #d6ab5e;
  }

  .home-hero--on-media .home-hero__cta .btn--outline:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-bg);
  }
}

.home-hero__inner {
  /* No width of its own — .container supplies the page gutter and max width,
     and margin-inline: auto centres it inside the flex section. */
  position: relative;
}

/* --- Content column --- */

.home-hero__content {
  max-width: 620px;
}

.home-hero__eyebrow {
  position: relative;
  padding-left: 46px;
  margin-bottom: 20px;
  color: var(--color-accent-deep);
  animation: homeHeroContent 0.7s 0.05s var(--ease-out) both;
}

.home-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--color-honey);
}

.home-hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  line-height: 0.96;
  letter-spacing: var(--ls-display-tight);
  color: var(--color-primary);
  margin-bottom: 22px;
  animation: homeHeroContent 0.7s 0.14s var(--ease-out) both;
}

.home-hero__title em {
  display: block;
  color: var(--color-accent);
}

.home-hero__text {
  max-width: 44ch;
  margin-bottom: 34px;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: 1.6;
  animation: homeHeroContent 0.7s 0.22s var(--ease-out) both;
}

.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: homeHeroContent 0.7s 0.3s var(--ease-out) both;
}

.home-hero__cta-arrow {
  transition: transform var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-hero__cta .btn:hover .home-hero__cta-arrow {
    transform: translateX(4px);
  }
}

/* -------------------------------------------------------------------------- */
/* Featured honey                                                             */
/* -------------------------------------------------------------------------- */

.home-featured {
  padding-block: var(--section-space);
  background: var(--color-bg-muted);
}

/* Three up here, unlike the 4-up .product-grid the shop archive uses. Because
   this selector outranks the plain .product-grid rules in theme.css, it also
   has to restate the narrower breakpoints below — otherwise 3-up would survive
   all the way down to a phone. */
.home-featured .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 40px;
}

.product-grid__cell {
  display: flex;
  min-width: 0;
}

.product-grid__cell > .product-card {
  flex: 1 1 auto;
}

.home-featured__empty {
  padding: 40px 0;
  color: var(--color-text-muted);
}

.home-featured__cta {
  text-align: center;
}

/* Desktop shows the inline "View all" link, so the button is redundant. */
@media (min-width: 761px) {
  .home-featured__cta {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Origin                                                                     */
/* -------------------------------------------------------------------------- */

.home-origin {
  padding-block: var(--section-space);
  background: var(--color-bg-muted);
}

.home-origin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.home-origin__visual {
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  background: var(--color-primary);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.home-origin__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 400ms var(--ease-out);
}

.home-origin__visual:hover img {
  transform: scale(1.04);
}

.home-origin__copy .eyebrow {
  margin-bottom: 12px;
}

.home-origin__copy h2 {
  margin-bottom: 18px;
}

.home-origin__copy p {
  color: var(--color-text-muted);
  margin-bottom: 28px;
  max-width: 42ch;
}

/* -------------------------------------------------------------------------- */
/* Honey story                                                                */
/* -------------------------------------------------------------------------- */

.home-honey-story {
  padding-block: var(--section-space);
  background: var(--color-bg);
}

.home-honey-story__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.home-honey-story__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  overflow: hidden;
  /* Last two keep [data-reveal] working — a bare shorthand would drop them. */
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition),
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
}

.home-honey-story__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-honey);
  box-shadow: var(--shadow-soft);
}

.home-honey-story__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-muted);
}

.home-honey-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

.home-honey-story__card:hover .home-honey-story__media img {
  transform: scale(1.06);
}

.home-honey-story__body {
  flex: 1 1 auto;
  padding: 20px 20px 24px;
}

/* Card titles, not section titles: the small serif size. */
.home-honey-story__body h3,
.home-future__card h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-display-medium);
}

.home-honey-story__body h3 {
  margin-bottom: 8px;
}

.home-honey-story__body p {
  color: var(--color-text-muted);
  font-size: 14px;
}

.home-honey-story__cta {
  margin-top: 40px;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Future categories                                                          */
/* -------------------------------------------------------------------------- */

.home-future {
  padding-block: var(--section-space);
  background: var(--color-bg-muted);
}

.home-future__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.home-future__card {
  min-height: 220px;
  padding: 28px 24px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  /* Last two keep [data-reveal] working — a bare shorthand would drop them. */
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition),
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out);
}

.home-future__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-honey);
  box-shadow: var(--shadow-card);
}

.home-future__card.is-available {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

.home-future__card.is-available:hover {
  border-color: var(--color-honey);
  box-shadow: 0 10px 26px rgba(24, 58, 42, 0.22);
}

.home-future__card.is-available h3 {
  color: var(--color-bg);
}

.home-future__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.home-future__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.home-future__card.is-available .home-future__status {
  color: var(--color-honey);
}

.home-future__card.is-available .home-future__dot {
  box-shadow: 0 0 0 4px rgba(196, 154, 82, 0.25);
}

/* -------------------------------------------------------------------------- */
/* Brand story                                                                */
/* -------------------------------------------------------------------------- */

.home-brand {
  padding-block: var(--section-space);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.home-brand__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.home-brand__copy .eyebrow {
  margin-bottom: 12px;
}

.home-brand__copy h2 {
  margin-bottom: 18px;
}

.home-brand__copy p {
  color: var(--color-text-muted);
  margin-bottom: 16px;
  max-width: 42ch;
}

.home-brand__copy .home-brand__motto {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-accent);
  padding-left: 16px;
  border-left: 2px solid var(--color-honey);
}

.home-brand__copy .btn {
  margin-top: 12px;
}

.home-brand__visual {
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-muted);
  box-shadow: var(--shadow-soft);
}

.home-brand__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-out);
}

.home-brand__visual:hover img {
  transform: scale(1.04);
}

/* -------------------------------------------------------------------------- */
/* Final CTA                                                                  */
/* -------------------------------------------------------------------------- */

/* The section itself stays on the light ground: a full-bleed green band ran
   straight into the green footer and the two read as one block. */
.home-cta {
  padding-block: var(--section-space);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
}

/* Inset panel — copy left, actions right, split by a gold hairline. */
.home-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(44px, 6vw, 84px) clamp(28px, 6vw, 88px);
  background: var(--color-primary);
  color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(24, 58, 42, 0.2);
  /* --color-focus is the same deep green as this background, so the global
     focus ring would be invisible here. Re-point it at the ivory. */
  --color-focus: var(--color-bg);
}

/* Warm light from the top-right corner, a faint earth wash bottom-left —
   the hero's lighting, mirrored onto the dark ground. */
.home-cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 96% 0%, rgba(196, 154, 82, 0.3) 0%, rgba(196, 154, 82, 0) 70%),
    radial-gradient(46% 70% at 0% 100%, rgba(168, 91, 67, 0.2) 0%, rgba(168, 91, 67, 0) 70%);
  pointer-events: none;
}

/* Inner gold keyline, like a label border. */
.home-cta__panel::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(196, 154, 82, 0.34);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

.home-cta__copy {
  min-width: 0;
  max-width: 600px;
}

/* Same leading rule as the hero eyebrow, so the page opens and closes alike. */
.home-cta__eyebrow {
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  color: var(--color-honey);
}

.home-cta__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--color-honey);
}

/* A step above the other h2s — this is the loudest moment on the page. */
.home-cta__title {
  color: var(--color-bg);
  margin-bottom: 16px;
  /* Keeps "table." from dropping alone onto a second line. */
  text-wrap: balance;
}

.home-cta__text {
  color: rgba(245, 239, 226, 0.78);
  font-size: var(--fs-lg);
  max-width: 40ch;
  text-wrap: pretty;
}

.home-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-left: clamp(32px, 5vw, 72px);
  border-left: 1px solid rgba(196, 154, 82, 0.34);
}

.home-cta__arrow {
  transition: transform var(--dur-hover) var(--ease-out);
}

/* Gold on green: the one button on the page that is not green or cream.
   Forest text on the gold is 4.8:1. */
.home-cta .btn {
  min-width: 220px;
  background: var(--color-honey);
  color: var(--color-primary);
  border-color: var(--color-honey);
}

/* Demoted from an equal-weight outline button. At the page's terminal decision
   two buttons of the same size read as a fork rather than a close, and this one
   points back up-funnel to the brand story sitting directly above it. It stays
   reachable — it just stops competing. */
.home-cta__secondary {
  display: inline-flex;
  align-items: center;
  /* Holds the 44px tap target without dragging the underline down with it —
     the rule lives on the inner span, which hugs the text. */
  min-height: var(--btn-min-height);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  color: rgba(245, 239, 226, 0.7);
  transition: color var(--transition);
}

.home-cta__secondary span {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(245, 239, 226, 0.3);
  transition: border-color var(--transition);
}

/* Guarded like the base button rules: on touch, :hover latches after the tap
   and the button stays stuck in its hovered state. */
@media (hover: hover) and (pointer: fine) {
  .home-cta .btn:hover {
    background: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-primary);
  }

  .home-cta__secondary:hover {
    color: var(--color-bg);
  }

  .home-cta__secondary:hover span {
    border-bottom-color: var(--color-bg);
  }

  .home-cta .btn:hover .home-cta__arrow {
    transform: translateX(4px);
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .home-featured .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

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

  .home-future__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .home-origin__grid,
  .home-brand__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
  }

  .home-hero {
    --hero-offset: 98px;
  }

  /* Full-bleed, so the global image radius would only nick the corners. */
  .home-hero__media img {
    border-radius: 0;
    object-position: 50% 50%;
  }

  /* Stacked: keep the square, but cap it so it does not dominate. */
  .home-origin__visual,
  .home-brand__visual {
    max-width: 460px;
    margin-inline: auto;
  }

  /* Image leads the stack. Visual order only — the heading still comes first
     in the DOM, so the reading order is unchanged. */
  .home-brand__visual {
    order: -1;
  }

  /* Panel stacks: the divider turns from a side rule into a top rule. */
  .home-cta__panel {
    grid-template-columns: 1fr;
  }

  .home-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid rgba(196, 154, 82, 0.34);
  }
}

@media (max-width: 700px) {
  /* Two up, not one: a single card per screen turns browsing into scrolling. */
  .home-featured .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  .home-section-head {
    margin-bottom: 32px;
  }

  .home-honey-story__grid,
  .home-future__grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    padding-block: 48px;
  }

  /* The eyebrow wraps here, and a rule centred on two lines floats between
     them. Drop it rather than pin it to the first line. */
  .home-cta__eyebrow {
    padding-left: 0;
  }

  .home-cta__eyebrow::before {
    display: none;
  }

  .home-cta__text {
    font-size: var(--fs-md);
  }

  .home-cta__actions {
    flex-direction: column;
  }

  .home-cta__actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .home-hero__text {
    font-size: var(--fs-md);
  }
}

@media (max-width: 450px) {
  .home-featured .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__eyebrow,
  .home-hero__title,
  .home-hero__text,
  .home-hero__cta {
    animation: none;
  }

  .home-origin__visual img,
  .home-brand__visual img,
  .home-honey-story__media img,
  .home-honey-story__card,
  .home-future__card {
    transition: none;
  }

  .home-origin__visual:hover img,
  .home-brand__visual:hover img,
  .home-honey-story__card:hover .home-honey-story__media img,
  .home-honey-story__card:hover,
  .home-future__card:hover {
    transform: none;
  }

  /* Missed by the block above: the arrows nudge. */
  .home-hero__cta-arrow,
  .home-cta__arrow {
    transform: none;
  }
}

@keyframes homeHeroContent {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------- */
/* Touch — neutralise latched hover states                                    */
/* -------------------------------------------------------------------------- */

/* See the matching block in theme.css. On touch, :hover latches after a tap;
   without this the homepage cards stay lifted and the imagery stays zoomed. */
@media (hover: none), (pointer: coarse) {
  .home-hero__cta-arrow,
  .home-cta__arrow,
  .home-origin__visual:hover img,
  .home-brand__visual:hover img,
  .home-honey-story__card:hover,
  .home-honey-story__card:hover .home-honey-story__media img,
  .home-future__card:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Section: Discover the Collection                                           */
/* -------------------------------------------------------------------------- */

/* Sits between the brand section (--color-bg) and the final CTA, so it takes
   the muted ground to keep the page's alternating rhythm. Distinct, but by a
   half-step — a collection is still the same shop. */
.home-collection {
  padding-block: var(--section-space);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
}

.home-collection__lede {
  margin-top: 12px;
  max-width: 52ch;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--color-text-muted);
}

/* The largest collection leads at roughly a fifth again the width of the two
   beside it. Enough to be read first without turning the duos into footnotes. */
.home-collection__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 40px;
}

.home-collection__rest {
  display: grid;
  gap: 28px;
}

.home-collection__lead,
.home-collection__cell {
  display: flex;
  min-width: 0;
}

.home-collection__lead > .product-card,
.home-collection__cell > .product-card {
  flex: 1 1 auto;
}

/* The lead card earns a taller image and a larger name; everything else about
   it is the ordinary card, so the two never drift apart. */
.product-card--featured .product-card__media {
  aspect-ratio: 4 / 3;
}

.product-card--featured .product-card__title {
  font-size: clamp(24px, 4.2cqi, 34px);
}

.home-collection__cta {
  text-align: center;
}

/* Desktop reaches the collections through the shop link in the nav and the
   cards themselves, so the button is redundant there. */
@media (min-width: 761px) {
  .home-collection__cta {
    display: none;
  }
}

@media (max-width: 1100px) {
  /* Out of room for a lead column: the collections become one row of three,
     with the lead first and still first to be read. */
  .home-collection__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-collection__rest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .product-card--featured .product-card__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .home-collection__grid {
    gap: 28px;
    margin-bottom: 32px;
  }

  .home-collection__rest {
    gap: 28px 12px;
  }

  /* The lead keeps the card's normal square image on a phone — a 16/9 crop of
     a jar at this width shows mostly table. */
  .product-card--featured .product-card__media {
    aspect-ratio: 1 / 1;
  }

  .product-card--featured .product-card__title {
    font-size: clamp(20px, 8.6cqi, 30px);
  }
}