/** Shopify CDN: Minification failed

Line 16:36 Expected identifier but found whitespace
Line 28:0 All "@import" rules must come first

**/
.kc-topbar__progress {
  margin-top: 10px !important;
}

.product-form-buttons.spacing-style.product-form-buttons--stacked .button:not(.button-secondary,.button-unstyled){
  width: 100% !important;
}

resource-image.collection-card__image.spacing-style.border-style,
resource-image.collection-cardimage. spacing-style. border-style,
.resource-card__media {
border-radius: 12px !important;
}

.menu-drawer__promo.menu-drawer__promo--top.menu-drawer__animated-element {
padding-top: 0 !important;
margin-top: 0 !important;
}


/*-------- TYPEKIT (Forma DJR Banner) --------*/
@import url("https://use.typekit.net/bqj2xvg.css");

  /*-------- KC ANIMATED SQUIGGLE (unified: tour / on-the-road / blogs / merch) --------
     One class for every squiggle. The path is empty in markup and drawn + animated
     by custom.js. Width overridable per section via --kc-squiggle-width. */
  .kc-squiggle {
    display: block;
    width: var(--kc-squiggle-width, min(70px, 22vw));
    height: 16px;
    margin-top: 16px;
    color: var(--coral);
    overflow: visible;
  }
  .kc-squiggle path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

/*-------- PALETTE (from KC WP original.html) --------*/
:root {
  /* Ocean -> Navy (sampled from the Silver Sands Marina hero) */
  --ocean-50:  #eef2f8;
  --ocean-100: #d6def0;
  --ocean-200: #aab9da;
  --ocean-300: #7389b8;
  --ocean-400: #4c6396;
  --ocean-500: #324a78;
  --ocean-600: #243a60;
  --ocean-700: #1e3a59;
  --ocean-800: #14263f;
  --ocean-900: #0b1830;

  /* Sand */
  --sand-50:  #fbf6ec;
  --sand-100: #f4ead2;
  --sand-200: #e9d6a6;
  --sand-300: #dcbe78;

  /* Accents */
  --coral:    #E8896E;
  --sunset:   #F0B775;
  --hibiscus: #D4654A;
  --gold:     #E8B96A;
  --neon:     #2bb8e6; /* marina-sign cyan — used sparingly */
  --ink:      var(--ocean-800);
  --cream:    var(--sand-50);
}

/*-------- HEADING FONT OVERRIDE (Forma DJR Banner) --------*/
:root {
  --font-heading--family: "forma-djr-banner", sans-serif;
  --font-h1--family: "forma-djr-banner", sans-serif;
  --font-h2--family: "forma-djr-banner", sans-serif;
  --font-h3--family: "forma-djr-banner", sans-serif;
  --font-h4--family: "forma-djr-banner", sans-serif;
  --font-h5--family: "forma-djr-banner", sans-serif;
  --font-h6--family: "forma-djr-banner", sans-serif;
  --font-subheading--family: "forma-djr-banner", sans-serif;
  --font-accent--family: "forma-djr-banner", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "forma-djr-banner", sans-serif;
}

/*-------- BODY COLORS --------*/
body {
  background: var(--sand-100);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
}

/*-------- KC SECTION EYEBROW (unified: kc-tour / kc-social-pulse / kc-blogs) --------*/
.kc-eyebrow {
  font-family: var(--font-subheading--family, var(--font-body--family));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kc-eyebrow-color, var(--color-primary, currentColor));
}

/*-------- LINKS (avoid default browser blue) --------*/
a {
  color: var(--hibiscus);
}
/* a:hover {
  color: var(--coral);
} */

/*-------- NEON ACCENT (marina-sign cyan) --------
   Used sparingly: focus rings glow like the sign. Also an accessibility win. */
:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

/*-------- KC CARD VARIANT SELECTOR --------
   Variant select + "One Size" treatment on every product card.
   Theme-neutral: uses the active color scheme's tokens. */
.kc-card-variant-selector {
  width: 100%;
  margin: 10px 0;
}
.kc-card-variant-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background-color: rgb(var(--color-foreground-rgb) / 0.04);
  color: var(--color-foreground);
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  border-radius: var(--style-border-radius-inputs, 4px);
  padding: 10px 36px 10px 14px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kc-card-variant-select:hover { border-color: rgb(var(--color-foreground-rgb) / 0.4); }
.kc-card-variant-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.kc-card-variant-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}
.kc-card-variant-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 10px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kc-card-variant-pill input { position: absolute; opacity: 0; pointer-events: none; }
.kc-card-variant-pill:has(input:checked) {
  background: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}
.kc-card-variant-pill.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/*-------- Product cards: no hover-up lift --------*/
/* The global card-hover-effect-lift translates the whole card up on hover, which
   shifts the buy buttons away from the cursor mid-click. Kill the lift on product
   cards only (collection cards keep theirs). */
body.card-hover-effect-lift .product-card:hover {
  transform: none;
}

/*-------- PRODUCT CARD SPACING — uniform across ALL grids (Naveen 2026-06-16) --------*/
/* One vertical rhythm between image, title, price and buttons so the image->title
   gap matches the title->price gap (it was a bare 4px flex gap = too tight). The
   buy-buttons row had an extra margin-top that broke the rhythm; zero it inside cards
   so the single gap governs everything. Applies to every product card (shop grids,
   collection, search, recommendations, cart upsell). Tune --kc-card-gap to taste. */
.product-card .product-card__content {
  --kc-card-gap: 20px;
  gap: var(--kc-card-gap);
}

.product-card .product-card__content .product-form-buttons {
  margin-top: 0;
}

/* Roughly double that gap vertically BETWEEN cards, every grid. Row gap only, so
   multi-column layouts keep their column widths. Tune --kc-card-row-gap to taste. */
.product-grid {
  row-gap: var(--kc-card-row-gap, 40px);
}

.resource-list--grid {
  --resource-list-row-gap: var(--kc-card-row-gap, 40px);
}

/* Spacing for the product card form actions row */
.product-form-buttons { margin-top: 14px; }
.product-form-buttons button { width: auto !important; }

/* Action row items stretch to a shared height so variant + quantity align. */
.product-card .product-form-buttons {
  align-items: stretch;
}

/* Pills keep their own full-width row; the dropdown sits inline next to
   quantity (frees up the row, per Naveen/Peter). */
.product-card .product-form-buttons .kc-card-variant-selector--pills {
  flex: 1 0 100%;
}
.product-card .product-form-buttons .kc-card-variant-selector--dropdown {
  flex: 1 1 6rem;
  min-width: 6rem;
  margin: 0;
}
.product-card .kc-card-variant-selector--dropdown .kc-card-variant-select {
  width: 100%;
  height: 100%;
  margin: 0;
}
/* With a dropdown present, PRE-ORDER drops to its own row beneath
   variant + quantity. Products without variants keep qty + PRE-ORDER inline.
   Target the flex child that WRAPS the button (the button itself isn't the
   flex item), else the row never reflows and the dropdown collapses. */
.product-card .product-form-buttons:has(.kc-card-variant-selector--dropdown) > *:has(.add-to-cart-button),
.product-card .product-form-buttons:has(.kc-card-variant-selector--dropdown) > .add-to-cart-button {
  flex: 1 0 100%;
}

/*-------- Quantity stepper fill (product cards) --------*/
/* Cards use a cream fill instead of white to match the variant selector. The
   layout (button widths, end spacing, radius, no input border) matches every
   other quantity selector for consistency. */
.product-card .product-form-buttons .quantity-selector {
  flex: 0 0 auto;
  background-color: rgb(var(--color-foreground-rgb) / 0.04);
}
.product-card .product-form-buttons .quantity-selector:hover {
  background-color: rgb(var(--color-foreground-rgb) / 0.07);
}

/*-------- Ambient wave on PRE-ORDER / add-to-cart buttons --------*/
/* A slow, low-contrast sheen drifts across the button to draw the eye.
   No scale/pulse. Uses currentColor so it adapts to filled or outline buttons.
   Disabled for reduced-motion users. */
.add-to-cart-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.add-to-cart-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, currentColor 14%, transparent) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: kc-button-wave 5s ease-in-out infinite;
}

@keyframes kc-button-wave {
  0%   { background-position: 160% 0; }
  60%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .add-to-cart-button::after { animation: none; }
}

/*-------- Bolder announcement buttons --------*/
/* Hero PRE-ORDER / PRE-SAVE and the album/video split section
   (PRE-SAVE NOW / WATCH NOW). Heavier text + thicker outline so the
   CTAs read stronger over the photography. Scoped by stable block ids. */
.button-secondary--button_xj8MUL,
.button-secondary--button_QUkEFX,
.button-secondary--button_BVYhi6,
.button-secondary--button_Wg4DHT {
  --button-border-width: 2px;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.28s var(--ease-out-cubic, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    --button-border-color 0.2s ease;
  will-change: transform;
}

/* Big, unmistakable hover: fill with cream, flip text to navy, lift + shadow. */
.button-secondary--button_xj8MUL:hover,
.button-secondary--button_QUkEFX:hover,
.button-secondary--button_BVYhi6:hover,
.button-secondary--button_Wg4DHT:hover,
.button-secondary--button_xj8MUL:focus-visible,
.button-secondary--button_QUkEFX:focus-visible,
.button-secondary--button_BVYhi6:focus-visible,
.button-secondary--button_Wg4DHT:focus-visible {
  --button-color: #14263f;
  --button-background-color: #f4ead2;
  --button-border-color: #f4ead2;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .button-secondary--button_xj8MUL:hover,
  .button-secondary--button_QUkEFX:hover,
  .button-secondary--button_BVYhi6:hover,
  .button-secondary--button_Wg4DHT:hover {
    transform: none;
  }
}

/*-------- Mega menu promo column --------*/
/* Editable promo (image + copy + CTA) occupies the right 2 grid columns; the
   link list reserves them so there's no dead space in between. */
.mega-menu__promo {
  grid-column: span 2 / -1;
  display: flex;
  align-items: flex-start;
}

/* Equal-width mega menu columns: 4 category columns + the promo, all the same.
   Stock builds a 6-col grid and gives the promo 2 cols (double-width). With our
   4 categories, a 5-col grid + a 1-col promo makes every column equal. Desktop
   only; tablet/mobile keep the stock layout. (Assumes 4 category columns.) */
@media screen and (min-width: 990px) {
  .mega-menu--has-promo .mega-menu__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mega-menu--has-promo .mega-menu__promo {
    grid-column: span 1 / -1;
  }
}

/* Mobile drawer: offset content below the sticky KC topbar so the close
   button (and everything else) clears it. --kc-topbar-h is set in custom.js. */
.menu-drawer-container .menu-drawer,
.menu-drawer-container .menu-drawer__submenu {
  padding-top: var(--kc-topbar-h, 60px);
}

/* Mobile nav: SHOP is the only parent item (has the caret), so its row sits a
   few px taller than the plain links, leaving a gap below it. Pull just SHOP up
   to even out the spacing. Targets SHOP's own ID so no other links are touched.
   (Tied to the menu handle "shop" — update if the SHOP item is ever renamed.) */
@media screen and (max-width: 749px) {
  #HeaderDrawer-shop {
    margin-bottom: -6px;
  }
}

/* Promo block at the bottom of the mobile drawer. */
.menu-drawer__promo {
  margin-top: var(--padding-md);
  padding: var(--padding-lg) var(--drawer-padding) var(--padding-2xl);
}
.menu-drawer__promo .mega-menu__promo {
  grid-column: auto;
  width: 100%;
}
.mega-menu__promo-link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-decoration: none;
  color: var(--color-foreground);
}

/*-------- Promo countdown: small white timer, centered on the image top --------*/
/* Mirrors the mystery-drop countdown (same [data-kc-drop] ticker in custom.js),
   just smaller + white so it sits cleanly over the promo photo. Desktop + mobile. */
.mega-menu__promo-media {
  position: relative;
}
.kc-promo-countdown {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.55);
  pointer-events: none;
}
.kc-promo-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.kc-promo-countdown__unit b {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kc-promo-countdown__unit i {
  margin-top: 2px;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.mega-menu__promo-media {
  display: block;
  overflow: hidden;
  border-radius: var(--product-corner-radius, 12px);
}
.mega-menu__promo-img {
  display: block;
  width: 100%;
  /* Height is CSS-driven (object-fit: cover crops the source to fill), so the
     uploaded image's own ratio doesn't change the box. Shorter ratio + a hard
     max-height cap keep the SHOP dropdown compact. Lower max-height to shrink more. */
  aspect-ratio: 16 / 9;
  max-height: 150px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.mega-menu__promo-link:hover .mega-menu__promo-img {
  transform: scale(1.03);
}
.mega-menu__promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.mega-menu__promo-heading {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.mega-menu__promo-text {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.75;
}
.mega-menu__promo-btn {
  margin-top: 4px;
}

/*-------- Mystery drop teaser card --------*/
/* A blurred scrim covers the whole card, obscuring the real product behind it,
   with a countdown + Notify Me on top. Driven by a future custom.drop_date. */
.product-card.kc-mystery {
  position: relative;
}

.kc-mystery-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px 18px 30px;
  text-align: center;
  border-radius: var(--product-corner-radius, 12px);
  /* Gradient tint: lighter over the shirt (top) so the silhouette reads, darker
     over the title/price/sizes (bottom) so they can't be read through. One flat
     opacity can't do both (light = title bleeds; dark = shirt disappears). */
  background: linear-gradient(
    to bottom,
    rgb(var(--color-foreground-rgb) / 0.5) 0%,
    rgb(var(--color-foreground-rgb) / 0.52) 40%,
    rgb(var(--color-foreground-rgb) / 0.92) 60%,
    rgb(var(--color-foreground-rgb) / 0.92) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
}

.kc-mystery-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
}

.kc-mystery-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.kc-mystery-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}

.kc-countdown {
  display: flex;
  gap: 10px;
}

.kc-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
}

.kc-cd-unit b {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
  font-variant-numeric: tabular-nums;
}

.kc-cd-unit i {
  font-style: normal;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-top: 5px;
  color: #fff;
}

.kc-notify {
  pointer-events: auto;
  cursor: pointer;
}

/* High-contrast Notify Me on the dark mystery card: cream fill + navy text,
   coral fill on hover (matches the Coming Soon badge). */
.kc-mystery-layer .kc-notify {
  background: rgb(var(--color-background-rgb));
  color: rgb(var(--color-foreground-rgb));
  border: 0;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.kc-mystery-layer .kc-notify:hover,
.kc-mystery-layer .kc-notify:focus-visible {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* The whole mystery card is clickable (opens the notify popup). */
.product-card.kc-mystery,
.product-card.kc-mystery .product-card__link {
  cursor: pointer;
}

/*-------- MYSTERY DROP CARDS: hard-obscure (transform-proof) --------
   The hover tilt (custom.js) puts a transform + will-change on the card, which
   disables the scrim's backdrop-filter, so the title/price became readable and
   the pre-order button clickable through the teaser. Fix: blur the image
   directly (survives the transform) and fully hide + disable the real product
   content. Only the teaser layer (countdown + Notify) stays live. */
.product-card.kc-mystery .card-gallery {
  filter: blur(16px) saturate(1.05);
  transform: scale(1.12); /* push the blurred edge past the rounded corners */
  pointer-events: none;
}
.product-card.kc-mystery > .product-card__content > *:not(.card-gallery):not(.kc-mystery-layer),
.product-card.kc-mystery .card-gallery .quick-add,
.product-card.kc-mystery .card-gallery .product-badges {
  visibility: hidden !important;
}
.product-card.kc-mystery .product-card__link {
  pointer-events: none !important;
}

/*-------- NOTIFY-ME POPUP (placeholder) --------
   Cream surface + navy text; navy filled button with white text. */
.kc-notify-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  /* flex-start + margin:auto on the dialog centers it when there's room, but lets
     a tall form top-align and the overlay scroll so the whole form stays reachable
     on short/narrow screens (page scroll is locked while the modal is open). */
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.kc-notify-modal[hidden] {
  display: none;
}

.kc-notify-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgb(11 24 48 / 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.kc-notify-modal__dialog {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 460px;
  padding: 38px 32px 32px;
  border-radius: 16px;
  background: #fbf6ec;
  color: #14263f;
  box-shadow: 0 24px 60px rgb(11 24 48 / 0.45);
  animation: kc-notify-in 0.28s ease;
}

@keyframes kc-notify-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.kc-notify-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #d4654a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.kc-notify-modal__close:hover {
  opacity: 1;
}

.kc-notify-modal__title {
  margin: 0 0 10px;
  font-family: var(--font-primary--family, inherit);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  color: #14263f;
}

.kc-notify-modal__text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(20 38 63 / 0.8);
}
/* Disclaimer / fine print (the <small> under the popup forms): smaller + tighter.
   Scoped to <small> so the body copy ("Join Kenny's mailing list...") is unchanged. */
.kc-notify-modal__text small {
  display: block;
  font-size: 11px;
  line-height: 1.3;
}

/* Extra class specificity (.kc-notify-modal …) to beat base.css's
   input:not([type=checkbox]) rule, which otherwise forces an opaque
   input background and border color. */
.kc-notify-modal .kc-notify-modal__input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgb(20 38 63 / 0.55);
  border-radius: 999px;
  background: transparent;
  color: #14263f;
  /* 16px keeps iOS Safari from auto-zooming the page when the field is focused. */
  font-size: 16px;
}

.kc-notify-modal .kc-notify-modal__input::placeholder {
  color: rgb(20 38 63 / 0.6);
}

.kc-notify-modal .kc-notify-modal__input--phone {
  margin-top: 10px;
}

/* First / last name share a row above the email field */
.kc-notify-modal__row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.kc-notify-modal__row .kc-notify-modal__input {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

@media screen and (max-width: 480px) {
  .kc-notify-modal__row {
    flex-direction: column;
  }
}

.kc-notify-modal .kc-notify-modal__input--error {
  border-color: #d4654a;
  box-shadow: 0 0 0 2px rgb(212 101 74 / 0.4);
}

.kc-notify-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 2px 20px;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(20 38 63 / 0.72);
}

.kc-notify-modal__check input {
  margin-top: 1px;
  accent-color: #d4654a;
}

/* Primary (filled) button matching the site's button typography (paragraph
   font, theme text-case, no extra tracking): navy fill with white text. */
.kc-notify-modal__submit {
  width: 100%;
  padding: var(--button-padding-block, 1.2rem) var(--button-padding-inline, 2.4rem);
  border: none;
  border-radius: var(--style-border-radius-buttons-primary, 999px);
  background: #14263f;
  color: #ffffff;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: 700;
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--button-text-case-primary, uppercase);
  letter-spacing: normal;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kc-notify-modal__submit:hover {
  background: #d4654a;
  color: #ffffff;
  transform: translateY(-2px);
}

.kc-notify-modal__success {
  text-align: center;
  padding: 8px 0;
}

.kc-notify-modal__success .kc-notify-modal__text {
  margin-bottom: 0;
}

.kc-notify-modal__check-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #14263f;
  color: #ffffff;
  font-size: 28px;
  line-height: 56px;
  text-align: center;
}

/* No Shoes Nation logo on the success state */
.kc-notify-modal__logo {
  display: block;
  width: 140px;
  max-width: 50%;
  height: auto;
  margin: 0 auto 16px;
}

/* Optional birthday capture on the success state */
.kc-notify-modal__bday {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgb(20 38 63 / 0.15);
  text-align: left;
}

.kc-notify-modal__bday-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(20 38 63 / 0.72);
}

.kc-notify-modal__bday-row {
  display: flex;
  gap: 10px;
}

.kc-notify-modal__bday-row .kc-notify-modal__bday-input {
  flex: 1 1 auto;
  min-width: 0;
}

.kc-notify-modal__bday-save {
  flex: 0 0 auto;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: #14263f;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.kc-notify-modal__bday-save:hover {
  background: #d4654a;
}

.kc-notify-modal__bday-thanks {
  margin: 0;
  font-size: 14px;
  color: rgb(20 38 63 / 0.8);
}

/* Narrow screens: stack the date field and button so neither gets squeezed */
@media screen and (max-width: 480px) {
  .kc-notify-modal__bday-row {
    flex-direction: column;
    align-items: stretch;
  }
  .kc-notify-modal__bday-row .kc-notify-modal__bday-save {
    width: 100%;
    padding: 14px 20px;
  }
}

/*-------- Mystery drop: locked product page gate --------*/
.kc-pdp-lock-pos {
  position: relative;
}

.kc-pdp-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgb(var(--color-foreground-rgb) / 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

/* Inner band sticks in view so the CTA stays above the fold on a tall page. */
.kc-pdp-lock__inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.kc-pdp-lock__title {
  font-size: 2rem;
}

.kc-pdp-lock__sub {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
}

.kc-pdp-lock .kc-mystery-badge {
  position: static;
  margin-bottom: 4px;
}

.kc-pdp-lock .kc-cd-unit {
  min-width: 64px;
}

.kc-pdp-lock .kc-cd-unit b {
  font-size: 2.2rem;
}

.kc-pdp-lock .kc-notify {
  margin-top: 6px;
  padding-inline: 44px;
}



/*-------- Nav hover states (gold underline) --------*/
/* Top-level nav: gold underline grows in from the left on hover/focus/active.
   The underline hugs the text by sitting inside the title's inline padding. */
.menu-list__link-title {
  position: relative;
}
.menu-list__link-title::before {
  content: "";
  position: absolute;
  left: calc(var(--gap-xl) / 2);
  right: calc(var(--gap-xl) / 2);
  bottom: -3px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease-out-cubic, ease);
  pointer-events: none;
}
[slot='overflow'] .menu-list__link-title::before {
  left: 0;
  right: 0;
}
.menu-list__list-item:where(:hover, :focus-within) .menu-list__link-title::before,
.menu-list__link--active .menu-list__link-title::before {
  transform: scaleX(1);
}

/* Mega menu links + column headings: gold underline grows across the text. */
.mega-menu__link {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.25s var(--ease-out-cubic, ease), color 0.2s ease;
}
.mega-menu__link:where(:hover, :focus-visible) {
  background-size: 100% 2px;
}
/* Headings sit a touch higher so the underline hugs the cap height */
.mega-menu__link--parent {
  background-position: 0 calc(100% - 2px);
}

/*-------- SHOP SUBMENU: serif category headers (match footer headings) --------*/
/* The category labels (Silver Sands Marina, Apparel, ...) read too close to the
   child links beneath them (both uppercase sans). Give the parents the "sentinel"
   serif + Title Case so they act as section titles, like the footer "Shop" /
   "Explore" headings (which get sentinel via the global h1-h6/.h1-.h6 rule).
   NOTE: --font-heading--family is remapped to the sans forma-djr-banner here, so
   we name the serif directly. Covers desktop mega menu + mobile drawer submenu. */
.mega-menu .mega-menu__link--parent,
.menu-drawer .menu-drawer__menu-item--parent {
  font-family: "sentinel", sans-serif;
  font-style: normal;
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  color: var(--color-foreground);
  text-transform: none;
  letter-spacing: normal;
}
.mega-menu .mega-menu__link--parent:hover,
.menu-drawer .menu-drawer__menu-item--parent:hover {
  color: var(--color-foreground);
}

/* Subcategory links: drop the uppercase and match the footer link treatment (sans,
   Title Case) so the header/link hierarchy reads like the footer. Bumped to 16px
   (see footer override below) for a touch more legibility, menu-only. */
.mega-menu .mega-menu__link:not(.mega-menu__link--parent),
.menu-drawer .menu-drawer__menu-item--child {
  font-size: 16px;
  line-height: var(--font-paragraph--line-height);
  text-transform: none;
  letter-spacing: normal;
}

/* Footer menu links: bump to 16px without touching the site-wide paragraph size. */
.footer-content .menu__item a {
  font-size: 16px;
}

/* The old ALL-CAPS labels had no descenders, so the stock `overflow: hidden` on
   the drawer menu text never showed. Now that the labels are Title Case, that clip
   cuts off y/g/p descenders. These are short labels (wrap-text handles long ones),
   so let them render fully. */
.menu-drawer .menu-drawer__menu-item-text,
.mega-menu .mega-menu__link {
  overflow: visible;
}

/*-------- SHOP SUBMENU: "Shop All" view-all link --------*/
/* Sits above the first category; links to the same place as SHOP (/collections)
   so a caret-tap can still reach the full shop. Gold underline + offset (the
   hover look), with a little breathing room around it. */
.kc-submenu-shopall-item {
  grid-column: 1 / -1;
  margin-block: var(--padding-sm) var(--padding-lg);
}
.kc-submenu-shopall .menu-drawer__menu-item-text {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}


/*-------- Eric's additions  --------*/
/* Grit Overlay */
#fixed-noise-overlay {
    /* Opacities are variable-driven so custom.js can soften them over
       specific sections (Split Showcase + Social Pulse). Defaults preserved. */
    opacity: var(--grit-noise-opacity, 0.15);
    transition: opacity 0.5s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-position: 50%;
    background-repeat: repeat;
    background-size: 249px;
    background-attachment: scroll;
    position: fixed;
    inset: 0;
    z-index: 3;
    /* 100% (not 100vw/100vh): 100vw includes the scrollbar width, so it overflowed
       the content area by ~15px on any page with a vertical scrollbar, causing a
       slight horizontal scrollbar. inset:0 + 100% fills the viewport correctly. */
    height: 100%;
    width: 100%;
}

/* Paint the noise gif only on desktop. The URL lives in the --grit-noise-image
   var (set inline in theme.liquid); referencing it here inside a min-width query
   means mobile never matches and never fetches the 146KB gif. */
@media (min-width: 750px) {
    #fixed-noise-overlay {
        background-image: var(--grit-noise-image);
    }
}

#fixed-noise-overlay video {
    opacity: var(--grit-smoke-opacity, 0.4);
    transition: opacity 0.5s ease;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

/*-------- Stop slight horizontal scroll site-wide --------*/
/* Edge-bleed carousels (kc-tour-photos/videos, kc-past-tours) use
   width: calc(50% + 50vw) to run tiles off the right screen edge, and 50vw/100vw
   include the scrollbar width — both overshoot the content area by a few px and
   add a faint horizontal scrollbar (notably on /pages/tour and /blogs/news).
   Clip horizontal overflow on the body. `clip` (not `hidden`) does NOT create a
   scroll container, so position:sticky / the sticky header keep working. */
body {
  overflow-x: clip;
}

/* KC Top Bar */
.kc-topbar--sticky {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kc-topbar--sticky.is-scrolled {
  background: #14263fa6 !important;
}

/* KC Social Pulse */
.kc-social-pulse__socials a:hover {
  transform: translateY(-3px) !important;
}

/* KC Blog */
.kc-blogs__month-day {
  text-transform: uppercase;
}

/* Quick Add Button */
.add-to-cart-text__content {
  text-transform: uppercase;
}
.add-to-cart-icon {
  display: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "sentinel", sans-serif !important;
}

/*-------- NEWS CARDS: date as grey eyebrow, above the title --------*/
/* eyebrow styling on the date */
.blog-post-card__content .blog-post-details {
  font-family: var(--font-subheading--family, var(--font-body--family));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* keep it grey/subdued (eyebrow look, but not orange) */
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}
/* move the date's flex item above the title (handles Horizon's block wrapper) */
.blog-post-card__content > .blog-post-details,
.blog-post-card__content > *:has(.blog-post-details) {
  order: -1;
  margin-block-end: 0.5rem;
}

/*-------- NEWS GRID: 12px image radius + top crop + homepage "lift" card hover --------*/
.blog-post-card__image-container .blog-post-card__image {
  border-radius: 12px;
  /* align to top so Kenny's head doesn't get cropped on wide images */
  object-position: top center;
}
/* mobile: taller thumbnails (the default crop is too wide for the portrait-ish assets) */
@media (max-width: 749px) {
  .blog-post-card__image-container .blog-post-card__image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
/* desktop: nudge thumbnails a touch taller (cards scale proportionally from this) */
@media (min-width: 750px) {
  .blog-post-card__image--large {
    --blog-post-card-img-height: 470px;
  }
}

/*-------- NEWS YEAR FILTER: condensed, scrollable eyebrow pills --------*/
.kc-year-filter {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-block-end: 2rem;
  padding-block-end: 2px;
}
.kc-year-filter::-webkit-scrollbar {
  display: none;
}
.kc-year-pill {
  flex: 0 0 auto;
  font-family: var(--font-subheading--family, var(--font-body--family));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.3);
  color: var(--color-foreground);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kc-year-pill:hover {
  border-color: var(--color-foreground);
}
.kc-year-pill.is-active {
  background-color: var(--color-foreground);
  color: var(--color-background);
  border-color: var(--color-foreground);
}
/* mobile: fade the right edge to signal there are more years to scroll to */
@media (max-width: 749px) {
  .kc-year-filter {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
}
.blog-post-card {
  transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease);
}
@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .blog-post-card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount, 8px)));
  }
}

/*-------- ARTICLE PAGE: title + featured image match body width, 12px image radius --------*/
.section-content-wrapper:has(.blog-post-content) > header,
.blog-post-featured-image {
  max-width: var(--normal-content-width);
  margin-inline: auto;
  width: 100%;
}
.blog-post-featured-image .blog-post-featured-image__image,
.blog-post-content img {
  border-radius: 12px;
}

/*-------- NEWS CARD TITLE: sans heading font to match product-grid titles --------*/
/* (overrides the global serif heading rule for blog cards only) */
.blog-post-card__content :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-heading--family) !important;
}

/*-------- ARTICLE PAGE: date as grey eyebrow (matches the cards) --------*/
.section-content-wrapper:has(.blog-post-content) .blog-post-details {
  font-family: var(--font-subheading--family, var(--font-body--family));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
}

/*-------- PRODUCT CARD TITLES: fix orange names clipping descenders (y, g, p) --------*/
/* base.css line-clamps card titles; with line-height:normal the last line's
   descenders get cut off (e.g. the "y" in Vinyl). A taller line-height gives room. */
:is(.product-card, .product-grid__card) :is(h4, .h4) {
  line-height: 1.4 !important;
  padding-block-end: 0.1em;
}

/*-------- BUTTONS: bold weight across all styles for consistency --------*/
:is(.button, .button-secondary) {
  font-weight: 700;
}

/*-------- TERTIARY BUTTON: primary styles + bold blue text (client ask) --------*/
/* Style option "Tertiary" outputs class "button button-tertiary", so it inherits
   all primary button styling and only layers these two overrides on top. */
.button-tertiary {
  font-weight: 700;
  color: #0e8bce;
}
.button-tertiary:hover {
  color: #14263f;
}

/*-------- WAVE DIVIDER: keep it behind open overlays --------*/
/* The wave section sits in a relative stacking context with z-index:5, which can
   trap it above the open mobile nav / cart drawer. When any scroll-locking overlay
   is open (html[scroll-lock]), drop the wave behind so it never covers the menu. */
html[scroll-lock] .kc-wave {
  z-index: -1;
}

/* (Removed: a `body:has(... [aria-expanded='true']) .kc-wave { z-index: -1 }` rule
   that dropped EVERY wave behind whenever a nav item was activated. Horizon's
   /activate sets aria-expanded on hover, so this fired on plain nav hover and the
   wave vanished entirely (z-index:-1 sits it behind the page background). The
   .header-section stacking context below already keeps the mega-menu above the
   wave, so dropping the wave is unnecessary.) */

/*-------- HEADER: keep the mega menu above wave dividers at every scroll position --------*/
/* The stock header only establishes a stacking z-index (--layer-sticky) once
   sticky is ACTIVE (see header.liquid). At the top of the page it has no stacking
   context, so the desktop mega-menu submenu (z-index 12) can fall BEHIND a wave
   divider (z-index 5) in the section below — which has no scroll-lock to catch it.
   Give the header its own stacking context above the wave, always. Modals/drawers
   (z-index 16-18+) still sit above it.
   NOTE: Horizon ships its own `.header-section { z-index: var(--layer-heightened) }`
   (=4, BELOW the wave's 5) and it loads after custom.css, so a plain `.header-section`
   selector loses the tie. Bump specificity with `.shopify-section.header-section` (the
   wrapper has both classes) so our value (10) actually wins. */
.shopify-section.header-section {
  position: relative;
  z-index: var(--layer-window-overlay, 10);
}

/*-------- MOBILE DRAWER: SHOP title links through, caret opens submenu --------*/
/* The parent row is split into a real link (the title -> its own page) and a
   caret button (opens the slide-out submenu). The button flex-grows to fill the
   whole right side so the open-submenu tap target is generous, not just the icon. */
.kc-drawer-parent-summary {
  list-style: none;
}
.kc-drawer-parent-summary::-webkit-details-marker {
  display: none;
}
.kc-drawer-parent-link {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 1 auto;
  color: inherit;
  text-decoration: none;
}
.kc-drawer-parent-link:hover {
  color: inherit;
}
.kc-drawer-parent-toggle {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  min-width: 4.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Re-apply the stock caret sizing + spacing. base.css pins `summary .svg-wrapper`
   to a fixed icon-size-xs box; with border-box the padding below would eat that
   whole width and collapse the SVG, so (like stock) let the wrapper size to its
   content and cancel the auto margin. */
.kc-drawer-parent-toggle .svg-wrapper {
  width: fit-content;
  height: fit-content;
  margin: 0;
  flex-shrink: 0;
  padding-block: var(--padding-lg);
  padding-inline-start: var(--padding-xl);
}
/* Belt-and-suspenders: keep the caret icon itself always rendered + sized,
   so the slide-out affordance can't collapse to nothing. */
.kc-drawer-parent-toggle .icon-caret {
  display: inline-flex;
  align-items: center;
  opacity: 1;
  visibility: visible;
}
.kc-drawer-parent-toggle .icon-caret svg {
  display: block;
  width: var(--icon-size-xs, 1.4rem);
  height: var(--icon-size-xs, 1.4rem);
  color: currentColor;
}

/* Match the bottom spacing of the flat top-level items (e.g. MUSIC) so the
   split-control SHOP row isn't tight against the next item. */
.kc-drawer-split-item {
  margin-block-end: var(--margin-md);
}

footer {
  background-color: #0b1830 !important;
}

/*-------- MUSIC TIMELINE (sections/music-timeline.liquid) --------*/
  .kc-music-timeline {
    padding: var(--kc-mt-pt, 0) 0 var(--kc-mt-pb, 0);
    --kc-mt-cream: var(--sand-50, #fbf6ec);
    --kc-mt-cover: 560px;
    /* Active-accent tint; JS overrides per era (lightened era color). */
    --kc-mt-accent: var(--coral, #e8896e);
    /* Stop the peeking vinyl from causing horizontal scroll. */
    overflow-x: clip;
  }
  .kc-music-timeline.is-cover-small { --kc-mt-cover: 440px; }
  .kc-music-timeline.is-cover-large { --kc-mt-cover: 720px; }

  /* Register the accent colors so the gradient morph animates (snaps gracefully where
     @property is unsupported). JS sets field/deep/accent per album from its
     accent_color (or the navy fallback). */
  @property --kc-mt-field { syntax: "<color>"; inherits: true; initial-value: #0b1830; }
  @property --kc-mt-deep { syntax: "<color>"; inherits: true; initial-value: #06101f; }
  @property --kc-mt-accent { syntax: "<color>"; inherits: true; initial-value: #e8896e; }

  .kc-music-timeline__view {
    position: relative;
    /* Per-album gradient: lighter "field" near the top, darker "deep" toward the
       bottom. Morphs to each album's accent color on scroll. */
    background: radial-gradient(circle at 52% 10%, var(--kc-mt-field, #0b1830), var(--kc-mt-deep, #06101f) 72%);
    color: var(--kc-mt-cream);
    transition: --kc-mt-field 0.8s ease, --kc-mt-deep 0.8s ease, --kc-mt-accent 0.8s ease;
  }
  /* Accent glow on the left + soft side vignettes for depth (prototype overlay). */
  .kc-music-timeline__view::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 42%, color-mix(in srgb, var(--kc-mt-accent, #e8896e) 16%, transparent), transparent 26%),
      linear-gradient(90deg, rgb(0 0 0 / 0.22), transparent 30%, transparent 70%, rgb(0 0 0 / 0.20));
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
  }
  .kc-music-timeline__inner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin-inline: auto;
    padding: clamp(16px, 2.5vw, 32px) var(--page-margin, 40px) clamp(40px, 6vw, 80px);
  }

  .kc-music-timeline__header {
    text-align: center;
    margin-bottom: clamp(8px, 1.5vw, 16px);
  }
  .kc-music-timeline__eyebrow {
    color: var(--sunset, #f0b775);
    justify-content: center;
    display: flex;
  }
  .kc-music-timeline__title {
    margin: 8px 0 0;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--kc-mt-cream);
  }
  .kc-music-timeline__squiggle {
    margin: 12px auto 0;
    color: var(--coral, #e8896e);
  }
  .kc-music-timeline__intro {
    margin: 16px auto 0;
    max-width: 560px;
    opacity: 0.8;
    font-size: 15px;
    line-height: 1.5;
  }
  .kc-music-timeline__loading {
    text-align: center;
    opacity: 0.45;
    padding: 60px 0;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 2rem;
  }

  /* On desktop the page heading ("Music") sits at the top of the left sticky flank,
     above the album scrubber. It returns to normal flow on mobile. Before the JS docks
     it into the rail, keep it hidden on desktop so it doesn't flash centered. */
  @media (min-width: 990px) {
    .kc-music-timeline__header:not(.kc-music-timeline__header--in-rail) { display: none; }
    /* Optionally hide the page heading on desktop (it stays in the mobile flow). The
       JS may still dock it into the rail; this keeps it out of view either way.
       Visually-hidden (not display:none) so the section's <h2> stays in the
       accessibility tree — otherwise the album <h3>s would have no parent heading. */
    .kc-music-timeline--hide-heading-desktop .kc-music-timeline__header {
      display: block;
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
  }
  .kc-music-timeline__header--in-rail {
    display: block;
    text-align: left;
    margin: 0 0 22px;
    max-height: 16rem;
    overflow: hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.4s ease, margin-bottom 0.4s ease;
  }
  /* Once you scroll on desktop, the page heading fades away and collapses so the
     album scrubber slides up to the top of the rail (JS toggles is-scrolled). */
  .kc-music-timeline__header--in-rail.is-scrolled {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    margin-bottom: 0;
    pointer-events: none;
  }
  .kc-music-timeline__header--in-rail .kc-music-timeline__eyebrow {
    justify-content: flex-start;
  }
  .kc-music-timeline__header--in-rail .kc-music-timeline__title {
    font-size: clamp(1.75rem, 2.6vw, 2.75rem);
    line-height: 1;
  }
  .kc-music-timeline__header--in-rail .kc-music-timeline__squiggle {
    margin-left: 0;
    margin-right: auto;
  }
  .kc-music-timeline__header--in-rail .kc-music-timeline__intro {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  /* Pinned mobile album navigator (hidden on desktop): active album mini-thumb +
     title + year on the left, a dropdown toggle on the right that opens the full
     album list to jump quickly. */
  .kc-music-timeline__mobilebar {
    display: none;
    position: sticky;
    top: calc(var(--kc-topbar-h, 0px) + var(--header-height, 60px)); /* JS refines this to the live header position */
    z-index: var(--layer-sticky, 8);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ocean-900, #0b1830);
    margin-inline: calc(var(--page-margin, 16px) * -1);
    /* Left/right padding matches .kc-topbar__inner so the bar content lines up with the topbar. */
    padding: 12px clamp(12px, 2vw, 32px);
    margin-bottom: 8px;
  }
  .kc-music-timeline__mobilebar-current {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .kc-music-timeline__mobilebar-thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: center / cover no-repeat rgb(255 255 255 / 0.08);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
    outline: 1px solid rgb(255 255 255 / 0.16);
  }
  .kc-music-timeline__mobilebar-text { min-width: 0; }
  .kc-music-timeline__mobilebar-name {
    display: block;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 14px;
    line-height: 1.15;
    color: var(--kc-mt-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kc-music-timeline__mobilebar-meta {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 2px;
  }
  .kc-music-timeline__mobilebar-toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.32);
    background: transparent;
    color: var(--kc-mt-cream);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .kc-music-timeline__mobilebar-toggle:hover { border-color: var(--kc-mt-cream); }
  .kc-music-timeline__mobilebar-toggle.is-open { transform: rotate(180deg); }
  /* Dropdown album list: drops below the bar, scrolls, current row highlighted. */
  .kc-music-timeline__mobilebar-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ocean-900, #0b1830);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.45);
    padding: 8px 0 12px;
  }
  .kc-music-timeline__mobilebar-menu[hidden] { display: none; }
  /* Dropdown rows mirror the desktop album scrubber: thumbnail + year + title, with
     the current album highlighted. Titles wrap (no ellipsis) so long names show in full.
     Rows span the full dropdown width (inset lives in their own padding) so the entire
     row is a tap target. */
  .kc-music-timeline__mobilebar-menu .kc-music-timeline__disco-item {
    width: 100%;
    grid-template-columns: 34px 40px 1fr;
    gap: 12px;
    min-height: 46px;
    padding: 8px clamp(12px, 2vw, 32px);
    opacity: 0.78;
  }
  .kc-music-timeline__mobilebar-menu .kc-music-timeline__disco-item::before { display: none; }
  .kc-music-timeline__mobilebar-menu .kc-music-timeline__disco-item.is-on {
    opacity: 1;
    background: rgb(255 255 255 / 0.06);
    border-radius: 0;
  }

  /* Three-column layout on desktop: album scrubber / albums / related media + shop */
  .kc-music-timeline__grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) minmax(150px, 190px);
    gap: clamp(16px, 3vw, 56px);
    align-items: start;
  }
  .kc-music-timeline__grid.is-no-disco {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  }
  .kc-music-timeline__rail {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: clamp(16px, 3vh, 40px);
    padding-bottom: 30px;
    opacity: 0.85;
    transition: opacity 0.4s ease;
  }
  .kc-music-timeline__rail:hover,
  .kc-music-timeline__rail:focus-within {
    opacity: 1;
  }
  .kc-music-timeline__rail .kc-music-timeline__panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
  }
  /* Right flank: on a short viewport the related media/products can be taller than
     the sticky rail. Scroll inside the panel (like the left scrubber's disco list)
     instead of cropping the bottom off — e.g. The Big Revival on a short window. */
  .kc-music-timeline__rail--right .kc-music-timeline__panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .kc-music-timeline__rail--right .kc-music-timeline__panel::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .kc-music-timeline__panel {
    background: transparent;
    border: 0;
    padding: 4px 0;
  }
  .kc-music-timeline__rail-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.62;
  }

  /* Left rail: "Now viewing" album header + the album scrubber below it */
  .kc-music-timeline__now {
    margin-bottom: 18px;
  }
  .kc-music-timeline__now-album {
    margin: 8px 0 0;
    font-family: "sentinel", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.05;
    color: var(--kc-mt-cream);
  }
  .kc-music-timeline__now-year {
    margin: 8px 0 0;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kc-mt-accent, var(--sunset, #f0b775));
  }
  .kc-music-timeline__disco-kicker { margin-bottom: 12px; }

  /* Discography scrubber: vertical line + dots, styled after .kc-year-slider
     (tabular-nums years, var(--color-primary) accent on the active row). */
  .kc-music-timeline__disco {
    position: relative;
    /* Fill the remaining flank height below the "Now viewing" header and scroll
       internally. The rail's height is JS-tracked to the live site header, so the
       scrubber grows when the header is hidden and shrinks when it reveals on scroll up. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    /* Extra left room so the active dot's glow ring isn't clipped by overflow. */
    padding-left: 22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 1.6rem, #000 calc(100% - 1.6rem), transparent 100%);
  }
  .kc-music-timeline__disco::before {
    content: "";
    position: absolute;
    left: 11.5px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.04));
  }
  .kc-music-timeline__disco::-webkit-scrollbar { display: none; }
  .kc-music-timeline__disco-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
    padding: 3px 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    /* Concentric corners: the active-row pill rounds by the thumbnail radius plus the
       padding between them (capped at the thumbnail radius). */
    border-radius: calc(var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary)));
    opacity: 0.45;
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
  }
  .kc-music-timeline__disco-item::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.32);
    box-shadow: 0 0 0 3px rgb(11 24 48 / 0.55);
    transition: background 0.22s ease, box-shadow 0.22s ease;
  }
  .kc-music-timeline__disco-item:hover { opacity: 0.85; }
  .kc-music-timeline__disco-item.is-on {
    opacity: 1;
    background: rgb(255 255 255 / 0.14);
  }
  .kc-music-timeline__disco-item.is-on::before {
    background: var(--kc-mt-accent, var(--color-primary, #d4654a));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--kc-mt-accent, var(--color-primary, #d4654a)) 24%, transparent);
  }
  .kc-music-timeline__disco-year {
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.5);
    transition: color 0.22s ease;
  }
  .kc-music-timeline__disco-text { min-width: 0; }
  /* Match the left-rail nav font. Titles wrap to as many lines as needed (no
     ellipsis); the row grows to fit and stays vertically centered on the thumbnail. */
  .kc-music-timeline__disco-title {
    display: block;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--kc-mt-cream);
    overflow-wrap: anywhere;
  }
  /* Desktop scrubber keeps each title on a single line (the left flank is sized wide
     enough to fit them); the mobile dropdown still wraps long titles. */
  .kc-music-timeline__disco .kc-music-timeline__disco-title { white-space: nowrap; overflow-wrap: normal; }
  .kc-music-timeline__disco-item.is-on .kc-music-timeline__disco-year { color: var(--kc-mt-accent, var(--sunset, #f0b775)); }

  /* Discography option: album cover thumbnails instead of dots. The thumbnail is
     an in-flow first column (not absolutely positioned) so the scroller never
     clips it. Uniform row height keeps the thumbnails evenly spaced. */
  .kc-music-timeline__disco--thumbs { padding-left: 0; }
  .kc-music-timeline__disco--thumbs::before { display: none; }
  .kc-music-timeline__disco--thumbs .kc-music-timeline__disco-item {
    grid-template-columns: 32px 34px 1fr;
    padding: 6px 10px;
    gap: 10px;
    min-height: 40px;
  }
  .kc-music-timeline__disco--thumbs .kc-music-timeline__disco-item::before { display: none; }
  .kc-music-timeline__disco-thumb {
    width: 32px;
    height: 32px;
    border-radius: var(--style-border-radius-buttons-primary);
    background: center / cover no-repeat rgb(255 255 255 / 0.08);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
    outline: 1px solid rgb(255 255 255 / 0.14);
    transition: outline-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .kc-music-timeline__disco-item.is-on .kc-music-timeline__disco-thumb {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.45);
    transform: scale(1.08);
  }

  /* Media preview row (under the focused album) */
  .kc-music-timeline__media-label {
    margin: 18px 0 10px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
  }
  .kc-music-timeline__media-label i { font-style: italic; }
  .kc-music-timeline__media {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 72px;
  }
  .kc-music-timeline__thumb {
    width: 72px;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.1) center / cover no-repeat;
    color: inherit;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    padding: 0;
  }
  /* Video play badge: matches the news .kc-tour-videos__play hover
     (navy circle -> orange + slight scale on thumb hover). */
  .kc-music-timeline__playbadge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(20 38 63 / 0.58);
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .kc-music-timeline__playbadge svg { width: 12px; height: 12px; }
  .kc-music-timeline__thumb:hover .kc-music-timeline__playbadge {
    background: var(--color-primary, #d4654a);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .kc-music-timeline__thumb-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Right rail flank: the active album's related media thumbnails + a related-products
     thumbnail strip. Each section hides itself (via [hidden]) when the album has none. */
  .kc-music-timeline__flank-section { margin-bottom: 26px; }
  .kc-music-timeline__flank-section:last-child { margin-bottom: 0; }
  .kc-music-timeline__flank-section[hidden] { display: none; }
  /* Category heading above each flank group (related media / shop). */
  .kc-music-timeline__flank-title {
    margin: 0 0 12px;
    font-family: "sentinel", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kc-mt-cream);
    opacity: 0.9;
  }
  /* Both flank groups use a 3-across grid; items fill their cell (square). */
  .kc-music-timeline__flank-media,
  .kc-music-timeline__flank-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .kc-music-timeline__flank-media .kc-music-timeline__thumb { width: auto; }
  .kc-music-timeline__product {
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: center / cover no-repeat rgb(255 255 255 / 0.08);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
    outline: 1px solid rgb(255 255 255 / 0.14);
    display: grid;
    place-items: center;
    overflow: hidden;
    text-decoration: none;
    color: var(--kc-mt-cream);
    transition: outline-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .kc-music-timeline__product:hover {
    transform: translateY(-2px);
    outline-color: var(--kc-mt-accent, #e8896e);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-mt-accent, #e8896e) 22%, transparent), 0 2px 8px rgb(0 0 0 / 0.3);
  }
  .kc-music-timeline__product.is-placeholder span {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    padding: 4px;
    opacity: 0.8;
  }

  /* Center column of album covers */
  .kc-music-timeline__track { min-width: 0; }
  .kc-music-timeline__album {
    /* Resolved cover width, shared so the left-shift (to balance the vinyl) can be
       a fraction of it and applied to both the cover and the info below. The last
       term keeps the cover + its peeking vinyl clear of the left/right sticky flanks:
       (center-column width) / 1.35 leaves a margin on each side; lower the divisor to
       grow the cover toward the flanks, raise it to pull back. */
    --kc-mt-coverw: min(var(--kc-mt-cover, 560px), calc(100vh - 19rem), 88vw, calc((min(100vw, 1500px) - 802px) / 1.35));
    /* Each album's scroll slot. Smaller than the viewport so there's less empty
       space (and less scrolling) between covers; still grows past this when the
       cover + actions are taller, so nothing is cropped. */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.55s ease;
  }
  .kc-music-timeline__album.is-focus { opacity: 1; }
  .kc-music-timeline__album.is-focus .kc-music-timeline__cover {
    box-shadow: 0 26px 64px rgb(0 0 0 / 0.5), 0 0 48px rgb(255 255 255 / 0.22);
    translate: 0 0;
    scale: 1;
  }
  /* Title, details, actions and media row only appear for the focused album. */
  .kc-music-timeline__album-info {
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
  }
  .kc-music-timeline__album.is-focus .kc-music-timeline__album-info {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Vinyl record disc peeking out from behind the focused cover */
  .kc-music-timeline__coverwrap {
    position: relative;
    perspective: 1000px;
    will-change: transform;
  }
  /* The vinyl overhangs to the right (more so on hover); nudge the cover left so the
     cover + peeking vinyl read as centered and the hovered disc stays clear of the
     right flank. The info below shifts by the same amount so it stays centered under
     the cover image (not the page). Uses `translate` so it composes with the JS float
     / reveal transforms. Desktop only — on tablet the single-column cover stays centered. */
  @media (min-width: 990px) {
    .kc-music-timeline__coverwrap,
    .kc-music-timeline__album-info { translate: calc(var(--kc-mt-coverw) * -0.15) 0; }
  }
  .kc-music-timeline__disc {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 18px 38px rgb(0 0 0 / 0.5));
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 0.5s ease;
  }
  /* The vinyl artwork itself (per-album "disc image" metafield, or the default
     vinyl SVG); the JS rotates this inner layer so the disc's position/parallax
     on the parent is unaffected. */
  .kc-music-timeline__disc-spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: center / contain no-repeat;
    transform-origin: center;
    will-change: transform;
  }
  .kc-music-timeline__album.is-focus .kc-music-timeline__disc {
    opacity: 1;
    transform: translate(-22%, -50%);
    /* The peeking part of the focused disc links to the album page. */
    pointer-events: auto;
    cursor: pointer;
  }
  /* Hovering the peeking vinyl slides it further out from behind the cover. */
  .kc-music-timeline__album.is-focus .kc-music-timeline__disc:hover {
    transform: translate(-2%, -50%);
  }
  .kc-music-timeline__cover {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    /* Fill the viewport height, reserving room for the title/meta/actions/media
       below + the site header above, so the cover is large on big screens without
       overflowing on short ones; the px cap keeps it inside the column on wide
       monitors, 88vw on narrow ones. */
    /* Last term keeps the cover (and its peeking vinyl) inside the center column
       so it can't overlap the right rail once the layout caps at 1500px. */
    width: var(--kc-mt-coverw);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: center / cover no-repeat var(--ocean-600, #243a60);
    box-shadow: 0 20px 50px rgb(10 26 30 / 0.45);
    text-decoration: none;
    color: var(--kc-mt-cream);
    transform-style: preserve-3d;
    /* Off-focus covers sit a touch lower + smaller, then rise + scale into place as the
       album becomes active. Individual translate/scale compose with the hover transform
       and the JS inertia float, so none of them fight each other. */
    translate: 0 30px;
    scale: 0.9;
    transition: transform 0.35s ease, box-shadow 0.35s ease,
      translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      scale 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }
  .kc-music-timeline__cover:hover {
    box-shadow: 0 28px 60px rgb(10 26 30 / 0.55);
  }
  /* The cover artwork <img> fills the cover tile (replaces the old background-image),
     so it can lazy-load and be indexed; the tile's own background shows while it loads. */
  .kc-music-timeline__cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
  }
  .kc-music-timeline__cover.is-placeholder {
    padding: 20px;
    align-items: flex-end;
    justify-items: start;
  }
  .kc-music-timeline__cover-title {
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.05;
    text-align: left;
    text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
  }
  .kc-music-timeline__album-title {
    margin: 0;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.05;
    color: var(--kc-mt-cream);
  }
  /* Album title toggle is desktop-only; it always shows on mobile. */
  @media (min-width: 990px) {
    .kc-music-timeline--hide-album-title .kc-music-timeline__album-title { display: none; }
  }
  .kc-music-timeline__meta {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.78;
  }

  /* Album action pills: Play (first video) + Open album */
  .kc-music-timeline__actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .kc-music-timeline__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.45);
    background: transparent;
    color: var(--kc-mt-cream);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  }
  .kc-music-timeline__btn:hover {
    border-color: var(--kc-mt-cream);
    transform: translateY(-2px);
  }

  .kc-music-timeline__ic { width: 16px; height: 16px; }
  .kc-music-timeline__ic--sm { width: 14px; height: 14px; }

  /* No-JS fallback */
  .kc-music-timeline__fallback {
    list-style: none;
    padding: 0;
    columns: 2;
    gap: 24px;
  }
  .kc-music-timeline__fallback a { display: block; padding: 6px 0; color: var(--kc-mt-cream); }


  @media screen and (max-width: 989px) {
    .kc-music-timeline__grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .kc-music-timeline__rail { display: none; }
    .kc-music-timeline__mobilebar { display: flex; }
    .kc-music-timeline__album { min-height: 82vh; }
    /* No rails on mobile/tablet, so drop the desktop column cap and let the cover be
       full size again. */
    .kc-music-timeline__album { --kc-mt-coverw: min(var(--kc-mt-cover, 560px), calc(100vh - 24rem), 88vw); }
    /* Drop the inner top padding so the sticky album bar sits flush under the site
       header instead of with a gap above it. */
    .kc-music-timeline__inner { padding-top: 0; }
    /* Breathing room above the page heading below the sticky album bar. */
    .kc-music-timeline__header { margin-top: clamp(28px, 6vw, 56px); }
  }

  /* The peeking vinyl is hidden only on phones (it stays on tablet + desktop). */
  @media screen and (max-width: 749px) {
    .kc-music-timeline__disc { display: none; }
  }

  @media screen and (max-width: 989px) {
    .kc-music-timeline { padding: var(--kc-mt-pt-m, 40px) 0 var(--kc-mt-pb-m, 40px); }
  }

  /* Keep the mobile album bar's left/right padding in step with .kc-topbar__inner. */
  @media screen and (max-width: 640px) {
    .kc-music-timeline__mobilebar,
    .kc-music-timeline__mobilebar-menu .kc-music-timeline__disco-item { padding-inline: 10px; }
  }
  @media screen and (max-width: 374px) {
    .kc-music-timeline__mobilebar,
    .kc-music-timeline__mobilebar-menu .kc-music-timeline__disco-item { padding-inline: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kc-music-timeline__view,
    .kc-music-timeline__cover { transition: none; }
    /* No rise/scale entrance when motion is reduced. */
    .kc-music-timeline__cover { translate: 0 0; scale: 1; }
  }

/*-------- KC ALBUM DETAIL (sections/kc-album-detail.liquid) --------*/
  .kc-album-detail {
    padding: var(--kc-ad-pt, 0) 0 var(--kc-ad-pb, 0);
    --kc-ad-cream: var(--sand-50, #fbf6ec);
    --kc-ad-ink: var(--ocean-800, #14263f);
    --kc-ad-dark: var(--ocean-900, #0b1830);
  }
  .kc-album-detail__breadcrumb {
    background: var(--kc-ad-accent);
    color: var(--kc-ad-cream);
    padding: 14px var(--page-margin, 40px);
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .kc-album-detail__breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.3);
    background: transparent;
    color: var(--kc-ad-cream);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color 0.2s ease;
  }
  .kc-album-detail__breadcrumb-back:hover { border-color: var(--kc-ad-cream); }
  .kc-album-detail__breadcrumb-arrow { font-size: 17px; line-height: 1; }
  .kc-album-detail__breadcrumb-sep { opacity: 0.4; }
  .kc-album-detail__breadcrumb-current { font-size: 14px; opacity: 0.85; }

  .kc-album-detail__hero {
    background: var(--kc-ad-accent);
    color: var(--kc-ad-cream);
    display: flex;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    /* Smaller top padding so the breadcrumb -> cover gap (top padding + the
       breadcrumb's 14px) roughly matches the cover -> nav gap (the bottom padding). */
    padding: clamp(16px, 3.5vw, 42px) var(--page-margin, 40px) clamp(28px, 5vw, 56px);
    flex-wrap: wrap;
  }
  .kc-album-detail__coverwrap { perspective: 1000px; flex: 0 0 auto; }
  .kc-album-detail__cover {
    width: clamp(200px, 26vw, 300px);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    border: 1px solid rgb(255 255 255 / 0.25);
    box-shadow: 0 18px 44px rgb(0 0 0 / 0.34);
    background: center / cover no-repeat rgb(255 255 255 / 0.12);
    display: grid;
    place-items: end start;
    padding: 16px;
    transform-style: preserve-3d;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
  }
  .kc-album-detail__cover[data-kc-ad-cover] { cursor: pointer; }
  .kc-album-detail__cover-title {
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.05;
    text-shadow: 0 2px 14px rgb(0 0 0 / 0.45);
  }
  .kc-album-detail__hero-body { flex: 1 1 360px; min-width: 280px; }
  .kc-album-detail__eyebrow { color: rgb(255 255 255 / 0.85); }
  .kc-album-detail__title {
    margin: 8px 0 12px;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
    color: var(--kc-ad-cream);
  }
  .kc-album-detail__desc { font-size: 15px; line-height: 1.6; opacity: 0.92; max-width: 48ch; }
  .kc-album-detail__desc p { margin: 0 0 0.5em; }
  .kc-album-detail__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
  .kc-album-detail__btn {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.5);
    color: var(--kc-ad-cream);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .kc-album-detail__btn:hover { transform: translateY(-2px); }
  .kc-album-detail__btn--primary { background: var(--kc-ad-cream); border-color: var(--kc-ad-cream); color: var(--kc-ad-accent); }
  .kc-album-detail__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  /* "Listen On" sits on its own full-width line above the chips. */
  .kc-album-detail__chips-label {
    flex-basis: 100%;
    width: 100%;
    margin: 0 0 4px;
    font-family: "sentinel", Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    opacity: 1;
  }
  .kc-album-detail__chip {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.4);
    color: var(--kc-ad-cream);
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .kc-album-detail__chip:hover { background: rgb(255 255 255 / 0.14); }

  .kc-album-detail__nav {
    position: static; /* JS sets an inline top; keep it ignored until the nav is pinned (fixed), otherwise relative/sticky would shift it out of flow */
    z-index: var(--layer-heightened, 4); /* below the header's sticky wrapper (--layer-sticky: 8) so the megamenu opens over this nav, but above page content */
    background: var(--kc-ad-dark);
    display: flex;
    gap: 4px;
    padding: 0 var(--page-margin, 40px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* JS pins the nav (top offset set inline) once it reaches the site header, so
     it stays put across the Shop and More music sections below. */
  .kc-album-detail__nav.is-pinned {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .kc-album-detail__nav-spacer { height: 0; }
  .kc-album-detail__nav::-webkit-scrollbar { display: none; }
  /* Page-width section layout: the hero + nav BACKGROUNDS stay full-bleed; only their
     CONTENT is constrained to the page content width (centered) via Horizon's
     --util-page-margin-offset. Full-width mode keeps the plain page-margin inset. */
  .kc-album-detail__container.kc-album-detail--page-width > .kc-album-detail__hero,
  .kc-album-detail__container.kc-album-detail--page-width > .kc-album-detail__nav {
    padding-inline: var(--util-page-margin-offset);
  }
  .kc-album-detail__navitem {
    background: none;
    border: 0;
    color: rgb(159 176 194 / 1);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
  }
  .kc-album-detail__navitem.is-on { color: var(--kc-ad-cream); border-bottom-color: var(--coral, #e8896e); }

  .kc-album-detail__body { padding-inline: var(--page-margin, 40px); }
  .kc-album-detail__sec { padding: clamp(28px, 4vw, 44px) 0; scroll-margin-top: calc(var(--kc-topbar-h, 0px) + var(--header-height, 60px) + 72px); }
  .kc-album-detail__sec + .kc-album-detail__sec { border-top: 1px solid rgb(20 38 63 / 0.1); }
  /* Standalone album sections (Tracklist/Media/About/Albums) carry the album color
     vars (the .kc-album-detail wrapper is gone here) + a product-list-style optional
     background image/overlay behind the section. */
  .kc-album-section {
    --kc-ad-cream: var(--sand-50, #fbf6ec);
    --kc-ad-ink: var(--ocean-800, #14263f);
    --kc-ad-dark: var(--ocean-900, #0b1830);
  }
  .section-background:has(.kc-album-section__bg-image) { overflow: hidden; }
  .kc-album-section__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .kc-album-section__bg-overlay {
    position: absolute;
    inset: 0;
    background: rgb(var(--color-background-rgb) / var(--kc-album-overlay-opacity, 0));
    pointer-events: none;
  }
  .kc-album-detail__eyebrow { margin: 0 0 8px; }
  .kc-album-detail__h {
    margin: 0 0 18px;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--kc-ad-ink);
  }
  .kc-album-detail__empty { opacity: 0.6; }

  .kc-album-detail__tracks {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: clamp(32px, 6vw, 96px);
  }
  .kc-album-detail__track {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 8px;
    border-radius: 8px;
    break-inside: avoid;
  }
  .kc-album-detail__track:hover { background: rgb(90 63 116 / 0.08); }
  .kc-album-detail__tnum { width: 22px; color: var(--muted, #5a6b7e); font-size: 13px; }
  .kc-album-detail__tname { font-size: 15px; color: var(--kc-ad-ink); }
  /* Mini music-video thumbnail(s) at the right of a track row (mirrors the timeline
     right-flank video thumbs: square cover + navy play badge -> primary on hover).
     The wrapper holds one button per matching video and pushes them right. */
  .kc-album-detail__track-videos {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
  }
  .kc-album-detail__track-video {
    flex: 0 0 auto;
    width: 42px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgb(0 0 0 / 0.12);
    border-radius: 8px;
    background: rgb(0 0 0 / 0.06) center / cover no-repeat;
    position: relative;
    padding: 0;
    cursor: pointer;
  }
  .kc-album-detail__track-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgb(20 38 63 / 0.6);
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .kc-album-detail__track-video-badge svg { width: 11px; height: 11px; }
  .kc-album-detail__track-video:hover .kc-album-detail__track-video-badge {
    background: var(--color-primary, #d4654a);
    transform: translate(-50%, -50%) scale(1.08);
  }

  @media screen and (max-width: 749px) {
    .kc-album-detail__tracks { columns: 1; }
  }

  .kc-album-detail__tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  .kc-album-detail__tab {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgb(20 38 63 / 0.2);
    background: transparent;
    color: var(--kc-ad-ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .kc-album-detail__tab:hover { border-color: var(--kc-ad-dark, #0b1830); }
  .kc-album-detail__tab.is-on { background: var(--kc-ad-dark, #0b1830); border-color: var(--kc-ad-dark, #0b1830); color: #fff; }
  .kc-album-detail__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 150px;
    gap: 10px;
  }
  .kc-album-detail__tile.is-hidden { display: none; }
  .kc-album-detail__tile {
    position: relative;
    border: 1px solid rgb(20 38 63 / 0.12);
    border-radius: 10px;
    background: center / cover no-repeat var(--kc-ad-accent);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    color: #fff;
  }
  .kc-album-detail__tile.is-feature { grid-column: span 2; grid-row: span 2; }
  .kc-album-detail__tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgb(7 18 30 / 0.6));
  }
  /* Video play badge: matches the news .kc-tour-videos__play hover
     (navy circle -> orange + slight scale on tile hover). */
  .kc-album-detail__tile-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(20 38 63 / 0.58);
    display: grid;
    place-items: center;
    color: #fff;
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .kc-album-detail__tile-icon svg { width: 18px; height: 18px; }
  .kc-album-detail__tile:hover .kc-album-detail__tile-icon {
    background: var(--color-primary, #d4654a);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .kc-album-detail__tile-label { position: relative; z-index: 1; font-size: 11px; line-height: 1.25; text-shadow: 0 1px 6px rgb(0 0 0 / 0.5); }

  .kc-album-detail__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .kc-album-detail__product { text-decoration: none; color: var(--kc-ad-ink); transition: transform 0.15s ease; }
  .kc-album-detail__product:hover { transform: translateY(-4px); }
  .kc-album-detail__product-img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgb(20 38 63 / 0.06);
  }
  .kc-album-detail__product-img img { width: 100%; height: 100%; object-fit: cover; }
  .kc-album-detail__product-info { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; }
  .kc-album-detail__product-title { font-weight: 500; }

  .kc-album-detail__about-text { font-size: 15px; line-height: 1.7; color: var(--muted, #5a6b7e); max-width: 60ch; }
  .kc-album-detail__credits { margin-top: 10px; font-size: 13px; color: var(--muted, #5a6b7e); }

  .kc-album-detail__rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .kc-album-detail__rail-card { text-decoration: none; color: var(--kc-ad-ink); transition: transform 0.15s ease; }
  .kc-album-detail__rail-card:hover { transform: translateY(-4px); }
  .kc-album-detail__rail-art {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: center / cover no-repeat var(--kc-ad-accent);
    box-shadow: 0 8px 22px rgb(20 38 63 / 0.16);
    display: grid;
    place-items: end start;
    padding: 12px;
    color: #fff;
  }
  /* Match the Shop product-card title typography (the h4 type preset). */
  .kc-album-detail__rail-title {
    font-family: var(--font-h4--family);
    font-weight: var(--font-h4--weight);
    font-size: var(--font-h4--size);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    text-shadow: 0 2px 10px rgb(0 0 0 / 0.4);
  }
  /* Match the Shop product-card vertical rhythm: 4px image->title (product_card_gap),
     12px title->meta (the card group gap). */
  .kc-album-detail__rail-meta { margin-top: 12px; font-family: var(--font-body--family); display: flex; flex-direction: column; gap: 12px; }
  .kc-album-detail__rail-meta strong {
    display: block;
    font-family: var(--font-h4--family);
    font-weight: var(--font-h4--weight);
    font-size: var(--font-h4--size);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    color: var(--color-primary);
  }
  .kc-album-detail__rail-meta span { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #5a6b7e); }

  /* "See all <era>" link below the rail — secondary outlined button, centered. */
  .kc-album-detail__more-foot { display: flex; justify-content: center; margin-top: 28px; }
  .kc-album-detail__seeall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--kc-ad-ink, #14263f);
    background: transparent;
    color: var(--kc-ad-ink, #14263f);
    font-family: var(--font-body--family);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .kc-album-detail__seeall:hover { background: var(--kc-ad-ink, #14263f); color: var(--kc-ad-cream, #fbf6ec); }
  .kc-album-detail__seeall-arrow { transition: transform 0.2s ease; }
  .kc-album-detail__seeall:hover .kc-album-detail__seeall-arrow { transform: translateX(3px); }

  .kc-album-detail__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
  .kc-album-detail__pg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--kc-ad-ink, #14263f);
    background: transparent;
    color: var(--kc-ad-ink, #14263f);
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .kc-album-detail__pg:hover { background: rgb(20 38 63 / 0.05); }
  .kc-album-detail__pg--next { flex-direction: row-reverse; text-align: right; }
  .kc-album-detail__pg-art { width: 46px; height: 46px; border-radius: 8px; flex: 0 0 auto; background: center / cover no-repeat var(--kc-ad-accent); }
  .kc-album-detail__pg-lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted, #5a6b7e); }
  .kc-album-detail__pg-title { font-size: 14px; }


  @media screen and (max-width: 749px) {
    .kc-album-detail__hero { flex-direction: column; text-align: center; align-items: center; }
    /* In the column layout the 360px flex-basis becomes a min height and leaves a
       big gap below the text — let the body size to its content instead. */
    .kc-album-detail__hero-body { flex: 0 1 auto; }
    .kc-album-detail__actions, .kc-album-detail__chips { justify-content: center; }
    /* "Listen on" heading on its own centered line, chips wrap centered below. */
    .kc-album-detail__chips-label { flex-basis: 100%; text-align: center; }
    .kc-album-detail__gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
    .kc-album-detail__tile.is-feature { grid-column: span 2; grid-row: span 2; }
    .kc-album-detail__products, .kc-album-detail__rail { grid-template-columns: repeat(2, 1fr); }
    .kc-album-detail__pager { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kc-album-detail__cover, .kc-album-detail__rail-card, .kc-album-detail__btn { transition: none; }
  }

@media (prefers-reduced-motion: reduce) {
  .mt-view,
  .mt-cover,
  .mt-dot,
  .mt-era,
  .mt-erasw {
    transition: none;
  }
}

/*-------- News year slider (animated shuffle filter) --------*/
.kc-year-slider {
  margin: 0 0 2.75rem;
  max-width: 640px;
}

.kc-year-slider__readout {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.kc-year-slider__range {
  width: 100%;
  margin: 0;
  accent-color: var(--color-primary, #d4654a);
  cursor: pointer;
}

.kc-year-slider__ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.1rem;
  margin-top: 0.4rem;
  padding-inline: 0.25rem;
  /* Scroll within the box instead of overflowing the screen on mobile. */
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox */
  /* Fade years that scroll past either edge so the clip reads as intentional. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent 100%);
}

.kc-year-slider__ticks::-webkit-scrollbar { display: none; } /* Safari/Chrome */

.kc-year-slider__tick {
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.kc-year-slider__tick:hover {
  opacity: 0.8;
}

.kc-year-slider__tick.is-active {
  opacity: 1;
  font-weight: 700;
  color: var(--color-primary, #d4654a);
}

.blog-post-item.kc-blog-hidden {
  display: none;
}

.blog-post-item {
  will-change: transform, opacity;
}

/* Briefly dim the grid while a year's articles load on demand */
.blog-posts-container.kc-blog-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Use (nearly) full screen width on desktop so the hero + shuffle feel bigger */
@media screen and (min-width: 990px) {
  .blog-posts.size-style {
    --page-content-width: min(1680px, 94vw);
  }
}

/*-------- "[Year] in Photos" strip (tour/event shots under the year slider) --------*/
.kc-tour-photos {
  margin: 0 0 2.75rem;
}

.kc-tour-photos[hidden] {
  display: none;
}

.kc-tour-photos__head {
  display: flex;
  align-items: baseline;
  column-gap: 0.65rem;
  row-gap: 0.15rem; /* tighter vertical spacing when the subtitle wraps below */
  flex-wrap: wrap;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.kc-tour-photos__year {
  color: var(--color-primary, #d4654a);
}

.kc-tour-photos__cats {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.55;
}

.kc-tour-photos__row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/*-------- Strip carousels: edge-bleed + navy scroll arrow, like the Shop carousel --------*/
.kc-tour-photos__viewport,
.kc-tour-videos__viewport {
  position: relative;
  /* Extend the scrolling row to the right screen edge so tiles bleed off-screen
     (desktop + mobile), signalling there's more to the right. */
  width: calc(50% + 50vw);
}

/* Hide the horizontal scrollbar; navigation is via the arrow / trackpad. */
.kc-tour-photos__row,
.kc-tour-videos__row {
  /* Trailing space so the last tile stops at the page gutter (matching the
     left edge) instead of butting against the screen edge at the end. */
  padding-right: max(var(--page-margin, 40px), calc((100vw - var(--page-content-width)) / 2));
  scroll-padding-right: 16px;
  scrollbar-width: none;
}

.kc-tour-photos__row::-webkit-scrollbar,
.kc-tour-videos__row::-webkit-scrollbar {
  display: none;
}

.kc-tour-photos__arrow,
.kc-tour-videos__arrow {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #14263f;
  color: #fbf6ec;
  --icon-stroke-width: 1.75px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(20 38 63 / 0.28);
  z-index: 2;
  transition: background 0.2s ease;
}

.kc-tour-photos__arrow[hidden],
.kc-tour-videos__arrow[hidden] {
  display: none;
}

.kc-tour-photos__arrow:hover,
.kc-tour-videos__arrow:hover {
  background: #1e3a59;
}

.kc-tour-photos__arrow svg,
.kc-tour-videos__arrow svg {
  width: 44%;
  height: 44%;
}

/* Prev arrow: pin left and flip the icon to point back. */
.kc-tour-photos__arrow--prev,
.kc-tour-videos__arrow--prev {
  right: auto;
  left: 12px;
  transform: translateY(-50%) scaleX(-1);
}

@media screen and (max-width: 749px) {
  .kc-tour-photos__row,
  .kc-tour-videos__row {
    padding-right: 16px;
  }
}

.kc-tour-photos__item {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  animation: kc-tp-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.kc-tour-photos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.kc-tour-photos__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgb(10 26 30 / 0.78));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kc-tour-photos__item:hover figcaption {
  opacity: 1;
}

@keyframes kc-tp-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media screen and (max-width: 749px) {
  .kc-tour-photos__item {
    width: 156px;
    height: 156px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-tour-photos__item {
    animation: none;
  }
}

/*-------- Photo lightbox (click a strip photo -> large view + swipe/arrows) --------*/
.kc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(8 16 28 / 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.kc-lightbox[hidden] {
  display: none;
}

body.kc-lightbox-open {
  overflow: hidden;
}

.kc-lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
  max-height: 88vh;
}

.kc-lightbox__img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
  animation: kc-lb-in 0.25s ease;
}

@keyframes kc-lb-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.kc-lightbox__cap {
  color: #fbf6ec;
  font-size: 0.85rem;
  opacity: 0.85;
  text-align: center;
  max-width: 80vw;
}

.kc-lightbox__close,
.kc-lightbox__nav {
  position: absolute;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.kc-lightbox__close:hover,
.kc-lightbox__nav:hover {
  background: rgb(255 255 255 / 0.24);
}

.kc-lightbox__close {
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}

.kc-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3.5rem;
  height: 3.5rem;
  /* match the navy circular arrow on the Shop carousel (primary button colors) */
  background: #14263f;
  color: #fbf6ec;
  --icon-stroke-width: 1.75px;
}

.kc-lightbox__nav:hover {
  background: #1e3a59;
}

.kc-lightbox__caret {
  width: 58%;
  height: 58%;
}

.kc-lightbox__nav--prev { left: 22px; }
.kc-lightbox__nav--prev .kc-lightbox__caret { transform: scaleX(-1); } /* point left */
.kc-lightbox__nav--next { right: 22px; }

.kc-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fbf6ec;
  font-size: 0.8rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 749px) {
  .kc-lightbox__nav { width: 3rem; height: 3rem; }
  .kc-lightbox__nav--prev { left: 8px; }
  .kc-lightbox__nav--next { right: 8px; }
}

/*-------- KC SHARED MEDIA LIGHTBOX (news videos + timeline + album media) --------
   Reuses .kc-lightbox__close / __nav / __caret for the orange arrows + close. */
.kc-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(8 16 28 / 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.kc-media-lightbox[hidden] {
  display: none;
}

.kc-media-lightbox__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(92vw, 1100px);
  max-height: 90vh;
}

.kc-media-lightbox__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.kc-media-lightbox__bar:empty {
  display: none;
}

.kc-media-lightbox__title {
  color: #fbf6ec;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.kc-media-lightbox__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.kc-media-lightbox__tab {
  appearance: none;
  border: 1px solid rgb(251 246 236 / 0.4);
  background: transparent;
  color: #fbf6ec;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.kc-media-lightbox__tab.is-on {
  background: #fbf6ec;
  color: #14263f;
  border-color: #fbf6ec;
}

.kc-media-lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 0;
  width: 100%;
}

.kc-media-lightbox__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.kc-media-lightbox__frame.is-video {
  aspect-ratio: 16 / 9;
  width: min(92vw, 1000px);
  background: #000;
}

.kc-media-lightbox__frame.is-photo {
  background-size: cover;
  background-position: center;
}

.kc-media-lightbox__iframe,
.kc-media-lightbox__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.kc-media-lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
  display: block;
}

.kc-media-lightbox__playout {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: #fff;
}

.kc-media-lightbox__cap {
  color: #fbf6ec;
  font-size: 0.9rem;
  opacity: 0.85;
  text-align: center;
  max-width: 80vw;
}

.kc-media-lightbox__foot {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kc-media-lightbox__count {
  color: #fbf6ec;
  font-size: 0.8rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.kc-media-lightbox__see {
  color: #fbf6ec;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: underline;
}

/*-------- "[Year] in Videos" strip (16:9 tiles with a play badge) --------*/
.kc-tour-videos {
  margin: 0 0 2.75rem;
}

.kc-tour-videos[hidden] {
  display: none;
}

.kc-tour-videos__head {
  display: flex;
  align-items: baseline;
  column-gap: 0.65rem;
  row-gap: 0.15rem; /* tighter vertical spacing when the subtitle wraps below */
  flex-wrap: wrap;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.kc-tour-videos__year {
  color: var(--color-primary, #d4654a);
}

.kc-tour-videos__cats {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.55;
}

.kc-tour-videos__row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.kc-tour-videos__item {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  height: 169px; /* 16:9 */
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  animation: kc-tp-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.kc-tour-videos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kc-tour-videos__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgb(20 38 63 / 0.58);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.kc-tour-videos__play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 15px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.kc-tour-videos__item:hover .kc-tour-videos__play {
  background: var(--color-primary, #d4654a);
  transform: scale(1.06);
}

.kc-tour-videos__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgb(10 26 30 / 0.82));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 749px) {
  .kc-tour-videos__item { width: 240px; height: 135px; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-tour-videos__item { animation: none; }
}


/* Keep the grid single-column + readable on mobile regardless of JS-set spans */
@media screen and (max-width: 749px) {
  .blog-posts-container .blog-post-item {
    --col-span: 6 !important;
    --blog-post-card-scale: 0.5 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-post-item {
    transition: none !important;
  }
}


/*-------- BLOG ARTICLE TITLE SIZE CAP (desktop) --------*/
@media screen and (min-width: 750px) {
  #MainContent[data-template^="article"] header h1 {
    font-size: 72px;
  }
}

/*-------- KC RELATED ALBUM (blocks/kc-related-album.liquid) --------
   Section at the end of .product-details listing the album(s) this product belongs to.
   Neutral styling (adapts to the page color scheme via currentColor). */
  .kc-related-albums { margin-top: 28px; }
  .kc-related-albums__heading {
    margin: 0 0 12px;
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
  }
  .kc-related-albums__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .kc-related-album {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--color-secondary-button-border);
    /* Concentric corners: row rounds by the thumbnail radius + the padding between them. */
    border-radius: calc(var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary)));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .kc-related-album:hover {
    background: var(--color-secondary-button-hover-background);
    color: var(--color-secondary-button-hover-text);
  }
  .kc-related-album__art {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--style-border-radius-buttons-primary);
    background: center / cover no-repeat color-mix(in srgb, currentColor 8%, transparent);
  }
  .kc-related-album__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .kc-related-album__title {
    font-family: var(--font-primary--family, var(--font-heading--family));
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.15;
  }
  .kc-related-album__meta { font-size: 12px; opacity: 0.65; }

/*-------- MOBILE DRAWER: search bar at top (opens the predictive search modal) --------*/
.menu-drawer__search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 2 * var(--padding-lg, 20px));
  margin: 4px var(--padding-lg, 20px) 20px;
  padding: 13px 18px;
  background: transparent;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.25);
  border-radius: 999px;
  color: rgb(var(--color-foreground-rgb) / 0.6);
  font-family: var(--font-body--family);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  text-align: left;
}
.menu-drawer__search:hover {
  border-color: rgb(var(--color-foreground-rgb) / 0.45);
}
.menu-drawer__search-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--color-foreground);
}

/*-------- SEARCH DRAWER: square thumbs, orange titles, sans labels --------*/
/* Square thumbnails with 8px rounded corners (override resource-card's 4/5 ratio) */
.predictive-search-results__card--product .resource-card__media {
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px;
  overflow: hidden;
}
.predictive-search-results__card--product .resource-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Product titles: brand orange + bolder, to match the rest of the site */
.predictive-search-results__card--product .resource-card__title {
  color: var(--color-primary, #d4654a);
  font-weight: 700;
}
/* Section labels ("Recently viewed", "Products") in sans, not the serif heading font */
.predictive-search-results__title {
  font-family: var(--font-body--family) !important;
  font-weight: 700;
}
/* Keep the "Clear" action from inheriting the bold title weight */
.predictive-search-results__clear {
  font-weight: 500;
}
/* Divider between the "Recently viewed" and "Products" sections so they don't read
   as two broken grids */
.recently-viewed-wrapper {
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgb(20 38 63 / 0.15);
}

/*-------- QUICK-ADD MODAL: PDP parity (show description + full-details link) --------*/
/* Stock Horizon collapses the desktop quick-add popup down to title/price/variant/
   buy-buttons only, hiding the product description (a .text-block) and the
   "View full details" link. That leaves a big empty gap and makes the popup look
   broken. Bring both back so it reads like the product page. Desktop only -- on
   mobile the modal content is rebuilt by quick-add.js, so these rules don't apply.
   Extra .quick-add-modal qualifier so we beat the stock !important hide regardless
   of stylesheet load order. */
@media screen and (min-width: 750px) {
  /* Reveal ONLY the description. The product title and price ALSO render as
     .text-block (title = an <h1> inside .text-block.h3; price = <product-price
     class="text-block">), and the modal already shows those via .view-product-title
     and the allowlisted product-price. So scope to .text-block.rte (the rich-text
     description) and explicitly exclude product-price -- otherwise we resurrect a
     duplicate title and a hidden duplicate price. */
  .quick-add-modal .quick-add-modal__content .product-details .text-block.rte:not(product-price) {
    display: block !important;
  }
  /* The stock catch-all hides EVERY non-allowlisted descendant of .product-details
     (lines 417-439 of quick-add-modal-styles), so revealing the description box
     alone leaves it empty -- its <p>/<span>/<a> children are still display:none.
     Roll those back to their natural display so the text actually renders. */
  .quick-add-modal .quick-add-modal__content .product-details .text-block.rte:not(product-price) * {
    display: revert !important;
  }
  .quick-add-modal .quick-add-modal__content .view-more-details__wrapper {
    display: flex !important;
  }

  /* Kill the empty gap: stock pins the buy buttons to the bottom of a fixed-height
     box (.group-block flex-grow:1 stretches the info; .buy-buttons margin-top:auto
     shoves the buttons down), which leaves a big void for short products. Let the
     content stack naturally from the top like the product page does. */
  .quick-add-modal .quick-add-modal__content .product-details > .group-block {
    flex-grow: 0 !important;
  }
  .quick-add-modal
    .quick-add-modal__content
    .product-details
    :is(.buy-buttons-block, .buy-buttons-block__bar) {
    margin-top: 0 !important;
    position: static !important;
  }
  .quick-add-modal
    .quick-add-modal__content
    .product-details
    :is(.buy-buttons-block, .buy-buttons-block__bar)::before {
    display: none !important;
  }

  /* Match the product page: quantity selector + primary (Pre-order/Add) button on
     one row, then "Buy with Shop" on its own full-width row below, with real gaps
     between everything. The stock --stacked rule gives every button flex-basis:51%,
     which in the modal column wraps the quantity onto its own line and collapses the
     gap. Force the PDP arrangement explicitly. */
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px !important;
  }
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons .quantity-selector {
    flex: 0 0 auto !important;
  }
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons > *:has(> .add-to-cart-button),
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons > .add-to-cart-button,
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons add-to-cart-component {
    flex: 1 1 auto !important;
  }
  .quick-add-modal .quick-add-modal__content .product-details .product-form-buttons .accelerated-checkout-block {
    flex: 1 0 100% !important;
  }
}

/* The modal title is an <a> (.view-product-title), not a heading, so the global
   "headings use Sentinel" rule never reaches it and it falls back to the body font.
   Apply the KC serif so the popup title matches the product page. (.product-header a
   is the mobile title that quick-add.js builds.) */
.quick-add-modal .quick-add-modal__content :is(.view-product-title, .view-product-title a, .product-header a) {
  font-family: "sentinel", sans-serif !important;
}

/*-------- HEADER NAV: suppress "New Book" (keep it in the footer) --------*/
/* Header and footer "Explore" share the same menu (main-menu-w-music-tour-copy),
   so we can't drop New Book from the menu itself without losing it in the footer.
   The footer renders with .menu__item, the header with .menu-list, so we hide the
   New Book item in the header only -- matched by its HarperCollins link URL. This
   covers both the desktop nav (.menu-list__list-item) and the mobile drawer's
   navigation bar (.menu-list li). If the book URL ever changes, update the href. */
.menu-list li:has(> a[href*="harpercollins"]) {
  display: none !important;
}

/*-------- Footer "Sign Up Today" button: arrow to match the topbar CTA --------*/
/* The footer signup button is a stock button block (plain text label), so we add
   the same arrow the topbar signup CTA uses as a pseudo-element. Scoped to the
   one button that links to #mailing-list. Mask + currentColor so it inherits the
   button's text color exactly like the topbar (white on navy). 14px / 8px gap. */
a.button-secondary[href$="#mailing-list"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
a.button-secondary[href$="#mailing-list"]::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*-------- MOBILE REVIEW FIXES (2026-06-22) --------*/

/*-------- 1. Collection grid: restore the page gutter on mobile --------
   full_width_on_mobile zeroes the grid padding, so cards run edge-to-edge.
   Add the standard site gutter back (compound selector = same element). */
@media screen and (max-width: 749px) {
  .main-collection-grid.collection-wrapper--full-width-on-mobile {
    padding-inline: var(--page-margin);
  }
}

/*-------- 2. PDP: gap between quantity selector and add-to-cart on mobile --------
   Stock only sets a row gap when the product has NO quantity rules
   (.product-form-buttons:not(:has(.quantity-rules))). A preorder with quantity
   rules gets 0 gap, so the quantity stepper sits flush against PRE-ORDER. Set an
   unconditional column-gap so it always separates them; column-gap leaves the
   wrapped quantity-label / quantity-rules rows untouched. */
@media screen and (max-width: 749px) {
  .product-form-buttons {
    column-gap: 14px !important;
  }
}

/*-------- 3. Carousels: guarantee touch-swipe on mobile --------
   Native-scroll rails already scroll; pan-x makes iOS reliably hand horizontal
   drags to the track instead of the page. The More Music album rail is a static
   grid, so convert it to a scroll-snap carousel like the others. */
.kc-past-tours--carousel .kc-tp-collections,
.kc-tour__merch-track,
.kc-album-detail__rail {
  /* Soften the hard snap (the section CSS uses x mandatory) to proximity so a
     flick glides and gently resolves to a card. */
  scroll-snap-type: x proximity !important;
  /* JS in custom.js drives the horizontal swipe with momentum (native touch-
     scroll is unreliable here); pan-y keeps vertical page scroll native. Do NOT
     remove pan-y without the JS, or horizontal scroll dies. */
  touch-action: pan-y;
}

@media screen and (max-width: 749px) {
  .kc-album-detail__rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kc-album-detail__rail::-webkit-scrollbar {
    display: none;
  }
  .kc-album-detail__rail-card {
    flex: 0 0 auto;
    width: 60vw;
    scroll-snap-align: start;
  }
}

/*-------- 4. Homepage: consistent eyebrow -> heading -> button rhythm --------
   Heading margin-top is the eyebrow->heading gap and differed per section
   (tour 14px, social-pulse 4px, blogs ~10px, past-tours ~6px). Pin it to a
   shared 12px across sections at ALL viewports (was mobile-only before, leaving
   desktop inconsistent); the squiggle sits under the heading at a shared 16px.
   Button gaps stay mobile-scoped since the desktop button layouts differ. */
.kc-tour__title,
.kc-social-pulse__title,
.kc-blogs__title,
.kc-past-tours__title {
  margin-top: 12px !important;
}
.kc-blogs__eyebrow {
  margin-bottom: 0 !important;
}
@media screen and (max-width: 989px) {
  /* The homepage Sphere uses the JS-rendered pill (.kc-tour__more > .kc-tour__pill),
     NOT the editor .kc-tour__view-all, so the gap is .kc-tour__more's padding-top
     (21px from the section). Bump that so the button clears the squiggle and
     reads like Latest News. Cover .kc-tour__view-all too for the editor config. */
  .kc-tour__more {
    padding-top: 48px !important;
  }
  .kc-tour__view-all {
    margin-top: 48px !important;
  }
}

/*-------- 5. Latest News (kc-blogs): mobile refinements --------
   Touch tidy-up + move See All News below the squiggle (matches Tour's View
   All Dates), which also frees the heading to sit on one line. */

/* Touch devices: it's a tap, not a hover. Drop the orange arrow, the slide-in
   nudge, and the coral headline that stuck on the tapped row. */
@media (hover: none) {
  .kc-blogs__arrow { display: none !important; }
  .kc-blogs__item:hover { padding-left: 0 !important; }
  .kc-blogs__item:hover .kc-blogs__headline { color: var(--color-foreground) !important; }
}

@media screen and (max-width: 749px) {
  /* "Latest News" on one line: the two editor lines are spans forced to
     display:block; let them flow inline on mobile. */
  .kc-blogs__title span { display: inline !important; }

  /* See All News out of the top-right corner, below the squiggle. Drop the
     112px reservation so the heading gets the full width. */
  .kc-blogs__intro { padding-right: 0 !important; }
  .kc-blogs__pill {
    position: static !important;
    margin-top: 24px !important; /* match Tour's View All Dates gap under the squiggle */
    padding: 11px 18px !important;
    font-size: 11px !important;
  }
}

/*-------- 6. Official Store (product-list) squiggle: its own spacing hook --------
   This squiggle is JS-injected (custom.js injectMerchSquiggle) and sits
   ABSOLUTELY positioned under the heading (top:100%), unlike the Tour/Blogs
   squiggles which flow with margin. The shared .kc-squiggle margin can't move
   it, so spacing lives here on its own class. `top` anchors it to the bottom of
   the heading; `margin-top` is the gap below the text. Tune these freely. */
.kc-squiggle--official-store {
  top: 100%;
  margin-top: 6px;
}
@media screen and (max-width: 749px) {
  .kc-squiggle--official-store {
    margin-top: 12px; /* mobile: was -2px (too close). Adjust to taste. */
  }
}

/*-------- 7. Official Store: breathing room between squiggle and first product --------
   The squiggle is out of flow (absolute), so it doesn't push the products down.
   Add space below the header so the squiggle clears the first product image.
   Applies on desktop too, a touch more on mobile. */
.section-resource-list:has(.product-list__eyebrow) .section-resource-list__header {
  margin-bottom: 14px;
}
@media screen and (max-width: 749px) {
  .section-resource-list:has(.product-list__eyebrow) .section-resource-list__header {
    margin-bottom: 20px;
  }
}

/*-------- 8. Product carousels (PDP related products etc.): swipe on mobile --------
   Horizon's slideshow keeps `slideshow-slides` at overflow:hidden until JS adds
   [in-viewport] (and re-hides on [mobile-disabled]), which left the related-
   products carousel un-swipeable on mobile. Force the slides to scroll natively
   on mobile with a soft snap so it always swipes smoothly. Scoped to resource
   (product) carousels, so the hero slideshow is untouched. */
@media screen and (max-width: 749px) {
  .resource-list__carousel slideshow-slides {
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
  }
}

/*-------- SIMPLE NAV DROPDOWN (desktop) --------
   Toggled per top-level item in the header Menu block (Enable simple dropdown +
   Menu item to target). Adds a caret to the targeted link and drops a compact
   cream box of its child links, left-aligned under the word. Pure CSS hover. */
.kc-has-simple-dd {
  position: relative;
}

.kc-has-simple-dd .kc-dd-caret {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.kc-has-simple-dd:hover .kc-dd-caret,
.kc-has-simple-dd:focus-within .kc-dd-caret {
  transform: rotate(180deg);
}

.kc-simple-dd {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  width: max-content;
  /* Match the collection sort dropdown: rounded popover box, soft shadow, border. */
  background: var(--cream, #fbf6ec);
  border: var(--style-border-popover);
  border-radius: var(--style-border-radius-popover, 16px);
  box-shadow: var(--shadow-popover, 0 12px 28px rgba(20, 38, 63, 0.14));
  padding: 8px;
  z-index: var(--layer-header-menu, 90);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.kc-has-simple-dd:hover .kc-simple-dd,
.kc-has-simple-dd:focus-within .kc-simple-dd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.kc-simple-dd__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-simple-dd__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: calc(var(--style-border-radius-popover, 16px) / 2);
  font-family: var(--menu-child-font-family, var(--font-body--family, inherit));
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink, #14263f);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.kc-simple-dd__link:hover,
.kc-simple-dd__link:focus-visible {
  background: rgb(20 38 63 / 0.06);
}
.kc-simple-dd__link[aria-current="page"] {
  font-weight: 500;
}

/*-------- Resource-list carousel: hide arrows when all slides fit --------
   Horizon's `auto-hide-controls` only governs the dots/controls slot, not the
   <slideshow-arrows>. Resource-list carousels render arrows but no dots, so a
   carousel with too few items to scroll (e.g. a 3-product featured collection in
   a 4-up layout) kept showing a next arrow. custom.js adds .kc-carousel-fits when
   the scroller does not overflow; this hides the arrows in that case. */
slideshow-component.resource-list__carousel.kc-carousel-fits slideshow-arrows {
  display: none;
}

/*-------- Short-height (landscape phone) tightening --------
   The album hero and the music-timeline albums are sized for tall portrait
   viewports (100vh covers, 82vh albums). On a short landscape phone that fills the
   whole screen and crops the content, so cap sizes when the viewport is short. */
@media (max-width: 749px) and (max-height: 560px) {
  .kc-album-detail__hero { padding-block: 14px; gap: 16px; }
  .kc-album-detail__cover { width: clamp(120px, 22vw, 170px); }
}
@media (max-width: 989px) and (max-height: 600px) {
  .kc-music-timeline__album { min-height: auto; }
  .kc-music-timeline__album { --kc-mt-coverw: min(var(--kc-mt-cover, 560px), 62vh, 72vw); }
}