/* SAINT BONES — HOMEPAGE TEMPLATE (T-HOME)
 *
 * Authority: `Saint Bones Homepage V4 Unified.dc.html` and
 * `Saint Bones Mobile Homepage V4 Unified.dc.html` (DEC-003). Prototype CSS is
 * evidence, not source (DEC-009) — nothing here is copied from either artifact.
 *
 * WHAT THE FROZEN SYSTEM ALREADY OWNS, AND IS NOT RESTATED HERE
 * ------------------------------------------------------------
 * sb-layout.css      .sb-section (+ --sm/--lg/--inverse/--light/--ruled),
 *                    .sb-container, .sb-grid--collections, .sb-grid--facts,
 *                    .sb-split--52-48 and its 919px collapse, .sb-row,
 *                    the mobile gutter and the mobile section rhythm.
 * sb-foundation.css  .sb-hero .sb-h2 .sb-h3 .sb-h4 .sb-editorial .sb-body
 *                    .sb-label .sb-eyebrow .sb-eyebrow--marked .sb-nav-text
 *                    .sb-product-name, all three .sb-btn tiers including their
 *                    inverse-ground behaviour, .sb-media and its five ratios,
 *                    .sb-scrim / --band, .sb-rail, the media hover scale, the
 *                    focus ring, and the global reduced-motion reduction.
 *
 * This file adds page composition only. It introduces no colour, no type scale,
 * no shadow, no radius and no breakpoint.
 *
 * THE LOCAL VALUES, ALL OF THEM, AND WHY THEY ARE LOCAL
 * ----------------------------------------------------
 * Six lengths here are not tokens, because no canonical token expresses them:
 * the four full-bleed band heights, the Maison image floor, and the rail card
 * width. They are page-composition heights — how tall a photographic band
 * stands in this particular page — which the Design System deliberately does
 * not legislate (it tokenises rhythm and ratio, not band height). Every one is
 * read from the approved authorities, desktop and mobile. They are listed as
 * custom properties at the top of the file so they are countable rather than
 * scattered, and so a later page that needs the same band can see what it is
 * reusing.
 *
 * ONE RULE THAT MUST NOT BE BROKEN BY A LATER EDIT
 * -----------------------------------------------
 * No selector in this file may target .sb-header, .sb-nav, .sb-footer or their
 * descendants. The homepage selects the header's over-media state through the
 * component's own filter in front-page.php and the document ground through
 * `saintbones_ground_attribute()`. A page stylesheet reaching into global
 * chrome is how a shared component quietly acquires per-page variants.
 *
 * @package SaintBones
 */

.sb-home {
  /* Band heights, measured from the approved authorities. Desktop clamp first,
   * mobile exact value in the 767 block — the mobile page is separately
   * authored at 390px and is not the low end of a desktop clamp. */
  --sb-home-hero-h: 100vh;
  --sb-home-hero-min: 640px;
  --sb-home-band-feature-h: clamp(600px, 92vh, 960px);
  --sb-home-band-studio-h: clamp(460px, 74vh, 820px);
  --sb-home-band-atelier-h: clamp(520px, 86vh, 880px);
  --sb-home-maison-media-min: 62vh;
  --sb-home-rail-card: clamp(280px, 32vw, 460px);
}

/* ---------- MEDIA SLOTS ----------------------------------------------
 * `.sb-media` already supplies the frame and the loading plate. A bleed slot
 * is the same frame stretched behind a band; a pending slot is the same frame
 * with nothing in it yet.
 *
 * A pending frame gets no icon, no label, no diagonal, no substitute picture.
 * It is the system's media plate at the approved ratio and nothing more, so
 * the page reads as awaiting photography rather than as decorated with it.
 */
.sb-home-media--bleed {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* A frame that fills a layout cell rather than sitting behind one: it stays in
 * normal flow and takes its height from the cell, so it has no ratio either. */
.sb-home-media--fill {
  aspect-ratio: auto;
  height: 100%;
}

.sb-home-media--bleed > img,
.sb-home-media--fill > img {
  width: 100%;
  height: 100%;
}

/* SB-HOME-001B uses a responsive <picture> for the hero. Preserve the frozen
 * direct-child media behaviour without changing the shared Design System. */
.sb-home .sb-media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-home .sb-media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--sb-transition-media);
}

.sb-home-media--bleed > picture > img,
.sb-home-media--fill > picture > img {
  position: absolute;
  inset: 0;
}

/* Homepage interaction layers. The base image remains the complete no-script
 * presentation; the alternate layer exists only when Woo provides a verified
 * local secondary gallery image. */
.sb-home-media__layer {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.sb-home-media__layer > img,
.sb-home-media__layer > picture,
.sb-home-media__layer > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-home-media__layer--alternate {
  z-index: 1;
  opacity: 0;
  transition: opacity var(--sb-duration-standard) var(--sb-ease-standard);
}

.sb-home-media__layer--base {
  z-index: 0;
  transition: opacity var(--sb-duration-standard) var(--sb-ease-standard);
}

.sb-home-media__layer .sb-home-media__image {
  transition: transform var(--sb-duration-cinematic) var(--sb-ease-entrance);
}

@media (hover: hover) and (pointer: fine) {
  a:hover > .sb-media .sb-home-media__layer--alternate,
  a:focus-visible > .sb-media .sb-home-media__layer--alternate,
  .sb-media--zoom:hover .sb-home-media__layer--alternate {
    opacity: 1;
  }

  a:hover > .sb-media .sb-home-media__layer--base,
  a:focus-visible > .sb-media .sb-home-media__layer--base,
  .sb-media--zoom:hover .sb-home-media__layer--base {
    opacity: 0;
  }

  a:hover > .sb-media .sb-home-media__image,
  a:focus-visible > .sb-media .sb-home-media__image,
  .sb-media--zoom:hover .sb-home-media__image {
    transform: scale(var(--sb-media-hover-scale));
  }
}

/* Progressive enhancement: JavaScript adds `.sb-home-js` before observing
 * these nodes. Without it, no content is hidden and the page remains complete. */
.sb-home-js .sb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--sb-duration-cinematic) var(--sb-ease-entrance),
    transform var(--sb-duration-cinematic) var(--sb-ease-entrance);
}

.sb-home-js .sb-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance sequence: image fade, then the approved staggered content
 * stack. The final stage is the decorative scroll cue. */
@keyframes sb-home-hero-image-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sb-home-hero-rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.sb-home-js .sb-home-hero__media .sb-home-media__layer--base .sb-home-media__image {
  opacity: 0;
  animation: sb-home-hero-image-in 1.4s var(--sb-ease-entrance) both;
}

.sb-home-js .sb-home-hero__entrance {
  opacity: 0;
  animation: sb-home-hero-rise-in 1s var(--sb-ease-entrance) both;
}

.sb-home-js .sb-home-hero__eyebrow { animation-delay: .15s; }
.sb-home-js .sb-home-hero__title { animation-delay: .30s; }
.sb-home-js .sb-home-hero__lede { animation-delay: .45s; }
.sb-home-js .sb-home-hero__cta { animation-delay: .60s; }
.sb-home-js .sb-home-hero__scroll { animation-delay: .75s; }

a:hover > .sb-media > picture > img,
.sb-media--zoom:hover > picture > img {
  transform: scale(var(--sb-media-hover-scale));
}

@media (prefers-reduced-motion: reduce) {
	.sb-home .sb-media > picture > img {
		transform: none !important;
	}

	.sb-home-media__layer,
	.sb-home-media__layer--alternate,
	.sb-home-media__layer--base {
		transition: none !important;
	}

	.sb-home-media__layer .sb-home-media__image {
		transform: none !important;
	}

	.sb-home-js .sb-reveal,
	.sb-home-js .sb-reveal.is-visible,
	.sb-home-js .sb-home-hero__entrance,
	.sb-home-js .sb-home-hero__media .sb-home-media__layer--base .sb-home-media__image {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.sb-home-hero__scroll-line {
		animation: none !important;
	}
}

/* ---------- UNRESOLVED CALLS TO ACTION -------------------------------
 * No route in docs/ROUTE_MAP.md is APPROVED, so every CTA on this page renders
 * as a span (DEC-016). It keeps its approved appearance because it is approved
 * UI, but it must not behave like a control: no pointer, no hover inversion,
 * and it is not in the tab order because it is not focusable markup.
 */
.sb-home-cta--unresolved {
  cursor: default;
}

.sb-home-cta--unresolved:hover {
  background: transparent;
  color: inherit;
}

body[data-sb-ground="inverse"] .sb-btn--solid.sb-home-cta--unresolved:hover {
  background: var(--sb-color-text-inverse);
  border-color: var(--sb-color-text-inverse);
  color: var(--sb-color-bg-inverse);
}

/* ---------- 1 · HERO -------------------------------------------------
 * Full-viewport photograph, content pinned to the bottom edge and centred.
 * The header sits over it in its own --over-media state.
 */
.sb-home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--sb-home-hero-h);
  min-height: var(--sb-home-hero-min);
  /* The header is fixed-height chrome above a full-viewport band; without this
   * the hero's own box would start beneath it and push the page down by the
   * header height. */
  margin-top: calc(-1 * var(--sb-header-height-desktop));
  overflow: hidden;
}

.sb-home-hero__content {
  position: relative;
  z-index: var(--sb-layer-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-8);
  width: 100%;
  max-width: var(--sb-container-main);
  padding: 0 var(--sb-page-inline) var(--sb-space-20);
  text-align: center;
}

/* The one token whose own definition names this exact use: metal-350 is
 * commented "hero eyebrow over imagery" in sb-tokens.css. Every other eyebrow
 * over media on this page uses the semantic --over-media accent. */
.sb-home-hero__eyebrow {
  color: var(--sb-metal-350);
}

.sb-home-hero__title {
  max-width: var(--sb-measure-caption);
  color: var(--sb-color-text-inverse);
  text-wrap: balance;
}

.sb-home-hero__lede,
.sb-home-band__body,
.sb-home-card__description {
  color: var(--sb-color-text-inverse-secondary);
}

.sb-home-collections .sb-home-card__description {
  margin-top: var(--sb-space-4);
  color: var(--sb-color-text-muted);
}

.sb-home-hero__cta {
  margin-top: var(--sb-space-5);
}

/* Decorative scroll cue, desktop authority only. The line's own animation is
 * suppressed wholesale by the foundation's reduced-motion block. */
.sb-home-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-5);
  margin-top: var(--sb-space-7);
  font-size: var(--sb-fs-10);
  letter-spacing: var(--sb-ls-overline);
  text-transform: uppercase;
  color: var(--sb-color-text-inverse-label);
}

.sb-home-hero__scroll-line {
  width: var(--sb-border-hairline);
  height: var(--sb-space-22);
  background: currentColor;
  animation: sb-home-scroll 2.6s var(--sb-ease-standard) infinite;
}

@keyframes sb-home-scroll {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 2 · FEATURED WATCHES RAIL --------------------------------
 * `.sb-rail` supplies the scroll, snap and hidden scrollbar. The track is not
 * inside `.sb-container`, because the rail must bleed past the gutter and
 * scroll on: the gutter becomes the track's own inline padding instead.
 */
.sb-home-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sb-space-10);
  flex-wrap: wrap;
}

.sb-home-rail__tools {
  display: flex;
  align-items: center;
  gap: var(--sb-space-11);
}

.sb-home-rail__all {
  color: var(--sb-color-text-inverse-muted);
}

.sb-home-rail__arrows {
  display: flex;
  gap: var(--sb-space-4);
}

/* The rail controls ship `hidden` and are revealed by home.js, so a scriptless
 * page shows a rail that scrolls rather than controls that do nothing. An
 * author `display` declaration beats the user agent's `[hidden]` rule, so the
 * attribute has to be honoured explicitly or it would have no effect at all. */
.sb-home-rail__arrows[hidden],
.sb-home-rail__dots[hidden] {
  display: none;
}

.sb-home-rail__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sb-control-height-md);
  height: var(--sb-control-height-md);
  padding: 0;
  background: transparent;
  border: var(--sb-border-hairline) solid var(--sb-color-border-inverse-control);
  border-radius: var(--sb-radius-none);
  color: var(--sb-color-text-inverse);
  font-size: var(--sb-fs-14);
  cursor: pointer;
  transition: var(--sb-transition-control);
}

.sb-home-rail__arrow:hover {
  border-color: var(--sb-color-text-inverse);
}

.sb-home-rail__arrow[disabled] {
  border-color: var(--sb-color-border-inverse);
  color: var(--sb-color-text-disabled-inverse);
  cursor: not-allowed;
}

.sb-home-rail__track {
  gap: var(--sb-grid-gap);
  margin: 0;
  padding: var(--sb-block-y) var(--sb-page-inline) var(--sb-space-2);
  /* The track carries the page gutter itself, because the rail has to bleed
   * past it and keep scrolling. Without a matching scroll-padding, mandatory
   * snapping aligns the first card's edge to the container edge and parks the
   * rail one gutter in — the rail would load already scrolled, and "at the
   * start" would never be scrollLeft 0. */
  scroll-padding-inline: var(--sb-page-inline);
  list-style: none;
}

.sb-home-rail__item {
  flex: 0 0 var(--sb-home-rail-card);
}

.sb-home-rail__dots {
  display: flex;
  justify-content: center;
  gap: var(--sb-space-3);
  margin-top: var(--sb-space-12);
}

.sb-home-rail__dot {
  width: var(--sb-space-13);
  height: var(--sb-border-hairline);
  background: var(--sb-color-border-inverse-control);
  transition: var(--sb-transition-control);
}

.sb-home-rail__dot.is-current {
  background: var(--sb-color-text-inverse);
}

/* ---------- CARDS ----------------------------------------------------
 * Contract 8: media, collection label, product name, hairline, meta row. The
 * hairline stays even though the meta values are withheld — it is the card's
 * structure, not decoration attached to a price.
 */
.sb-home-card {
  display: block;
}

.sb-home-card__label {
  margin-top: var(--sb-space-10);
}

.sb-home-card__name {
  margin-top: var(--sb-space-4);
  color: var(--sb-color-text-inverse);
}

.sb-home-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sb-space-8);
  min-height: var(--sb-space-10);
  margin-top: var(--sb-space-6);
  padding-top: var(--sb-space-6);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse-strong);
  font-size: var(--sb-fs-13);
  color: var(--sb-color-text-inverse-muted);
}

.sb-home-card__cta {
  margin-left: auto;
  color: var(--sb-color-text-inverse);
}

/* ---------- 3 / 5 / 7 · FULL-BLEED BANDS -----------------------------
 * One primitive, three heights. Each band is a photograph with a content panel
 * over it; only the panel's anchoring differs.
 */
.sb-home-band {
  position: relative;
  overflow: hidden;
}

.sb-home-band--feature { height: var(--sb-home-band-feature-h); }
.sb-home-band--studio { height: var(--sb-home-band-studio-h); }
.sb-home-band--atelier { height: var(--sb-home-band-atelier-h); }

.sb-home-band__panel {
  position: absolute;
  inset: 0;
  z-index: var(--sb-layer-raised);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sb-space-11);
  max-width: var(--sb-measure-body);
  padding: var(--sb-section-y-lg) var(--sb-page-inline);
  /* Horizontal legibility scrim. The Design System tokenises two vertical
   * overlays and no horizontal one, so this is composed from the same
   * --sb-alpha-scrim channel triplet the system builds its own overlays from.
   * It is a new gradient, not a new colour. */
  background: linear-gradient(
    90deg,
    rgba(var(--sb-alpha-scrim), 0.88) 0%,
    rgba(var(--sb-alpha-scrim), 0.86) 46%,
    rgba(var(--sb-alpha-scrim), 0.72) 68%,
    rgba(var(--sb-alpha-scrim), 0) 100%
  );
}

/* The Studio and Atelier bands read their legibility from `.sb-scrim`, which
 * is already in the markup, so their panels carry no gradient of their own. */
.sb-home-band__panel--bottom,
.sb-home-band__panel--centre {
  justify-content: flex-end;
  max-width: none;
  padding-block: var(--sb-section-y-lg);
  background: none;
}

.sb-home-band__panel--centre {
  align-items: center;
  text-align: center;
}

.sb-home-band__eyebrow {
  color: var(--sb-color-accent-metal-over-media);
}

.sb-home-band__title {
  color: var(--sb-color-text-inverse);
}

/* The Studio band is one destination in both authorities: the whole surface is
 * the link, and the CTA inside it must not become a second one. */
.sb-home-band--studio .sb-home-band__cta {
  pointer-events: none;
}

/* ---------- 4 · COLLECTIONS ------------------------------------------
 * The page's second and last ground (contract 13).
 *
 * A FINDING THE NEXT LIGHT-ON-DARK PAGE WILL ALSO HIT
 * --------------------------------------------------
 * `.sb-section--light` (sb-layout.css) flips a section's ground and text, but
 * the foundation's inverse treatments are written as
 * `body[data-sb-ground="inverse"] <selector>` — a document-level descendant
 * rule that a section class cannot switch off. So inside a light section on a
 * dark page, `.sb-media` still paints the dark plate and `.sb-row` still draws
 * the dark hairline, both of which are invisible against Bone.
 *
 * The two are restored here to the light semantics the approved section shows.
 * These are the system's own light tokens, not new values, and the selector is
 * scoped to this section so nothing else is touched. Raised as a Design System
 * finding in docs/TASK_QUEUE.md rather than fixed in the frozen files.
 */
.sb-home-collections .sb-media,
body[data-sb-ground="inverse"] .sb-home-collections .sb-media {
  background: var(--sb-color-surface-media);
}

.sb-home-collections .sb-row,
body[data-sb-ground="inverse"] .sb-home-collections .sb-row {
  border-bottom-color: var(--sb-color-border);
}

.sb-home-collections__cards {
  margin-top: var(--sb-block-y);
  list-style: none;
}

.sb-home-card--collection .sb-home-card__name {
  margin-top: var(--sb-space-8);
  color: var(--sb-color-text);
}

.sb-home-collections__index {
  margin-top: var(--sb-section-y-sm);
  border-top: var(--sb-border-hairline) solid var(--sb-color-border-strong);
  /* The index is a hairline list laid across columns, so it takes the facts
   * grid's column rule but none of its row gap — the rows' own hairlines are
   * the separation. */
  gap: 0 var(--sb-space-22);
  list-style: none;
}

/* `.sb-row` already supplies flex, space-between, the 44px floor, the 18px
 * block padding and the bottom hairline. Only the cursor and alignment change,
 * because these rows are links and labels rather than accordion buttons. */
.sb-home-index__row {
  align-items: baseline;
  cursor: inherit;
}

.sb-home-index__arrow {
  font-size: var(--sb-fs-14);
  color: var(--sb-color-text-label);
}

/* ---------- 6 · MAISON SPLIT -----------------------------------------
 * `.sb-split--52-48` and its 919px collapse are frozen. The image comes first
 * in source order and stays first when the split collapses (contract 13).
 */
.sb-home-maison {
  gap: 0;
  background: var(--sb-color-bg-inverse);
}

.sb-home-maison__media {
  min-height: var(--sb-home-maison-media-min);
  aspect-ratio: auto;
}

.sb-home-maison__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sb-space-12);
  padding: var(--sb-section-y-lg) var(--sb-page-inline);
}

.sb-home-maison__eyebrow {
  color: var(--sb-color-accent-metal);
}

.sb-home-maison__title {
  color: var(--sb-color-text-inverse);
}

/* ---------- 8 · SERVICE STRIP ----------------------------------------
 * `.sb-section--ruled` supplies both hairlines. Three of the four approved
 * items are withheld (see the template), so this grid legitimately renders
 * fewer members than the artifact draws.
 */
.sb-home-services .sb-grid {
  list-style: none;
}

.sb-home-services__label {
  /* The approved strip sets these labels in the metal accent rather than the
   * label grey `.sb-label` supplies. */
  color: var(--sb-color-accent-metal);
}

.sb-home-services__value {
  margin-top: var(--sb-space-6);
  color: var(--sb-color-text-inverse-secondary);
}

/* ---------- BEHAVIOURAL BOUNDARIES -----------------------------------
 * Only the two frozen boundaries this page actually needs are mirrored: 768
 * (grid / mobile model) and 1040 (navigation, for the header height the hero
 * has to offset). 920 is handled entirely by sb-layout.css — the split and the
 * collections grid collapse there on their own and need nothing from this
 * file. No new breakpoint is introduced.
 */
@media (max-width: 1039px) {
  .sb-home-hero {
    margin-top: calc(-1 * var(--sb-header-height-mobile));
  }
}

@media (max-width: 767px) {
  .sb-home {
    /* Mobile band heights are the exact values of the mobile authority, not
     * the low end of the desktop clamps. */
    --sb-home-hero-h: 600px;
    --sb-home-hero-min: 600px;
    --sb-home-band-feature-h: 520px;
    --sb-home-band-studio-h: 520px;
    --sb-home-band-atelier-h: 540px;
    --sb-home-maison-media-min: 360px;
    --sb-home-rail-card: 268px;
  }

  /* `.sb-hero` has no mobile closure of its own — the system's named mobile
   * heroes are 76 / 66 / 52px statements, and this page's hero is none of
   * them. Both homepage authorities set it at the display-mobile size, so the
   * token is consumed directly rather than a fourth hero variant invented. */
  .sb-home-hero__title {
    font-size: var(--sb-type-display-mobile);
    line-height: var(--sb-lh-tight);
    max-width: none;
  }

  .sb-home-hero__media img {
    object-position: 52% 34% !important;
  }

  .sb-home-hero__content {
    gap: var(--sb-space-6);
    padding-inline: var(--sb-page-inline-mobile);
    padding-bottom: var(--sb-space-18);
  }

  /* The mobile authority draws every call to action as a full-width block.
   * `.sb-btn--block` is the frozen expression of that. */
  .sb-home-hero__cta,
  .sb-home-band__cta {
    width: 100%;
  }

  .sb-home-hero__scroll {
    display: none; /* Absent from the mobile authority. */
  }

  .sb-home-rail__track {
    gap: var(--sb-grid-gap-mobile);
    padding-inline: var(--sb-page-inline-mobile);
    scroll-padding-inline: var(--sb-page-inline-mobile);
  }

  /* The mobile authority replaces the arrows with position dashes. */
  .sb-home-rail__arrows {
    display: none;
  }

  .sb-home-band__panel {
    max-width: none;
    justify-content: flex-end;
    padding: var(--sb-section-y-mobile-lg) var(--sb-page-inline-mobile);
    background: none;
  }

  .sb-home-band__panel--bottom,
  .sb-home-band__panel--centre {
    padding-inline: var(--sb-page-inline-mobile);
  }

  .sb-home-maison__panel {
    padding: var(--sb-section-y-mobile) var(--sb-page-inline-mobile);
  }

  /* One column of hairline rows, as drawn. */
  .sb-home-collections__index {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  /* Dashes are the mobile presentation of the rail position; above the grid
   * boundary the arrows are. */
  .sb-home-rail__dots {
    display: none;
  }
}