/* Homepage layout (requires lux.css) */

.apex-lux.page-home .home {
  max-width: var(--lux-max);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2.5rem;
}

@media (min-width: 720px) {
  .apex-lux.page-home .home {
    max-width: var(--lux-max);
    padding: 3rem 2rem 4rem;
  }
}

.home-intro {
  margin-bottom: 1.25rem;
}

/* Hero — premium/spacious/soft direction. Copy-only, centred, generous
   whitespace does the "premium" work instead of imagery or colour
   blocking. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Top spacing intentionally left to the .home container's own top
     padding (above) — the container already provides a normal, considered
     gap under the announcement banner; this rule used to ALSO add its own
     growing top padding on top of that (up to 3rem extra at desktop),
     which is what made the banner-to-hero gap read as oversized. */
  padding: 0 0 0.75rem;
}

.hero__copy {
  max-width: 34rem;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lux-muted);
}

.hero__eyebrow-dog {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 3.375rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--lux-text);
}

/* Shine sweep on "made simple." — base stays the brand deep-red (never
   white), a lighter pink band sweeps across it on a slow, continuous loop.
   Same background-clip: text technique, timing character mirrors the
   promo-bar shimmer (css/lux.css @keyframes apex-promo-shimmer): slow,
   continuous, smooth — never fast or jumpy. */
.hero__title-shine {
  background-image: linear-gradient(
    100deg,
    var(--lux-accent, #7a1528) 35%,
    var(--pink-deep, #e8b4c4) 50%,
    var(--lux-accent, #7a1528) 65%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: apex-hero-shine 6s ease-in-out infinite;
}

@keyframes apex-hero-shine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Reduced motion: freeze to a static state (same convention as the promo
   marquee shimmer) rather than removing the effect outright. */
@media (prefers-reduced-motion: reduce) {
  .hero__title-shine {
    animation: none;
    background-position: 50% 0;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  /* Was 1.75rem when a hero__sub paragraph sat above this row; that
     paragraph has been removed so the CTAs sit closer under the title
     instead of leaving an awkward gap. */
  margin-top: 1rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: "Poppins", var(--font-ui, "DM Sans", system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.hero__cta:active {
  transform: scale(0.98);
}

.hero__cta--primary {
  /* Light pink brand fill (same --pink token used for colour-chip/height-
     option "selected" states) with the dark maroon text used elsewhere for
     text-on-pink, for contrast. */
  color: var(--maroon-dark, #5c0f1e);
  background: var(--pink, #f8e8ec);
  box-shadow: 0 8px 24px rgba(122, 21, 40, 0.12);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
  background: var(--pink-deep, #e8b4c4);
  filter: none;
}

.hero__cta--primary:focus-visible {
  outline: 2px solid var(--maroon, #7a1528);
  outline-offset: 2px;
}

.hero__cta--secondary {
  color: var(--lux-accent);
  background: transparent;
  border: 1.5px solid var(--pink-deep, #e8b4c4);
}

.hero__cta--secondary:hover {
  background: var(--pink, #f8e8ec);
}

@media (min-width: 720px) {
  .hero {
    padding-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-bottom: 1.25rem;
  }
}

/* Payment / trust strip — same soft pink ombre + shimmer language already
   used for the site's own buttons (#cartPayBtn, #addToCartBtn, the header
   Cart artwork's hover sweep) instead of a plain grey panel, so it reads as
   an intentional premium brand surface rather than a generic notice box.
   Three items laid out evenly (space-between): Secure Stripe Checkout,
   Apple & Samsung Pay, Afterpay Coming Soon!. */
.home-showcase + .home-block--shop {
  margin-top: 0;
}

.home-intro__accent {
  color: var(--lux-accent, #7a1528);
  font-weight: 600;
}

/* Hero-only: "Sydney" / "Hills District" in the top label, the h1's
   "Sydney", and the sub-paragraph's "Sydney" — the site's existing pale
   pink fill (--pink) with a thin existing-maroon (--lux-accent) stroke for
   crisp readability, reusing only established tokens. Scoped to these three
   parent contexts specifically so the unrelated "Sydney" further down in
   .home-intro__meta (next to the price/CTA) keeps its plain maroon look,
   unchanged. Font, size, weight and layout are untouched — only colour. */
.home-intro__label .home-intro__accent,
.home-intro__title .home-intro__accent,
.home-intro__sub .home-intro__accent {
  color: var(--pink, #f8e8ec);
  -webkit-text-stroke: 0.4px var(--lux-accent, #7a1528);
  text-stroke: 0.4px var(--lux-accent, #7a1528);
}

.home-intro__label {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lux-muted);
}

.home-intro__title {
  margin: 0;
  font-size: clamp(1.875rem, 8vw, 2.375rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--lux-text);
}

.home-intro__sub {
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--lux-muted);
  max-width: 22em;
}

/* How it works — Stripe / PayPal: numbered, quiet, no box */
.home-steps {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lux-line, #ebe6e8);
}

.home-steps--after-showcase {
  margin-top: 0;
  margin-bottom: 2rem;
  padding-top: 1.25rem;
}

.home-steps__label {
  margin: 0 0 0.85rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-muted, #6e5c63);
}

.home-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.home-steps__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--lux-line, #ebe6e8);
}

.home-steps__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.home-steps__item:first-child {
  padding-top: 0;
}

.home-steps__num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--lux-muted, #6e5c63);
  background: var(--lux-bg, #fff);
  border: 1px solid var(--lux-line, #ebe6e8);
  border-radius: 50%;
}

.home-steps__text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--lux-text, #1a1214);
  letter-spacing: -0.01em;
}

@media (min-width: 520px) {
  .home-steps__list {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  .home-steps__item {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0 0.75rem 0 0;
    border-bottom: none;
    border-right: 1px solid var(--lux-line, #ebe6e8);
  }

  .home-steps__item:last-child {
    border-right: none;
    padding-right: 0;
  }

  .home-steps__item:first-child {
    padding-left: 0;
  }

  .home-steps__text {
    font-size: 0.8125rem;
    padding-right: 0.25rem;
  }
}

.home-intro__actions {
  margin-top: 1.5rem;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--lux-radius);
  border: none;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.home-btn--primary {
  width: 100%;
  color: #fff;
  background: var(--lux-accent);
}

.home-btn--primary:hover {
  background: #5c0f1e;
}

.home-intro__meta {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: var(--lux-muted);
  text-align: center;
}

.home-intro__meta strong {
  font-weight: 600;
  color: var(--lux-text);
}

/* Category showcase — premium image-led horizontal carousel, data-driven
   by js/home-showcase.js from the exact same categories list/ordering used
   on shop/index.html. Native overflow-x + scroll-snap (not a JS transform
   slide index) gives free swipe/drag/momentum on touch, and lets desktop
   show several cards at once with a smooth native scroll instead of a
   single full-width slide. */
.home-showcase {
  margin: 0 -1.5rem 1.5rem;
  position: relative;
}

@media (min-width: 720px) {
  .home-showcase {
    margin-left: 0;
    margin-right: 0;
  }
}

.home-showcase__viewport {
  overflow: hidden;
}

.home-showcase__track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 1.5rem 0.5rem;
}

@media (min-width: 720px) {
  .home-showcase__track {
    padding: 0.25rem 0 0.5rem;
  }
}

.home-showcase__track::-webkit-scrollbar {
  display: none;
}

/* One full card + a glimpse of the next on mobile (per spec), a fixed
   comfortable card width on larger screens so several sit side by side. */
.home-showcase__slide {
  flex: 0 0 auto;
  width: 76vw;
  max-width: 18rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--lux-line);
  box-shadow: 0 10px 28px rgba(122, 21, 40, 0.08), 0 2px 6px rgba(26, 15, 18, 0.05);
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 720px) {
  .home-showcase__slide {
    width: 15.5rem;
  }
}

.home-showcase__slide:hover,
.home-showcase__slide:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(122, 21, 40, 0.14), 0 3px 8px rgba(26, 15, 18, 0.06);
}

/* Fixed, uniform box (same aspect-ratio for every card regardless of the
   source image's own proportions) with object-fit: contain — shows the
   FULL category image rather than a cropped/zoomed-in cover fit, while
   every card still ends up exactly the same size. Consistent internal
   padding + a neutral background absorb the natural letterbox space around
   images that aren't already 4:5, so nothing looks "larger" just because
   its source photo happens to be wider or taller. */
.home-showcase__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0.75rem;
  background: var(--lux-surface, #faf9fa);
}

.home-showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.home-showcase__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem 0.85rem;
}

.home-showcase__name {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lux-text);
}

.home-showcase__badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lux-accent, #7a1528);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--pink, #f8e8ec);
}

.home-showcase__controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0 1.5rem;
}

@media (min-width: 720px) {
  .home-showcase__controls {
    display: flex;
    padding: 0;
  }
}

.home-showcase__arrow {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--lux-accent, #7a1528);
  background: #fff;
  border: 1px solid var(--pink-deep, #e8b4c4);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-showcase__arrow:hover {
  background: var(--pink, #f8e8ec);
  border-color: var(--lux-accent, #7a1528);
}

/* Shop Balloons — homepage category-discovery grid (Phase 9N). Direct
   crawlable links into the main live category pages, one hop from the
   homepage instead of two. A plain responsive grid (2 cols mobile, 3
   tablet, 4 desktop) — no carousel — reusing the same .category-card
   markup/classes every other category listing on the site renders
   (js/shop-hub.js, js/home-trending.js), with grid-specific sizing added
   here rather than a new card system. */
.home-categories {
  margin: 1.75rem 0 1.5rem;
}

.home-categories__head {
  margin-bottom: 1rem;
}

.home-categories__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lux-text);
}

.home-categories__sub {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lux-muted);
  max-width: 34rem;
}

.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

@media (min-width: 600px) {
  .home-categories__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }
}

@media (min-width: 960px) {
  .home-categories__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-categories__card.category-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 0.55rem 0.55rem 0.75rem;
  border-radius: 14px;
  background: var(--white, #fff);
  border: 1px solid var(--border, var(--lux-line));
  box-shadow: var(--shadow, 0 6px 18px rgba(122, 21, 40, 0.07));
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-categories__card.category-card:hover,
.home-categories__card.category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(122, 21, 40, 0.13), 0 3px 8px rgba(26, 15, 18, 0.05);
}

.home-categories__card.category-card:focus-visible {
  outline: 2px solid var(--lux-accent, #7a1528);
  outline-offset: 2px;
}

.home-categories__card .category-card__visual {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  background: var(--white, #fff);
  overflow: hidden;
}

.home-categories__card .category-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  min-height: 0;
}

.home-categories__card .category-card__body {
  padding: 0;
  margin-top: 0.5rem;
  align-items: center;
  text-align: center;
}

.home-categories__card .category-card__name {
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: center;
}

@media (min-width: 720px) {
  .home-categories__card .category-card__name {
    font-size: 0.9375rem;
  }
}

/* Trending Stacks — curated homepage product carousel (5 named products,
   js/home-trending.js). Same smooth native-scroll + scroll-snap mechanism
   as .home-showcase (free touch/trackpad scrolling, no JS transform/index
   to keep in sync, no harsh snapping), with its own card treatment: white
   card, light pink product field, object-fit: contain so nothing crops. */
.home-trending {
  /* Was 2.5rem — with the payment-method trust-strip removed (which used
     to sit between .hero and this section and absorb most of the visual
     gap on its own), this top margin became the only thing separating the
     hero from Trending Balloons and read as oversized on its own. */
  margin: 1.25rem -1.5rem 1.5rem;
  position: relative;
}

@media (min-width: 720px) {
  .home-trending {
    margin-left: 0;
    margin-right: 0;
  }
}

.home-trending__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  margin-bottom: 0.85rem;
}

@media (min-width: 720px) {
  .home-trending__head {
    padding: 0;
  }
}

.home-trending__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lux-text);
}

.home-trending__viewport {
  position: relative;
  overflow: hidden;
}

.home-trending__track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.25rem 1.5rem 0.5rem;
}

@media (min-width: 720px) {
  .home-trending__track {
    padding: 0.25rem 0 0.5rem;
  }
}

.home-trending__track::-webkit-scrollbar {
  display: none;
}

/* Trending cards reuse the real .category-card component (same markup
   js/category-page.js and js/shop-hub.js render everywhere else on the
   site) rather than inventing a homepage-only card design. This block
   only adds carousel-specific sizing/centring on top of it, matching the
   boxed/full-bleed-image/centred-title treatment already used for the
   Shop hub's desktop category grid. */
.home-trending__card.category-card {
  flex: 0 0 auto;
  width: 68vw;
  max-width: 15rem;
  scroll-snap-align: start;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 0.55rem 0.55rem 0.9rem;
  border-radius: 16px;
  background: var(--white, #fff);
  border: 1px solid var(--border, var(--lux-line));
  box-shadow: var(--shadow, 0 10px 28px rgba(122, 21, 40, 0.08));
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 720px) {
  .home-trending__card.category-card {
    width: 13.5rem;
  }
}

.home-trending__card.category-card:hover,
.home-trending__card.category-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(122, 21, 40, 0.14), 0 3px 8px rgba(26, 15, 18, 0.06);
}

.home-trending__card .category-card__visual {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: 0;
  margin: 0;
  border-radius: 11px;
  /* White, not pink — blends into the card/page background now that
     object-fit:contain (see the img rule below) can letterbox a thumbnail
     shot at a different aspect ratio than this 4:5 box. */
  background: var(--white, #fff);
  overflow: hidden;
}

.home-trending__card .category-card__visual img {
  width: 100%;
  height: 100%;
  /* contain, not cover — several card thumbnails are shot noticeably
     taller/narrower than this card's 4:5 box (e.g. Fathers Day Balloons,
     Balloon Number Stacks, Custom Balloon Columns), so cover was cropping
     the subject. contain shows the whole image at its own proportions
     against the card's pink field, matching the "never crop a thumbnail"
     convention already used elsewhere on this site (see the shop-hub
     category grid above) — a durable fix at the shared rule, not a
     per-card override, so future thumbnail swaps can't regress it. */
  object-fit: contain;
  min-height: 0;
}

.home-trending__card .category-card__body {
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0;
  margin-top: 0.65rem;
}

.home-trending__card .category-card__name {
  font-size: 1rem;
  text-align: center;
}

.home-trending__card .category-card__price {
  text-align: center;
  font-size: 0.8125rem;
}

/* Spring Sale (2026) — the .trending-sale-ribbon component itself (shared
   with the Shop hub's Helium Bouquet Characters tile) now lives in
   css/styles.css, which is loaded on every page, instead of here — this
   file only needed .home-trending__card .category-card__visual above to be
   position:relative + overflow:hidden so the ribbon has a positioning
   context to clip against. */

.home-trending__card .category-card__soon {
  align-self: center;
}

/* Desktop only — arrows float over the left/right edges of the carousel
   viewport itself (not a row underneath the cards), vertically centred on
   the image area. .home-trending__viewport has overflow:hidden, so the
   arrows sit inset from its edges rather than offset outside it (an
   outside offset would just get clipped). Mobile keeps display:none —
   swipe is the only mobile interaction, no arrows. */
.home-trending__controls {
  display: none;
}

@media (min-width: 720px) {
  .home-trending__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0 0.5rem;
    pointer-events: none;
  }
}

.home-trending__arrow {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--lux-accent, #7a1528);
  background: #fff;
  border: 1px solid var(--pink-deep, #e8b4c4);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(26, 15, 18, 0.14);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-trending__arrow:hover {
  background: var(--pink, #f8e8ec);
  border-color: var(--lux-accent, #7a1528);
}

.home-seo {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lux-line);
}

.home-seo__title {
  margin: 0 0 0.65rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-muted);
}

.home-seo__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--lux-muted);
}

.home-seo__text a {
  color: var(--lux-accent);
  font-weight: 500;
}

.home-intro__label a {
  color: var(--lux-accent);
  text-decoration: none;
  font-weight: 500;
}

.home-block {
  margin-bottom: 2rem;
}

.home-block__label {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-muted);
}

.home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--lux-line);
  transition: opacity 0.15s ease;
}

.home-row:hover {
  opacity: 0.75;
}

.home-row__title {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lux-text);
}

.home-row__desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--lux-muted);
}

.home-row__desc--keywords {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.home-row__aside {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.home-row__price {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lux-muted);
}

.home-row__chev {
  font-size: 1.25rem;
  color: var(--lux-muted);
}

.home-lines {
  margin: 0;
  border-top: 1px solid var(--lux-line);
}

.home-lines__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--lux-line);
}

@media (max-width: 360px) {
  .home-lines__row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.home-lines dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lux-text);
}

.home-lines dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--lux-muted);
}

.home-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lux-muted);
}

/* Custom trending stacks */
.home-stacks {
  margin-top: 0.5rem;
}

.home-stacks__headline {
  margin: 0 0 0.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lux-text);
}

.home-stacks__sub {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lux-muted);
}

.stack-options {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  border-top: 1px solid var(--lux-line);
}

.stack-option {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--lux-line);
}

.stack-option__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lux-text);
  margin-bottom: 0.2rem;
}

.stack-option__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--lux-muted);
}

.home-row--last {
  border-bottom: none;
}

.home-row__badge {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-muted);
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--lux-line);
  border-radius: 4px;
}

.stack-variants {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lux-line);
}

.stack-variant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--lux-line);
}

.stack-variant__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lux-text);
  flex: 1 1 100%;
}

.stack-variant__tag {
  font-size: 0.8125rem;
  color: var(--lux-muted);
  flex: 1 1 auto;
}

.stack-variant__soon {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lux-muted);
}

.shop-spotlight {
  margin-top: 2rem;
  padding-top: 0.5rem;
}

.shop-spotlight__cta {
  display: inline-flex;
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}

.home-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--lux-radius);
  background: transparent;
  color: var(--lux-muted);
  border: 1px solid var(--lux-line);
}

.stacks-page__visual {
  margin-bottom: 1.75rem;
}

.stacks-page__cta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lux-line);
}

.stacks-page__cta-note {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--lux-muted);
}

.stacks-page__cta .home-btn--primary {
  width: 100%;
  margin-bottom: 0.65rem;
}

.stacks-page__cta .home-btn--ghost {
  width: 100%;
}

@media (min-width: 720px) {
  .shop-spotlight__cta {
    width: auto;
  }

  .stack-variant__name {
    flex: 1 1 auto;
  }
}

@media (min-width: 720px) {
  .home-btn--primary {
    width: auto;
    min-width: 11rem;
  }

  .home-intro__meta {
    text-align: left;
  }
}

/* ── Homepage promo carousel — Afterpay / Yes We Deliver / Google reviews.
   Positioned under Trending Balloons (see index.html). Mobile is edge-to-
   edge (same negative-margin treatment as .home-trending above it); desktop
   sits within the page's normal content width. A fixed aspect-ratio per
   breakpoint (identical for every slide) keeps carousel height constant
   across slides, so rotating never shifts the rest of the page. ───────── */
.promo-carousel {
  position: relative;
  margin: 1.75rem -1.5rem 0;
}

@media (min-width: 720px) {
  .promo-carousel {
    margin-left: 0;
    margin-right: 0;
    margin-top: 2rem;
  }
}

.promo-carousel__viewport {
  overflow: hidden;
  border-radius: 0;
}

@media (min-width: 720px) {
  .promo-carousel__viewport {
    border-radius: 18px;
  }
}

.promo-carousel__track {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  /* Tell the browser this element handles its own horizontal gesture (the
     JS touchstart/touchend swipe below) and only vertical panning is the
     browser's native job. Without this, mobile Safari/Chrome can hand a
     horizontal drag over to their own gesture handling (rubber-band
     scroll, edge-swipe-back near the left edge) before our touchend ever
     fires cleanly — the actual cause of swipe not registering on real
     touch devices even though the JS logic itself is correct. */
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  .promo-carousel__track {
    transition: none;
  }
}

/* One shared aspect-ratio per breakpoint, applied identically to every
   slide (Afterpay included) so the carousel never changes height while
   rotating. The supplied Yes We Deliver / Google artwork is exactly
   1200x300 (4:1) — desktop matches that exactly (zero letterboxing);
   mobile/tablet use a slightly taller ratio purely to give the
   HTML/CSS-built Afterpay slide enough room for its logo/text/dog without
   overlap, which leaves only a small, deliberately blended letterbox
   margin on Slides 2/3 (object-fit: contain below never crops them). */
.promo-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 2.6 / 1;
  position: relative;
  overflow: hidden;
  background: var(--lux-surface, #faf6f7);
}

@media (min-width: 600px) {
  .promo-carousel__slide {
    aspect-ratio: 3.2 / 1;
  }
}

@media (min-width: 900px) {
  .promo-carousel__slide {
    aspect-ratio: 4 / 1;
  }
}

.promo-carousel__img {
  width: 100%;
  height: 100%;
  /* contain, not cover — the whole point is that Slides 2/3 must never be
     cropped. At >=900px this is visually identical to cover anyway, since
     the container ratio matches the source images exactly there. */
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Carousel arrows — small, unobtrusive circular buttons, same visual
   language as the Gallery lightbox's nav buttons (css/lightbox.css). */
.promo-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  color: #111827;
  border: none;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.promo-carousel__arrow:hover {
  background: var(--lux-accent, #7a1528);
  color: #fff;
}
.promo-carousel__arrow--prev {
  left: 0.5rem;
}
.promo-carousel__arrow--next {
  right: 0.5rem;
}

/* Arrows are hidden at every breakpoint — the carousel is swipe/dot
   navigated only. Kept in the DOM (not removed) so assistive tech and the
   existing JS wiring are untouched; this is a purely visual hide. */
.promo-carousel__arrow--prev,
.promo-carousel__arrow--next {
  display: none;
}

.promo-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

/* Mobile: dots hidden too, so the carousel is purely touch-swipeable with
   no visible nav controls (same 719px mobile breakpoint used elsewhere in
   this file/lux.css). Autoplay (js/promo-carousel.js) is untouched. */
@media (max-width: 719px) {
  .promo-carousel__dots {
    display: none;
  }
}

.promo-carousel__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--lux-line, #ebe6e8);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.promo-carousel__dot.is-active {
  background: var(--lux-accent, #7a1528);
  transform: scale(1.25);
}

/* ── Slide 1 — Afterpay: official Bondi Mint background + unmodified
   official black wordmark, "Celebrate now / Pay later", balloon dog. Built
   from HTML/CSS (not a flattened image) specifically so it can reflow for
   mobile independently of the two supplied hero-image slides. ─────────── */
/* Base (<600px, ~2.6:1 — short and wide, not the old tall 4:3 stack): a
   single tight row. Small scale throughout so logo + two-line copy + dog
   all sit comfortably in a shallow banner with no overlap. */
.promo-slide-afterpay {
  width: 100%;
  height: 100%;
  background: #b2fce4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
  position: relative;
}

.promo-slide-afterpay__logo {
  height: 1rem;
  width: auto;
  flex-shrink: 0;
}

.promo-slide-afterpay__copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #08312a;
  text-align: left;
}

.promo-slide-afterpay__dog {
  width: 3.4rem;
  height: auto;
  flex-shrink: 0;
}

/* Tablet (600-899px, ~3.2:1) — its own tier, deliberately NOT inheriting
   desktop's absolute-positioned layout below: that layout assumes a much
   wider 4:1 frame, and reusing it here was exactly what made the logo,
   copy and dog overlap at tablet widths. A plain flow-based row (no
   absolute positioning) sizes itself to whatever width is actually
   available instead. */
@media (min-width: 600px) and (max-width: 899px) {
  .promo-slide-afterpay {
    gap: 1.5rem;
    padding: 0.75rem 1.75rem;
  }

  .promo-slide-afterpay__logo {
    height: 1.5rem;
  }

  .promo-slide-afterpay__copy {
    font-size: 1.3rem;
  }

  .promo-slide-afterpay__dog {
    width: 5rem;
  }
}

/* Desktop (>=900px, 4:1) — unchanged from the original, already-correct
   composition: logo pinned top-left, copy offset clear of it, dog given
   its own room on the right. */
@media (min-width: 900px) {
  .promo-slide-afterpay {
    justify-content: center;
    gap: 4rem;
    padding: 1.5rem 2.5rem;
  }

  .promo-slide-afterpay__logo {
    height: 1.9rem;
    position: absolute;
    top: 1.75rem;
    left: 2.5rem;
  }

  .promo-slide-afterpay__copy {
    font-size: 1.85rem;
    text-align: left;
    margin-left: 6rem;
  }

  .promo-slide-afterpay__dog {
    width: 9rem;
  }
}

@media (min-width: 900px) {
  .promo-slide-afterpay {
    gap: 4rem;
  }

  .promo-slide-afterpay__dog {
    width: 9rem;
  }
}