/* ==========================================================================
   PddFalcon storefront — home page (marketplace layout)
   Full-bleed hero with cards overlapping its foot, 2×2 category cards,
   white carousel bands, promos, collections, story.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.s-hero { position: relative; background: var(--s-brand-900); }
.s-hero__stage { position: relative; inline-size: 100%; aspect-ratio: 1600 / 600; max-block-size: 34rem; overflow: hidden; }
@media (max-width: 47.99rem) { .s-hero__stage { aspect-ratio: 4 / 3.3; max-block-size: none; } }
.s-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--s-slow) var(--s-ease); }
.s-hero__slide.is-active { opacity: 1; z-index: 1; }
.s-hero__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.s-hero__slide::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgb(6 16 49 / 0.78) 0%, rgb(6 16 49 / 0.45) 40%, rgb(6 16 49 / 0) 75%); }
@media (max-width: 47.99rem) { .s-hero__slide::after { background-image: linear-gradient(to top, rgb(6 16 49 / 0.92) 0%, rgb(6 16 49 / 0.5) 55%, rgb(6 16 49 / 0.05) 100%); } }
/* fade the foot of the hero into the page so the cards below sit on it */
.s-hero::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 40%; background-image: linear-gradient(to bottom, transparent, var(--s-cream)); pointer-events: none; z-index: 2; }
.s-hero__body { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-start: 50%; translate: 0 -55%; z-index: 3; }
@media (max-width: 47.99rem) { .s-hero__body { inset-block-start: auto; inset-block-end: 24%; translate: 0; } }
.s-hero__text { max-inline-size: 36rem; color: #fff; }
.s-hero__eyebrow { display: inline-block; margin-block-end: 0.6rem; padding: 0.25rem 0.6rem; border-radius: var(--s-radius-sm); background: var(--s-cool-500); color: var(--s-brand-950); font-weight: 800; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; font-size: var(--s-text-2xs); }
.s-hero__title { font-family: var(--s-font-display); font-weight: 800; color: #fff; font-size: clamp(1.6rem, 1rem + 2.8vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 2px 16px rgb(0 0 0 / 0.3); }
.s-hero__lede { margin-block-start: 0.7rem; color: rgb(255 255 255 / 0.9); font-size: var(--s-text-sm); max-inline-size: 30rem; }
@media (min-width: 62rem) { .s-hero__lede { font-size: var(--s-text-lg); } }
.s-hero__cta { margin-block-start: 1.1rem; }
.s-hero__arrow { position: absolute; inset-block-start: 38%; z-index: 4; inline-size: 3rem; block-size: 5.5rem; display: grid; place-items: center; border: 0; border-radius: var(--s-radius-sm); background: transparent; color: #fff; opacity: 0.85; }
.s-hero__arrow:hover { background: rgb(255 255 255 / 0.15); opacity: 1; }
.s-hero__arrow svg { inline-size: 2rem; block-size: 2rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5)); }
.s-hero__arrow--prev { inset-inline-start: 0.5rem; }
.s-hero__arrow--next { inset-inline-end: 0.5rem; }
@media (hover: none) { .s-hero__arrow { display: none; } }
.s-hero__dots { position: absolute; inset-inline-start: 50%; translate: -50% 0; inset-block-end: 42%; z-index: 4; display: flex; gap: 0.4rem; }
@media (max-width: 47.99rem) { .s-hero__dots { inset-block-end: 12%; } }
.s-hero__dot { inline-size: 0.5rem; block-size: 0.5rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.5); transition: inline-size var(--s-fast) var(--s-ease), background-color var(--s-fast) var(--s-ease); }
.s-hero__dot.is-active { inline-size: 1.4rem; border-radius: var(--s-radius-pill); background: var(--s-cool-500); }

/* Cards overlapping the hero foot */
.s-deck { position: relative; z-index: 5; margin-block-start: clamp(-4rem, -12vw, -12rem); }
@media (max-width: 47.99rem) { .s-deck { margin-block-start: -2.5rem; } }
.s-deck__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 62rem) { .s-deck__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }

/* The marketplace card: white, titled, 2×2 tiles or one picture */
.s-mcard { display: flex; flex-direction: column; background: var(--s-surface); border-radius: var(--s-radius); box-shadow: 0 1px 3px rgb(13 36 84 / 0.08), 0 8px 24px rgb(13 36 84 / 0.06); padding: var(--s-4); min-inline-size: 0; transition: box-shadow var(--s-base) var(--s-ease), transform var(--s-base) var(--s-ease); }
@media (min-width: 62rem) { .s-mcard { padding: var(--s-5); } }
.s-mcard:hover { box-shadow: 0 16px 40px rgb(13 36 84 / 0.14); }
.s-mcard__title { font-family: var(--s-font-display); font-weight: 700; font-size: var(--s-text-lg); color: var(--s-ink); margin-block-end: var(--s-3); line-height: 1.25; }
@media (min-width: 62rem) { .s-mcard__title { font-size: var(--s-text-xl); } }
.s-mcard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.s-mcard__tile { display: grid; gap: 0.35rem; color: var(--s-ink-soft); font-size: var(--s-text-xs); font-weight: 500; min-inline-size: 0; }
.s-mcard__tile img { aspect-ratio: 1; inline-size: 100%; object-fit: cover; border-radius: var(--s-radius-sm); background: var(--s-line-soft); transition: transform var(--s-base) var(--s-ease); }
.s-mcard__tile:hover img { transform: scale(1.03); }
.s-mcard__tile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-mcard__single { display: block; }
.s-mcard__single img { aspect-ratio: 1; inline-size: 100%; object-fit: cover; border-radius: var(--s-radius-sm); }
.s-mcard__more { margin-block-start: auto; padding-block-start: var(--s-3); color: var(--s-brand-500); font-size: var(--s-text-sm); font-weight: 600; }
.s-mcard__more:hover { text-decoration: underline; }

/* ---- Band: white full-width container with heading + carousel/grid --------- */
.s-band { background: var(--s-surface); border-radius: var(--s-radius); box-shadow: 0 1px 3px rgb(13 36 84 / 0.08); padding: var(--s-4); }
@media (min-width: 62rem) { .s-band { padding: var(--s-5) var(--s-6); } }
.s-band + .s-band, .s-deck + .s-band { margin-block-start: var(--s-5); }
.s-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-3); }
.s-band__eyebrow { color: var(--s-accent-600); font-weight: 700; font-size: var(--s-text-2xs); letter-spacing: var(--s-tracking-caps); text-transform: uppercase; }
.s-band__title { font-family: var(--s-font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); color: var(--s-ink); }
.s-band__more { flex: none; color: var(--s-brand-500); font-size: var(--s-text-sm); font-weight: 600; white-space: nowrap; }
.s-band__more:hover { text-decoration: underline; }
.s-page { display: grid; gap: var(--s-5); padding-block: var(--s-5) var(--s-8); }

/* Carousel of product cards (row layout) */
.s-carousel { position: relative; }
.s-carousel__track { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 0.25rem; scroll-padding-inline: 0.25rem; }
.s-carousel__track::-webkit-scrollbar { display: none; }
.s-carousel__track > * { flex: 0 0 min(44vw, 12.5rem); scroll-snap-align: start; }
@media (min-width: 40rem) { .s-carousel__track > * { flex-basis: 13.5rem; } }
@media (min-width: 62rem) { .s-carousel__track > * { flex-basis: calc((100% - 5 * var(--s-3)) / 6); } }
.s-carousel__arrow { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 3; inline-size: 2.75rem; block-size: 5rem; display: grid; place-items: center; border: 1px solid var(--s-line); border-radius: var(--s-radius-sm); background: rgb(255 255 255 / 0.96); color: var(--s-brand-800); box-shadow: var(--s-shadow-lg); opacity: 0; transition: opacity var(--s-fast) var(--s-ease); }
.s-carousel:hover .s-carousel__arrow, .s-carousel:focus-within .s-carousel__arrow { opacity: 1; }
.s-carousel__arrow[hidden] { display: none; }
.s-carousel__arrow svg { inline-size: 1.4rem; block-size: 1.4rem; }
.s-carousel__arrow--prev { inset-inline-start: -0.75rem; }
.s-carousel__arrow--next { inset-inline-end: -0.75rem; }
@media (hover: none) { .s-carousel__arrow { display: none; } }

/* ---- Category strip (round tiles) ------------------------------------------- */
.s-catstrip { }
.s-catrail__track { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 0.25rem; }
.s-catrail__track::-webkit-scrollbar { display: none; }
.s-catrail__track > li { flex: 0 0 auto; scroll-snap-align: start; }
.s-cattile { display: grid; justify-items: center; gap: 0.5rem; inline-size: 6rem; text-align: center; }
@media (min-width: 62rem) { .s-cattile { inline-size: 7rem; } .s-catrail__track { justify-content: space-between; } }
.s-cattile__figure { display: grid; place-items: center; inline-size: 5rem; block-size: 5rem; padding: 3px; border: 2px solid var(--s-line); border-radius: 50%; background: #fff; overflow: hidden; transition: border-color var(--s-fast) var(--s-ease), transform var(--s-base) var(--s-ease), box-shadow var(--s-base) var(--s-ease); }
@media (min-width: 62rem) { .s-cattile__figure { inline-size: 5.75rem; block-size: 5.75rem; } }
.s-cattile__figure img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.s-cattile:hover .s-cattile__figure { border-color: var(--s-accent-500); transform: translateY(-3px); box-shadow: 0 10px 24px rgb(13 36 84 / 0.14); }
.s-cattile__name { font-weight: 600; color: var(--s-ink-soft); font-size: var(--s-text-xs); line-height: 1.25; }
.s-cattile:hover .s-cattile__name { color: var(--s-brand-700); }
.s-cat__empty { display: grid; place-items: center; inline-size: 100%; block-size: 100%; background: var(--s-brand-100); color: var(--s-brand-700); font-family: var(--s-font-display); font-weight: 700; font-size: 1.5rem; }
.s-rail-arrow { position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 3; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border: 1px solid var(--s-line); border-radius: 50%; background: var(--s-surface); color: var(--s-brand-800); box-shadow: var(--s-shadow); }
.s-rail-arrow svg { inline-size: 1.1rem; block-size: 1.1rem; }
.s-rail-arrow--prev { inset-inline-start: -0.5rem; }
.s-rail-arrow--next { inset-inline-end: -0.5rem; }
.s-catrail, .s-reviewrail { position: relative; }
@media (hover: none) { .s-rail-arrow { display: none; } }

/* ---- Trust strip -------------------------------------------------------------- */
.s-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
@media (min-width: 62rem) { .s-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-trust__item { display: flex; align-items: center; gap: var(--s-3); }
.s-trust__icon { display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; flex: none; border-radius: 50%; background: var(--s-brand-100); color: var(--s-brand-700); }
.s-trust__title { display: block; color: var(--s-ink); font-weight: 700; font-size: var(--s-text-sm); }
.s-trust__note { display: block; color: var(--s-muted); font-size: var(--s-text-xs); }
.s-trust__phone { color: var(--s-brand-500); font-weight: 600; }

/* ---- Promos ------------------------------------------------------------------- */
.s-promos { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .s-promos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-promo { position: relative; display: grid; align-content: end; gap: 0.25rem; min-block-size: 12rem; padding: var(--s-5); overflow: hidden; border-radius: var(--s-radius); color: #fff; background: var(--s-brand-800); box-shadow: 0 1px 3px rgb(13 36 84 / 0.08); }
.s-promo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--s-slow) var(--s-ease); }
.s-promo:hover img { transform: scale(1.06); }
.s-promo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to top, rgb(6 16 49 / 0.88), rgb(6 16 49 / 0.25) 60%, transparent); }
.s-promo > * { position: relative; z-index: 1; }
.s-promo__eyebrow { color: var(--s-cool-500); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; font-size: var(--s-text-2xs); }
.s-promo__title { font-family: var(--s-font-display); font-weight: 700; font-size: var(--s-text-xl); }
.s-promo__link { color: #fff; font-weight: 600; font-size: var(--s-text-sm); }

/* ---- Collections grid ------------------------------------------------------------ */
.s-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 40rem) { .s-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 62rem) { .s-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.s-cat { display: block; overflow: hidden; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius); transition: box-shadow var(--s-base) var(--s-ease), transform var(--s-base) var(--s-ease); }
.s-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(13 36 84 / 0.10); }
.s-cat__figure { aspect-ratio: 1; overflow: hidden; background: var(--s-line-soft); }
.s-cat__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--s-slow) var(--s-ease); }
.s-cat:hover .s-cat__figure img { transform: scale(1.05); }
.s-cat__body { padding: var(--s-3); }
.s-cat__name { font-weight: 600; color: var(--s-ink); font-size: var(--s-text-sm); }
.s-cat__count { color: var(--s-muted); font-size: var(--s-text-xs); }

/* ---- Story band ------------------------------------------------------------------ */
.s-story { display: grid; gap: var(--s-6); align-items: center; padding: var(--s-8) var(--s-6); border-radius: var(--s-radius); background-image: linear-gradient(120deg, var(--s-brand-900), var(--s-brand-700)); color: #fff; overflow: hidden; position: relative; }
@media (min-width: 62rem) { .s-story { grid-template-columns: 1.2fr 1fr; padding: var(--s-10) var(--s-10); } }
.s-story__eyebrow { color: var(--s-cool-500); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; font-size: var(--s-text-2xs); margin-block-end: 0.5rem; }
.s-story__title { color: #fff; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); }
.s-story__text { margin-block-start: var(--s-4); color: rgb(255 255 255 / 0.85); font-size: var(--s-text-md); max-inline-size: 40rem; }
.s-story__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.s-story__fact { padding: var(--s-4); border-radius: var(--s-radius); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.12); }
.s-story__fact strong { display: block; font-family: var(--s-font-display); font-size: var(--s-text-2xl); color: var(--s-cool-500); }
.s-story__fact span { font-size: var(--s-text-xs); color: rgb(255 255 255 / 0.8); }

/* ---- Offers --------------------------------------------------------------------- */
.s-offers { display: grid; gap: var(--s-3); }
.s-offers__title { font-size: var(--s-text-md); margin-block-end: var(--s-2); }
.s-offer { display: grid; gap: 0.35rem; padding: var(--s-4); border: 1px dashed var(--s-brand-200); border-radius: var(--s-radius); background: var(--s-brand-100); }
.s-offer__locked { opacity: 0.7; border-style: dotted; background: var(--s-surface); }
.s-offer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.s-offer__code { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 0.08em; color: var(--s-brand-800); }
.s-offer__flag, .s-offer__applied { font-size: var(--s-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--s-tracking-caps); color: var(--s-success); }
.s-offer__main { font-size: var(--s-text-sm); }
.s-offer__saving { font-weight: 700; color: var(--s-success); }
.s-offer__why, .s-offer__note { font-size: var(--s-text-xs); color: var(--s-muted); }
.s-offer__action { margin-block-start: 0.25rem; }

/* ---- Showcase: side categories · hero · side tiles ------------------------ */
.s-showcase { display: grid; gap: var(--s-4); padding-block: var(--s-4) 0; }
@media (min-width: 62rem) { .s-showcase { grid-template-columns: 17rem minmax(0, 1fr) 15rem; align-items: stretch; padding-block-start: var(--s-5); } }
.s-sidecats { display: none; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; }
@media (min-width: 62rem) { .s-sidecats { display: block; } }
.s-sidecats__title { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; background: var(--s-brand-800); color: #fff; font-weight: 700; font-size: var(--s-text-sm); }
.s-sidecats__title svg { inline-size: 1.1rem; block-size: 1.1rem; }
.s-sidecats__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; color: var(--s-ink); font-size: var(--s-text-sm); font-weight: 500; border-block-end: 1px solid var(--s-line-soft); transition: background-color var(--s-fast) var(--s-ease), color var(--s-fast) var(--s-ease); }
.s-sidecats__link img { inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; }
.s-sidecats__link svg { margin-inline-start: auto; inline-size: 1rem; block-size: 1rem; color: var(--s-muted); }
.s-sidecats__link:hover { background: var(--s-brand-100); color: var(--s-brand-800); }
.s-sidecats__all { display: block; padding: 0.7rem 1rem; color: var(--s-brand-500); font-weight: 600; font-size: var(--s-text-sm); }
.s-hero { position: relative; border-radius: var(--s-radius); overflow: hidden; box-shadow: var(--s-shadow-lg); background: var(--s-brand-900); }
.s-hero::after { display: none; }
.s-hero__stage { aspect-ratio: 16 / 8.6; max-block-size: none; }
@media (max-width: 47.99rem) { .s-hero__stage { aspect-ratio: 4 / 3.4; } }
.s-hero__body { inset-inline-start: clamp(1.25rem, 4vw, 3rem); inset-inline-end: clamp(1.25rem, 4vw, 3rem); inset-block-start: 50%; translate: 0 -50%; max-inline-size: 34rem; }
@media (max-width: 47.99rem) { .s-hero__body { inset-block-start: auto; inset-block-end: 1.5rem; translate: 0; } }
.s-hero__arrow { inset-block-start: 50%; translate: 0 -50%; block-size: 3rem; inline-size: 3rem; border-radius: 50%; background: rgb(255 255 255 / 0.9); color: var(--s-brand-800); opacity: 0; }
.s-hero:hover .s-hero__arrow { opacity: 1; }
.s-hero__arrow svg { inline-size: 1.2rem; block-size: 1.2rem; filter: none; }
.s-hero__dots { inset-block-end: 1rem; }
.s-sidetiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (min-width: 62rem) { .s-sidetiles { grid-template-columns: 1fr; } }
.s-sidetile { position: relative; display: block; overflow: hidden; border-radius: var(--s-radius); background: var(--s-brand-800); box-shadow: var(--s-shadow); aspect-ratio: 3 / 2; }
@media (min-width: 62rem) { .s-sidetile { aspect-ratio: auto; block-size: 100%; min-block-size: 9rem; } }
.s-sidetile img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--s-slow) var(--s-ease); }
.s-sidetile:hover img { transform: scale(1.05); }
.s-sidetile__body { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 0.15rem; padding: 1.5rem 0.9rem 0.8rem; background-image: linear-gradient(to top, rgb(6 16 49 / 0.88), transparent); color: #fff; }
.s-sidetile__eyebrow { font-size: var(--s-text-2xs); font-weight: 700; letter-spacing: var(--s-tracking-caps); text-transform: uppercase; color: var(--s-cool-500); }
.s-sidetile__title { font-family: var(--s-font-display); font-weight: 700; font-size: var(--s-text-md); }

/* Home page rhythm */
.s-home { display: grid; gap: var(--s-5); padding-block-end: var(--s-6); }
@media (min-width: 62rem) { .s-home { gap: var(--s-6); } }
.s-band--strip { padding-block: var(--s-4); }
.s-band--trust { padding-block: var(--s-4); }
.s-band__head--bare { margin-block-end: var(--s-4); }
.s-card__variants { color: var(--s-muted); font-size: var(--s-text-xs); }
.s-promo--wide { min-block-size: 14rem; }
.s-promo__text { color: rgb(255 255 255 / 0.85); font-size: var(--s-text-sm); }
.s-footer__pay { display: grid; gap: 0.15rem; margin-block-start: 0.5rem; padding: 0.6rem 0.8rem; border-radius: var(--s-radius); background: rgb(255 255 255 / 0.06); font-weight: 600; }
.s-footer__pay small { font-weight: 400; color: rgb(255 255 255 / 0.65); }