/** Shopify CDN: Minification failed

Line 1058:14 Expected identifier but found whitespace
Line 1058:43 Unexpected "("
Line 1523:0 All "@import" rules must come first

**/
/* ============================================================
   NOTE (merge on 2026-09-22): The following 8 classes are used
   on the live Custom Design Service page but are NOT defined
   anywhere in this file. They were likely added after the CDS
   redesign CSS below was last saved. Troubleshoot individually:

   .cds-add
   .cds-cart-toggle
   .cds-catalog__cover-img
   .cds-dropdown
   .cds-dropdown-add
   .cds-hero__mockup-img
   .cds-ball--   (fragment, may be dynamically built - verify)
   .cds-bullets-- (fragment, may be dynamically built - verify)
   ============================================================ */

/** Shopify CDN: Minification failed

Line 1035:14 Expected identifier but found whitespace
Line 1035:43 Unexpected "("

**/
/* ========== Crossbank Custom Design Services (Packages) ========== */


/* each package/tier */

.cb-cds-tier {
  max-width: 520px;
  margin: 0 auto 10px;
  text-align: left;
}

/* "Standard — $50" */

.cb-cds-tier__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #111;
}

/* "Perfect for individuals..." */

.cb-cds-tier__lead {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.35;
  font-style: italic;
  color: #222;
}

/* bullet list */

.cb-cds-tier__list {
  margin: 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.35;
  color: #111;
}

.cb-cds-tier__list li {
  margin: 6px 0;
}

/* Slightly tighter on very small screens */

@media (max-width: 480px) {
  .cb-cds-tier {
    max-width: 100%;
    margin-bottom: 12px;
  }

  .cb-cds-tier__title {
    font-size: 19px;
  }
}

/* ========== Packages: CTA button row (2 columns on all sizes) ========== */

.cb-cds-cta--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 0px;
}

.cb-cds-cta-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

/* Buttons */

.cb-cds-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 14px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: filter 0.15s ease;
}

/* Primary (red) */

.cb-cds-btn--add {
  background: #e11515;
  color: #fff;
}

/* Secondary (dark gray) */

.cb-cds-btn--catalog {
  background: #3d3d3d;
  color: #fff;
}

/* Hover */

.cb-cds-btn:hover {
  filter: brightness(0.95);
}

/* Subtext under buttons */

.cb-cds-subtext {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.2;
  color: #111;
  text-align: center;
}

/* Optional: slightly tighter gap on very small screens, still 2 columns */

@media (max-width: 420px) {
  .cb-cds-cta--row {
    gap: 12px;
  }
}

.cb-cds-cta--row[data-tier="Pro"] {
  margin-bottom: 20px;
}

.cb-cds-cta--row[data-tier="Standard"] {
  margin-bottom: 20px;
}

/* ========== Custom Design Service: How It Works ========== */

.cb-cds-howit {
  margin: 24px auto 0;
}

.cb-cds-howit__title {
  text-align: center;
  margin: 0 0 8px;
}

/* GRID: default to mobile 2-column stagger */

.cb-cds-howit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 22px;
  align-items: start;
}

/* each tile */

.cb-cds-howit__item {
  margin: 0;
}

/* make SVGs behave and normalize size */

.cb-cds-howit__item img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: contain;
}

/* stagger pattern on mobile */

.cb-cds-howit__item:nth-child(1) {
  grid-column: 1;
  margin-top: 0;
}

.cb-cds-howit__item:nth-child(2) {
  grid-column: 2;
  margin-top: 170px;
}

.cb-cds-howit__item:nth-child(3) {
  grid-column: 1;
  margin-top: -130px;
}

/* Desktop: 3-up, no stagger, contained width, equal height */

@media (min-width: 900px) {
  .cb-cds-howit__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
  }

  .cb-cds-howit__item:nth-child(1),
  .cb-cds-howit__item:nth-child(2),
  .cb-cds-howit__item:nth-child(3) {
    grid-column: auto;
    margin-top: 0px;
  }

  .cb-cds-howit__item img {
    height: 360px;
  }
}

/* Small phones: tighten height + stagger so it doesn't get too tall */

@media (max-width: 380px) {
  .cb-cds-howit__item img {
    height: 290px;
  }

  .cb-cds-howit__item:nth-child(2) {
    margin-top: 55px;

  .cb-cds-howit__item:nth-child(3) {
    margin-top: -55px;
  }

  }
}

/* ========== Pricing & Volume Discounts ========== */

.cb-price-banner {
  margin: 28px auto 0;
}

.cb-price-banner__inner {
  text-align: center;
}

.cb-price-banner__title {
  margin: 0 0 16px;
  text-align: center;
}

/* Tier SVG row */

.cb-tier-svgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  justify-items: center;
  margin: 0 auto 10px;
}

.cb-tier-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 260px;
  object-fit: contain;
}

/* Lead line under cards */

.cb-price-banner__lead {
  margin: 10px 0 16px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

/* Pricing calculator button */

.cb-price-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cb-price-btn__img {
  display: block;
  width: min(250px, 60vw);
  height: auto;
}

/* Hover */

.cb-price-btn:hover .cb-price-btn__img {
  filter: brightness(0.98);
}

/* Tighter sizing on small screens so 3-across still fits */

@media (max-width: 740px) {
  .cb-tier-svgs {
    gap: 10px;
  }

  .cb-tier-svg {
    height: 170px;
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .cb-tier-svgs {
    gap: 8px;
  }

  .cb-tier-svg {
    height: 140px;
  }
}

/* Accessibility helper (used by pricing button) */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Lock background scroll when pricing modal is open */

html.cb-modal-open,
html.cb-modal-open body {
  overflow: hidden !important;
  height: 100% !important;
}

/* Prevent scroll chaining to the page behind the modal */

.cb-pricing-modal {
  overscroll-behavior: contain;
  z-index: 2147483647;
}

.cb-pricing-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ========== Pricing Calculator Modal (styled to match target) ========== */

.cb-pricing-modal[hidden] {
  display: none !important;
}

.cb-pricing-modal {
  position: fixed;
  inset: 0;
}

.cb-pricing-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* Centered modal card */

.cb-pricing-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 92vw);
  height: min(86vh, 860px);
  margin: 6vh auto 0;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  max-height: 100vh;
}

/* Close button (simple circular) */

.cb-pricing-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 38px;
  height: 38px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 18px;
  line-height: 34px;
  cursor: pointer;
  z-index: 5;
}

/* Header note */

.cb-pricing-header {
  padding: 18px 54px 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cb-pricing-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

/* Body scroll area */

.cb-pricing-body {
  height: calc(100% - 62px);
  overflow: auto;
  padding: 14px 18px 18px;
  -webkit-overflow-scrolling: touch;
}

/* Table wrapper */

.cb-pricing-table {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Table header row (Item / Base / Qty / Subtotal) */

.cb-pricing-row--head {
  display: none !important;
  grid-template-columns: 1.2fr 0.7fr 0.8fr 0.7fr;
  gap: 10px;
  padding: 14px 14px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Rendered rows from JS */

.cb-pricing-rows .cb-pricing-row {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: block !important;
}

/* Line 1: item name */

.cb-pricing-rows .cb-line--name {
  display: block !important;
  margin: 0 0 8px !important;
}

.cb-pricing-rows .cb-name {
  font-weight: 800;
}

.cb-pricing-rows .cb-item-name {
  font-weight: 800;
}

.cb-pricing-rows .cb-base-inline {
  font-weight: 600;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* Line 2: Base | Qty | Subtotal */

.cb-pricing-rows .cb-line--meta {
  display: flex !important;
  grid-template-columns: minmax(70px, 1fr) minmax(150px, auto) minmax(70px, 1fr) !important;
  column-gap: 8px;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

/* Base left */

.cb-pricing-rows .cb-price {
  justify-self: start;
}

/* Qty control center */

.cb-pricing-rows .cb-qty {
  justify-self: unset !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Qty buttons + input */

.cb-pricing-rows .cb-qty-btn {
  min-width: 50px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: 600;
  line-height: 40px;
  cursor: pointer;
  background: #f4f4f4;
  color: #111;
}

/* Red minus / green plus based on your data-act attributes */

.cb-pricing-rows .cb-qty-btn[data-act="dec"] {
  background: #d66b73;
}

.cb-pricing-rows .cb-qty-btn[data-act="inc"] {
  background: #63c97b;
}

.cb-pricing-rows .cb-qty input {
  width: 64px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  text-align: center;
  font-size: 16px;
  padding: 0 8px;
  background: #f4f4f4;
}

.cb-pricing-rows .cb-sub {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

/* Totals block BELOW the table */

.cb-pricing-totals {
  margin-top: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.03);
  padding: 14px 14px;
}

.cb-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 2px;
  font-size: 14px;
}

.cb-total-line b {
  font-weight: 900;
}

.cb-total-line--grand {
  font-size: 16px;
  font-weight: 900;
  padding-top: 10px;
}

.cb-pricing-totals hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 10px 0;
}

@media (max-width: 760px) {
  .cb-pricing-modal__dialog {
    width: calc(100vw - 22px) !important;
    height: calc(100vh - 22px) !important;
    margin: 11px auto !important;
    border-radius: 18px !important;
    border: 2px solid rgba(0, 0, 0, 0.55) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-top: 78px !important;
    height: calc(100vh - 90px) !important;
  }

  /* Make sure the message has room and stays visible */

  .cb-pricing-header {
    padding: 16px 54px 12px 16px !important;
  }

  .cb-pricing-sub {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* The scroll should happen in the body area, not the page */

  .cb-pricing-body {
    height: calc(100% - 64px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile: keep close button visible below the sticky site header */

  .cb-pricing-close {
    position: fixed !important;
    top: calc(8px + 64px) !important;
    right: 8px !important;
    z-index: 2147483647 !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    background: #fff !important;
    border: 2px solid rgba(0, 0, 0, 0.55) !important;
    border-radius: 999px !important;
  }
}

/* Tighten controls a bit on very small phones */

@media (max-width: 420px) {
  .cb-pricing-rows .cb-qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
  }

  .cb-pricing-rows .cb-qty input {
    width: 54px;
    height: 38px;
    font-size: 16px;
  }

  .cb-pricing-rows .cb-base-inline {
    font-size: 0.85em;
  }
}

/* ========== Get the Catalog (Lead Magnet) ========== */

.cb-catalog-lead {
  max-width: 520px;
  margin: 30px auto 0;
  padding: 0 16px;
}

/* Cover image */

.cb-catalog-lead__thumb {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.cb-catalog-lead__img {
  display: block;
  width: min(320px, 85vw);
  height: auto;
  border-radius: 4px;
}

/* Title */

.cb-catalog-lead__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #111;
  text-align: left;
}

/* Bullets */

.cb-catalog-lead__bullets {
  margin: 0 0 18px;
  padding-left: 22px;
  text-align: left;
  color: #555;
  font-size: 16px;
  line-height: 1.45;
}

.cb-catalog-lead__bullets li {
  margin: 6px 0;
}

/* Form wrapper (Klaviyo embeds can be wild) */

.cb-catalog-lead__form {
  margin-top: 6px;
}

/* Make sure the embed doesn’t exceed container width */

.cb-catalog-lead__form .klaviyo-form,
.cb-catalog-lead__form [class*="klaviyo-form"] {
  max-width: 100% !important;
}

/* If Klaviyo injects iframe-like wrappers, keep them contained */

.cb-catalog-lead__form form,
.cb-catalog-lead__form input,
.cb-catalog-lead__form button {
  max-width: 100% !important;
}

/* ========== Catalog Lead Magnet: Klaviyo inline form overrides ========== */

/* Klaviyo injects a big min-height inline. Kill it. */

.cb-catalog-lead__form .needsclick.kl-private-reset-css-Xuajs1 {
  min-height: 0 !important;
  justify-content: flex-start !important;
}

/* Reduce Klaviyo component padding (it injects 10px 6px inline) */

.cb-catalog-lead__form [data-testid="form-component"] {
  padding: 6px 0 !important;
}

/* Hide the "First Name (Optional)" field cleanly */

.cb-catalog-lead__form input[id^="first_name_"] {
  display: none !important;
}

.cb-catalog-lead__form label[for^="first_name_"] {
  display: none !important;
}

/* Also remove the row spacing it leaves behind */

.cb-catalog-lead__form [data-testid="form-row"] {
  margin: 0 !important;
}

.cb-catalog-lead__form [data-testid="form-row"]:first-child {
  display: none !important;
}

/* Email input styling */

.cb-catalog-lead__form input[type="email"][id^="email_"] {
  height: 50px !important;
  border-radius: 6px !important;
  border: 1px solid #cfcfcf !important;
  background: #fff !important;
  padding-left: 16px !important;
  font-size: 16px !important;
  box-sizing: border-box !important;
}

/* Button styling (make it look like your red Submit button) */

.cb-catalog-lead__form button {
  width: 100% !important;
  height: 56px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: #e11515 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  cursor: pointer !important;
}

/* Optional: tighten spacing between input + button */

.cb-catalog-lead__form [data-testid="form-row"] + [data-testid="form-row"] {
  margin-top: 6px !important;
}

/* CDS page only: hide footer Klaviyo newsletter app block */

body:has(.cb-cds) #shopify-block-ARVBBTmVFeFdJZW9CO__klaviyo_email_marketing_sms_form_embed_block_tgfygf {
  display: none !important;
}

/* Center blog post featured image wrapper */

.blog-post-featured-image {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make sure the image itself doesn't introduce weird inline spacing */

.blog-post-featured-image__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Fix UpPromote registration section alignment (override Horizon layout vars) */

[data-testid="section-content"]:has([id*="__uppromote_affiliate_registration_form"]) {
  --horizontal-alignment: flex-start !important;
}

/* 2) Make sure the UpPromote app block can actually use the width */
[id*="__uppromote_affiliate_registration_form"].shopify-app-block,
[id*="__uppromote_affiliate_registration_form"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3) If anything is getting clipped, disable clipping on common wrappers */
[data-testid="section-content"]:has([id*="__uppromote_affiliate_registration_form"]),
[data-testid="section-content"]:has([id*="__uppromote_affiliate_registration_form"]) .section-content-wrapper,
[data-testid="section-content"]:has([id*="__uppromote_affiliate_registration_form"]) .custom-section-content {
  overflow: visible !important;
}

/* Affiliate signup page only: hide footer Klaviyo form */

body:has(#shopify-block-AWUk3YUlBVmUwVi94Q__uppromote_affiliate_registration_form_i7JCMf) footer .shopify-app-block:has(.klaviyo-form),
body:has(#shopify-block-AWUk3YUlBVmUwVi94Q__uppromote_affiliate_registration_form_i7JCMf) footer .shopify-app-block:has([class*="klaviyo-form"]) {
  display: none !important;
}

/* Force-hide Free Shipping badge when [hidden] is present */
#cb-free-ship[hidden] {
  display: none !important;
}

/* Demote UI headings that should not count as content headings */
.account-actions__title,
.cart-drawer__heading,
.localization-form__title,
.facets__heading,
.facets__title,
.predictive-search__heading,
.search__heading,
.search-modal__heading {
  all: unset;
  display: block;
}

@media (min-width: 990px) {
  .cds-logo {
    transform: scale(0.75);   /* easy trial-and-error knob */
    transform-origin: center top;
  }
}

/* CDS hero logo spacing */
.cds-logo-wrap {
  margin: 0;           /* ensures wrapper adds no space */
  padding: 0;
}

.cds-logo {
  display: block;      /* prevents inline image baseline gap */
  margin: 0 auto;      /* keeps it centered */
}

/* Optional: if you want the gap between logo and text tighter on desktop */
@media (min-width: 990px) {
  .cds-logo-wrap {
    margin-bottom: 0;  /* leave at 0, control gap via the parent --gap */
  }
}

/* About Us (cb-about) */
.cb-about {
  max-width: 980px;
  margin: 0 auto;
}

.cb-about__header {
  margin-bottom: 18px;
  font-size: 20px !important;
}

.cb-about__title {
  margin: 0 0 10px 0;
  font-size: 20px;
}

.cb-about__intro {
  margin: 0;
}

.cb-about__body {
  display: block;
}

.cb-about__p {
  margin: 0 0 14px 0;
}

/* About page: make intro match cb-about__p exactly */
.cb-about__intro {
  font-size: var(--cb-about-p-size, 16px);
  line-height: var(--cb-about-p-line, 1.5);
  margin: 0 0 14px 0;
}

.cb-about__p {
  font-size: var(--cb-about-p-size, 16px);
  line-height: var(--cb-about-p-line, 1.5);
}



.cb-about__p--lead {
  font-weight: 600;
}

.cb-about__p--emphasis {
  font-weight: 600;
}

.cb-about__h3 {
  margin: 22px 0 10px 0;
  font-size: 20px;
}

.cb-about__split {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 18px 0 18px 0;
}

.cb-about__split-text {
  flex: 1 1 52%;
}

.cb-about__split-media {
  flex: 1 1 48%;
  margin: 0;
}

.cb-about__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.cb-about__closing {
  margin-top: 10px;
}

/* Mobile */
@media (max-width: 749px) {
  .cb-about__split {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cb-about__split-media {
    order: -1; /* image first on mobile */
  }
}
/* About page H1: keep <h1> semantics but reduce visual size */
.text-block--AQ0tnN01QYnp4cGJmT__heading h1 {
  font-size: 28px !important;
  line-height: 2;
  margin: 0 0 14px 0;
}

@media (max-width: 749px) {
  .text-block--AQ0tnN01QYnp4cGJmT__heading h1 {
    font-size: 22px;
  }
}

.cb-custom-design-cta {
  margin-top: 24px;
}

.cb-custom-design-cta__inner {
  display: flex;
  justify-content: center;
}

.cb-custom-design-cta__button {
  display: inline-block;
  padding: 14px 36px;
  background-color:rgb(127, 127, 127); /* change freely */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
}

.cb-custom-design-cta__button:hover {
  background-color: #333;
}

/* Power Break Year dropdown */
.cb-year {
  margin-top: 12px;
}

.cb-year .form__label {
  margin-bottom: 6px;
  font-size: 20px;
}

/* Optional: make it stand out when required */
.cb-year__select:invalid {
  border-color: rgb(var(--color-error-rgb));
}

<!-- Optional: Mobile-friendly CSS starter (paste into custom.css if needed)
.cb-care { font-size: 16px; line-height: 1.5; }
.cb-care__intro { margin: 0 0 14px; }
.cb-care__h2 { font-size: 22px; line-height: 1.2; margin: 20px 0 10px; }
.cb-care__h3 { font-size: 18px; line-height: 1.25; margin: 14px 0 8px; }
.cb-care__nav-title { font-size: 18px; margin: 16px 0 8px; }
.cb-care__nav-list { margin: 0 0 12px; padding-left: 18px; }
.cb-care__nav-link { font-size: 16px; }
.cb-care__grid { display: grid; gap: 12px; }
.cb-care__block { padding: 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; }
.cb-care__list { margin: 0; padding-left: 18px; }
.cb-care__backtop { display: inline-block; margin-top: 10px; font-size: 14px; }
.cb-care__footer-text { font-size: 14px; margin-top: 18px; }
@media (min-width: 720px){ .cb-care__grid { grid-template-columns: 1fr 1fr; } }
-->

/* Fit & Feel: reduce garment image size by 25% */
.cb-fitfeel__media {
  max-width: 55%;
  margin-left: auto;
  margin-right: auto;
}

.cb-fitfeel__image {
  width: 100%;
  height: auto;
  display: block;
}

.sorting-filter__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--drawer-padding) 0;
  padding-block: var(--padding-sm);
  margin-inline-end: var(--margin-md);
  position: relative;
}

.sorting-filter__container .facets__label {
  font-size: var(--font-h4--size);
}

.sorting-filter__select-wrapper {
  display: flex;
  position: relative;
  border-radius: var(--variant-picker-button-radius);
  align-items: center;
  overflow: clip;
  padding: var(--padding-2xs) var(--padding-xs);
}

.sorting-filter__select-wrapper:has(:focus-visible) {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

.sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
  outline: none;
}

.sorting-filter__container .sorting-filter__select {
  appearance: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  padding-inline-end: var(--icon-size-2xs);
  text-align: right;
  text-align-last: right;
}

.sorting-filter__select .icon {
  position: absolute;
  right: var(--padding-md);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
  pointer-events: none;
}

@media screen and (min-width: 750px) {
  .sorting-filter {
    z-index: var(--facets-upper-z-index);
  }
}

.sorting-filter__options {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  position: absolute;
  top: 100%;
  right: 0;
  color: var(--color-foreground);
  z-index: var(--facets-upper-z-index);
  box-shadow: var(--shadow-popover);
  border: var(--style-border-popover);
  background-color: var(--color-background);
  border-radius: var(--style-border-radius-popover);
  width: max-content;
  min-width: var(--facets-panel-min-width);
  min-height: 0;
  transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
    opacity var(--animation-speed-slow) var(--animation-easing);
}

details[open] .sorting-filter__options {
  opacity: 1;
  grid-template-rows: 1fr;
}

.sorting-filter__options-inner {
  display: flex;
  flex-direction: column;
  grid-row: 1 / span 2;
  gap: var(--gap-sm);
  padding: calc(var(--drawer-padding) / 2);
  color: var(--color-foreground);
  overflow: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sorting-filter__options-inner::-webkit-scrollbar {
  display: none;
}

@media screen and (min-width: 750px) {
  .sorting-filter__options-inner {
    gap: 0;
  }
}

.sorting-filter__option {
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--icon-size-sm) 1fr;
  gap: var(--margin-2xs);
  align-items: center;
  min-width: 180px;
  max-width: 16em;
  padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);
}

.sorting-filter__option:hover {
  border-radius: calc(var(--style-border-radius-popover) / 2);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
}

.sorting-filter__option:focus {
  border-radius: calc(var(--style-border-radius-popover) / 2);
}

.sorting-filter__input {
  display: none;
}

.sorting-filter__input:checked + .sorting-filter__checkmark + .sorting-filter__label {
  font-weight: 500;
}

.sorting-filter__checkmark {
  visibility: hidden;
}

*:checked ~ .sorting-filter__checkmark {
  visibility: visible;
}

.sorting-filter__label {
  cursor: pointer;
  pointer-events: none;
}

@media screen and (max-width: 749px) {
  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    padding-inline-start: 0;
  }
}

.facets-mobile-wrapper .sorting-filter .facets__panel {
  padding-inline: 0;
  position: relative;
}

.facets-mobile-wrapper .sorting-filter .facets__status {
  display: none;
}

.facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
  left: 0;
  right: unset;
}

.facets-mobile-wrapper .sorting-filter .facets__label {
  margin-inline-end: var(--margin-2xs);
  font-size: var(--font-paragraph--size);
  color: var(--color-foreground-muted);
}

@media screen and (max-width: 749px) {
  .facets-toggle .sorting-filter__container {
    padding: 0;
  }

  .facets-toggle .sorting-filter__container .facets__label {
    display: none;
  }

  .facets-toggle .sorting-filter::before {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .facets--drawer .sorting-filter {
    display: none;
  }
}

/* Crossbank: Pool-style free shipping bar (Corner Pocket) */
.cb-free-ship--pool .cb-free-ship__message {
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: #1c1712;
}

.cb-free-ship--pool.cb-free-ship--achieved .cb-free-ship__message {
  color: #ce1d17;
  font-weight: 700;
}

.cb-free-ship--pool .cb-free-ship__rail {
  position: relative;
  height: 22px;
  margin: 12px 4px;
}

.cb-free-ship--pool .cb-free-ship__track {
  position: absolute;
  /* Full rail width, not inset for the pocket — the pocket sits on top
     of this at the right edge (z-index 2) and covers it there. Both
     need the same width so the fill's and cue ball's "78%" calc()
     formulas resolve against the same containing-block width; a track
     inset narrower than the rail made the fill fall short of the cue
     ball by a growing amount as progress increased. */
  inset: 3px 0;
  border-radius: 999px;
  background: #e8e1d2;
  overflow: hidden;
}

/*
  The cue ball's travel distance and the fill width both use the same
  formula: progress (0-1) scaled across the rail, capped at the exact
  point where the cue ball's edge touches the 8-ball's edge (78% minus
  one ball-diameter of 20px — both balls are 20px, so equal centers
  20px apart means their edges meet exactly). clamp() means it can
  never overshoot that contact point even if the cart total exceeds
  the threshold.
*/
.cb-free-ship--pool .cb-free-ship__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(64px, calc(var(--cb-progress-frac, 0) * 78% - var(--cb-progress-frac, 0) * 20px), calc(78% - 20px));
  border-radius: 999px;
  background: #0f79e4ff;
  transition: width 300ms ease;
}

.cb-free-ship--pool[data-achieved="true"] .cb-free-ship__fill {
  width: 100%;
}

/* Cue ball */
.cb-free-ship--pool .cb-free-ship__cue-ball {
  position: absolute;
  top: 50%;
  left: clamp(64px, calc(var(--cb-progress-frac, 0) * 78% - var(--cb-progress-frac, 0) * 20px), calc(78% - 20px));

  /* Rolls as it travels — three full turns over the whole rail — so the
     red dot lands somewhere different at every cart total instead of
     always sitting in the same spot. */
  transform: translate(-50%, -50%) rotate(calc(var(--cb-progress-frac, 0) * 720deg));

  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fdfcf8;
  border: 1.5px solid #0a0a0a;
  box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.18);
  z-index: 4;
  transition: left 300ms ease, transform 300ms ease;
}

/* Red dot on the cue ball — rotates with the ball itself */
.cb-free-ship--pool .cb-free-ship__cue-ball::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ce1d17;
  top: 4px;
  right: 4px;
}

/* Eight ball (rests just short of the pocket) */
.cb-free-ship--pool .cb-free-ship__eight-ball {
  position: absolute;
  top: 50%;
  left: 78%;
  transform: translate(-50%, -50%);

  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #141414;
  border: 1.5px solid #0a0a0a;
  box-shadow: inset -3px -3px 4px rgba(0, 0, 0, 0.18);
  z-index: 3;
  display: grid;
  place-items: center;
}

.cb-free-ship--pool .cb-free-ship__eight-ball-ring {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fdfcf8;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 6.5px;
  color: #141414;
}

/* Pocket: assets/pocket.svg (side pocket, top-down). The hole's center
   sits 15px in from the rail's right end; the 8-ball sinks to that point. */
.cb-free-ship--pool .cb-free-ship__pocket {
  position: absolute;
  right: 0;
  top: 50%;
  width: auto;
  height: 44px;
  transform: translateY(-50%);
  z-index: 2;
}

/* Achieved resting state: works from the data attribute alone, so the
   full /cart page (which doesn't load cb-free-shipping-pool.js) still
   renders the sunk 8-ball correctly on first paint. */
.cb-free-ship--pool[data-achieved="true"] .cb-free-ship__eight-ball {
  left: calc(100% - 15px);
  transform: translate(-50%, -50%) scale(0.05);
  opacity: 0;
}

/* Sink animation: only runs when JS adds cb-free-ship--sink (cart drawer,
   on the live transition from not-achieved to achieved) */
@keyframes cbEightSink {
  0% {
    left: 78%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  65% {
    left: calc(100% - 15px);
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 1;
  }
  100% {
    left: calc(100% - 15px);
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 0;
  }
}

@keyframes cbCueTap {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(0.96); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.cb-free-ship--pool.cb-free-ship--sink .cb-free-ship__eight-ball {
  animation: cbEightSink 650ms ease forwards;
}

.cb-free-ship--pool.cb-free-ship--sink .cb-free-ship__cue-ball {
  animation: cbCueTap 220ms ease-out;
}



/*======================================================GOOD TO HERE ==============================*/



/* =========================================================
   Homepage Responsive Visibility Overrides
   Hide mobile-only sections on desktop
   Hide desktop-only sections on mobile
   Breakpoint aligned with Horizon (750px)
   ========================================================= */


/* ===============================
   HIDE MOBILE SECTIONS ON DESKTOP
   =============================== */

@media (min-width: 750px) {

  /* Mobile Review Section */
  #shopify-section-template--25463382343967__1767903898c798bce5 {
    display: none !important;
  }

  #shopify-section-template--25463382343967__section_UeT7d9 {
    display: none !important;
  }

}


/* ===============================
   HIDE DESKTOP SECTIONS ON MOBILE
   =============================== */

@media (max-width: 749px) {

  /* Desktop Review Block */
  #shopify-block-Aa0FsOEdxcHBJeFhkY__judge_me_reviews_cards_carousel_bnACXb {
    display: none !important;
  }

  /* Desktop Affiliate Section */
  #shopify-section-template--25463382343967__section_xCWqmt {
    display: none !important;
  }

}

/* === HOMEPAGE: Hide Mobile Reviews section on Desktop === */
@media screen and (min-width: 750px) {
  html body #shopify-section-template--25463382343967__1767903898c798bce5 {
    display: none !important;
  }

}


/* ============================================================
   CROSSBANK CUSTOM DESIGN SERVICE - REDESIGN (merged in)
   ============================================================ */

/* =========================================================
   CROSSBANK CUSTOM DESIGN SERVICE - REDESIGN
   Mobile-first | 7 alternating sections
   ========================================================= */

/* ---------- GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
  /* Colors */
  --cds-ink: #071510;
  --cds-felt: #0c4d35;
  --cds-chalk: #f3efe4;
  --cds-gold: #e7b23c;
  --cds-red: #d8443b;

  /* Fonts */
  --cds-font-display: 'Anton', sans-serif;
  --cds-font-body: 'Hanken Grotesk', sans-serif;
  --cds-font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --cds-section-pad: clamp(40px, 8vw, 80px);
  --cds-content-max: 1200px;
  --cds-gutter: clamp(16px, 4vw, 24px);
}

/* ---------- BASE RESETS (scoped to CDS page) ---------- */
.cds-page,
.cds-page *,
.cds-page *::before,
.cds-page *::after {
  box-sizing: border-box;
}

.cds-page {
  font-family: var(--cds-font-body);
  color: var(--cds-chalk);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cds-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cds-page a {
  color: inherit;
  text-decoration: none;
}

/* ---------- SECTION BACKGROUNDS ---------- */
.cds-section {
  padding: var(--cds-section-pad) var(--cds-gutter);
  position: relative;
}

.cds-section--ink {
  background-color: var(--cds-ink);
}

.cds-section--felt {
  background-color: var(--cds-felt);
}

.cds-section--textured {
  background-color: var(--cds-felt);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.05) 2px,
      rgba(0, 0, 0, 0.05) 4px
    );
}

.cds-section__inner {
  max-width: var(--cds-content-max);
  margin: 0 auto;
}

/* ---------- TYPOGRAPHY ---------- */
.cds-eyebrow {
  font-family: var(--cds-font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cds-gold);
  margin: 0 0 8px;
}

.cds-hero-text {
  font-family: var(--cds-font-display);
  font-size: clamp(40px, 12vw, 80px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--cds-chalk);
}

.cds-hero-text--outline {
   color: transparent;
  -webkit-text-stroke: 1px var(--cds-gold);
}

.cds-headline {
  font-family: var(--cds-font-display);
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--cds-chalk);
}

.cds-headline--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--cds-gold);
}

.cds-subhead {
  font-family: var(--cds-font-body);
  font-size: clamp(16px, 2vw, 18px);
  color: #f3efe4;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 540px;
}

.cds-subhead strong {
  font-weight: 700;
}

/* ---------- BULLETS ---------- */
.cds-bullets {
  list-style: none;
  color: #f3efe4;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}

.cds-bullets--2col {
  grid-template-columns: 1fr 1fr;
}

.cds-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.4;
}

.cds-bullets__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
}

.cds-bullets__dot--gold { background: var(--cds-gold); }
.cds-bullets__dot--blue { background: #4a7cbb; }
.cds-bullets__dot--red { background: var(--cds-red); }
.cds-bullets__dot--purple { background: #8b5cf6; }

/* ---------- BUTTONS ---------- */
.cds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--cds-font-body);
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 16px);
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.cds-btn--primary {
  background: var(--cds-red);
  color: var(--cds-chalk);
  border-color: var(--cds-red);
}

.cds-btn--primary:hover {
  background: #c13a32;
  border-color: #c13a32;
}

.cds-btn--secondary {
  background: transparent;
  color: var(--cds-chalk);
  border-color: var(--cds-chalk);
}

.cds-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.cds-btn--gold {
  background: var(--cds-gold);
  color: var(--cds-ink);
  border-color: var(--cds-gold);
}

.cds-btn--gold:hover {
  background: #d4a235;
  border-color: #d4a235;
}

.cds-btn--dark {
  background: rgba(0, 0, 0, 0.35);
  color: var(--cds-chalk);
  border-color: rgba(255, 255, 255, 0.2);
}

.cds-btn--dark:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.35);
}

.cds-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 749px) {
  .cds-btn-row {
    flex-direction: column;
  }

  .cds-btn-row .cds-btn {
    width: 100%;
  }
}

/* ---------- SECTION 1: HERO ---------- */
.cds-hero {
  min-height: auto;
}

.cds-hero .cds-section__inner {
  display: grid;
  gap: 40px;
}

@media (min-width: 750px) {
  .cds-hero .cds-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
}

.cds-hero__content {
  order: 1;
}

.cds-hero__preview {
  order: 2;
}

/* Print preview mockup */
.cds-preview {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 20px 24px 24px;
  position: relative;
}

.cds-preview__label {
  display: inline-block;
  font-family: var(--cds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cds-ink);
  background: var(--cds-gold);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.cds-preview__frame {
  border: 2px dashed var(--cds-gold);
  border-radius: 8px;
  padding: 60px 40px;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.02) 10px,
    rgba(255, 255, 255, 0.02) 20px
  );
}

.cds-preview__text {
  font-family: var(--cds-font-display);
  font-size: clamp(24px, 4vw, 36px);
  text-transform: uppercase;
  color: var(--cds-gold);
  line-height: 1;
}

.cds-preview__subtext {
  font-family: var(--cds-font-mono);
  font-size: 12px;
  margin-top: 16px;
  opacity: 0.7;
}

/* Pool ball swatches */
.cds-swatches {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
}

.cds-pool-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cds-font-display);
  font-size: 15px;
  position: relative;
  flex-shrink: 0;
}

.cds-pool-ball::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
}

.cds-pool-ball span {
  position: relative;
  z-index: 1;
  color: #071510;
  line-height: 1;
}

.cds-pool-ball--1 { background: var(--cds-gold); }
.cds-pool-ball--2 { background: #4a7cbb; }
.cds-pool-ball--3 { background: var(--cds-red); }
.cds-pool-ball--6 { background: #2d8a4e; }
.cds-pool-ball--8 { background: #1a1a1a; }

/* ---------- STEP 1 CALLOUT BANNER ---------- */
.cds-step-banner {
  background: var(--cds-gold);
  padding: 20px var(--cds-gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.cds-step-banner__badge {
  flex-shrink: 0;
  background: var(--cds-ink);
  color: var(--cds-chalk);
  font-family: var(--cds-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
}

.cds-step-banner__text {
  font-family: var(--cds-font-body);
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 600;
  color: var(--cds-ink);
  margin: 0;
  max-width: 680px;
}

/* ---------- SECTION 2: PACKAGES ---------- */
.cds-packages .cds-section__inner {
  text-align: center;
}

.cds-packages__grid {
  display: grid;
  color: #f3efe4;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 750px) {
  .cds-packages__grid {
    grid-template-columns: 1fr 1fr;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
}

.cds-package {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: left;
  border: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
}

.cds-package--featured {
  border-color: var(--cds-gold);
}

/* "Most Flexible" badge */
.cds-package__badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--cds-gold);
  color: var(--cds-ink);
  font-family: var(--cds-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}

.cds-package__name {
  font-family: var(--cds-font-body);
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 700;
  margin: 0 0 6px;
}

.cds-package__price {
  font-family: var(--cds-font-display);
  font-size: clamp(42px, 7vw, 56px);
  color: var(--cds-gold);
  margin: 0 0 4px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cds-package__price-label {
  font-family: var(--cds-font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(243, 239, 228, 0.7);
}

.cds-package__desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px;
  opacity: 0.85;
  font-style: italic;
}

.cds-package__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.cds-package__features li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cds-package__features li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cds-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071510' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
}

.cds-package .cds-btn {
  width: 100%;
  margin-bottom: 12px;
}

/* Package secondary buttons — always side by side */
.cds-btn-row--pkg {
  flex-direction: row !important;
  flex-wrap: nowrap;
}

.cds-btn-row--pkg .cds-btn {
  flex: 1;
  width: auto !important;
  padding: 12px 16px;
  font-size: 13px;
}

.cds-package__caption {
  font-family: var(--cds-font-mono);
  font-size: 11px;
  text-align: center;
  margin: 10px 0 0;
  opacity: 0.5;
  letter-spacing: 0.05em;
}

/* ---------- SECTION 3: HOW IT WORKS ---------- */
.cds-howit .cds-section__inner {
  max-width: var(--cds-content-max);
}

/* Mobile: stacked cards, ball left + content right */
.cds-howit__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cds-howit-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}

/* Dashed connector line between cards on mobile */
.cds-howit-card:not(:last-child) .cds-howit-card__ball::after {
  content: '';
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 60px);
  border-left: 2px dashed rgba(255, 255, 255, 0.25);
}

.cds-howit-card__ball {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.cds-howit-card__content {
  flex: 1;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cds-howit-card__content .cds-eyebrow {
  margin-bottom: 4px;
}

/* Desktop: 3-column card layout */
@media (min-width: 750px) {
  .cds-howit__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .cds-howit-card {
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px 32px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding-bottom: 28px;
  }

  /* No connector lines on desktop */
  .cds-howit-card:not(:last-child) .cds-howit-card__ball::after {
    display: none;
  }

  .cds-howit-card__ball {
    /* ball stays at natural position top of card */
  }

  .cds-howit-card__content {
    padding-top: 0;
  }
}

/* Pool balls (used in how-it-works steps) */
.cds-ball {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cds-font-display);
  font-size: 22px;
  flex-shrink: 0;
  position: relative;
}

.cds-ball::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.cds-ball span {
  position: relative;
  z-index: 1;
  color: var(--cds-ink);
  line-height: 1;
}

.cds-ball--1 { background: var(--cds-gold); }
.cds-ball--2 { background: #4a7cbb; }
.cds-ball--3 { background: var(--cds-red); }

/* Step text */
.cds-step__title {
  font-family: var(--cds-font-display);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  color: #f3efe4;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.02em;
}

.cds-step__desc {
  font-size: 14px;
  color: #f3efe4;
  line-height: 1.4;
  margin: 0;
  opacity: 0.85;
}

/* ---------- SECTION 4: PRODUCTS ---------- */
.cds-products .cds-section__inner {
  text-align: center;
}

.cds-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 750px) {
  .cds-products__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1000px) {
  .cds-products__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cds-product-card {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.2s ease;
}

.cds-product-card:hover {
  transform: translateY(-4px);
}

.cds-product-card__image {
  aspect-ratio: 1;
  border: 2px dashed var(--cds-gold);
  margin: 12px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.cds-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Pending cards (no src yet) show the hatched placeholder */
.cds-product-card__image[data-pending="true"] {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255, 255, 255, 0.03) 8px,
    rgba(255, 255, 255, 0.03) 16px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.cds-product-card__image[data-pending="true"] .cds-product-card__img {
  display: none;
}

.cds-product-card__info {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cds-product-card__name {
  font-family: var(--cds-font-body);
  font-weight: 600;
  color: #f3efe4;
  font-size: 13px;
  margin: 0;
  line-height: 1.3;
}

.cds-product-card__price {
  font-family: var(--cds-font-display);
  font-size: 16px;
  color: var(--cds-gold);
  margin: 0;
  flex-shrink: 0;
}

/* ---------- MOBILE CAROUSEL (products section only) ---------- */
@media (max-width: 749px) {
  .cds-products__grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin-top: 32px;
    padding-bottom: 4px;
  }

  .cds-products__grid::-webkit-scrollbar {
    display: none;
  }

  .cds-product-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    width: 100%;
    min-width: 100%;
  }

  /* Dot indicators */
  .cds-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .cds-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .cds-carousel-dot.is-active {
    background: var(--cds-gold);
  }
}

@media (min-width: 750px) {
  .cds-carousel-dots {
    display: none;
  }
}

/* Callout box */
.cds-callout {
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid var(--cds-gold);
  border-radius: 10px;
  padding: 24px;
  margin-top: 24px;
  text-align: left;
  max-width: 640px;
}

.cds-callout__title {
  font-family: var(--cds-font-display);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  text-transform: uppercase;
  color: #f3efe4;
  margin: 0 0 8px;
}

.cds-callout__text {
  font-size: 14px;
  color: #f3efe4;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}

/* ---------- SECTION 5: PRICING ---------- */
.cds-pricing .cds-section__inner {
  text-align: center;
}

.cds-pricing__tiers {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

/* Mobile: horizontal badge + info (stacked rows) */
.cds-tier {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.cds-tier__badge {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  font-family: var(--cds-font-display);
}

.cds-tier__badge-text {
  font-size: clamp(28px, 5vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}

.cds-tier__badge-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cds-tier__badge--purple  { background: #7c3aed; color: white; }
.cds-tier__badge--blue    { background: #4a7cbb; color: white; }
.cds-tier__badge--steelblue { background: #6b9cd8; color: white; }

.cds-tier__info {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.cds-tier__count {
  font-family: var(--cds-font-display);
  color: #f3efe4;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 30px);
  text-transform: uppercase;
  margin: 0 0 2px;
}

.cds-tier__label {
  font-family: var(--cds-font-mono);
  color: #f3efe4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.7;
  margin: 0;
}

/* Desktop: large square tiles — badge fills card, info hidden */
@media (min-width: 750px) {
  .cds-pricing__tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .cds-tier {
    flex-direction: column;
    border-radius: 12px;
  }

  .cds-tier__badge {
    width: 100%;
    padding: 60px 24px;
    border-radius: 12px;
  }

  .cds-tier__badge-text {
    font-size: clamp(40px, 6vw, 56px);
    margin-bottom: 4px;
  }

  .cds-tier__badge-label {
    font-size: 15px;
  }

  .cds-tier__info {
    display: none;
  }
}

.cds-pricing__note {
  font-size: 14px;
  color: #f3efe4;
  line-height: 1.5;
  margin: 0 0 24px;
  opacity: 0.9;
}

/* ---------- SECTION 6: FAQ ---------- */
.cds-faq .cds-section__inner {
  text-align: center;
  max-width: 800px;
}

.cds-faq__list {
  margin-top: 40px;
  text-align: left;
}

.cds-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.cds-faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  color: var(--cds-chalk);
  font-family: var(--cds-font-body);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cds-faq-item__trigger:hover {
  color: var(--cds-gold);
}

.cds-faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--cds-gold);
  transition: transform 0.3s ease;
}

.cds-faq-item[open] .cds-faq-item__icon {
  transform: rotate(45deg);
}

.cds-faq-item__answer {
  padding: 0 0 20px;
  color: #f3efe4;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
}

.cds-faq-item__answer p {
  margin: 0;
}

/* ---------- SECTION 7: CATALOG / LEAD MAGNET ---------- */
.cds-catalog .cds-section__inner {
  text-align: center;
}

@media (min-width: 750px) {
  .cds-catalog .cds-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    text-align: left;
  }
}

/* Catalog cover card */
.cds-catalog__image {
  margin: 0 auto 32px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 380px;
}

@media (min-width: 750px) {
  .cds-catalog__image {
    margin: 0;
    order: 2;
    max-width: 100%;
  }
}

.cds-catalog__cover {
  background: linear-gradient(160deg, #1a6640 0%, #0c4d35 60%, #071510 100%);
  padding: 36px 32px 32px;
  text-align: center;
}

.cds-catalog__cover-title {
  font-family: var(--cds-font-display);
  font-size: clamp(22px, 3.5vw, 28px);
  text-transform: uppercase;
  color: var(--cds-chalk);
  margin: 0 0 24px;
  line-height: 1.1;
}

.cds-catalog__cover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 240px;
  margin: 0 auto;
}

.cds-catalog__cover-grid div {
  aspect-ratio: 1;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.07) 4px,
    rgba(255, 255, 255, 0.07) 8px
  );
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cds-catalog__content {
  order: 1;
}

.cds-catalog__form {
  color: #f3efe4;
  margin-top: 20px;
  margin-bottom: 20px;
}

.cds-catalog__form-row {
  margin-bottom: 12px;
}

.cds-catalog__input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  color: var(--cds-chalk);
  font-family: var(--cds-font-body);
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.cds-catalog__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.cds-catalog__input:focus {
  outline: none;
  border-color: var(--cds-gold);
}


/* Submit button styling is handled via JS (shadow DOM — CSS cannot pierce it) */
.cds-catalog__submit {
    width: 100%;
  margin-top: 8px;
}

.cds-catalog__proof {
  font-family: var(--cds-font-mono);
  color: #f3efe4;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 20px;
  opacity: 0.7;
}

/* ---------- MOBILE FLOATING BUTTONS ---------- */
.cds-floating {
  display: none;
}

@media (max-width: 749px) {
  .cds-floating {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--cds-ink);
    z-index: 9999;
    justify-content: center;
  }

  .cds-floating__btn {
    flex: 1;
    max-width: 200px;
    padding: 14px 16px;
    border-radius: 8px;
    font-family: var(--cds-font-body);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.2s ease;
  }

  .cds-floating__btn--catalog {
    background: transparent;
    color: var(--cds-chalk);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .cds-floating__btn--catalog:hover {
    border-color: var(--cds-chalk);
  }

  .cds-floating__btn--cart {
    background: var(--cds-red);
    color: var(--cds-chalk);
    border-color: var(--cds-red);
    position: relative;
  }

  .cds-floating__btn--cart:hover {
    background: #c13a32;
  }

  /* Dropdown menu */
  .cds-floating__cart-wrap {
    flex: 1;
    max-width: 200px;
    position: relative;
  }

  .cds-floating__btn--cart {
    width: 100%;
    max-width: none;
  }

  .cds-floating__dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--cds-ink);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
  }

  .cds-floating__dropdown.is-open {
    display: block;
  }

  .cds-floating__dropdown-item {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    color: var(--cds-chalk);
    font-family: var(--cds-font-body);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s ease;
  }

  .cds-floating__dropdown-item:last-child {
    border-bottom: none;
  }

  .cds-floating__dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* Add padding to page content so last section clears the floating bar */
@media (max-width: 749px) {
  .cds-page {
    padding-bottom: 80px;
  }
}

/* Push the Shopify footer below the floating bar on mobile.
   JS measures the actual bar height and overrides this at runtime. */
@media (max-width: 749px) {
  footer,
  .site-footer,
  #shopify-section-footer {
    padding-bottom: 80px;
  }
}

/* ---------- UTILITY CLASSES ---------- */
.cds-text-center { text-align: center; }
.cds-text-left { text-align: left; }
.cds-mt-0 { margin-top: 0; }
.cds-mb-0 { margin-bottom: 0; }

/* ---------- ANIMATIONS ---------- */
@keyframes cds-fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cds-animate {
  animation: cds-fadeUp 0.6s ease forwards;
}

.cds-animate--delay-1 { animation-delay: 0.1s; }
.cds-animate--delay-2 { animation-delay: 0.2s; }
.cds-animate--delay-3 { animation-delay: 0.3s; }