/** Shopify CDN: Minification failed

Line 8488:1 Expected "}" to go with "{"

**/
/* ============================================================
   SALTY WORN — MASTER THEME LAYER v1.4
   Fabric/Horizon override stylesheet
   ------------------------------------------------------------
   Purpose:
   - Keep Shopify/Fabric structure and functionality intact
   - Apply the Salty Worn visual language globally
   - Provide reusable brand utilities for future custom sections

   IMPORTANT:
   Keep this file separate from base.css so Fabric updates are
   easier to manage.
   ============================================================ */


/* ============================================================
   01. BRAND TOKENS
   Change these values later and the whole custom layer follows.
   ============================================================ */

body.sw-theme {
  --sw-bg: #F4EFE4;
  --sw-panel: #EEE5D4;
  --sw-ink: #33271E;
  --sw-muted: #7E7267;
  --sw-accent: #C86E3C;
  --sw-accent-dark: #A95832;

  --sw-line: rgba(51, 39, 30, 0.24);
  --sw-line-strong: rgba(51, 39, 30, 0.82);

  --sw-display: Georgia, "Times New Roman", serif;
  --sw-body: var(--font-paragraph--family, Arial, sans-serif);

  --sw-page-gutter: clamp(20px, 4vw, 64px);
  --sw-section-space: clamp(68px, 8vw, 120px);

  --sw-border: 1.5px solid var(--sw-ink);
  --sw-offset-shadow: 8px 8px 0 var(--sw-accent);

  /* Reusable motion/media tokens for the Salty Worn editorial layer */
  --sw-media-radius: 12px;
  --sw-soft-shadow: 0 12px 30px rgba(51, 39, 30, 0.10);
  --sw-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  color: var(--sw-ink);
  background-color: var(--sw-bg);
}


/* ============================================================
   02. GLOBAL SURFACE
   Subtle texture only — strong visual moments stay section-based.
   ============================================================ */

body.sw-theme .page-wrapper {
  background-color: var(--sw-bg);
  background-image:
    radial-gradient(
      circle at 88% 7%,
      rgba(200, 110, 60, 0.055) 0 9%,
      transparent 9.5%
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0 28px,
      rgba(51, 39, 30, 0.025) 28px 29px
    );
}

body.sw-theme main {
  color: var(--sw-ink);
}


/* ============================================================
   03. TYPOGRAPHY SYSTEM
   Fabric typography stays available. These are reusable brand
   classes for custom/editorial sections as we rebuild the store.
   ============================================================ */

body.sw-theme .sw-display,
body.sw-theme .sw-display > * {
  margin: 0;
  font-family: var(--sw-display);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--sw-ink);
}

body.sw-theme .sw-display--xl,
body.sw-theme .sw-display--xl > * {
  font-size: clamp(52px, 7vw, 108px);
}

body.sw-theme .sw-display--lg,
body.sw-theme .sw-display--lg > * {
  font-size: clamp(42px, 5vw, 76px);
}

body.sw-theme .sw-display--md,
body.sw-theme .sw-display--md > * {
  font-size: clamp(32px, 3.6vw, 52px);
}

body.sw-theme .sw-eyebrow {
  margin: 0;
  color: var(--sw-accent);
  font-family: var(--sw-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.sw-theme .sw-small-caps {
  font-family: var(--sw-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}


/* ============================================================
   04. SHARED EDITORIAL COMPONENTS
   ============================================================ */

body.sw-theme .sw-rule {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

body.sw-theme .sw-rule::before,
body.sw-theme .sw-rule::after {
  content: "";
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

body.sw-theme .sw-card {
  position: relative;
  border: var(--sw-border);
  border-radius: 0;
  background: var(--sw-panel);
}

body.sw-theme .sw-card--offset {
  box-shadow: var(--sw-offset-shadow);
}

body.sw-theme .sw-stamp {
  display: inline-flex;
  width: 82px;
  height: 82px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: var(--sw-border);
  border-radius: 50%;
  background: var(--sw-bg);
  color: var(--sw-ink);
  text-align: center;
  transform: rotate(7deg);
}

body.sw-theme .sw-divider {
  width: 100%;
  height: 1px;
  background: var(--sw-line);
}


/* ============================================================
   05. LINKS
   Keep body links usable; branded navigation gets its own rules.
   ============================================================ */

body.sw-theme .rte a:not(.button):not(.button-secondary) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.sw-theme .rte a:not(.button):not(.button-secondary):hover {
  color: var(--sw-accent);
}


/* ============================================================
   06. BUTTONS
   Sharp, compact and editorial. We preserve Shopify button
   variables/behaviour but remove the generic rounded treatment.
   ============================================================ */

body.sw-theme :is(
  .button,
  .button-secondary,
  .button-custom,
  button.shopify-payment-button__button--unbranded
) {
  min-height: 52px;
  border-radius: 0 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

body.sw-theme :is(
  .button,
  .button-custom,
  button.shopify-payment-button__button--unbranded
):not([disabled]):hover {
  transform: translateY(-2px);
}

body.sw-theme .button-secondary:hover {
  transform: translateY(-2px);
}


/* ============================================================
   07. FORM CONTROLS
   Squarer inputs and stronger rules without changing validation
   or Shopify form behaviour.
   ============================================================ */

body.sw-theme input:not([type="checkbox"]):not([type="radio"]),
body.sw-theme textarea,
body.sw-theme select,
body.sw-theme .field__input {
  border-radius: 0 !important;
}

body.sw-theme .field__input {
  box-shadow: none;
  border-bottom: 1.5px solid var(--sw-ink);
  background: transparent;
}

body.sw-theme .field__input:focus {
  box-shadow: none;
  border-bottom-color: var(--sw-accent);
}


/* ============================================================
   08. HEADER — SALTY WORN V1
   We are styling Fabric's existing header rather than replacing
   its logic, drawer, sticky system, localization or search.
   ============================================================ */

/* Cream state for normal/sticky/open header */
body.sw-theme #header-component {
  --sw-header-bg: var(--sw-bg);
  --sw-header-ink: var(--sw-ink);
}

body.sw-theme #header-component:not([transparent]),
body.sw-theme #header-component[transparent][data-sticky-state="active"],
body.sw-theme #header-component:has(header-menu[aria-expanded="true"]),
body.sw-theme #header-component:has(.menu-list__link:hover) {
  --color-background-top-row: var(--sw-header-bg) !important;
  --color-background-bottom-row: var(--sw-header-bg) !important;
  --color-foreground: var(--sw-header-ink);
}

/* Fine editorial divider; transparent header stays clean until active */
body.sw-theme #header-component:not([transparent]) .header__row--top,
body.sw-theme #header-component[transparent][data-sticky-state="active"] .header__row--top,
body.sw-theme #header-component:has(header-menu[aria-expanded="true"]) .header__row--top {
  border-bottom: 1px solid var(--sw-line) !important;
}

/* Desktop nav typography */
@media screen and (min-width: 750px) {
  body.sw-theme #header-component .menu-list__link {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
  }

  body.sw-theme #header-component .menu-list__link:hover,
  body.sw-theme #header-component .menu-list__link[aria-current="page"] {
    text-decoration-line: underline;
    text-decoration-color: var(--sw-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

/* Header utility icons */
body.sw-theme #header-component .header-actions__action,
body.sw-theme #header-component .search-action,
body.sw-theme #header-component .header__icon--menu {
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

@media (hover: hover) {
  body.sw-theme #header-component .header-actions__action:hover,
  body.sw-theme #header-component .search-action:hover,
  body.sw-theme #header-component .header__icon--menu:hover {
    color: var(--sw-accent);
    opacity: 1;
    transform: translateY(-1px);
  }
}

/* Cart bubble becomes the accent */
body.sw-theme #header-component {
  --cart-bubble-background: var(--sw-accent);
  --cart-bubble-text: var(--sw-bg);
}

/* Make dropdown/popover surfaces fit the brand */
body.sw-theme #header-component .localization-wrapper,
body.sw-theme #header-component .menu-list__submenu {
  border-radius: 0 !important;
}


/* ============================================================
   09. PRODUCT + COLLECTION CARD BASELINE
   Conservative for now: remove generic rounded language. We will
   properly redesign the cards once we inspect their markup.
   ============================================================ */

body.sw-theme :is(.product-card, .collection-card) {
  border-radius: 0;
}

body.sw-theme :is(.product-card, .collection-card) img {
  border-radius: 0;
}


/* ============================================================
   10. DIALOGS / DRAWERS / POPOVERS
   Keep mechanics untouched; only flatten the visual language.
   ============================================================ */

body.sw-theme dialog,
body.sw-theme .localization-wrapper {
  border-radius: 0 !important;
}


/* ============================================================
   11. FOCUS STATES
   Brand-coloured, visible and accessible.
   ============================================================ */

body.sw-theme *:focus-visible {
  outline-color: var(--sw-accent);
}


/* ============================================================
   12. MOBILE
   ============================================================ */

@media screen and (max-width: 749px) {
  body.sw-theme {
    --sw-page-gutter: 20px;
    --sw-section-space: 64px;
    --sw-offset-shadow: 6px 6px 0 var(--sw-accent);
  }

  body.sw-theme .sw-display--xl,
  body.sw-theme .sw-display--xl > * {
    font-size: clamp(48px, 14vw, 68px);
  }

  body.sw-theme .sw-display--lg,
  body.sw-theme .sw-display--lg > * {
    font-size: clamp(40px, 11.5vw, 56px);
  }

  body.sw-theme .sw-rule {
    grid-template-columns: auto 1fr;
    font-size: 8.5px;
  }

  body.sw-theme .sw-rule > :last-child {
    display: none;
  }

  body.sw-theme #header-component .header__row--top {
    min-height: 62px;
  }

  body.sw-theme #header-component .header__columns {
    padding-inline: 20px;
  }
}


/* ============================================================
   13. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body.sw-theme *,
  body.sw-theme *::before,
  body.sw-theme *::after {
    scroll-behavior: auto !important;
  }

  body.sw-theme #header-component .menu-list__link::after,
  body.sw-theme :is(.button, .button-secondary, .button-custom) {
    transition: none;
  }
}


/* ============================================================
   14. HOMEPAGE — EDITORIAL SYSTEM v1.4
   Scoped to the index template only. This means the stock Fabric
   sections can still be used elsewhere without inheriting these
   stronger homepage treatments.
   ============================================================ */


/* ------------------------------------------------------------
   14A. HERO
   ------------------------------------------------------------ */

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero {
  --hero-min-height: 78svh !important;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__container {
  border-bottom: 1px solid rgba(244, 239, 228, 0.24);
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  padding-block: clamp(90px, 13vh, 150px) clamp(58px, 8vh, 96px);
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper::before {
  content: "DROP 01 / COASTAL SUPPLY";
  display: block;
  margin-bottom: 4px;
  color: #E48650;
  font-family: var(--sw-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper h1 {
  max-width: 760px;
  margin: 0;
  color: var(--sw-bg) !important;
  font-family: var(--sw-display) !important;
  font-size: clamp(62px, 7vw, 108px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.84 !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper h1 strong {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper p {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(244, 239, 228, 0.92) !important;
  font-family: var(--sw-body) !important;
  font-size: clamp(15px, 1.3vw, 19px) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper p strong {
  font-weight: inherit;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper .button-custom {
  --button-color: var(--sw-ink) !important;
  --button-background-color: var(--sw-bg) !important;
  --button-border-color: var(--sw-bg) !important;

  display: inline-flex;
  width: fit-content !important;
  min-width: 218px;
  min-height: 56px;
  padding-inline: 20px !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 6px 6px 0 var(--sw-accent);
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper .button-custom::after {
  content: "→";
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper .button-custom:hover {
  --button-color: var(--sw-bg) !important;
  --button-background-color: var(--sw-accent) !important;
  --button-border-color: var(--sw-accent) !important;

  box-shadow: 3px 3px 0 var(--sw-bg);
  transform: translate(3px, 3px);
}


/* ------------------------------------------------------------
   14B. FEATURED RANGE
   ------------------------------------------------------------ */

body.sw-theme main[data-template="index"] [data-testid="product-list"] {
  --sw-range-media-radius: var(--sw-media-radius);
  --sw-range-media-inset: 10px;

  overflow: hidden;
  background: var(--sw-bg);
  border-bottom: 1px solid var(--sw-line);
}

/* Horizon deliberately reserves 3rem for a peeking fifth slide.
   The Salty Worn desktop treatment is a clean four-card frame instead. */
@media screen and (min-width: 750px) {
  body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__carousel {
    --peek-next-slide-size: 0px;
  }
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .section-resource-list__header h3 {
  margin: 0;
  color: var(--sw-ink) !important;
  font-family: var(--sw-display) !important;
  font-size: clamp(46px, 5.3vw, 80px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .section-resource-list__header h3::before {
  content: "01 / THE RANGE";
  display: block;
  margin-bottom: 16px;
  color: var(--sw-accent);
  font-family: var(--sw-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .section-resource-list__header {
  position: relative;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .section-resource-list__header > .group-block {
  padding-block-end: 24px !important;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .sw-range-link {
  position: absolute;
  right: 40px;
  bottom: 29px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sw-ink);
  font-family: var(--sw-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .sw-range-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 30px;
  bottom: -7px;
  height: 1px;
  background: var(--sw-ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 180ms ease;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .sw-range-link:hover {
  color: var(--sw-accent);
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .sw-range-link:hover::before {
  background: var(--sw-accent);
  transform: scaleX(1);
  transform-origin: left center;
}

/* The slide keeps the editorial dividers, while the media itself is inset and softened. */
body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__item {
  position: relative;
  border-top: 1px solid var(--sw-line);
  border-right: 1px solid var(--sw-line);
  background: var(--sw-bg);
  transition: background-color 220ms ease;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__item::before {
  content: attr(data-sw-index);
  position: absolute;
  top: calc(var(--sw-range-media-inset) + 8px);
  left: calc(var(--sw-range-media-inset) + 8px);
  z-index: 4;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--sw-ink);
  border-radius: 50%;
  background: rgba(244, 239, 228, 0.94);
  color: var(--sw-ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 10px rgba(51, 39, 30, 0.08);
  pointer-events: none;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms var(--sw-ease-out);
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card {
  background: transparent;
}

/* Softened product photography: warm inset, restrained radius and subtle depth. */
body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card .card-gallery {
  margin:
    var(--sw-range-media-inset)
    var(--sw-range-media-inset)
    8px;
  border: 1px solid rgba(51, 39, 30, 0.14);
  border-radius: var(--sw-range-media-radius) !important;
  background: var(--sw-panel);
  box-shadow: 0 8px 22px rgba(51, 39, 30, 0.07);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 280ms var(--sw-ease-out),
    border-color 220ms ease,
    box-shadow 280ms var(--sw-ease-out);
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card .card-gallery img {
  border-radius: 0 !important;
  filter: saturate(0.96) contrast(0.98);
  transform: scale(1.002);
  transition:
    transform 420ms var(--sw-ease-out),
    filter 260ms ease;
}

/* Keep the image carousel and quick-add neatly clipped to the softened media frame. */
body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card .card-gallery :is(
  slideshow-component,
  slideshow-container,
  slideshow-slides,
  slideshow-slide,
  .product-media-container
) {
  border-radius: inherit;
}

@media (hover: hover) {
  body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__item:hover {
    background: rgba(238, 229, 212, 0.42);
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__item:hover::before {
    border-color: var(--sw-accent);
    background: var(--sw-accent);
    color: var(--sw-bg);
    transform: rotate(-5deg) scale(1.04);
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card:hover .card-gallery {
    border-color: rgba(200, 110, 60, 0.55);
    box-shadow:
      6px 7px 0 rgba(200, 110, 60, 0.22),
      0 16px 30px rgba(51, 39, 30, 0.10);
    transform: translateY(-2px);
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card:hover .card-gallery img {
    filter: saturate(1) contrast(1);
    transform: scale(1.028);
  }
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card__content {
  min-height: 100%;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"] :is(
  .product-card,
  .resource-list__item
) {
  color: var(--sw-ink);
}


/* ------------------------------------------------------------
   14B.1 PRODUCT CARD DETAILS — HOMEPAGE
   ------------------------------------------------------------ */

/* Fabric/Horizon renders a second, per-product slideshow inside each card.
   On this homepage those cards already sit inside the main product carousel,
   so the little inner gallery arrows are intentionally hidden. */
body.sw-theme main[data-template="index"] [data-testid="product-list"] product-card slideshow-arrows,
body.sw-theme main[data-template="index"] [data-testid="product-list"] product-card .slideshow-controls__arrows {
  display: none !important;
}

/* The media now has its own inset frame, so the copy can breathe underneath it. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block {
  padding: 10px 18px 17px !important;
  border-top: 0 !important;
  background: transparent;
}

/* Title on the left, price on the right, swatches/details beneath. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block > .group-block-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px !important;
  row-gap: 8px !important;
  align-items: start !important;
}

/* product-title.liquid uses display:contents on the link, so its .text-block
   participates directly in the grid. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block
  a[ref="productTitleLink"] > .text-block {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"]
  a[ref="productTitleLink"] p[role="heading"] {
  margin: 0;
  color: var(--sw-ink) !important;
  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  transition: color 180ms ease;
}

@media (hover: hover) {
  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card:hover a[ref="productTitleLink"] p[role="heading"] {
    color: var(--sw-accent) !important;
  }
}

/* Price is deliberately quieter than the product name. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block product-price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: auto !important;
  min-width: max-content;
  color: rgba(51, 39, 30, 0.68) !important;
  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block product-price :is(span, s, div) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Any extra card content (currently swatches) sits cleanly underneath. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block > .group-block-content > :not(a):not(product-price) {
  grid-column: 1 / -1;
}

/* Small orange detail on hover, without turning the card into a big animation. */
body.sw-theme main[data-template="index"] [data-testid="product-list"]
  .product-card__content > .group-block::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--sw-accent);
  transition: width 220ms ease;
}

@media (hover: hover) {
  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card:hover .product-card__content > .group-block::after {
    width: calc(100% - 36px);
  }
}

/* Let the story headline use the real width available in the content column.
   The Theme Editor currently marks this text block as "narrow". */
body.sw-theme main[data-template="index"] [data-testid="media-with-content"]
  .media-with-content__content .text-block:has(h2) {
  width: 100% !important;
  max-width: 690px !important;
}


/* ------------------------------------------------------------
   14C. BRAND MARQUEE
   ------------------------------------------------------------ */

body.sw-theme main[data-template="index"] marquee-component {
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --marquee-gap: 44px !important;

  min-height: 48px;
  border-top: 1px solid var(--sw-ink);
  border-bottom: 1px solid var(--sw-ink);
  background: var(--sw-accent) !important;
  color: var(--sw-bg) !important;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__wrapper,
body.sw-theme main[data-template="index"] marquee-component .marquee__content,
body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items {
  height: 48px;
  align-items: center;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items {
  gap: 44px;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items > * {
  position: relative;
  display: inline-flex;
  height: 48px;
  min-height: 48px;
  align-items: center;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items > *::after {
  content: "×";
  position: absolute;
  left: calc(100% + 22px);
  top: 50%;
  color: var(--sw-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__content .text-block,
body.sw-theme main[data-template="index"] marquee-component .marquee__content .text-block > * {
  display: flex;
  height: 100%;
  margin-block: 0 !important;
  align-items: center;
}

body.sw-theme main[data-template="index"] marquee-component .marquee__content .text-block > * {
  /* Optical correction: this font sits slightly high next to the centred × marks. */
  transform: translateY(2px);
}

body.sw-theme main[data-template="index"] marquee-component .marquee__content :is(p, h1, h2, h3, h4, h5, h6),
body.sw-theme main[data-template="index"] marquee-component .marquee__content * {
  color: var(--sw-bg) !important;
  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}


/* ------------------------------------------------------------
   14D. STORY / MEDIA WITH CONTENT
   ------------------------------------------------------------ */

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] {
  border-bottom: 1px solid var(--sw-line);
  background: var(--sw-bg);
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content {
  background:
    radial-gradient(
      circle at 16% 16%,
      rgba(200, 110, 60, 0.055) 0 13%,
      transparent 13.5%
    ),
    var(--sw-bg);
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"]
  .media-with-content__content > .group-block-content {
  gap: 20px !important;
  padding: clamp(48px, 6vw, 92px) clamp(34px, 5vw, 78px) !important;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content h6 {
  margin: 0 0 2px;
  color: var(--sw-accent) !important;
  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content h2 {
  max-width: 650px;
  margin: 0;
  color: var(--sw-ink) !important;
  font-family: var(--sw-display) !important;
  font-size: clamp(46px, 4.6vw, 72px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.9 !important;
  text-transform: uppercase !important;
  text-wrap: balance;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content h2 strong {
  font: inherit;
  letter-spacing: inherit;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content p {
  max-width: 570px;
  color: rgba(51, 39, 30, 0.78) !important;
  font-family: var(--sw-body) !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.65 !important;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content .button-custom {
  --button-color: var(--sw-bg) !important;
  --button-background-color: var(--sw-ink) !important;
  --button-border-color: var(--sw-ink) !important;

  display: inline-flex;
  width: fit-content !important;
  min-width: 175px;
  min-height: 54px;
  padding-inline: 18px !important;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content .button-custom::after {
  content: "→";
  font-size: 18px;
  font-weight: 400;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content .button-custom:hover {
  --button-color: var(--sw-bg) !important;
  --button-background-color: var(--sw-accent) !important;
  --button-border-color: var(--sw-accent) !important;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-block {
  position: relative;
}

body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--sw-line);
  pointer-events: none;
}


/* ------------------------------------------------------------
   14E. HOMEPAGE MOBILE
   ------------------------------------------------------------ */

@media screen and (max-width: 749px) {
  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero {
    --hero-min-height: 82svh !important;
  }

  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper {
    gap: 14px !important;
    padding-block: 110px 42px;
  }

  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper::before {
    margin-bottom: 2px;
    font-size: 9px;
  }

  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper h1 {
    max-width: 360px;
    font-size: clamp(50px, 15vw, 68px) !important;
    line-height: 0.86 !important;
  }

  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper p {
    max-width: 340px;
    font-size: 15px !important;
  }

  body.sw-theme main[data-template="index"] .hero-wrapper:first-child .hero__content-wrapper .button-custom {
  width: fit-content !important;
  min-width: 218px;
  max-width: calc(100vw - 40px);
  min-height: 54px;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .section-resource-list__header h3 {
    font-size: clamp(42px, 12vw, 58px) !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .section-resource-list__header h3::before {
    margin-bottom: 12px;
    font-size: 9px;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] {
    --sw-range-media-radius: 9px;
    --sw-range-media-inset: 6px;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .resource-list__item::before {
    top: calc(var(--sw-range-media-inset) + 6px);
    left: calc(var(--sw-range-media-inset) + 6px);
    width: 29px;
    height: 29px;
    font-size: 8px;
    box-shadow: 0 2px 8px rgba(51, 39, 30, 0.08);
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .section-resource-list__header > .group-block {
    padding-block-end: 15px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .sw-range-link {
    position: static;
    width: fit-content;
    margin: 0 20px 22px;
    font-size: 9px;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] product-card .product-card__content {
    --quick-add-mobile-display: none !important;
    --quick-add-mobile-opacity: 0 !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] product-card quick-add-component.quick-add,
  body.sw-theme main[data-template="index"] [data-testid="product-list"] product-card .quick-add {
    display: none !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"] .product-card .card-gallery {
    margin:
      var(--sw-range-media-inset)
      var(--sw-range-media-inset)
      6px;
    box-shadow: 0 5px 14px rgba(51, 39, 30, 0.06);
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block {
    padding: 8px 11px 13px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block > .group-block-content {
    grid-template-columns: 1fr;
    row-gap: 4px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block
    a[ref="productTitleLink"] > .text-block,
  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block product-price {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    a[ref="productTitleLink"] p[role="heading"] {
    font-size: 9px !important;
    letter-spacing: 0.055em !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block product-price {
    font-size: 9px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="product-list"]
    .product-card__content > .group-block::after {
    left: 11px;
  }

  body.sw-theme main[data-template="index"] marquee-component {
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    --marquee-gap: 34px !important;
    min-height: 44px;
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__wrapper,
  body.sw-theme main[data-template="index"] marquee-component .marquee__content,
  body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items {
    height: 44px;
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items {
    gap: 34px;
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items > * {
    height: 44px;
    min-height: 44px;
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__repeated-items > *::after {
    left: calc(100% + 17px);
    font-size: 9px;
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__content .text-block > * {
    transform: translateY(1.5px);
  }

  body.sw-theme main[data-template="index"] marquee-component .marquee__content :is(p, h1, h2, h3, h4, h5, h6),
  body.sw-theme main[data-template="index"] marquee-component .marquee__content * {
    font-size: 8.5px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] {
    --media-height-mobile: 48svh !important;
    grid-template-areas: "content content content" "media media media" !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-block__media {
    height: 48svh !important;
    object-position: center 72% !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"]
    .media-with-content__content > .group-block-content {
    gap: 18px !important;
    padding: 48px 20px 54px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content h6 {
    font-size: 9px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content h2 {
    font-size: clamp(42px, 12vw, 56px) !important;
    line-height: 0.91 !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content p {
    font-size: 15px !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-with-content__content .button-custom {
    width: 100% !important;
  }

  body.sw-theme main[data-template="index"] [data-testid="media-with-content"] .media-block::after {
    border-left: 0;
    border-top: 1px solid var(--sw-line);
  }
}
/* =========================================================
   SALTY WORN - HEADER MENUS
   Mobile drawer + compact desktop Shop mega menu
   ========================================================= */

:root {
  --sw-menu-cream: #f4efe4;
  --sw-menu-brown: #33271e;
  --sw-menu-orange: #c86e3c;
  --sw-menu-line: rgba(51, 39, 30, 0.18);
}

/* =========================================================
   MOBILE MENU DRAWER
   ========================================================= */

@media screen and (max-width: 749px) {
  #header-component .menu-drawer {
    width: min(91vw, 360px) !important;
    max-width: min(91vw, 360px) !important;

    background:
      radial-gradient(
        circle at 96% 10%,
        rgba(200, 110, 60, 0.08) 0 16%,
        transparent 16.5%
      ),
      repeating-linear-gradient(
        135deg,
        transparent 0 27px,
        rgba(51, 39, 30, 0.025) 27px 28px
      ),
      var(--sw-menu-cream) !important;

    color: var(--sw-menu-brown) !important;
    border-right: 1px solid rgba(51, 39, 30, 0.32) !important;
    box-shadow: 12px 0 36px rgba(35, 26, 20, 0.12);
    overflow-x: hidden;
  }

  #header-component .menu-drawer__backdrop {
    backdrop-filter: blur(2px) brightness(0.62);
    -webkit-backdrop-filter: blur(2px) brightness(0.62);
  }

  /* Circular close button */
  #header-component .menu-drawer__close-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    margin: 14px 0 8px 14px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(244, 239, 228, 0.96) !important;
    color: var(--sw-menu-brown) !important;

    border: 1px solid rgba(51, 39, 30, 0.24) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(35, 26, 20, 0.06) !important;
  }

  #header-component .menu-drawer__close-button .svg-wrapper {
    width: 12px !important;
    height: 12px !important;
  }

  #header-component .menu-drawer__close-button:focus-visible::after {
    border-radius: 999px !important;
  }

  /* Menu content */
  #header-component .menu-drawer__navigation {
    padding: 18px 22px 28px !important;
  }

  #header-component .menu-drawer__navigation::before {
    content: "01 / MENU";
    display: block;
    margin: 2px 0 22px;

    color: var(--sw-menu-orange);

    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  #header-component .menu-drawer__navigation > .menu-drawer__menu {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Main menu groups */
  #header-component .menu-drawer__navigation > .menu-drawer__menu > .menu-drawer__list-item--flat,
  #header-component .menu-drawer__navigation > .menu-drawer__menu > .menu-drawer__list-item--deep {
    min-height: 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--sw-menu-line);
  }

  #header-component .menu-drawer__navigation > .menu-drawer__menu > li:last-child {
    border-bottom: 1px solid var(--sw-menu-line);
  }

  /* HOME / SHOP / ABOUT US / CONTACT */
  #header-component .menu-drawer__menu-item--mainlist {
    min-height: 0 !important;
    padding: 17px 0 15px !important;

    color: var(--sw-menu-brown) !important;

    font-family: var(--font-heading--family) !important;
    font-size: clamp(30px, 8.5vw, 35px) !important;
    font-style: normal !important;
    font-weight: var(--font-heading--weight) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.035em !important;
    text-transform: uppercase !important;

    transition:
      color 160ms ease,
      transform 160ms ease;
  }

  #header-component .menu-drawer__menu-item--mainlist:active {
    color: var(--sw-menu-orange) !important;
    transform: translateX(3px);
  }

  /* Shop submenu */
  #header-component .menu-drawer__list-item--flat > .menu-drawer__menu--childlist {
    width: 100%;
    flex-grow: 0 !important;

    margin: -1px 0 16px !important;
    padding: 1px 0 2px 14px !important;

    border-left: 1px solid var(--sw-menu-orange);
  }

  /* SHOP ALL / T-SHIRTS / HOODIES / ACCESSORIES */
  #header-component .menu-drawer__menu-item--child {
    min-height: 0 !important;
    padding: 7px 0 !important;

    color: var(--sw-menu-brown) !important;

    font-family: var(--font-body--family) !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;

    transition:
      color 160ms ease,
      padding-left 160ms ease;
  }

  #header-component .menu-drawer__menu-item--child::after {
    content: "→";
    margin-left: auto;
    padding-left: 14px;

    color: var(--sw-menu-orange);
    font-size: 13px;
    font-weight: 400;
    opacity: 0.7;
  }

  #header-component .menu-drawer__menu-item--child:active {
    color: var(--sw-menu-orange) !important;
    padding-left: 4px !important;
  }

  /* Current page */
  #header-component .menu-drawer__menu-item--active,
  #header-component .menu-drawer a[aria-current="page"] {
    color: var(--sw-menu-orange) !important;
  }

  /* Bottom branding */
  #header-component .menu-drawer__utility-links {
    width: 100%;
    margin: auto 0 0 !important;
    padding: 20px 22px 22px !important;

    border-top: 1px solid var(--sw-menu-line);
    background: rgba(244, 239, 228, 0.62);
  }

  #header-component .menu-drawer__utility-links::before {
    content: "SALTY WORN";
    display: block;

    color: var(--sw-menu-brown);

    font-family: var(--font-heading--family);
    font-size: 24px;
    font-weight: var(--font-heading--weight);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  #header-component .menu-drawer__utility-links::after {
    content: "COASTAL SUPPLY · EST. 2026";
    display: block;
    margin-top: 7px;

    color: var(--sw-menu-orange);

    font-family: var(--font-body--family);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }
}

/* =========================================================
   DESKTOP SHOP MENU
   Compact text-only dropdown
   ========================================================= */

@media screen and (min-width: 750px) {
  /* Clean dropdown surface - no leftover divider/shadow line */
  #header-component .menu-list__submenu {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    background: var(--sw-menu-cream) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* The theme adds its own open-header shadow. Remove it for this cleaner menu. */
  #header-component .header__underlay-open::after {
    box-shadow: none !important;
  }

  /* Remove the old featured collection/product cards completely */
  #header-component .mega-menu__content,
  #header-component .mega-menu__content-list,
  #header-component .mega-menu__content-list-item {
    display: none !important;
  }

  /* Collapse the old mega-menu grid to the text links only */
  #header-component .menu-list__submenu [data-menu-grid-id],
  #header-component .mega-menu__grid {
    display: block !important;

    min-height: 0 !important;
    height: auto !important;

    padding: 28px 42px 30px !important;
    margin: 0 !important;

    grid-template-columns: none !important;
    gap: 0 !important;
    align-items: start !important;
  }

  #header-component .mega-menu {
    min-height: 0 !important;
    height: auto !important;
    --menu-content-columns-desktop: 0 !important;
  }

  /* Narrow editorial link column */
  #header-component .mega-menu__list,
  #header-component [data-menu-list-id] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;

    width: 320px !important;
    max-width: 320px !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-template-columns: 1fr !important;
    grid-column: 1 / -1 !important;
  }

  #header-component .mega-menu__column {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #header-component .mega-menu__column > div {
    width: 100% !important;
  }

  /* Small label above links */
  #header-component .mega-menu__column:first-child::before {
    content: "01 / SHOP";
    display: block;
    margin-bottom: 18px;

    color: var(--sw-menu-orange);

    font-family: var(--font-body--family);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* SHOP ALL / T-SHIRTS / HOODIES / ACCESSORIES */
  #header-component .mega-menu__column > div > .mega-menu__link {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    min-height: 47px !important;
    padding: 10px 0 12px !important;

    color: var(--sw-menu-brown) !important;
    border-bottom: 1px solid var(--sw-menu-line) !important;

    font-family: var(--font-heading--family) !important;
    font-size: clamp(19px, 1.45vw, 24px) !important;
    font-weight: var(--font-heading--weight) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;

    transition:
      color 180ms ease,
      padding-left 180ms ease !important;
  }

  #header-component .mega-menu__column > div:first-of-type > .mega-menu__link {
    border-top: 1px solid var(--sw-menu-line) !important;
  }

  /* Arrow appears on hover or stays visible for the current page */
  #header-component .mega-menu__column > div > .mega-menu__link::after {
    content: "→";
    margin-left: 18px;

    color: var(--sw-menu-orange);
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 400;

    opacity: 0;
    transform: translateX(-6px);

    transition:
      opacity 180ms ease,
      transform 180ms ease !important;
  }

  #header-component .mega-menu__column > div > .mega-menu__link:hover {
    color: var(--sw-menu-orange) !important;
    padding-left: 5px !important;
  }

  #header-component .mega-menu__column > div > .mega-menu__link:hover::after {
    opacity: 1;
    transform: translateX(0);
  }

  /* Current collection/page */
  #header-component .mega-menu__link--active,
  #header-component .mega-menu__link[aria-current="page"] {
    color: var(--sw-menu-orange) !important;
    padding-left: 5px !important;
  }

  #header-component .mega-menu__link--active::after,
  #header-component .mega-menu__link[aria-current="page"]::after {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

/* =========================================================
   SALTY WORN
   PRODUCT PAGE SYSTEM
   ========================================================= */

[data-testid="product-information"] {
  --sw-product-ink: #332d28;
  --sw-product-paper: #f6f0e5;
  --sw-product-orange: #c96d3a;
  --sw-product-orange-soft: rgba(201, 109, 58, 0.13);
  --sw-product-line: rgba(51, 45, 40, 0.18);
  --sw-product-line-strong: rgba(51, 45, 40, 0.38);
}


/* =========================================================
   MAIN PRODUCT LAYOUT
   ========================================================= */

[data-testid="product-information"] .product-information__grid {
  align-items: start;
}

[data-testid="product-information-details"] > .group-block {
  position: relative;
}


/* 01 / THE PRODUCT */

[data-testid="product-information-details"] > .group-block::before {
  content: "01 / THE PRODUCT";
  display: block;
  margin-bottom: 20px;

  color: var(--sw-product-orange);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

[data-testid="product-information-details"] h1 {
  margin: 0 !important;

  color: var(--sw-product-ink) !important;

  font-family: var(--font-h1--family) !important;
  font-style: var(--font-h1--style) !important;
  font-weight: var(--font-h1--weight) !important;

  font-size: clamp(44px, 4.2vw, 72px) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;

  text-transform: uppercase;
  text-wrap: balance;
}


/* Price */

[data-testid="product-information-details"] .price,
[data-testid="product-information-details"] .price-item {
  color: var(--sw-product-ink);
}


/* =========================================================
   PRODUCT MEDIA
   ========================================================= */

[data-testid="product-information-media"] media-gallery {
  --media-radius: 12px !important;
}

[data-testid="product-information-media"] .media-gallery__grid {
  gap: 12px !important;
}

[data-testid="product-information-media"] media-gallery > .media-gallery__grid .product-media-container,
[data-testid="product-information-media"] media-gallery > slideshow-component .product-media-container {
  overflow: hidden;

  border: 1px solid rgba(51, 45, 40, 0.16);
  border-radius: 12px !important;

  box-shadow: 3px 3px 0 rgba(201, 109, 58, 0.18);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

[data-testid="product-information-media"] media-gallery > .media-gallery__grid .product-media-container img,
[data-testid="product-information-media"] media-gallery > slideshow-component .product-media-container img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Desktop image interaction */

@media (hover: hover) and (pointer: fine) {

  [data-testid="product-information-media"] media-gallery > .media-gallery__grid .product-media-container:hover {
    transform: translateY(-3px);

    border-color: rgba(201, 109, 58, 0.46);

    box-shadow: 6px 6px 0 rgba(201, 109, 58, 0.28);
  }

  [data-testid="product-information-media"] media-gallery > .media-gallery__grid .product-media-container:hover img {
    transform: scale(1.018);
  }
}


/* =========================================================
   VARIANT PICKER
   ========================================================= */

[data-testid="product-information-details"] .variant-picker {
  margin-top: 4px;
}

[data-testid="product-information-details"] .variant-option {
  margin-bottom: 18px;
}

[data-testid="product-information-details"] .variant-option legend,
[data-testid="product-information-details"] .variant-option > label:not(.variant-option__button-label) {
  margin-bottom: 10px;

  color: var(--sw-product-ink);

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* Button options */

[data-testid="product-information-details"]
.variant-option--buttons:not(.variant-option--swatches) {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

[data-testid="product-information-details"]
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 48px;
  min-height: 46px;
  padding: 9px 15px !important;

  cursor: pointer;

  color: var(--sw-product-ink) !important;
  background: rgba(246, 240, 229, 0.62) !important;

  border: 1px solid #c9baa7 !important;
  border-radius: 999px !important;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

[data-testid="product-information-details"]
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label__pill {
  background: transparent !important;
  border: 0 !important;
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

  [data-testid="product-information-details"]
  .variant-option--buttons:not(.variant-option--swatches)
  .variant-option__button-label:hover {
    transform: translateY(-2px);

    border-color: var(--sw-product-orange) !important;
  }
}


/* Selected */

[data-testid="product-information-details"]
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label:has(input:checked) {
  color: #ffffff !important;
  background: var(--sw-product-ink) !important;

  border-color: var(--sw-product-ink) !important;

  box-shadow: 3px 3px 0 var(--sw-product-orange);
}

[data-testid="product-information-details"]
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label:has(input:checked)
.variant-option__button-label__text {
  color: #ffffff !important;
}


/* Sold out */

[data-testid="product-information-details"]
.variant-option__button-label:has(input[aria-disabled="true"]) {
  opacity: 0.35;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

[data-testid="product-information-details"] .product-form-buttons {
  margin-top: 4px;
}

[data-testid="product-information-details"] .add-to-cart-button {
  min-height: 58px;

  color: #ffffff !important;
  background: var(--sw-product-ink) !important;

  border: 1px solid var(--sw-product-ink) !important;
  border-radius: 0 !important;

  box-shadow: 5px 5px 0 var(--sw-product-orange);

  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {

  [data-testid="product-information-details"] .add-to-cart-button:hover:not(:disabled) {
    transform: translate(2px, 2px);

    box-shadow: 2px 2px 0 var(--sw-product-orange);
  }
}


/* =========================================================
   PRODUCT ACCORDIONS
   ========================================================= */

[data-testid="product-information-details"] .accordion {
  margin-top: 28px;

  border-top: 1px solid var(--sw-product-ink);
}

[data-testid="product-information-details"] .details {
  border-bottom: 1px solid var(--sw-product-line-strong);
}

[data-testid="product-information-details"] .details__header {
  min-height: 58px;
  padding: 18px 0;

  color: var(--sw-product-ink);

  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;

  transition: color 0.2s ease;
}

[data-testid="product-information-details"] .details__header:hover {
  color: var(--sw-product-orange);
}

[data-testid="product-information-details"] .details-content {
  padding: 0 0 22px;

  color: var(--sw-product-ink);

  font-size: 14px;
  line-height: 1.65;
}

[data-testid="product-information-details"] .details-content p:first-child {
  margin-top: 0;
}

[data-testid="product-information-details"] .details__header .icon-plus {
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

[data-testid="product-information-details"] .details[open] .details__header .icon-plus {
  color: var(--sw-product-orange);

  transform: rotate(45deg);
}

[data-testid="product-information-details"] .details[open] .details-content {
  animation: sw-product-accordion-in 0.28s ease both;
}

@keyframes sw-product-accordion-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   SALTY WORN SIZE CHART
   ========================================================= */

.sw-size-chart {
  width: 100%;
  margin-top: 16px;

  color: var(--sw-product-ink);
}

.sw-size-chart__radio {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.sw-size-chart__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 14px;
}

.sw-size-chart__units {
  display: inline-flex;
  gap: 8px;
}

.sw-size-chart__unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 50px;
  height: 36px;
  padding: 0 14px;

  cursor: pointer;

  color: var(--sw-product-ink);
  background: transparent;

  border: 1px solid #d3cec5;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#sw-size-cm:checked ~ .sw-size-chart__topbar label[for="sw-size-cm"],
#sw-size-in:checked ~ .sw-size-chart__topbar label[for="sw-size-in"] {
  color: #ffffff;
  background: var(--sw-product-ink);

  border-color: var(--sw-product-ink);

  box-shadow: 2px 2px 0 var(--sw-product-orange);
}

.sw-size-chart__hint {
  color: rgba(51, 45, 40, 0.62);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sw-size-chart__table-wrap {
  width: 100%;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  scrollbar-width: thin;
  scrollbar-color: var(--sw-product-orange) transparent;
}

.sw-size-chart__table-wrap::-webkit-scrollbar {
  height: 4px;
}

.sw-size-chart__table-wrap::-webkit-scrollbar-thumb {
  background: var(--sw-product-orange);
}

.sw-size-chart__table {
  display: none;

  width: 100%;
  min-width: 455px;

  border-collapse: collapse;

  font-size: 12px;
}

#sw-size-cm:checked ~ .sw-size-chart__table-wrap .sw-size-chart__table--cm {
  display: table;
}

#sw-size-in:checked ~ .sw-size-chart__table-wrap .sw-size-chart__table--in {
  display: table;
}

.sw-size-chart__table th,
.sw-size-chart__table td {
  padding: 13px 11px;

  text-align: center;

  border-bottom: 1px solid rgba(51, 45, 40, 0.11);

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.sw-size-chart__table th:first-child,
.sw-size-chart__table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;

  width: 95px;

  text-align: left;

  color: var(--sw-product-ink);
  background: var(--sw-product-paper);
}

.sw-size-chart__table td:first-child {
  font-weight: 600;
}

.sw-size-chart__table thead th {
  padding-top: 7px;
  padding-bottom: 10px;
}

.sw-size-chart__size-button {
  width: 38px;
  height: 38px;
  padding: 0;

  cursor: pointer;

  color: var(--sw-product-ink);
  background: transparent;

  border: 1px solid transparent;
  border-radius: 50%;

  font: inherit;
  font-weight: 700;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

  .sw-size-chart__size-button:hover:not(:disabled) {
    color: var(--sw-product-orange);

    border-color: var(--sw-product-orange);

    transform: translateY(-2px);
  }
}

.sw-size-chart__size-button:disabled {
  cursor: not-allowed;

  opacity: 0.28;

  text-decoration: line-through;
}


/* Selected size follows the actual product variant */

.sw-size-chart__table td.is-active-size {
  color: var(--sw-product-ink);
  background: var(--sw-product-orange-soft);

  font-weight: 800;
}

.sw-size-chart__table th.is-active-size .sw-size-chart__size-button {
  color: #ffffff;
  background: var(--sw-product-ink);

  border-color: var(--sw-product-ink);

  box-shadow: 2px 2px 0 var(--sw-product-orange);
}

.sw-size-chart__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;

  margin-top: 16px;
  padding: 14px 16px;

  background: rgba(201, 109, 58, 0.07);

  border-left: 2px solid var(--sw-product-orange);
}

.sw-size-chart__note strong {
  color: var(--sw-product-orange);

  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sw-size-chart__note span {
  color: rgba(51, 45, 40, 0.76);

  font-size: 12px;
  line-height: 1.45;
}


/* =========================================================
   PRODUCT RECOMMENDATIONS
   ========================================================= */

.product-recommendations-wrapper {
  --sw-product-ink: #332d28;
  --sw-product-paper: #f6f0e5;
  --sw-product-orange: #c96d3a;
  --sw-product-line: rgba(51, 45, 40, 0.18);
}

.product-recommendations .block-resource-list {
  padding-top: 52px !important;
  padding-bottom: 64px !important;

  border-top: 1px solid var(--sw-product-line);
}

.sw-recommendations-heading {
  margin-bottom: 26px;
}

.sw-recommendations-heading__eyebrow {
  margin: 0 0 14px;

  color: var(--sw-product-orange);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sw-recommendations-heading h2 {
  max-width: 900px;
  margin: 0;

  color: var(--sw-product-ink);

  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);

  font-size: clamp(46px, 6vw, 88px);
  line-height: 0.88;
  letter-spacing: -0.045em;

  text-transform: uppercase;
}

.product-recommendations .resource-list__item img {
  border-radius: 10px;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {

  .product-recommendations .resource-list__item:hover img {
    transform: scale(1.012);

    box-shadow: 4px 4px 0 rgba(201, 109, 58, 0.24);
  }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 750px) {

  [data-testid="product-information"] .product-information__media {
    padding-right: 22px !important;
  }

  [data-testid="product-information"] .product-details {
    padding-left: 24px !important;
  }

  [data-testid="product-information-details"] > .group-block {
    padding-top: 40px !important;
    padding-left: 10px !important;
    padding-right: 28px !important;

    border-left: 1px solid var(--sw-product-line);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  [data-testid="product-information-media"] media-gallery {
    width: calc(100% - 24px);
    margin-inline: 12px;
  }

  [data-testid="product-information-details"] > .group-block {
    padding: 28px 20px 8px !important;
  }

  [data-testid="product-information-details"] > .group-block::before {
    margin-bottom: 16px;
  }

  [data-testid="product-information-details"] h1 {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

  [data-testid="product-information-details"] .add-to-cart-button {
    min-height: 56px;

    box-shadow: 4px 4px 0 var(--sw-product-orange);
  }

  [data-testid="product-information-details"] .accordion {
    margin-top: 26px;
  }

  .sw-size-chart__topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .sw-size-chart__hint {
    font-size: 8px;
  }

  .sw-size-chart__table {
    min-width: 440px;
  }

  .sw-size-chart__table th,
  .sw-size-chart__table td {
    padding: 12px 9px;
  }

  .sw-size-chart__note {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .product-recommendations .block-resource-list {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  .sw-recommendations-heading h2 {
    font-size: clamp(42px, 13vw, 60px);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  [data-testid="product-information"] *,
  .sw-size-chart *,
  .product-recommendations * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   SALTY WORN - PRODUCT EXPERIENCE
   ========================================================= */

:root {
  --sw-product-cream: #f4efe4;
  --sw-product-brown: #33271e;
  --sw-product-orange: #c86e3c;
  --sw-product-line: rgba(51, 39, 30, 0.18);
  --sw-product-muted: rgba(51, 39, 30, 0.64);
}


/* =========================================================
   PRODUCT DETAILS
   ========================================================= */

.product-information .product-details > .group-block {
  position: relative;
}

.product-information .product-details > .group-block::before {
  content: "01 / THE GOODS";
  display: block;
  margin-bottom: 18px;

  color: var(--sw-product-orange);

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.product-information .product-details h1 {
  margin: 0;

  color: var(--sw-product-brown);

  font-family: var(--font-heading--family) !important;
  font-size: clamp(42px, 4.5vw, 72px) !important;
  font-weight: var(--font-heading--weight) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.035em !important;
  text-transform: uppercase;
}

.product-information .product-details .price {
  color: var(--sw-product-brown);
}


/* =========================================================
   PRODUCT MEDIA
   ========================================================= */

.product-information .product-media-container {
  overflow: hidden;

  border: 1px solid var(--sw-product-line);
  border-radius: 10px !important;

  background: var(--sw-product-cream);
}

.product-information .product-media-container img {
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 300ms ease;
}

@media screen and (min-width: 990px) {
  .product-information .product-media-container:hover img {
    transform: scale(1.012);
  }
}


/* =========================================================
   VARIANT OPTIONS
   ========================================================= */

.product-information .variant-option legend,
.product-information .variant-option {
  color: var(--sw-product-brown);
}

.product-information .variant-option legend {
  margin-bottom: 9px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-information .variant-option__button-label {
  transition:
    transform 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.product-information .variant-option__button-label:hover {
  transform: translateY(-2px);
}

.product-information .variant-option__button-label:has(input:checked) {
  transform: translateY(-1px);
}


/* =========================================================
   ADD TO CART
   ========================================================= */

.product-information .add-to-cart-button {
  min-height: 56px;

  border-radius: 0 !important;

  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  box-shadow: 6px 6px 0 var(--sw-product-orange);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.product-information .add-to-cart-button:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--sw-product-orange);
}

.product-information .add-to-cart-button:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--sw-product-orange);
}


/* =========================================================
   ACCORDIONS
   ========================================================= */

.product-information .accordion {
  margin-top: 8px;
}

.product-information .accordion .details {
  border-color: var(--sw-product-line);
}

.product-information .accordion .details__header {
  min-height: 58px;

  color: var(--sw-product-brown);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    padding-left 160ms ease;
}

.product-information .accordion .details__header:hover {
  color: var(--sw-product-orange);
  padding-left: 5px;
}

.product-information .accordion .details-content {
  color: var(--sw-product-brown);
}

.product-information .accordion .details-content p {
  line-height: 1.65;
}


/* =========================================================
   SIZE CHART
   ========================================================= */

.product-information .sw-size-chart {
  margin-top: 10px;
  color: var(--sw-product-brown);
}

.product-information .sw-size-chart input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product-information .sw-size-chart__toggle {
  display: inline-flex;
  gap: 5px;

  margin: 4px 0 18px;
  padding: 4px;

  border: 1px solid var(--sw-product-line);
  border-radius: 999px;

  background: rgba(244, 239, 228, 0.6);
}

.product-information .sw-size-chart__toggle label {
  min-width: 48px;
  padding: 8px 13px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 0;
  border-radius: 999px;

  color: var(--sw-product-brown);
  background: transparent;

  cursor: pointer;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;

  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.product-information
  #slow-living-cm:checked
  ~ .sw-size-chart__toggle
  label[for="slow-living-cm"],
.product-information
  #slow-living-in:checked
  ~ .sw-size-chart__toggle
  label[for="slow-living-in"] {
  color: var(--sw-product-cream);
  background: var(--sw-product-brown);
}

.product-information .sw-size-chart__toggle label:hover {
  transform: translateY(-1px);
}

.product-information .sw-size-chart__table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.product-information .size-table {
  width: 100%;
  min-width: 500px;

  border-collapse: collapse;

  font-size: 12px;
}

.product-information .size-table th,
.product-information .size-table td {
  padding: 12px 10px;

  border-bottom: 1px solid var(--sw-product-line);

  text-align: center;
  white-space: nowrap;

  transition:
    background 160ms ease,
    color 160ms ease;
}

.product-information .size-table th:first-child,
.product-information .size-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;

  width: 105px;

  color: var(--sw-product-brown);
  background: var(--sw-product-cream);

  text-align: left;
}

.product-information .size-table th {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-information .size-table tbody tr:hover td {
  background: rgba(200, 110, 60, 0.06);
}

.product-information .size-table [data-size].is-selected,
.product-information .size-table [data-size][data-selected="true"] {
  color: var(--sw-product-brown);
  background: rgba(200, 110, 60, 0.13);
}

.product-information .cm-table,
.product-information .in-table {
  display: none;
}

.product-information #slow-living-cm:checked ~ * .cm-table {
  display: table;
}

.product-information #slow-living-in:checked ~ * .in-table {
  display: table;
}

.product-information .sw-size-chart__footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding-top: 10px;

  color: var(--sw-product-muted);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/* =========================================================
   PRODUCT RECOMMENDATIONS
   ========================================================= */

.product-recommendations {
  border-top: 1px solid var(--sw-product-line);
}

.product-recommendations .section-resource-list__content {
  padding-bottom: 10px;
}

.product-recommendations .section-resource-list__content p {
  margin: 0 0 12px;

  color: var(--sw-product-orange);

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.product-recommendations .section-resource-list__content h2 {
  margin: 0;

  color: var(--sw-product-brown);

  font-family: var(--font-heading--family);
  font-size: clamp(42px, 5vw, 70px);
  font-weight: var(--font-heading--weight);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.product-recommendations .resource-list__item {
  transition: transform 220ms ease;
}

@media screen and (min-width: 990px) {
  .product-recommendations .resource-list__item:hover {
    transform: translateY(-5px);
  }
}


/* =========================================================
   STICKY ADD TO CART
   ========================================================= */

sticky-add-to-cart .sticky-add-to-cart__bar {
  background: var(--sw-product-cream) !important;

  border: 1px solid var(--sw-product-brown) !important;
  border-radius: 8px !important;

  box-shadow: 6px 6px 0 var(--sw-product-orange) !important;
}

sticky-add-to-cart .sticky-add-to-cart__bar::before {
  display: none !important;
}

sticky-add-to-cart .sticky-add-to-cart__title {
  color: var(--sw-product-brown);

  font-weight: 800;
  letter-spacing: 0.02em;
}

sticky-add-to-cart .sticky-add-to-cart__variant {
  color: var(--sw-product-muted);
}

sticky-add-to-cart .sticky-add-to-cart__button {
  background: var(--sw-product-brown) !important;
  color: var(--sw-product-cream) !important;
}


/* =========================================================
   MOBILE PRODUCT EXPERIENCE
   ========================================================= */

@media screen and (max-width: 749px) {
  .product-information .product-details {
    padding-inline: 20px;
  }

  .product-information .product-details > .group-block {
    padding-top: 28px !important;
  }

  .product-information .product-details > .group-block::before {
    margin-bottom: 14px;
  }

  .product-information .product-details h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
  }

  .product-information .add-to-cart-button {
    min-height: 58px;
    box-shadow: 5px 5px 0 var(--sw-product-orange);
  }

  .product-information .size-table {
    min-width: 475px;
  }

  .product-recommendations .section-resource-list__content h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  sticky-add-to-cart .sticky-add-to-cart__bar {
    border: 0 !important;
    border-top: 1px solid var(--sw-product-brown) !important;
    border-radius: 0 !important;

    box-shadow: 0 -4px 0 var(--sw-product-orange) !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-information *,
  .product-recommendations * {
    transition: none !important;
  }
}

/* =========================================================
   SALTY WORN - PRODUCT EXPERIENCE V2 REFINEMENTS
   ========================================================= */


/* =========================================================
   02 / THE DETAILS
   ========================================================= */

.product-information .product-details .accordion:first-of-type::before {
  content: "02 / THE DETAILS";
  display: block;

  margin: 8px 0 14px;
  padding-top: 4px;

  color: var(--sw-product-orange);

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================================
   PRODUCT DETAILS - TIGHTER RHYTHM
   ========================================================= */

.product-information .product-details > .group-block {
  gap: 28px !important;
}

.product-information .variant-picker {
  padding-bottom: 4px !important;
}

.product-information .buy-buttons-block {
  margin-top: 0;
}


/* =========================================================
   SIZE CHART - SELECTED SIZE
   ========================================================= */

.product-information .size-table th[data-size] {
  cursor: pointer;
}

.product-information .size-table thead th[data-size] {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.product-information .size-table thead th[data-size]:hover {
  color: var(--sw-product-orange);
}

.product-information .size-table thead th[data-size].is-selected {
  color: var(--sw-product-cream);
  background: var(--sw-product-brown);

  border-radius: 5px;

  transform: translateY(-2px);
}

.product-information .size-table tbody td[data-size].is-selected {
  color: var(--sw-product-brown);
  background: rgba(200, 110, 60, 0.14);

  font-weight: 700;
}

.product-information .size-table tbody tr:hover td[data-size].is-selected {
  background: rgba(200, 110, 60, 0.2);
}

.product-information .sw-size-chart__table-wrap {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color:
    var(--sw-product-orange)
    transparent;
}

.product-information
  .sw-size-chart__table-wrap::-webkit-scrollbar {
  height: 5px;
}

.product-information
  .sw-size-chart__table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.product-information
  .sw-size-chart__table-wrap::-webkit-scrollbar-thumb {
  background: var(--sw-product-orange);
  border-radius: 999px;
}


/* =========================================================
   YOU MIGHT ALSO LIKE - HEADING
   ========================================================= */

.product-recommendations
  .section-resource-list__content {
  padding-bottom: 18px;
}

.product-recommendations
  .section-resource-list__content p {
  margin-bottom: 10px;
}

.product-recommendations
  .section-resource-list__content h2 {
  max-width: 620px;

  font-size: clamp(40px, 4vw, 58px);
  line-height: 0.92;
}


/* =========================================================
   RECOMMENDATION CARDS
   ========================================================= */

.product-recommendations .block-resource-list {
  --resource-list-column-gap-desktop: 12px !important;
  --resource-list-gap: 12px !important;
}

.product-recommendations .resource-list__item {
  position: relative;

  min-width: 0;

  padding-bottom: 12px;

  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-recommendations
  .resource-list__item img {
  display: block;

  width: 100%;

  border: 1px solid var(--sw-product-line);
  border-radius: 9px;

  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}

.product-recommendations
  .resource-list__item .product-title,
.product-recommendations
  .resource-list__item [class*="product-title"] {
  margin-top: 12px;

  color: var(--sw-product-brown);

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.product-recommendations
  .resource-list__item .price {
  margin-top: 5px;

  color: var(--sw-product-muted);

  font-size: 11px;
}

.product-recommendations
  .resource-list__item a {
  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 990px) {
  .product-recommendations
    .resource-list__item:hover {
    transform: translateY(-5px);
  }

  .product-recommendations
    .resource-list__item:hover img {
    transform: scale(1.012);

    box-shadow:
      4px 4px 0
      rgba(200, 110, 60, 0.85);
  }
}


/* =========================================================
   MOBILE PRODUCT LAYOUT
   ========================================================= */

@media screen and (max-width: 749px) {

  /*
   * The theme normally forces the product details into the
   * centre page-grid column. That is what is making the
   * description and size chart unnecessarily narrow.
   */
  .product-information
    .product-information__grid
    .product-details {
    grid-column: 1 / -1 !important;

    width: 100%;
    max-width: none;

    padding-inline: 16px;
  }

  .product-information
    .product-details > .group-block {
    width: 100%;
    max-width: none;

    padding-inline: 0 !important;

    gap: 24px !important;
  }

  .product-information
    .product-details .accordion {
    width: 100%;
    max-width: none;
  }

  .product-information
    .product-details .details-content {
    width: 100%;
    max-width: none;
  }

  /*
   * All five sizes should now fit much more naturally,
   * while still allowing horizontal scrolling if needed.
   */
  .product-information .size-table {
    min-width: 440px;

    font-size: 12px;
  }

  .product-information
    .size-table th,
  .product-information
    .size-table td {
    padding: 12px 9px;
  }

  .product-information
    .size-table th:first-child,
  .product-information
    .size-table td:first-child {
    width: 90px;
  }

  /*
   * Recommendation heading was overpowering the cards.
   */
  .product-recommendations
    .section-resource-list__content h2 {
    max-width: 310px;

    font-size: clamp(34px, 10vw, 44px);
    line-height: 0.93;
  }

  .product-recommendations
    .section-resource-list__content {
    padding-bottom: 16px;
  }

  .product-recommendations
    .resource-list__item .product-title,
  .product-recommendations
    .resource-list__item [class*="product-title"] {
    margin-top: 9px;

    font-size: 10px !important;
  }

  .product-recommendations
    .resource-list__item .price {
    font-size: 10px;
  }
}

/* =========================================================
   SALTY WORN - PRODUCT EXPERIENCE V2.2
   FINAL REFINEMENT PASS
   ========================================================= */


/* =========================================================
   PRODUCT DETAIL SPACING
   ========================================================= */

.product-information .product-details > .group-block {
  gap: 22px !important;
}

.product-information .variant-picker {
  padding-block-start: 6px !important;
  padding-block-end: 6px !important;
}


/* =========================================================
   02 / THE DETAILS
   Fixes missing section number
   ========================================================= */

.product-information
.product-details
div.accordion[class*="accordion--"]::before {
  content: "02 / THE DETAILS";
  display: block;

  margin: 2px 0 14px;
  padding: 0;

  color: var(--sw-product-orange);

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================================
   ACCORDION REFINEMENT
   ========================================================= */

.product-information .details__header {
  letter-spacing: 0.09em;
}

.product-information .details-content {
  line-height: 1.55;
}


/* =========================================================
   SIZE CHART - SELECTED COLUMN
   ========================================================= */

.product-information .size-table th[data-size].is-selected {
  color: var(--sw-product-cream);
  background: var(--sw-product-brown);

  font-weight: 800;

  border-radius: 3px;
}

.product-information .size-table td[data-size].is-selected {
  color: var(--sw-product-brown);
  background: rgba(200, 110, 60, 0.12);

  font-weight: 700;
}

.product-information .size-table th[data-size] {
  cursor: pointer;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

@media (hover: hover) {
  .product-information
  .size-table th[data-size]:not(.is-selected):hover {
    color: var(--sw-product-orange);
    transform: translateY(-2px);
  }
}


/* =========================================================
   RECOMMENDATIONS - SECTION HEADING
   ========================================================= */

.product-recommendations
.section-resource-list__content
:is(h1, h2, h3) {
  max-width: 720px;

  margin: 0;

  color: var(--sw-product-brown);

  font-size: clamp(42px, 3.7vw, 56px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.product-recommendations
.section-resource-list__content {
  padding-bottom: 22px;
}


/* =========================================================
   RECOMMENDATION CARDS - SALTY WORN STYLE
   ========================================================= */

.product-recommendations .resource-list {
  counter-reset: salty-recommendations;
}

.product-recommendations .resource-list__item {
  counter-increment: salty-recommendations;

  position: relative;

  padding-bottom: 16px;

  border-bottom: 1px solid rgba(51, 45, 40, 0.18);

  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease;
}


/* Number badge */

.product-recommendations .resource-list__item::before {
  content: counter(salty-recommendations, decimal-leading-zero);

  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: var(--sw-product-brown);
  background: var(--sw-product-cream);

  border: 1px solid rgba(51, 45, 40, 0.75);
  border-radius: 999px;

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;

  pointer-events: none;

  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* Images */

.product-recommendations
.resource-list__item img {
  display: block;

  width: 100%;

  border-radius: 8px;

  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}


/* Product names */

.product-recommendations
.resource-list__item
:is(
  product-title,
  .product-title,
  [class*="product-title"]
) {
  margin-top: 12px;

  color: var(--sw-product-brown);

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-recommendations
.resource-list__item
:is(
  product-title,
  .product-title,
  [class*="product-title"]
)
a {
  color: inherit;
  text-decoration: none;
}


/* Prices */

.product-recommendations
.resource-list__item
:is(
  .price,
  [class*="price"]
) {
  color: var(--sw-product-muted);

  font-size: 11px;
  line-height: 1.3;
}


/* Hover treatment */

@media screen and (min-width: 990px) and (hover: hover) {

  .product-recommendations .resource-list__item:hover {
    transform: translateY(-5px);

    border-bottom-color: var(--sw-product-orange);
  }

  .product-recommendations
  .resource-list__item:hover::before {
    color: var(--sw-product-cream);
    background: var(--sw-product-orange);

    border-color: var(--sw-product-orange);

    transform: translateY(-2px);
  }

  .product-recommendations
  .resource-list__item:hover img {
    transform: scale(1.012);

    box-shadow:
      4px 4px 0 rgba(200, 110, 60, 0.82);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Product information can use essentially the whole screen */

  .product-information
  .product-information__grid
  .product-details {
    grid-column: 1 / -1 !important;

    width: 100%;
    max-width: none;

    padding-inline: 13px;
  }

  .product-information
  .product-details > .group-block {
    width: 100%;
    max-width: none;

    gap: 20px !important;

    padding-inline: 0 !important;
  }


  /* -------------------------------------------------------
     SIZE CHART
     Fit all five sizes on screen instead of horizontal scroll
     ------------------------------------------------------- */

  .product-information .sw-size-chart__table-wrap {
    width: 100%;

    overflow-x: visible;
  }

  .product-information .size-table {
    width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed;

    font-size: 10.5px;
  }

  .product-information
  .size-table th,
  .product-information
  .size-table td {
    padding: 11px 3px;

    text-align: center;
    white-space: nowrap;
  }

  .product-information
  .size-table th:first-child,
  .product-information
  .size-table td:first-child {
    width: 84px;

    padding-left: 10px;

    text-align: left;
  }

  .product-information
  .sw-size-chart__table-wrap::-webkit-scrollbar {
    display: none;
  }


  /* -------------------------------------------------------
     RECOMMENDATIONS
     ------------------------------------------------------- */

  .product-recommendations
  .section-resource-list__content {
    padding-bottom: 18px;
  }

  .product-recommendations
  .section-resource-list__content
  :is(h1, h2, h3) {
    max-width: 300px;

    font-size: 36px;
    line-height: 0.94;
    letter-spacing: -0.04em;
  }

  .product-recommendations
  .resource-list__item {
    padding-bottom: 14px;
  }

  .product-recommendations
  .resource-list__item::before {
    top: 8px;
    left: 8px;

    width: 29px;
    height: 29px;

    font-size: 8px;
  }

  .product-recommendations
  .resource-list__item img {
    border-radius: 7px;
  }

  .product-recommendations
  .resource-list__item
  :is(
    product-title,
    .product-title,
    [class*="product-title"]
  ) {
    margin-top: 9px;

    font-size: 9.5px !important;
    line-height: 1.25;
  }

  .product-recommendations
  .resource-list__item
  :is(
    .price,
    [class*="price"]
  ) {
    margin-top: 3px;

    font-size: 9px;
  }
}

/* =========================================================
   SALTY WORN - PRODUCT EXPERIENCE V2.3
   DETAILS + HOMEPAGE-STYLE RECOMMENDATIONS
   ========================================================= */


/* =========================================================
   02 / THE DETAILS
   Remove awkward upper divider
   ========================================================= */

.product-information
.product-details
div.accordion[class*="accordion--"] {
  border-block-start: 0 !important;
  border-top: 0 !important;
}

.product-information
.product-details
div.accordion[class*="accordion--"]::before {
  content: "02 / THE DETAILS";

  display: block;

  margin: 0 0 0;
  padding: 0 0 12px;

  color: var(--sw-product-orange);

  border-bottom: 1px solid rgba(51, 45, 40, 0.82);

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* =========================================================
   PRODUCT RECOMMENDATIONS
   Homepage-style product grid
   ========================================================= */

product-recommendations[data-salty-product-recommendations="true"] {
  --salty-card-gap: 6px;
}


/* ---------------------------------------------------------
   Clean four-column desktop grid
   --------------------------------------------------------- */

product-recommendations[data-salty-product-recommendations="true"]
.resource-list--grid {
  display: grid !important;

  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: var(--salty-card-gap) !important;

  overflow: visible !important;
}


/* ---------------------------------------------------------
   Individual cards
   --------------------------------------------------------- */

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item {
  position: relative;

  min-width: 0;

  padding: 0 0 22px !important;

  border: 0 !important;

  transform: none !important;
}


/* ---------------------------------------------------------
   Correct 01 / 02 / 03 / 04 number badges
   --------------------------------------------------------- */

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item::before {
  content: attr(data-salty-card-number) !important;

  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 8;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  padding: 0;

  color: #fff;
  background: var(--sw-product-orange);

  border: 0;
  border-radius: 999px;

  box-shadow: none;

  font-family: var(--font-body--family);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;

  pointer-events: none;

  transform: none;
}


/* ---------------------------------------------------------
   Product image
   --------------------------------------------------------- */

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item
.card-gallery {
  overflow: hidden;

  border-radius: 5px;
}

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item
.card-gallery img {
  display: block;

  width: 100%;

  border-radius: 5px;

  transform: none;

  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------------------------------------------------------
   Product information
   Match homepage cards rather than previous custom style
   --------------------------------------------------------- */

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item
:is(
  product-title,
  .product-title,
  [class*="product-title"]
) {
  margin: 0;

  color: var(--sw-product-brown);

  font-family: var(--font-body--family);
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item
:is(
  product-title,
  .product-title,
  [class*="product-title"]
)
a {
  color: inherit;

  text-decoration: none;
}

product-recommendations[data-salty-product-recommendations="true"]
.resource-list__item
:is(
  .price,
  [class*="price"]
) {
  margin-top: 5px;

  color: rgba(51, 45, 40, 0.68);

  font-family: var(--font-body--family);
  font-size: 11px !important;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}


/* =========================================================
   QUICK ADD
   Recreate homepage button styling
   ========================================================= */

product-recommendations[data-salty-product-recommendations="true"]
.quick-add {
  --quick-add-offset: 12px;
}

product-recommendations[data-salty-product-recommendations="true"]
button.quick-add__button {
  --quick-add-background: var(--sw-product-cream);
  --quick-add-foreground: var(--sw-product-brown);

  color: var(--sw-product-brown) !important;
  background: var(--sw-product-cream) !important;

  border: 1px solid var(--sw-product-brown) !important;
  border-radius: 0 !important;

  box-shadow:
    4px 4px 0 var(--sw-product-orange);

  font-family: var(--font-body--family);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* Keep icon clean */

product-recommendations[data-salty-product-recommendations="true"]
button.quick-add__button
.svg-wrapper {
  color: var(--sw-product-brown);
}


/* Slight lift when interacting */

@media screen and (min-width: 750px) and (hover: hover) {

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item:hover
  .card-gallery img {
    transform: scale(1.012);
  }

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item:hover
  button.quick-add__button {
    opacity: 1;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  button.quick-add__button:is(:hover, :focus-visible) {
    box-shadow:
      5px 5px 0 var(--sw-product-orange);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item {
    padding-bottom: 20px !important;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item::before {
    top: 8px;
    left: 8px;

    width: 34px;
    height: 34px;

    font-size: 8px;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item
  :is(
    product-title,
    .product-title,
    [class*="product-title"]
  ) {
    font-size: 13px !important;
    line-height: 1.3;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  .resource-list__item
  :is(
    .price,
    [class*="price"]
  ) {
    margin-top: 4px;

    font-size: 10px !important;
  }

  product-recommendations[data-salty-product-recommendations="true"]
  button.quick-add__button {
    box-shadow:
      3px 3px 0 var(--sw-product-orange);
  }
}
/* =========================================================
   SALTY WORN
   PRODUCT RECOMMENDATIONS - FINAL
   ========================================================= */

body.sw-theme .product-recommendations {
  --sw-rec-media-radius: 12px;
  --sw-rec-media-inset: 8px;
}


/* =========================================================
   REMOVE ALL OLD NUMBER BADGES
   Overrides every previous recommendation-number system
   ========================================================= */

body.sw-theme .product-recommendations .resource-list__item::before,
body.sw-theme product-recommendations[data-salty-product-recommendations="true"] .resource-list__item::before,
body.sw-theme .product-recommendations product-card::before,
body.sw-theme .product-recommendations .card-gallery::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   CAROUSEL
   Remove Horizon's desktop peek so this feels like The Range
   ========================================================= */

@media screen and (min-width: 750px) {
  body.sw-theme .product-recommendations .resource-list__carousel {
    --peek-next-slide-size: 0px;
  }
}


/* =========================================================
   CARD RESET
   Remove the older recommendation treatments
   ========================================================= */

body.sw-theme .product-recommendations .resource-list__item {
  position: relative;

  min-width: 0;

  padding-bottom: 0 !important;

  border: 0 !important;
  border-bottom: 0 !important;

  background: transparent !important;

  transform: none !important;
}

body.sw-theme .product-recommendations .resource-list__item:hover {
  border-color: transparent !important;
  transform: none !important;
}


/* =========================================================
   PRODUCT IMAGE
   Clean Salty Worn card treatment
   ========================================================= */

body.sw-theme .product-recommendations .product-card .card-gallery {
  margin:
    var(--sw-rec-media-inset)
    var(--sw-rec-media-inset)
    8px;

  overflow: hidden;

  border: 1px solid rgba(51, 39, 30, 0.10);
  border-radius: 10px !important;

  background: transparent !important;

  box-shadow: none;

  transform: translateZ(0);

  transition:
    transform 280ms var(--sw-ease-out, ease),
    border-color 220ms ease,
    box-shadow 280ms var(--sw-ease-out, ease);
}


/* Remove any extra Horizon/Fabric surface behind the image */

body.sw-theme .product-recommendations
.product-card .card-gallery :is(
  slideshow-component,
  slideshow-container,
  slideshow-slides,
  slideshow-slide,
  .product-media-container,
  .product-media
) {
  border: 0 !important;
  border-radius: inherit !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* Product image */

body.sw-theme .product-recommendations
.product-card .card-gallery img {
  display: block;

  width: 100%;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  filter: saturate(0.97) contrast(0.99);

  transform: scale(1.002);

  transition:
    transform 420ms var(--sw-ease-out, ease),
    filter 260ms ease;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme .product-recommendations
  .product-card:hover
  .card-gallery {
    border-color: rgba(200, 110, 60, 0.34);

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.18),
      0 12px 24px rgba(51, 39, 30, 0.08);

    transform: translateY(-2px);
  }


  body.sw-theme .product-recommendations
  .product-card:hover
  .card-gallery img {
    filter: saturate(1) contrast(1);

    transform: scale(1.022);
  }
}


/* =========================================================
   PRODUCT INFORMATION
   Match homepage card structure
   ========================================================= */

body.sw-theme .product-recommendations
.product-card__content {
  min-height: 100%;
}


/* Reset the old grid that was applied directly to group-block */

body.sw-theme .product-recommendations
.product-card__content > .group-block {
  position: relative;

  display: block !important;

  padding: 10px 18px 17px !important;

  border: 0 !important;
  border-top: 0 !important;

  background: transparent !important;
}


/* Title left, price right */

body.sw-theme .product-recommendations
.product-card__content > .group-block > .group-block-content {
  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto;

  column-gap: 18px !important;
  row-gap: 8px !important;

  align-items: start !important;
}


/* Product title */

body.sw-theme .product-recommendations
.product-card__content > .group-block
a[ref="productTitleLink"] > .text-block {
  grid-column: 1;
  grid-row: 1;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


body.sw-theme .product-recommendations
a[ref="productTitleLink"] p[role="heading"] {
  margin: 0;

  color: var(--sw-ink, #33271e) !important;

  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.075em !important;

  text-transform: uppercase !important;

  transition: color 180ms ease;
}


@media (hover: hover) {
  body.sw-theme .product-recommendations
  .product-card:hover
  a[ref="productTitleLink"] p[role="heading"] {
    color: var(--sw-accent, #c86e3c) !important;
  }
}


/* Product price */

body.sw-theme .product-recommendations
.product-card__content > .group-block product-price {
  grid-column: 2;
  grid-row: 1;

  justify-self: end;
  align-self: start;

  width: auto !important;
  min-width: max-content;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(51, 39, 30, 0.68) !important;

  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.025em !important;

  text-transform: uppercase;
}


body.sw-theme .product-recommendations
.product-card__content > .group-block
product-price :is(span, s, div) {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* Extra content such as swatches sits underneath */

body.sw-theme .product-recommendations
.product-card__content > .group-block
> .group-block-content
> :not(a):not(product-price) {
  grid-column: 1 / -1;
}


/* =========================================================
   ORANGE CARD DETAIL
   Same little hover rule as the homepage
   ========================================================= */

body.sw-theme .product-recommendations
.product-card__content > .group-block::after {
  content: "";

  position: absolute;
  left: 18px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--sw-accent, #c86e3c);

  transition: width 220ms ease;
}


@media (hover: hover) {
  body.sw-theme .product-recommendations
  .product-card:hover
  .product-card__content > .group-block::after {
    width: calc(100% - 36px);
  }
}


/* =========================================================
   QUICK ADD
   One consistent "ADD" button for every recommendation
   ========================================================= */

body.sw-theme .product-recommendations .quick-add {
  --quick-add-offset: 12px !important;
}


/* ---------------------------------------------------------
   BUTTON
   --------------------------------------------------------- */

body.sw-theme .product-recommendations
button.quick-add__button {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  color: var(--sw-bg, #f4efe4) !important;
  background: var(--sw-ink, #33271e) !important;

  border: 1px solid var(--sw-ink, #33271e) !important;
  border-radius: 7px !important;

  box-shadow:
    3px 3px 0 var(--sw-accent, #c86e3c) !important;

  /*
   * Hide Horizon's original ADD / CHOOSE text.
   * We create our own consistent ADD label below.
   */
  font-size: 0 !important;
  line-height: 1 !important;

  overflow: visible !important;

  transform: translate(0, 0);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}


/* Hide inherited text sizing inside Horizon's label elements */

body.sw-theme .product-recommendations
button.quick-add__button
> :not(.add-to-cart-icon):not(.svg-wrapper) {
  font-size: 0 !important;
}


/* ---------------------------------------------------------
   OUR CONSISTENT LABEL
   --------------------------------------------------------- */

body.sw-theme .product-recommendations
button.quick-add__button::after {
  content: "ADD";

  display: inline-block;

  color: currentColor;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  letter-spacing: 0.10em !important;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

body.sw-theme .product-recommendations
button.quick-add__button
.add-to-cart-icon,
body.sw-theme .product-recommendations
button.quick-add__button
.svg-wrapper {
  width: 15px !important;
  height: 15px !important;

  flex: 0 0 15px !important;

  color: currentColor !important;
}


body.sw-theme .product-recommendations
button.quick-add__button svg {
  color: currentColor !important;
}


/* ---------------------------------------------------------
   DESKTOP HOVER
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme .product-recommendations
  button.quick-add__button:hover {
    background: var(--sw-ink, #33271e) !important;

    border-color: var(--sw-ink, #33271e) !important;

    box-shadow:
      5px 5px 0 var(--sw-accent, #c86e3c) !important;

    transform: translate(-2px, -2px);
  }
}


/* =========================================================
   QUICK ADD - MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme .product-recommendations .quick-add {
    --quick-add-offset: 9px !important;
  }


  body.sw-theme .product-recommendations
  button.quick-add__button {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 0 8px !important;

    gap: 5px !important;

    border-radius: 6px !important;

    box-shadow:
      2px 2px 0 var(--sw-accent, #c86e3c) !important;
  }


  body.sw-theme .product-recommendations
  button.quick-add__button::after {
    font-size: 8px !important;

    letter-spacing: 0.09em !important;
  }


  body.sw-theme .product-recommendations
  button.quick-add__button
  .add-to-cart-icon,
  body.sw-theme .product-recommendations
  button.quick-add__button
  .svg-wrapper {
    width: 14px !important;
    height: 14px !important;

    flex: 0 0 14px !important;
  }
}

/* =========================================================
   PRODUCT VARIANTS - KEEP MULTI-WORD OPTIONS ON ONE LINE
   ========================================================= */

.product-information
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label {
  width: auto !important;
  min-width: 48px !important;
  max-width: none !important;
  flex: 0 0 auto !important;

  white-space: nowrap !important;
}

.product-information
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label__text {
  white-space: nowrap !important;
}
/* =========================================================
   SALTY WORN - COLLECTION PRODUCT CARDS V2
   Clean collection grid based on homepage/product rec cards
   ========================================================= */

body.sw-theme [data-salty-collection="true"] {
  --sw-collection-media-radius: 10px;
  --sw-collection-media-inset: 8px;
}


/* =========================================================
   GRID
   Keep it clean - no boxed-in divider lines
   ========================================================= */

body.sw-theme [data-salty-collection="true"] .product-grid {
  gap: 0 !important;
}

body.sw-theme [data-salty-collection="true"] .product-grid__item {
  position: relative;

  min-width: 0;

  padding: 0 !important;

  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  background: transparent !important;
}

body.sw-theme [data-salty-collection="true"] .product-card {
  background: transparent !important;
}


/* =========================================================
   PRODUCT MEDIA
   Rounded, subtle and slightly lifted like the homepage
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.product-card .card-gallery {
  margin:
    var(--sw-collection-media-inset)
    var(--sw-collection-media-inset)
    7px;

  overflow: hidden;

  border: 1px solid rgba(51, 39, 30, 0.13);
  border-radius: var(--sw-collection-media-radius) !important;

  background: var(--sw-panel);

  box-shadow:
    0 6px 18px rgba(51, 39, 30, 0.055);

  transform: translateZ(0);

  transition:
    transform 280ms var(--sw-ease-out),
    border-color 220ms ease,
    box-shadow 280ms var(--sw-ease-out);
}


/* Keep everything inside the rounded media frame */

body.sw-theme [data-salty-collection="true"]
.product-card .card-gallery :is(
  slideshow-component,
  slideshow-container,
  slideshow-slides,
  slideshow-slide,
  .product-media-container,
  .product-media
) {
  border: 0 !important;
  border-radius: inherit !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* Actual image */

body.sw-theme [data-salty-collection="true"]
.product-card .card-gallery img {
  display: block;

  width: 100%;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  filter:
    saturate(0.97)
    contrast(0.99);

  transform: scale(1.002);

  transition:
    transform 420ms var(--sw-ease-out),
    filter 260ms ease;
}


/* Hide the little internal gallery arrows */

body.sw-theme [data-salty-collection="true"]
product-card slideshow-arrows,
body.sw-theme [data-salty-collection="true"]
product-card .slideshow-controls__arrows {
  display: none !important;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme [data-salty-collection="true"]
  .product-card:hover .card-gallery {
    border-color:
      rgba(200, 110, 60, 0.40);

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.20),
      0 12px 24px rgba(51, 39, 30, 0.08);

    transform: translateY(-2px);
  }

  body.sw-theme [data-salty-collection="true"]
  .product-card:hover .card-gallery img {
    filter:
      saturate(1)
      contrast(1);

    transform: scale(1.022);
  }
}


/* =========================================================
   PRODUCT INFORMATION
   Title left / price right on desktop
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.product-card__content {
  position: relative;

  min-height: 100%;

  background: transparent !important;
}


/* Cards using Horizon's inner group */

body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block:has(a[ref="productTitleLink"]) {
  position: relative;

  padding:
    9px
    16px
    17px !important;

  border: 0 !important;

  background: transparent !important;
}


body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block:has(a[ref="productTitleLink"])
> .group-block-content {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  column-gap: 16px !important;
  row-gap: 6px !important;

  align-items: start !important;
}


/* Product title */

body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block
a[ref="productTitleLink"]
> .text-block {
  grid-column: 1;
  grid-row: 1;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


/* Product price */

body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block
product-price {
  grid-column: 2;
  grid-row: 1;

  justify-self: end;
  align-self: start;

  width: auto !important;
  min-width: max-content;

  margin: 0 !important;
  padding: 0 !important;
}


/* Anything else goes underneath */

body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block
> .group-block-content
> :not(a):not(product-price) {
  grid-column: 1 / -1;
}


/* =========================================================
   FALLBACK CARD STRUCTURE
   Some Horizon cards don't use the same group wrapper
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.product-card__content:not(
  :has(> .group-block:has(a[ref="productTitleLink"]))
) {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  column-gap: 16px !important;
  row-gap: 4px !important;

  align-items: start !important;
}


body.sw-theme [data-salty-collection="true"]
.product-card__content:not(
  :has(> .group-block:has(a[ref="productTitleLink"]))
)
a[ref="productTitleLink"]
> .text-block {
  grid-column: 1;

  width: auto !important;
  max-width: none !important;
  min-width: 0;

  margin:
    2px
    0
    17px
    16px !important;

  padding: 0 !important;
}


body.sw-theme [data-salty-collection="true"]
.product-card__content:not(
  :has(> .group-block:has(a[ref="productTitleLink"]))
)
> product-price {
  grid-column: 2;

  justify-self: end;
  align-self: start;

  width: auto !important;
  min-width: max-content;

  margin:
    2px
    16px
    17px
    0 !important;

  padding: 0 !important;
}


/* =========================================================
   PRODUCT TITLE TYPOGRAPHY
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
a[ref="productTitleLink"]
p[role="heading"] {
  margin: 0;

  color: var(--sw-ink) !important;

  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.075em !important;

  text-transform: uppercase !important;

  transition:
    color 180ms ease;
}


@media (hover: hover) {

  body.sw-theme [data-salty-collection="true"]
  .product-card:hover
  a[ref="productTitleLink"]
  p[role="heading"] {
    color: var(--sw-accent) !important;
  }
}


/* =========================================================
   PRICE
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.product-card__content product-price {
  color:
    rgba(51, 39, 30, 0.68) !important;

  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.025em !important;

  text-transform: uppercase;
}


body.sw-theme [data-salty-collection="true"]
.product-card__content
product-price :is(
  span,
  s,
  div
) {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   ORANGE HOVER RULE
   Keep this little homepage detail
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.product-card__content
> .group-block:has(a[ref="productTitleLink"])::after {
  content: "";

  position: absolute;
  left: 16px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--sw-accent);

  transition:
    width 220ms ease;
}


body.sw-theme [data-salty-collection="true"]
.product-card__content:not(
  :has(> .group-block:has(a[ref="productTitleLink"]))
)::after {
  content: "";

  position: absolute;
  left: 16px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--sw-accent);

  transition:
    width 220ms ease;
}


@media (hover: hover) {

  body.sw-theme [data-salty-collection="true"]
  .product-card:hover
  .product-card__content
  > .group-block:has(a[ref="productTitleLink"])::after {
    width:
      calc(100% - 32px);
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card:hover
  .product-card__content:not(
    :has(> .group-block:has(a[ref="productTitleLink"]))
  )::after {
    width:
      calc(100% - 32px);
  }
}


/* =========================================================
   QUICK ADD
   EXACT SAME LANGUAGE AS "YOU MIGHT ALSO LIKE"
   ========================================================= */

body.sw-theme [data-salty-collection="true"]
.quick-add {
  --quick-add-offset: 12px !important;
}


/* Dark rounded ADD button */

body.sw-theme [data-salty-collection="true"]
button.quick-add__button {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  color:
    var(--sw-bg, #f4efe4) !important;

  background:
    var(--sw-ink, #33271e) !important;

  border:
    1px solid
    var(--sw-ink, #33271e) !important;

  border-radius: 7px !important;

  box-shadow:
    3px 3px 0
    var(--sw-accent, #c86e3c) !important;

  font-size: 0 !important;

  line-height: 1 !important;

  overflow: visible !important;

  transform: translate(0, 0);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}


/* Hide Horizon's ADD / CHOOSE wording */

body.sw-theme [data-salty-collection="true"]
button.quick-add__button
> :not(.add-to-cart-icon):not(.svg-wrapper) {
  font-size: 0 !important;
}


/* Replace it with our consistent ADD */

body.sw-theme [data-salty-collection="true"]
button.quick-add__button::after {
  content: "ADD";

  display: inline-block;

  color: currentColor;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  letter-spacing: 0.10em !important;

  text-transform: uppercase;
}


/* Cart icon */

body.sw-theme [data-salty-collection="true"]
button.quick-add__button
.add-to-cart-icon,
body.sw-theme [data-salty-collection="true"]
button.quick-add__button
.svg-wrapper {
  width: 15px !important;
  height: 15px !important;

  flex: 0 0 15px !important;

  color: currentColor !important;
}


body.sw-theme [data-salty-collection="true"]
button.quick-add__button svg {
  color: currentColor !important;
}


/* Desktop button hover */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme [data-salty-collection="true"]
  button.quick-add__button:hover {
    background:
      var(--sw-ink, #33271e) !important;

    border-color:
      var(--sw-ink, #33271e) !important;

    box-shadow:
      5px 5px 0
      var(--sw-accent, #c86e3c) !important;

    transform:
      translate(-2px, -2px);
  }
}


/* =========================================================
   MOBILE
   Larger images, cleaner cards, same ADD button
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme [data-salty-collection="true"] {
    --sw-collection-media-radius: 8px;

    /*
     * Smaller inset than before.
     * This lets each image use more of its half-screen column.
     */
    --sw-collection-media-inset: 3px;
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card .card-gallery {
    margin:
      var(--sw-collection-media-inset)
      var(--sw-collection-media-inset)
      5px;

    box-shadow:
      0 4px 12px
      rgba(51, 39, 30, 0.05);
  }


  /* Group-based cards */

  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  > .group-block:has(a[ref="productTitleLink"]) {
    padding:
      8px
      9px
      15px !important;
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  > .group-block:has(a[ref="productTitleLink"])
  > .group-block-content {
    grid-template-columns:
      1fr;

    row-gap: 4px !important;
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  > .group-block
  a[ref="productTitleLink"]
  > .text-block,
  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  > .group-block
  product-price {
    grid-column: 1;
    grid-row: auto;

    justify-self: start;
  }


  /* Fallback card structure */

  body.sw-theme [data-salty-collection="true"]
  .product-card__content:not(
    :has(> .group-block:has(a[ref="productTitleLink"]))
  ) {
    grid-template-columns:
      1fr;

    row-gap: 4px !important;
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card__content:not(
    :has(> .group-block:has(a[ref="productTitleLink"]))
  )
  a[ref="productTitleLink"]
  > .text-block {
    grid-column: 1;

    margin:
      3px
      9px
      0 !important;
  }


  body.sw-theme [data-salty-collection="true"]
  .product-card__content:not(
    :has(> .group-block:has(a[ref="productTitleLink"]))
  )
  > product-price {
    grid-column: 1;

    justify-self: start;

    margin:
      0
      9px
      15px !important;
  }


  /* Product name */

  body.sw-theme [data-salty-collection="true"]
  a[ref="productTitleLink"]
  p[role="heading"] {
    font-size: 9px !important;

    letter-spacing:
      0.055em !important;
  }


  /* Price */

  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  product-price {
    font-size:
      9px !important;
  }


  /* Smaller version of recommendation ADD button */

  body.sw-theme [data-salty-collection="true"]
  .quick-add {
    --quick-add-offset: 8px !important;
  }


  body.sw-theme [data-salty-collection="true"]
  button.quick-add__button {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding:
      0
      8px !important;

    gap:
      5px !important;

    border-radius:
      6px !important;

    box-shadow:
      2px 2px 0
      var(--sw-accent, #c86e3c) !important;
  }


  body.sw-theme [data-salty-collection="true"]
  button.quick-add__button::after {
    font-size:
      8px !important;

    letter-spacing:
      0.09em !important;
  }


  body.sw-theme [data-salty-collection="true"]
  button.quick-add__button
  .add-to-cart-icon,
  body.sw-theme [data-salty-collection="true"]
  button.quick-add__button
  .svg-wrapper {
    width:
      14px !important;

    height:
      14px !important;

    flex:
      0 0 14px !important;
  }


  /* Orange product underline */

  body.sw-theme [data-salty-collection="true"]
  .product-card__content
  > .group-block:has(a[ref="productTitleLink"])::after,
  body.sw-theme [data-salty-collection="true"]
  .product-card__content:not(
    :has(> .group-block:has(a[ref="productTitleLink"]))
  )::after {
    left:
      9px;
  }
}

/* =========================================================
   SALTY WORN - PREDICTIVE SEARCH
   Recently viewed + live search results
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"] {
  --sw-search-ink: var(--sw-ink, #33271e);
  --sw-search-bg: var(--sw-bg, #f4efe4);
  --sw-search-panel: var(--sw-panel, #eee5d4);
  --sw-search-accent: var(--sw-accent, #c86e3c);
  --sw-search-line: rgba(51, 39, 30, 0.18);

  color: var(--sw-search-ink);

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(200, 110, 60, 0.055) 0 13%,
      transparent 13.5%
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0 28px,
      rgba(51, 39, 30, 0.022) 28px 29px
    ),
    var(--sw-search-bg);
}


/* =========================================================
   INNER SEARCH AREA
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__inner {
  padding-block: 26px 34px;
}


/* =========================================================
   SECTION TITLES
   Recently viewed / Products
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 0 0 18px;

  color: var(--sw-search-ink);

  font-family: var(--sw-body);
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* Orange editorial marker */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__title::before {
  content: "01 /";
  margin-right: 8px;

  color: var(--sw-search-accent);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}


/* Keep title text on the left */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__title {
  justify-content: flex-start;
}


/* CLEAR button pushes to right */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__clear {
  margin-left: auto !important;

  min-height: auto !important;
  padding: 6px 0 !important;

  color: rgba(51, 39, 30, 0.58) !important;
  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;

  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__clear:hover {
  color: var(--sw-search-accent) !important;

  transform: none !important;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__wrapper-products {
  display: grid !important;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px !important;

  margin: 0;
  padding: 0;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__card--product {
  min-width: 0;

  margin: 0;
  padding: 0 0 12px;

  background: transparent;

  border: 0 !important;

  transition: transform 220ms var(--sw-ease-out, ease);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__card--product img {
  display: block;

  width: 100%;

  border: 1px solid rgba(51, 39, 30, 0.13);
  border-radius: 10px !important;

  background: var(--sw-search-panel);

  box-shadow: 0 7px 18px rgba(51, 39, 30, 0.055);

  filter: saturate(0.97) contrast(0.99);

  transition:
    transform 350ms var(--sw-ease-out, ease),
    border-color 220ms ease,
    box-shadow 280ms var(--sw-ease-out, ease),
    filter 220ms ease;
}


/* =========================================================
   CARD COPY
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__card--product a {
  color: var(--sw-search-ink);

  text-decoration: none;
}


/* Product name */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__card--product
:is(
  .resource-card__title,
  [class*="resource-card"] [class*="title"]
) {
  margin-top: 10px;

  color: var(--sw-search-ink) !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}


/* Price */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__card--product
:is(
  .price,
  product-price,
  [class*="price"]
) {
  margin-top: 4px;

  color: rgba(51, 39, 30, 0.64) !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}


/* =========================================================
   DESKTOP HOVER
   Same restrained interaction as the rest of Salty Worn
   ========================================================= */

@media screen and (min-width: 750px) and (hover: hover) {

  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product:hover {
    transform: translateY(-3px);
  }

  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product:hover img {
    border-color: rgba(200, 110, 60, 0.42);

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.16),
      0 12px 22px rgba(51, 39, 30, 0.075);

    filter: saturate(1) contrast(1);

    transform: scale(1.015);
  }

  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product:hover
  :is(
    .resource-card__title,
    [class*="resource-card"] [class*="title"]
  ) {
    color: var(--sw-search-accent) !important;
  }
}


/* =========================================================
   SEARCH SUGGESTION PILLS
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__wrapper-queries {
  gap: 8px;
  margin-bottom: 24px;
}

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__pill {
  color: var(--sw-search-ink) !important;
  background: rgba(244, 239, 228, 0.75) !important;

  border: 1px solid rgba(51, 39, 30, 0.22) !important;
  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 700 !important;
}

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__pill:hover {
  color: var(--sw-search-bg) !important;
  background: var(--sw-search-ink) !important;

  border-color: var(--sw-search-ink) !important;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

body.sw-theme [data-salty-predictive-search="true"]
.predictive-search-results__no-results {
  margin: 20px 0;

  color: rgba(51, 39, 30, 0.7);

  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   MOBILE SEARCH
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__inner {
    padding-block: 20px 28px;
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__wrapper-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px 8px !important;
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product img {
    border-radius: 8px !important;

    box-shadow: 0 4px 12px rgba(51, 39, 30, 0.05);
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product
  :is(
    .resource-card__title,
    [class*="resource-card"] [class*="title"]
  ) {
    margin-top: 8px;

    font-size: 9px !important;
    letter-spacing: 0.045em !important;
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__card--product
  :is(
    .price,
    product-price,
    [class*="price"]
  ) {
    font-size: 9px !important;
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__title {
    margin-bottom: 14px;

    font-size: 9px !important;
  }


  body.sw-theme [data-salty-predictive-search="true"]
  .predictive-search-results__title::before {
    font-size: 8px;
  }
}

/* =========================================================
   SALTY WORN - SEARCH PAGE
   Search input + search results
   ========================================================= */


/* =========================================================
   SEARCH INPUT
   ========================================================= */

body.sw-theme main[data-template="search"] .search-page-input__parent {
  width: 100%;
  padding-inline: var(--sw-page-gutter);
}

body.sw-theme main[data-template="search"] search-page-input-component {
  width: min(760px, 100%) !important;
  max-width: 760px !important;

  margin: 34px auto 18px !important;

  background: rgba(244, 239, 228, 0.78) !important;

  border: 1px solid rgba(51, 39, 30, 0.28);

  box-shadow: 5px 5px 0 rgba(200, 110, 60, 0.16);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.sw-theme main[data-template="search"]
search-page-input-component:focus-within {
  border-color: var(--sw-accent);

  box-shadow: 5px 5px 0 rgba(200, 110, 60, 0.28);

  transform: translateY(-1px);
}


/* Actual input */

body.sw-theme main[data-template="search"] .search-page-input {
  min-height: 58px;

  padding-block: 15px !important;
  padding-left: 58px !important;
  padding-right: 58px !important;

  color: var(--sw-ink) !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;

  font-family: var(--sw-body) !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.3;
}

body.sw-theme main[data-template="search"]
.search-page-input::placeholder {
  color: rgba(51, 39, 30, 0.46) !important;
}


/* Search icon */

body.sw-theme main[data-template="search"]
search-page-input-component .search__icon {
  left: 20px !important;

  color: var(--sw-ink) !important;
}

body.sw-theme main[data-template="search"]
search-page-input-component .search__icon svg {
  color: currentColor !important;
}


/* Reset / X button */

body.sw-theme main[data-template="search"]
search-page-input-component .search__reset-button {
  right: 18px !important;

  color: var(--sw-ink) !important;

  transition:
    color 160ms ease,
    transform 160ms ease !important;
}

@media (hover: hover) {
  body.sw-theme main[data-template="search"]
  search-page-input-component .search__reset-button:hover {
    color: var(--sw-accent) !important;

    transform: rotate(90deg);
  }
}


/* =========================================================
   NO RESULTS MESSAGE
   ========================================================= */

body.sw-theme main[data-template="search"]
.search-results__no-results {
  width: min(760px, 100%);

  margin: 0 auto 32px;

  color: rgba(51, 39, 30, 0.66);

  opacity: 1;

  text-align: center;

  font-family: var(--sw-body);
  font-size: 13px;
  line-height: 1.5;
}

body.sw-theme main[data-template="search"]
.search-results__no-results p {
  margin: 0;
}


/* =========================================================
   SEARCH RESULTS PRODUCT CARDS
   Match collection-page cards
   ========================================================= */

body.sw-theme main[data-template="search"]
.product-grid-container {
  --sw-search-media-radius: 10px;
}


/* Product media */

body.sw-theme main[data-template="search"]
.product-grid__item .product-card .card-gallery {
  overflow: hidden;

  margin: 0 0 8px;

  border: 1px solid rgba(51, 39, 30, 0.14);
  border-radius: var(--sw-search-media-radius) !important;

  background: var(--sw-panel);

  box-shadow: 0 7px 18px rgba(51, 39, 30, 0.055);

  transform: translateZ(0);

  transition:
    transform 280ms var(--sw-ease-out),
    border-color 220ms ease,
    box-shadow 280ms var(--sw-ease-out);
}

body.sw-theme main[data-template="search"]
.product-grid__item .product-card .card-gallery img {
  border-radius: 0 !important;

  filter: saturate(0.97) contrast(0.99);

  transform: scale(1.002);

  transition:
    transform 420ms var(--sw-ease-out),
    filter 260ms ease;
}


/* Title / price area */

body.sw-theme main[data-template="search"]
.product-card__content > .group-block {
  position: relative;

  padding: 10px 7px 17px !important;

  border: 0 !important;

  background: transparent !important;
}

body.sw-theme main[data-template="search"]
.product-card__content > .group-block > .group-block-content {
  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto;

  column-gap: 16px !important;
  row-gap: 6px !important;

  align-items: start !important;
}


/* Product title */

body.sw-theme main[data-template="search"]
.product-card__content > .group-block
a[ref="productTitleLink"] > .text-block {
  grid-column: 1;
  grid-row: 1;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

body.sw-theme main[data-template="search"]
a[ref="productTitleLink"] p[role="heading"] {
  margin: 0;

  color: var(--sw-ink) !important;

  font-family: var(--sw-body) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.065em !important;

  text-transform: uppercase !important;

  transition: color 180ms ease;
}


/* Price */

body.sw-theme main[data-template="search"]
.product-card__content > .group-block product-price {
  grid-column: 2;
  grid-row: 1;

  justify-self: end;

  width: auto !important;
  min-width: max-content;

  color: rgba(51, 39, 30, 0.65) !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;

  line-height: 1.3 !important;
}


/* Extra content below title / price */

body.sw-theme main[data-template="search"]
.product-card__content > .group-block
> .group-block-content
> :not(a):not(product-price) {
  grid-column: 1 / -1;
}


/* Orange detail when hovered */

body.sw-theme main[data-template="search"]
.product-card__content > .group-block::after {
  content: "";

  position: absolute;
  left: 7px;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--sw-accent);

  transition: width 220ms ease;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme main[data-template="search"]
  .product-card:hover .card-gallery {
    border-color: rgba(200, 110, 60, 0.42);

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.16),
      0 12px 24px rgba(51, 39, 30, 0.08);

    transform: translateY(-2px);
  }

  body.sw-theme main[data-template="search"]
  .product-card:hover .card-gallery img {
    filter: saturate(1) contrast(1);

    transform: scale(1.022);
  }

  body.sw-theme main[data-template="search"]
  .product-card:hover
  a[ref="productTitleLink"] p[role="heading"] {
    color: var(--sw-accent) !important;
  }

  body.sw-theme main[data-template="search"]
  .product-card:hover
  .product-card__content > .group-block::after {
    width: calc(100% - 14px);
  }
}


/* =========================================================
   QUICK ADD
   Match "You Might Also Like"
   ========================================================= */

body.sw-theme main[data-template="search"] .quick-add {
  --quick-add-offset: 12px !important;
}

body.sw-theme main[data-template="search"]
button.quick-add__button {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  color: var(--sw-bg) !important;
  background: var(--sw-ink) !important;

  border: 1px solid var(--sw-ink) !important;
  border-radius: 7px !important;

  box-shadow: 3px 3px 0 var(--sw-accent) !important;

  font-size: 0 !important;
  line-height: 1 !important;
}

body.sw-theme main[data-template="search"]
button.quick-add__button
> :not(.add-to-cart-icon):not(.svg-wrapper) {
  font-size: 0 !important;
}

body.sw-theme main[data-template="search"]
button.quick-add__button::after {
  content: "ADD";

  color: currentColor;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  letter-spacing: 0.10em !important;

  text-transform: uppercase;
}

body.sw-theme main[data-template="search"]
button.quick-add__button
:is(.add-to-cart-icon, .svg-wrapper) {
  width: 15px !important;
  height: 15px !important;

  flex: 0 0 15px !important;
}


/* =========================================================
   MOBILE SEARCH PAGE
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme main[data-template="search"]
  .search-page-input__parent {
    padding-inline: 16px;
  }

  body.sw-theme main[data-template="search"]
  search-page-input-component {
    width: 100% !important;
    max-width: none !important;

    margin: 22px 0 14px !important;

    box-shadow: 4px 4px 0 rgba(200, 110, 60, 0.15);
  }

  body.sw-theme main[data-template="search"]
  .search-page-input {
    min-height: 54px;

    padding-left: 50px !important;
    padding-right: 50px !important;

    font-size: 13px !important;
  }

  body.sw-theme main[data-template="search"]
  search-page-input-component .search__icon {
    left: 15px !important;
  }

  body.sw-theme main[data-template="search"]
  search-page-input-component .search__reset-button {
    right: 14px !important;
  }

  body.sw-theme main[data-template="search"]
  .search-results__no-results {
    margin-bottom: 24px;

    font-size: 12px;
  }

  body.sw-theme main[data-template="search"]
  .product-card .card-gallery {
    border-radius: 8px !important;
  }

  body.sw-theme main[data-template="search"]
  .product-card__content > .group-block {
    padding: 8px 5px 14px !important;
  }

  body.sw-theme main[data-template="search"]
  .product-card__content > .group-block > .group-block-content {
    grid-template-columns: 1fr;

    row-gap: 4px !important;
  }

  body.sw-theme main[data-template="search"]
  .product-card__content > .group-block
  a[ref="productTitleLink"] > .text-block,
  body.sw-theme main[data-template="search"]
  .product-card__content > .group-block product-price {
    grid-column: 1;
    grid-row: auto;

    justify-self: start;
  }

  body.sw-theme main[data-template="search"]
  a[ref="productTitleLink"] p[role="heading"] {
    font-size: 9px !important;

    letter-spacing: 0.05em !important;
  }

  body.sw-theme main[data-template="search"]
  .product-card__content > .group-block product-price {
    font-size: 9px !important;
  }

  body.sw-theme main[data-template="search"] .quick-add {
    --quick-add-offset: 9px !important;
  }

  body.sw-theme main[data-template="search"]
  button.quick-add__button {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;

    height: 36px !important;
    min-height: 36px !important;

    padding: 0 8px !important;

    gap: 5px !important;

    border-radius: 6px !important;

    box-shadow: 2px 2px 0 var(--sw-accent) !important;
  }

  body.sw-theme main[data-template="search"]
  button.quick-add__button::after {
    font-size: 8px !important;
  }
}

/* =========================================================
   SALTY WORN - SEARCH EXPERIENCE
   Predictive search modal + search results refinements
   ========================================================= */

body.sw-theme {
  --sw-search-paper: #f4efe4;
  --sw-search-panel: #eee5d4;
  --sw-search-ink: #33271e;
  --sw-search-muted: rgba(51, 39, 30, 0.64);
  --sw-search-line: rgba(51, 39, 30, 0.18);
  --sw-search-orange: #c86e3c;
}


/* =========================================================
   SEARCH MODAL - DESKTOP FRAME
   ========================================================= */

@media screen and (min-width: 750px) {

  body.sw-theme .search-modal__content {
    --modal-width: min(1040px, calc(100vw - 80px)) !important;

    width: var(--modal-width) !important;
    max-width: 1040px !important;

    background: var(--sw-search-paper) !important;

    border: 1px solid var(--sw-search-ink) !important;
    border-radius: 0 !important;

    box-shadow:
      8px 8px 0 var(--sw-search-orange) !important;
  }

  body.sw-theme
  .dialog-modal[open].search-modal__content {
    border-radius: 0 !important;
  }
}


/* =========================================================
   SEARCH MODAL SURFACE
   ========================================================= */

body.sw-theme
.search-modal
predictive-search-component {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(200, 110, 60, 0.05) 0 12%,
      transparent 12.5%
    ),
    var(--sw-search-paper) !important;

  color: var(--sw-search-ink);
}


/* =========================================================
   SEARCH INPUT HEADER
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-form__header {
  padding: 14px 16px !important;

  background: var(--sw-search-paper) !important;

  border: 0 !important;
  border-bottom: 1px solid var(--sw-search-line) !important;

  border-radius: 0 !important;
}


body.sw-theme
.search-modal
.predictive-search-form__header-inner {
  min-height: 56px;

  background: rgba(244, 239, 228, 0.94) !important;

  border: 1px solid rgba(51, 39, 30, 0.34) !important;
  border-radius: 0 !important;

  box-shadow:
    4px 4px 0 rgba(200, 110, 60, 0.14);
}


body.sw-theme
.search-modal
input.search-input {
  min-height: 54px;

  padding-block: 0 !important;

  color: var(--sw-search-ink) !important;

  font-family: var(--sw-body);
  font-size: 14px !important;
}


body.sw-theme
.search-modal
input.search-input::placeholder {
  color: rgba(51, 39, 30, 0.48) !important;
}


body.sw-theme
.search-modal
.predictive-search__icon {
  color: var(--sw-search-ink) !important;

  opacity: 0.68;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search__close-modal-button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;

  margin-left: 12px !important;

  color: var(--sw-search-ink) !important;
  background: transparent !important;

  border: 1px solid transparent !important;
  border-radius: 50% !important;

  box-shadow: none !important;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease !important;
}


@media (hover: hover) {

  body.sw-theme
  .search-modal
  .predictive-search__close-modal-button:hover {
    color: var(--sw-search-orange) !important;

    border-color: rgba(200, 110, 60, 0.42) !important;

    transform: rotate(4deg);
  }
}


/* =========================================================
   RESULTS AREA
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-form__content-wrapper,
body.sw-theme
.search-modal
.predictive-search-form__content,
body.sw-theme
.search-modal
.predictive-search-dropdown {
  background: var(--sw-search-paper) !important;
}


body.sw-theme
.search-modal
.predictive-search-results__inner {
  padding:
    24px
    26px
    32px !important;

  color: var(--sw-search-ink);
}


/* =========================================================
   SECTION HEADINGS
   Recently viewed / Products
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-results__title {
  margin:
    0
    0
    16px !important;

  padding-bottom: 10px;

  color: var(--sw-search-ink) !important;

  border-bottom: 1px solid var(--sw-search-line);

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;

  line-height: 1.2 !important;
  letter-spacing: 0.16em !important;

  text-transform: uppercase !important;
}


body.sw-theme
.search-modal
.predictive-search-results__products
+ .predictive-search-results__products {
  margin-top: 28px;
}


/* =========================================================
   CLEAR RECENTLY VIEWED
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-results__clear.button-unstyled {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--sw-search-muted) !important;

  font-family: var(--sw-body);
  font-size: 9px !important;
  font-weight: 800 !important;

  letter-spacing: 0.14em !important;
  text-transform: uppercase;

  opacity: 1 !important;

  transition: color 160ms ease;
}


@media (hover: hover) {

  body.sw-theme
  .search-modal
  .predictive-search-results__clear.button-unstyled:hover {
    color: var(--sw-search-orange) !important;
  }
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-results__wrapper-products {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap: 20px !important;

  padding:
    0
    0
    28px !important;
}


/* Stop Horizon from enlarging the whole card on hover */

body.sw-theme
.search-modal
.predictive-search-results__card--product,
body.sw-theme
.search-modal
.predictive-search-results__card--product:hover,
body.sw-theme
.search-modal
.predictive-search-results__card--product:focus-within {
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border-radius: 0 !important;
}


/* =========================================================
   RESOURCE CARD
   ========================================================= */

body.sw-theme
.search-modal
.resource-card {
  row-gap: 9px !important;

  color: var(--sw-search-ink);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

body.sw-theme
.search-modal
.resource-card__media {
  position: relative;

  overflow: hidden;

  background: var(--sw-search-panel);

  border: 1px solid rgba(51, 39, 30, 0.16);
  border-radius: 10px !important;

  box-shadow:
    0 6px 16px rgba(51, 39, 30, 0.055);

  transform: translateZ(0);

  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 260ms ease;
}


body.sw-theme
.search-modal
.resource-card__image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 1 / 1 !important;

  object-fit: cover;

  border-radius: 0 !important;

  filter:
    saturate(0.97)
    contrast(0.99);

  transform: scale(1.002);

  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
}


body.sw-theme
.search-modal
.resource-card__image--secondary {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}


/* =========================================================
   PRODUCT COPY
   ========================================================= */

body.sw-theme
.search-modal
.resource-card__content {
  position: relative;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  column-gap: 12px !important;
  row-gap: 5px !important;

  align-items: start;

  padding:
    1px
    3px
    8px;

  color: var(--sw-search-ink);
}


/* Product title */

body.sw-theme
.search-modal
.resource-card__title {
  grid-column: 1;
  grid-row: 1;

  margin: 0 !important;

  color: var(--sw-search-ink) !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;

  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  transition: color 160ms ease;
}


/* Product price */

body.sw-theme
.search-modal
.resource-card__content
.price {
  grid-column: 2;
  grid-row: 1;

  justify-self: end;

  width: auto !important;
  min-width: max-content;

  margin: 0 !important;

  color: var(--sw-search-muted) !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;

  line-height: 1.3 !important;
}


/* Make nested price elements inherit */

body.sw-theme
.search-modal
.resource-card__content
.price :is(
  span,
  div,
  s
) {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   PRODUCT CARD HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme
  .search-modal
  .resource-card:hover
  .resource-card__media {
    border-color:
      rgba(200, 110, 60, 0.48);

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.18),
      0 12px 22px rgba(51, 39, 30, 0.07);

    transform: translateY(-2px);
  }


  body.sw-theme
  .search-modal
  .resource-card:hover
  .resource-card__image {
    filter:
      saturate(1)
      contrast(1);

    transform: scale(1.022);
  }


  body.sw-theme
  .search-modal
  .resource-card:hover
  .resource-card__title {
    color: var(--sw-search-orange) !important;
  }
}


/* =========================================================
   QUERY SUGGESTION PILLS
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-results__wrapper-queries {
  gap: 8px !important;

  padding-inline: 0 !important;
}


body.sw-theme
.search-modal
.predictive-search-results__pill {
  margin: 0 !important;

  color: var(--sw-search-ink) !important;
  background: transparent !important;

  border: 1px solid var(--sw-search-line) !important;
  border-radius: 999px !important;

  box-shadow: none !important;

  font-size: 11px;
}


@media (hover: hover) {

  body.sw-theme
  .search-modal
  .predictive-search-results__pill:hover {
    color: var(--sw-search-orange) !important;

    border-color: var(--sw-search-orange) !important;

    transform: none !important;
  }
}


/* =========================================================
   NO RESULTS
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-results__no-results {
  margin: 30px auto !important;

  max-width: 500px;

  color: var(--sw-search-muted) !important;

  font-size: 14px;

  line-height: 1.55;

  text-align: center;
}


/* =========================================================
   VIEW ALL RESULTS BUTTON
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search-form__footer {
  background:
    linear-gradient(
      to top,
      var(--sw-search-paper) 70%,
      rgba(244, 239, 228, 0)
    ) !important;
}


body.sw-theme
.search-modal
.predictive-search__search-button {
  min-width: 210px;

  color: var(--sw-search-paper) !important;
  background: var(--sw-search-ink) !important;

  border: 1px solid var(--sw-search-ink) !important;
  border-radius: 0 !important;

  box-shadow:
    5px 5px 0 var(--sw-search-orange) !important;
}


body.sw-theme
.search-modal
.predictive-search__search-button::after {
  content: "→";

  margin-left: 18px;

  font-size: 17px;
  font-weight: 400;
}


@media (hover: hover) {

  body.sw-theme
  .search-modal
  .predictive-search__search-button:hover {
    box-shadow:
      3px 3px 0 var(--sw-search-orange) !important;

    transform: translate(2px, 2px) !important;
  }
}


/* =========================================================
   SEARCH RESULTS PAGE
   Force the desktop results into the same four-card rhythm
   as the collection pages.
   ========================================================= */

@media screen and (min-width: 990px) {

  body.sw-theme
  main[data-template="search"]
  .product-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   MOBILE SEARCH MODAL
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme
  .search-modal__content {
    width: 100% !important;
    max-width: 100% !important;

    background: var(--sw-search-paper) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-form__header {
    padding: 10px 14px !important;

    border-bottom:
      1px solid var(--sw-search-ink) !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-form__header-inner {
    min-height: 48px;

    border: 0 !important;

    box-shadow: none;
  }


  body.sw-theme
  .search-modal
  input.search-input {
    min-height: 48px;

    font-size: 14px !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-results__inner {
    padding:
      22px
      18px
      30px !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-results__title {
    margin-bottom: 14px !important;

    padding-bottom: 9px;

    font-size: 9px !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-results__wrapper-products {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      18px
      14px !important;

    padding-bottom: 26px !important;
  }


  body.sw-theme
  .search-modal
  .resource-card {
    row-gap: 8px !important;
  }


  body.sw-theme
  .search-modal
  .resource-card__media {
    border-radius: 8px !important;

    box-shadow:
      0 4px 12px rgba(51, 39, 30, 0.045);
  }


  body.sw-theme
  .search-modal
  .resource-card__content {
    display: flex !important;
    flex-direction: column !important;

    gap: 3px !important;

    padding:
      1px
      1px
      7px;
  }


  body.sw-theme
  .search-modal
  .resource-card__title {
    font-size: 9px !important;

    letter-spacing: 0.045em !important;
  }


  body.sw-theme
  .search-modal
  .resource-card__content
  .price {
    min-width: 0;

    font-size: 10px !important;

    justify-self: start;
  }


  body.sw-theme
  .search-modal
  .predictive-search__close-modal-button {
    width: 38px !important;
    min-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;

    margin-left: 4px !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search-form__footer {
    padding:
      16px
      18px
      22px !important;
  }


  body.sw-theme
  .search-modal
  .predictive-search__search-button {
    width: 100% !important;

    min-width: 0;

    min-height: 52px;
  }
}

/* =========================================================
   SEARCH MODAL - CENTRE CLOSE ICON
   ========================================================= */

body.sw-theme
.search-modal
.predictive-search__close-modal-button {
  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  line-height: 0 !important;
}

body.sw-theme
.search-modal
.predictive-search__close-modal-button
.svg-wrapper {
  display: grid !important;
  place-items: center !important;

  width: 14px !important;
  height: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.sw-theme
.search-modal
.predictive-search__close-modal-button
svg {
  display: block !important;

  width: 11px !important;
  height: 11px !important;

  margin: 0 !important;

  transform: translateY(0.5px);
}

/* =========================================================
   SEARCH MODAL - DESKTOP ICON SPACING
   ========================================================= */

@media screen and (min-width: 750px) {

  body.sw-theme
  .search-modal
  .predictive-search__icon {
    left: 24px !important;
  }

  body.sw-theme
  .search-modal
  input.search-input {
    padding-left: 58px !important;
  }
}

/* =========================================================
   HOMEPAGE - THE RANGE QUICK ADD BUTTONS
   Match collection + recommendation cards
   ========================================================= */

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
.quick-add {
  --quick-add-offset: 12px !important;
}


/* Button */

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;

  height: 40px !important;
  min-height: 40px !important;

  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 6px !important;

  color: var(--sw-bg, #f4efe4) !important;
  background: var(--sw-ink, #33271e) !important;

  border: 1px solid var(--sw-ink, #33271e) !important;
  border-radius: 7px !important;

  box-shadow:
    3px 3px 0 var(--sw-accent, #c86e3c) !important;

  font-size: 0 !important;
  line-height: 1 !important;

  overflow: visible !important;

  transform: translate(0, 0);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease !important;
}


/* Hide Horizon's normal ADD / CHOOSE text */

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button
> :not(.add-to-cart-icon):not(.svg-wrapper) {
  font-size: 0 !important;
}


/* Consistent ADD wording */

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button::after {
  content: "ADD";

  display: inline-block;

  color: currentColor;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  letter-spacing: 0.10em !important;

  text-transform: uppercase;
}


/* Cart icon */

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button
.add-to-cart-icon,
body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button
.svg-wrapper {
  width: 15px !important;
  height: 15px !important;

  flex: 0 0 15px !important;

  color: currentColor !important;
}

body.sw-theme main[data-template="index"]
[data-testid="product-list"]
button.quick-add__button svg {
  color: currentColor !important;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme main[data-template="index"]
  [data-testid="product-list"]
  button.quick-add__button:hover {
    background: var(--sw-ink, #33271e) !important;
    border-color: var(--sw-ink, #33271e) !important;

    box-shadow:
      5px 5px 0 var(--sw-accent, #c86e3c) !important;

    transform: translate(-2px, -2px);
  }
}

/* =========================================================
   SALTY WORN - QUICK ADD MODAL
   Branded quick-shop experience
   ========================================================= */

body.sw-theme .quick-add-modal {
  --sw-qa-cream: #f4efe4;
  --sw-qa-panel: #eee5d4;
  --sw-qa-brown: #33271e;
  --sw-qa-orange: #c86e3c;
  --sw-qa-line: rgba(51, 39, 30, 0.18);
  --sw-qa-muted: rgba(51, 39, 30, 0.64);

  color: var(--sw-qa-brown) !important;
  background: var(--sw-qa-cream) !important;

  border: 1px solid var(--sw-qa-brown) !important;
  border-radius: 10px !important;

  box-shadow:
    8px 8px 0 var(--sw-qa-orange),
    0 18px 50px rgba(51, 39, 30, 0.16) !important;
}


/* =========================================================
   DESKTOP MODAL SIZE + STRUCTURE
   ========================================================= */

@media screen and (min-width: 750px) {

  body.sw-theme .quick-add-modal {
    width: min(1040px, calc(100vw - 54px)) !important;
    height: min(720px, calc(100dvh - 54px)) !important;
    max-height: calc(100dvh - 54px) !important;
  }

  body.sw-theme .quick-add-modal__content {
    overflow: hidden !important;
    background: var(--sw-qa-cream);
  }

  /*
   * Keep the image gallery scrollable independently,
   * rather than making the whole modal feel enormous.
   */
  body.sw-theme .quick-add-modal__content
  .product-information__media {
    overflow-y: auto !important;
    padding: 8px;
    scrollbar-width: none;
  }

  body.sw-theme .quick-add-modal__content
  .product-information__media::-webkit-scrollbar {
    display: none;
  }

  /*
   * Right-hand product information.
   * The important change is removing the forced "stretch
   * everything to the bottom" behaviour.
   */
  body.sw-theme .quick-add-modal__content
  .product-details {
    justify-content: flex-start !important;

    height: 100%;
    min-height: 0;

    overflow-y: auto;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(200, 110, 60, 0.055) 0 17%,
        transparent 17.5%
      ),
      var(--sw-qa-cream);

    scrollbar-width: none;
  }

  body.sw-theme .quick-add-modal__content
  .product-details::-webkit-scrollbar {
    display: none;
  }
}


/* =========================================================
   PRODUCT IMAGE GALLERY
   Match the rest of the Salty Worn photography
   ========================================================= */

body.sw-theme .quick-add-modal
.product-information__media
.product-media-container {
  overflow: hidden;

  border: 1px solid rgba(51, 39, 30, 0.14) !important;
  border-radius: 10px !important;

  background: var(--sw-qa-panel);

  box-shadow:
    0 7px 18px rgba(51, 39, 30, 0.06);

  transition:
    border-color 220ms ease,
    box-shadow 260ms ease,
    transform 260ms ease;
}

body.sw-theme .quick-add-modal
.product-information__media
.product-media-container img {
  border-radius: 0 !important;

  filter: saturate(0.97) contrast(0.99);

  transition:
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 260ms ease;
}

@media (hover: hover) and (pointer: fine) {

  body.sw-theme .quick-add-modal
  .product-information__media
  .product-media-container:hover {
    border-color: rgba(200, 110, 60, 0.5) !important;

    box-shadow:
      4px 5px 0 rgba(200, 110, 60, 0.18),
      0 12px 24px rgba(51, 39, 30, 0.08);

    transform: translateY(-2px);
  }

  body.sw-theme .quick-add-modal
  .product-information__media
  .product-media-container:hover img {
    filter: saturate(1) contrast(1);
    transform: scale(1.018);
  }
}


/* =========================================================
   RIGHT-HAND CONTENT SPACING
   ========================================================= */

body.sw-theme .quick-add-modal__content
.product-details > .group-block {
  flex-grow: 0 !important;

  width: 100% !important;

  padding-block: 42px 36px !important;
}

body.sw-theme .quick-add-modal__content
:where(
  .product-details > .group-block >
  .group-block-content > *
) {
  padding-inline: 38px !important;
}


/* =========================================================
   01 / THE PRODUCT
   ========================================================= */

body.sw-theme .quick-add-modal__content
.product-details > .group-block::before {
  margin: 0 38px 18px !important;

  color: var(--sw-qa-orange) !important;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

body.sw-theme .quick-add-modal__content
.view-product-title {
  margin: 0 0 9px !important;
  padding-block: 0 !important;
}

body.sw-theme .quick-add-modal__content
.view-product-title a {
  color: var(--sw-qa-brown) !important;

  font-family: var(--sw-display) !important;
  font-size: clamp(32px, 3vw, 46px) !important;
  font-style: normal !important;
  font-weight: 700 !important;

  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;

  text-transform: uppercase !important;

  transition: color 180ms ease;
}

@media (hover: hover) {

  body.sw-theme .quick-add-modal__content
  .view-product-title a:hover {
    color: var(--sw-qa-orange) !important;
  }
}


/* =========================================================
   PRICE
   ========================================================= */

body.sw-theme .quick-add-modal__content
.product-details product-price {
  margin-bottom: 14px !important;

  color: var(--sw-qa-muted) !important;

  font-family: var(--sw-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

body.sw-theme .quick-add-modal__content
.product-details product-price :is(
  span,
  div,
  s
) {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   VARIANT PICKER
   ========================================================= */

body.sw-theme .quick-add-modal__content
.product-details .variant-picker {
  margin: 4px 0 0 !important;

  padding-block: 10px 4px !important;
}


/* Colour / Size labels */

body.sw-theme .quick-add-modal
.variant-option legend {
  margin-bottom: 10px !important;

  color: var(--sw-qa-brown) !important;

  font-family: var(--sw-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em !important;

  text-transform: uppercase !important;
}


/* Pill options */

body.sw-theme .quick-add-modal
.variant-option--buttons:not(.variant-option--swatches) {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 9px !important;
}

body.sw-theme .quick-add-modal
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label {
  width: auto !important;
  min-width: 48px !important;
  min-height: 45px !important;

  padding: 9px 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  color: var(--sw-qa-brown) !important;
  background: transparent !important;

  border: 1px solid rgba(51, 39, 30, 0.28) !important;
  border-radius: 999px !important;

  white-space: nowrap !important;

  box-shadow: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

body.sw-theme .quick-add-modal
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label__pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* Selected option */

body.sw-theme .quick-add-modal
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label:has(input:checked) {
  color: var(--sw-qa-cream) !important;
  background: var(--sw-qa-brown) !important;

  border-color: var(--sw-qa-brown) !important;

  box-shadow:
    3px 3px 0 var(--sw-qa-orange) !important;

  transform: translateY(-1px);
}

body.sw-theme .quick-add-modal
.variant-option--buttons:not(.variant-option--swatches)
.variant-option__button-label:has(input:checked)
.variant-option__button-label__text {
  color: var(--sw-qa-cream) !important;
}


/* Hover */

@media (hover: hover) and (pointer: fine) {

  body.sw-theme .quick-add-modal
  .variant-option--buttons:not(.variant-option--swatches)
  .variant-option__button-label:not(:has(input:checked)):hover {
    color: var(--sw-qa-orange) !important;

    border-color: var(--sw-qa-orange) !important;

    transform: translateY(-2px);
  }
}


/* Sold-out options */

body.sw-theme .quick-add-modal
.variant-option__button-label:has(
  input[aria-disabled="true"]
) {
  opacity: 0.36;
}


/* =========================================================
   FIX THE HUGE EMPTY GAP ABOVE ADD TO CART
   Horizon normally pins this to the bottom of the modal.
   We deliberately undo that behaviour here.
   ========================================================= */

body.sw-theme .quick-add-modal__content
.product-details .buy-buttons-block {
  position: static !important;

  flex: 0 0 auto !important;

  margin-top: 24px !important;

  padding-bottom: 0 !important;

  background: transparent !important;

  z-index: auto !important;
}

body.sw-theme .quick-add-modal__content
.product-details .buy-buttons-block::before {
  display: none !important;
}


/* =========================================================
   ADD TO CART
   Same Salty Worn treatment as the main product page
   ========================================================= */

body.sw-theme .quick-add-modal
.add-to-cart-button {
  width: 100% !important;

  min-height: 58px !important;

  padding-inline: 20px !important;

  color: var(--sw-qa-cream) !important;
  background: var(--sw-qa-brown) !important;

  border: 1px solid var(--sw-qa-brown) !important;
  border-radius: 0 !important;

  box-shadow:
    5px 5px 0 var(--sw-qa-orange) !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-family: var(--sw-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;

  text-transform: uppercase !important;

  transform: translate(0, 0);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease !important;
}

body.sw-theme .quick-add-modal
.add-to-cart-button :is(
  span,
  svg
) {
  color: currentColor !important;
}

@media (hover: hover) and (pointer: fine) {

  body.sw-theme .quick-add-modal
  .add-to-cart-button:hover:not(:disabled) {
    color: var(--sw-qa-cream) !important;
    background: var(--sw-qa-orange) !important;

    border-color: var(--sw-qa-orange) !important;

    box-shadow:
      3px 3px 0 var(--sw-qa-brown) !important;

    transform: translate(2px, 2px);
  }
}


/* Disabled button */

body.sw-theme .quick-add-modal
.add-to-cart-button:disabled {
  opacity: 0.45 !important;

  cursor: not-allowed;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

body.sw-theme .quick-add-modal__close {
  top: 13px !important;
  right: 13px !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  color: var(--sw-qa-brown) !important;
  background: rgba(244, 239, 228, 0.94) !important;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  box-shadow: none !important;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease !important;
}

body.sw-theme .quick-add-modal__close svg {
  display: block;

  width: 11px !important;
  height: 11px !important;

  margin: 0 !important;
}

@media (hover: hover) {

  body.sw-theme .quick-add-modal__close:hover {
    color: var(--sw-qa-orange) !important;

    border-color: rgba(200, 110, 60, 0.5) !important;

    background: var(--sw-qa-cream) !important;

    transform: rotate(4deg);
  }
}


/* =========================================================
   MOBILE QUICK ADD
   ========================================================= */

@media screen and (max-width: 749px) {

  body.sw-theme .quick-add-modal {
    width: 100% !important;

    max-width: 100% !important;
    max-height: 90dvh !important;

    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;

    box-shadow:
      0 -3px 0 var(--sw-qa-orange),
      0 -16px 38px rgba(51, 39, 30, 0.13) !important;
  }


  body.sw-theme .quick-add-modal__content {
    display: block !important;

    height: auto !important;
    max-height: 90dvh !important;

    padding: 18px 16px 30px !important;

    overflow-y: auto !important;
  }


  /* First product image */

  body.sw-theme .quick-add-modal__content
  .product-information__media {
    position: static !important;

    width: 100% !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  body.sw-theme .quick-add-modal__content
  .product-information__media
  .product-media-container {
    border-radius: 9px !important;
  }


  /* Product details full width */

  body.sw-theme .quick-add-modal__content
  .product-details {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    background: transparent !important;
  }


  body.sw-theme .quick-add-modal__content
  .product-details > .group-block {
    width: 100% !important;

    padding: 0 !important;
  }


  body.sw-theme .quick-add-modal__content
  :where(
    .product-details > .group-block >
    .group-block-content > *
  ) {
    padding-inline: 0 !important;
  }


  body.sw-theme .quick-add-modal__content
  .product-details > .group-block::before {
    margin: 0 0 13px !important;

    font-size: 8px !important;
  }


  body.sw-theme .quick-add-modal__content
  .view-product-title {
    padding-inline-end: 44px !important;
  }


  body.sw-theme .quick-add-modal__content
  .view-product-title a {
    font-size: clamp(32px, 10vw, 44px) !important;
  }


  body.sw-theme .quick-add-modal__content
  .product-details .variant-picker {
    margin-top: 14px !important;
  }


  body.sw-theme .quick-add-modal
  .variant-option--buttons:not(.variant-option--swatches)
  .variant-option__button-label {
    min-height: 43px !important;

    padding: 8px 13px !important;
  }


  body.sw-theme .quick-add-modal__content
  .product-details .buy-buttons-block {
    margin-top: 26px !important;
  }


  body.sw-theme .quick-add-modal
  .add-to-cart-button {
    min-height: 56px !important;

    box-shadow:
      4px 4px 0 var(--sw-qa-orange) !important;
  }


  body.sw-theme .quick-add-modal__close {
    top: 13px !important;
    right: 13px !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* =========================================================
   SALTY WORN - QUICK ADD MODAL
   MOBILE REFINEMENT
   ========================================================= */

@media screen and (max-width: 749px) {

  /* -------------------------------------------------------
     MODAL SHELL
     Turn Horizon's mobile grid into a clean single column
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;

    width: 100%;
    max-width: none;

    padding: 20px 15px 18px !important;
    gap: 0 !important;
  }


  /* -------------------------------------------------------
     PRODUCT IMAGE
     Let it actually use the width of the mobile modal
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content
  .product-information__media {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .product-information__media media-gallery {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .product-information__media .product-media-container {
    width: 100% !important;

    overflow: hidden;

    border: 1px solid rgba(51, 39, 30, 0.16) !important;
    border-radius: 10px !important;

    box-shadow:
      3px 3px 0 rgba(200, 110, 60, 0.16);
  }

  body.sw-theme .quick-add-modal__content
  .product-information__media .product-media-container img {
    width: 100% !important;
    height: auto;

    border-radius: 0 !important;
  }


  /* -------------------------------------------------------
     PRODUCT DETAILS
     Full width underneath the image
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content
  .product-details {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;

    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 24px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  body.sw-theme .quick-add-modal__content
  .product-details > .group-block {
    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;

    gap: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .product-details > .group-block > .group-block-content {
    width: 100% !important;
    max-width: none !important;
  }


  /* -------------------------------------------------------
     TITLE + PRICE
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content
  .product-header {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;

    width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .view-product-title {
    width: 100% !important;

    margin: 0 0 5px !important;
    padding: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .view-product-title a {
    width: 100% !important;

    color: var(--sw-ink) !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  body.sw-theme .quick-add-modal__content
  product-price {
    display: block;

    margin-top: 4px !important;

    color: rgba(51, 39, 30, 0.74) !important;
  }


  /* -------------------------------------------------------
     VARIANTS
     Give colour and size sections some breathing room
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content
  variant-picker {
    grid-column: 1 / -1 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .variant-option {
    margin: 0 0 20px !important;
  }

  body.sw-theme .quick-add-modal__content
  .variant-option:last-child {
    margin-bottom: 0 !important;
  }

  body.sw-theme .quick-add-modal__content
  .variant-option legend {
    margin-bottom: 11px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
  }

  body.sw-theme .quick-add-modal__content
  .variant-option--buttons:not(.variant-option--swatches) {
    gap: 9px !important;
  }


  /* -------------------------------------------------------
     ADD TO CART
     Stop the sticky bar crowding the size buttons
     ------------------------------------------------------- */

  body.sw-theme .quick-add-modal__content
  .buy-buttons-block {
    position: static !important;

    width: 100% !important;

    margin: 24px 0 0 !important;
    padding: 0 0 4px !important;

    background: transparent !important;
  }

  body.sw-theme .quick-add-modal__content
  .buy-buttons-block::before {
    display: none !important;
  }

  body.sw-theme .quick-add-modal__content
  .buy-buttons-block__bar {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  body.sw-theme .quick-add-modal__content
  .buy-buttons-block__bar::before {
    display: none !important;
  }

  body.sw-theme .quick-add-modal__content
  .add-to-cart-button {
    width: 100% !important;
    min-height: 58px !important;

    margin: 0 !important;

    box-shadow:
      4px 4px 0 var(--sw-accent) !important;
  }


/* =========================================================
   QUICK ADD MODAL - CLOSE BUTTON
   FORCE PERMANENT CIRCLE
   ========================================================= */

body.sw-theme .quick-add-modal__close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 20 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--sw-ink, #33271e) !important;
  background: rgba(244, 239, 228, 0.94) !important;

  border: 1px solid rgba(51, 39, 30, 0.18) !important;

  border-radius: 50% !important;

  /*
   * This is the important bit.
   * Even if Fabric tries to paint a square button,
   * clip it physically into a circle.
   */
  clip-path: circle(50% at 50% 50%) !important;

  box-shadow: 0 2px 8px rgba(51, 39, 30, 0.08) !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  overflow: hidden !important;

  line-height: 0 !important;

  transform: none !important;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}


/* =========================================================
   KEEP THE X PERFECTLY CENTRED
   ========================================================= */

body.sw-theme .quick-add-modal__close svg {
  display: block !important;

  width: 10px !important;
  height: 10px !important;

  margin: 0 !important;

  color: currentColor !important;

  transform: none !important;
}


/* =========================================================
   REMOVE ANY THEME-GENERATED BUTTON SHAPES
   ========================================================= */

body.sw-theme .quick-add-modal__close::before,
body.sw-theme .quick-add-modal__close::after {
  border-radius: 50% !important;
}


/* =========================================================
   DESKTOP HOVER
   Keep circular - only change colour
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  body.sw-theme .quick-add-modal__close:hover {
    color: var(--sw-accent, #c86e3c) !important;
    background: var(--sw-bg, #f4efe4) !important;

    border-color: var(--sw-accent, #c86e3c) !important;

    border-radius: 50% !important;
    clip-path: circle(50% at 50% 50%) !important;

    box-shadow: 0 3px 10px rgba(51, 39, 30, 0.10) !important;

    transform: none !important;
  }
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

body.sw-theme .quick-add-modal__close:focus-visible {
  color: var(--sw-accent, #c86e3c) !important;

  border-color: var(--sw-accent, #c86e3c) !important;

  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%) !important;

  outline: none !important;

  transform: none !important;
}

/* =========================================================
   QUICK ADD CLOSE BUTTON
   REMOVE FABRIC'S LEFTOVER DECORATIONS
   ========================================================= */

body.sw-theme .quick-add-modal__close::before,
body.sw-theme .quick-add-modal__close::after {
  content: none !important;
  display: none !important;

  position: static !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background: none !important;
  box-shadow: none !important;

  transform: none !important;
}


/* Remove any inherited focus/button decoration */

body.sw-theme .quick-add-modal__close,
body.sw-theme .quick-add-modal__close:focus,
body.sw-theme .quick-add-modal__close:focus-visible,
body.sw-theme .quick-add-modal__close:active {
  outline: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* =========================================================
   QUICK ADD MODAL - CLEAN CLOSE BUTTON
   ========================================================= */

body.sw-theme .quick-add-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--sw-ink, #33271e) !important;
  background: rgba(244, 239, 228, 0.96) !important;

  border: 1px solid rgba(51, 39, 30, 0.20) !important;
  border-radius: 50% !important;

  outline: none !important;
  box-shadow: none !important;

  overflow: hidden !important;
  clip-path: circle(50%) !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  cursor: pointer;

  line-height: 0 !important;

  transform: none !important;

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease !important;
}


/* Kill absolutely any leftover generated button decorations */

body.sw-theme .quick-add-modal__close::before,
body.sw-theme .quick-add-modal__close::after {
  content: none !important;
  display: none !important;
}


/* SVG X */

body.sw-theme .quick-add-modal__close svg {
  display: block !important;

  width: 10px !important;
  height: 10px !important;

  margin: 0 !important;

  color: currentColor !important;

  transform: none !important;
}


/* Desktop hover */

@media (hover: hover) and (pointer: fine) {
  body.sw-theme .quick-add-modal__close:hover {
    color: var(--sw-accent, #c86e3c) !important;

    background: var(--sw-bg, #f4efe4) !important;

    border-color: var(--sw-accent, #c86e3c) !important;

    border-radius: 50% !important;

    transform: none !important;
  }
}


/* Mobile - always keep it circular */

@media screen and (max-width: 749px) {
  body.sw-theme .quick-add-modal__close,
  body.sw-theme .quick-add-modal__close:hover,
  body.sw-theme .quick-add-modal__close:active,
  body.sw-theme .quick-add-modal__close:focus,
  body.sw-theme .quick-add-modal__close:focus-visible {
    width: 38px !important;
    height: 38px !important;

    border-radius: 50% !important;

    overflow: hidden !important;
    clip-path: circle(50%) !important;

    transform: none !important;
    box-shadow: none !important;
  }
}