/** Shopify CDN: Minification failed

Line 2041:0 All "@import" rules must come first

**/
/* ==========================================================================
   Sea Dogs of Magheramore — design layer over Dawn
   --------------------------------------------------------------------------
   Loaded after base.css. Everything here is additive: no Dawn file is
   rewritten, so `shopify theme pull` / Dawn upgrades stay clean.

   The look: Josefin Sans set uppercase and widely tracked for anything
   structural (nav, buttons, kickers, section headings), Inter for reading
   text, a deep teal-black ink, one teal accent, and square corners
   throughout.
   ========================================================================== */

:root {
  /* ---- Ink & accent ---------------------------------------------------- */
  --sd-ink: #102625;
  --sd-ink-light: #566766;
  --sd-ink-a5: rgba(16, 38, 37, 0.05);
  --sd-ink-a10: rgba(16, 38, 37, 0.1);
  --sd-ink-a20: rgba(16, 38, 37, 0.2);
  --sd-ink-a35: rgba(16, 38, 37, 0.35);

  --sd-teal: #419694;
  --sd-teal-hover: #206b69;
  --sd-teal-light: #87cbc9;
  --sd-teal-fade: rgba(65, 150, 148, 0.05);

  --sd-bg: #fafefe;
  --sd-bg-accent: #f1f9f9;
  --sd-inverse-text: #f7fefe;

  /* ---- Structural type ------------------------------------------------- */
  --sd-tracking: 0.09em;
  --sd-font-structural: var(--font-heading-family);

  /* ---- Type scale (1.155 ratio) ---------------------------------------- */
  --sd-font-1: 1rem;      /* 10px   */
  --sd-font-2: 1.133rem;  /* 11.3px */
  --sd-font-3: 1.2rem;    /* 12px   */
  --sd-font-4: 1.314rem;  /* 13.1px */
  --sd-font-5: 1.551rem;  /* 15.5px */
  --sd-font-6: 1.749rem;  /* 17.5px */
  --sd-font-7: 2.029rem;  /* 20.3px */
  --sd-font-8: 2.354rem;  /* 23.5px */
  --sd-font-9: 2.73rem;   /* 27.3px */
  --sd-font-10: 3.167rem; /* 31.7px */
  --sd-font-11: 3.674rem; /* 36.7px */
  --sd-font-12: 4.262rem; /* 42.6px */
  --sd-font-13: 4.944rem; /* 49.4px */
  --sd-font-14: 5.735rem; /* 57.4px */

  /* ---- Spacing --------------------------------------------------------- */
  --sd-space-4: 1.6rem;
  --sd-space-5: 2.4rem;
  --sd-space-6: 3.2rem;
  --sd-space-7: 4.8rem;
  --sd-space-8: 6.4rem;
  --sd-space-9: 9.6rem;

  --sd-outer: 3.6rem;
  --sd-gutter: 2rem;
}

/* ==========================================================================
   1. Structural type — the single most recognisable trait of the look
   ========================================================================== */

/*  A shared treatment: uppercase Josefin Sans, widely tracked.
    Applied to nav, buttons, kickers, labels, badges and section headings. */
.header__menu-item,
.header__menu-item span,
.mobile-facets__label,
.list-menu__item--link,
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.cart__dynamic-checkout-buttons button,
.product-form__submit,
.quick-add__submit,
.card__badge span,
.badge,
.price--on-sale .price__badge-sale,
.collection__title .title,
.title-wrapper--self-padded-tablet-down .title,
.footer-block__heading,
.product__tax,
.facets__summary,
.facet-filters__label,
.product-count__text,
.link--text,
.customer__title,
.form__label,
.field__label,
.select__select,
.share-button__button {
  font-family: var(--sd-font-structural);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
}

/* ==========================================================================
   2. Headings
   ========================================================================== */

/*  Colour must follow Dawn's colour scheme, never a fixed ink — otherwise
    every heading in a dark section (hero, footer, scheme-3 blocks) renders
    near-black on near-black.                                              */
h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-foreground));
}

.h0 { font-size: clamp(3.4rem, 6vw, var(--sd-font-13)); line-height: 1.1; }
h1, .h1 { font-size: clamp(3rem, 5vw, var(--sd-font-12)); line-height: 1.15; }
h2, .h2 { font-size: clamp(2.4rem, 3.5vw, var(--sd-font-10)); line-height: 1.2; }
h3, .h3 { font-size: var(--sd-font-8); line-height: 1.25; }
h4, .h4 { font-size: var(--sd-font-7); line-height: 1.3; }

body {
  font-family: var(--font-body-family);
  color: rgba(var(--color-foreground), 0.85);
  -webkit-font-smoothing: antialiased;
}

/* ---- Section headings: centred, uppercase, short rule beneath ---------- */
.section-header,
.title-wrapper-with-link .title,
.collection__title .title,
.collection-list-title,
.multicolumn .title,
.title-wrapper--self-padded-tablet-down .title {
  text-align: center;
}

.title-wrapper-with-link {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.section-header .title,
.title-wrapper-with-link .title,
.collection-list-title,
.collection__title .title,
.multicolumn .title {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-5);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--sd-space-4);
}

/*  The short centred rule under a section heading. */
.section-header .title::after,
.title-wrapper-with-link .title::after,
.collection-list-title::after,
.collection__title .title::after,
.multicolumn .title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: var(--sd-space-4) auto 0;
  background: var(--sd-ink-a35);
}

.collection-list-title {
  display: block;
  width: 100%;
}

/* ---- Kicker: the small label above a hero or section heading ----------- */
.sd-kicker,
.rich-text__caption,
.banner__caption,
.caption-with-letter-spacing {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: inherit;
  opacity: 0.9;
  margin-bottom: var(--sd-space-4);
  display: block;
}

/* ==========================================================================
   3. Header & navigation
   ========================================================================== */

.header {
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: var(--page-width);
}

.header__menu-item {
  font-size: var(--sd-font-4);
  font-weight: 400;
  padding: 1.2rem 1.5rem;
  color: rgb(var(--color-foreground));
}

.header__menu-item:hover span,
.header__menu-item:focus span {
  text-decoration: none;
  color: var(--sd-teal);
}

.header__menu-item span {
  text-decoration: none;
}

/* Underline that grows from the centre, rather than Dawn's full underline */
.header__inline-menu .header__menu-item > span {
  position: relative;
}

.header__inline-menu .header__menu-item > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease, left 0.25s ease;
}

.header__inline-menu .header__menu-item:hover > span::after,
.header__inline-menu .header__menu-item:focus > span::after {
  width: 100%;
  left: 0;
}

/* Dropdowns: square, hairline, no shadow bloom */
.header__submenu {
  border: 1px solid var(--sd-ink-a10);
  border-radius: 0;
  box-shadow: none;
  padding: 1.2rem 0;
}

.header__submenu .header__menu-item {
  font-size: var(--sd-font-3);
  padding: 0.9rem 2.4rem;
}

/* ---- Transparent header laid over the hero ----------------------------
   Pipeline floats the header on top of the opening image: white logo, white
   nav, no bar, no rule — the photograph runs to the top of the window. Dawn
   stacks the header above the content instead, so this lifts it.

   Scoped with :has() to pages that actually open with a full-bleed banner,
   so interior pages keep the ordinary solid header.                       */

@media screen and (min-width: 990px) {
  body:has(#MainContent > .shopify-section:first-child .banner--large),
  body:has(#MainContent > .shopify-section:first-child .banner--medium) {
    --sd-header-floats: 1;
  }

  body:has(#MainContent > .shopify-section:first-child .banner) #shopify-section-group-header-group {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 4;
    background: transparent;
  }

  /* The header itself goes see-through; the announcement bar stays teal */
  body:has(#MainContent > .shopify-section:first-child .banner) .header-wrapper {
    background: transparent;
    border-bottom: none;
  }

  /* Everything in it reads white against the photograph */
  body:has(#MainContent > .shopify-section:first-child .banner) .header__menu-item,
  body:has(#MainContent > .shopify-section:first-child .banner) .header__icon,
  body:has(#MainContent > .shopify-section:first-child .banner) .header__heading-link {
    color: #fff;
  }

  body:has(#MainContent > .shopify-section:first-child .banner) .header__icon .icon,
  body:has(#MainContent > .shopify-section:first-child .banner) .header__icon svg {
    color: #fff;
  }

  /* The white version of the mark, for use over the picture */
  body:has(#MainContent > .shopify-section:first-child .banner) .header__heading-logo {
    filter: brightness(0) invert(1);
  }

  /* Once the sticky header detaches and gains its own ground, undo all that */
  .header-wrapper--sticky.shopify-section-header-sticky {
    background: rgb(var(--color-background));
  }

  .shopify-section-header-sticky .header__menu-item,
  .shopify-section-header-sticky .header__icon,
  .shopify-section-header-sticky .header__heading-link {
    color: rgb(var(--color-foreground));
  }

  .shopify-section-header-sticky .header__heading-logo {
    filter: none;
  }

  /* The hero then has to start at the very top of the window */
  body:has(#MainContent > .shopify-section:first-child .banner) .banner--large {
    min-height: 100vh;
  }
}

/* Logo sizing: Pipeline's mark is small and quiet */
.header__heading-logo {
  max-height: 7rem;
  width: auto;
}

/* ==========================================================================
   3b. Utility bar — contact left, short menu right, hairline under
   ========================================================================== */

.sd-utility {
  background: transparent;
  position: relative;
  z-index: 5;
}

.sd-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-5);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
}

.sd-utility__contact {
  font-size: var(--sd-font-4);
  color: rgba(var(--color-foreground), 0.85);
}

.sd-utility__phone {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.sd-utility__list {
  display: flex;
  gap: var(--sd-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sd-utility__link {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.85);
  white-space: nowrap;
}

.sd-utility__link:hover { color: rgb(var(--color-foreground)); }

/* Over a hero the whole bar goes white and the rule softens */
@media screen and (min-width: 990px) {
  body:has(#MainContent > .shopify-section:first-child .banner) .sd-utility__inner {
    border-bottom-color: rgba(255, 255, 255, 0.25);
  }
  body:has(#MainContent > .shopify-section:first-child .banner) .sd-utility__contact,
  body:has(#MainContent > .shopify-section:first-child .banner) .sd-utility__phone,
  body:has(#MainContent > .shopify-section:first-child .banner) .sd-utility__link {
    color: rgba(255, 255, 255, 0.9);
  }
}

@media screen and (max-width: 749px) {
  .sd-utility__nav { display: none; }
  .sd-utility__inner { justify-content: center; }
}

/* Dawn's own announcement bar, if it is ever switched back on */
.announcement-bar,
.utility-bar {

  background: var(--sd-teal);
  color: var(--sd-inverse-text);
}

.announcement-bar__message {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-2);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  padding: 1rem 0;
}

/* ==========================================================================
   4. Buttons — square, uppercase, tracked
   ========================================================================== */

.button,
.shopify-challenge__button,
.customer button,
.product-form__submit,
.quick-add__submit {
  border-radius: 0;
  font-size: var(--sd-font-3);
  font-weight: 500;
  min-height: 4.8rem;
  padding: 0 3rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button::after,
.button::before {
  display: none; /* Dawn's shadow/border pseudo-elements */
}

.button--primary,
.product-form__submit,
.button:not(.button--secondary):not(.button--tertiary) {
  background: var(--sd-teal);
  color: #fff;
  border: 1px solid var(--sd-teal);
}

.button--primary:hover,
.product-form__submit:hover,
.button:not(.button--secondary):not(.button--tertiary):hover {
  background: var(--sd-teal-hover);
  border-color: var(--sd-teal-hover);
  color: #fff;
}

.button--secondary {
  background: transparent;
  color: rgb(var(--color-foreground));
  border: 1px solid rgba(var(--color-foreground), 0.45);
}

.button--secondary:hover {
  border-color: rgb(var(--color-foreground));
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

/* Text link with an arrow — Pipeline's "VIEW ALL" treatment */
.link,
.link--text,
.button--tertiary {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  text-underline-offset: 0.5rem;
  text-decoration-thickness: 1px;
  color: rgb(var(--color-foreground));
}

.link:hover,
.link--text:hover {
  color: var(--sd-teal);
}

/* ==========================================================================
   5. Product & collection cards
   ========================================================================== */

.card,
.card-wrapper,
.card__inner {
  border-radius: 0;
  box-shadow: none;
}

.card__media,
.card .media {
  border-radius: 0;
}

/* Pipeline's product tiles sit at a 90% (portrait-ish) aspect */
.card--standard .card__inner .media--square,
.card--standard .card__inner .media--portrait {
  padding-bottom: 90%;
}

.card__heading,
.card__heading a {
  font-family: var(--font-body-family);
  font-size: var(--sd-font-5);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-foreground));
}

.card__heading a:hover {
  color: var(--sd-teal);
  text-decoration: none;
}

.card-information {
  padding-top: 1.4rem;
  text-align: center;
}

.price,
.price-item {
  font-family: var(--font-body-family);
  font-size: var(--sd-font-4);
  color: rgba(var(--color-foreground), 0.7);
  letter-spacing: normal;
}

.price--on-sale .price-item--sale {
  color: var(--sd-teal);
}

/* Quiet, square sale badge */
.card__badge .badge,
.badge {
  border-radius: 0;
  font-size: var(--sd-font-1);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: none;
}

/* Gentle image lift on hover */
.card--standard .card__media img,
.card .media img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-wrapper:hover .card--standard .card__media img,
.card-wrapper:hover .card .media img {
  transform: scale(1.04);
}

/* ---- Collection cards (the "Shop Sea Dogs" row) ------------------------
   Dawn stacks the title BELOW the image. Pipeline lays it OVER the image,
   centred in white. This lifts the whole card__content on top of the media
   and darkens the image enough for white type to hold at any crop.        */

.collection-list__item .card,
.collection-list__item .card-wrapper,
.collection-list__item .card__inner {
  position: relative;
}

/* Kill the card background so the photograph is the card */
.collection-list__item .card__inner.gradient,
.collection-list__item .card__inner {
  background: none;
  border: none;
}

/* Scrim, so white type holds over a bright or busy photograph */
.collection-list__item .card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 38, 37, 0.1) 0%,
    rgba(16, 38, 37, 0.3) 55%,
    rgba(16, 38, 37, 0.55) 100%
  );
  transition: background 0.35s ease;
}

.collection-list__item .card-wrapper:hover .card__inner::after {
  background: linear-gradient(
    180deg,
    rgba(16, 38, 37, 0.2) 0%,
    rgba(16, 38, 37, 0.42) 55%,
    rgba(16, 38, 37, 0.62) 100%
  );
}

.collection-list__item .card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sd-space-5);
  margin: 0;
}

.collection-list__item .card__information {
  padding: 0;
  text-align: center;
}

.collection-list__item .card__heading,
.collection-list__item .card__heading a {
  font-family: var(--font-heading-family);
  font-size: clamp(1.9rem, 2.2vw, var(--sd-font-8));
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

/* Pipeline's "VIEW ALL —>" under the collection title */
.collection-list__item .card__heading::after {
  content: "Shop now";
  display: block;
  margin-top: 1.2rem;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.collection-list__item .card-wrapper:hover .card__heading::after,
.collection-list__item .card-wrapper:focus-within .card__heading::after {
  opacity: 0.95;
  transform: translateY(0);
}

/* A collection with no image set still needs to look deliberate */
.collection-list__item--no-media .card__inner {
  background: var(--sd-ink);
  min-height: 32rem;
}

.collection-list__item--no-media .card__inner::after {
  background: none;
}

/* ==========================================================================
   6. Hero / banner
   ========================================================================== */

.banner__content {
  text-align: center;
  align-items: center;
}

.banner__box {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 68rem;
  padding: var(--sd-space-6) var(--sd-space-5);
  text-align: center;
}

.banner--content-align-center .banner__box {
  text-align: center;
}

.banner__heading {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(3.2rem, 5.5vw, var(--sd-font-13));
  line-height: 1.1;
  margin-bottom: var(--sd-space-4);
}

.banner__text {
  font-size: var(--sd-font-6);
  line-height: 1.6;
}

/*  Dawn puts BOTH `banner__text` and the chosen text_style on one element,
    so the kicker needs to win on specificity or it renders at body size.
    Same for the heading-adjacent caption in image-with-text.             */
.banner__text.caption-with-letter-spacing,
.image-with-text__text.caption-with-letter-spacing {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: var(--sd-space-4);
  opacity: 0.9;
}

/* The hero's two buttons, side by side and evenly weighted */
.banner__buttons--multiple .button {
  min-width: 18rem;
}

/* A light bottom-weighted gradient on top of Dawn's own overlay (set to 15%
   in templates/index.json), so white type holds without flattening the
   photograph. Adjust the overlay in the customiser, not here. */
.banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 38, 37, 0) 0%,
    rgba(16, 38, 37, 0.12) 55%,
    rgba(16, 38, 37, 0.3) 100%
  );
  pointer-events: none;
}

/* ==========================================================================
   7. Footer — deep teal-black
   ========================================================================== */

.footer {
  background: var(--sd-ink);
  color: var(--sd-inverse-text);
  border-top: none;
  margin-top: 0;
}

.footer__content-top {
  padding-top: var(--sd-space-8);
  padding-bottom: var(--sd-space-7);
}

.footer-block__heading {
  font-size: var(--sd-font-3);
  font-weight: 500;
  color: var(--sd-inverse-text);
  margin-bottom: var(--sd-space-4);
}

.footer a,
.footer__list-social a,
.footer-block__details-content a,
.copyright__content a {
  color: rgba(247, 254, 254, 0.9);
  text-decoration: none;
}

.footer a:hover {
  color: var(--sd-teal-light);
  text-decoration: none;
}

.footer__content-bottom {
  border-top: 1px solid rgba(247, 254, 254, 0.15);
  padding-top: var(--sd-space-5);
}

.footer__content-bottom-wrapper {
  align-items: center;
}

.copyright__content {
  font-size: var(--sd-font-2);
  color: rgba(247, 254, 254, 0.6);
}

/* ---- Layout: link columns on the left, sign-up panel on the right -----
   Pipeline splits the footer in two: brand + menus occupy the left, and a
   teal sign-up panel sits flush to the right, full height. Dawn stacks the
   newsletter under the blocks, so this re-lays the grid.                 */

@media screen and (min-width: 990px) {
  .footer__content-top .footer__blocks-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.5fr;
    align-items: start;
    gap: var(--sd-space-6);
  }

  .footer__content-top .footer-block--newsletter {
    grid-column: 4;
    grid-row: 1;
    align-self: stretch;
    margin: calc(var(--sd-space-7) * -1) calc(var(--sd-outer) * -1) calc(var(--sd-space-6) * -1)
      var(--sd-space-5);
    padding: var(--sd-space-7) var(--sd-space-6);
    background: var(--sd-teal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: none;
    text-align: left;
  }
}

/* The panel on smaller screens: full-bleed band rather than a column */
@media screen and (max-width: 989px) {
  .footer__content-top .footer-block--newsletter {
    background: var(--sd-teal);
    margin: var(--sd-space-6) calc(var(--sd-gutter) * -1) 0;
    padding: var(--sd-space-6) var(--sd-gutter);
    max-width: none;
    text-align: left;
  }
}

/* Tracked uppercase headings must not break mid-word in a narrow column */
.footer-block__heading {
  white-space: nowrap;
}

.footer-block--menu .footer-block__details-content .link {
  white-space: nowrap;
}

/* Kicker sits ABOVE the heading; the heading is the long line.
   (Pipeline: "BECOME A SEA DOG" small, then "Exclusive offers…" large.) */
.footer-block--newsletter .footer-block__heading::before {
  content: "Become a Sea Dog";
  display: block;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  opacity: 0.85;
  margin-bottom: 1.4rem;
}

/* The reassuring line under the heading */
.footer-block--newsletter .footer-block__heading::after {
  content: "Join to get special offers, free giveaways, and once-in-a-lifetime deals. No spam, guaranteed.";
  display: block;
  font-family: var(--font-body-family);
  font-size: var(--sd-font-4);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.6;
  opacity: 0.92;
  margin-top: 1.6rem;
  max-width: 46rem;
}

.footer-block--newsletter .footer-block__heading {

  white-space: normal;
  font-family: var(--font-heading-family);
  font-size: clamp(2.4rem, 2.2vw, var(--sd-font-10));
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-block__newsletter .newsletter-form__field-wrapper {
  max-width: 44rem;
}

.footer-block--newsletter .field__input,
.footer-block__newsletter .field__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0;
  color: #fff;
  padding-left: 0;
}

.footer-block--newsletter .field::after,
.footer-block__newsletter .field::after {
  display: none;
}

.footer-block--newsletter .field__label,
.footer-block__newsletter .field__label {
  color: rgba(255, 255, 255, 0.75);
  left: 0;
}

.footer-block--newsletter .newsletter-form__button {
  color: #fff;
  right: 0;
}

/* ---- Link columns ------------------------------------------------------ */

.footer-block--menu .footer-block__details-content > li {
  margin-bottom: 1rem;
}

.footer-block__details-content .link {
  font-family: var(--font-body-family);
  font-size: var(--sd-font-4);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  color: rgba(247, 254, 254, 0.75);
}

.footer-block__details-content .link:hover {
  color: var(--sd-teal-light);
}

/* Brand logo in the footer sits small and quiet */
.footer-block__brand-info .footer-block__image-wrapper img {
  max-width: 7rem;
}

/* ---- Bottom bar -------------------------------------------------------- */

.footer__content-bottom {
  border-top: 1px solid rgba(247, 254, 254, 0.15);
  margin-top: var(--sd-space-7);
}

.footer__list-social .list-social__link {
  color: rgba(247, 254, 254, 0.85);
}

.footer__list-social .list-social__link:hover {
  color: var(--sd-teal-light);
}

.footer__payment .list-payment__item svg {
  opacity: 0.75;
}

/* Country selector: square, hairline, legible on the dark ground */
.footer__localization .localization-form__select,
.footer .disclosure__button {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(247, 254, 254, 0.25);
  color: rgba(247, 254, 254, 0.85);
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-2);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
}

/* ==========================================================================
   8. Forms & inputs — square, hairline
   ========================================================================== */

.field__input,
.select__select,
.customer .field input,
.customer select {
  border-radius: 0;
  box-shadow: none;
}

.field::after,
.select::after,
.field__input:focus,
.select__select:focus {
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--sd-teal);
}

/* Variant pills: square, not Dawn's rounded capsules */
.product-form__input--pill input[type="radio"] + label,
variant-selects .product-form__input--pill label {
  border-radius: 0;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
}

.product-form__input--pill input[type="radio"]:checked + label {
  background: var(--sd-ink);
  color: #fff;
  border-color: var(--sd-ink);
}

/* ==========================================================================
   9. Collection page & facets
   ========================================================================== */

.collection-hero__title,
.main-collection-title {
  text-align: center;
}

.facets__summary,
.facet-filters__label,
.facets__heading {
  font-size: var(--sd-font-3);
  font-weight: 500;
}

.facets__disclosure .facets__display {
  border-radius: 0;
  border: 1px solid var(--sd-ink-a10);
  box-shadow: none;
}

.active-facets__button-inner {
  border-radius: 0;
}

/* Empty-collection message — a real message, not a dead end */
.collection--empty .title-wrapper {
  padding: var(--sd-space-8) var(--sd-gutter);
  text-align: center;
}

/* ==========================================================================
   10. Layout rhythm
   ========================================================================== */

.page-width {
  max-width: var(--page-width);
  padding-left: var(--sd-outer);
  padding-right: var(--sd-outer);
}

@media screen and (max-width: 749px) {
  .page-width {
    padding-left: var(--sd-gutter);
    padding-right: var(--sd-gutter);
  }

  .header {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .section-header .title,
  .title-wrapper-with-link .title {
    font-size: var(--sd-font-4);
  }
}

/* Dawn ships generous section padding; Pipeline is tighter at the top
   of a section and looser between them. */
.shopify-section {
  --sd-section-rhythm: var(--sd-space-9);
}

/* ==========================================================================
   11. Accessibility & motion
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--sd-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .card--standard .card__media img,
  .card .media img,
  .header__inline-menu .header__menu-item > span::after {
    transition: none;
  }

  .card-wrapper:hover .card--standard .card__media img,
  .card-wrapper:hover .card .media img {
    transform: none;
  }
}

/* ==========================================================================
   12. Footer — "Stay in touch." row above the bottom rule
   --------------------------------------------------------------------------
   Pipeline closes the dark half of the footer with a large heading on the
   left and the social icons on the right, above a hairline. Dawn drops its
   social list into the bottom bar, so this lifts and dresses that row.
   ========================================================================== */

.footer__content-bottom {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.footer__content-bottom-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sd-space-5);
  flex-wrap: wrap;
}

/* The heading, set as furniture rather than content */
.footer__content-bottom-wrapper:first-of-type::before {
  content: "Stay in touch.";
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(2.2rem, 2.4vw, var(--sd-font-9));
  color: var(--sd-inverse-text);
  letter-spacing: normal;
  text-transform: none;
  margin-right: auto;
}

/* Hairline above that row, stopping where the teal panel begins */
.footer__content-bottom-wrapper:first-of-type {
  border-top: 1px solid rgba(247, 254, 254, 0.15);
  padding-top: var(--sd-space-6);
  margin-top: var(--sd-space-6);
}

.footer__list-social {
  margin: 0;
  gap: 0.8rem;
}

.footer__list-social .list-social__link {
  padding: 1rem;
}

.footer__list-social .icon {
  width: 2rem;
  height: 2rem;
}

/* Payment icons, country selector and copyright sit quieter, below */
.footer__content-bottom-wrapper--center,
.footer__content-bottom-wrapper:last-of-type {
  justify-content: space-between;
  padding-top: var(--sd-space-5);
  opacity: 0.85;
}

@media screen and (max-width: 749px) {
  .footer__content-bottom-wrapper:first-of-type::before {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--sd-space-4);
  }
}

/* The footer logo is a touch larger than the header's */
.footer-block__brand-info .footer-block__image-wrapper img {
  max-width: 9rem;
}

/* ==========================================================================
   13. Hero height — tall, but not the whole window
   --------------------------------------------------------------------------
   Pipeline's opening image is around 750px: enough to fill the view without
   hiding the fact that the page continues.
   ========================================================================== */

@media screen and (min-width: 990px) {
  body:has(#MainContent > .shopify-section:first-child .banner) .banner--large {
    min-height: 78rem;
    max-height: 88vh;
  }
}

.sd-utility__inner--no-rule {
  border-bottom: none;
}

/* ==========================================================================
   14. Header refinement — the bit a premium theme gets right
   --------------------------------------------------------------------------
   Dawn's `middle-center` already gives 'navigation heading icons' on one
   row. What it does not give is the rhythm: a tall calm bar, nav that never
   wraps, a mark that sits optically centred, and icons that do not crowd
   the edge.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .header {
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
    column-gap: var(--sd-space-5);
  }

  /* Nav sits on one line, always */
  .header__inline-menu .list-menu--inline {
    flex-wrap: nowrap;
    align-items: center;
  }

  .header__menu-item {
    padding: 0.8rem 1.4rem;
    white-space: nowrap;
  }

  /* The first item flush to the page edge, so the row starts cleanly */
  .header__inline-menu > .list-menu--inline > li:first-child .header__menu-item {
    padding-left: 0;
  }

  /* Icons to the right edge, evenly spaced */
  .header__icons {
    gap: 0.4rem;
    padding-right: 0;
  }

  .header__icon {
    height: 4.4rem;
    width: 4.4rem;
  }

  /* The mark: optically centred, never stretched */
  .header__heading-link {
    padding: 0;
    display: inline-flex;
    align-items: center;
  }

  .header__heading-logo {
    max-height: 6.4rem;
    width: auto;
    object-fit: contain;
  }
}

/* ---- Tablet & phone ---------------------------------------------------
   Below 990px Dawn swaps to the drawer menu: burger left, mark centred,
   icons right. The mark comes down a size and the bar tightens.          */

@media screen and (max-width: 989px) {
  .header {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .header__heading-logo {
    max-height: 5.2rem;
    width: auto;
  }

  /* The drawer's own menu picks up the structural type too */
  .menu-drawer__menu-item {
    font-family: var(--sd-font-structural);
    text-transform: uppercase;
    letter-spacing: var(--sd-tracking);
    font-size: var(--sd-font-4);
  }

  .menu-drawer__inner-container {
    background: rgb(var(--color-background));
  }
}

@media screen and (max-width: 749px) {
  .header__heading-logo {
    max-height: 4.6rem;
  }

  /* The hero gives back some height on a phone, and the type steps down */
  .banner--large,
  .banner--medium {
    min-height: 62vh;
  }

  .banner__heading {
    font-size: clamp(2.8rem, 8vw, var(--sd-font-10));
  }

  .banner__box {
    padding: var(--sd-space-5) var(--sd-gutter);
  }

  .banner__buttons--multiple .button {
    min-width: 0;
    width: 100%;
  }

  /* Section rhythm tightens rather than disappearing */
  .section-header .title,
  .title-wrapper-with-link .title,
  .collection-list-title,
  .collection__title .title {
    font-size: var(--sd-font-4);
  }
}

/* The hero text column never runs the full width on a wide screen */
.banner__box {
  max-width: 72rem;
  margin-inline: auto;
}

/* ==========================================================================
   15. Header layout — nav left, mark centred, icons right
   --------------------------------------------------------------------------
   Dawn's `middle-center` already lays the row out as
   'navigation heading icons' on 1fr auto 1fr, which is exactly the
   arrangement in the reference. What it needs is rhythm, not restructuring.

   A true split menu (half the links either side of the mark) was tried and
   abandoned: Dawn renders the menu as one <ul>, so the two halves can only
   be separated by opening a gap mid-list — and because the halves are never
   equal in width, that gap never lands on true centre. The icons sitting in
   the right-hand column break the symmetry again. Nav-left is both simpler
   and what the reference actually does.
   ========================================================================== */

@media screen and (min-width: 990px) {
  .header--middle-center:not(.drawer-menu) {
    column-gap: var(--sd-space-6);
  }

  .header--middle-center .list-menu--inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header--middle-center .header__menu-item {
    white-space: nowrap;
  }

  /* First item flush to the page edge so the row starts on the margin */
  .header--middle-center .header__inline-menu > .list-menu--inline > li:first-child .header__menu-item {
    padding-left: 0;
  }

  .header--middle-center .header__heading-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
  }

  .header--middle-center .header__icons {
    justify-self: end;
    gap: 0.4rem;
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   The mark must not collapse.

   `.header__heading-link` is an inline-flex box, and when it is absolutely
   positioned it shrink-wraps its contents. An <img> with `width: auto` is a
   flex item that will happily shrink to 0x0 in that situation, which makes
   the logo disappear entirely. Giving it a definite height and forbidding
   shrink pins it open.
   -------------------------------------------------------------------------- */

.header__heading-logo {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  object-fit: contain;
}

@media screen and (min-width: 990px) {
  .header__heading-logo {
    height: 6.4rem;
    max-height: none;
  }
}

@media screen and (max-width: 989px) {
  .header__heading-logo {
    height: 5.2rem;
    max-height: none;
  }
}

@media screen and (max-width: 749px) {
  .header__heading-logo {
    height: 4.6rem;
    max-height: none;
  }
}

/* The anchor needs a box to centre, too */
.header--middle-center .header__heading-link {
  line-height: 0;
}


/* --------------------------------------------------------------------------
   Header layout — mark left, menu right, icons far right.

   Dawn's `middle-left` lays the row out as 'heading navigation icons'. Push
   the menu to the end of its column and the three sit mark / menu / icons
   from left to right, with no centring to go wrong: the menu can be any
   length and nothing can ever collide.

   (A centred mark was tried first. With six real menu items the menu reaches
   past the middle of the row and runs under it, and clamping the menu only
   hid the collision from measurement rather than fixing it.)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .header--middle-left:not(.drawer-menu) {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto 1fr auto;
    column-gap: var(--sd-space-6);
    align-items: center;
  }

  /* The menu sits against the icons rather than against the mark */
  .header--middle-left .header__inline-menu {
    grid-area: navigation;
    justify-self: end;
  }

  .header--middle-left .list-menu--inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header--middle-left .header__menu-item {
    font-size: var(--sd-font-3);
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
  }

  /* Last item keeps a little air before the icons */
  .header--middle-left .header__inline-menu > .list-menu--inline > li:last-child .header__menu-item {
    padding-right: 0;
  }

  .header--middle-left .header__heading,
  .header--middle-left .header__heading-link {
    grid-area: heading;
    justify-self: start;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }

  .header--middle-left .header__icons {
    grid-area: icons;
    justify-self: end;
    gap: 0.4rem;
    padding-right: 0;
  }
}

/* Below desktop, Dawn's drawer takes over: burger left, mark centred. */
@media screen and (max-width: 989px) {
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header--middle-left .header__heading-link {
    justify-self: center;
  }

  .header--middle-left .header__icons {
    justify-self: end;
  }
}

/* ==========================================================================
   16. Motion
   --------------------------------------------------------------------------
   Restrained on purpose. A premium theme moves a little and never fidgets:
   one idea per element, slow easing, nothing that repeats in the reader's
   peripheral vision while they are trying to read.

   Everything here is switched off wholesale under prefers-reduced-motion at
   the end of the file.
   ========================================================================== */

/* ---- The mark bobs, the way a sea dog does ----------------------------- */

@keyframes sd-bob {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-4px) rotate(-1.2deg); }
}

@keyframes sd-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The rise and the bob both animate transform, so they live on different
   elements: the link rises once, the mark inside it bobs forever. Stacking
   them on one element leaves the finished rise (fill: both) competing with
   the loop for the same property. */
.header__heading-link {
  animation: sd-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.header__heading-logo {
  animation: sd-bob 6s ease-in-out 0.7s infinite;
  transform-origin: 50% 85%;
  will-change: transform;
}

/* Slower and deeper in the footer, where there is room for it to breathe */
.footer-block__brand-info .footer-block__image-wrapper img {
  animation: sd-bob 8s ease-in-out infinite;
  transform-origin: 50% 85%;
}

/* A nudge on hover, so the mark feels alive to the cursor */
.header__heading-link:hover .header__heading-logo {
  animation-play-state: paused;
  transform: translateY(-6px) rotate(-2deg) scale(1.04);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Section headings: the rule draws out from the centre -------------- */

@keyframes sd-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.section-header .title::after,
.title-wrapper-with-link .title::after,
.collection-list-title::after,
.collection__title .title::after,
.multicolumn .title::after {
  transform-origin: 50% 50%;
  animation: sd-rule 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- Product cards arrive in sequence rather than all at once ---------- */

.grid.product-grid > .grid__item,
.collection-list > .collection-list__item {
  animation: sd-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.grid.product-grid > .grid__item:nth-child(1),
.collection-list > .collection-list__item:nth-child(1) { animation-delay: 0.04s; }
.grid.product-grid > .grid__item:nth-child(2),
.collection-list > .collection-list__item:nth-child(2) { animation-delay: 0.12s; }
.grid.product-grid > .grid__item:nth-child(3),
.collection-list > .collection-list__item:nth-child(3) { animation-delay: 0.2s; }
.grid.product-grid > .grid__item:nth-child(4),
.collection-list > .collection-list__item:nth-child(4) { animation-delay: 0.28s; }
.grid.product-grid > .grid__item:nth-child(n + 5) { animation-delay: 0.34s; }

/* ---- Buttons fill from the left on hover ------------------------------- */

.button--primary,
.product-form__submit,
.button:not(.button--secondary):not(.button--tertiary) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button--primary::after,
.product-form__submit::after,
.button:not(.button--secondary):not(.button--tertiary)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background: var(--sd-teal-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.button--primary:hover::after,
.product-form__submit:hover::after,
.button:not(.button--secondary):not(.button--tertiary):hover::after {
  transform: scaleX(1);
}

/* ---- The hero settles in rather than appearing ------------------------- */

.banner__box > * {
  animation: sd-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.banner__box > *:nth-child(1) { animation-delay: 0.15s; }
.banner__box > *:nth-child(2) { animation-delay: 0.3s; }
.banner__box > *:nth-child(3) { animation-delay: 0.45s; }
.banner__box > *:nth-child(4) { animation-delay: 0.6s; }

/* ---- Collection card image eases on hover ------------------------------ */

.collection-list__item .card__media img {
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.collection-list__item .card-wrapper:hover .card__media img {
  transform: scale(1.06);
}

/* ==========================================================================
   17. Motion off, for anyone who asked for it
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .header__heading-logo,
  .footer-block__brand-info .footer-block__image-wrapper img {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   FIX — float the header over the hero
   --------------------------------------------------------------------------
   Dawn puts `shopify-section-group-header-group` on each section as a CLASS,
   not as an id on a wrapper. The earlier rule targeted an id that does not
   exist, so the header never lifted — while its white logo and white nav
   still applied, leaving them invisible on the white page.

   Measured on the live site: utility bar 49px + header 104px = 153px.
   ========================================================================== */

:root {
  --sd-header-stack: 15.3rem;
}

@media screen and (min-width: 990px) {
  body:has(#MainContent > .shopify-section:first-child .banner)
    .shopify-section-group-header-group {
    position: relative;
    z-index: 4;
    background: transparent;
  }

  /* Pull the hero up underneath the header so the photograph runs to the
     very top of the window. */
  body:has(#MainContent > .shopify-section:first-child .banner)
    #MainContent > .shopify-section:first-child {
    margin-top: calc(-1 * var(--sd-header-stack));
  }

  /* Push the hero's own content back down so it stays centred in the part
     of the image you can actually see. */
  body:has(#MainContent > .shopify-section:first-child .banner) .banner--large {
    padding-top: var(--sd-header-stack);
  }
}

/* On phones and tablets the header keeps its own ground, so the logo and
   nav must go back to ink rather than white. */
@media screen and (max-width: 989px) {
  .header__heading-logo {
    filter: none;
  }

  .header__menu-item,
  .header__icon {
    color: rgb(var(--color-foreground));
  }
}


/* ==========================================================================
   Collection cards — white-background product imagery
   --------------------------------------------------------------------------
   The earlier treatment laid the title over the photograph with a dark
   scrim, which suits a full-bleed lifestyle shot. It does not suit a
   product cut out on white: the scrim greys the white ground and the whole
   row goes muddy.

   So for these: no scrim, image sits on its own, title underneath in ink.
   ========================================================================== */

.collection-list__item .card__inner::after {
  content: none;
}

.collection-list__item .card__inner {
  background: #fff;
  border: 1px solid var(--sd-ink-a10);
}

/* Give the product some air inside the frame rather than bleeding to edge */
.collection-list__item .card__media {
  padding: 2.4rem;
  box-sizing: border-box;
}

.collection-list__item .card__media img {
  object-fit: contain;
}

/* Title comes back out from on top of the image and sits below it */
.collection-list__item .card__content {
  position: static;
  inset: auto;
  padding: 1.6rem 0 0;
  display: block;
  text-align: center;
}

.collection-list__item .card__heading,
.collection-list__item .card__heading a {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: rgb(var(--color-foreground));
  text-shadow: none;
}

.collection-list__item .card-wrapper:hover .card__heading a {
  color: var(--sd-teal);
}

/* The "Shop now" line was white-on-photo; make it a quiet ink underline */
.collection-list__item .card__heading::after {
  content: "Shop now";
  color: var(--sd-ink-light);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.collection-list__item .card-wrapper:hover .card__heading::after {
  opacity: 1;
}

/* A gentle lift on the frame rather than a zoom on the picture */
.collection-list__item .card__inner {
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.collection-list__item .card-wrapper:hover .card__inner {
  border-color: var(--sd-ink-a35);
  transform: translateY(-4px);
}

.collection-list__item .card-wrapper:hover .card__media img {
  transform: none;
}


/* ==========================================================================
   Collection cards + spacing pass
   --------------------------------------------------------------------------
   No frame, no border, no grey letterbox. A cut-out product on white does
   not want a box drawn round it — it wants space. So: the product floats on
   the page ground, with the label underneath and real air between cards.
   ========================================================================== */

/* ---- Kill every box, border and scrim from earlier passes -------------- */

.collection-list__item .card,
.collection-list__item .card-wrapper,
.collection-list__item .card__inner {
  background: transparent;
  border: none;
  box-shadow: none;
}

.collection-list__item .card__inner::after {
  content: none;
}

.collection-list__item .card__media {
  background: transparent;
  padding: 0;
}

.collection-list__item .card__media img {
  object-fit: contain;
  background: transparent;
  mix-blend-mode: multiply; /* hides any off-white in the source on our ground */
}

/* ---- Label sits below, with room ---------------------------------------- */

.collection-list__item .card__content {
  position: static;
  inset: auto;
  display: block;
  padding: 2.4rem 0 0;
  margin: 0;
  text-align: center;
}

.collection-list__item .card__heading,
.collection-list__item .card__heading a {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: rgb(var(--color-foreground));
  text-shadow: none;
  line-height: 1.4;
  margin: 0;
}

.collection-list__item .card__heading::after {
  content: none; /* the "Shop now" line is noise once the label is below */
}

.collection-list__item .card-wrapper:hover .card__heading a {
  color: var(--sd-teal);
}

/* A quiet lift, nothing more */
.collection-list__item .card__media img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.collection-list__item .card-wrapper:hover .card__media img {
  transform: translateY(-6px) scale(1.02);
}

/* ---- Gaps between the cards -------------------------------------------- */

@media screen and (min-width: 990px) {
  .collection-list.grid {
    column-gap: 4rem;
    row-gap: 4rem;
  }
}

/* ---- Section headings get more room beneath ---------------------------- */

.section-header .title,
.title-wrapper-with-link .title,
.collection-list-title,
.collection__title .title,
.multicolumn .title {
  margin-bottom: var(--sd-space-6);
}

.section-header .title::after,
.title-wrapper-with-link .title::after,
.collection-list-title::after,
.collection__title .title::after,
.multicolumn .title::after {
  margin-top: var(--sd-space-5);
}

/* ---- Navigation: open it up -------------------------------------------- */

@media screen and (min-width: 990px) {
  .header--middle-left .header__menu-item {
    padding: 0.8rem 1.8rem;
  }

  .header__menu-item .icon-caret,
  .header__menu-item svg {
    margin-left: 0.6rem;
  }

  .header--middle-left .header__icons {
    gap: 1.2rem;
    margin-left: 2.4rem;
  }
}

/* ---- Product rows ------------------------------------------------------- */

.card-information {
  padding-top: 1.8rem;
}

.slider-buttons {
  gap: 1.2rem;
  margin-top: var(--sd-space-5);
}

/* ---- Widen the collection row ------------------------------------------ */

@media screen and (min-width: 990px) {
  .collection-list-wrapper.page-width {
    max-width: 168rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}


/* ---- Fix: keep all four cards on one row -------------------------------
   Dawn sizes grid items with calc(25% - var(--grid-desktop-horizontal-
   spacing) * 3/4). Setting column-gap directly made the real gap wider than
   the one in that sum, so the fourth card no longer fitted and wrapped.
   Set the variable instead and the maths stays consistent. */

@media screen and (min-width: 990px) {
  .collection-list.grid {
    --grid-desktop-horizontal-spacing: 40px;
    --grid-desktop-vertical-spacing: 40px;
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

/* ---- Nav and mark, a size up ------------------------------------------- */

@media screen and (min-width: 990px) {
  .header--middle-left .header__menu-item {
    font-size: var(--sd-font-4);   /* was font-3 */
    font-weight: 500;              /* was 400 */
    letter-spacing: 0.1em;
    padding: 0.8rem 1.6rem;
  }

  /* The mark carries the brand, so give it some presence */
  .header__heading-logo {
    height: 8.4rem;                /* was 6.4rem */
  }

  .header {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }
}

@media screen and (max-width: 989px) {
  .header__heading-logo {
    height: 6.4rem;
  }
}

@media screen and (max-width: 749px) {
  .header__heading-logo {
    height: 5.4rem;
  }
}


/* ======================================================================
   THREE FIXES — paste at the very bottom of assets/sea-dogs.css, Save.
     1. removes the white strip above the hero
     2. stops the logo being flattened to solid white (brings back the
        eye dots and whiskers)
     3. makes the logo bigger
   ====================================================================== */

/* --- 1. Header floats over the hero, no strip ------------------------- */

@media screen and (min-width: 990px) {
  body:has(#MainContent > .shopify-section:first-child .banner)
    .shopify-section-group-header-group.shopify-section {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    background: transparent;
  }

  body:has(#MainContent > .shopify-section:first-child .banner)
    .shopify-section-group-header-group[id$="__utility-bar"] {
    top: 0;
  }

  body:has(#MainContent > .shopify-section:first-child .banner)
    .shopify-section-group-header-group[id$="__header"] {
    top: 4.9rem;
  }

  body:has(#MainContent > .shopify-section:first-child .banner)
    #MainContent > .shopify-section:first-child {
    margin-top: 0;
  }

  body:has(#MainContent > .shopify-section:first-child .banner) .banner--large {
    padding-top: 0;
    min-height: 100vh;
  }
}

/* --- 2. Logo keeps its drawn detail ----------------------------------- */
/* Sea-Dogs--Whiteout.png is already white with the eyes, whiskers and the
   SEA DOGS arc drawn in dark. Any filter flattens all of that to one solid
   shape, which is why the dots disappeared. */

.header__heading-logo,
body:has(#MainContent > .shopify-section:first-child .banner) .header__heading-logo,
.shopify-section-header-sticky .header__heading-logo {
  filter: none !important;
}

/* --- 3. Bigger ---------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-logo,
  .header__heading-logo {
    height: 12rem;
    max-height: none;
  }
}

@media screen and (max-width: 989px) {
  .header__heading-logo {
    height: 8rem;
    max-height: none;
  }
}



/* ======================================================================
   Real Josefin Sans 600/700
   ----------------------------------------------------------------------
   Shopify was loading only the 400 weight, so every heading asking for
   700 was being faux-bolded by the browser — thin and slightly smeared
   next to a true bold. This loads the genuine weights.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap');

h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5,
.banner__heading,
.image-with-text__heading,
.footer-block--newsletter .footer-block__heading,
.footer__content-bottom-wrapper:first-of-type::before {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

/* The structural type — nav, buttons, kickers, section headings — reads
   better one step down from the display weight. */
.header__menu-item,
.button,
.sd-utility__link,
.caption-with-letter-spacing,
.section-header .title,
.title-wrapper-with-link .title,
.collection-list-title,
.collection__title .title,
.collection-list__item .card__heading,
.collection-list__item .card__heading a,
.footer-block__heading {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
}

/* ======================================================================
   Logo swap — white over the hero, ink everywhere else
   ----------------------------------------------------------------------
   Shopify allows one logo setting, so the inner-page version is swapped in
   with content:, which replaces the image on an <img> element. The white
   Whiteout file stays as the theme setting and shows over the hero.
   ====================================================================== */

/* Inner pages: no hero banner, so the header sits on white */
body:not(:has(#MainContent > .shopify-section:first-child .banner))
  .header__heading-logo {
  content: url("https://seadogssurf.com/cdn/shop/files/sea-dogs-logo-dark.png");
  filter: none !important;
}

/* Homepage once the sticky header detaches and gains its own ground */
.shopify-section-header-sticky .header__heading-logo {
  content: url("https://seadogssurf.com/cdn/shop/files/sea-dogs-logo-dark.png");
  filter: none !important;
}

/* Tablet and phone: the header keeps a white ground at every scroll
   position, so the ink mark is correct there too. */
@media screen and (max-width: 989px) {
  .header__heading-logo {
    content: url("https://seadogssurf.com/cdn/shop/files/sea-dogs-logo-dark.png");
    filter: none !important;
  }
}

/* ======================================================================
   1. Slider arrows — keep both visible
   ----------------------------------------------------------------------
   Dawn hides the previous arrow on the first slide, so the control jumps
   around as you page through. Pipeline keeps it in place and dims it,
   which reads as steadier.
   ====================================================================== */

.slider-button,
.slider-button--prev,
.slider-button--next {
  display: inline-flex !important;
  visibility: visible !important;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid var(--sd-ink-a20);
  background: transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.slider-button[disabled],
.slider-button:disabled {
  opacity: 0.28;
  cursor: default;
}

.slider-button:not([disabled]):hover {
  border-color: var(--sd-ink);
  opacity: 1;
}

.slider-button .icon,
.slider-button svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* ======================================================================
   2. Product photography — even out the backgrounds
   ----------------------------------------------------------------------
   The catalogue mixes pure white cut-outs with light grey studio shots, so
   the row reads as a line of grey boxes against the near-white page. This
   lifts the lightest tones to white without touching the product, which is
   dark on nearly every one of these.

   It is a smoothing pass, not a fix. Genuinely inconsistent source images
   want re-cutting with the background removed.
   ====================================================================== */

.product-grid .card__media img,
.product-grid .card .media img {
  filter: brightness(1.06) contrast(1.01);
  background: #fff;
}

/* The tiles themselves sit on white so nothing frames them */
.product-grid .card__inner,
.product-grid .card--standard .card__inner {
  background: #fff;
}

.product-grid .card__media {
  background: #fff;
}

/* ======================================================================
   Video section — give the title room
   ----------------------------------------------------------------------
   The heading sat in a title-wrapper with no padding at all, left aligned,
   inside a dark band set to zero top and bottom padding. The result read
   as a strip rather than a section opening.
   ====================================================================== */

[id$="__film"] .title-wrapper {
  padding: var(--sd-space-8) var(--sd-gutter) var(--sd-space-7);
  margin: 0;
  text-align: center;
}

[id$="__film"] .title-wrapper .title {
  text-align: center;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(2.6rem, 3.4vw, var(--sd-font-11));
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 auto;
  max-width: 30ch;
  color: var(--sd-inverse-text);
}

/* A kicker above it, matching the rest of the page */
[id$="__film"] .title-wrapper .title::before {
  content: "Magheramore, first light";
  display: block;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  opacity: 0.7;
  margin-bottom: var(--sd-space-5);
}

/* The centred rule the other sections use */
[id$="__film"] .title-wrapper .title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: var(--sd-space-5) auto 0;
  background: rgba(247, 254, 254, 0.35);
}

/* Breathing room under the video too */
[id$="__film"] .video-section__media,
[id$="__film"] deferred-media,
[id$="__film"] .video-section__poster {
  margin-bottom: 0;
}

[id$="__film"] {
  padding-bottom: var(--sd-space-7);
}

/* Play button: match the theme rather than Dawn's default */
[id$="__film"] .deferred-media__poster-button {
  background: rgba(16, 38, 37, 0.85);
  border: 1px solid rgba(247, 254, 254, 0.4);
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}

[id$="__film"] .deferred-media__poster-button:hover {
  background: var(--sd-teal);
  transform: scale(1.06);
}

/* ======================================================================
   Products with no image — hold the grid together
   ----------------------------------------------------------------------
   17 of 348 products have no image in the catalogue. Without one the card
   collapses, so the row goes ragged and the titles float in the middle of
   empty boxes.

   This keeps every card the same shape and puts a quiet mark in the gap,
   so the row stays straight until the photographs are added.
   ====================================================================== */

.product-grid .card--standard .card__inner,
.product-grid .card .card__inner {
  position: relative;
  min-height: 0;
}

/* Reserve the same space whether or not there is a photograph */
.product-grid .grid__item .card__inner .ratio,
.product-grid .grid__item .card__inner {
  aspect-ratio: 4 / 5;
}

.product-grid .card__media,
.product-grid .media {
  height: 100%;
}

/* The placeholder itself: a very quiet mark, not a loud grey box */
.product-grid .card__inner:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sd-bg-accent);
}

.product-grid .card__inner:not(:has(img))::after {
  content: "Photograph coming";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-2);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: var(--sd-ink-a35);
}

/* Keep the text block below the image aligned across the row */
.product-grid .card__content,
.product-grid .card-information {
  text-align: center;
}


/* ======================================================================
   Video section — give the title room
   ----------------------------------------------------------------------
   The heading sat in a title-wrapper with no padding at all, left aligned,
   inside a dark band set to zero top and bottom padding. The result read
   as a strip rather than a section opening.
   ====================================================================== */

[id$="__film"] .title-wrapper {
  padding: var(--sd-space-8) var(--sd-gutter) var(--sd-space-7);
  margin: 0;
  text-align: center;
}

[id$="__film"] .title-wrapper .title {
  text-align: center;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(2.6rem, 3.4vw, var(--sd-font-11));
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 auto;
  max-width: 30ch;
  color: var(--sd-inverse-text);
}

/* A kicker above it, matching the rest of the page */
[id$="__film"] .title-wrapper .title::before {
  content: "Magheramore, first light";
  display: block;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  opacity: 0.7;
  margin-bottom: var(--sd-space-5);
}

/* The centred rule the other sections use */
[id$="__film"] .title-wrapper .title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin: var(--sd-space-5) auto 0;
  background: rgba(247, 254, 254, 0.35);
}

/* Breathing room under the video too */
[id$="__film"] .video-section__media,
[id$="__film"] deferred-media,
[id$="__film"] .video-section__poster {
  margin-bottom: 0;
}

[id$="__film"] {
  padding-bottom: var(--sd-space-7);
}

/* Play button: match the theme rather than Dawn's default */
[id$="__film"] .deferred-media__poster-button {
  background: rgba(16, 38, 37, 0.85);
  border: 1px solid rgba(247, 254, 254, 0.4);
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}

[id$="__film"] .deferred-media__poster-button:hover {
  background: var(--sd-teal);
  transform: scale(1.06);
}

/* ======================================================================
   Products with no image — hold the grid together
   ----------------------------------------------------------------------
   17 of 348 products have no image in the catalogue. Without one the card
   collapses, so the row goes ragged and the titles float in the middle of
   empty boxes.

   This keeps every card the same shape and puts a quiet mark in the gap,
   so the row stays straight until the photographs are added.
   ====================================================================== */

.product-grid .card--standard .card__inner,
.product-grid .card .card__inner {
  position: relative;
  min-height: 0;
}

/* Reserve the same space whether or not there is a photograph */
.product-grid .grid__item .card__inner .ratio,
.product-grid .grid__item .card__inner {
  aspect-ratio: 4 / 5;
}

.product-grid .card__media,
.product-grid .media {
  height: 100%;
}

/* The placeholder itself: a very quiet mark, not a loud grey box */
.product-grid .card__inner:not(:has(img))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sd-bg-accent);
}

.product-grid .card__inner:not(:has(img))::after {
  content: "Photograph coming";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-2);
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: var(--sd-ink-a35);
}

/* Keep the text block below the image aligned across the row */
.product-grid .card__content,
.product-grid .card-information {
  text-align: center;
}

/* ======================================================================
   Push image-less products to the end
   ----------------------------------------------------------------------
   Dawn's product grid is a flex container, so flex `order` reorders the
   cards visually without touching the catalogue.

   Worth knowing: this only reorders what is on the page you are looking
   at. On a paginated collection an image-less product on page 1 moves to
   the end of page 1, not to the last page. Shopify's own sort options
   cannot filter on "has an image", so a permanent fix means either adding
   the photographs or tagging those 17 and excluding the tag.
   ====================================================================== */

.product-grid .grid__item,
.collection .grid__item {
  order: 0;
}

.product-grid .grid__item:not(:has(.card__media img)),
.collection .grid__item:not(:has(.card__media img)) {
  order: 99;
}

/* Sold-out items usually want to follow them rather than lead */
.product-grid .grid__item:has(.badge--sold-out),
.collection .grid__item:has(.badge--sold-out) {
  order: 50;
}


/* ======================================================================
   Play button — stop it jumping on hover
   ----------------------------------------------------------------------
   Dawn centres the button with transform: translate(-50%, -50%). The hover
   rule here set transform: scale(1.06), which replaced that translate
   rather than adding to it, so the button shifted down and right by half
   its own size.

   Using the standalone `scale` property instead leaves transform alone, so
   the centring survives and it simply grows in place.
   ====================================================================== */

[id$="__film"] .deferred-media__poster-button,
.deferred-media__poster-button {
  transform: none;
  transition: scale 0.3s ease, background-color 0.3s ease;
  scale: 1;
}

[id$="__film"] .deferred-media__poster-button:hover,
.deferred-media__poster-button:hover {
  transform: none;
  scale: 1.06;
  background: var(--sd-teal-hover);
}


/* ======================================================================
   Footer — the Pipeline arrangement
   ----------------------------------------------------------------------
   Actual DOM, checked on the live site:

     .footer__content-top.page-width
         .footer__blocks-wrapper.grid   <- logo + Shop + Navigate
         .footer-block--newsletter      <- SIBLING, not a grid child

   Earlier rules here assumed the newsletter sat in column 4 of that grid.
   It never did, which is why the teal panel floated in the middle instead
   of running to the right edge.

   So: make .footer__content-top itself the two-column layout, and let the
   panel bleed out of the page width to the window edge.
   ====================================================================== */

@media screen and (min-width: 990px) {
  .footer__content-top {
    display: grid;
    grid-template-columns: 1fr 44rem;
    align-items: stretch;
    column-gap: var(--sd-space-7);
    padding-top: var(--sd-space-8);
    padding-bottom: 0;
  }

  .footer__content-top .footer__blocks-wrapper {
    grid-column: 1;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    column-gap: var(--sd-space-7);
    align-items: start;
    margin: 0;
  }

  /* The teal panel: full height of the row, flush to the window edge */
  .footer__content-top .footer-block--newsletter {
    grid-column: 2;
    align-self: stretch;
    margin: calc(var(--sd-space-8) * -1) calc((100vw - var(--page-width)) / -2)
      var(--sd-space-7) 0;
    padding: var(--sd-space-8) var(--sd-space-7);
    background: var(--sd-teal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    width: auto;
    text-align: left;
  }
}

/* On narrower screens the panel becomes a full-bleed band under the links */
@media screen and (max-width: 989px) {
  .footer__content-top .footer-block--newsletter {
    background: var(--sd-teal);
    margin: var(--sd-space-6) calc(var(--sd-gutter) * -1) 0;
    padding: var(--sd-space-6) var(--sd-gutter);
    max-width: none;
    text-align: left;
  }
}

/* ---- Panel contents ---------------------------------------------------- */

.footer-block--newsletter .footer-block__heading {
  text-align: left;
  margin-bottom: 0;
}

.footer-block--newsletter .footer-block__newsletter,
.footer-block--newsletter .newsletter-form {
  margin: var(--sd-space-5) 0 0;
  max-width: 42rem;
}

/* ---- The brand mark and the two link columns --------------------------- */

.footer-block__brand-info {
  margin: 0;
}

.footer-block__brand-info .footer-block__image-wrapper {
  margin-bottom: var(--sd-space-5);
}

.footer-block__brand-info .footer-block__image-wrapper img {
  max-width: 11rem;
  height: auto;
}

.footer-block--menu .footer-block__details-content {
  margin: 0;
}

.footer-block--menu .footer-block__details-content > li {
  margin-bottom: 1.2rem;
}

/* ---- "Stay in touch." row --------------------------------------------- */

.footer__content-bottom-wrapper:first-of-type {
  align-items: center;
  padding-top: var(--sd-space-6);
  margin-top: var(--sd-space-6);
}

.footer__list-social {
  margin-left: auto;
  gap: 0.4rem;
}

.footer__list-social .list-social__link {
  padding: 1.1rem;
}

.footer__list-social .icon {
  width: 2.1rem;
  height: 2.1rem;
}


/* ======================================================================
   Footer — corrected
   ----------------------------------------------------------------------
   Dawn loads section-footer.css AFTER sea-dogs.css, and its
   `.footer__content-top { display: block }` has the same specificity as
   mine. Same weight, later in the cascade, so Dawn won and the two-column
   layout never applied — which is why the panel kept sitting under the
   links instead of beside them.

   Everything here is scoped with `.footer` in front to outweigh it.

   The logo is injected here too. Dawn's footer brand block reads from
   Theme settings > Brand information, not from the header logo, so it was
   rendering an empty paragraph.
   ====================================================================== */

@media screen and (min-width: 990px) {
  .footer .footer__content-top {
    display: grid;
    grid-template-columns: 1fr 46rem;
    align-items: stretch;
    column-gap: var(--sd-space-8);
    padding-top: var(--sd-space-9);
    padding-bottom: 0;
  }

  .footer .footer__content-top .footer__blocks-wrapper {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sd-space-8);
    align-items: start;
    margin: 0;
  }

  /* The empty brand block would otherwise eat a grid column */
  .footer .footer__blocks-wrapper > .footer-block:first-child {
    grid-column: 1 / -1;
    margin-bottom: var(--sd-space-7);
  }

  .footer .footer__content-top .footer-block--newsletter {
    grid-column: 2;
    align-self: stretch;
    margin: calc(var(--sd-space-9) * -1) calc((100vw - var(--page-width)) / -2) 0 0;
    padding: var(--sd-space-9) var(--sd-space-8);
    background: var(--sd-teal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    width: auto;
    text-align: left;
  }
}

/* ---- The logo, injected ------------------------------------------------ */

.footer .footer-block__brand-info {
  min-height: 12rem;
}

.footer .footer-block__brand-info::before {
  content: url("https://seadogssurf.com/cdn/shop/files/Sea-Dogs--Whiteout.png");
  display: block;
  width: 11rem;
  margin-bottom: var(--sd-space-5);
}

.footer .footer-block__brand-info .rte:empty,
.footer .footer-block__brand-info .rte p:empty {
  display: none;
}

/* ---- Columns ----------------------------------------------------------- */

.footer .footer-block__heading {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: rgba(247, 254, 254, 0.7);
  margin-bottom: var(--sd-space-5);
}

.footer .footer-block--menu .footer-block__details-content > li {
  margin-bottom: 1.6rem;
}

.footer .footer-block__details-content .link {
  font-family: var(--font-body-family);
  font-size: var(--sd-font-6);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  color: var(--sd-inverse-text);
}

.footer .footer-block__details-content .link:hover {
  color: var(--sd-teal-light);
}

/* ---- Panel ------------------------------------------------------------- */

.footer .footer-block--newsletter .footer-block__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(2.6rem, 2.4vw, var(--sd-font-10));
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
  margin-bottom: 0;
}

.footer .footer-block--newsletter .footer-block__newsletter {
  margin-top: var(--sd-space-6);
  max-width: none;
}

/* ---- "Stay in touch." line --------------------------------------------- */

.footer .footer__content-bottom-wrapper:first-of-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(247, 254, 254, 0.18);
  padding-top: var(--sd-space-7);
  margin-top: var(--sd-space-8);
}

.footer .footer__list-social {
  margin: 0 0 0 auto;
}

/* ======================================================================
   Footer — fix the giant logo and tighten the whole thing
   ----------------------------------------------------------------------
   content: url() on a pseudo-element renders the image at its natural
   size (799 x 1005 here) and does not reliably honour width/height. That
   is why the mark filled the footer. background-image is sizeable, so
   that is what this uses.

   Padding is also pulled back: the footer was 1966px tall, nearly twice
   the viewport.
   ====================================================================== */

/* --- The mark, properly sized --- */

.footer .footer-block__brand-info::before {
  content: "";
  display: block;
  width: 9rem;
  height: 11.3rem;          /* 799 x 1005 is roughly 1 : 1.26 */
  background-image: url("https://seadogssurf.com/cdn/shop/files/Sea-Dogs--Whiteout.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
  margin-bottom: var(--sd-space-5);
}

.footer .footer-block__brand-info {
  min-height: 0;
}

/* --- Tighten the vertical rhythm --- */

@media screen and (min-width: 990px) {
  .footer .footer__content-top {
    padding-top: var(--sd-space-7);
    padding-bottom: 0;
    align-items: start;
  }

  .footer .footer__content-top .footer-block--newsletter {
    margin-top: calc(var(--sd-space-7) * -1);
    margin-bottom: 0;
    padding: var(--sd-space-7) var(--sd-space-7);
    align-self: stretch;
  }

  /* The brand block spans the row above the two menus, but should only be
     as tall as the mark itself */
  .footer .footer__blocks-wrapper > .footer-block:first-child {
    margin-bottom: var(--sd-space-6);
  }

  .footer .footer__content-top .footer__blocks-wrapper {
    padding-bottom: var(--sd-space-7);
  }
}

/* --- Link spacing back to something sensible --- */

.footer .footer-block--menu .footer-block__details-content > li {
  margin-bottom: 1.2rem;
}

.footer .footer-block__details-content .link {
  font-size: var(--sd-font-5);
}

/* --- Panel text --- */

.footer .footer-block--newsletter .footer-block__heading {
  font-size: clamp(2.2rem, 1.9vw, var(--sd-font-9));
}

.footer .footer-block--newsletter .footer-block__newsletter {
  margin-top: var(--sd-space-5);
}

/* --- Bottom rows --- */

.footer .footer__content-bottom-wrapper:first-of-type {
  padding-top: var(--sd-space-6);
  margin-top: 0;
}

.footer .footer__content-bottom-wrapper:last-of-type {
  padding-top: var(--sd-space-5);
  padding-bottom: var(--sd-space-5);
}


/* ======================================================================
   Footer — final tidy
   ----------------------------------------------------------------------
   Two things measured on the live site:

   1. The panel stopped 36px short of the window edge. The bleed only
      allowed for the page-width margin and not for page-width's own
      horizontal padding, so it needs that added.

   2. Dawn renders the social icons INSIDE the newsletter block, not on
      the bottom row. They were stranded at the foot of the teal panel
      with a lot of dead colour above them. Rather than fight the markup,
      they are pulled up tight under the sign-up form so the panel reads
      as one group.
   ====================================================================== */

@media screen and (min-width: 990px) {
  /* 1. Properly flush to the right edge */
  .footer .footer__content-top .footer-block--newsletter {
    margin-right: calc(((100vw - var(--page-width)) / -2) - var(--sd-outer));
    padding: var(--sd-space-7) var(--sd-space-7) var(--sd-space-7)
      var(--sd-space-7);
    justify-content: center;
  }

  /* 2. Socials sit with the form, not adrift at the bottom */
  .footer .footer-block--newsletter .footer__list-social,
  .footer .footer-block--newsletter .list-social {
    margin: var(--sd-space-6) 0 0;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .footer .footer-block--newsletter .list-social__link {
    padding: 0.9rem;
  }

  .footer .footer-block--newsletter .list-social__link .icon {
    width: 2rem;
    height: 2rem;
  }

  /* Mark and menus closer together */
  .footer .footer__blocks-wrapper > .footer-block:first-child {
    margin-bottom: var(--sd-space-5);
  }

  .footer .footer-block__brand-info::before {
    width: 10rem;
    height: 12.6rem;
    margin-bottom: 0;
  }

  /* Panel no taller than it needs to be */
  .footer .footer__content-top {
    align-items: stretch;
    padding-top: var(--sd-space-7);
  }

  .footer .footer__content-top .footer__blocks-wrapper {
    padding-bottom: var(--sd-space-8);
  }
}

/* --- "Stay in touch." row, now without icons to balance ---------------- */

.footer .footer__content-bottom-wrapper:first-of-type {
  justify-content: flex-start;
  padding-top: var(--sd-space-6);
  padding-bottom: var(--sd-space-6);
}

.footer .footer__content-bottom-wrapper:first-of-type::before {
  font-size: clamp(2.2rem, 2.2vw, var(--sd-font-9));
}

/* --- Bottom line quieter ----------------------------------------------- */

.footer .footer__content-bottom-wrapper:last-of-type {
  padding-top: 0;
  padding-bottom: var(--sd-space-5);
}



/* ======================================================================
   Footer — one rule, not two, and close the dead space
   ----------------------------------------------------------------------
   Measured on the live site:
     - .footer__content-bottom carries a 1px border at 0.08 opacity
     - .footer__content-bottom-wrapper:first-of-type carries another at 0.18
   Stacked a few pixels apart, which reads as a double line.

   The same row was 153px tall holding only an empty "Payment methods"
   label, and the social icons were still sitting at the foot of the teal
   panel because Dawn gives them margin-top: auto.
   ====================================================================== */

/* --- One line only --- */

.footer .footer__content-bottom {
  border-top: none;
}

.footer .footer__content-bottom-wrapper:first-of-type {
  border-top: 1px solid rgba(247, 254, 254, 0.18);
  padding-top: var(--sd-space-6);
  padding-bottom: var(--sd-space-5);
  margin-top: 0;
}

/* --- Kill the empty payment row --- */

.footer .footer__payment:empty,
.footer .footer__column--info:empty {
  display: none;
}

.footer .footer__payment .list-payment:empty {
  display: none;
}

/* --- Socials up with the form, overriding Dawn's margin-top: auto --- */

.footer .footer-block--newsletter .list-social,
.footer .footer-block--newsletter .footer__list-social {
  margin-top: var(--sd-space-6) !important;
  margin-bottom: 0;
  justify-content: flex-start;
}

/* --- The panel hugs its content rather than stretching --- */

@media screen and (min-width: 990px) {
  .footer .footer-block--newsletter {
    justify-content: center;
  }

  .footer .footer-block--newsletter > * {
    flex: 0 0 auto;
  }
}

/* --- Trim the remaining dead space --- */

.footer .footer__content-bottom-wrapper:last-of-type {
  padding-top: var(--sd-space-4);
  padding-bottom: var(--sd-space-5);
}

.footer .footer__content-bottom-wrapper:first-of-type::before {
  margin-bottom: 0;
}



/* ======================================================================
   Buttons — give the label room
   ----------------------------------------------------------------------
   The earlier rule was `min-height: 4.8rem; padding: 0 3rem` — no vertical
   padding at all, with the text centred only by the min-height. Uppercase
   type with 0.09em tracking needs more air than that, top, bottom and
   especially at the sides where the tracking pushes the last letter out.
   ====================================================================== */

.button,
.shopify-challenge__button,
.customer button,
.product-form__submit,
.quick-add__submit,
.cart__dynamic-checkout-buttons button {
  min-height: 5.4rem;
  padding: 1.6rem 3.6rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The tracking adds space after the final letter, so the right side reads
   narrower than the left unless it is compensated. */
.button,
.product-form__submit,
.quick-add__submit {
  padding-right: calc(3.6rem - 0.09em);
}

/* Full-width buttons keep their height but lose the side padding rule */
.button--full-width,
.product-form__submit {
  width: 100%;
}

/* Small buttons in facets and sliders stay proportionate */
.active-facets__button .button,
.facets__button {
  min-height: 4rem;
  padding: 1rem 1.8rem;
}

/* ======================================================================
   FULL RESPONSIVE AUDIT — phone 375, tablet 768, desktop
   Checked: homepage, collection, product, search, cart, page
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. FOOTER PANEL OVERFLOWS THE RIGHT EDGE
   The bleed used (100vw - page-width) / -2 - outer, which overshot by the
   padding and pushed the panel past the window, cutting off the heading.
   (100% - 100vw) / 2 measures from the container's own content box, so it
   lands exactly on the window edge at any width. Clamped so it can never
   go positive on a narrow screen.
   ---------------------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .footer .footer__content-top .footer-block--newsletter {
    margin-right: min(0px, calc((100% - 100vw) / 2));
  }
}

/* ----------------------------------------------------------------------
   2. SPACING UNDER THE CART / EMPTY-STATE BUTTON
   The button sat hard against the footer with no breathing room.
   ---------------------------------------------------------------------- */

.cart__empty-text,
.is-empty .cart__warnings,
.cart__warnings {
  padding-bottom: var(--sd-space-9);
}

.cart__warnings .button,
.is-empty .button {
  margin-bottom: var(--sd-space-8);
}

/* Any section that ends on a button wants room before the footer */
#MainContent > .shopify-section:last-child {
  padding-bottom: var(--sd-space-8);
}

/* ----------------------------------------------------------------------
   3. PHONE — product cards were 3px apart and rows ran ragged
   ---------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .product-grid.grid,
  .collection .grid {
    --grid-mobile-horizontal-spacing: 16px;
    --grid-mobile-vertical-spacing: 32px;
    column-gap: 16px;
    row-gap: 32px;
  }

  .product-grid .grid__item {
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  /* Titles of different lengths were staggering the rows */
  .product-grid .card__content,
  .product-grid .card-information {
    min-height: 9rem;
  }

  .product-grid .card__heading {
    font-size: var(--sd-font-4);
    line-height: 1.35;
  }

  /* Headings and section rhythm step down */
  .collection-hero__title,
  .main-page-title,
  h1 {
    font-size: clamp(2.4rem, 7vw, var(--sd-font-9));
  }

  #MainContent > .shopify-section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ----------------------------------------------------------------------
   4. TABLET — two columns left the grid sparse at 768px
   ---------------------------------------------------------------------- */

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product-grid .grid__item {
    width: calc(33.33% - 14px);
    max-width: calc(33.33% - 14px);
  }

  .product-grid.grid,
  .collection .grid {
    column-gap: 20px;
    row-gap: 36px;
  }

  /* The filter row was stacking onto two lines */
  .facets__form,
  .facets-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sd-space-5);
  }

  .collection-list .grid__item {
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

/* ----------------------------------------------------------------------
   5. PHONE — footer stacks, panel becomes a full-bleed band
   ---------------------------------------------------------------------- */

@media screen and (max-width: 989px) {
  .footer .footer__content-top {
    display: block;
    padding-top: var(--sd-space-7);
  }

  .footer .footer__blocks-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sd-space-6);
  }

  .footer .footer-block__brand-info::before {
    width: 7rem;
    height: 8.8rem;
  }

  .footer .footer-block--newsletter {
    margin: var(--sd-space-7) calc(var(--sd-gutter) * -1) 0;
    padding: var(--sd-space-7) var(--sd-gutter);
  }

  .footer .footer__content-bottom-wrapper:first-of-type {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sd-space-4);
  }
}

@media screen and (max-width: 480px) {
  .footer .footer__blocks-wrapper {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------------
   6. PHONE — product page
   ---------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .product__info-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .product__title h1,
  .product__title > * {
    font-size: clamp(2.2rem, 6.5vw, var(--sd-font-8));
    line-height: 1.2;
  }

  .product-form__submit,
  .product-form__buttons .button {
    width: 100%;
  }

  .product-form__input--pill label {
    font-size: var(--sd-font-2);
    padding: 1rem 1.4rem;
  }
}

/* ----------------------------------------------------------------------
   7. PHONE — hero and homepage rhythm
   ---------------------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .banner__buttons--multiple {
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
  }

  .banner__buttons--multiple .button {
    width: 100%;
    min-width: 0;
  }

  [id$="__film"] .title-wrapper {
    padding: var(--sd-space-7) var(--sd-gutter) var(--sd-space-6);
  }
}


/* ======================================================================
   Footer panel — bleed right, reliably
   ----------------------------------------------------------------------
   Previous attempts all tried to calculate the exact distance from the
   container's edge to the window. Each got it wrong in a different way,
   the last because `100%` inside a GRID ITEM resolves against the grid
   area (460px), not the container — so the panel overshot by 384px and
   the whole page scrolled sideways at 1440.

   This stops calculating. The panel is given a huge right margin and the
   same amount back as padding, so its content stays put while its
   background runs well past the window. The footer clips the remainder,
   so nothing can ever overflow regardless of viewport or page width.
   ====================================================================== */

.footer {
  overflow-x: clip;
}

@media screen and (min-width: 990px) {
  .footer .footer__content-top .footer-block--newsletter {
    margin-right: -100vw;
    padding-right: calc(100vw + var(--sd-space-7));
  }
}

/* Phone and tablet: the panel is a full-bleed band, same principle */
@media screen and (max-width: 989px) {
  .footer .footer-block--newsletter {
    margin-left: calc(var(--sd-gutter) * -1);
    margin-right: -100vw;
    padding-left: var(--sd-gutter);
    padding-right: calc(100vw + var(--sd-gutter));
  }
}


/* ======================================================================
   Dropdown — white text on a white panel, and the caret
   ----------------------------------------------------------------------
   Over the hero the nav is forced white so it reads on the photograph.
   The submenu items inherited that, but the dropdown panel has its own
   near-white background (250,254,254) — so the links were white on white
   and effectively invisible.

   The rule below re-states ink for anything inside a submenu, at a
   specificity that beats the transparent-header rule.
   ====================================================================== */

/* --- Submenu links always read as ink, whatever the header is doing --- */

body:has(#MainContent > .shopify-section:first-child .banner)
  .header__submenu .header__menu-item,
body:has(#MainContent > .shopify-section:first-child .banner)
  .header__submenu .header__menu-item span,
.header__submenu .header__menu-item,
.header__submenu .header__menu-item span,
.header__submenu .list-menu__item {
  color: rgb(var(--color-foreground)) !important;
}

.header__submenu .header__menu-item:hover,
.header__submenu .header__menu-item:hover span {
  color: var(--sd-teal) !important;
}

/* The panel itself: solid, square, hairline, no shadow bloom */
.header__submenu {
  background: rgb(var(--color-background));
  border: 1px solid var(--sd-ink-a10);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(16, 38, 37, 0.08);
  padding: 1.2rem 0;
  min-width: 22rem;
}

.header__submenu .header__menu-item {
  padding: 1.1rem 2.4rem;
  font-size: var(--sd-font-3);
  white-space: nowrap;
}

/* --- The caret was sitting hard against the word --------------------- */

.header__menu-item .icon-caret,
.header__menu-item > svg,
.header__menu-item span + svg,
summary.header__menu-item .icon-caret {
  margin-left: 0.8rem;
  flex-shrink: 0;
}

summary.header__menu-item,
.header__menu-item {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

/* The centre-growing underline should not span the caret */
.header__inline-menu summary.header__menu-item > span::after {
  width: 0;
}

.header__inline-menu summary.header__menu-item:hover > span::after {
  width: 100%;
}


/* ======================================================================
   Nav caret — space it properly
   ----------------------------------------------------------------------
   Dawn positions the caret absolutely (position: absolute, left computed
   from the label width), so it lands hard against the last letter. A
   margin-left on an absolutely positioned element just nudges it from
   that origin, which is why 8px barely moved it — the measured gap was
   still minus 2px, i.e. the arrow was sitting ON the text.

   Putting it back in normal flow makes it a flex item of the summary, so
   the gap behaves like any other spacing.
   ====================================================================== */

.header__inline-menu .header__menu-item,
.header__inline-menu summary.header__menu-item {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.header__inline-menu .header__menu-item .icon-caret,
.header__inline-menu summary.header__menu-item .icon-caret,
.header__inline-menu .header__menu-item > svg {
  position: static;
  left: auto;
  right: auto;
  margin-left: 1rem;
  flex: 0 0 auto;
  width: 1rem;
  height: 0.6rem;
}

/* The label carries trailing letter-spacing, so trim that back off the
   measured gap to keep it looking even. */
.header__inline-menu .header__menu-item > span {
  margin-right: calc(-1 * 0.09em);
}

/* Dropdown open state: flip the caret rather than move it */
.header__inline-menu details[open] > summary .icon-caret {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.header__inline-menu details > summary .icon-caret {
  transition: transform 0.2s ease;
}


/* ======================================================================
   1. VIDEO HERO
   ====================================================================== */

.sd-vhero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;          /* avoids the mobile browser-chrome jump */
}

.sd-vhero-section:has(.sd-vhero) {
  display: block;
}

.sd-vhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sd-vhero__poster,
.sd-vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

/* The video sits over the poster once it can play, so there is never a
   flash of empty space while it loads. */
.sd-vhero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.sd-vhero__video[data-playing],
.sd-vhero__video:not([poster]) {
  opacity: 1;
}

@media screen and (min-width: 750px) {
  .sd-vhero__video {
    opacity: 1;
  }
}

/* Phones get the still. A 2.5MB autoplay on mobile data is rude, and iOS
   throttles it anyway. */
@media screen and (max-width: 749px) {
  .sd-vhero__video {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-vhero__video {
    display: none;
  }
}

.sd-vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(16, 38, 37, 0.35) 0%,
    rgba(16, 38, 37, 0.18) 40%,
    rgba(16, 38, 37, 0.45) 100%
  );
}

.sd-vhero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 76rem;
  padding-top: var(--sd-space-9);
  padding-bottom: var(--sd-space-8);
}

.sd-vhero__kicker {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sd-tracking);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--sd-space-5);
}

.sd-vhero__heading {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(3.2rem, 5.6vw, var(--sd-font-13));
  line-height: 1.08;
  color: #fff;
  margin: 0;
}

.sd-vhero__text {
  margin-top: var(--sd-space-5);
  font-size: var(--sd-font-6);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.sd-vhero__buttons {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sd-space-7);
}

@media screen and (max-width: 749px) {
  .sd-vhero__buttons {
    flex-direction: column;
    width: 100%;
  }

  .sd-vhero__buttons .button {
    width: 100%;
  }

  .sd-vhero {
    min-height: 78svh;
  }
}

/* The floating header rules key off `.banner`, so teach them this too */
body:has(#MainContent > .shopify-section:first-child .sd-vhero)
  .shopify-section-group-header-group.shopify-section {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  background: transparent;
}

body:has(#MainContent > .shopify-section:first-child .sd-vhero)
  .shopify-section-group-header-group[id$="__utility-bar"] { top: 0; }

body:has(#MainContent > .shopify-section:first-child .sd-vhero)
  .shopify-section-group-header-group[id$="__header"] { top: 4.9rem; }

body:has(#MainContent > .shopify-section:first-child .sd-vhero) .header__menu-item,
body:has(#MainContent > .shopify-section:first-child .sd-vhero) .header__icon,
body:has(#MainContent > .shopify-section:first-child .sd-vhero) .sd-utility__contact,
body:has(#MainContent > .shopify-section:first-child .sd-vhero) .sd-utility__phone,
body:has(#MainContent > .shopify-section:first-child .sd-vhero) .sd-utility__link {
  color: #fff;
}

body:has(#MainContent > .shopify-section:first-child .sd-vhero) .sd-utility__inner {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* ======================================================================
   2. BRAND MARQUEE
   ----------------------------------------------------------------------
   Pure CSS. The list is duplicated in the markup below so the loop joins
   seamlessly; the animation moves exactly one copy's width.
   ====================================================================== */

.sd-marquee {
  overflow: hidden;
  padding: var(--sd-space-6) 0;
  border-top: 1px solid var(--sd-ink-a10);
  border-bottom: 1px solid var(--sd-ink-a10);
  background: rgb(var(--color-background));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sd-marquee__track {
  display: flex;
  width: max-content;
  animation: sd-marquee 38s linear infinite;
}

.sd-marquee:hover .sd-marquee__track {
  animation-play-state: paused;
}

.sd-marquee__item {
  font-family: var(--sd-font-structural);
  font-size: var(--sd-font-5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sd-ink-a35);
  padding: 0 var(--sd-space-7);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.sd-marquee__item:hover {
  color: var(--sd-ink);
}

@keyframes sd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sd-marquee__track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 749px) {
  .sd-marquee__item {
    font-size: var(--sd-font-4);
    padding: 0 var(--sd-space-5);
  }
}