/** Shopify CDN: Minification failed

Line 1318:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   Home Hero Mosaic
   Half-width carousel beside 2-3 promotional tiles.
   See docs/home-hero/ for the spec this implements.
   ========================================================================== */

.home-hero {
  --hh-gap: 12px;
  --hh-tile-gap: 16px;
  --hh-radius: 24px;
  --hh-edge: 24px;
  --hh-height: 560px;
  --hh-inset: 48px;
  --hh-tile-inset: 32px;

  --hh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hh-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --hh-ease-plate: cubic-bezier(0.16, 1, 0.3, 1);
  --hh-out: 260ms;
  --hh-in: 520ms;
  --hh-in-media: 720ms;
  --hh-settle: 380ms;
  --hh-surface-fade: 400ms;

  position: relative;
  overflow: hidden;
}

.home-hero__inner {
  padding-inline: var(--hh-edge);
}

.home-hero--contained .home-hero__inner {
  max-width: var(--page-width, 1400px);
  margin-inline: auto;
  padding-inline: 5rem;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.home-hero__grid {
  display: grid;
  gap: var(--hh-gap);
  height: var(--hh-height);
}

/* `--hh-cols` is written inline by the section, already ordered left to right
   for the chosen carousel position, so the track list needs no mirror rule
   here. The fallbacks are what the section shipped with, and cover a stale
   render where the property is missing. */
.home-hero__grid[data-layout='stack'] {
  grid-template-columns: var(--hh-cols, 1fr 1fr);
}

.home-hero__grid[data-layout='mosaic'] {
  grid-template-columns: var(--hh-cols, 40fr 20fr 40fr);
}

.home-hero__grid[data-layout='solo'] {
  grid-template-columns: 1fr;
}

/* Column placement. `-2 / -1` resolves to the last column in both the
   two-column and three-column layouts, so one rule covers every variant.

   The row is pinned explicitly too: with `carousel_position: left` the
   columns run opposite to DOM order, and sparse auto-placement will not walk
   backwards along a row — it would drop each item onto a new one. */
.home-hero__grid > * {
  grid-row: 1;
}

.home-hero__grid[data-carousel='right'] .home-hero__tiles,
.home-hero__grid[data-carousel='right'] .home-hero__search {
  grid-column: 1;
}

.home-hero__grid[data-carousel] .home-hero__vtile {
  grid-column: 2;
}

.home-hero__grid[data-carousel='right'] .home-hero__carousel {
  grid-column: -2 / -1;
}

.home-hero__grid[data-carousel='left'] .home-hero__carousel {
  grid-column: 1;
}

.home-hero__grid[data-carousel='left'] .home-hero__tiles,
.home-hero__grid[data-carousel='left'] .home-hero__search {
  grid-column: -2 / -1;
}

.home-hero__tiles,
.home-hero__vtile {
  display: flex;
  flex-direction: column;
  gap: var(--hh-tile-gap);
  min-width: 0;
}

/* The tall tile is the narrowest column by design and the admin sets its
   share as a percentage, so on a small desktop window a low setting can drive
   it below the width its own copy needs. This floor is the guard — it raises
   the track's minimum and takes the difference from the two `fr` columns
   either side rather than letting the tile collapse into a sliver. */
.home-hero__vtile {
  min-width: 140px;
}

/* Tiles divide the column height evenly, whatever the count. */
.home-hero__tiles > .home-hero-tile,
.home-hero__vtile > .home-hero-tile {
  flex: 1 1 0;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   Cards — shared shell
   -------------------------------------------------------------------------- */

.home-hero-card {
  position: relative;
  border-radius: var(--hh-radius);
  overflow: hidden;
  min-width: 0;
  isolation: isolate;
}

.home-hero__wave {
  position: absolute;
  top: 22px;
  left: 26px;
  width: 240px;
  height: 120px;
  opacity: 0.12;
  pointer-events: none;
  color: currentcolor;
}

.home-hero-tile .home-hero__wave {
  top: 16px;
  left: 20px;
  width: 140px;
  height: 40px;
  opacity: 0.14;
}

/* --------------------------------------------------------------------------
   Surfaces
   Locked background / text / accent / button pairs. There is deliberately no
   free colour picker: identical button fill and label is what broke the
   collection sidebar banners.
   -------------------------------------------------------------------------- */

[data-surface='navy'] {
  --hh-bg: #04125b;
  --hh-text: #ffffff;
  --hh-accent: #ffcf31;
  --hh-btn-bg: #ffcf31;
  --hh-btn-label: #04125b;
  --hh-btn-bg-hover: #ffffff;
  --hh-plate: rgba(255, 207, 49, 0.18);
}

[data-surface='blue'] {
  --hh-bg: #3550e9;
  --hh-text: #ffffff;
  --hh-accent: #ffd44c;
  --hh-btn-bg: #ffd44c;
  --hh-btn-label: #04125b;
  --hh-btn-bg-hover: #ffffff;
  --hh-plate: rgba(255, 212, 76, 0.18);
}

[data-surface='sky'] {
  --hh-bg: #4d6af4;
  --hh-text: #ffffff;
  --hh-accent: #ffcf31;
  --hh-btn-bg: #ffffff;
  --hh-btn-label: #04125b;
  --hh-btn-bg-hover: #ffcf31;
  --hh-plate: rgba(255, 255, 255, 0.18);
}

[data-surface='mint'] {
  --hh-bg: #c4ecdd;
  --hh-text: #04125b;
  --hh-accent: #3550e9;
  --hh-btn-bg: #04125b;
  --hh-btn-label: #ffffff;
  --hh-btn-bg-hover: #3550e9;
  --hh-plate: rgba(53, 80, 233, 0.18);
}

[data-surface='yellow'] {
  --hh-bg: #ffcf31;
  --hh-text: #04125b;
  --hh-accent: #3550e9;
  --hh-btn-bg: #04125b;
  --hh-btn-label: #ffffff;
  --hh-btn-bg-hover: #3550e9;
  --hh-plate: rgba(53, 80, 233, 0.18);
}

[data-surface='powder'] {
  --hh-bg: #d9e1f8;
  --hh-text: #04125b;
  --hh-accent: #3550e9;
  --hh-btn-bg: #3550e9;
  --hh-btn-label: #ffffff;
  --hh-btn-bg-hover: #04125b;
  --hh-plate: rgba(53, 80, 233, 0.18);
}

[data-surface='red'] {
  --hh-bg: #db001a;
  --hh-text: #ffffff;
  --hh-accent: #ffcf31;
  --hh-btn-bg: #ffcf31;
  --hh-btn-label: #04125b;
  --hh-btn-bg-hover: #ffffff;
  --hh-plate: rgba(255, 207, 49, 0.18);
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.home-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  color: var(--hh-text);
}

/* Colour is set explicitly on every text element rather than inherited from
   `.home-hero__copy`. A global `h2 { color: … }` rule elsewhere on the store
   beats inheritance and was rendering every heading navy-on-navy. Inheritance
   is not defensible against theme and app CSS we do not control. */
.home-hero__eyebrow {
  color: var(--hh-text);
  font-family: 'Helvetica Neue Condensed Bold', 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}

.home-hero__heading {
  color: var(--hh-text);
  font-family: 'Helvetica Neue Condensed Black', 'Helvetica Neue', helvetica, arial, sans-serif;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.home-hero__heading strong,
.home-hero__heading b {
  color: var(--hh-accent);
  font-weight: inherit;
}

.home-hero__heading p {
  margin: 0;
}

.home-hero__body {
  color: var(--hh-text);
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  max-width: 32ch;
  margin: 0;
}

/* The search's submit is the hero button under another class name — it comes
   from the shared form markup, so it joins the selector rather than restating
   the rule. Two classes deep so it wins against the standalone section's own
   `.parts-search-bar__submit` whenever both stylesheets are on the page. */
.home-hero__btn,
.home-hero__search .parts-search-bar__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 32px;
  border-radius: 16px;
  background: var(--hh-btn-bg);
  color: var(--hh-btn-label);
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 240ms var(--hh-ease-out), color 240ms var(--hh-ease-out);
}

.home-hero__btn:hover,
.home-hero__btn:focus-visible,
.home-hero__search .parts-search-bar__submit:hover,
.home-hero__search .parts-search-bar__submit:focus-visible {
  background: var(--hh-btn-bg-hover);
  color: var(--hh-btn-label);
}

/* `<button>` carries UA chrome the anchors never had. */
.home-hero__search .parts-search-bar__submit {
  border: none;
  cursor: pointer;
}

/* Disabled only while the API call that fills the selects is in flight. */
.home-hero__search .parts-search-bar__submit:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Text link — the tiles' call to action. The carousel keeps the filled button
   so there is one primary ask in the row rather than four.

   Underline offset and weight follow the theme's `.link` in base.css; the
   uppercase Helvetica and the arrow follow `.link-with-icon`. Colour is
   `--hh-text`, NOT `--hh-accent`: at 14px this is normal-size text needing
   4.5:1, and the accent only clears that on navy, mint and powder. The
   underline carries the affordance instead, which works on all seven
   surfaces. */
.home-hero__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--hh-text);
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}

/* The label owns the underline so the rule stops at the text and does not run
   under the arrow. */
.home-hero__link-label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
  transition: text-decoration-thickness 240ms var(--hh-ease-out);
}

.home-hero__link .icon {
  width: 15px;
  height: auto;
  flex: none;
  transition: transform 240ms var(--hh-ease-out);
}

/* Hover lives on the tile, not the span — the whole card is the target. */
.home-hero-tile:hover .home-hero__link-label,
.home-hero-tile:focus-visible .home-hero__link-label {
  text-decoration-thickness: 3px;
}

.home-hero-tile:hover .home-hero__link .icon,
.home-hero-tile:focus-visible .home-hero__link .icon {
  transform: translateX(4px);
}

.home-hero :focus-visible {
  outline: 2px solid var(--hh-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Carousel
   -------------------------------------------------------------------------- */

.home-hero__carousel {
  display: block;
  position: relative;
  background: #04125b;
  /* The carousel is 50% of the column in the stacked layout but only 40% in
     the mosaic. Type and the copy/media split key off its real width rather
     than the viewport, so both layouts stay legible without a layout flag. */
  container-type: inline-size;
}

.hh-carousel__viewport {
  position: absolute;
  inset: 0;
  /* Vertical page scroll is never captured by the horizontal drag handler. */
  touch-action: pan-y;
}

.hh-slide {
  position: absolute;
  inset: 0;
  background: var(--hh-bg);
  color: var(--hh-text);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hh-surface-fade) linear, visibility 0s linear var(--hh-surface-fade);
}

.hh-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hh-surface-fade) linear;
}

/* The outgoing slide during a programmatic change, and the incoming
   neighbour during a finger drag. Both need to be painted. */
.hh-slide.is-leaving,
.hh-slide.is-peek {
  visibility: visible;
}

.hh-slide.is-peek {
  transition: none;
}

.hh-slide__copy {
  position: absolute;
  top: var(--hh-inset);
  bottom: var(--hh-inset);
  width: 52%;
  /* Copy and media overlap by design; the words always win. */
  z-index: 1;
}

.hh-slide__copy .home-hero__heading {
  font-size: clamp(30px, 8cqw, 58px);
}

[data-carousel='right'] .hh-slide__copy {
  left: var(--hh-inset);
}

[data-carousel='left'] .hh-slide__copy {
  right: var(--hh-inset);
}

/* Media: an unrotated positioning box. The plate inside it carries the tilt,
   the product does not — so the product reads upright against a tilted field
   and the drag transform never fights the rotation. */
.hh-slide__media {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 52%;
}

[data-carousel='right'] .hh-slide__media {
  right: -6%;
}

[data-carousel='left'] .hh-slide__media {
  left: -6%;
}

.hh-slide__plate {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background: var(--hh-plate);
  transform: rotate(-4deg);
}

/* Sized to sit inside the plate rather than swamp it. The plate is rotated
   and the product is not, so at 100% the product's corners still clear the
   tilted edge — the break-out reads without the product outgrowing its
   field. Tall cut-outs (the SilkGuard bucket) were the failure case. */
.hh-slide__image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.hh-slide__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-carousel='right'] .hh-slide__photo {
  object-position: 78% 50%;
}

[data-carousel='left'] .hh-slide__photo {
  object-position: 22% 50%;
}

/* Drawn as a pseudo-element, not an empty `<div class="scrim">`. A
   third-party app stylesheet on this store sets `display: none` on the
   element (its sheet is CORS-blocked, so the rule can't be read or
   overridden reliably) — a pseudo-element gives an app nothing to target.
   `::after` rather than `::before` so it paints over the photo but still
   under the copy, which carries z-index 1. */
.hh-slide[data-layout='image']::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Heavy on purpose. The copy column runs to ~59% of the frame, so the scrim
   has to still be near-opaque there or white type lands on sunlit water.
   This is the cost of photography behind live text — see 01-design-spec §7. */
[data-carousel='right'] .hh-slide[data-layout='image']::after {
  background: linear-gradient(
    90deg,
    rgba(4, 18, 91, 0.94) 0%,
    rgba(4, 18, 91, 0.9) 46%,
    rgba(4, 18, 91, 0.72) 66%,
    rgba(4, 18, 91, 0.25) 84%,
    rgba(4, 18, 91, 0) 97%
  );
}

[data-carousel='left'] .hh-slide[data-layout='image']::after {
  background: linear-gradient(
    270deg,
    rgba(4, 18, 91, 0.94) 0%,
    rgba(4, 18, 91, 0.9) 46%,
    rgba(4, 18, 91, 0.72) 66%,
    rgba(4, 18, 91, 0.25) 84%,
    rgba(4, 18, 91, 0) 97%
  );
}

/* Safety net for any future photo whose bright side lands under the copy. */
.hh-slide[data-layout='image'] .hh-slide__copy {
  text-shadow: 0 1px 12px rgba(4, 18, 91, 0.55);
}

.hh-slide[data-layout='image'] .home-hero__btn {
  text-shadow: none;
}

/* Narrow carousel — the mosaic's 40% column, or a small desktop window.
   Copy takes more of the frame and the media gives it back, so the heading
   stops running under the product. */
@container (max-width: 640px) {
  .hh-slide__copy {
    width: 54%;
    gap: 14px;
    left: 32px;
  }

  [data-carousel='left'] .hh-slide__copy {
    left: auto;
    right: 32px;
  }

  .hh-slide__copy .home-hero__heading {
    font-size: clamp(28px, 7cqw, 48px);
  }

  .hh-slide__media {
    width: 44%;
  }

  [data-carousel='right'] .hh-slide__media {
    right: -6%;
  }

  [data-carousel='left'] .hh-slide__media {
    left: -6%;
  }

  .hh-slide__body {
    font-size: 16px;
  }

  .hh-carousel__pagination {
    left: 32px;
  }

  [data-carousel='left'] .hh-carousel__pagination {
    left: auto;
    right: 32px;
  }
}

/* --------------------------------------------------------------------------
   Pagination + progress
   -------------------------------------------------------------------------- */

.hh-carousel__pagination {
  position: absolute;
  bottom: 40px;
  display: flex;
  gap: 18px;
  z-index: 2;
}

[data-carousel='right'] .hh-carousel__pagination {
  left: var(--hh-inset);
}

[data-carousel='left'] .hh-carousel__pagination {
  right: var(--hh-inset);
}

.hh-carousel__dot {
  position: relative;
  padding: 4px 0 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--hh-pag-color, #ffffff);
  opacity: 0.45;
  transition: opacity 300ms var(--hh-ease-out);
}

.hh-carousel__dot[aria-current='true'] {
  opacity: 1;
}

/* Progress bar: a 4px rule across the foot of the card, per the design
   bundle. It is the only cue that autoplay is about to move. */
/* No track. A static 4px band across the foot of the card gets clipped by
   the 24px corner radius and reads as a drop shadow curling up the corners,
   which is what it looked like on the light surfaces. Only the moving fill
   is drawn, so at rest there is nothing there at all. */
.hh-carousel__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  pointer-events: none;
}

.hh-carousel__progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--hh-progress-fill, #ffcf31);
  transform: scaleX(var(--hh-progress, 0));
  transform-origin: left;
}

.hh-carousel__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Motion — layered, staggered arrival. Never a flat unit cross-fade.
   -------------------------------------------------------------------------- */

@keyframes hh-copy-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hh-copy-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes hh-media-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--hh-dir, 1) * -32px)) scale(1.06);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hh-media-out {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: translateX(calc(var(--hh-dir, 1) * 24px)) scale(0.94);
  }
}

.hh-slide[data-enter] .hh-slide__copy > * {
  animation: hh-copy-in var(--hh-in) var(--hh-ease-out) both;
}

.hh-slide[data-enter] .hh-slide__copy > :nth-child(1) {
  animation-delay: 220ms;
}

.hh-slide[data-enter] .hh-slide__copy > :nth-child(2) {
  animation-delay: 290ms;
}

.hh-slide[data-enter] .hh-slide__copy > :nth-child(3) {
  animation-delay: 360ms;
}

.hh-slide[data-enter] .hh-slide__copy > :nth-child(4) {
  animation-delay: 430ms;
}

.hh-slide[data-enter] .hh-slide__media,
.hh-slide[data-enter] .hh-slide__photo {
  animation: hh-media-in var(--hh-in-media) var(--hh-ease-plate) 140ms both;
}

.hh-slide[data-leave] .hh-slide__copy > * {
  animation: hh-copy-out var(--hh-out) var(--hh-ease-in) both;
}

.hh-slide[data-leave] .hh-slide__media,
.hh-slide[data-leave] .hh-slide__photo {
  animation: hh-media-out 300ms var(--hh-ease-in) both;
}

/* Direct manipulation: 1:1 with the finger, no choreography. */
.hh-carousel.is-dragging .hh-slide {
  transition: none;
}

.hh-carousel.is-settling .hh-slide {
  transition: transform var(--hh-settle) var(--hh-ease-out),
    opacity var(--hh-settle) linear;
}

/* --------------------------------------------------------------------------
   Tiles
   -------------------------------------------------------------------------- */

.home-hero-tile {
  display: block;
  background: var(--hh-bg);
  color: var(--hh-text);
  text-decoration: none;
  /* Drives the type ramp below — one tile creative has to read at 272px,
     176px and the tall mosaic slot without hardcoding per-layout sizes. */
  container-type: size;
}

.home-hero-tile__copy {
  position: absolute;
  left: var(--hh-tile-inset);
  top: var(--hh-tile-inset);
  bottom: var(--hh-tile-inset);
  width: 58%;
  gap: 10px;
}

/* The link needs more air than the eyebrow→heading step, or the card reads
   as one undifferentiated block of type. A little more than the button had,
   since an underline sits closer to its neighbours than a filled pill did. */
.home-hero-tile__copy .home-hero__link {
  margin-top: 10px;
}

.home-hero-tile__copy .home-hero__heading {
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: 0.5px;
}

/* `<img>` is a replaced element: given `height: auto` with both `top` and
   `bottom`, the intrinsic aspect ratio wins and `bottom` is dropped, so the
   product hangs off the top of the card instead of centring. The box has to
   be definite in both axes and `object-fit: contain` does the centring. */
.home-hero-tile__image {
  position: absolute;
  right: -4%;
  top: 6%;
  bottom: auto;
  height: 88%;
  width: 40%;
  object-fit: contain;
  transition: transform 240ms var(--hh-ease-out);
}

.home-hero-tile:hover .home-hero-tile__image {
  transform: scale(1.03);
}

/* No image: copy gets the full card. */
.home-hero-tile[data-has-image='false'] .home-hero-tile__copy {
  width: auto;
  right: var(--hh-tile-inset);
}

/* The mosaic's tall middle tile — a portrait column on desktop.
   Copy top, product standing on the floor of the card.

   The copy starts below the wave rather than at the tile inset. On the
   horizontal tiles the copy is centred in the card and clears the wave on its
   own; here it is top-anchored into the same corner, and at the shared inset
   the eyebrow lands straight across the wave with only the crest showing.
   The tall tile has the room to spare — the band above the product is the
   emptiest part of the card. */
.home-hero-tile[data-orientation='v'] .home-hero-tile__copy {
  top: calc(var(--hh-tile-inset) + 38px);
  right: var(--hh-tile-inset);
  bottom: auto;
  width: auto;
  justify-content: flex-start;
}

/* Without a product there is no floor to stand anything on, so the copy
   centres instead of stranding the lower half of the card empty. */
.home-hero-tile[data-orientation='v'][data-has-image='false'] .home-hero-tile__copy {
  bottom: var(--hh-tile-inset);
  justify-content: center;
}

/* Explicit width, not a left/right pair: `<img>` is a replaced element and
   would take its intrinsic width and hug the left edge instead of centring. */
.home-hero-tile[data-orientation='v'] .home-hero-tile__image {
  left: -6%;
  right: auto;
  top: auto;
  bottom: -2%;
  width: 112%;
  height: 58%;
}

.home-hero-tile[data-orientation='v'] .home-hero-tile__copy .home-hero__heading {
  font-size: 30px;
}

/* Short tiles: the 3-stack config and anything the merchandiser squeezes.
   Sized off the card, not off the layout name, so it can't be out of sync. */
@container (max-height: 210px) {
  .home-hero-tile__copy {
    top: 24px;
    bottom: 24px;
    left: 24px;
    gap: 6px;
  }

  .home-hero-tile__copy .home-hero__link {
    margin-top: 8px;
  }

  .home-hero-tile__copy .home-hero__heading {
    font-size: 26px;
  }

  .home-hero-tile__copy .home-hero__eyebrow {
    font-size: 13px;
  }

  .home-hero-tile .home-hero__link {
    font-size: 13px;
    gap: 7px;
  }

  .home-hero-tile .home-hero__link .icon {
    width: 14px;
  }
}

@container (max-height: 160px) {
  .home-hero-tile__copy .home-hero__eyebrow {
    display: none;
  }

  .home-hero-tile__copy .home-hero__heading {
    font-size: 22px;
  }
}

@container (max-width: 330px) {
  .home-hero-tile__copy .home-hero__heading {
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   Parts search
   Takes the stacked-tile column. The markup is `parts-search-bar-form`, shared
   with the standalone Parts Search Bar section, but the styling here is
   complete rather than a set of overrides: `section-parts-search-bar.css` is
   loaded by that section, and on a homepage that does not also run it these
   controls would otherwise fall back to browser chrome.

   Everything is scoped under `.home-hero__search`, two classes deep, so when
   both sections ARE on one page these still win over the single-class rules
   in the other stylesheet.

   The standalone version is a wide horizontal bar. This column is roughly a
   third of the row, so the whole form stacks instead.
   -------------------------------------------------------------------------- */

.home-hero__search {
  /* Drives both the wave's box and, on mobile, the top pad that clears it. */
  --hh-search-wave-h: 90px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: var(--hh-inset);
  background: var(--hh-bg);
  color: var(--hh-text);
}

.home-hero__search .home-hero__wave {
  top: 20px;
  left: var(--hh-inset);
  width: calc(var(--hh-search-wave-h) * 2);
  height: var(--hh-search-wave-h);
}

.home-hero-search__copy {
  gap: 12px;
}

/* Not `cqw` like the slide heading — this card is not a container, and the
   search has to leave room for four controls under it either way. */
.home-hero-search__heading {
  font-size: clamp(28px, 3.2vw, 42px);
}

.home-hero__search .parts-search-bar__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* "Search for:" — the title above already says what this is. */
.home-hero__search .parts-search-bar__label {
  display: none;
}

.home-hero__search .parts-search-bar__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Positioning context for the select's caret. */
.home-hero__search .parts-search-bar__field {
  position: relative;
  flex: none;
}

/* Underlined fields rather than filled inputs: a filled control on a filled
   card needs a third colour, and the surface pairs deliberately only carry
   two. `color-mix` softens the rule to about a third; browsers without it
   fall back to the solid `currentcolor` on the line above, which is heavier
   than intended but never illegible. */
.home-hero__search .parts-search-bar__select,
.home-hero__search .parts-search-bar__text-input {
  width: 100%;
  /* Stated rather than inherited from the theme's global reset: the padding
     here is on the same box as the 100% width, and a content-box fallback
     would push the underline past the card. */
  box-sizing: border-box;
  margin: 0;
  padding: 12px 36px 12px 2px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid currentcolor;
  border-bottom-color: color-mix(in srgb, currentcolor 38%, transparent);
  outline: none;
  color: var(--hh-text);
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: border-bottom-color 200ms var(--hh-ease-out);
}

.home-hero__search .parts-search-bar__text-input {
  cursor: text;
}

.home-hero__search .parts-search-bar__select:focus,
.home-hero__search .parts-search-bar__text-input:focus,
.home-hero__search .parts-search-bar__select:hover,
.home-hero__search .parts-search-bar__text-input:hover {
  border-bottom-color: currentcolor;
}

.home-hero__search .parts-search-bar__text-input::placeholder {
  color: var(--hh-text);
  opacity: 0.72;
}

.home-hero__search .parts-search-bar__select-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
  color: var(--hh-text);
}

/* The option list is drawn by the OS against its own background, so it cannot
   inherit the surface's text colour and stay readable. */
.home-hero__search .parts-search-bar__select option {
  color: #04125b;
  background: #ffffff;
}

/* Flex so the button and the error message both shrink to their content —
   as a block the error would run the full width of the card. */
.home-hero__search .parts-search-bar__submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  margin-top: 4px;
}

/* Static, not absolute — inside a card with `overflow: hidden` the original
   `top: 100%` would be clipped rather than shown. */
.home-hero__search .parts-search-bar__error {
  position: static;
  align-self: flex-start;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: 8px;
  /* Inverting the surface pair is the one combination guaranteed to be
     legible on all seven, without introducing a red that fights navy. */
  background: var(--hh-text);
  color: var(--hh-bg);
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Theme-editor guard
   -------------------------------------------------------------------------- */

.home-hero__notice {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #ffcf31;
  color: #04125b;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1199px) {
  .home-hero {
    --hh-height: 480px;
    --hh-inset: 36px;
    --hh-tile-inset: 24px;
  }
}

/* Tablet and below: one column, carousel always first. */
@media screen and (max-width: 989px) {
  .home-hero {
    --hh-height: auto;
  }

  .home-hero__grid,
  .home-hero__grid[data-layout='mosaic'],
  .home-hero__grid[data-layout='stack'] {
    grid-template-columns: 1fr;
    height: auto;
  }

  .home-hero__grid > * {
    grid-row: auto;
  }

  /* The attribute selector is carried over from the desktop placement rules
     so these win the specificity match rather than losing it silently. */
  .home-hero__grid[data-carousel] .home-hero__carousel {
    grid-column: 1;
    order: 1;
    aspect-ratio: 3 / 2;
  }

  .home-hero__grid[data-carousel] .home-hero__tiles,
  .home-hero__grid[data-carousel] .home-hero__search {
    grid-column: 1;
    order: 2;
  }

  /* The card is content-sized here rather than filling a fixed-height row, so
     `justify-content: center` no longer opens the gap the wave was sitting
     in — the copy would start at the padding edge, straight over it. The pad
     is the wave's own geometry plus a step, so the two cannot drift apart. */
  .home-hero__search {
    --hh-search-wave-h: 68px;

    justify-content: flex-start;
    padding-top: calc(20px + var(--hh-search-wave-h) + 20px);
  }

  .home-hero__grid[data-carousel] .home-hero__vtile {
    grid-column: 1;
    order: 3;
  }

  /* Mosaic on mobile reads horizontal → tall → horizontal. The tall tile is
     in its own wrapper, so the tiles wrapper is dissolved with
     `display: contents` and all three are ordered as siblings of the grid. */
  .home-hero__grid[data-layout='mosaic'] .home-hero__tiles {
    display: contents;
  }

  .home-hero__grid[data-layout='mosaic'] .home-hero__tiles > .home-hero-tile {
    grid-column: 1;
    grid-row: auto;
  }

  .home-hero__grid[data-layout='mosaic'] .home-hero__tiles > .home-hero-tile:first-child {
    order: 2;
  }

  .home-hero__grid[data-layout='mosaic'] .home-hero__vtile {
    order: 3;
  }

  .home-hero__grid[data-layout='mosaic'] .home-hero__tiles > .home-hero-tile:last-child {
    order: 4;
  }

  /* The column no longer has a fixed height to divide, so tiles size
     themselves from their ratio instead of sharing free space. */
  .home-hero__tiles > .home-hero-tile,
  .home-hero__vtile > .home-hero-tile {
    flex: 0 0 auto;
  }

  .home-hero-tile {
    aspect-ratio: 2.4 / 1;
  }

  /* The tall tile keeps its portrait composition on mobile — copy above,
     product on the floor — so it needs a squarer frame than its neighbours
     rather than being flattened into another 2.4:1 strip. */
  .home-hero-tile[data-orientation='v'] {
    aspect-ratio: 1.2 / 1;
  }

/* Phone: the slide splits vertically instead of horizontally — copy across
   the top, product filling the lower half and bleeding off the outer edge. */
@media screen and (max-width: 749px) {
  .home-hero {
    --hh-edge: 8px;
    --hh-radius: 24px;
    --hh-inset: 24px;
    --hh-tile-inset: 20px;
  }

  /* Contained mode bounds the block with a 5rem gutter, which is 80px — over
     a fifth of the viewport each side on a phone. Below this breakpoint it
     falls back to the same edge token as full width. */
  .home-hero--contained .home-hero__inner {
    padding-inline: var(--hh-edge);
  }

  .home-hero__grid[data-carousel] .home-hero__carousel {
    aspect-ratio: 4 / 5;
  }

  .home-hero-tile {
    aspect-ratio: 2 / 1;
  }

  .hh-slide__copy,
  [data-carousel='right'] .hh-slide__copy,
  [data-carousel='left'] .hh-slide__copy {
    left: var(--hh-inset);
    right: var(--hh-inset);
    top: var(--hh-inset);
    bottom: auto;
    width: auto;
    gap: 12px;
    justify-content: flex-start;
  }

  .hh-slide__copy .home-hero__heading,
  .hh-slide__copy .home-hero__heading {
    font-size: clamp(26px, 8vw, 36px);
  }

  .hh-slide__body {
    display: none;
  }

  /* Media clears the tallest copy stack the character limits allow —
     eyebrow, a three-line heading and the button. */
  .hh-slide__media,
  [data-carousel='right'] .hh-slide__media,
  [data-carousel='left'] .hh-slide__media {
    left: 6%;
    right: -6%;
    top: 46%;
    bottom: 5%;
    width: auto;
  }

  [data-carousel='right'] .hh-slide__photo,
  [data-carousel='left'] .hh-slide__photo {
    object-position: 50% 50%;
  }

  [data-carousel='right'] .hh-slide[data-layout='image']::after,
  [data-carousel='left'] .hh-slide[data-layout='image']::after {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 91, 0.88) 0%,
      rgba(4, 18, 91, 0.72) 45%,
      rgba(4, 18, 91, 0.2) 78%,
      rgba(4, 18, 91, 0) 100%
    );
  }

  .hh-carousel__pagination,
  [data-carousel='right'] .hh-carousel__pagination,
  [data-carousel='left'] .hh-carousel__pagination {
    left: var(--hh-inset);
    right: auto;
    bottom: 24px;
    gap: 14px;
  }

  .home-hero-tile__copy .home-hero__heading {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — the same feature, rendered without movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home-hero {
    --hh-surface-fade: 200ms;
    --hh-settle: 0ms;
  }

  .hh-slide[data-enter] .hh-slide__copy > *,
  .hh-slide[data-leave] .hh-slide__copy > *,
  .hh-slide[data-enter] .hh-slide__media,
  .hh-slide[data-leave] .hh-slide__media,
  .hh-slide[data-enter] .hh-slide__photo,
  .hh-slide[data-leave] .hh-slide__photo {
    animation: none;
  }

  .hh-carousel__progress {
    display: none;
  }

  .home-hero-tile:hover .home-hero-tile__image {
    transform: none;
  }
}