/* ==========================================================================
   PddFalcon storefront — "Snap" design layer
   White canvas, big grey search, category row, rounded hero with dots,
   widget shelves, paged carousels (nothing cut, arrows + dots, no scrollbar),
   grey-tile product cards with red badges. Mobile = app-like.
   Loaded after the structural s-* sheets; every rule reads tokens.css.
   ========================================================================== */

:root {
  --sp-max: 84rem;
  --sp-gutter: 1rem;
  --sp-gap: 1rem;
  --sp-radius: 14px;
  --sp-radius-lg: 20px;
  --sp-tile: #f3f5f8;
  --sp-line: #e8ebf1;
  --sp-shadow: 0 1px 2px rgb(13 36 84 / .05), 0 8px 24px -12px rgb(13 36 84 / .18);
  --sp-shadow-lg: 0 18px 44px -18px rgb(13 36 84 / .32);
  --sp-ease: cubic-bezier(.22, 1, .36, 1);
  --sp-per: 2;
}
@media (min-width: 40rem) { :root { --sp-gutter: 1.5rem; --sp-per: 3; } }
@media (min-width: 62rem) { :root { --sp-gutter: 2rem; --sp-gap: 1.25rem; --sp-per: 5; } }
@media (min-width: 80rem) { :root { --sp-per: 6; } }

body { background: #fff; color: var(--s-ink); font-family: var(--s-font-body); overflow-x: clip; }
img { max-inline-size: 100%; block-size: auto; }
.sp-wrap { inline-size: 100%; max-inline-size: var(--sp-max); margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-section { margin-block: 2rem; }
@media (min-width: 62rem) { .sp-section { margin-block: 2.75rem; } }

/* Reveal ------------------------------------------------------------------ */
html[data-motion] .sp-reveal { opacity: 0; translate: 0 22px; transition: opacity .7s var(--sp-ease), translate .7s var(--sp-ease); }
html[data-motion] .sp-reveal.is-in { opacity: 1; translate: 0; }
html[data-motion] .sp-reveal .sp-stagger { opacity: 0; translate: 0 14px; transition: opacity .6s var(--sp-ease), translate .6s var(--sp-ease); transition-delay: calc(var(--i, 0) * 45ms + 80ms); }
html[data-motion] .sp-reveal.is-in .sp-stagger { opacity: 1; translate: 0; }

/* Type + buttons ---------------------------------------------------------- */
.sp-eyebrow { margin: 0 0 .4rem; font-size: var(--s-text-xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-accent-500); }
.sp-eyebrow--light { color: var(--s-cool-500); }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 1rem; }
.sp-head__tools { display: flex; align-items: center; gap: .5rem; }
.sp-title { margin: 0; font-family: var(--s-font-display); font-size: clamp(1.2rem, 1rem + 1.1vw, 1.7rem); font-weight: 800; letter-spacing: -.01em; color: var(--s-brand-800); }
.sp-sub { margin: .2rem 0 0; font-size: var(--s-text-sm); color: var(--s-muted); }
.sp-viewall { font-size: var(--s-text-sm); font-weight: 700; color: var(--s-accent-500); text-decoration: none; white-space: nowrap; padding: .4rem .2rem; }
.sp-viewall:hover { text-decoration: underline; }
.sp-arrow { display: none; inline-size: 2.4rem; block-size: 2.4rem; border: 1px solid var(--sp-line); border-radius: 50%; background: #fff; color: var(--s-brand-800); place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s, opacity .2s; }
.sp-arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sp-arrow:hover { background: var(--s-brand-800); color: #fff; transform: scale(1.06); }
.sp-arrow[disabled] { opacity: .35; pointer-events: none; }
@media (min-width: 62rem) { .sp-arrow { display: grid; } }

.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid transparent; font: 700 var(--s-text-sm)/1 var(--s-font-body); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.sp-btn:active { transform: scale(.97); }
.sp-btn--primary { background: var(--s-accent-500); color: #fff; box-shadow: 0 8px 20px -10px rgb(196 38 12 / .7); }
.sp-btn--primary:hover { background: var(--s-accent-600); }
.sp-btn--light { background: #fff; color: var(--s-brand-800); }
.sp-btn--light:hover { background: var(--s-cool-500); }
.sp-btn--ghost { background: #fff; color: var(--s-brand-800); border-color: var(--sp-line); }
.sp-btn--ghost:hover, .sp-btn--ghost.is-on { border-color: var(--s-accent-500); color: var(--s-accent-500); }
.sp-btn--lg { padding: .95rem 1.6rem; font-size: var(--s-text-md); }
.sp-iconbtn { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border: 0; border-radius: 50%; background: transparent; color: var(--s-brand-800); cursor: pointer; }
.sp-iconbtn svg { inline-size: 1.5rem; block-size: 1.5rem; }
.sp-count { position: absolute; inset-block-start: -.1rem; inset-inline-end: -.15rem; min-inline-size: 1.15rem; block-size: 1.15rem; padding-inline: .3rem; border-radius: 999px; background: var(--s-accent-500); color: #fff; font-size: .65rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.sp-count.is-bump { animation: sp-bump .45s var(--sp-ease); }
@keyframes sp-bump { 40% { transform: scale(1.5); } }

/* Announcement + header ---------------------------------------------------- */
.sp-announce { background: var(--s-brand-800); color: #fff; font-size: var(--s-text-xs); font-weight: 600; text-align: center; }
.sp-announce p { margin: 0; padding: .45rem 0; }
.sp-header { position: sticky; inset-block-start: 0; z-index: var(--s-z-header, 50); background: #fff; transition: box-shadow .25s; }
.sp-header.is-stuck { box-shadow: 0 6px 20px -12px rgb(13 36 84 / .3); }
.sp-header__row { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "burger brand actions" "search search search"; align-items: center; gap: .5rem .75rem; padding-block: .6rem; }
.sp-header__burger { grid-area: burger; margin-inline-start: -.5rem; }
.sp-brand { grid-area: brand; display: inline-flex; }
.sp-brand img { inline-size: auto; block-size: 2.4rem; }
.sp-search { grid-area: search; position: relative; }
.sp-search__form { display: flex; align-items: center; gap: .5rem; block-size: 2.9rem; padding-inline: 1rem .3rem; border-radius: 999px; background: #f1f3f6; border: 1.5px solid transparent; transition: border-color .2s, background .2s, box-shadow .2s; }
.sp-search__form:focus-within { background: #fff; border-color: var(--s-brand-800); box-shadow: 0 0 0 4px rgb(13 36 84 / .08); }
.sp-search__form > svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: var(--s-muted); }
.sp-search__form input { flex: 1; min-inline-size: 0; border: 0; background: transparent; font-size: var(--s-text-md); color: var(--s-ink); outline: none; }
.sp-search__form input::placeholder { color: #8b93a3; }
.sp-search__go { flex: none; block-size: 2.25rem; padding-inline: 1.1rem; border: 0; border-radius: 999px; background: var(--s-accent-500); color: #fff; font-weight: 700; font-size: var(--s-text-sm); cursor: pointer; }
.sp-search__go:hover { background: var(--s-accent-600); }
.sp-suggest { position: absolute; inset-inline: 0; inset-block-start: calc(100% + .4rem); z-index: 30; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); overflow: hidden; }
.sp-header__actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: .1rem; }
.sp-action { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .55rem; border: 0; border-radius: 12px; background: transparent; color: var(--s-brand-800); text-decoration: none; cursor: pointer; transition: background .2s; }
.sp-action:hover { background: #f1f3f6; }
.sp-action svg { flex: none; inline-size: 1.5rem; block-size: 1.5rem; }
/* The two-line label beside an action's icon ("Hello / Prabhakar"). The count
   badge is a span inside the same button and was being swept up by this: at 390
   it inherited `display: none` and the wishlist count simply did not exist on a
   phone, and above 62rem the rule below turned it into an `inline-flex` with a
   1.15 line-height, which pushed the digit 4px above the middle of its own
   circle. Both measured. The badge has its own rule; it is excluded here. */
.sp-action > span:not(.sp-count) { display: none; flex-direction: column; line-height: 1.15; text-align: start; }
.sp-action small { font-size: .68rem; color: var(--s-muted); font-weight: 500; }
.sp-action strong { font-size: var(--s-text-sm); font-weight: 700; white-space: nowrap; }
.sp-action--pin, .sp-action--lang { display: none; }
.sp-cart { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 0; border-radius: 999px; background: var(--s-brand-800); color: #fff; font-weight: 700; font-size: var(--s-text-sm); cursor: pointer; transition: background .2s, transform .2s; }
.sp-cart:hover { background: var(--s-brand-700); }
.sp-cart svg { inline-size: 1.35rem; block-size: 1.35rem; }
.sp-cart__label { display: none; }
.sp-count--cart { inset-block-start: -.25rem; inset-inline-end: -.25rem; border: 2px solid #fff; }
.sp-lang { position: relative; }
.sp-lang__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + .3rem); z-index: 40; min-inline-size: 10rem; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--sp-line); border-radius: 12px; box-shadow: var(--sp-shadow-lg); }
.sp-lang__list a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--s-ink); text-decoration: none; font-size: var(--s-text-sm); }
.sp-lang__list a:hover, .sp-lang__list a[aria-selected="true"] { background: #f1f3f6; }
@media (min-width: 62rem) {
  .sp-header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search actions"; gap: 1.5rem; padding-block: .8rem; }
  .sp-header__burger { display: none; }
  .sp-brand img { block-size: 3rem; }
  .sp-search { max-inline-size: 46rem; }
  .sp-search__form { block-size: 3.1rem; }
  .sp-action > span:not(.sp-count), .sp-action--pin, .sp-action--lang, .sp-cart__label { display: inline-flex; }
  .sp-action--pin strong { max-inline-size: 8rem; overflow: hidden; text-overflow: ellipsis; }
  .sp-cart { padding: .65rem 1.1rem; }
  .sp-header__actions { gap: .25rem; }
}

/* Category nav row --------------------------------------------------------- */
.sp-nav { border-block: 1px solid var(--sp-line); background: #fff; }
.sp-nav__row { min-inline-size: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-nav__list { flex: 1 1 0; min-inline-size: 0; display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.sp-nav__list::-webkit-scrollbar { display: none; }
.sp-nav__item { position: relative; flex: none; }
.sp-nav__link { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem .7rem; font-size: var(--s-text-sm); font-weight: 600; color: var(--s-ink-soft); text-decoration: none; white-space: nowrap; border-block-end: 2px solid transparent; transition: color .2s, border-color .2s; }
.sp-nav__link svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sp-nav__link:hover, .sp-nav__link.is-active { color: var(--s-accent-500); border-color: var(--s-accent-500); }
.sp-nav__link--hot { color: var(--s-accent-500); }
.sp-nav__item--all .sp-nav__link { color: var(--s-brand-800); font-weight: 700; }
/* The first link's own padding is what pushed "Home" in from the page edge:
   measured at 1536px, the content edge was 120px and the house icon 134px,
   with the logo above it at 126px. Padding between links is spacing; padding
   before the first one is a dent. It is dropped so the nav's first mark and the
   logo's first mark share one vertical line, which is what the eye checks. */
.sp-nav__list > .sp-nav__item:first-child > .sp-nav__link { padding-inline-start: 0; }
.sp-slabs { display: none; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sp-slabs a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: var(--s-cool-100); color: var(--s-warn); font-size: var(--s-text-xs); font-weight: 700; text-decoration: none; border: 1px solid var(--s-cool-200); }
.sp-slabs a:hover { background: var(--s-cool-500); color: var(--s-brand-900); }
.sp-drop, .sp-mega { display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 40; background: #fff; border: 1px solid var(--sp-line); border-radius: 0 0 16px 16px; box-shadow: var(--sp-shadow-lg); padding: .6rem; }
.sp-drop { min-inline-size: 16rem; }
.sp-drop a { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; color: var(--s-ink); text-decoration: none; font-size: var(--s-text-sm); font-weight: 600; }
.sp-drop a:hover { background: #f1f3f6; color: var(--s-accent-500); }
.sp-drop img { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 8px; object-fit: cover; background: var(--sp-tile); }
.sp-drop span, .sp-mega__head span { display: flex; flex-direction: column; line-height: 1.2; }
.sp-drop small, .sp-mega__head small { font-size: .7rem; color: var(--s-muted); font-weight: 500; }
.sp-mega { inline-size: min(66rem, calc(100vw - 2 * var(--sp-gutter))); padding: 1.25rem; }
.sp-mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.sp-mega__head { display: flex; align-items: center; gap: .6rem; padding-block-end: .6rem; margin-block-end: .5rem; border-block-end: 1px solid var(--sp-line); color: var(--s-brand-800); text-decoration: none; font-weight: 800; font-size: var(--s-text-sm); }
.sp-mega__head img { inline-size: 3rem; block-size: 3rem; border-radius: 10px; object-fit: cover; background: var(--sp-tile); }
.sp-mega__col ul { margin: 0; padding: 0; list-style: none; }
.sp-mega__col li a { display: block; padding: .3rem 0; color: var(--s-ink-soft); text-decoration: none; font-size: var(--s-text-sm); }
.sp-mega__col li a:hover { color: var(--s-accent-500); }
@media (min-width: 62rem) {
  .sp-nav__list { overflow: visible; }
  .sp-nav__link { padding: .85rem .85rem; }
  .sp-slabs { display: flex; }
  .sp-nav__item:hover > .sp-drop, .sp-nav__item:focus-within > .sp-drop, .sp-nav__item--all:hover > .sp-mega, .sp-nav__item--all:focus-within > .sp-mega { display: block; animation: sp-drop .25s var(--sp-ease); }
}
@keyframes sp-drop { from { opacity: 0; translate: 0 -6px; } }

/* Hero ---------------------------------------------------------------------- */
.sp-hero { margin-block-start: 1rem; padding-inline: 0; }
.sp-hero__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--s-brand-900); }
.sp-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--sp-ease); }
.sp-hero__slide.is-active { opacity: 1; z-index: 1; }
.sp-hero__slide picture, .sp-hero__slide img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sp-hero__slide.is-active img { animation: sp-kenburns 9s var(--sp-ease) both; }
@keyframes sp-kenburns { from { scale: 1.06; } to { scale: 1; } }
.sp-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(6 16 49 / .78) 0%, rgb(6 16 49 / .45) 45%, rgb(6 16 49 / .05) 100%); }
.sp-hero__body { position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 2; inline-size: 100%; padding: 1.25rem 1.25rem 3rem; color: #fff; }
.sp-hero__eyebrow { margin: 0 0 .4rem; font-size: var(--s-text-xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.sp-hero__title { color: #fff; margin: 0; font-family: var(--s-font-display); font-size: clamp(1.5rem, 1rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; max-inline-size: 14ch; }
.sp-hero__lede { margin: .6rem 0 1rem; font-size: var(--s-text-md); max-inline-size: 40ch; color: rgb(255 255 255 / .85); }
.sp-hero__slide.is-active .sp-hero__eyebrow, .sp-hero__slide.is-active .sp-hero__title, .sp-hero__slide.is-active .sp-hero__lede, .sp-hero__slide.is-active .sp-btn { animation: sp-up .8s var(--sp-ease) both; }
.sp-hero__slide.is-active .sp-hero__title { animation-delay: .1s; } .sp-hero__slide.is-active .sp-hero__lede { animation-delay: .2s; } .sp-hero__slide.is-active .sp-btn { animation-delay: .3s; }
@keyframes sp-up { from { opacity: 0; translate: 0 18px; } }
.sp-hero__arrow { position: absolute; inset-block-start: 50%; z-index: 3; translate: 0 -50%; display: none; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--s-brand-800); place-items: center; cursor: pointer; box-shadow: var(--sp-shadow); transition: background .2s, transform .2s; }
.sp-hero__arrow svg { inline-size: 1.2rem; block-size: 1.2rem; }
.sp-hero__arrow:hover { background: #fff; transform: scale(1.08); }
.sp-hero__arrow--prev { inset-inline-start: 1rem; } .sp-hero__arrow--next { inset-inline-end: 1rem; }
.sp-hero__dots { position: absolute; inset-inline: 0; inset-block-end: .9rem; z-index: 3; display: flex; justify-content: center; gap: .4rem; }
.sp-hero__dot { inline-size: .5rem; block-size: .5rem; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .5); cursor: pointer; transition: inline-size .3s var(--sp-ease), background .3s; }
.sp-hero__dot.is-active { inline-size: 1.6rem; background: var(--s-cool-500); }
@media (min-width: 40rem) { .sp-hero { padding-inline: var(--sp-gutter); } .sp-hero__frame { border-radius: var(--sp-radius-lg); aspect-ratio: 16 / 7; } .sp-hero__body { padding: 2rem 2.5rem 3.5rem; } .sp-hero__arrow { display: grid; } }
@media (min-width: 62rem) { .sp-hero { margin-block-start: 1.5rem; } .sp-hero__frame { aspect-ratio: 1600 / 560; } .sp-hero__body { padding: 3rem 4rem 4rem; inline-size: 60%; } .sp-hero__lede { font-size: var(--s-text-lg); } }

/* Widget shelves ------------------------------------------------------------ */
.sp-widgets { display: grid; gap: var(--sp-gap); margin-block-start: 1.25rem; }
.sp-widget { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); padding: 1rem; box-shadow: var(--sp-shadow); transition: box-shadow .3s, translate .3s; }
.sp-widget:hover { box-shadow: var(--sp-shadow-lg); translate: 0 -2px; }
.sp-widget__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-block-end: .8rem; }
.sp-widget__title { margin: 0; font-family: var(--s-font-display); font-size: var(--s-text-lg); font-weight: 800; color: var(--s-brand-800); }
.sp-widget__sub { margin: .1rem 0 0; font-size: var(--s-text-xs); color: var(--s-muted); }
.sp-widget__all { font-size: var(--s-text-xs); font-weight: 700; color: var(--s-accent-500); text-decoration: none; white-space: nowrap; padding-block-start: .2rem; }
/* Two across on a phone, not four.

   A widget is full width below 40rem, and four cards in it left each cell 73.8px
   at 390 — measured, with five product names clipped to "Leak Proof…",
   "Classic…", "Uphaar wit…", "Utsaav…", "Ultima…". Five ellipses in one screen
   is the cheapest-looking thing a shop can do. Two across gives each card about
   165px, which is room for the picture to read and for the name to finish.
   Above 40rem the widgets sit two to a row, so the rule below already says two
   for a different reason and this does not disturb it. */
.sp-widget__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sp-mini { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--s-ink); min-inline-size: 0; }
.sp-mini__pic { display: block; aspect-ratio: 1; border-radius: 12px; background: var(--sp-tile); overflow: hidden; padding: 8%; }
.sp-mini__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: scale .4s var(--sp-ease); }
.sp-mini:hover .sp-mini__pic img { scale: 1.07; }
.sp-mini__price { font-weight: 800; font-size: var(--s-text-sm); color: var(--s-brand-800); }
.sp-mini__name { font-size: .72rem; color: var(--s-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sp-widget--ad { position: relative; padding: 0; overflow: hidden; background: var(--s-brand-800); color: #fff; text-decoration: none; min-block-size: 15rem; justify-content: flex-end; }
.sp-widget--ad img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .55; transition: scale .6s var(--sp-ease); }
.sp-widget--ad:hover img { scale: 1.05; }
.sp-widget__adbody { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.25rem; background: linear-gradient(0deg, rgb(6 16 49 / .95), rgb(6 16 49 / .2)); }
.sp-widget__adeyebrow { font-size: var(--s-text-2xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.sp-widget__adtitle { font-family: var(--s-font-display); font-size: var(--s-text-xl); font-weight: 800; line-height: 1.1; }
.sp-widget__adtext { font-size: var(--s-text-xs); color: rgb(255 255 255 / .8); }
.sp-widget__adbody .sp-btn { margin-block-start: .4rem; }
@media (min-width: 40rem) { .sp-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-widget__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .sp-mini__name { -webkit-line-clamp: 2; } }
@media (min-width: 62rem) { .sp-widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: var(--sp-gap); } .sp-widget { padding: 1.1rem; } }

/* Feature tiles --------------------------------------------------------------- */
.sp-tiles { display: grid; gap: var(--sp-gap); }
.sp-tile { position: relative; display: block; overflow: hidden; border-radius: var(--sp-radius-lg); aspect-ratio: 3 / 2; background: var(--s-brand-900); color: #fff; text-decoration: none; box-shadow: var(--sp-shadow); }
.sp-tile img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .7s var(--sp-ease); }
.sp-tile:hover img { scale: 1.06; }
.sp-tile__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; padding: 1.25rem; background: linear-gradient(0deg, rgb(6 16 49 / .85), rgb(6 16 49 / 0) 60%); }
.sp-tile__eyebrow { font-size: var(--s-text-2xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.sp-tile__title { font-family: var(--s-font-display); font-size: var(--s-text-xl); font-weight: 800; line-height: 1.1; }
.sp-tile__cta { font-size: var(--s-text-sm); font-weight: 700; margin-block-start: .3rem; }
@media (min-width: 40rem) { .sp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Categories ------------------------------------------------------------------- */
.sp-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.sp-cat { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .4rem .8rem; border-radius: var(--sp-radius); background: #fff; border: 1px solid var(--sp-line); text-decoration: none; text-align: center; color: var(--s-ink); transition: box-shadow .3s, translate .3s, border-color .3s; }
.sp-cat:hover { box-shadow: var(--sp-shadow-lg); translate: 0 -3px; border-color: transparent; }
.sp-cat__pic { display: block; inline-size: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--sp-tile); overflow: hidden; padding: 10%; }
.sp-cat__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: scale .5s var(--sp-ease); }
.sp-cat:hover .sp-cat__pic img { scale: 1.1; }
.sp-cat__name { font-size: var(--s-text-sm); font-weight: 700; color: var(--s-brand-800); line-height: 1.2; }
.sp-cat__count { font-size: .68rem; color: var(--s-muted); }
@media (min-width: 40rem) { .sp-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-gap); } }

/* Paged carousel: whole cards only, no scrollbar ------------------------------ */
.sp-car { position: relative; overflow: hidden; touch-action: pan-y; }
.sp-car__track { display: flex; gap: var(--sp-gap); transition: transform .6s var(--sp-ease); will-change: transform; }
.sp-car.is-dragging .sp-car__track { transition: none; }
.sp-car__track > * { flex: 0 0 calc((100% - (var(--sp-per) - 1) * var(--sp-gap)) / var(--sp-per)); min-inline-size: 0; }
.sp-car--wide { --sp-per: 1; }
@media (min-width: 40rem) { .sp-car--wide { --sp-per: 2; } }
@media (min-width: 62rem) { .sp-car--wide { --sp-per: 3; } }
.sp-car__dots { display: flex; justify-content: center; gap: .35rem; margin-block-start: .9rem; min-block-size: .5rem; }
.sp-car__dots:empty { display: none; }
.sp-car__dot { inline-size: .45rem; block-size: .45rem; padding: 0; border: 0; border-radius: 999px; background: #d3d8e2; cursor: pointer; transition: inline-size .3s var(--sp-ease), background .3s; }
.sp-car__dot.is-active { inline-size: 1.4rem; background: var(--s-accent-500); }

/* Grid ------------------------------------------------------------------------- */
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-gap); } }
@media (min-width: 62rem) { .sp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .sp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Product card ----------------------------------------------------------------- */
.sp-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; transition: box-shadow .3s var(--sp-ease), translate .3s var(--sp-ease), border-color .3s; }
.sp-card:hover { box-shadow: var(--sp-shadow-lg); translate: 0 -4px; border-color: transparent; }
.sp-card__pic { position: relative; display: block; aspect-ratio: 1; background: var(--sp-tile); overflow: hidden; padding: 7%; }
.sp-card__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: scale .6s var(--sp-ease); }
.sp-card:hover .sp-card__pic img { scale: 1.08; }
.sp-card__empty { display: grid; place-items: center; block-size: 100%; font-family: var(--s-font-display); font-size: 3rem; font-weight: 800; color: #c9d0dc; }
.sp-badge { position: absolute; inset-block-start: .6rem; inset-inline-start: .6rem; padding: .25rem .5rem; border-radius: 6px; background: var(--s-accent-500); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.sp-rating { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .45rem; border-radius: 6px; background: rgb(255 255 255 / .95); color: var(--s-ink); font-size: .68rem; font-weight: 700; box-shadow: var(--sp-shadow); }
.sp-rating i { font-style: normal; color: var(--s-cool-600); }
.sp-soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / .6); color: var(--s-ink); font-weight: 800; font-size: var(--s-text-sm); text-transform: uppercase; letter-spacing: .05em; }
.sp-card__wish { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; z-index: 2; display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border: 0; border-radius: 50%; background: #fff; color: var(--s-brand-800); cursor: pointer; box-shadow: var(--sp-shadow); transition: transform .2s, color .2s; }
.sp-card__wish svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sp-card__wish:hover { transform: scale(1.1); color: var(--s-accent-500); }
.sp-card__wish.is-on { color: var(--s-accent-500); }
.sp-card__wish.is-on svg { fill: currentColor; }
.sp-card__quick { position: absolute; inset-inline-end: .5rem; inset-block-start: 3rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; block-size: 2.1rem; padding-inline: 0; inline-size: 2.1rem; justify-content: center; border: 0; border-radius: 999px; background: #fff; color: var(--s-brand-800); font-size: var(--s-text-xs); font-weight: 700; cursor: pointer; box-shadow: var(--sp-shadow); transition: transform .2s, background .2s, color .2s; }
.sp-card__quick svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.sp-card__quick span { display: none; }
.sp-card__quick:hover { background: var(--s-brand-800); color: #fff; }
@media (hover: hover) and (min-width: 62rem) {
  .sp-card__quick { inset: auto .75rem .75rem .75rem; inline-size: auto; block-size: 2.4rem; padding-inline: 1rem; opacity: 0; translate: 0 8px; background: var(--s-brand-800); color: #fff; transition: opacity .25s, translate .25s var(--sp-ease), background .2s; }
  .sp-card__quick span { display: inline; }
  .sp-card:hover .sp-card__quick, .sp-card:focus-within .sp-card__quick { opacity: 1; translate: 0; }
  .sp-card__quick:hover { background: var(--s-accent-500); }
}
.sp-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .8rem .8rem; flex: 1; }
.sp-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0; }
.sp-card__price strong { font-size: var(--s-text-lg); font-weight: 800; color: var(--s-ink); }
.sp-card__price s { font-size: var(--s-text-xs); color: var(--s-muted); }
.sp-card__price em { font-size: var(--s-text-xs); font-style: normal; font-weight: 800; color: var(--s-success); }
.sp-card__name { margin: 0; font-size: var(--s-text-sm); font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-block-size: 2.7em; }
.sp-card__name a { color: var(--s-ink); text-decoration: none; }
.sp-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sp-card__meta { display: flex; justify-content: space-between; gap: .4rem; margin: 0; font-size: .72rem; color: var(--s-muted); }
.sp-card__low { color: var(--s-accent-500); font-weight: 700; }
.sp-card__btn { position: relative; z-index: 2; margin-block-start: auto; display: inline-flex; align-items: center; justify-content: center; block-size: 2.4rem; padding-inline: .8rem; border-radius: 10px; border: 1.5px solid var(--s-accent-500); background: #fff; color: var(--s-accent-500); font-size: var(--s-text-sm); font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.sp-card__btn:hover { background: var(--s-accent-500); color: #fff; }
.sp-card__btn:active { transform: scale(.97); }
.sp-card__btn.is-muted { border-color: var(--sp-line); color: var(--s-muted); }
.sp-card__btn.is-busy { opacity: .6; pointer-events: none; }
.sp-card__wish, .sp-card__quick { z-index: 3; }

/* Promises -------------------------------------------------------------------- */
.sp-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sp-promise { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border-radius: var(--sp-radius); background: var(--sp-tile); border: 1px solid transparent; transition: background .3s, border-color .3s; }
.sp-promise:hover { background: #fff; border-color: var(--sp-line); box-shadow: var(--sp-shadow); }
.sp-promise__icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px; background: #fff; color: var(--s-accent-500); box-shadow: var(--sp-shadow); margin-block-end: .3rem; }
.sp-promise__title { font-weight: 800; font-size: var(--s-text-sm); color: var(--s-brand-800); }
.sp-promise__note { font-size: var(--s-text-xs); color: var(--s-muted); }
@media (min-width: 62rem) { .sp-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-gap); } .sp-promise { flex-direction: row; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; } .sp-promise__icon { margin: 0; flex: none; } .sp-promise__title { display: block; } .sp-promise > span:not(.sp-promise__icon) { display: block; } .sp-promise__title + .sp-promise__note { margin-inline-start: auto; } }
@media (min-width: 62rem) { .sp-promise { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon note"; row-gap: .1rem; } .sp-promise__icon { grid-area: icon; } .sp-promise__title { grid-area: title; } .sp-promise__note { grid-area: note; margin: 0; } }

/* Promo banners ---------------------------------------------------------------- */
.sp-promos { display: grid; gap: var(--sp-gap); }
.sp-promo { position: relative; display: block; overflow: hidden; border-radius: var(--sp-radius-lg); aspect-ratio: 4 / 3; background: var(--s-brand-900); color: #fff; text-decoration: none; box-shadow: var(--sp-shadow); }
.sp-promo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .7s var(--sp-ease); }
.sp-promo:hover img { scale: 1.06; }
.sp-promo__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .35rem; padding: 1.25rem; background: linear-gradient(0deg, rgb(6 16 49 / .9), rgb(6 16 49 / 0) 65%); }
.sp-promo__eyebrow { font-size: var(--s-text-2xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.sp-promo__title { font-family: var(--s-font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 800; line-height: 1.1; }
.sp-promo__text { font-size: var(--s-text-sm); color: rgb(255 255 255 / .85); max-inline-size: 40ch; }
.sp-promo__body .sp-btn { margin-block-start: .4rem; }
.sp-promo--wide { aspect-ratio: 4 / 3; }
@media (min-width: 40rem) { .sp-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sp-promo--wide { aspect-ratio: 16 / 5; } .sp-promo--wide .sp-promo__body { padding: 2.5rem; justify-content: center; background: linear-gradient(90deg, rgb(6 16 49 / .85), rgb(6 16 49 / 0) 70%); } }

/* Collections (wide cards in carousel) ------------------------------------------- */
.sp-coll { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--sp-radius-lg); background: var(--sp-tile); border: 1px solid transparent; text-decoration: none; color: var(--s-ink); transition: background .3s, box-shadow .3s, translate .3s; }
.sp-coll:hover { background: #fff; border-color: var(--sp-line); box-shadow: var(--sp-shadow-lg); translate: 0 -3px; }
.sp-coll__pic { display: block; aspect-ratio: 1; border-radius: 14px; background: #fff; overflow: hidden; padding: 8%; }
.sp-coll__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sp-coll__body { display: flex; flex-direction: column; gap: .25rem; min-inline-size: 0; }
.sp-coll__name { font-family: var(--s-font-display); font-size: var(--s-text-lg); font-weight: 800; color: var(--s-brand-800); }
.sp-coll__subs { font-size: var(--s-text-xs); color: var(--s-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-coll__cta { font-size: var(--s-text-sm); font-weight: 700; color: var(--s-accent-500); margin-block-start: .2rem; }

/* Story ------------------------------------------------------------------------- */
.sp-story { position: relative; overflow: hidden; border-radius: var(--sp-radius-lg); background: var(--s-brand-900); color: #fff; }
.sp-story__bg { position: absolute; inset: -10% 0; inline-size: 100%; block-size: 120%; object-fit: cover; opacity: .28; }
.sp-story__inner { position: relative; display: grid; gap: 1.5rem; padding: 1.75rem 1.25rem; }
.sp-story__title { margin: 0; font-family: var(--s-font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.sp-story__copy { margin: .8rem 0 1.2rem; font-size: var(--s-text-md); color: rgb(255 255 255 / .82); max-inline-size: 52ch; }
.sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sp-fact { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(6px); }
.sp-fact strong { font-family: var(--s-font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--s-cool-500); }
.sp-fact em { font-style: normal; font-size: .9rem; margin-inline-start: .15rem; }
.sp-fact span { font-size: var(--s-text-xs); color: rgb(255 255 255 / .8); }
@media (min-width: 62rem) { .sp-story__inner { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 3.5rem 3rem; gap: 3rem; } }

/* Footer ------------------------------------------------------------------------- */
.sp-footer { margin-block-start: 3rem; background: var(--s-brand-900); color: rgb(255 255 255 / .82); padding-block-end: calc(var(--s-bottomnav-height, 3.75rem) + 1rem); }
@media (min-width: 62rem) { .sp-footer { padding-block-end: 0; } }
.sp-news { display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: var(--sp-radius-lg); background: var(--s-brand-800); color: #fff; box-shadow: var(--sp-shadow-lg); border: 1px solid rgb(255 255 255 / .1); }
.sp-news__title { margin: 0; font-family: var(--s-font-display); font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); font-weight: 800; line-height: 1.2; }
.sp-news__form { position: relative; display: flex; gap: .5rem; padding: .35rem; border-radius: 999px; background: #fff; }
.sp-news__form input { flex: 1; min-inline-size: 0; border: 0; background: transparent; padding-inline: 1rem; font-size: var(--s-text-sm); color: var(--s-ink); outline: none; }
.sp-news__ok { position: absolute; inset-inline-start: 1rem; inset-block-start: calc(100% + .4rem); margin: 0; font-size: var(--s-text-xs); color: var(--s-cool-500); }
@media (min-width: 62rem) { .sp-news { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 2rem 2.5rem; } }
.sp-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; padding-block: 1rem 2rem; }
.sp-footer__brand { grid-column: 1 / -1; }
.sp-footer__brand img { inline-size: auto; block-size: 3.2rem; }
.sp-footer__brand p { margin: .75rem 0 0; font-size: var(--s-text-sm); max-inline-size: 30ch; }
.sp-social { display: flex; gap: .5rem; margin-block-start: 1rem; }
.sp-social a { display: grid; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; font-size: .7rem; font-weight: 800; text-decoration: none; transition: background .2s; }
.sp-social a:hover { background: var(--s-accent-500); }
.sp-footer__title { margin: 0 0 .75rem; font-size: var(--s-text-sm); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.sp-footer__title a { color: inherit; text-decoration: none; }
.sp-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.sp-footer__col a { color: rgb(255 255 255 / .78); text-decoration: none; font-size: var(--s-text-sm); transition: color .2s; }
.sp-footer__col a:hover { color: var(--s-cool-500); }
.sp-footer__contact { display: flex; flex-direction: column; gap: .45rem; }
.sp-footer__contact p { margin: 0; font-size: var(--s-text-sm); }
.sp-footer__pay { display: flex; flex-direction: column; gap: .2rem; margin-block-start: .6rem !important; font-size: var(--s-text-xs) !important; color: rgb(255 255 255 / .6); }
.sp-footer__pay strong { color: #fff; }
.sp-footer__bottom { border-block-start: 1px solid rgb(255 255 255 / .1); }
.sp-footer__bottom .sp-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1rem; font-size: var(--s-text-xs); }
.sp-footer__bottom p { margin: 0; }
.sp-footer__bottom a { color: var(--s-cool-500); text-decoration: none; }
@media (min-width: 62rem) { .sp-footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; padding-block: 1.5rem 3rem; } .sp-footer__brand { grid-column: auto; } }

/* Bottom app bar (phone) ----------------------------------------------------------- */
.s-bottomnav { border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px -12px rgb(13 36 84 / .35); }
.s-bottomnav__item { transition: color .2s; }
.s-bottomnav__item svg { inline-size: 1.4rem; block-size: 1.4rem; transition: transform .2s var(--sp-ease); }
.s-bottomnav__item.is-active { color: var(--s-accent-500); }
.s-bottomnav__item.is-active svg { transform: translateY(-2px) scale(1.08); }

/* Quick view --------------------------------------------------------------------- */
.s-modal__panel { padding: 1rem; max-inline-size: 60rem; border-radius: 22px 22px 0 0; }
@media (min-width: 62rem) { .s-modal__panel { padding: 1.5rem; border-radius: 22px; } }
.s-modal__close { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: #fff; box-shadow: var(--sp-shadow); z-index: 5; }
.sp-quick { display: grid; gap: 1.25rem; }
.sp-quick__figure { aspect-ratio: 1; border-radius: 16px; background: var(--sp-tile); overflow: hidden; padding: 6%; }
.sp-quick__figure img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sp-quick__thumbs { display: flex; gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; overflow: hidden; }
.sp-quick__thumb { inline-size: 3.6rem; block-size: 3.6rem; padding: .3rem; border: 2px solid transparent; border-radius: 10px; background: var(--sp-tile); cursor: pointer; }
.sp-quick__thumb.is-on { border-color: var(--s-accent-500); }
.sp-quick__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.sp-quick__info { display: flex; flex-direction: column; gap: .6rem; }
.sp-quick__cat { margin: 0; font-size: var(--s-text-xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-accent-500); }
.sp-quick__title { margin: 0; font-family: var(--s-font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 800; line-height: 1.15; color: var(--s-brand-800); }
.sp-quick__rating { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--s-text-xs); color: var(--s-muted); }
.sp-quick__rating .sp-rating { position: static; }
.sp-quick__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .2rem 0; }
.sp-quick__price strong { font-size: 1.7rem; font-weight: 800; }
.sp-quick__price s { color: var(--s-muted); }
.sp-quick__price em { font-style: normal; font-weight: 800; color: var(--s-success); }
.sp-quick__price small { flex-basis: 100%; font-size: var(--s-text-xs); color: var(--s-muted); }
.sp-quick__text { margin: 0; font-size: var(--s-text-sm); color: var(--s-ink-soft); }
.sp-quick__label { margin: 0 0 .4rem; font-size: var(--s-text-sm); font-weight: 700; }
.sp-quick__stock { margin: 0; font-size: var(--s-text-sm); font-weight: 700; }
.sp-quick__stock.is-in { color: var(--s-success); } .sp-quick__stock.is-out { color: var(--s-danger); }
.sp-quick__buy { display: flex; gap: .6rem; align-items: stretch; }
.sp-quick__buy .s-qty { border-radius: 999px; }
.sp-quick__buy .s-qty__btn { inline-size: 2.75rem; block-size: 3rem; }
.sp-quick__buy .s-qty__value { block-size: 3rem; }
.sp-quick__buy .sp-btn { flex: 1; }
.sp-quick__foot { display: flex; gap: .6rem; margin-block-start: .2rem; }
.sp-quick__foot .sp-btn { flex: 1; }
@media (min-width: 62rem) { .sp-quick { grid-template-columns: 1fr 1.1fr; gap: 2rem; } }

/* Toast tune-up ------------------------------------------------------------------ */
.s-toast { border-radius: 14px; box-shadow: var(--sp-shadow-lg); }

/* Home stack: one flexible track, so nothing wide inside can widen the page. */
.s-home { grid-template-columns: minmax(0, 1fr); }
.s-home > * { min-inline-size: 0; }
/* Phones: a grid shelf shows six cards; "View all" carries the rest. */
@media (max-width: 39.99rem) { .sp-grid > :nth-child(n + 7) { display: none; } }
/* The home stack already spaces its sections; do not double it. */
.s-home > .sp-section { margin-block: .25rem; }
@media (min-width: 62rem) { .s-home > .sp-section { margin-block: .75rem; } }

/* Hero, premium pass: glass caption panel, word reveal, progress dots ------ */
.sp-hero__slide::after { background: linear-gradient(90deg, rgb(6 16 49 / .82) 0%, rgb(6 16 49 / .5) 38%, rgb(6 16 49 / .08) 70%, rgb(6 16 49 / .25) 100%), linear-gradient(0deg, rgb(6 16 49 / .55), transparent 40%); }
.sp-hero__body { padding: 1rem 1rem 3.4rem; }
.sp-hero__panel { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; max-inline-size: 34rem; padding: 1.1rem 1.15rem; border-radius: 18px; background: rgb(6 16 49 / .35); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 24px 60px -30px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .18); }
.sp-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.sp-hero__eyebrow i { inline-size: 1.4rem; block-size: 2px; background: var(--s-cool-500); border-radius: 2px; }
.sp-hero__title .sp-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sp-hero__title .sp-word > span { display: inline-block; translate: 0 110%; opacity: 0; }
.sp-hero__slide.is-active .sp-hero__title .sp-word > span { animation: sp-word .9s var(--sp-ease) forwards; animation-delay: calc(.15s + var(--w, 0) * 70ms); }
@keyframes sp-word { to { translate: 0; opacity: 1; } }
.sp-hero__slide.is-active .sp-hero__title { animation: none; }
.sp-hero__lede { margin: .1rem 0 .3rem; }
.sp-hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.sp-btn--glass { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .35); backdrop-filter: blur(8px); }
.sp-btn--glass:hover { background: #fff; color: var(--s-brand-800); }
.sp-hero__perks { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .3rem 0 0; padding: 0; list-style: none; font-size: var(--s-text-xs); font-weight: 600; color: rgb(255 255 255 / .85); }
.sp-hero__perks li { display: inline-flex; align-items: center; gap: .35rem; }
.sp-hero__perks li::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--s-cool-500); box-shadow: 0 0 0 3px rgb(255 184 0 / .25); }
.sp-hero__slide.is-active .sp-hero__ctas, .sp-hero__slide.is-active .sp-hero__perks { animation: sp-up .8s var(--sp-ease) both; animation-delay: .45s; }
.sp-hero__foot { position: absolute; inset-inline: 1.25rem; inset-block-end: 1rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-hero__counter { font-family: var(--s-font-display); font-size: var(--s-text-sm); color: #fff; letter-spacing: .04em; }
.sp-hero__counter b { font-size: var(--s-text-lg); font-weight: 800; }
.sp-hero__counter em { font-style: normal; color: rgb(255 255 255 / .6); margin-inline-start: .25rem; }
.sp-hero__dots { position: static; inset: auto; gap: .45rem; }
.sp-hero__dot { position: relative; inline-size: 1.6rem; block-size: .3rem; overflow: hidden; background: rgb(255 255 255 / .35); transition: inline-size .3s var(--sp-ease); }
.sp-hero__dot i { position: absolute; inset: 0; inline-size: 0; background: var(--s-cool-500); border-radius: inherit; }
.sp-hero__dot.is-active { inline-size: 3.2rem; background: rgb(255 255 255 / .35); }
.sp-hero__dot.is-active i { animation: sp-progress var(--dur, 7000ms) linear forwards; }
@keyframes sp-progress { to { inline-size: 100%; } }
.sp-hero:hover .sp-hero__dot.is-active i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sp-hero__dot.is-active i { animation: none; inline-size: 100%; } .sp-hero__title .sp-word > span { translate: 0; opacity: 1; } }
.sp-hero__arrow { background: rgb(255 255 255 / .14); color: #fff; border: 1px solid rgb(255 255 255 / .35); backdrop-filter: blur(8px); box-shadow: none; }
.sp-hero__arrow:hover { background: #fff; color: var(--s-brand-800); }
@media (min-width: 40rem) { .sp-hero__body { padding: 2rem 2rem 4rem; } .sp-hero__panel { padding: 1.5rem 1.6rem; } }
@media (min-width: 62rem) { .sp-hero__body { inline-size: 100%; padding: 3rem 5.5rem 4.5rem; } .sp-hero__panel { max-inline-size: 38rem; padding: 1.9rem 2.1rem; gap: .7rem; } .sp-hero__foot { inset-inline: 5.5rem; inset-block-end: 1.4rem; } .sp-hero__title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); } }
/* Phone hero: square frame, lean caption — nothing clipped. */
@media (max-width: 39.99rem) {
  .sp-hero__frame { aspect-ratio: 1; }
  .sp-hero__body { padding: .9rem .9rem 3rem; }
  .sp-hero__panel { padding: .9rem 1rem; gap: .4rem; }
  .sp-hero__perks, .sp-hero__ctas .sp-btn--glass { display: none; }
  .sp-hero__lede { font-size: var(--s-text-sm); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sp-hero__foot { inset-inline: 1rem; }
}

/* Showcase band: slider beside a mosaic of three tiles ---------------------- */
.sp-showcase { display: grid; gap: .75rem; margin-block-start: 1rem; }
.sp-hero { padding: 0; }
.sp-hero__frame { border-radius: var(--sp-radius-lg); aspect-ratio: 1; }
.sp-hero__slide::after { background: linear-gradient(0deg, rgb(6 16 49 / .92) 0%, rgb(6 16 49 / .55) 42%, rgb(6 16 49 / .05) 75%); }
.sp-hero__body { inline-size: 100%; padding: 1rem 1rem 3.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.sp-hero__panel { display: contents; }
.sp-hero__title { max-inline-size: 16ch; text-shadow: 0 2px 20px rgb(0 0 0 / .35); }
.sp-hero__lede { margin: 0; max-inline-size: 44ch; }
.sp-hero__perks { display: none; }
.sp-mosaic { display: grid; grid-template-rows: 1.15fr 1fr; gap: .75rem; }
.sp-mosaic__pair { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; }
.sp-mosaic__tile { position: relative; display: block; overflow: hidden; border-radius: var(--sp-radius); background: var(--s-brand-900); aspect-ratio: 1; box-shadow: var(--sp-shadow); }
.sp-mosaic__tile--big { aspect-ratio: 2 / 1; }
.sp-mosaic__tile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .7s var(--sp-ease); }
.sp-mosaic__tile:hover img { scale: 1.06; }
.sp-mosaic__label { position: absolute; inset-block-end: 0; inset-inline: 0; display: flex; flex-direction: column; gap: .1rem; padding: 2.2rem .9rem .8rem; background: linear-gradient(0deg, rgb(6 16 49 / .88), transparent); color: #fff; font-family: var(--s-font-display); font-size: var(--s-text-md); font-weight: 800; line-height: 1.15; }
.sp-mosaic__label small { font-family: var(--s-font-body); font-size: .62rem; font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.sp-mosaic__label em { font-family: var(--s-font-body); font-style: normal; font-size: var(--s-text-xs); font-weight: 700; color: rgb(255 255 255 / .85); margin-block-start: .25rem; opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s var(--sp-ease); }
.sp-mosaic__tile:hover .sp-mosaic__label em { opacity: 1; translate: 0; }
@media (min-width: 40rem) {
  .sp-showcase { gap: var(--sp-gap); }
  .sp-hero__frame { aspect-ratio: 16 / 8; }
  .sp-hero__body { padding: 2rem 4.5rem 3.6rem; gap: .6rem; }
  .sp-hero__perks { display: flex; }
}
@media (min-width: 62rem) {
  .sp-showcase { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); margin-block-start: 1.5rem; }
  .sp-hero__frame { aspect-ratio: auto; block-size: 100%; min-block-size: 30rem; }
  .sp-hero__body { padding: 2.5rem 4.75rem 4rem; }
  .sp-hero__foot { inset-inline: 4.75rem; }
  .sp-hero__title { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
  .sp-mosaic__tile, .sp-mosaic__tile--big { aspect-ratio: auto; }
  .sp-mosaic__label { padding: 2.6rem 1.1rem 1rem; font-size: var(--s-text-lg); }
  .sp-mosaic__label em { opacity: 1; translate: 0; }
}
@media (max-width: 39.99rem) { .sp-hero__frame { aspect-ratio: 1; } .sp-hero__body { padding: .9rem .9rem 3rem; } }
.sp-showcase .sp-hero { margin: 0; }
/* Category carousel: 3 tiles per page on phones, 6 on desktop; whole tiles only. */
.sp-car--cats { --sp-per: 3; }
.sp-car--cats .sp-car__track { gap: .75rem; }
@media (min-width: 40rem) { .sp-car--cats { --sp-per: 4; } .sp-car--cats .sp-car__track { gap: var(--sp-gap); } }
@media (min-width: 62rem) { .sp-car--cats { --sp-per: 6; } }
/* Card media wrapper: wish + quick view are anchored to the picture, never the buttons. */
.sp-card__media { position: relative; }
/* Story band: white headline and a proper wash so the copy always reads. */
.sp-story__title, .sp-story__copy, .sp-story { color: #fff; }
.sp-story__bg { opacity: .5; }
.sp-story::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgb(6 16 49 / .96) 0%, rgb(6 16 49 / .88) 45%, rgb(6 16 49 / .55) 100%); }
.sp-story__inner { z-index: 1; }
.sp-story__copy { color: rgb(255 255 255 / .9); text-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.sp-fact { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .18); }

/* Polish pass 1 --------------------------------------------------------------- */
/* Photos fill their tiles edge to edge: no white photo floating in a grey box. */
.sp-card__pic, .sp-mini__pic, .sp-cat__pic, .sp-coll__pic, .sp-quick__figure { padding: 0; background: #fff; }
.sp-card__pic img, .sp-mini__pic img, .sp-cat__pic img, .sp-coll__pic img, .sp-quick__figure img { object-fit: cover; }
.sp-card__pic { border-block-end: 1px solid var(--sp-line); }
.sp-card__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(13 36 84 / .06), transparent 35%); pointer-events: none; }
.sp-cat__pic { border-radius: 12px 12px 0 0; }
.sp-cat { padding: 0 0 .9rem; gap: .3rem; overflow: hidden; }
.sp-cat__name { padding-inline: .5rem; margin-block-start: .35rem; }
.sp-coll__pic { border: 1px solid var(--sp-line); }
/* Card copy: name sits right under the price, the button hugs the bottom. */
.sp-card__name { min-block-size: 0; }
.sp-card__meta { margin-block-end: .4rem; }
.sp-card__btn { background: var(--sp-tile); border-color: transparent; color: var(--s-brand-800); }
.sp-card__btn:hover { background: var(--s-brand-800); color: #fff; }
button.sp-card__btn { background: var(--s-accent-500); color: #fff; box-shadow: 0 8px 18px -10px rgb(196 38 12 / .8); }
button.sp-card__btn:hover { background: var(--s-accent-600); color: #fff; }
.sp-card__btn.is-muted { background: transparent; border-color: var(--sp-line); color: var(--s-muted); }
/* Section heads: a short red rule under the title. */
.sp-title { position: relative; padding-block-end: .45rem; }
.sp-title::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 2.4rem; block-size: 3px; border-radius: 3px; background: var(--s-accent-500); }
.sp-sub { margin-block-start: .35rem; }
/* Footer: six columns on desktop so Contact sits in the row, plus payment pills. */
@media (min-width: 62rem) { .sp-footer__grid { grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 1.5rem; } }
.sp-footer__contact a { display: block; font-weight: 600; color: #fff; }
.sp-pay { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-start: .5rem; }
.sp-pay span { padding: .25rem .55rem; border-radius: 6px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .15); font-size: .66rem; font-weight: 800; letter-spacing: .04em; color: #fff; }
.sp-footer__bottom .sp-wrap { align-items: center; }
/* Widget shelves: a whisper of tint so the row reads as a unit. */
.sp-widget { background: linear-gradient(180deg, #fff, #fbfcfe); }
.sp-mini__pic { border: 1px solid var(--sp-line); }
.sp-news__title, .sp-news { color: #fff; }
.sp-news__form input { inline-size: 0; }
@media (max-width: 39.99rem) { .sp-news { padding: 1.25rem 1rem; } .sp-news__form .sp-btn { padding-inline: .9rem; } }

/* Phone: category row as picture chips; smaller hero and mosaic ------------ */
.sp-nav__ico { display: none; }
@media (max-width: 61.99rem) {
  .sp-nav { border-block-start: 0; }
  .sp-nav__row { padding-block: .6rem .5rem; }
  .sp-nav__list { gap: .9rem; padding-inline: .1rem; }
  .sp-nav__link { flex-direction: column; gap: .4rem; padding: 0; border: 0; font-size: .7rem; font-weight: 700; color: var(--s-ink-soft); max-inline-size: 4.4rem; text-align: center; white-space: normal; line-height: 1.15; }
  .sp-nav__link > svg { display: none; }
  .sp-nav__link span { display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sp-nav__ico { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; border-radius: 50%; object-fit: cover; background: var(--sp-tile); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--sp-line), 0 6px 14px -8px rgb(13 36 84 / .4); transition: transform .2s var(--sp-ease), box-shadow .2s; }
  .sp-nav__link.is-active .sp-nav__ico, .sp-nav__link:active .sp-nav__ico { transform: scale(1.06); box-shadow: 0 0 0 2px var(--s-accent-500), 0 6px 14px -8px rgb(13 36 84 / .4); }
  .sp-nav__link.is-active { color: var(--s-accent-500); }
  .sp-nav__ico--all { background: var(--s-brand-800); color: #fff; }
  .sp-nav__ico--all svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .sp-nav__ico--hot { background: linear-gradient(135deg, #ff7a45, var(--s-accent-500)); color: #fff; }
  .sp-nav__ico--hot svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .sp-nav__link--hot { color: var(--s-accent-500); }
  .sp-nav__item--all .sp-nav__link { color: var(--s-brand-800); }
}
@media (max-width: 39.99rem) {
  .sp-hero__frame { aspect-ratio: 4 / 3; }
  .sp-hero__body { padding: .75rem .85rem 2.6rem; gap: .3rem; }
  .sp-hero__title { font-size: 1.35rem; max-inline-size: 18ch; }
  .sp-hero__lede { font-size: var(--s-text-xs); -webkit-line-clamp: 2; }
  .sp-hero__ctas .sp-btn--lg { padding: .7rem 1.1rem; font-size: var(--s-text-sm); }
  .sp-hero__foot { inset-block-end: .7rem; }
  .sp-hero__counter b { font-size: var(--s-text-md); }
  .sp-hero__eyebrow { font-size: .65rem; }
  .sp-mosaic { grid-template-rows: auto auto; gap: .6rem; }
  .sp-mosaic__tile--big { aspect-ratio: 21 / 9; }
  .sp-mosaic__tile { aspect-ratio: 4 / 3; }
  .sp-mosaic__label { padding: 1.6rem .75rem .6rem; font-size: var(--s-text-sm); }
  .sp-showcase { gap: .6rem; }
}

/* Ad card: glass caption panel with rounded corners inside the picture. */
.sp-widget--ad { border: 0; }
.sp-widget--ad img { opacity: .9; }
.sp-widget--ad::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(6 16 49 / .7), rgb(6 16 49 / .05) 60%); }
.sp-widget__adbody { margin: .75rem; border-radius: 16px; padding: 1.1rem; background: rgb(6 16 49 / .62); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 16px 40px -20px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .15); }
.sp-widget__adeyebrow { display: inline-flex; align-items: center; gap: .4rem; }
.sp-widget__adeyebrow::before { content: ""; inline-size: 1rem; block-size: 2px; background: var(--s-cool-500); border-radius: 2px; }
.sp-widget__adtitle { text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.sp-widget--ad .sp-btn { margin-block-start: .5rem; }
.sp-widget--ad:hover .sp-widget__adbody { border-color: rgb(255 255 255 / .35); }

/* Category tiles on flat studio shots: a soft tinted stage so every tile matches. */
.sp-cat--flat .sp-cat__pic { background: linear-gradient(160deg, hsl(var(--hue, 210) 60% 96%), hsl(var(--hue, 210) 45% 90%)); }
.sp-cat--flat .sp-cat__pic img { mix-blend-mode: multiply; object-fit: contain; padding: 8%; }
.sp-cat--flat .sp-cat__pic::after { content: ""; position: absolute; inset: auto 15% 8%; block-size: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(13 36 84 / .18), transparent); }
.sp-cat__pic { position: relative; }

/* Split promo banners: tinted copy panel + picture, numbered. */
.sp-promo--split { display: grid; grid-template-columns: 1fr 1.05fr; aspect-ratio: auto; min-block-size: 15rem; background: var(--s-brand-800); }
.sp-promo--split .sp-promo__body { position: relative; inset: auto; justify-content: center; padding: 1.4rem 1.2rem; background: none; }
.sp-promo--split .sp-promo__pic { position: relative; display: block; overflow: hidden; }
.sp-promo--split .sp-promo__pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--tone) 0%, transparent 35%); }
.sp-promo--split .sp-promo__pic img { position: static; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sp-promo--split .sp-promo__title { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
.sp-promo__cta { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .5rem; padding: .55rem 1rem; border-radius: 999px; font-size: var(--s-text-sm); font-weight: 700; background: var(--s-accent-500); color: #fff; transition: gap .2s; }
.sp-promo--split:hover .sp-promo__cta { gap: .7rem; }
.sp-promo__num { position: absolute; inset-block-start: .6rem; inset-inline-end: .8rem; z-index: 2; font-family: var(--s-font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: rgb(255 255 255 / .35); }
.sp-promo--split[data-tone="navy"] { --tone: var(--s-brand-800); background: var(--s-brand-800); color: #fff; }
.sp-promo--split[data-tone="cream"] { --tone: #fff1d6; background: #fff1d6; color: var(--s-brand-800); }
.sp-promo--split[data-tone="cream"] .sp-promo__eyebrow { color: var(--s-accent-500); }
.sp-promo--split[data-tone="cream"] .sp-promo__text { color: var(--s-ink-soft); }
.sp-promo--split[data-tone="cream"] .sp-promo__num { color: rgb(13 36 84 / .12); }
.sp-promo--split[data-tone="steel"] { --tone: #e4eaf3; background: #e4eaf3; color: var(--s-brand-800); }
.sp-promo--split[data-tone="steel"] .sp-promo__eyebrow { color: var(--s-accent-500); }
.sp-promo--split[data-tone="steel"] .sp-promo__text { color: var(--s-ink-soft); }
.sp-promo--split[data-tone="steel"] .sp-promo__num { color: rgb(13 36 84 / .12); }
@media (max-width: 39.99rem) { .sp-promo--split { min-block-size: 11rem; grid-template-columns: 1.1fr 1fr; } .sp-promo--split .sp-promo__body { padding: 1rem .9rem; } .sp-promo__num { font-size: 1.8rem; } }

/* Quick view: close lives inside the panel; picker rows breathe. */
.s-modal__close { display: none; }
.s-modal__panel { position: relative; }
.sp-quick__close { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; z-index: 6; display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border: 1px solid var(--sp-line); border-radius: 50%; background: #fff; color: var(--s-brand-800); cursor: pointer; box-shadow: var(--sp-shadow); transition: background .2s, color .2s, transform .2s; }
.sp-quick__close:hover { background: var(--s-brand-800); color: #fff; transform: rotate(90deg); }
.sp-quick [data-picker-row] { border-radius: 14px; }
.sp-quick [data-picker-row] + [data-picker-row] { margin-block-start: .65rem; }
.sp-quick [data-picker-row] [data-picker-check] { margin-inline-end: .35rem; }
@media (min-width: 62rem) { .sp-quick__info { padding-inline-end: 1.5rem; } }

/* Nav sits outside the header: on desktop it sticks under the header; on phones it scrolls away. */
.sp-nav__short { display: none; }
@media (min-width: 62rem) { .sp-nav { position: sticky; inset-block-start: var(--sp-header-h, 4.6rem); z-index: 49; box-shadow: 0 6px 20px -16px rgb(13 36 84 / .3); } }
@media (max-width: 61.99rem) {
  .sp-nav { position: static; border-block-end: 1px solid var(--sp-line); }
  .sp-nav__long { display: none; } .sp-nav__short { display: block; }
  .sp-nav__link { gap: .35rem; }
  .sp-nav__link span { min-block-size: 2.3em; line-height: 1.15; display: -webkit-box; align-content: start; }
  .sp-nav__list { align-items: flex-start; }
}
@media (max-width: 61.99rem) { .sp-nav__link span.sp-nav__long { display: none; } }
@media (min-width: 62rem) { .sp-nav__link span.sp-nav__short { display: none; } }

/* Footer, premium pass ------------------------------------------------------ */
.sp-footer { position: relative; overflow: hidden; margin-block-start: 4rem; background: linear-gradient(180deg, #0b1d47 0%, var(--s-brand-950) 100%); }
.sp-footer__glow { position: absolute; inset: -20% -10% auto; block-size: 60%; background: radial-gradient(60% 60% at 20% 0%, rgb(255 184 0 / .14), transparent 60%), radial-gradient(50% 50% at 90% 10%, rgb(196 38 12 / .22), transparent 60%); pointer-events: none; }
.sp-news { position: relative; background: linear-gradient(135deg, #12306e, #0d2454 60%, #0a1a45); border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .12); overflow: hidden; }
.sp-news::before { content: ""; position: absolute; inset: auto -6rem -8rem auto; inline-size: 20rem; block-size: 20rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 184 0 / .22), transparent); pointer-events: none; }
.sp-news__note { margin: .4rem 0 0; font-size: var(--s-text-xs); color: rgb(255 255 255 / .6); }
.sp-news__form { position: relative; align-items: center; padding: .35rem .35rem .35rem 1rem; box-shadow: 0 10px 30px -18px rgb(0 0 0 / .6); }
.sp-news__form > svg { flex: none; inline-size: 1.2rem; block-size: 1.2rem; color: var(--s-muted); }
.sp-news__form input { padding-inline: .5rem; }
.sp-footer__grid { position: relative; display: grid; gap: 2rem; padding-block: 0 2.5rem; }
.sp-footer__brand img { block-size: 3.4rem; }
.sp-footer__brand > p { max-inline-size: 34ch; color: rgb(255 255 255 / .78); }
.sp-footer__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.sp-footer__badges li { display: flex; flex-direction: column; min-inline-size: 4.4rem; padding: .5rem .65rem; border-radius: 10px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); line-height: 1.1; }
.sp-footer__badges b { font-family: var(--s-font-display); font-size: var(--s-text-md); font-weight: 800; color: var(--s-cool-500); }
.sp-footer__badges span { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(255 255 255 / .65); }
.sp-social { margin-block-start: 1.2rem; }
.sp-social a { inline-size: 2.5rem; block-size: 2.5rem; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); transition: background .2s, transform .2s; }
.sp-social a:hover { transform: translateY(-2px); }
.sp-social svg { inline-size: 1.15rem; block-size: 1.15rem; }
.sp-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.sp-footer__title { position: relative; padding-block-end: .55rem; margin-block-end: .9rem; }
.sp-footer__title::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 1.6rem; block-size: 2px; border-radius: 2px; background: var(--s-accent-500); }
.sp-footer__col ul { gap: .55rem; }
.sp-footer__col li a { position: relative; display: inline-block; transition: color .2s, translate .2s; }
.sp-footer__col li a:hover { color: #fff; translate: 3px 0; }
.sp-footer__card { display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem; border-radius: var(--sp-radius-lg); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(10px); }
.sp-footer__card .sp-footer__title { margin-block-end: .1rem; }
.sp-footer__line { display: flex; gap: .8rem; align-items: flex-start; margin: 0; color: #fff; text-decoration: none; font-size: var(--s-text-sm); font-weight: 600; line-height: 1.4; }
.sp-footer__line i { flex: none; display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 10px; background: rgb(255 184 0 / .14); color: var(--s-cool-500); }
.sp-footer__line i svg { inline-size: 1.15rem; block-size: 1.15rem; }
.sp-footer__line small { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin-block-end: .1rem; }
a.sp-footer__line:hover span { color: var(--s-cool-500); }
.sp-footer__card .sp-btn { margin-block-start: .3rem; align-self: flex-start; }
.sp-footer__bottom { position: relative; border-block-start: 1px solid rgb(255 255 255 / .1); }
.sp-footer__bottom .sp-wrap { display: grid; gap: .75rem; padding-block: 1.1rem; }
.sp-footer__bottom p { color: rgb(255 255 255 / .6); }
.sp-pay { margin: 0; align-items: center; }
.sp-pay em { flex-basis: 100%; font-style: normal; font-size: .68rem; color: rgb(255 255 255 / .45); }
.sp-footer__mark { position: absolute; inset-inline: 0; inset-block-end: -.35em; text-align: center; font-family: var(--s-font-display); font-size: clamp(5rem, 18vw, 16rem); font-weight: 800; letter-spacing: .04em; line-height: 1; color: rgb(255 255 255 / .035); pointer-events: none; user-select: none; }
@media (min-width: 40rem) { .sp-footer__links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
  .sp-footer__grid { grid-template-columns: 1.15fr 2.2fr 1.1fr; gap: 3rem; padding-block: .5rem 4.5rem; }
  .sp-footer__bottom .sp-wrap { grid-template-columns: auto 1fr auto; align-items: center; }
  .sp-pay { justify-content: center; }
  .sp-pay em { flex-basis: auto; margin-inline-start: .5rem; }
}

/* Desktop: "All categories" keeps its hamburger glyph. */
@media (min-width: 62rem) { .sp-nav__ico--all { display: inline-grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; } .sp-nav__ico--all svg { inline-size: 1.1rem; block-size: 1.1rem; } }

/* Phone category row, take two: pill tabs — small round photo + one-line label. */
@media (max-width: 61.99rem) {
  .sp-nav { border: 0; background: #fff; }
  .sp-nav__row { padding-block: .35rem .7rem; }
  .sp-nav__list { gap: .5rem; align-items: center; }
  .sp-nav__link { flex-direction: row; align-items: center; gap: .5rem; max-inline-size: none; padding: .3rem .85rem .3rem .3rem; border-radius: 999px; background: var(--sp-tile); border: 1px solid transparent; font-size: .78rem; font-weight: 700; color: var(--s-brand-800); white-space: nowrap; line-height: 1; transition: background .2s, border-color .2s, color .2s; }
  .sp-nav__link span { display: inline; min-block-size: 0; line-height: 1; -webkit-line-clamp: unset; }
  .sp-nav__ico { inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; border: 0; box-shadow: none; background: #fff; object-fit: cover; }
  .sp-nav__link.is-active { background: #fff; border-color: var(--s-accent-500); color: var(--s-accent-500); }
  .sp-nav__link.is-active .sp-nav__ico, .sp-nav__link:active .sp-nav__ico { transform: none; box-shadow: none; }
  .sp-nav__item--all .sp-nav__link { background: var(--s-brand-800); color: #fff; }
  .sp-nav__ico--all { background: rgb(255 255 255 / .15); color: #fff; }
  .sp-nav__ico--all svg { inline-size: 1rem; block-size: 1rem; }
  .sp-nav__link--hot { background: var(--s-accent-100); color: var(--s-accent-600); }
  .sp-nav__ico--hot { background: linear-gradient(135deg, #ff7a45, var(--s-accent-500)); color: #fff; }
  .sp-nav__ico--hot svg { inline-size: 1.05rem; block-size: 1.05rem; }
  .sp-nav__item:not(.sp-nav__item--all):not(:has(.sp-nav__ico--hot)) .sp-nav__ico--all { background: rgb(13 36 84 / .08); color: var(--s-brand-800); }
}
/* Footer: no backdrop-filter (it made some Chrome captures hang); solid glass instead. */
.sp-footer__card { backdrop-filter: none; background: rgb(255 255 255 / .07); }
.sp-footer__mark { font-size: clamp(4rem, 14vw, 11rem); contain: paint; }
.sp-footer { contain: paint; }

/* ==========================================================================
   Polish pass 2 — thumbs and stillness
   Nothing here changes the layout language, the palette or the component
   vocabulary. It makes three things true that were not:
     1. the two card actions are a thumb's width apart and a thumb's size,
     2. the phone category strip stops clipping its own pills,
     3. prefers-reduced-motion actually stops this sheet's motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The heart and the quick-view eye
   The circles stay 34px — three 44px circles on a 172px card would be a card
   made of buttons — but the area a thumb has to hit is grown to 44px behind
   each of them, and the eye drops far enough that the two grown areas no
   longer overlap. They used to: the listing grid already carried the grown
   areas and they ran into each other by 4.8px, so a tap aimed at the gap
   landed on quick view.
   -------------------------------------------------------------------------- */
.sp-card__quick { inset-block-start: 3.5rem; }
.sp-card__wish::after,
.sp-card__quick::after {
  content: "";
  position: absolute;
  inset: -.35rem;                 /* 33.6px circle + 11.2px = 44.8px of reach */
  border-radius: inherit;
}
/* At desktop widths quick view is already a full-width bar along the foot of
   the picture, and it is a mouse that clicks it. Growing its invisible resting
   state into the photograph would steal clicks from the product link. */
@media (hover: hover) and (min-width: 62rem) {
  .sp-card__quick::after { inset: 0; }
}

/* --------------------------------------------------------------------------
   2. The phone category strip
   The pills were 42px tall in a 43px box whose content measured 44px, so the
   strip lost the bottom of every rounded pill and — being a vertically
   scrollable box one pixel deep — swallowed vertical drags. The pills go to
   44px, the strip gets enough room for them plus a focus ring, and the row
   gives back what the strip takes so the header keeps its height.
   -------------------------------------------------------------------------- */
@media (max-width: 61.99rem) {
  .sp-nav__row { padding-block: .1rem .3rem; }
  .sp-nav__list { padding-block: .3rem; align-items: center; }
  .sp-nav__link { min-block-size: 2.75rem; }
}

/* --------------------------------------------------------------------------
   3. Wishlist and account in the header
   Both were 41.6px wide against a 44px floor — the only two header controls
   short of it. The chip is centred inside the floor, so nothing moves.
   -------------------------------------------------------------------------- */
.sp-action { min-inline-size: 2.75rem; justify-content: center; }

/* --------------------------------------------------------------------------
   4. prefers-reduced-motion
   Every animation and transition this sheet declares, handed back. tokens.css
   zeroes --s-fast/--s-base/--s-slow, but every duration below is written in
   seconds, so none of them were being cancelled: Chrome, asked for reduced
   motion, still reported sp-up, sp-word, sp-kenburns and the carousel's 600ms
   transform running on the home page.

   The one thing deliberately left alone is the slide cross-fade. It is opacity
   and nothing else, it only runs when somebody presses an arrow (autoplay is
   already off under this setting), and a cross-fade is the recommended stand-in
   for motion rather than an instance of it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* The hero intro: caption, headline words, buttons and perks. */
  .sp-hero__slide.is-active .sp-hero__eyebrow,
  .sp-hero__slide.is-active .sp-hero__title,
  .sp-hero__slide.is-active .sp-hero__lede,
  .sp-hero__slide.is-active .sp-hero__ctas,
  .sp-hero__slide.is-active .sp-hero__perks,
  .sp-hero__slide.is-active .sp-btn,
  .sp-hero__slide.is-active .sp-hero__title .sp-word > span {
    animation: none !important;
    opacity: 1 !important;
    translate: 0 !important;
  }
  /* animation: none is the load-bearing half. sp-up has an explicit `from`,
     so naming the end state alone leaves the keyframes playing. */
  .sp-hero__slide.is-active img { animation: none !important; scale: 1 !important; }
  .sp-hero__dot.is-active i { animation: none !important; inline-size: 100% !important; }
  .sp-count.is-bump { animation: none !important; }

  /* Everything this sheet moves, scales or slides on hover, focus or paging. */
  .sp-reveal,
  .sp-reveal .sp-stagger,
  .sp-arrow,
  .sp-btn,
  .sp-iconbtn,
  .sp-search__form,
  .sp-nav__link,
  .sp-nav__ico,
  .sp-hero__arrow,
  .sp-hero__dot,
  .sp-car__track,
  .sp-car__dot,
  .sp-widget,
  .sp-mini__pic img,
  .sp-tile img,
  .sp-cat,
  .sp-cat__pic img,
  .sp-card,
  .sp-card__pic img,
  .sp-card__wish,
  .sp-card__quick,
  .sp-card__btn,
  .sp-promise,
  .sp-promo img,
  .sp-promo__cta,
  .sp-coll,
  .sp-mosaic__tile img,
  .sp-mosaic__label em,
  .sp-story__bg,
  .sp-social a,
  .sp-footer__col li a,
  .sp-quick__close,
  .sp-widget--ad img,
  .s-bottomnav__item,
  .s-bottomnav__item svg {
    transition: none !important;
  }
  /* States that were being reached by a transition still have to be reached. */
  .sp-reveal, .sp-reveal .sp-stagger { opacity: 1 !important; translate: 0 !important; }
  .sp-mosaic__label em { opacity: 1; translate: 0; }
}