/* ==========================================================
   KickUp — landing page (hero, promo, our shoes).
   Loader / header / footer / theme live in kickup-base.css (copied from KickUp).
   Rules: animate only transform + opacity, no blur, no loops, no parallax.
   ========================================================== */
:root {
  --tile:#F4F3F1; --circle:#F1F1F1; --promo-bg:#0A0A0A; --card-shadow:0 10px 28px rgba(0,0,0,.08);
}
:root[data-theme="dark"] {
  --tile:#26262B; --circle:#2B2B31; --promo-bg:#1C1C20; --card-shadow:0 10px 28px rgba(0,0,0,.45);
}
.wrap { width:100%; max-width:1100px; margin:0 auto; padding-left:20px; padding-right:20px; }
.eyebrow { display:block; font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:3px; text-transform:uppercase; color:var(--color-red); }
.h-display { font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase; line-height:.92; letter-spacing:.5px; }
.h-display em { color:var(--color-red); font-style:italic; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 34px; border-radius:999px;
  background:var(--color-red); color:#fff; font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase;
  font-size:24px; letter-spacing:1px; -webkit-tap-highlight-color:transparent; transition:transform .2s ease, background-color .2s ease; }
.btn svg { width:22px; height:22px; }
.btn:hover { background:var(--color-red-deep); transform:translateY(-2px); }
.btn:active { transform:scale(.97); }
.btn:focus-visible, .arrow:focus-visible, .cart-fab:focus-visible, .copy:focus-visible { outline:3px solid var(--color-red); outline-offset:3px; }
.btn--ghost { background:transparent; color:var(--color-black); border:2px solid var(--color-red); min-height:48px; font-size:21px; padding:0 26px; }
.btn--ghost:hover { background:var(--color-red); color:#fff; }

/* simple fade-up reveal (the only scroll animation) */
.js .reveal { opacity:0; -webkit-transform:translateY(18px); transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity:1; -webkit-transform:none; transform:none; }
.lite .reveal, .lite .btn, .lite .cart-fab { transition:none !important; }

/* ===== 1) HERO ===== */
.hero { position:relative; padding:76px 0 150px; overflow:hidden; }
.js .hero__intro { opacity:0; }
.hero__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.hero__title { font-size:clamp(40px, calc(var(--col) * .128), 92px); margin-top:6px; }
.hero__tag { margin-top:8px; max-width:30ch; font-size:15.5px; line-height:1.55; color:var(--text-soft); }
.hero__tag b { color:var(--color-red); font-weight:700; }
.hero__count { flex:0 0 auto; padding-top:2px; font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:30px; line-height:1; color:var(--color-black); }
.hero__count b { color:var(--color-red); font-weight:900; }
.hero__count span { font-weight:700; opacity:.5; font-size:20px; }

/* The picture is inset so the arrows can sit on its left and right, level with the
   shoe — you never have to scroll to reach them (which was the laptop problem).
   .stage__nav is an invisible copy of the picture box (same width, same 3:2 shape);
   the arrows hang off that box by --arrow-off, whose % is measured against the nav
   width. Keep in sync: --arrow-off = ((100 - --pic-w) / 2) / --pic-w.
       pic 70%  ->  (30/2)/70 = 21.43%      pic 58% -> (42/2)/58 = 36.2%  (overridden below)
*/
.stage { --pic-w:70%; --arrow-off:21.43%; position:relative; margin-top:10px; }
.shoe-slide__pic { position:relative; width:var(--pic-w); margin:0 auto; }
.shoe-slide__pic::before { content:''; position:absolute; left:50%; top:50%; width:60%; padding-top:60%; margin:-30% 0 0 -30%; border-radius:50%;
  background:var(--circle); border:3px solid transparent; border-top-color:var(--color-red); border-right-color:var(--color-red); }
.stage__badge { position:absolute; z-index:5; right:calc((100% - var(--pic-w)) / 2 - 6px); top:2px; width:70px; height:70px; border-radius:50%;
  background:var(--color-red); color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center; -webkit-transform:rotate(12deg); transform:rotate(12deg);
  font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase; font-size:16px; line-height:.95; letter-spacing:.5px; }
.stage__nav { position:absolute; z-index:4; top:0; left:0; right:0; width:var(--pic-w); margin:0 auto; height:0;
  padding-top:calc(var(--pic-w) * 2 / 3);         /* the picture box is 3:2 */
  pointer-events:none; }
.stage__nav .arrow { position:absolute; top:50%; margin-top:-22px; pointer-events:auto; }
.stage__nav .arrow:first-child { left:calc(-1 * var(--arrow-off)); }
.stage__nav .arrow:last-child { right:calc(-1 * var(--arrow-off)); }
.track { position:relative; z-index:2; display:-webkit-box; display:flex; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  -ms-scroll-snap-type:x mandatory; scroll-snap-type:x mandatory; scrollbar-width:none; outline:none; touch-action:pan-x pan-y; }
.track::-webkit-scrollbar { display:none; }
.shoe-slide { -webkit-box-flex:0; flex:0 0 100%; min-width:100%; scroll-snap-align:center; text-align:center; }
.shoe-slide__img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; position:relative; z-index:1;
  -webkit-user-drag:none; user-select:none; }
.shoe-slide__img.is-opaque { mix-blend-mode:multiply; -webkit-filter:brightness(1.06); filter:brightness(1.06); }
:root[data-theme="dark"] .shoe-slide__img.is-opaque { mix-blend-mode:normal; -webkit-filter:none; filter:none; background:#fff; border-radius:24px; }
.shoe-slide__name { margin-top:2px; font-size:clamp(32px, calc(var(--col) * .105), 46px); }
.shoe-slide__price { margin-top:4px; font-family:var(--font-heading); font-weight:800; font-style:italic; font-size:clamp(26px, calc(var(--col) * .082), 34px); letter-spacing:.5px; color:var(--color-red); }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.chip { padding:7px 13px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:600; letter-spacing:.2px; color:var(--text-soft); }

/* the little progress bar under the shoe */
.hero__controls { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.arrow { width:48px; height:48px; border-radius:50%; border:2px solid var(--color-red); background:var(--surface); color:var(--color-red);
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:transform .2s ease, background-color .2s ease, color .2s ease; }
.arrow svg { width:22px; height:22px; }
.arrow:hover:not(:disabled) { background:var(--color-red); color:#fff; }
.arrow:active:not(:disabled) { transform:scale(.92); }
.arrow:disabled { opacity:.35; cursor:default; }
.dots { display:flex; align-items:center; gap:10px; }
.dots button { width:11px; height:11px; padding:0; border-radius:99px; background:var(--dot); transition:width .25s ease, background-color .25s ease; }
.dots button.is-active { width:34px; background:var(--color-red); }
.hero__cta { display:flex; justify-content:center; margin-top:26px; }

/* floating cart (fixed, bottom right) */
.cart-fab { position:fixed; z-index:900; right:14px; right:calc(14px + env(safe-area-inset-right, 0px));
  bottom:84px; bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:9px; height:52px; padding:0 18px 0 16px; border-radius:999px; background:var(--color-red); color:#fff;
  font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase; font-size:19px; letter-spacing:.8px;
  box-shadow:0 8px 22px rgba(229,9,16,.38); -webkit-tap-highlight-color:transparent; transition:transform .2s ease, background-color .2s ease; }
.cart-fab svg { width:22px; height:22px; }
.cart-fab:hover { background:var(--color-red-deep); transform:translateY(-2px); }
.cart-fab:active { transform:scale(.96); }
.cart-fab__n { min-width:24px; height:24px; padding:0 6px; border-radius:99px; background:#fff; color:var(--color-red); display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-style:normal; font-weight:800; font-size:13px; letter-spacing:0; }

/* ===== 2) PROMO / SALES (layout + mood from the design site's hero, recoloured) ===== */
.promo { padding:28px 16px 88px; }
.promo__panel { position:relative; overflow:hidden; max-width:1100px; margin:0 auto; padding:24px 20px 26px; border-radius:30px; background:var(--promo-bg); color:#fff; }
.promo__orb { position:absolute; right:-70px; top:-70px; width:210px; height:210px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 35%, #FF3B3F 0, #E50910 55%, #A5050B 100%); }
.promo__orb--b { right:auto; left:-90px; top:auto; bottom:-100px; width:200px; height:200px; background:radial-gradient(circle at 35% 30%, #4a4a4a 0, #151515 65%); }
.promo__panel > *:not(.promo__orb) { position:relative; z-index:1; }
.promo__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:6px 14px; border:1px solid rgba(255,255,255,.32); border-radius:50px; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; }
.pill--red { background:var(--color-red); border-color:var(--color-red); }
.promo__year { font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.offers { border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.offer { display:flex; align-items:center; gap:16px; padding:16px 0; }
.offer + .offer { border-top:1px solid rgba(255,255,255,.14); }
.offer__big { flex:0 0 94px; font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:50px; line-height:.9; color:var(--color-red); }
.offer__big small { font-size:.5em; }
.offer__txt b { display:block; font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase; font-size:22px; letter-spacing:.6px; line-height:1.05; }
.offer__txt span { display:block; margin-top:3px; font-size:13px; line-height:1.4; color:rgba(255,255,255,.62); }
.offer__code { font-family:var(--font-heading); font-weight:900; font-style:italic; letter-spacing:1.5px; color:var(--color-red); font-size:15px; }
.promo__title { text-align:center; padding:34px 0 28px; }
.promo__edition { display:block; font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--color-red); margin-bottom:12px; }
.promo__title h2 { font-size:clamp(70px, calc(var(--col) * .28), 170px); color:#fff; }
.promo__title h2 em { display:block; }
.promo__sub { margin-top:10px; font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(24px, calc(var(--col) * .072), 40px); letter-spacing:5px; }
.promo__bottom { display:flex; flex-direction:column; gap:20px; }
.promo__label { font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--color-red); margin-bottom:8px; }
.promo__text { font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); max-width:380px; }
.code-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.code { padding:12px 20px; border:2px dashed rgba(255,255,255,.55); border-radius:14px; font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:30px; letter-spacing:3px; line-height:1; }
.copy { display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 24px; border-radius:50px; background:var(--color-red); color:#fff;
  font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase; font-size:20px; letter-spacing:1px; transition:transform .2s ease, background-color .2s ease; }
.copy svg { width:18px; height:18px; }
.copy:hover { background:var(--color-red-deep); }
.copy:active { transform:scale(.96); }
.promo__badge { display:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== 3) OUR SHOES ===== */
.shoes { padding:34px 0 96px; }
.shoes__head { text-align:center; margin-bottom:26px; }
.shoes__title { font-size:clamp(46px, calc(var(--col) * .16), 96px); margin-top:8px; }
.shoes__sub { margin-top:10px; color:var(--mute); font-size:15px; }
.shoes__grid { display:grid; grid-template-columns:1fr; gap:20px; }
.card { display:flex; flex-direction:column; border-radius:28px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); padding:12px 12px 22px; }
/* the picture is wrapped in a link, so the whole image is tappable */
.card > a { display:block; }
.card__img { position:relative; border-radius:20px; background:var(--tile); overflow:hidden; }
.card__img img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
/* a photo with a solid background needs multiply blending to sit on the tile */
.card__img img.is-opaque { mix-blend-mode:multiply; }
:root[data-theme="dark"] .card__img img.is-opaque { mix-blend-mode:normal; background:#fff; }
.card__tag { position:absolute; z-index:2; left:12px; top:12px; padding:7px 13px; border-radius:99px; background:var(--color-red); color:#fff;
  font-family:var(--font-heading); font-weight:800; font-style:italic; text-transform:uppercase; font-size:15px; letter-spacing:.8px; line-height:1; }
.card__meta { padding:16px 10px 0; }
.card__meta h3 { font-family:var(--font-heading); font-weight:900; font-style:italic; text-transform:uppercase; font-size:36px; line-height:.95; }
.card__meta p { margin-top:6px; font-size:13.5px; color:var(--mute); }
.card__row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.card__row b { font-family:var(--font-heading); font-weight:900; font-style:italic; font-size:34px; line-height:1; color:var(--color-red); }

/* the "see the whole shop" button under the grid */
.shoes__more { display:flex; justify-content:center; margin-top:34px; }

/* ===== bigger screens (same switch KickUp uses for its desktop layout) ===== */
@media (min-width:560px) { .cart-fab { bottom:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:900px) and (min-aspect-ratio:5/4) {
  .wrap { padding-left:48px; padding-right:48px; }
  .cart-fab { right:28px; bottom:28px; height:58px; font-size:21px; }
  .hero { padding:130px 0 170px; }
  .hero__title { font-size:clamp(72px, 8vw, 128px); }
  .hero__tag { font-size:18px; max-width:none; }
  .hero__count { font-size:42px; }
  .stage { max-width:1240px; margin-left:auto; margin-right:auto; }
  .stage__badge { top:14px; width:104px; height:104px; font-size:23px; }
  .arrow { width:58px; height:58px; }
  .stage__nav .arrow { margin-top:-29px; }
  .arrow svg { width:26px; height:26px; }
  .shoe-slide__name { font-size:60px; } .shoe-slide__price { font-size:42px; }
  .chip { font-size:14px; }
  .hero__cta { margin-top:36px; }
  .dots button { width:13px; height:13px; }
  .dots button.is-active { width:42px; }
  .promo { padding:36px 48px 130px; }
  .promo__panel { padding:40px 54px 44px; border-radius:40px; }
  .promo__orb { width:340px; height:340px; right:-110px; top:-110px; }
  .promo__top { margin-bottom:26px; }
  .offers { display:flex; }
  .offer { flex:1; padding:24px 22px; }
  .offer + .offer { border-top:none; border-left:1px solid rgba(255,255,255,.14); }
  .offer:first-child { padding-left:0; }
  .offer__big { flex-basis:auto; font-size:64px; }
  .promo__title { padding:60px 0 50px; }
  .promo__bottom { flex-direction:row; align-items:flex-end; justify-content:space-between; }
  .promo__text { font-size:16px; }
  .code { font-size:38px; padding:14px 26px; } .copy { height:58px; font-size:23px; padding:0 32px; }
  .promo__badge { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--color-red); font-weight:700; font-size:15px; }
  .shoes { padding:48px 0 150px; }
  .shoes__grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; max-width:1240px; margin:0 auto; }
  .card { padding:14px 14px 26px; border-radius:30px; }
  .card__meta { padding:14px 8px 0; }
  .card__meta h3 { font-size:30px; }
  .card__meta p { font-size:12px; }
  .card__row { flex-direction:column; align-items:flex-start; gap:12px; }
  .card__row b { font-size:34px; }
  .card__row .btn--ghost { min-height:44px; font-size:18px; padding:0 22px; }
  .shoes__more { margin-top:46px; }
}
@media (min-width:600px) and (max-width:899px) { .shoes__grid { grid-template-columns:1fr 1fr; } .card__meta h3 { font-size:30px; } }
@media (min-width:480px) and (max-width:599px) { .shoes__grid { grid-template-columns:1fr 1fr; } .card__meta h3 { font-size:26px; } .card__row b { font-size:28px; } }

/* ==========================================================
   THE SHOE CARDS — the grid changes shape with the column.

   The phone column is 430px wide, so two cards side by side
   gives each one about 185px. At that width the roomy card
   (big title, price and button on one line) does not fit, so
   the phone card is a compact one: small tag, short title, and
   the price stacked above a full-width button.

   Below 900px the app is still the 430px column, so the same
   compact card is used all the way up to the desktop switch.
   ========================================================== */
@media (max-width:899px) {
  .shoes__grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .card { padding:8px 8px 14px; border-radius:20px; }
  .card__tag { left:8px; top:8px; padding:5px 9px; font-size:11px; letter-spacing:.5px; }
  .card__meta { padding:10px 6px 0; }
  .card__meta h3 { font-size:17px; line-height:1.05; }
  .card__meta p { display:none; }
  .card__row { flex-direction:column; align-items:stretch; gap:8px; margin-top:10px; }
  .card__row b { font-size:22px; }
  .card__row .btn--ghost { min-height:36px; font-size:15px; padding:0 12px; }
  .shoes__more { margin-top:26px; }
}
@supports not (aspect-ratio: 1 / 1) { .shoe-slide__img, .card__img img { height:auto; } }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1; -webkit-transform:none; transform:none; transition:none; } .btn, .cart-fab, .arrow, .dots button, .copy { transition:none; } }
/* old browsers without padding-top-in-percent trickery keep a plain centred carousel */
@supports not (padding-top: 1%) { .stage__nav { display:none; } }
.footer__blob { will-change:auto; }   /* footer blobs are static on this page */