/* =============================================================================
   TOPS CULINARY SAUCES — this product's sections only.

   Loaded AFTER common.css, so anything here wins on ties and no !important
   is ever needed to override a shared rule.

   Use the cs- prefix on every class. All products share common.css, so an
   unprefixed .hero or .card would collide with the others.
   ========================================================================== */

/* This product's palette. Set these once and reference them below rather
   than repeating hex codes through the file. */
[class^="cs-"],
[class*=" cs-"] {
  --cs-red:      #E8202A;
  --cs-red-deep: #A5121A;
  --cs-accent:   #FFD84D;
  --cs-ink:      #1B1B1F;
}

/* --- 01 CS HERO -----------------------------------------------------------
   Scene image in CSS, patch and copy as elements.

   The stage locks to the scene image's aspect ratio and every position is a
   percentage of it, so the patch stays exactly where you place it against
   the artwork at any width.

   Two things break that if you get them wrong:

     --cs-ratio   must equal the scene image's real aspect ratio. Wrong, and
                  the stage is a different shape from the picture, cover()
                  crops it, and the patch drifts off its mark.
     --cs-w       keep at or below 100%, or the patch is wider than the box
                  it is positioned inside.

   Type is sized in cqw, not vw. The stage stops growing at its max width;
   vw does not, so the headline would keep swelling past the artwork. cqw
   measures the stage itself.

   All tuning is in the variable block. No rule below it needs editing to
   reposition anything.
   ------------------------------------------------------------------------- */

.cs-hero {
    --cs-scene: url(images/cs-hero-banner.webp);
    --cs-ratio: 4 / 5;
    --cs-patch: url(images/cs-bnr-patch.webp);
    --cs-x: 6%;
    --cs-y: 5%;
    --cs-w: 80%;
    --cs-h: 32%;
    --cs-size: 5.5cqw;
    --cs-lead: 1.35;
    --cs-mark: 0.8em;
    --cs-gap: 0.4em;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #F1EDE7;
    height: 400px;
    margin-top: 63px;
}
.cs-hero__stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--cs-ratio);
  background-image: var(--cs-scene);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---- The patch ------------------------------------------------------------
   Its own background, sized to fill the box exactly rather than `cover`.

   cover would crop the patch's edges whenever the box is not its natural
   ratio, and the first thing lost is the gold outline — the part that makes
   it read as a plaque at all.
   ------------------------------------------------------------------------- */

.cs-hero__patch {
  position: absolute;
  left: var(--cs-x);
  top: var(--cs-y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--cs-w);
  height: var(--cs-h);
  padding: 3% 7%;
  background-image: var(--cs-patch);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* margin: 0 matters. A browser gives h1 a default margin AND font-size: 2em,
   so an inherited cqw value would render at twice the intended size and the
   block would sit low in the patch. */
.cs-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--cs-size);
  font-weight: 800;
  line-height: var(--cs-lead);
  text-align: center;
  color: #FFFFFF;
}

/* Each line is its own flex row, so an ornament sits against the words
   rather than against the patch. Positioning them absolutely instead would
   mean re-tuning every one whenever the copy or the type size changed. */
.cs-hero__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-gap);
}

/* ---- Ornaments -----------------------------------------------------------
   Width in em, so they scale with the type they flank — one number to
   change, not two kept manually in step.

   flex: none, or a long line squashes them before it wraps.
   ------------------------------------------------------------------------- */

.cs-hero__mark {
    flex: none;
    width: var(--cs-mark);
    height: auto;
    color: transparent;
    font-size: 0;
    width: 46px;
    position: absolute;
    left: -26px;
    top: 10px;
}
.cs-hero__mark.cs-hero__mark--r {
    left: auto;
    right: -26px;
    transform: scaleX(-1);
}

/* The dot clusters read better a little smaller than the swirls, which sit
   on the same optical line as the words */
.cs-hero__mark--dots { width: 26px; }

.cs-hero__mark.cs-hero__mark--r.cs-hero__mark--dots {
    left: auto;
    right: -2px;
    bottom: -5px;
    top: auto;
}
.cs-hero__mark.cs-hero__mark--l.cs-hero__mark--dots {
    top: auto;
    bottom: -2px;
    left: 0;
}
/* ---- 48em and up: the wide scene ---------------------------------------- */

@media (min-width: 48em) {
  .cs-hero {
    --cs-scene: url('images/cs-hero-wide.webp');
    --cs-ratio: 788 / 471;     /* MUST match the landscape export */

    --cs-x: 7%;
    --cs-y: 7%;
    --cs-w: 48%;
    --cs-h: 34%;

    --cs-size: 3.1cqw;
    --cs-mark: 0.75em;
  }
}

/* Browsers without container queries fall back to viewport sizing. Close
   enough, because the stage is full-bleed at these widths. */
@supports not (container-type: inline-size) {
  .cs-hero__title { font-size: clamp(0.9rem, 5.2vw, 2rem); }
}


/* --- 02 CS TIPS -----------------------------------------------------------
   Nine cards, three across, with turning corner ornaments.

   ON THE ROTATION

   `rotate` is used rather than `transform: rotate()`. They are separate CSS
   properties now, so the keyframe cannot overwrite a translate or a scale
   set elsewhere on the same element — and nothing has to be repeated inside
   the keyframe just to preserve it.

   The two ornaments turn at different speeds and in opposite directions.
   Identical motion on both reads as a mistake; slightly different reads as
   deliberate.
   ------------------------------------------------------------------------- */

.cs-tips {
  --cs-t-red:   #E8202A;
  --cs-t-ink:   #1B1B1F;
  --cs-t-spin:  18s;          /* one full turn — slow on purpose */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.5rem, 7vw, 3rem);
  background: #FFFFFF;
}

/* ---- Corner ornaments ------------------------------------------------------ */

.cs-tips__corners {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.cs-tips__corner {
    position: absolute;
    top: -22px;
    width: clamp(3.5rem, 22vw, 8rem);
    height: auto;
    will-change: rotate;
    animation: cs-tips-spin var(--cs-t-spin) linear infinite;
    color: transparent;
    font-size: 0;
}

/* Pulled slightly off the edges, as in the artwork; the section's
   overflow: hidden trims what hangs past */
.cs-tips__corner--l { left: -8%; }

.cs-tips__corner--r {
  right: -8%;
  /* Opposite direction and a different duration, so the pair does not look
     mechanically synchronised */
  animation-duration: calc(var(--cs-t-spin) * 1);
  animation-direction: reverse;
}

@keyframes cs-tips-spin {
  to { rotate: 360deg; }
}

/* ---- Heading ---------------------------------------------------------------- */

.cs-tips__inner {
  position: relative;
  z-index: 2;                 /* over the ornaments */
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 2rem);
}

.cs-tips__head {
  margin-bottom: clamp(1rem, 4.5vw, 1.75rem);
  text-align: center;
}

.cs-tips__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 7vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--cs-t-red);
}

.cs-tips__sub {
  margin: 0.35em 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 4.8vw, 1rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--cs-t-ink);
}

/* ---- Grid ------------------------------------------------------------------- */

.cs-tips__grid {
  display: grid;
  /* minmax(0,…) matters: without it a column refuses to shrink below its
     content, and "6. Cook Vegetables Until Just Tender" would push the third
     card off a narrow screen. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- One card -----------------------------------------------------------------
   The card is a two-row grid with the caption in the second row, and
   align-content: start keeps both rows at their natural height. That way
   every image sits on one line and every caption starts on another, however
   uneven the wording is.
   ------------------------------------------------------------------------- */

.cs-tip {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  /* gap: clamp(0.3rem, 1.5vw, 0.5rem); */
  /* padding: clamp(0.3rem, 1.5vw, 0.5rem); */
  /* The dashed outline. A border rather than an outline, so the corner
     radius applies to it. */
  border: 2px dashed var(--cs-t-red);
  border-radius: clamp(6px, 2vw, 10px);
  background: #FFFFFF;
}

/* A fixed ratio, so nine cards line up whatever their images measure */
.cs-tip__shot {
    aspect-ratio: 8 / 9;
    overflow: hidden;
    border-radius: clamp(4px, 1.5vw, 6px);
    background: #FFFFFF;
}

.cs-tip__shot img {
  width: 100%;
  height: 100%;
  /* contain, not cover: these are line drawings, and cropping one loses part
     of the illustration rather than just some background */
  object-fit: cover;
  display: block;
}

.cs-tip__label {
    margin: 0;
    padding: clamp(0.4rem, 2vw, 0.7rem) clamp(0.25rem, 1.5vw, 0.6rem);
    border-radius: 0;
    background: var(--cs-t-red);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(0.62rem, 3.5vw, 0.95rem);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    align-self: stretch;
    display: grid;
    place-items: center;
}

/* ---- Reduced motion -----------------------------------------------------------
   The ornaments stop. They are decoration, so nothing is lost by holding
   them still.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cs-tips__corner { animation: none; }
}



/* --- 03 CS CLASSICS -------------------------------------------------------
   Four cards on a red band, with a turning motif at the seam between them.

   THE MOTIF

   It is a sibling of the grid, centred on the stage with left/top 50% and a
   translate. That puts it exactly where the four cards meet whatever their
   size, and it turns without being clipped — as a card's pseudo-element it
   would be cut off at that card's edge.

   `rotate` is used rather than `transform: rotate()`. They are separate
   properties now, so the keyframe cannot overwrite the translate that
   centres it, and the translate does not have to be repeated inside the
   keyframe just to survive.
   ------------------------------------------------------------------------- */

.cs-classics {
  --cs-c-red:   #E8202A;
  --cs-c-deep:  #C4141B;
  --cs-c-spin:  30s;          /* one full turn — slow on purpose */
  --cs-c-motif: clamp(4.5rem, 30vw, 5rem);

  position: relative;
  isolation: isolate;
  padding-block: clamp(1.25rem, 6vw, 2.5rem);
  background: var(--cs-c-red);
}

.cs-classics__inner {
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 4vw, 2rem);
}

.cs-classics__title {
  margin: 0 0 clamp(0.75rem, 3.5vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 6.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
}

/* ---- Stage --------------------------------------------------------------
   Exists so the motif has something to centre against. Without it the motif
   would centre on the whole section, heading and note included, and sit too
   low.
   ------------------------------------------------------------------------- */

.cs-classics__stage { position: relative; }

.cs-classics__motif {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;                 /* over the cards, under nothing */
  translate: -50% -50%;
  width: var(--cs-c-motif);
  height: auto;
  /* Never swallows a tap meant for a card */
  pointer-events: none;
  /* Only the rotation moves, so the compositor handles it without
     repainting each frame */
  will-change: rotate;
  animation: cs-classics-spin var(--cs-c-spin) linear infinite;
  /* No alt text sprawl while the file loads */
  color: transparent;
  font-size: 0;
}

@keyframes cs-classics-spin {
  to { rotate: 360deg; }
}

/* ---- Grid ------------------------------------------------------------------ */

.cs-classics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 2.5vw, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 9;
}
.cs-classic { display: grid; }

/* ---- One card -----------------------------------------------------------------
   A <button>, so the whole card is one target with keyboard focus and
   Enter/Space already working. The reset strips the browser's own button
   styling, which otherwise fights every rule below.
   ------------------------------------------------------------------------- */

.cs-classic__btn {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: start;
  gap: clamp(0.4rem, 2vw, 0.7rem);
  width: 100%;
  padding: clamp(0.5rem, 2.5vw, 0.9rem);
  border: 0;
  border-radius: clamp(8px, 2.5vw, 14px);
  background: #FFFFFF;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast, 180ms) var(--ease, ease),
              box-shadow var(--dur-fast, 180ms) var(--ease, ease);
}

@media (hover: hover) {
  .cs-classic__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(60, 2, 6, 0.55);
  }
}

.cs-classic__btn:active { transform: translateY(0); }

/* The focus ring sits outside the card, so it stays visible against the
   white rather than disappearing into it */
.cs-classic__btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* ---- Photograph ------------------------------------------------------------------ */

.cs-classic__shot {
    display: block;
    aspect-ratio: 7 / 6;
    margin-bottom: -20px;
}
.cs-classic__shot img {
  width: 100%;
  height: 100%;
  /* contain, not cover: the dishes are cut out on white, and cropping one
     would clip the bowl rather than just some background */
  object-fit: contain;
  display: block;
}

/* ---- Caption ----------------------------------------------------------------------
   align-self: stretch plus a centred grid, so a two-line caption and a
   one-line caption in the same row end up the same height.
   ------------------------------------------------------------------------- */

.cs-classic__label {
    display: grid;
    place-items: center;
    align-self: stretch;
    padding: clamp(0.35rem, 1.8vw, 0.6rem) clamp(0.3rem, 1.5vw, 0.75rem);
    border: 1.5px solid var(--cs-c-red);
    border-radius: clamp(5px, 1.8vw, 8px);
    font-family: var(--font-display);
    font-size: clamp(0.68rem, 3.5vw, 1rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--cs-c-red);
    position: relative;
    z-index: 9;
}
/* ---- Note ---------------------------------------------------------------------------- */

.cs-classics__note {
  margin: clamp(0.9rem, 4vw, 1.5rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 5vw, 1rem);
  font-weight: 800;
  text-align: center;
  color: #FFFFFF;
}

/* ---- Reduced motion --------------------------------------------------------------------
   The motif holds still and the cards stop lifting. Both are decoration, so
   nothing is lost.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cs-classics__motif { animation: none; }
  .cs-classic__btn { transition: none; }
  .cs-classic__btn:hover { transform: none; }
}



/* --- 04 CS FUN FACTS ------------------------------------------------------
   Heading, an illustration with text beside it, then two shaped cards.

   THE CARD SHAPE

   The notched outline comes from a background image, sized 100% 100% rather
   than `cover`. cover crops whenever the box is not the image's natural
   ratio, and the first thing lost is the outline — the part that makes the
   shape read at all. Stretching keeps every edge; keep --cs-f-card-ratio
   near the artwork's own proportion and the distortion will not show.

   min-height rather than a fixed height, so a card grows if its text runs
   longer than expected instead of overflowing its own frame.
   ------------------------------------------------------------------------- */

.cs-facts {
  --cs-f-red:    #E8202A;
  --cs-f-deep:   #C4141B;
  --cs-f-cream:  #FBEBD2;
  --cs-f-ink:    #B5121A;

  --cs-f-card:   url('images/cs-fact-card.webp');
  --cs-f-spin:   34s;         /* one full turn — slow on purpose */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(1.25rem, 6vw, 2.5rem);
  background: #FFFFFF;
}

/* ---- Corner ornament ------------------------------------------------------- */

.cs-facts__corner {
    position: absolute;
    top: -8%;
    right: -5%;
    z-index: 1;
    width: clamp(3.5rem, 22vw, 8rem);
    height: auto;
    pointer-events: none;
    will-change: rotate;
    animation: cs-facts-spin var(--cs-f-spin) linear infinite;
    color: transparent;
    font-size: 0;
}

/* `rotate`, not `transform: rotate()`. They are separate properties now, so
   this cannot overwrite a translate set elsewhere on the element. */
@keyframes cs-facts-spin {
  to { rotate: 360deg; }
}

/* ---- Layout ----------------------------------------------------------------- */

.cs-facts__inner {
  position: relative;
  z-index: 2;                 /* over the ornament */
  width: 100%;
  max-width: var(--container, 75rem);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 3vw, 2rem);
}

.cs-facts__title {
  margin: 0 0 clamp(0.75rem, 3.5vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 7vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cs-f-red);
}

/* ---- Illustration and note -----------------------------------------------------
   Side by side at every width, as in the design. The illustration takes the
   larger share and the note sizes to what is left.
   ------------------------------------------------------------------------- */

.cs-facts__lead {
    display: grid;
    grid-template-columns: minmax(0, 78fr) minmax(0, 40fr);
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1rem);
    margin-bottom: clamp(1rem, 4.5vw, 1.75rem);
}
/* The dashed frame around the drawing */
.cs-facts__shot {
  overflow: hidden;
  border: 1.5px dashed var(--cs-f-red);
  border-radius: clamp(6px, 2vw, 10px);
  background: var(--cs-f-cream);
}

.cs-facts__shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: clamp(4px, 1.5vw, 7px);
}

.cs-facts__when {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--cs-f-red);
}
.cs-facts__what {
  margin: 0.3em 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 3.1vw, 0.95rem);
  font-weight: 700;
  line-height: 1.50;
  color: var(--cs-f-deep);
  text-wrap: pretty;          /* avoids a single word on the last line */
}

/* ---- The two cards ---------------------------------------------------------- */

.cs-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-fact {
  --cs-f-card-ratio: 1 / 1;   /* near the artwork's own proportion */

  display: grid;
  place-content: center;
  /* Generous, because the notched corners eat into the usable area — text
     set tight to the edge would sit on the outline */
  padding: 14% 10%;
  min-height: 0;
  aspect-ratio: var(--cs-f-card-ratio);
  background-image: var(--cs-f-card);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  width: 100%;
}

.cs-fact__when {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 5vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cs-f-cream);
}

.cs-fact__what {
  margin: 0.35em 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 3vw, 0.9rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--cs-f-cream);
  text-wrap: pretty;
}

/* ---- Reduced motion ------------------------------------------------------------
   The ornament holds still. It is decoration, so nothing is lost.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cs-facts__corner { animation: none; }
}











/* --- 03 PRODUCT CAROUSEL -------------------------------------------------
   Manual, arrow-driven. The track is a native horizontal scroll container
   with snap points, which means touch swipe and keyboard both work with no
   JavaScript at all — carousel.js only adds the arrow buttons and their
   disabled states on top of behaviour the browser already provides.
 
   Card width is derived from --visible, the number of cards on screen at
   once. The fractional part is the peek: 1.7 shows one card plus 70% of the
   next, so there is always a visible cue that the row continues.
   ------------------------------------------------------------------------- */
 
.range {
  position: relative;
  background: var(--grad-page);
  overflow: hidden;
}
 
.carousel {
  position: relative;
  --visible: 1.7;
  --card-gap: var(--sp-sm);
}
 
.carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Snap lands the card flush with the gutter rather than the raw edge */
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: var(--sp-sm);
  -webkit-overflow-scrolling: touch;
  /* The arrows are the affordance; a scrollbar underneath them is noise */
  scrollbar-width: none;
}
 
.carousel__track::-webkit-scrollbar { display: none; }
 
.carousel__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
 
/* ---- Card --------------------------------------------------------------- */
 
.card {
  /* 100% here is the track's content box, so the gutters are already
     excluded and the peek maths stays honest at every width. */
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--card-gap)) / var(--visible));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
 
.card__media {
    position: relative;
    aspect-ratio: 6 / 7;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
/* Background layer: the animated sauce splash */
.card__splash {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* If the splash file has a white background rather than transparency,
     uncomment this and it drops out against the white card:
     mix-blend-mode: multiply; */
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-mid) var(--ease-out);
}
 
/* Foreground layer: the product pack */
.card__product {
    position: relative;
    z-index: 1;
    width: 90%;
    height: 90%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    /* filter: drop-shadow(0 10px 14px rgba(74, 2, 6, 0.28)); */
    transition: transform var(--dur-slow) var(--ease-out);
}
 
/* Red footer bar: product name left, pack size right, as in the reference */
.card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xs);
  margin-top: auto;
  padding: 0.6rem 0.85rem;
  background: var(--grad-accent);
  color: var(--white);
}
.card:last-child .card__bar{
  padding: 0.6rem 0.45rem;
  
}
.card:last-child .card__bar .card__name{
  font-size: 12px;
}
 .card__bar .nong{
  font-size:14px;
  flex-shrink: 0;
 }
.card__name {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
}
 
.card__size {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.95;
}
 
/* ---- Arrows -------------------------------------------------------------- */
 
.carousel__nav {
    position: absolute;
    top: 45%;
    z-index: 3;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    outline: none;
    border: none;
    color: var(--red-600);
    box-shadow: 0 10px 24px -8px rgba(35, 18, 8, 0.45);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-mid) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.carousel__nav svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
 
.carousel__nav--prev { left: calc(var(--gutter) / 3); }
.carousel__nav--next { right: calc(var(--gutter) / 3); }
 
.carousel__nav:hover {
  background: var(--red-600);
  color: var(--white);
  transform: scale(1.08);
}
 
.carousel__nav:active { transform: scale(1); }
 
/* At either end the button stays in place but stops inviting a press —
   removing it entirely would shift the other arrow and jump the layout. */
.carousel__nav[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
 
/* Without JS the arrows do nothing, so they are not offered.
   is-complete means every card already fits — no arrows needed either. */
.no-js .carousel__nav,
.carousel.is-complete .carousel__nav { display: none; }
 
/* Hover lift. Guarded so touch devices never get a stuck hover state.
   The splash pushes out a little further than the pack, which reads as
   depth between the two layers. */
@media (hover: hover) {
  .card:hover,
  .card:focus-within {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow-lg);
  }
 
}
 
/* ---- Cards on screen at each width, peek preserved throughout ------------ */
 
@media (min-width: 40em)  { .carousel { --visible: 2.7; } }
@media (min-width: 62em)  { .carousel { --visible: 3.7; } }
@media (min-width: 80em)  { .carousel { --visible: 4.7; } }
 
@media (min-width: 62em) {
  .carousel__nav { width: 3.25rem; height: 3.25rem; }
}