/** Shopify CDN: Minification failed

Line 72:57 Expected ":"
Line 72:122 Expected ":"
Line 72:151 Expected ":"
Line 72:179 Expected ":"

**/
/*
 * Sodarizer shared design foundation V2 (homepage-approved visual tokens; opt-in page rollout).
 *
 * Opt-in only. Nothing here applies to a page until the markup carries the
 * `sdx-theme` class (tokens) and, where needed, a component class. No element
 * selectors, no :root, no html/body rules, no !important. Existing live templates
 * are not affected by loading this file.
 *
 * Sizes use rem. The live theme sets the root font size to 62.5% x body scale
 * (layout/theme.liquid), so 1rem = 10px at default scale.
 *
 * Sources: docs/design-foundation-v1.md (decisions D1-D8, Design System V1 DRAFT).
 */

/* Cascade layer. Unlayered page and section rules beat this layer whatever the load order,
   so overrides need no extra specificity. Browsers without @layer still apply these rules. */
@layer sdx-foundation {

/* ---------- Tokens (scoped to .sdx-theme) ---------- */
.sdx-theme {
  /* Simplified brand palette (approved). Two primary brand colours: Brand Orange and Marine Blue. */
  --sdx-brand-orange: #F26826;        /* brand accent and graphics; never a text-bearing background */
  --sdx-marine: #4DB6CD;              /* Marine Blue: decorative shapes and underlines only, never text */
  --sdx-action-orange: #C44A16;       /* accessible primary button orange, white text 4.84:1 */
  --sdx-action-orange-hover: #A83E12; /* hover and pressed shade of the primary orange, white text 6.24:1 */

  /* Supporting colours */
  --sdx-surface-marine: #DDF2F7;      /* Soft Marine: soft surfaces and bands; charcoal text 9.17:1 */
  --sdx-charcoal: #403E3E;            /* text, icons, focus ring, outlines */
  --sdx-snow: #FAFAFA;                /* Snow White: page background */
  --sdx-warm-neutral: #F5F2EE;        /* Warm Neutral: B2B backgrounds; charcoal text 10.2:1 */
  --sdx-white: #FFFFFF;

  /* Text and lines derived from charcoal (no new hue) */
  --sdx-muted: #5C5A5A;               /* secondary text on white and warm neutral */
  --sdx-line: rgba(64, 62, 62, .16); /* hairline borders */
  --sdx-focus-ink: #403E3E;           /* focus ring */

  /* Radius (D2): pill controls, rounded cards */
  --sdx-r-pill: 999px;
  --sdx-r-panel: 2.4rem;
  --sdx-r-card: 1.6rem;
  --sdx-r-control: 1.2rem;
  --sdx-r-icon: 50%;

  /* Space (4px base) */
  --sdx-s1: .4rem;
  --sdx-s2: .8rem;
  --sdx-s3: 1.2rem;
  --sdx-s4: 1.6rem;
  --sdx-s5: 2.4rem;
  --sdx-s6: 3.2rem;
  --sdx-s7: 4.8rem;
  --sdx-s8: 6.4rem;

  /* Elevation */
  --sdx-shadow-sm: 0 .4rem 1.2rem rgba(64, 62, 62, .06);
  --sdx-shadow-md: 0 1.2rem 3.2rem rgba(64, 62, 62, .08);

  /* Focus: visible on every interactive element */
  --sdx-focus: 0 0 0 3px var(--sdx-white), 0 0 0 6px var(--sdx-focus-ink);

  /* Type. Gabarito matches the approved homepage typography; fallbacks keep layout safe. */
  --sdx-font: "Gabarito", "Roobert", Arial, sans-serif;\n  --sdx-font-display: "Gabarito", "Roobert", Arial, sans-serif;\n  --sdx-price-ink: #176579;\n  --sdx-price-weight: 800;\n  --sdx-price-tracking: -.045em;
  --sdx-fs-body: 1.7rem;
  --sdx-fs-small: 1.4rem;
  --sdx-fs-eyebrow: 1.3rem;
  --sdx-fs-button: 1.5rem;
  --sdx-fs-h3: 2.2rem;
  --sdx-fs-h2: clamp(2.8rem, 1.8rem + 2.4vw, 4.4rem);
  --sdx-fs-h1: clamp(3.4rem, 1.6rem + 4.6vw, 6rem);
  --sdx-lh-body: 1.55;
  --sdx-lh-heading: 1.1;

  color: var(--sdx-charcoal);
  font-family: var(--sdx-font);
  font-size: var(--sdx-fs-body);
  line-height: var(--sdx-lh-body);
}

/* Typography helpers (only inside .sdx-theme) */
.sdx-theme .sdx-h1 { font-size: var(--sdx-fs-h1); font-weight: 900; line-height: 1.02; text-wrap: balance; max-width: 13em; }
.sdx-theme .sdx-h2 { font-size: var(--sdx-fs-h2); font-weight: 900; line-height: var(--sdx-lh-heading); text-wrap: balance; max-width: none; }
/* Editorial headings (long-form titles) keep a measure. Use this class only for them. */
.sdx-theme .sdx-h2--editorial { max-width: 22em; }
.sdx-theme .sdx-h3 { font-size: var(--sdx-fs-h3); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.sdx-theme .sdx-lead { font-size: clamp(1.8rem, 1.5rem + .5vw, 2.1rem); color: var(--sdx-muted); line-height: 1.5; }
.sdx-theme .sdx-small { font-size: var(--sdx-fs-small); color: var(--sdx-muted); line-height: 1.5; }
.sdx-theme .sdx-eyebrow { font-size: var(--sdx-fs-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sdx-charcoal); }

/* ---------- Buttons (D1, D2, D8) ---------- */
.sdx-theme .sdx-btn {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--sdx-s2);
  min-height: 4.4rem;
  padding: 0 2.2rem;
  border: 2px solid transparent;
  border-radius: var(--sdx-r-pill);
  font: inherit;
  font-size: var(--sdx-fs-button);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sdx-theme .sdx-btn:focus-visible { outline: none; box-shadow: var(--sdx-focus); }
.sdx-theme .sdx-btn--primary { background: var(--sdx-action-orange); color: var(--sdx-white); }
.sdx-theme .sdx-btn--primary:hover { background: var(--sdx-action-orange-hover); color: var(--sdx-white); }
.sdx-theme .sdx-btn--primary:active { background: var(--sdx-action-orange-hover); transform: translateY(1px); }
.sdx-theme .sdx-btn--ghost { background: transparent; color: var(--sdx-charcoal); border-color: var(--sdx-charcoal); }
.sdx-theme .sdx-btn--ghost:hover { background: var(--sdx-charcoal); color: var(--sdx-white); }
.sdx-theme .sdx-btn--secondary { background: var(--sdx-charcoal); color: var(--sdx-white); }
.sdx-theme .sdx-btn--secondary:hover { background: var(--sdx-muted); color: var(--sdx-white); }
.sdx-theme .sdx-btn--soft { background: var(--sdx-surface-marine); color: var(--sdx-charcoal); }
.sdx-theme .sdx-btn--soft:hover { background: var(--sdx-white); color: var(--sdx-charcoal); box-shadow: inset 0 0 0 2px var(--sdx-charcoal); }
.sdx-theme .sdx-btn--lg { min-height: 5.2rem; padding: 0 2.8rem; font-size: 1.7rem; }
.sdx-theme .sdx-btn--block { width: 100%; }
.sdx-theme .sdx-btn[disabled],
.sdx-theme .sdx-btn[aria-disabled="true"] { background: #E7E4E4; color: #76716f; border-color: transparent; cursor: not-allowed; }
.sdx-theme .sdx-btn-row { display: flex; flex-wrap: wrap; gap: var(--sdx-s3); align-items: center; }

/* ---------- Cards and containers (D2) ---------- */
.sdx-theme .sdx-card {
  background: var(--sdx-white);
  border: 1px solid var(--sdx-line);
  border-radius: var(--sdx-r-card);
  padding: var(--sdx-s5);
  box-shadow: var(--sdx-shadow-sm);
}
.sdx-theme .sdx-card--panel { border-radius: var(--sdx-r-panel); box-shadow: var(--sdx-shadow-md); }
.sdx-theme .sdx-card--surface { background: var(--sdx-surface-marine); border-color: transparent; box-shadow: none; }
.sdx-theme .sdx-card--warm { background: var(--sdx-warm-neutral); border-color: transparent; box-shadow: none; }
.sdx-theme .sdx-card h3 { font-size: var(--sdx-fs-h3); font-weight: 800; line-height: 1.25; margin: 0 0 var(--sdx-s2); }

.sdx-theme .sdx-container { max-width: 120rem; margin: 0 auto; padding: 0 1.6rem; }
.sdx-theme .sdx-intro--center { text-align: center; margin-inline: auto; max-width: none; }
.sdx-theme .sdx-intro--center .sdx-lead { margin-inline: auto; max-width: 52rem; }
/* Body copy keeps a readable measure. Hero copy and grids keep their own widths. */
.sdx-theme .sdx-prose { max-width: 62ch; }
.sdx-theme .sdx-section { padding-top: var(--sdx-s7); padding-bottom: var(--sdx-s7); } /* longhands: keep container side gutters */
.sdx-theme .sdx-grid { display: grid; gap: var(--sdx-s5); }
.sdx-theme .sdx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdx-theme .sdx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sdx-theme .sdx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .sdx-theme .sdx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdx-theme .sdx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sdx-theme .sdx-grid--2, .sdx-theme .sdx-grid--3, .sdx-theme .sdx-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Media placeholders keep their aspect ratio until final photography arrives */
.sdx-theme .sdx-media { border-radius: var(--sdx-r-card); overflow: hidden; background: var(--sdx-surface-marine); }
.sdx-theme .sdx-media--4x5 { aspect-ratio: 4 / 5; }
.sdx-theme .sdx-media--1x1 { aspect-ratio: 1 / 1; }
.sdx-theme .sdx-media--4x3 { aspect-ratio: 4 / 3; }
.sdx-theme .sdx-media--16x10 { aspect-ratio: 16 / 10; }
.sdx-theme .sdx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Forms (B2B and general) ---------- */
.sdx-theme .sdx-field { display: grid; gap: var(--sdx-s1); }
.sdx-theme .sdx-field label { font-size: 1.4rem; font-weight: 800; }
.sdx-theme .sdx-field input,
.sdx-theme .sdx-field select,
.sdx-theme .sdx-field textarea {
  font: inherit;
  font-size: 1.6rem;
  box-sizing: border-box;
  min-height: 4.4rem;
  width: 100%;
  padding: 1rem 1.2rem;
  border: 1.5px solid #9C9898;
  border-radius: var(--sdx-r-control);
  background: var(--sdx-white);
  color: var(--sdx-charcoal);
}
.sdx-theme .sdx-field input:focus-visible,
.sdx-theme .sdx-field select:focus-visible,
.sdx-theme .sdx-field textarea:focus-visible { outline: none; box-shadow: var(--sdx-focus); }
.sdx-theme .sdx-field input[readonly] { background: var(--sdx-snow); }
.sdx-theme .sdx-field .sdx-hint { font-size: 1.3rem; color: var(--sdx-muted); }
.sdx-theme .sdx-check { display: flex; gap: var(--sdx-s2); align-items: flex-start; font-size: 1.4rem; }
.sdx-theme .sdx-check input { width: 2rem; height: 2rem; margin-top: .2rem; accent-color: var(--sdx-charcoal); }

/* ---------- Purchase controls ---------- */
.sdx-theme .sdx-qty {
  display: inline-flex;
  align-items: center;
  height: 4.8rem;
  border: 2px solid var(--sdx-charcoal);
  border-radius: var(--sdx-r-pill);
  overflow: hidden;
}
.sdx-theme .sdx-qty button {
  width: 4.4rem;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--sdx-charcoal);
  font: inherit;
  font-size: 2rem;
  font-weight: 800;
  cursor: pointer;
}
.sdx-theme .sdx-qty button:hover { background: var(--sdx-surface-marine); }
.sdx-theme .sdx-qty button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sdx-focus-ink); }
.sdx-theme .sdx-qty output { min-width: 4.4rem; text-align: center; font-weight: 800; font-size: 1.6rem; }

.sdx-theme .sdx-opt {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.8rem;
  border: 2px solid var(--sdx-charcoal);
  border-radius: var(--sdx-r-pill);
  background: var(--sdx-white);
  color: var(--sdx-charcoal);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sdx-theme .sdx-opt:hover { background: var(--sdx-surface-marine); }
.sdx-theme .sdx-opt:focus-visible { outline: none; box-shadow: var(--sdx-focus); }
.sdx-theme .sdx-opt[aria-checked="true"],
.sdx-theme .sdx-opt[aria-pressed="true"] { background: var(--sdx-charcoal); color: var(--sdx-white); }
.sdx-theme .sdx-opt-group { display: flex; flex-wrap: wrap; gap: var(--sdx-s2); }

/* ---------- Accessible focus (global to the foundation only) ---------- */
.sdx-theme a:focus-visible,
.sdx-theme button:focus-visible,
.sdx-theme input:focus-visible,
.sdx-theme select:focus-visible,
.sdx-theme textarea:focus-visible,
.sdx-theme summary:focus-visible { outline: none; box-shadow: var(--sdx-focus); border-radius: var(--sdx-r-control); }

/* ---------- Responsive and motion ---------- */
@media (max-width: 760px) {
  .sdx-theme .sdx-btn-row .sdx-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sdx-theme .sdx-btn { transition: none; }
}
}