/** Shopify CDN: Minification failed

Line 408:19 Expected identifier but found whitespace
Line 424:1 Expected "}" to go with "{"

**/
/* ==========================================================================
   THEME FOUNDATION
   Design system variables — typography, color, layout, motion.
   All sections should reference these, never hardcode values.
   ========================================================================== */

:root {
  /* Typography */
  --font-heading-family: 'Barlow Condensed', sans-serif;
  --font-heading-weight: 900;
  --font-heading-style: italic;

  --font-body-family: 'Inter', sans-serif;
  --font-body-weight: 400;
  --font-body-weight-medium: 500;
  --font-body-weight-bold: 700;

  /* Color system */
  --color-bg: #D5D0D0;
  --color-bg-alt: #D9D5CF;
  --color-bg-white: #FFFFFF;

  --color-text: #333029;
  --color-text-secondary: #6B6560;
  --color-text-on-dark: #FFFFFF;

  --color-btn-primary-bg: var(--color-text);
  --color-btn-primary-text: #FFFFFF;
  --color-btn-primary-bg-hover: #4A463C;

  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-border: var(--color-text);
  --color-btn-secondary-bg-hover: var(--color-text);
  --color-btn-secondary-text-hover: #FFFFFF;

  --color-accent: #C1604C;
  --color-accent-text: #FFFFFF;

  --color-success: #4B7A5B;
  --color-error: #B23B3B;

  --color-border: #C9C4BC;

  /* Layout system */
  --container-max-width: 1440px;
  --container-padding: 1.5rem;
  --container-padding-desktop: 3rem;

  --section-spacing-mobile: 3rem;
  --section-spacing-desktop: 6rem;

  --grid-gap-mobile: 1rem;
  --grid-gap-desktop: 1.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(51, 48, 41, 0.08);
  --shadow-md: 0 4px 12px rgba(51, 48, 41, 0.10);
  --shadow-lg: 0 12px 32px rgba(51, 48, 41, 0.14);
}

/* ==========================================================================
   TYPOGRAPHY — HEADINGS & BODY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

h1, .h1 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); }
h2, .h2 { font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem); }
h3, .h3 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.5rem); }
h4, .h4 { font-size: clamp(1.25rem, 1.5vw + 1rem, 1.75rem); }
h5, .h5 { font-size: clamp(1.1rem, 1vw + 1rem, 1.35rem); }
h6, .h6 { font-size: clamp(1rem, 0.5vw + 1rem, 1.15rem); }

body {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.fw-regular   { font-weight: var(--font-body-weight); }
.fw-medium    { font-weight: var(--font-body-weight-medium); }
.fw-bold      { font-weight: var(--font-body-weight-bold); }
.fw-heading   { font-weight: var(--font-heading-weight); font-style: var(--font-heading-style); }

.ls-tight     { letter-spacing: -0.01em; }
.ls-normal    { letter-spacing: 0; }
.ls-wide      { letter-spacing: 0.08em; }
.ls-wider     { letter-spacing: 0.15em; }

.uppercase    { text-transform: uppercase; }
.capitalize   { text-transform: capitalize; }
.normal-case  { text-transform: none; }

.text-nav {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
}

/* ==========================================================================
   LAYOUT — APPLIED
   ========================================================================== */

.page-width,
.container {
  max-width: var(--container-max-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 750px) {
  .page-width,
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* Section vertical spacing — excludes header, footer, and announcement bar */
.shopify-section:not([id*="header"]):not([id*="footer"]):not([id*="announcement"]):not([id*="hero"]):not([id*="product_card_setting"]):not([id*="sticky_cart_bar"]) {
  padding-top: var(--section-spacing-mobile);
  padding-bottom: var(--section-spacing-mobile);
}

@media screen and (min-width: 750px) {
.shopify-section:not([id*="header"]):not([id*="footer"]):not([id*="announcement"]):not([id*="hero"]):not([id*="product_card_setting"]):not([id*="sticky_cart_bar"]) {
    padding-top: var(--section-spacing-desktop);
    padding-bottom: var(--section-spacing-desktop);
  }
}

.card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   COMPONENT SYSTEM — BUTTONS
   ========================================================================== */

.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-medium);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn:active,
.button:active {
  transform: scale(0.97);
}

.btn--primary,
.button--primary,
.button:not(.button--secondary) {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  border: 1px solid var(--color-btn-primary-bg);
}

.btn--primary:hover,
.button--primary:hover,
.button:not(.button--secondary):hover {
  background-color: var(--color-btn-primary-bg-hover);
  border-color: var(--color-btn-primary-bg-hover);
}

.btn--secondary,
.button--secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: 1px solid var(--color-btn-secondary-border);
}

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

.btn--on-image {
  background-color: var(--color-bg-white);
  color: var(--color-text);
  border: 1px solid var(--color-bg-white);
}

.btn--on-image:hover {
  background-color: transparent;
  color: var(--color-bg-white);
  border-color: var(--color-bg-white);
}

.btn--sm, .button--sm { padding: 0.6rem 1.4rem; font-size: 0.8rem; }
.btn--lg, .button--lg { padding: 1.1rem 2.5rem; font-size: 1rem; }

.btn:disabled,
.button:disabled,
.btn.is-loading,
.button.is-loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.shopify-payment-button__button {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body-family) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
   COMPONENT SYSTEM — INPUTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--font-body-family);
  font-size: 0.95rem;
  color: var(--color-text);
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.field__label {
  font-size: 0.85rem;
  font-weight: var(--font-body-weight-medium);
  color: var(--color-text);
}

.field--error input,
.field--error textarea {
  border-color: var(--color-error);
}

.field__error-message {
  font-size: 0.8rem;
  color: var(--color-error);
}

/* ==========================================================================
   COMPONENT SYSTEM — QUANTITY SELECTOR
   ========================================================================== */

.quantity {
  display: inline-flex !important;
  align-items: center;
  border: none !important;
  border-width: 0 !important;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-color: var(--color-bg-white);
  background-image: none;
  box-shadow: none !important;
}

.quantity__button,
.quantity__button:not(:focus-visible):not(.focused) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent !important;
  background-image: none;
  border: none;
  outline: none;
  box-shadow: none !important;
  color: var(--color-text);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.quantity__button:hover {
  background-color: var(--color-bg-alt);
}

.quantity__input,
.quantity input[type="number"] {
  border: none !important;
  background: transparent;
  text-align: center;
  width: 2.5rem;
  padding: 0.75rem 0 !important;
  font-family: var(--font-body-family);
  color: var(--color-text);
}

.quantity__input:focus {
  outline: none;
}

.product-form__buttons > *,
.product-form__submit-wrapper {
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* ==========================================================================
   COMPONENT SYSTEM — BADGES
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-medium);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge,
.badge--sold-out {
  background-color: var(--color-text);
  color: var(--color-bg-white);
}

.badge--sale {
  background-color:

/* Dawn draws borders/highlights on inputs and quantity selectors via
   ::before/::after pseudo-elements rather than plain border/box-shadow
   properties — these must be explicitly disabled, since overriding
   border/box-shadow directly has no effect on a pseudo-element. */
.quantity::before,
.quantity::after,
.quantity__button::before,
.quantity__button::after,
.quantity__input::before,
.quantity__input::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}