/* ==========================================================================
   PddFalcon — home page, premium layer

   Loaded last, after snap.css and snap-inner.css. It refines that design; it
   does not replace it. Every rule is scoped to `.s-home` (the home stack) or
   to a band inside it, so nothing here can reach a listing, a product page or
   the header — and every colour is a token from tokens.css or an rgb()/
   color-mix() built from the four brand values those tokens hold:
     navy   #0d2454  →  rgb(13 36 84)
     deep   #061031  →  rgb(6 16 49)
     red    #c4260c  →  rgb(196 38 12)
     gold   #ffb800  →  rgb(255 184 0)

   Four things separate this from the competent page it started as: a type
   scale that is decided rather than inherited, depth that is layered rather
   than dropped, a vertical rhythm that gives the dark bands room and keeps
   the shelves tight, and detail — printed badges, rules that grow, dark
   panels that read as lit instead of filled.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Local material
   Shadows are three stops, not one: a contact edge, a short mid, a long
   ambient. That is the whole difference between a card that sits on the page
   and one that floats over it. `--hp-edge` is the hairline that catches light
   on a card's top edge; on dark panels the same idea at lower alpha.
   -------------------------------------------------------------------------- */
.s-home {
  --hp-line: rgb(13 36 84 / .11);
  --hp-line-soft: rgb(13 36 84 / .07);
  --hp-tint: color-mix(in srgb, var(--s-cream) 58%, #fff);

  --hp-lift-1: 0 1px 1px rgb(13 36 84 / .04), 0 3px 7px -3px rgb(13 36 84 / .07), 0 12px 26px -16px rgb(13 36 84 / .18);
  --hp-lift-2: 0 1px 1px rgb(13 36 84 / .05), 0 7px 16px -7px rgb(13 36 84 / .12), 0 24px 46px -24px rgb(13 36 84 / .28);
  --hp-lift-3: 0 2px 3px rgb(13 36 84 / .06), 0 14px 28px -12px rgb(13 36 84 / .18), 0 38px 66px -34px rgb(13 36 84 / .38);
  --hp-edge: inset 0 1px 0 rgb(255 255 255 / .92);
  --hp-edge-dark: inset 0 1px 0 rgb(255 255 255 / .16);

  /* Film grain. A 160px tile of fractal noise, blended soft-light at low
     opacity over the dark bands, so a flat expanse of navy has something in
     it at close range instead of banding. */
  --hp-grain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");

  /* The colour behind a band, so a control can punch a hole in a rule that
     runs behind it. Products bands override it when they are striped. */
  --hp-band-bg: #fff;
}

/* --------------------------------------------------------------------------
   1. Type
   A decided scale: display sizes get tighter tracking and a shorter leading,
   body copy gets a measure it can be read at, and every number that sits in a
   column with another number gets tabular figures so the columns line up.
   -------------------------------------------------------------------------- */
.s-home .sp-title,
.s-home .sp-hero__title,
.s-home .sp-story__title,
.s-home .sp-widget__title,
.s-home .sp-widget__adtitle,
.s-home .sp-promo__title,
.s-home .sp-coll__name,
.s-home .sp-mosaic__label {
  font-optical-sizing: auto;
  text-wrap: balance;
}

.s-home .sp-title {
  font-size: clamp(1.32rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -.024em;
  padding-block-end: .55rem;
}
.s-home .sp-hero__title { letter-spacing: -.032em; line-height: 1.02; }
.s-home .sp-story__title { letter-spacing: -.028em; line-height: 1.04; }
.s-home .sp-widget__title { letter-spacing: -.018em; line-height: 1.15; }
.s-home .sp-promo__title,
.s-home .sp-widget__adtitle { letter-spacing: -.022em; }

/* Ledes: a line length that can be read, and no orphan on the last line. */
.s-home .sp-sub,
.s-home .sp-hero__lede,
.s-home .sp-story__copy,
.s-home .sp-promo__text,
.s-home .sp-widget__adtext {
  text-wrap: pretty;
}
.s-home .sp-sub {
  max-inline-size: 62ch;
  font-size: var(--s-text-md);
  line-height: 1.55;
  color: var(--s-muted);
}

/* Eyebrows: a leading rule in the eyebrow's own colour, echoing the hero's.
   It is what makes four different bands read as one page. */
.s-home .sp-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  letter-spacing: .16em;
  margin-block-end: .5rem;
}
.s-home .sp-eyebrow::before {
  content: "";
  flex: none;
  inline-size: 1.4rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* The short red rule under a section title, drawn as the band arrives.
   Without motion.js it is simply there at full width, so nothing depends on
   script to be visible. */
.s-home .sp-title::after {
  inline-size: 2.75rem;
  block-size: 3px;
  background: var(--s-accent-500);
}
html[data-motion] .s-home .sp-reveal .sp-title::after {
  inline-size: 0;
  transition: inline-size .75s var(--sp-ease) .15s;
}
html[data-motion] .s-home .sp-reveal.is-in .sp-title::after { inline-size: 2.75rem; }

/* Figures. Anything that is a count, a price or a capacity gets lining
   tabular numerals — 41 over 163 with the digits in the same columns. */
.s-home .sp-hero__statvalue,
.s-home .sp-hero__counter,
.s-home .sp-head__meta b,
.s-home .sp-widget__foot b,
.s-home .sp-mini__price,
.s-home .sp-card__price strong,
.s-home .sp-card__price s,
.s-home .sp-cat__count b,
.s-home .sp-coll__cta b,
.s-home .sp-fact strong,
.s-home .sp-promo__num,
.s-home .sp-spec {
  font-variant-numeric: tabular-nums lining-nums;
}
.s-home .sp-card__price strong,
.s-home .sp-mini__price { letter-spacing: -.015em; }

/* The counted meta line under a head: small, tracked, with the figure itself
   set in navy so the eye lands on the number and not on the noun. */
.s-home .sp-head__meta {
  margin: .65rem 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.s-home .sp-head__meta b {
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--s-brand-800);
}

/* --------------------------------------------------------------------------
   2. Rhythm
   The stack gives every band the same gap regardless of what it weighs. The
   dark, full-width bands (story, spotlight) get room around them; the shelf
   row stays tucked under the showcase it belongs to. Phone stays dense.
   -------------------------------------------------------------------------- */
.s-home > .sp-section { margin-block: .45rem; }
.s-home > #home-shelves { margin-block-start: .6rem; }
.s-home > [data-band="story"],
.s-home > [data-band="promos"],
.s-home > [data-band="banner"] { margin-block: 1rem; }

@media (min-width: 62rem) {
  .s-home > .sp-section { margin-block: 1.25rem; }
  .s-home > #home-shelves { margin-block-start: 1rem; }
  .s-home > [data-band="story"],
  .s-home > [data-band="promos"],
  .s-home > [data-band="banner"] { margin-block: 2.25rem; }
  .s-home .sp-head { margin-block-end: 1.35rem; }
}

/* A head with no tools column: give the lede a measure instead of letting it
   run the width of the page. */
.s-home .sp-head--stack { display: block; }

/* --------------------------------------------------------------------------
   3. Surfaces
   One shadow language for every card on the page, plus the lit top edge.
   -------------------------------------------------------------------------- */
.s-home .sp-widget,
.s-home .sp-card,
.s-home .sp-cat,
.s-home .sp-coll,
.s-home .sp-promise {
  border-color: var(--hp-line-soft);
  box-shadow: var(--hp-lift-1), var(--hp-edge);
}
.s-home .sp-widget:hover,
.s-home .sp-card:hover,
.s-home .sp-cat:hover,
.s-home .sp-coll:hover {
  box-shadow: var(--hp-lift-2), var(--hp-edge);
  border-color: var(--hp-line-soft);
}
.s-home .sp-mosaic__tile,
.s-home .sp-promo { box-shadow: var(--hp-lift-2), inset 0 1px 0 rgb(255 255 255 / .10); }
.s-home .sp-mosaic__tile:hover,
.s-home .sp-promo:hover { box-shadow: var(--hp-lift-3), inset 0 1px 0 rgb(255 255 255 / .14); }

/* Focus stays visible everywhere, and turns gold where the ground is dark. */
.s-home a:focus-visible,
.s-home button:focus-visible {
  outline: 2px solid var(--s-accent-500);
  outline-offset: 3px;
  border-radius: 8px;
}
.s-home .sp-hero a:focus-visible,
.s-home .sp-hero button:focus-visible,
.s-home .sp-story a:focus-visible,
.s-home .sp-mosaic__tile:focus-visible,
.s-home .sp-widget--ad:focus-visible { outline-color: var(--s-cool-500); }

/* Thumb-sized targets. The page is read on a phone; nothing a finger has to
   find is allowed under 44px. */
.s-home .sp-btn { min-block-size: 2.75rem; }
.s-home .sp-card__btn { block-size: 2.75rem; }
.s-home .sp-arrow { inline-size: 2.75rem; block-size: 2.75rem; }
.s-home .sp-viewall,
.s-home .sp-widget__all {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: .25rem;
}

/* A red hairline that grows out of the link rather than an underline that is
   simply switched on. */
.s-home .sp-viewall,
.s-home .sp-widget__all,
.s-home .sp-coll__cta {
  background-image: linear-gradient(var(--s-accent-500), var(--s-accent-500));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .55rem);
  background-size: 0 1.5px;
  transition: background-size .35s var(--sp-ease);
}
.s-home .sp-viewall:hover,
.s-home .sp-widget__all:hover,
.s-home .sp-coll:hover .sp-coll__cta { background-size: 100% 1.5px; }
.s-home .sp-viewall:hover { text-decoration: none; }
.s-home .sp-coll__cta {
  align-self: flex-start;
  padding-block-end: .35rem;
  background-position: 0 100%;
}

/* --------------------------------------------------------------------------
   4. Hero
   Lit, not filled: a warm key light from the top left, the existing bottom
   scrim, and a vignette that keeps the eye inside the frame. The ken-burns is
   held to a whisper — 4% over sixteen seconds instead of 6% over nine, which
   is the difference between a photograph that breathes and one that drifts.
   -------------------------------------------------------------------------- */
.s-home .sp-hero__frame { box-shadow: var(--hp-lift-2); }
.s-home .sp-hero__slide::after {
  background:
    radial-gradient(70% 55% at 10% 6%, rgb(255 184 0 / .10), transparent 62%),
    linear-gradient(0deg, rgb(6 16 49 / .93) 0%, rgb(6 16 49 / .58) 44%, rgb(6 16 49 / .06) 78%),
    radial-gradient(125% 105% at 50% 46%, transparent 52%, rgb(6 16 49 / .38) 100%);
}
.s-home .sp-hero__slide.is-active img { animation: hp-kenburns 16s var(--sp-ease) both; }
@keyframes hp-kenburns { from { scale: 1.04; } to { scale: 1.005; } }

.s-home .sp-hero__eyebrow { letter-spacing: .16em; }
.s-home .sp-hero__lede { color: rgb(255 255 255 / .88); max-inline-size: 46ch; }

/* The counted stat line. Four figures in one row, divided by hairlines, the
   value in the display face over a tracked label — a spec plate, not a list
   of perks. */
.s-home .sp-hero__stats {
  inline-size: 100%;
  max-inline-size: 40rem;
  gap: .75rem 0;
  margin-block-start: .9rem;
  padding-block-start: .85rem;
  border-block-start: 1px solid rgb(255 255 255 / .2);
}
.s-home .sp-hero__stat {
  flex: 1 1 8rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding-inline: .95rem;
  border-inline-start: 1px solid rgb(255 255 255 / .16);
}
.s-home .sp-hero__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.s-home .sp-hero__stat::before { content: none; }   /* the perk dot has no job here */
.s-home .sp-hero__statvalue {
  font-family: var(--s-font-display);
  font-size: clamp(1.05rem, .88rem + .55vw, 1.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  white-space: nowrap;
}
.s-home .sp-hero__statlabel {
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .68);
}

/* Slide counter and progress dots.

   The invisible hit area was two pixels short of the rule it was written for:
   a 25.6 × 4.8 pill inside a 33 × 42 target, where a tap 14px above the dot's
   centre fell through to the slide behind it. The pseudo now reaches -1.3rem /
   -.6rem, and the gap opens to exactly twice that reach so the three targets
   tile edge to edge: no dot's area laps over its neighbour's pill, and none of
   them is wasted in dead space. A dot owns 25.6 + 19.2 = 44.8 across and 46.4
   down, measured. The pseudo is never painted and the pills keep their size,
   colour and radius; the only thing a visitor could see is 14px more air
   between three dots in a hero foot that had 160px spare. */
.s-home .sp-hero__counter b { letter-spacing: -.02em; }
.s-home .sp-hero__dots { gap: 1.2rem; }
.s-home .sp-hero__dot { overflow: visible; }
.s-home .sp-hero__dot::before {              /* hit area only — never painted */
  content: "";
  position: absolute;
  inset-block: -1.3rem;
  inset-inline: -.6rem;
}

/* Clearance under the foot.

   The counter and the dots sat 11.2px off the bottom of a 269px frame at 390,
   and 22.4px off a 530px one at 1440 — the same 4% of the picture either way,
   which is close enough that they read as something the photograph had spilled
   rather than a control placed on it. A gutter's worth of air, 18px and 30px,
   is enough to look placed.

   The body's bottom padding has to move with the foot or the gain is taken out
   of the copy: at 390 the call to action cleared the foot by 8px, so a foot
   rising 7px on its own would have left it 1px. Both rise together and the
   clearance comes out at 9.8px. Desktop has a stat plate rather than a button
   above the foot, 15.6px clear, and that figure is held as well. 40–62rem is
   left alone: its foot is already 16px up and its body padding is 3.6rem, more
   than the phone value below. */
@media (max-width: 39.99rem) {
  .s-home .sp-hero__foot { inset-block-end: 1.15rem; }
  .s-home .sp-hero__body { padding-block-end: 3.2rem; }
}
@media (min-width: 62rem) {
  .s-home .sp-hero__foot { inset-block-end: 1.9rem; }
  .s-home .sp-hero__body { padding-block-end: 4.5rem; }
}

/* Mosaic tiles: a red rule that draws itself across the foot on hover. */
.s-home .sp-mosaic__label small { letter-spacing: .14em; }

/* The tile's own call to action, on a screen that cannot hover.

   `Shop now →` is revealed by :hover under 62rem, so on every phone and tablet
   it was laid out, measured and then never painted: 17.5px of the label's 83px
   — 21% of it — reserved for a line no touch visitor could see. The three tiles
   were the only things in the showcase with nothing to tap towards. Shown on a
   touch pointer it costs no layout at all, because the room was already spent:
   measured after, the label is the same 83px and the line sits 11.6–28.3% up
   it, which is inside the .88-or-better part of the wash the stops below were
   drawn for. A mouse keeps the reveal it was designed with. */
@media (hover: none) {
  .s-home .sp-mosaic__label em { opacity: 1; translate: 0; }
}

/* The label's copy started 12px in while every other edge on the page holds to
   the 16px gutter, so the tile's words sat a notch inside the page's own
   margin. The block padding is untouched: the stops below are measured against
   it. */
@media (max-width: 39.99rem) {
  .s-home .sp-mosaic__label { padding-inline: 1rem; }
}

/* A legibility floor under the mosaic label.

   snap.css fades the label's own wash to nothing across the box, which works
   only for as long as the merchant uploads dark photographs. On the pale
   steel-on-white tile the white title measured 3.85:1 against the median
   backdrop with 55% of that backdrop under 4.5:1 — legibility was a property
   of the picture rather than of the design.

   The stops are measured, not guessed. Inside an 83px label the three text
   rows sit between 4% and 70% of the way up from its foot — "Shop now" at
   4–22%, the title at 35–54%, the gold eyebrow highest at 56–70% — and the top
   26% is padding with nothing in it. So the wash holds at .88 or better to
   74%, which covers every row including the eyebrow, and only then falls away.
   Above the copy the picture comes through exactly as it did, which is what
   keeps a tile looking like a photograph rather than a panel. #061031 is the
   brand's deep navy — the value the hero and the story band already scrim
   with; the two dark tiles were past this floor already and do not move. */
.s-home .sp-mosaic__label {
  background: linear-gradient(0deg,
    rgb(6 16 49 / .94) 0%,
    rgb(6 16 49 / .88) 62%,
    rgb(6 16 49 / .8) 74%,
    rgb(6 16 49 / .3) 88%,
    rgb(6 16 49 / 0) 100%);
  text-shadow: 0 1px 2px rgb(6 16 49 / .45);
}
.s-home .sp-mosaic__tile::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 3px;
  background: var(--s-accent-500);
  transition: inline-size .5s var(--sp-ease);
}
.s-home .sp-mosaic__tile:hover::after,
.s-home .sp-mosaic__tile:focus-visible::after { inline-size: 100%; }

/* --------------------------------------------------------------------------
   5. Widget shelves + the bulk-order card
   -------------------------------------------------------------------------- */
.s-home .sp-widget { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--s-cream) 45%, #fff)); }
.s-home .sp-widget__head { align-items: center; }
.s-home .sp-widget__sub { letter-spacing: .01em; }
.s-home .sp-mini__pic { border-color: var(--hp-line-soft); }
.s-home .sp-mini__name { color: var(--s-muted); }

/*
 * The offer under a shelf price: what it was, and what that saves.
 *
 * Same two marks and the same colours as the product card's — muted strike,
 * green saving — so the two read as one language, at the smaller size a 127px
 * tile can carry. The negative top margin eats most of the .3rem the tile's own
 * column gap puts between every pair of rows: that gap is the space between a
 * name and a price, and this line belongs to the price above it rather than
 * being a third thing in the stack.
 *
 * `white-space: nowrap` on both marks because the alternative is "₹381." on one
 * line and "25" on the next. If the pair ever outgrows the tile it wraps between
 * them, which still reads.
 */
.s-home .sp-mini__offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem;
  margin-block-start: -.18rem;
  font-size: .68rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
}
.s-home .sp-mini__offer s {
  color: var(--s-muted);
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.s-home .sp-mini__offer em {
  font-style: normal;
  font-weight: 800;
  color: var(--s-success);
  white-space: nowrap;
}

/* The shelf's foot line, pushed to the bottom of the card so all three feet
   sit on one line across the row, with a hairline separating it from the
   tiles it summarises. */
.s-home .sp-widget__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;   /* label left, figure right — a ledger line
                                       rather than a short phrase with a third
                                       of the row empty beside it */
  gap: .45rem;
  margin: auto 0 0;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--hp-line-soft);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.s-home .sp-widget__foot b {
  font-size: var(--s-text-md);
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--s-brand-800);
}
.s-home .sp-widget__grid { margin-block-end: .2rem; }

/* The ad card is a dark band in miniature: the same key light, the same grain,
   the glass panel lifted off the picture rather than laid on it. */
.s-home .sp-widget--ad { box-shadow: var(--hp-lift-2); }
.s-home .sp-widget--ad::before {
  background:
    radial-gradient(80% 60% at 18% 2%, rgb(255 184 0 / .16), transparent 58%),
    linear-gradient(0deg, rgb(6 16 49 / .8), rgb(6 16 49 / .1) 62%);
}
/* The panel carried an 11px gold eyebrow over a photograph at .58 alpha, which
   is the one place on the site where text did not clear its ground: 4.46:1
   against the median backdrop with 76% of the pixels under the words below
   4.5:1. The gold stays — it is the eyebrow colour the hero and the story band
   both use — and the scrim deepens instead, weighted to the top where the
   eyebrow sits. Same colour, same glass, more of it. */
.s-home .sp-widget__adbody {
  background:
    var(--hp-grain),
    linear-gradient(160deg, rgb(6 16 49 / .86), rgb(6 16 49 / .74));
  background-size: 160px 160px, auto;
  background-blend-mode: soft-light, normal;
  border-color: rgb(255 255 255 / .2);
  box-shadow: 0 22px 46px -24px rgb(0 0 0 / .75), var(--hp-edge-dark);
}
.s-home .sp-widget__adeyebrow { letter-spacing: .14em; }
.s-home .sp-widget__adtext { color: rgb(255 255 255 / .82); }

/* The counted spec chips — the only route these figures have to a phone,
   where the hero's stat line is hidden. */
.s-home .sp-widget__adspecs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: .35rem;
}

/* --------------------------------------------------------------------------
   6. Spec chips
   Printed rather than stuck on: a hairline pill, no drop shadow, the figure
   in tabular numerals.
   -------------------------------------------------------------------------- */
.s-home .s-chip.sp-spec {
  padding: .42rem .75rem;
  background: color-mix(in srgb, var(--s-brand-100) 55%, #fff);
  border: 1px solid var(--hp-line-soft);
  color: var(--s-brand-800);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .015em;
  box-shadow: var(--hp-edge);
}
.s-home .sp-widget--ad .s-chip.sp-spec {
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .24);
  color: #fff;
  box-shadow: var(--hp-edge-dark);
}

/* --------------------------------------------------------------------------
   7. Categories + collections
   -------------------------------------------------------------------------- */
.s-home .sp-cat__pic { border-block-end: 1px solid var(--hp-line-soft); }
.s-home .sp-cat__name { letter-spacing: -.005em; }

/* One stage for every cut-out tile.

   `sp-cat--flat` marks the tiles whose photograph is a product on a plain
   ground, and snap.css stands each one on `hsl(var(--hue) …)` where the hue is
   `index * 47` — so the row arrived as pink, cream, pale blue, lilac,
   yellow-green, magenta, one tint per tile and not one of them a brand colour.
   Six photographs, not one set. They stand on a single pale navy stage here,
   mixed from --s-brand-100 (#e8eefa), which is what makes the row read as a
   row. Tiles whose picture is a scene keep their picture: `cover` fills the
   box edge to edge and a tint behind it would never be seen. */
.s-home .sp-cat--flat .sp-cat__pic {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--s-brand-100) 42%, #fff),
    color-mix(in srgb, var(--s-brand-100) 94%, #fff));
}

/* 10.56px is below anything a count should be set at. --s-text-xs is 12px, and
   the tracking comes back a notch so the longest label still sits on one line
   inside a 3-up tile on a phone. */
.s-home .sp-cat__count {
  font-size: var(--s-text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.s-home .sp-cat__count b { font-weight: 800; color: var(--s-brand-800); letter-spacing: .02em; }

/* One baseline for the counts in a row.

   Three tiles to a page on a phone and the names are 109px wide, so "Glasses"
   takes one line and "Insulated Bottles" takes two — measured, the count under
   the short name started 138px down the card and the count beside it 154px, a
   16px stagger in a row of three. Reserving both lines costs the short names
   nothing a visitor can see and gives the row a rule to sit on. At 1440 all six
   names measured one line at 16px, so the desktop row is left as it is rather
   than given 15px of reserved air per tile for a stagger it does not have. */
@media (max-width: 39.99rem) {
  .s-home .sp-cat__name { min-block-size: 2.4em; }
}

/* The same stagger one band later: the subtitle under a collection's name runs
   to two lines for "Drinkware" and one for "Kitchen Tools", which left the
   three "N products →" lines 9px out of true across the row at 1440. The clamp
   was already two lines; this reserves them. */
.s-home .sp-coll__subs { line-height: 1.45; min-block-size: 2.9em; }

.s-home .sp-coll { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--s-cream) 55%, #fff)); }
.s-home .sp-coll__pic { border-color: var(--hp-line-soft); }
.s-home .sp-coll__name { letter-spacing: -.018em; }
.s-home .sp-coll__subs { letter-spacing: .01em; }
.s-home .sp-coll__cta b { color: var(--s-brand-800); }

/* --------------------------------------------------------------------------
   8. Product bands
   `data-stripe` is the flag home.blade.php has always computed. Drawn as a
   pale wash that fades in and out over its own padding, so the alternation
   reads as rhythm rather than as a set of hard stripes.
   -------------------------------------------------------------------------- */
.s-home [data-band="products"][data-stripe] {
  --hp-band-bg: var(--hp-tint);
  padding-block: 1.75rem;
  border-radius: var(--sp-radius-lg);
  background: linear-gradient(180deg,
    transparent 0,
    var(--hp-tint) 2.5rem,
    var(--hp-tint) calc(100% - 2.5rem),
    transparent 100%);
}
@media (min-width: 62rem) {
  .s-home [data-band="products"][data-stripe] { padding-block: 2.5rem; margin-block: .5rem; }
}

/* A long grid ends a full screen away from its heading. Close it with the
   call to action set on a rule that runs the width of the shelf. */
.s-home .sp-shelf__foot {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 1.85rem 0 0;
}
.s-home .sp-shelf__foot::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--hp-line) 16%, var(--hp-line) 84%, transparent);
}
.s-home .sp-shelf__foot .sp-btn {
  position: relative;
  background: var(--hp-band-bg);
  border-color: var(--hp-line);
  box-shadow: 0 0 0 .6rem var(--hp-band-bg), var(--hp-lift-1);
}
.s-home .sp-shelf__foot .sp-btn i { transition: translate .25s var(--sp-ease); }
.s-home .sp-shelf__foot .sp-btn:hover i { translate: .2rem 0; }

/* A badge that reads as printed on the tile: flat ink, tight corner, a single
   highlight along the top edge — no drop shadow lifting it off the picture. */
.s-home .sp-badge {
  border-radius: 4px;
  padding: .28rem .5rem;
  background: var(--s-accent-600);
  font-size: .63rem;
  letter-spacing: .07em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .24);
}

/* Red is the page's one loud colour: the primary button, the rule under every
   section title, every "View all". The badge was spending it on a material
   label — 53 of 53 cards on the home page wear one, 51 of them reading "204
   CU" — so a field of red sat behind the one red the shopper is meant to act
   on, and the badge itself said nothing, because everything said it.

   The card's price carries an `em` only when there is a genuine discount, and
   that is exactly when the badge reads "n% off". So the selector below leaves
   the deal badge in red and prints the spec label as a navy chip instead. A
   browser without :has() drops the rule and keeps today's red — nothing
   breaks, the grid is simply as loud as it was. */
.s-home .sp-card:not(:has(.sp-card__price em)) .sp-badge {
  background: color-mix(in srgb, var(--s-brand-800) 9%, #fff);
  color: var(--s-brand-800);
  box-shadow: inset 0 0 0 1px rgb(13 36 84 / .16);
}
.s-home .sp-rating { box-shadow: var(--hp-lift-1); }

/* --------------------------------------------------------------------------
   9. Promises + the steel strip
   -------------------------------------------------------------------------- */
.s-home .sp-promise {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp-tile) 70%, #fff), var(--sp-tile));
}
.s-home .sp-promise:hover { background: #fff; box-shadow: var(--hp-lift-2), var(--hp-edge); }
.s-home .sp-promise__icon { box-shadow: var(--hp-lift-1), var(--hp-edge); }
.s-home .sp-promise__title { letter-spacing: -.005em; }
/* The numeral is drawn from `data-index`, absolutely positioned, so the two
   grid areas the desktop card is built from stay exactly as they were. */
.s-home .sp-promise::after {
  content: attr(data-index);
  position: absolute;
  inset-block-start: .6rem;
  inset-inline-end: .8rem;
  font-family: var(--s-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgb(13 36 84 / .13);
  pointer-events: none;
  transition: color .3s var(--sp-ease);
}
.s-home .sp-promise:hover::after { color: rgb(196 38 12 / .3); }
@media (min-width: 62rem) {
  .s-home .sp-promise__title,
  .s-home .sp-promise__note { padding-inline-end: 1.6rem; }
}

/* The strip that closes the band. It had no separation from the cards above
   it and left the whole right half of the row empty; on desktop the label and
   the chips now share one line under a hairline. */
.s-home .sp-steel {
  display: grid;
  gap: .7rem;
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--hp-line);
}
.s-home .sp-steel__label { margin: 0; color: var(--s-accent-500); }
.s-home .sp-steel__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
@media (min-width: 62rem) {
  .s-home .sp-steel { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   10. Spotlight cards
   -------------------------------------------------------------------------- */
.s-home .sp-promo__eyebrow { letter-spacing: .14em; }
.s-home .sp-promo--split .sp-promo__pic::before {
  background:
    linear-gradient(90deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 30%, transparent) 22%, transparent 42%),
    linear-gradient(90deg, rgb(13 36 84 / .22), transparent 12%);
}
.s-home .sp-promo__num {
  font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem);
  letter-spacing: -.05em;
  inset-block-start: .5rem;
  inset-inline-end: .9rem;
}
.s-home .sp-promo__cta {
  min-block-size: 2.75rem;
  padding-inline: 1.15rem;
  box-shadow: 0 10px 22px -12px rgb(196 38 12 / .8), inset 0 1px 0 rgb(255 255 255 / .2);
}
.s-home .sp-promo--split[data-tone="navy"] .sp-promo__text { color: rgb(255 255 255 / .84); }

/* --------------------------------------------------------------------------
   11. Story
   The band was filled, not lit: the wash sits behind the photograph, so a
   half-opaque kitchen came through the copy and the fact cards floated on it.
   The scrim here is `::after`, which paints over the picture, with a warm key
   light top-left, a red bounce bottom-right and grain over the lot.
   -------------------------------------------------------------------------- */
.s-home .sp-story {
  isolation: isolate;
  box-shadow: var(--hp-lift-3), inset 0 1px 0 rgb(255 255 255 / .12);
}
.s-home .sp-story__bg { opacity: .5; }
.s-home .sp-story::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--hp-grain),
    radial-gradient(75% 60% at 6% -6%, rgb(255 184 0 / .13), transparent 58%),
    radial-gradient(60% 70% at 104% 108%, rgb(196 38 12 / .2), transparent 62%),
    linear-gradient(102deg, rgb(6 16 49 / .9) 0%, rgb(6 16 49 / .78) 40%, rgb(6 16 49 / .58) 72%, rgb(6 16 49 / .72) 100%);
  background-size: 160px 160px, auto, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal;
}
.s-home .sp-story__inner { z-index: 2; }
.s-home .sp-story__copy {
  color: rgb(255 255 255 / .86);
  line-height: 1.65;
  max-inline-size: 54ch;
  text-shadow: none;
}
.s-home .sp-story .sp-eyebrow--light { letter-spacing: .16em; }

/* An editorial caption, set like one: small, tracked, led by a rule, at the
   weight of a credit line rather than of body copy. */
.s-home .sp-story__caption {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.15rem 0 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .58);
}
.s-home .sp-story__caption::before {
  content: "";
  flex: none;
  inline-size: 1.4rem;
  block-size: 1px;
  background: rgb(255 255 255 / .45);
}

/* Counted facts as lit glass: a gold rule, the figure in the display face, the
   label tracked and quiet. */
.s-home .sp-fact {
  gap: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .06));
  border-color: rgb(255 255 255 / .18);
  box-shadow: var(--hp-edge-dark), 0 14px 30px -20px rgb(0 0 0 / .85);
}
.s-home .sp-fact::before {
  content: "";
  order: -1;
  inline-size: 1.6rem;
  block-size: 2px;
  border-radius: 2px;
  margin-block-end: .6rem;
  background: var(--s-cool-500);
  opacity: .8;
}
.s-home .sp-fact strong {
  font-size: clamp(1.8rem, 1.35rem + 1.1vw, 2.3rem);
  letter-spacing: -.03em;
}
.s-home .sp-fact span {
  margin-block-start: .3rem;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .72);
}

/* --------------------------------------------------------------------------
   12. Carousels
   The dot fills as the page advances instead of simply lighting up, and it
   carries a 44px hit area that is never painted.
   -------------------------------------------------------------------------- */
.s-home .sp-car__dots { gap: .45rem; margin-block-start: 1.35rem; }
.s-home .sp-car__dot {
  position: relative;
  overflow: visible;
  inline-size: 1.4rem;
  block-size: .3rem;
  background: rgb(13 36 84 / .14);
}
/* Same two pixels the hero's dots were short by — the comment above this block
   claimed 44px and -1.15rem paid for 41.6. Vertical only: these dots are
   1.4rem wide, and reaching 44px across would need a gap near 1.4rem, which
   visibly re-spaces a six-dot row for a control that already has arrows beside
   it and a swipe under it. */
.s-home .sp-car__dot::before {
  content: "";
  position: absolute;
  inset-block: -1.3rem;
  inset-inline: -.15rem;
}
.s-home .sp-car__dot::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0;
  border-radius: inherit;
  background: var(--s-accent-500);
  transition: inline-size .55s var(--sp-ease);
}
.s-home .sp-car__dot.is-active { inline-size: 2.4rem; background: rgb(13 36 84 / .14); }
.s-home .sp-car__dot.is-active::after { inline-size: 100%; }

.s-home .sp-arrow { border-color: var(--hp-line); box-shadow: var(--hp-lift-1), var(--hp-edge); }
.s-home .sp-arrow:hover { box-shadow: var(--hp-lift-2); }

/* --------------------------------------------------------------------------
   13. Press
   Every lift, rule-draw and scaled photograph above answers a pointer, and a
   phone has none: on touch this page was silent between the tap and the next
   screen loading. A press is the answer — the card gives under the thumb and
   comes back, which is the one gesture that separates an app from a web page
   rendered small.

   `scale` is the individual property, not a `transform`, because the reveal
   owns `translate` and a transform shorthand would wipe it mid-animation. 2.2%
   is deliberately under the 3% the buttons already use: a 173px product card
   narrowing by 3.8px reads as depth, and a card is a much bigger thing to move
   than a button — the same 3% that feels crisp on a 120px button reads as a
   wobble across a whole tile.

   The shelf's ad card is in the set but not in the transition above it: it
   carries `sp-reveal`, whose `transition` declaration outranks anything scoped
   to `.s-home`, so it presses without the ease. `.sp-promo` is out of the set
   entirely — its only control is a button that already has its own press, and
   scaling the whole card behind a pressed button reads as a misfire.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .s-home .sp-card,
  .s-home .sp-mini,
  .s-home .sp-cat,
  .s-home .sp-coll,
  .s-home .sp-mosaic__tile { transition: scale .16s var(--sp-ease); }

  .s-home .sp-card:active,
  .s-home .sp-mini:active,
  .s-home .sp-cat:active,
  .s-home .sp-coll:active,
  .s-home .sp-mosaic__tile:active,
  .s-home .sp-widget--ad:active { scale: .978; }
}

/* --------------------------------------------------------------------------
   14. Phone
   Everything above has to hold at 390, where most of the shopping happens.
   Denser rhythm, no rule long enough to strand a control, thumb targets kept.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .s-home .sp-title { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); }
  .s-home .sp-sub { font-size: var(--s-text-sm); line-height: 1.5; }
  .s-home .sp-head__meta { margin-block-start: .5rem; font-size: .68rem; }
  .s-home .sp-head { margin-block-end: .9rem; }

  /* The shelf tile, now that snap.css puts two of them to a row.

     Four across left each cell 73.8px and clipped five of the twelve names on
     the page; two across gives each cell 156px, measured. What that leaves is a
     tile whose name is still set at 11.52px with one line to say itself in —
     the size it was given when it had 74px to live in. At 13px, the size the
     product cards below use for the same job, the longest name in the three
     shelves finishes on one line: "Classic Straw Glass" measures 117px of the
     156 available. The second line is a merchant's safety net, not a layout.

     Nothing reserves that second line, because none of the twelve needs it and
     a reserved line is dead air above every price. The price is pushed to the
     foot of the tile instead: the cells in a row stretch to one height, so when
     a name does wrap, the slack opens above the price and the two prices in
     that row stay on one line — and when nothing wraps there is no slack to
     open and the rule costs nothing.

     The row gap opens past the column gap, 15.2px against 11.2px. Down the
     column a tile's own name and price stand between one picture and the next,
     so the gap has to read as a bigger break than the one between two pictures
     sitting side by side, or the four tiles run together into a block. */
  .s-home .sp-widget__grid { row-gap: .95rem; }
  /* 12px was the right corner on a 74px tile and is too tight on a 156px one:
     every other picture on the page — the product card's, the category tile's —
     turns at 14px, and a shelf tile that has doubled in size should turn with
     them rather than stay squarer than its neighbours. */
  .s-home .sp-mini__pic { border-radius: 14px; }
  .s-home .sp-mini__name {
    -webkit-line-clamp: 2;
    font-size: var(--s-text-sm);
    line-height: 1.35;
  }
  .s-home .sp-mini__price { margin-block-start: auto; font-size: var(--s-text-md); }

  /* The steel strip stacks, and the chips get a full-width row of their own. */
  .s-home .sp-steel { margin-block-start: 1.15rem; padding-block-start: 1rem; }
  .s-home .s-chip.sp-spec { font-size: .72rem; padding: .4rem .7rem; }

  /* The promise numeral sits clear of a two-line title on a 173px card. */
  .s-home .sp-promise::after { font-size: 1.15rem; inset-block-start: .5rem; inset-inline-end: .6rem; }
  .s-home .sp-promise__icon { inline-size: 2.5rem; block-size: 2.5rem; }

  /* A grid shelf shows six cards on a phone, so its foot is close to the
     head — the rule would be more furniture than help. */
  .s-home .sp-shelf__foot { margin-block-start: 1.35rem; }
  .s-home .sp-shelf__foot::before { inset-inline: 12%; }
  .s-home .sp-shelf__foot .sp-btn { inline-size: 100%; }

  .s-home [data-band="products"][data-stripe] { padding-block: 1.35rem; }
  .s-home .sp-story__copy { font-size: var(--s-text-sm); line-height: 1.6; }
  .s-home .sp-fact strong { font-size: 1.75rem; }
  .s-home .sp-fact span { font-size: .66rem; letter-spacing: .06em; }
  .s-home .sp-promo__num { inset-block-start: .35rem; inset-inline-end: .6rem; }
  .s-home .sp-widget__foot { font-size: .64rem; }
}

/* The story panel is at its most exposed on a phone: one narrow column over a
   busy photograph. Push the scrim to a top-down wash so the copy sits on the
   darkest part of it and the facts still read as glass. */
@media (max-width: 61.99rem) {
  /* The scrim was doing its job twice over. At .4 opacity under a 93/84/88
     wash the photograph contributed about six percent of the finished pixel:
     navy mush with no subject in it, and a caption underneath crediting a
     picture nobody could see. Desktop, where the same photograph reads
     perfectly at 102deg, is left exactly as it was. Here the picture comes up
     and the wash comes down to meet it — roughly two and a half times more
     photograph, on a ground still dark enough to carry white copy. */
  .s-home .sp-story__bg { opacity: .58; }
  .s-home .sp-story::after {
    background:
      var(--hp-grain),
      radial-gradient(90% 45% at 8% 0%, rgb(255 184 0 / .14), transparent 62%),
      linear-gradient(180deg, rgb(6 16 49 / .88) 0%, rgb(6 16 49 / .72) 48%, rgb(6 16 49 / .84) 100%);
    background-size: 160px 160px, auto, auto;
    background-blend-mode: soft-light, normal, normal;
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   Every animation and transition this sheet introduces is cancelled here —
   including the ken-burns snap.css leaves running, which had no guard at all.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .s-home .sp-hero__slide.is-active img { animation: none; scale: 1; }
  .s-home .sp-mosaic__tile::after,
  .s-home .sp-car__dot::after,
  .s-home .sp-promise::after,
  .s-home .sp-viewall,
  .s-home .sp-widget__all,
  .s-home .sp-coll__cta,
  .s-home .sp-shelf__foot .sp-btn i { transition: none; }
  html[data-motion] .s-home .sp-reveal .sp-title::after { inline-size: 2.75rem; transition: none; }

  /* The press is travel, so it goes: a visitor who has asked for less motion
     gets no scale and no easing on it. The tap is still answered — the browser's
     own touch highlight and the link's focus ring are untouched by this sheet. */
  .s-home .sp-card,
  .s-home .sp-mini,
  .s-home .sp-cat,
  .s-home .sp-coll,
  .s-home .sp-mosaic__tile { transition: none; }
  .s-home .sp-card:active,
  .s-home .sp-mini:active,
  .s-home .sp-cat:active,
  .s-home .sp-coll:active,
  .s-home .sp-mosaic__tile:active,
  .s-home .sp-widget--ad:active { scale: 1; }
}