/** Shopify CDN: Minification failed

Line 1890:2 Unexpected "}"

**/
/*
  Factory Direct NZ
  Final merged version: original typography preserved
  Modern dark styling for Shopify Dawn
  Designed for desktop and mobile
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
  --fd-bg: #0b0d0f;
  --fd-bg-deep: #070809;
  --fd-surface: #15181c;
  --fd-surface-2: #1b1f24;
  --fd-surface-3: #23282e;
  --fd-text: #f5f5f2;
  --fd-muted: #a9afb6;
  --fd-subtle: #747b84;
  --fd-accent: #dfff00;
  --fd-accent-hover: #ebff57;
  --fd-accent-text: #0b0d0f;
  --fd-sale: #ff5a36;
  --fd-success: #75d69c;
  --fd-border: rgba(255, 255, 255, 0.12);
  --fd-border-strong: rgba(255, 255, 255, 0.22);
  --fd-overlay: rgba(5, 6, 7, 0.72);

  --fd-radius-xs: 4px;
  --fd-radius-sm: 7px;
  --fd-radius-md: 12px;
  --fd-radius-lg: 18px;
  --fd-radius-xl: 26px;

  --fd-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --fd-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.3);
  --fd-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.44);

  --fd-ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --fd-page-width: 150rem;
}

/* =========================================================
   2. BASE / GLOBAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body,
.gradient {
  background: var(--fd-bg);
  color: var(--fd-text);
}

body {
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fd-accent);
  color: var(--fd-accent-text);
}

.page-width,
.page-width-desktop {
  max-width: var(--fd-page-width);
}

main#MainContent {
  min-height: 60vh;
  background-color: var(--fd-bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 52px 52px;
}

.shopify-section {
  position: relative;
}

.shopify-section-group-header-group,
.shopify-section-group-footer-group {
  background: var(--fd-bg);
}

a {
  transition:
    color var(--fd-ease),
    opacity var(--fd-ease);
}

a:not(.button):hover {
  color: var(--fd-accent);
}

.rte a,
.link,
.underlined-link {
  color: var(--fd-text);
  text-decoration-color: rgba(223, 255, 0, 0.65);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35rem;
}

.rte a:hover,
.link:hover,
.underlined-link:hover {
  color: var(--fd-accent);
  text-decoration-color: var(--fd-accent);
}

hr {
  border-color: var(--fd-border);
}

/* Keep Dawn's colour-scheme variables coherent */
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  --color-foreground: 245, 245, 242;
  --color-background: 11, 13, 15;
  --gradient-background: #0b0d0f;
  --color-button: 223, 255, 0;
  --color-button-text: 11, 13, 15;
  --color-secondary-button: 245, 245, 242;
  --color-secondary-button-text: 245, 245, 242;
  --color-link: 245, 245, 242;
  --color-badge-foreground: 11, 13, 15;
  --color-badge-background: 223, 255, 0;
  --color-badge-border: 223, 255, 0;
}

/* ---------- TYPOGRAPHY ---------- */

h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  color: var(--fd-text);
  font-family:
    Arial Black,
    Arial,
    Helvetica,
    sans-serif;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-transform: uppercase;
}

h1,
.h0 {
  font-size: clamp(4.2rem, 7vw, 10rem);
}

h2,
.h1 {
  font-size: clamp(3.2rem, 4.5vw, 6.8rem);
}

h3,
.h2 {
  font-size: clamp(2.2rem, 2.5vw, 3.8rem);
}

p,
.rte,
.rte p {
  color: var(--fd-text-muted);
  line-height: 1.7;
}

.rte strong {
  color: var(--fd-text);
}

.caption,
.caption-with-letter-spacing,
.product__text {
  color: var(--fd-text-muted);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =========================================================
   4. ANNOUNCEMENT BAR
   ========================================================= */

.utility-bar,
.announcement-bar {
  background: var(--fd-accent);
  color: var(--fd-accent-text);
}

.utility-bar {
  border-bottom: 0;
}

.announcement-bar__message {
  color: var(--fd-accent-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 1.05rem 2rem;
  text-transform: uppercase;
}

.announcement-bar__link:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* =========================================================
   5. HEADER / NAVIGATION
   ========================================================= */

.shopify-section-header-sticky,
.shopify-section-header-hidden {
  transition: transform 240ms ease;
}

.header-wrapper {
  background: rgba(11, 13, 15, 0.94);
  border-bottom: 1px solid var(--fd-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.header {
  min-height: 8rem;
}

.header__heading-link {
  padding: 0;
}

.header__heading-logo-wrapper {
  transition: transform var(--fd-ease);
}

.header__heading-link:hover .header__heading-logo-wrapper {
  transform: scale(1.025);
}

.header__menu-item,
.header__active-menu-item {
  color: var(--fd-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

.header__menu-item:hover,
.header__menu-item:hover span,
.header__active-menu-item {
  color: var(--fd-accent);
  text-decoration: none;
}

.header__icon {
  color: var(--fd-text);
  transition:
    color var(--fd-ease),
    transform var(--fd-ease);
}

.header__icon:hover {
  color: var(--fd-accent);
  transform: translateY(-2px);
}

.cart-count-bubble {
  background: var(--fd-accent);
  color: var(--fd-accent-text);
  font-weight: 800;
}

.mega-menu__content,
.header__submenu {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  box-shadow: var(--fd-shadow-lg);
}

.mega-menu__link,
.header__submenu .header__menu-item {
  color: var(--fd-muted);
}

.mega-menu__link:hover,
.header__submenu .header__menu-item:hover {
  color: var(--fd-accent);
}

.menu-drawer,
.menu-drawer__submenu {
  background: var(--fd-bg);
}

.menu-drawer__menu-item {
  color: var(--fd-text);
  font-family:
    Arial Black,
    Arial,
    Helvetica,
    sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.menu-drawer__menu-item:hover,
.menu-drawer__menu-item--active {
  background: var(--fd-surface);
  color: var(--fd-accent);
}

.menu-drawer__utility-links {
  background: var(--fd-bg-deep);
  border-top: 1px solid var(--fd-border);
}

/* =========================================================
   6. BUTTONS
   ========================================================= */

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-height: 5.5rem;
  background: var(--fd-accent);
  border: 0;
  border-radius: var(--fd-radius-sm);
  box-shadow: none;
  color: var(--fd-accent-text);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  padding: 0 2.8rem;
  text-transform: uppercase;
  transition:
    background var(--fd-ease),
    color var(--fd-ease),
    transform var(--fd-ease),
    box-shadow var(--fd-ease);
}

.button::before,
.button::after,
.shopify-challenge__button::before,
.shopify-challenge__button::after,
.customer button::before,
.customer button::after {
  box-shadow: none !important;
}

.button:hover,
.shopify-challenge__button:hover,
.customer button:hover,
button.shopify-payment-button__button--unbranded:hover {
  background: var(--fd-accent-hover);
  color: var(--fd-accent-text);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(223, 255, 0, 0.15);
}

.button--secondary,
.button--tertiary {
  background: transparent;
  border: 1px solid var(--fd-border-strong);
  color: var(--fd-text);
}

.button--secondary:hover,
.button--tertiary:hover {
  background: var(--fd-text);
  border-color: var(--fd-text);
  color: var(--fd-bg);
}

.button[disabled],
.button.disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

/* =========================================================
   7. FORMS / INPUTS
   ========================================================= */

.field,
.select,
.customer .field {
  margin-bottom: 0;
}

.field__input,
.select__select,
.customer .field input,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"] {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-sm);
  color: var(--fd-text);
}

.field__input,
.select__select,
.customer .field input {
  min-height: 5.5rem;
}

textarea {
  min-height: 15rem;
  resize: vertical;
}

.field::before,
.field::after,
.select::before,
.select::after,
.customer .field::before,
.customer .field::after {
  box-shadow: none !important;
}

.field:hover .field__input,
.select:hover .select__select,
.customer .field:hover input {
  border-color: var(--fd-border-strong);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
textarea:focus,
input:focus-visible {
  border-color: var(--fd-accent);
  box-shadow: 0 0 0 1px var(--fd-accent);
  outline: 0;
}

.field__label,
.customer .field label {
  color: var(--fd-muted);
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
  color: var(--fd-accent);
}

.form__message {
  color: var(--fd-text);
}

.form-status,
.form-status-list {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-sm);
  color: var(--fd-text);
  padding: 1.6rem;
}

/* Contact form: restrained width on desktop */
.contact {
  max-width: 84rem;
  margin-inline: auto;
}

.contact .title {
  max-width: 16ch;
}

.contact__fields {
  gap: 1.6rem;
}

.contact .field {
  width: 100%;
}

.contact__button {
  margin-top: 2.4rem;
}

.contact__button .button {
  min-width: 18rem;
}

/* Newsletter forms */
.newsletter-form,
.newsletter-form__field-wrapper {
  max-width: 60rem;
}

.newsletter-form__field-wrapper .field {
  background: var(--fd-surface);
  border-radius: var(--fd-radius-sm);
}

/* =========================================================
   8. HERO / BANNERS / SLIDESHOW
   ========================================================= */

.banner,
.slideshow {
  overflow: hidden;
}

.banner__media::after,
.slideshow__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 7, 0.92) 0%,
      rgba(5, 6, 7, 0.62) 48%,
      rgba(5, 6, 7, 0.12) 100%
    );
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.banner__box,
.slideshow__text-wrapper .banner__box {
  background: transparent;
  max-width: 82rem;
  padding-left: 0;
  text-align: left;
}

.banner__heading {
  max-width: 12ch;
  text-shadow: 0 5px 35px rgba(0, 0, 0, 0.4);
}

.banner__text {
  max-width: 62rem;
}

.banner__text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1.6rem, 1.45vw, 2.1rem);
}

.banner__buttons {
  justify-content: flex-start;
  margin-top: 3rem;
}

/* =========================================================
   9. SECTION HEADERS / GENERAL SECTIONS
   ========================================================= */

.title-wrapper-with-link {
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title-wrapper-with-link > a {
  color: var(--fd-accent);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.rich-text__wrapper,
.rich-text__blocks {
  max-width: 96rem;
}

.rich-text__heading {
  max-width: 14ch;
}

.rich-text__text {
  max-width: 72rem;
}

/* =========================================================
   10. PRODUCT / COLLECTION / BLOG CARDS
   ========================================================= */

.card-wrapper {
  height: 100%;
}

.card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  height: 100%;
  overflow: hidden;
  transition:
    background var(--fd-ease),
    border-color var(--fd-ease),
    transform var(--fd-ease),
    box-shadow var(--fd-ease);
}

.card-wrapper:hover .card {
  background: var(--fd-surface-2);
  border-color: rgba(223, 255, 0, 0.42);
  box-shadow: var(--fd-shadow-md);
  transform: translateY(-6px);
}

.card__inner {
  background: #eef0ea;
  border-radius: 0;
  overflow: hidden;
}

.card__media {
  overflow: hidden;
}

.card__media .media img {
  object-fit: contain;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.card__content {
  padding: 2rem;
}

.card__information {
  padding: 0;
}

.card__heading {
  color: var(--fd-text);
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  text-transform: none;
}

.card__heading a {
  color: var(--fd-text);
  text-decoration: none;
}

.card__heading a:hover {
  color: var(--fd-accent);
}

.card-information > .price,
.price {
  color: var(--fd-text);
}

.card-information > .price {
  font-size: 1.8rem;
  font-weight: 800;
  margin-top: 1.1rem;
}

.price--on-sale .price-item--regular {
  color: var(--fd-muted);
  opacity: 0.72;
}

.price-item--sale {
  color: var(--fd-accent);
}

.card__badge {
  left: 1.2rem;
  right: auto;
  top: 1.2rem;
}

.badge {
  background: var(--fd-accent);
  border: 0;
  border-radius: var(--fd-radius-xs);
  color: var(--fd-accent-text);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 0.65rem 0.95rem;
  text-transform: uppercase;
}

.quick-add {
  margin: 1.5rem 2rem 2rem;
}

.quick-add__submit {
  min-height: 4.8rem;
  width: 100%;
}

/* Collection cards with overlay */
.collection-card-wrapper .card__inner {
  background: var(--fd-surface);
}

.collection-card-wrapper .card__content {
  background:
    linear-gradient(
      0deg,
      rgba(5, 6, 7, 0.96),
      rgba(5, 6, 7, 0.08)
    );
  inset: 0;
  justify-content: flex-end;
  padding: 2.4rem;
  position: absolute;
  z-index: 2;
}

.collection-card-wrapper .card__heading {
  color: var(--fd-text);
  font-family:
    Arial Black,
    Arial,
    Helvetica,
    sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-size: clamp(2rem, 2vw, 3.2rem);
  line-height: 1;
}

.collection-card-wrapper .icon-wrap {
  color: var(--fd-accent);
}

/* =========================================================
   11. COLLECTION / SEARCH / FILTERS
   ========================================================= */

.collection-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(223, 255, 0, 0.11), transparent 34%),
    var(--fd-bg-deep);
  border-bottom: 1px solid var(--fd-border);
}

.collection-hero__title {
  margin-bottom: 1.4rem;
}

.collection-hero__description {
  color: var(--fd-muted);
  max-width: 78rem;
}

.facets__form,
.facets-container {
  border-color: var(--fd-border);
}

.facets__heading,
.facets__summary,
.facet-filters__label,
.product-count__text {
  color: var(--fd-text);
}

.facets__display,
.facets__header,
.mobile-facets__inner {
  background: var(--fd-surface);
  border-color: var(--fd-border);
  color: var(--fd-text);
}

.facets__item label,
.mobile-facets__label,
.mobile-facets__summary,
.facet-filters__sort {
  color: var(--fd-muted);
}

.facets__item label:hover,
.mobile-facets__label:hover {
  color: var(--fd-text);
}

.active-facets__button-inner {
  background: var(--fd-surface);
  border-color: var(--fd-border);
  color: var(--fd-text);
}

.active-facets__button:hover .active-facets__button-inner {
  border-color: var(--fd-accent);
  color: var(--fd-accent);
}

.mobile-facets__open {
  color: var(--fd-text);
}

.mobile-facets__footer {
  background: var(--fd-bg-deep);
  border-top: 1px solid var(--fd-border);
}

.pagination__item {
  color: var(--fd-muted);
}

.pagination__item:hover {
  color: var(--fd-accent);
}

.pagination__item--current {
  background: var(--fd-accent);
  border-radius: var(--fd-radius-xs);
  color: var(--fd-accent-text);
}

/* Search */
.template-search,
.predictive-search {
  background: var(--fd-bg);
}

.predictive-search {
  border-color: var(--fd-border);
  box-shadow: var(--fd-shadow-lg);
}

.predictive-search__heading {
  color: var(--fd-muted);
}

.predictive-search__item {
  color: var(--fd-text);
}

.predictive-search__item:hover {
  background: var(--fd-surface-2);
}

/* =========================================================
   12. PRODUCT PAGE
   ========================================================= */

.product {
  align-items: flex-start;
  column-gap: clamp(3.5rem, 5vw, 7rem);
}

.product__media-wrapper {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.product__media-list {
  gap: 1.6rem;
}

.product__media-item {
  background: #eef0ea;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--fd-radius-md);
  overflow: hidden;
}

.product__media {
  background: #eef0ea;
  border: 0 !important;
  border-radius: var(--fd-radius-md);
  overflow: hidden;
}

.product__media img {
  object-fit: contain;
}

.product__media-toggle,
.product__modal-opener {
  background: transparent;
}

.product__media-icon {
  background: rgba(11, 13, 15, 0.84);
  border: 1px solid var(--fd-border);
  color: var(--fd-text);
}

.thumbnail-list {
  gap: 1rem;
}

.thumbnail {
  background: #eef0ea;
  border: 1px solid transparent;
  border-radius: var(--fd-radius-sm);
  overflow: hidden;
}

.thumbnail[aria-current],
.thumbnail:hover {
  border-color: var(--fd-accent);
  box-shadow: none;
}

.thumbnail img {
  object-fit: contain;
}

.product__info-wrapper {
  min-width: 0;
}

.product__info-container {
  max-width: 68rem;
}

.product__info-container > * + * {
  margin-top: 1.8rem;
}

.product__title {
  margin-bottom: 1.2rem;
}

.product__title h1 {
  font-size: clamp(3.4rem, 4.2vw, 6.2rem);
  max-width: 16ch;
}

.product__text,
.product__description,
.product__tax,
.product__inventory {
  max-width: 62rem;
}

.product__info-container .price {
  color: var(--fd-text);
  font-size: clamp(2.6rem, 2.8vw, 4rem);
  font-weight: 900;
}

.product__description {
  color: var(--fd-text-muted);
}

.product-form__input {
  max-width: 62rem;
}

.product-form__input .form__label {
  color: var(--fd-text);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-form__input input[type="radio"] + label {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-small);
  color: var(--fd-text);
  font-weight: 800;
  transition:
    background var(--fd-transition),
    border-color var(--fd-transition),
    color var(--fd-transition);
}

.product-form__input input[type="radio"] + label:hover {
  border-color: var(--fd-accent);
}

.product-form__input input[type="radio"]:checked + label {
  background: var(--fd-accent);
  border-color: var(--fd-accent);
  color: var(--fd-accent-text);
}

.product-form,
.product-form__buttons {
  max-width: 62rem;
}

.product-form__submit {
  min-height: 6.2rem;
}

.quantity {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-small);
}

.quantity::before,
.quantity::after {
  display: none;
}

.quantity__input,
.quantity__button {
  color: var(--fd-text);
}

.product__accordion,
.accordion {
  max-width: 62rem;
  border-color: var(--fd-border);
}

.accordion summary {
  color: var(--fd-text);
  padding: 2rem 0;
}

.accordion__title {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.accordion__content {
  color: var(--fd-text-muted);
}

.product-popup-modal__content,
.quick-add-modal__content {
  background: var(--fd-background);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-large);
  color: var(--fd-text);
  box-shadow: var(--fd-shadow);
}

@media screen and (min-width: 990px) {
  .product:not(.product--no-media) {
    grid-template-columns: minmax(0, 1.08fr) minmax(40rem, 0.92fr);
  }

  .product__info-wrapper {
    padding-left: 0;
  }

  .product__info-container {
    position: sticky;
    top: 11rem;
  }

  .product--thumbnail_slider .product__media-list,
  .product--thumbnail .product__media-list {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 989px) {
  .product {
    column-gap: 2.5rem;
  }

  .product__info-container {
    max-width: none;
  }
}

@media screen and (max-width: 749px) {
  .product {
    display: block;
  }

  .product__media-wrapper {
    margin-bottom: 2.8rem;
  }

  .product__media-list {
    gap: 1rem;
  }

  .product__media-item,
  .product__media {
    border-radius: var(--fd-radius-medium);
  }

  .product__title h1 {
    font-size: 3.8rem;
    max-width: none;
  }

  .product__info-container .price {
    font-size: 2.8rem;
  }

  .product-form,
  .product-form__buttons,
  .product-form__input,
  .product__text,
  .product__description,
  .product__tax,
  .product__inventory,
  .product__accordion,
  .accordion {
    max-width: none;
  }
}


/* =========================================================
   13. IMAGE WITH TEXT / MULTICOLUMN / COLLAGE
   ========================================================= */

.image-with-text__grid {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
  overflow: hidden;
}

.image-with-text__media {
  border: 0;
}

.image-with-text__content {
  background: var(--fd-surface);
  padding: clamp(3rem, 6vw, 8rem);
}

.image-with-text__heading {
  max-width: 13ch;
}

.multicolumn-card {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-md);
  height: 100%;
  overflow: hidden;
}

.multicolumn-card__info {
  padding: 2.6rem;
}

.multicolumn-card__info p {
  color: var(--fd-muted);
}

.collage-card {
  border-radius: var(--fd-radius-md);
  overflow: hidden;
}

/* =========================================================
   14. CART PAGE / DRAWER
   ========================================================= */

.drawer__inner,
.cart-drawer,
.cart-drawer__form {
  background: var(--fd-bg-deep);
  color: var(--fd-text);
}

.drawer__inner {
  border-left: 1px solid var(--fd-border);
}

.drawer__header,
.cart-drawer__footer {
  border-color: var(--fd-border);
}

.drawer__heading,
.cart-item__name,
.totals__total,
.totals__total-value {
  color: var(--fd-text);
}

.cart-item {
  border-color: var(--fd-border);
}

.cart-item__name {
  font-weight: 700;
}

.cart-item__details,
.cart-item__details dl,
.product-option,
.cart__note {
  color: var(--fd-muted);
}

.cart-item__image {
  background: #eef0ea;
  border-radius: var(--fd-radius-sm);
  object-fit: contain;
}

.cart__warnings,
.cart__empty-text {
  color: var(--fd-text);
}

.cart__footer {
  border-color: var(--fd-border);
}

/* =========================================================
   15. BLOG / ARTICLE
   ========================================================= */

.main-blog .title--primary {
  max-width: 14ch;
}

.blog-articles__article .card {
  height: 100%;
}

.article-card__excerpt {
  color: var(--fd-muted);
}

.article-template__hero-container {
  border-radius: var(--fd-radius-lg);
  overflow: hidden;
}

.article-template__title {
  max-width: 16ch;
}

.article-template__link {
  color: var(--fd-accent);
  font-weight: 700;
}

.article-template__content {
  max-width: 82rem;
  margin-inline: auto;
}

.article-template__content h2,
.article-template__content h3 {
  margin-top: 1.5em;
}

.article-template__content blockquote {
  background: var(--fd-surface);
  border-left: 4px solid var(--fd-accent);
  border-radius: 0 var(--fd-radius-sm) var(--fd-radius-sm) 0;
  color: var(--fd-text);
  margin: 3rem 0;
  padding: 2rem 2.4rem;
}

.article-template__comment-wrapper {
  background: var(--fd-surface);
}

/* =========================================================
   16. CUSTOMER ACCOUNT / LOGIN
   ========================================================= */

.customer {
  color: var(--fd-text);
}

.customer form,
.customer table,
.customer ul {
  color: var(--fd-muted);
}

.customer h1,
.customer h2 {
  color: var(--fd-text);
}

.customer table {
  border-color: var(--fd-border);
}

.customer th,
.customer td {
  border-color: var(--fd-border);
}

.customer a {
  color: var(--fd-text);
}

.customer a:hover {
  color: var(--fd-accent);
}

/* =========================================================
   17. TABLES / POLICIES / PAGES
   ========================================================= */

.shopify-policy__container {
  max-width: 92rem;
}

.shopify-policy__title {
  margin-bottom: 4rem;
}

.shopify-policy__body {
  color: var(--fd-muted);
}

.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body strong {
  color: var(--fd-text);
}

.rte table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.rte table th,
.rte table td {
  border: 1px solid var(--fd-border);
  padding: 1.3rem 1.6rem;
}

.rte table th {
  background: var(--fd-surface-2);
  color: var(--fd-text);
}

/* =========================================================
   18. NEWSLETTER / FOOTER
   ========================================================= */

.newsletter {
  background:
    radial-gradient(circle at 50% 0%, rgba(223, 255, 0, 0.14), transparent 48%),
    var(--fd-bg-deep);
  border-bottom: 1px solid var(--fd-border);
  border-top: 1px solid var(--fd-border);
}

.newsletter__wrapper {
  padding-bottom: 8rem;
  padding-top: 8rem;
}

.newsletter__subheading {
  color: var(--fd-muted);
}

.footer {
  background: var(--fd-bg-deep);
  border-top: 1px solid var(--fd-border);
}

.footer__content-top {
  padding-bottom: 6rem;
  padding-top: 7rem;
}

.footer-block__heading {
  color: var(--fd-text);
  font-size: 1.45rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.footer-block__details-content,
.footer-block__details-content p,
.footer__copyright,
.footer__copyright a {
  color: var(--fd-muted);
}

.footer-block__details-content .list-menu__item--link:hover,
.footer__copyright a:hover {
  color: var(--fd-accent);
  text-decoration: none;
}

.footer__content-bottom {
  border-top: 1px solid var(--fd-border);
}

.list-payment__item {
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    filter var(--fd-ease),
    opacity var(--fd-ease);
}

.list-payment__item:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* =========================================================
   19. PASSWORD / 404
   ========================================================= */

.password {
  background: var(--fd-bg);
}

.password-header,
.password-main,
.password-footer {
  color: var(--fd-text);
}

.password-modal__content {
  background: var(--fd-surface);
  border: 1px solid var(--fd-border);
  border-radius: var(--fd-radius-lg);
}

.template-404 {
  min-height: 55vh;
  display: grid;
  place-content: center;
}

.template-404 .title {
  max-width: 14ch;
  margin-inline: auto;
}

/* =========================================================
   20. FOCUS / ACCESSIBILITY
   ========================================================= */

*:focus-visible {
  outline: 2px solid var(--fd-accent);
  outline-offset: 3px;
}

.skip-to-content-link:focus {
  background: var(--fd-accent);
  color: var(--fd-accent-text);
}

/* =========================================================
   21. DESKTOP REFINEMENTS
   ========================================================= */

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact__fields .field {
    min-width: 0;
  }

  .contact__button {
    display: flex;
    justify-content: flex-start;
  }

  .product__info-wrapper {
    padding-left: clamp(2rem, 4vw, 6rem);
  }

  .footer__blocks-wrapper {
    column-gap: 4rem;
  }
}

/* =========================================================
   22. MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {
  :root {
    --fd-radius-md: 10px;
    --fd-radius-lg: 14px;
  }

  .page-width,
  .page-width-desktop {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }

  main#MainContent {
    background-size: 34px 34px;
  }

  .header {
    min-height: 6.8rem;
  }

  h1,
  .h0 {
    font-size: clamp(4rem, 14vw, 6.2rem);
  }

  h2,
  .h1 {
    font-size: clamp(3.1rem, 10vw, 4.8rem);
  }

  .banner__content {
    align-items: flex-end;
    min-height: 62rem;
    padding: 4rem 1.8rem;
  }

  .banner__media::after,
  .slideshow__media::after {
    background:
      linear-gradient(
        0deg,
        rgba(5, 6, 7, 0.95) 0%,
        rgba(5, 6, 7, 0.46) 65%,
        rgba(5, 6, 7, 0.08) 100%
      );
  }

  .banner__box {
    padding: 0;
  }

  .banner__buttons,
  .banner__buttons .button {
    width: 100%;
  }

  .title-wrapper-with-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2.6rem;
  }

  .card__content {
    padding: 1.4rem;
  }

  .card__heading {
    font-size: 1.42rem;
  }

  .card-information > .price {
    font-size: 1.55rem;
  }

  .quick-add {
    margin: 1.1rem 1.4rem 1.4rem;
  }

  .quick-add__submit {
    font-size: 1.1rem;
    min-height: 4.5rem;
    padding-inline: 1.2rem;
  }

  .collection-card-wrapper .card__content {
    padding: 1.6rem;
  }

  .image-with-text__content {
    padding: 3.5rem 2.2rem;
  }

  .product__title h1 {
    font-size: 3.8rem;
  }

  .product__info-container .price {
    font-size: 2.8rem;
  }

  .button,
  .shopify-challenge__button,
  .customer button {
    min-height: 5.2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .contact {
    max-width: none;
  }

  .contact__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .contact__button .button {
    width: 100%;
  }

  .newsletter-form,
  .newsletter-form__field-wrapper {
    max-width: 100%;
  }

  .footer__content-top {
    padding-top: 5rem;
  }

  .drawer__inner {
    max-width: calc(100vw - 2rem);
  }
}

/* =========================================================
   23. VERY SMALL SCREENS
   ========================================================= */

@media screen and (max-width: 420px) {
  .page-width,
  .page-width-desktop {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .button,
  .shopify-challenge__button,
  .customer button {
    font-size: 1.15rem;
    padding-inline: 1.5rem;
  }

  .card__heading {
    font-size: 1.34rem;
  }

  .badge {
    font-size: 0.95rem;
  }
}

/* =========================================================
   24. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   STABLE PRODUCT LAYOUT
   Description is deliberately outside the media gallery.
   ========================================================= */

/* Prevent media items from escaping or overlapping later content */
.product__media-wrapper,
.product__media-gallery,
.product__media-list,
.product__media-item,
.product__media,
.product__modal-opener {
  position: relative;
}

.product__media-wrapper {
  min-width: 0;
  background: transparent;
  overflow: visible;
}

.product__media-list {
  margin-bottom: 0;
  isolation: isolate;
}

.product__media-item {
  z-index: 1;
}

.product__media-item + .product__media-item {
  margin-top: 1.6rem;
}

/* The product details section is always in normal document flow */
.product-details-section {
  position: relative;
  z-index: 0;
  clear: both;
  margin-top: clamp(4rem, 6vw, 8rem);
  padding-top: clamp(3.5rem, 5vw, 6rem);
  border-top: 1px solid var(--fd-border);
}

.product-details-section__inner {
  max-width: 110rem;
  margin-inline: auto;
}

.product-details-section__title {
  margin: 0 0 2.5rem;
  font-size: clamp(3rem, 4vw, 5rem);
}

.product-details-section__content {
  color: var(--fd-text-muted);
  font-size: 1.65rem;
  line-height: 1.78;
}

.product-details-section__content > *:first-child {
  margin-top: 0;
}

.product-details-section__content > *:last-child {
  margin-bottom: 0;
}

.product-details-section__content h2,
.product-details-section__content h3,
.product-details-section__content h4 {
  color: var(--fd-text);
  margin-top: 1.7em;
  margin-bottom: 0.65em;
}

.product-details-section__content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--fd-radius-medium);
}

.product-details-section__content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Full-width accordion area */
.product-details-accordions {
  position: relative;
  clear: both;
  margin-top: 3rem;
}

.product-details-accordions__inner {
  max-width: 110rem;
  margin-inline: auto;
}

.product-details-accordions .product__accordion {
  max-width: none;
}

/* Keep the buying panel tidy, but don't force it to be taller than needed */
@media screen and (min-width: 990px) {
  .product {
    align-items: start;
  }

  .product__info-container {
    position: sticky;
    top: 11rem;
  }

  .product__info-wrapper {
    align-self: start;
  }
}

/* On tablets and phones everything follows normal flow */
@media screen and (max-width: 989px) {
  .product__info-container {
    position: static;
  }

  .product-details-section {
    margin-top: 4rem;
  }
}

@media screen and (max-width: 749px) {
  .product__media-list:not(:has(.product__media-item:nth-child(2))) .product__media {
    min-height: 34rem;
  }

  .product-details-section {
    margin-top: 3.5rem;
    padding-top: 3rem;
  }

  .product-details-section__title {
    margin-bottom: 2rem;
    font-size: 3.2rem;
  }

  .product-details-section__content {
    font-size: 1.5rem;
  }

  .product__media-item + .product__media-item {
    margin-top: 1rem;
  }
}

  }
}

/* =========================================================
   PRODUCT IMAGE BACKGROUND FIX
   Removes pale empty bands and respects each image ratio.
   ========================================================= */

.product__media-item,
.product__media,
.product__media .media,
.product__media .product-media-container,
.product__media .deferred-media {
  background: var(--fd-surface) !important;
}

.product__media {
  display: block;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border: 1px solid var(--fd-border) !important;
  border-radius: var(--fd-radius-large);
  overflow: hidden;
}

.product__media .media {
  height: auto !important;
  padding-bottom: 0 !important;
  position: relative;
}

.product__media img {
  display: block;
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
}

.product__media-item + .product__media-item {
  margin-top: 1.8rem;
}

.thumbnail,
.thumbnail img {
  background: var(--fd-surface) !important;
}

@media screen and (max-width: 749px) {
  .product__media {
    border-radius: var(--fd-radius-medium);
  }
}

/* =========================================================
   COLLECTION CARD TITLE ALIGNMENT
   Keeps short and long collection names pinned consistently.
   ========================================================= */

.collection-card-wrapper .card {
  position: relative;
}

.collection-card-wrapper .card__content {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end !important;
  align-items: flex-start;
  min-height: 100%;
}

.collection-card-wrapper .card__information {
  width: 100%;
  margin-top: auto;
  padding: 0;
}

.collection-card-wrapper .card__heading {
  width: 100%;
  margin: 0;
  font-size: clamp(1.8rem, 1.8vw, 2.8rem);
  line-height: 1.05;
}

.collection-card-wrapper .card__heading a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.collection-card-wrapper .card__heading .icon-wrap {
  flex: 0 0 auto;
}

@media screen and (max-width: 749px) {
  .collection-card-wrapper .card__heading {
    font-size: clamp(1.7rem, 5.8vw, 2.3rem);
  }

  .collection-card-wrapper .card__heading a {
    align-items: center;
  }
}

/* =========================================================
   STANDARD CONTENT PAGE WIDTH
   Keeps About, FAQs, Contact and other narrow pages centred
   on larger desktop screens without changing mobile spacing.
   ========================================================= */

@media screen and (min-width: 990px) {
  .page-width.page-width--narrow,
  .contact.page-width--narrow {
    width: 100%;
    max-width: 96rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width.page-width--narrow .main-page-title {
    margin-bottom: 3rem;
  }

  .page-width.page-width--narrow .rte,
  .contact.page-width--narrow {
    font-size: 1.8rem;
    line-height: 1.75;
  }

  .page-width.page-width--narrow .rte p {
    margin-top: 0;
    margin-bottom: 2.4rem;
  }

  .page-width.page-width--narrow .rte p:last-child {
    margin-bottom: 0;
  }
}