/** Shopify CDN: Minification failed

Line 1487:1 Unexpected "4"

**/
/*! Odisei patches — custom overrides on top of theme.css.
   Kept in its own file so vendor theme updates don't blow them away.
   Each rule is prefixed with a "Odisei patch:" comment explaining intent. */

/* Odisei patch: stock pillbox — keep the pill light gray (as the merchant originally had it)
   but color the status icon so in-stock reads as green at a glance.
   The !important + shorthand `background` is required to beat section-level Custom CSS
   that was injecting #shopify-section-<id> rules (removed in templates/product.json, but
   using !important keeps us resilient if anyone adds new section CSS later). */
.product__inventory .alert {
  background: #fafafa !important;
  color: #111111 !important;
}
.product__inventory .alert--success .icon-ellipse {
  color: #007F6F !important; /* brand teal, sampled from the logo */
}
.product__inventory .alert--error .icon-ellipse {
  color: #B91C1C !important; /* readable red */
}
.product__inventory .alert--info .icon-ellipse {
  color: #B45309 !important; /* amber for incoming / waiting */
}

/* Odisei patch: remove the 1px border ring the .button::after pseudo draws on primary CTAs
   on product pages. With the current color settings it renders visibly dark against the blue fill. */
.product-form__submit.button--primary::after,
.product-sticky-form .button--primary::after,
.button--sweetwater::after {
  border: none;
}

/* Odisei patch: force a solid Odisei-blue fill on the default Add to Cart button,
   both in the main product form and the bottom-right sticky recap. The sticky variant
   was rendering white-on-white in some contexts; this pins it to #0218A0. */
.product-form__submit.button--primary,
.product-sticky-form .button--primary {
  background-color: #0218A0 !important;
  background-image: none !important;
  color: #ffffff !important;
}
.product-form__submit.button--primary .btn-fill,
.product-sticky-form .button--primary .btn-fill {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Odisei patch: sticky recap title un-fade. The product section's kept Custom CSS applies
   `.text-base { opacity: 0.5 }` globally in the section, which bleeds into the sticky form
   title and makes it look grayed out. Restore full opacity + explicit black here. */
.product-sticky-form .text-base {
  opacity: 1 !important;
  color: #000000 !important;
}

/* Odisei patch: give the sticky CTA some horizontal breathing room on desktop. */
@media screen and (min-width: 768px) {
  .product-sticky-form .button--primary,
  .product-sticky-form .button--sweetwater {
    padding-inline: 2.25rem !important;
  }
}

/* Odisei patch: Buy on Sweetwater button (US market only).
   Sweetwater brand blue #2E71EA, white text, no black border, subtle hover wipe.
   Paired with an external-link icon added in the Liquid markup. */
.button--sweetwater {
  background-color: #2E71EA !important;
  background-image: none !important;
  color: #ffffff !important;
}
.button--sweetwater .btn-fill {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.button--sweetwater .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.button--sweetwater .icon-external {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Odisei patch: quick-view eye icon visibility on product cards.
   The icon color inherits from the section color scheme via --color-button-background,
   which flips to white on dark sections (related products, bundles) and becomes invisible
   against the white button. Pin the button to white / icon to near-black. */
.product-card .quick-view__button,
.product-card-horizontal .quick-view__button {
  background-color: #ffffff !important;
  color: #111111 !important;
}
.product-card .quick-view__button .icon,
.product-card-horizontal .quick-view__button .icon {
  color: #111111 !important;
}

/* Odisei patch: the theme's .link animated underline uses `background-position-y: min(100%, 1.35em)`
   as a gradient hack. On small-font links (text-sm + leading-tight — notably the "Need help"
   drawer trigger) the computed y lands inside the text instead of under it, producing a
   strike-through effect. Push the underline a few pixels below the baseline. */
.link.text-sm.leading-tight {
  background-position-y: calc(100% + 3px) !important;
}

/* Odisei patch (temporary, 2026-04-15): hide the "Need help?" icon + link on product pages
   until the help-drawer copy is ready. Applies on every template that renders the main-product
   section (default product + product-accessories). To re-enable, delete this rule or clear
   the "Need help?" block from the Main product section in the theme customizer. */
.flex:has(> button[aria-controls="HelpDrawer"]) {
  display: none !important;
}

/* Odisei patch: smooth in-page scrolling + sticky-header offset for hash anchors.
   Paired with the homepage "Discover Our Instruments" CTA which now links to
   #shopify-section-177234173856dc51a0 ("Used by 5,000+ Musicians" banner).
   scroll-margin-top lifts the landing point below the sticky header so the banner
   reads as the new top of the viewport. */
html {
  scroll-behavior: smooth;
}
.shopify-section {
  scroll-margin-top: var(--sticky-header-height, 80px);
}

/* Odisei patch: Notify Me modal (H6 - 13/05/2026) */
.odisei-notify-modal[hidden] { display: none; }
.odisei-notify-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.odisei-notify-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.odisei-notify-modal__content { position: relative; background: #fff; padding: 32px; max-width: 480px; width: calc(100% - 32px); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.odisei-notify-modal__close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 28px; cursor: pointer; width: 36px; height: 36px; line-height: 1; color: #333; }
.odisei-notify-modal__content h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: #111; }
.odisei-notify-modal__subtitle { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #444; }
.odisei-notify-modal__form input[type="email"] { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 16px; font-size: 16px; box-sizing: border-box; }
.odisei-notify-modal__legal { font-size: 13px; color: #888; line-height: 1.5; margin: 0 0 16px; }
.odisei-notify-modal__legal a { color: #888; text-decoration: underline; }
.odisei-notify-modal__legal a:hover { color: #555; }
.odisei-notify-modal__submit { width: 100%; background: #0218A0; color: #fff; padding: 16px; border: none; border-radius: 999px; font-weight: 600; cursor: pointer; margin-top: 4px; font-size: 16px; letter-spacing: .3px; }
.odisei-notify-modal__submit:hover { background: #01107F; }
.odisei-notify-modal__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.odisei-notify-modal__feedback { margin-top: 16px; padding: 12px; border-radius: 6px; font-size: 14px; }
.odisei-notify-modal__feedback--success { background: #d4edda; color: #155724; }
.odisei-notify-modal__feedback--error { background: #f8d7da; color: #721c24; }

/* Odisei patch: US welcome modal (H6 - 13/05/2026) */
.odisei-us-welcome-modal[hidden] { display: none; }
.odisei-us-welcome-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.odisei-us-welcome-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.odisei-us-welcome-modal__content { position: relative; background: #fff; padding: 40px 32px 32px; max-width: 500px; width: calc(100% - 32px); border-radius: 12px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.odisei-us-welcome-modal__flag { font-size: 48px; margin-bottom: 16px; }
.odisei-us-welcome-modal__content h2 { margin: 0 0 16px; font-size: 28px; font-weight: 700; color: #111; }
.odisei-us-welcome-modal__content p { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: #444; }
.odisei-us-welcome-modal__primary { display: block; width: 100%; background: #006F5A; color: #fff; padding: 16px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-bottom: 12px; box-sizing: border-box; text-align: center; font-size: 16px; }
.odisei-us-welcome-modal__primary:hover { background: #005a49; }
.odisei-us-welcome-modal__secondary { display: block; width: 100%; background: none; border: none; color: #666; padding: 12px; font-size: 14px; text-decoration: underline; cursor: pointer; }
.odisei-us-welcome-modal__close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 28px; cursor: pointer; width: 36px; height: 36px; line-height: 1; color: #333; }



/* Odisei patch (temporary, ends 2026-06-07): clarinet-bundle promo styles —
   countdown banner + EUR-off PDP image badge. Scoped via the `odisei-countdown`
   / `odisei-pdp-badge` markup (gated on product.handle in main-product.liquid
   and product-media-gallery.liquid). Delete this whole block when the promo ends. */

/* PDP image badge, top-left of <media-gallery>. <media-gallery> is already
   position:relative in the theme, so absolute positioning anchors here. */
.odisei-pdp-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  background-color: #0218A0; /* Odisei brand blue */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 999px;
  pointer-events: none;
}

/* Countdown banner — slim horizontal bar placed between product title and the
   Klarna installments widget. Light bg + brand-blue accents so it stays visible
   without competing with the primary Add-to-Cart fill. Inherits theme heading
   font for the numbers so the typography matches the rest of the brand. */
.odisei-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 1rem;
  padding: 0.625rem 0.875rem;
  background-color: #ffffff;
  color: #111111;
  border: 1px solid rgba(2, 24, 160, 0.18);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.odisei-countdown__copy {
  display: inline-flex;
  flex-direction: column;
  gap: 0.0625rem;
  line-height: 1.15;
}
.odisei-countdown__title {
  font-family: var(--font-heading-family, inherit);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0218A0;
}
.odisei-countdown__subtitle {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #4b5563;
}
.odisei-countdown__timer {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4375rem;
}
.odisei-countdown__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2rem;
}
.odisei-countdown__num {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #0218A0;
}
.odisei-countdown__label {
  margin-top: 0.1875rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.odisei-countdown__sep {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding-top: 0.1875rem;
  color: rgba(2, 24, 160, 0.45);
}
.odisei-countdown[hidden] { display: none; }
@media (max-width: 600px) {
  .odisei-countdown {
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.75rem;
  }
  .odisei-countdown__copy {
    align-items: center;
  }
  .odisei-countdown__title { font-size: 0.8125rem; }
  .odisei-countdown__subtitle { font-size: 0.625rem; }
  .odisei-countdown__num { font-size: 1.125rem; }
  .odisei-countdown__unit { min-width: 1.75rem; }
  .odisei-countdown__sep { font-size: 0.875rem; }
  .odisei-countdown__label { font-size: 0.5rem; }
}

/* Floating bundle CTA widget — fixed bottom-right glass card on
   /pages/travel-clarinet (inclusion gated in layout/theme.liquid). Inspired
   by the Telepathic Instruments bottom-right block. Stays visible on scroll
   thanks to position:fixed. Self-disposes when the timer hits zero (JS adds
   the [hidden] attribute on the same element). */
.odisei-floating-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40; /* below the cart drawer (z-35 + overlay) once the drawer opens, above page content */
  width: min(320px, calc(100vw - 1.5rem));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  color: #ffffff;
  background-color: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
  font-family: var(--font-body-family, inherit);
  line-height: 1.2;
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.odisei-floating-cta[hidden] { display: none; }
.odisei-floating-cta__head {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.odisei-floating-cta__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background-color: rgba(2, 24, 160, 0.85);
  border-radius: 999px;
}
.odisei-floating-cta__title {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.odisei-floating-cta__components {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}
.odisei-floating-cta__timer {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
}
.odisei-floating-cta__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2rem;
}
.odisei-floating-cta__num {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #ffffff;
}
.odisei-floating-cta__ulabel {
  margin-top: 0.1875rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.odisei-floating-cta__sep {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding-top: 0.125rem;
  color: rgba(255, 255, 255, 0.4);
}
.odisei-floating-cta__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.odisei-floating-cta__strike {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
}
.odisei-floating-cta__now {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}
.odisei-floating-cta__save {
  margin-left: auto;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background-color: rgba(2, 24, 160, 0.95);
  border-radius: 999px;
}
.odisei-floating-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.odisei-floating-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  font-family: inherit;
  line-height: 1;
}
.odisei-floating-cta__btn--primary {
  color: #ffffff;
  background-color: #0218A0;
}
.odisei-floating-cta__btn--primary:hover,
.odisei-floating-cta__btn--primary:focus-visible {
  background-color: #021480;
}
.odisei-floating-cta__btn--primary[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.odisei-floating-cta__btn--secondary {
  color: #ffffff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.odisei-floating-cta__btn--secondary:hover,
.odisei-floating-cta__btn--secondary:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.85);
  color: #ffffff;
}
/* Mobile fade-out — JS adds [data-faded="true"] 5s after the first scroll on
   mobile, which transitions the widget to opacity 0 + slight downward shift,
   then `hidden` is set to remove it from layout entirely. Desktop never fades. */
.odisei-floating-cta[data-faded="true"] {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

@media (max-width: 480px) {
  .odisei-floating-cta {
    right: 0.75rem;
    bottom: 0.75rem;
    width: min(280px, calc(100vw - 1.25rem));
    padding: 0.875rem 1rem;
    gap: 0.625rem;
    border-radius: 16px;
  }
  .odisei-floating-cta__title { font-size: 1rem; }
  .odisei-floating-cta__num { font-size: 1.0625rem; }
  .odisei-floating-cta__unit { min-width: 1.75rem; }
  .odisei-floating-cta__sep { font-size: 0.875rem; }
  .odisei-floating-cta__btn { padding: 0.5625rem 0.875rem; font-size: 0.75rem; }
}


/* Odisei patch: hide Judge.me reviews under 4 stars (only show 4-5 star) */
/* Standard review-list widget rows expose the score directly. */
.jdgm-rev[data-score="1"],
.jdgm-rev[data-score="2"],
.jdgm-rev[data-score="3"] {
  display: none !important;
}
/* Reviews "Cards Carousel": cards have no score attribute, the rating is the
   rendered 5-star row (spans .jdgm--on / .jdgm--half / .jdgm--off). A card is
   under 4 stars exactly when its 4th star is not fully "on". :has() applies the
   instant the card renders, so no flash of low-rated reviews. */
.jdgm-card:has(.jdgm-stars .jdgm-star:nth-child(4):not(.jdgm--on)),
.jdgm-media-card:has(.jdgm-stars .jdgm-star:nth-child(4):not(.jdgm--on)) {
  display: none !important;
}



/* ============================================================
   Odisei patch: H6 hero slider — social proof pill + subheading
   Used inside sections/slideshow-hero.liquid (class "hero-section").
   Pill: translucent white on dark video, neutral so it doesn't
   compete with the Odisei-blue CTA.
   v3 (2026-05-29): pill content aligned with H1 first letter
   (margin-left offsets the pill's own left padding), tighter
   spacing between pill/H1/sub, narrower subheading max-width so
   sentence wraps to 2 balanced lines.
   ============================================================ */
.hero-section .hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0 0.625rem 0;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
/* Odisei patch: H6 hero slider — v5 alignment. Zero out banner__box's
   vendor-default left padding so the H1 first letter, pill outer edge, and
   CTA outer edge all share the same X (the slideshow-word left edge).
   Without this, the H1 was inset by banner__box's padding while pill and
   CTA sat flush at the parent edge. */
.hero-section .slideshow-word .banner__box {
  padding-left: 0;
  padding-right: 0;
}
.hero-section .hero-social-proof__icon {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
  color: #ffffff;
}
.hero-section .hero-subheading {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0.625rem 0 0 0;
  max-width: 26ch;
}
/* Odisei patch: H6 hero slider — broader/clickable CTA. Vendor `button--blur`
   class lives on the hero CTA (rendered via the `button` snippet with
   classes "button--blur button--fixed pointer-events-auto"). Slight padding
   bump + weight bump makes the CTA feel like a primary action without
   blowing it out of proportion. */
.hero-section .button--blur {
  padding-inline: 2rem;
  padding-block: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Odisei patch: H6 hero slider — smoother claim animation. Vendor uses
   <split-words data-animate="fade-up-large"> with the default vendor
   transition timing (snappy ~400ms). Bumped to 800ms with an ease-out-expo
   curve for a smoother landing. Cadence unchanged (still rises from below
   and exits above). */
.hero-section .split-words,
.hero-section .split-words > *,
.hero-section [data-animate^="fade-up"] {
  transition-duration: 800ms !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation-duration: 800ms !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@media (max-width: 767px) {
  .hero-section .hero-social-proof {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    margin: 0 0 0.5rem 0;
  }
  .hero-section .hero-subheading {
    font-size: 0.9375rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    max-width: 24ch;
  }
  .hero-section .button--blur {
    padding-inline: 1.75rem;
    padding-block: 0.8125rem;
  }
}

/* ==========================================================================
   Odisei patch: B2B stacked-list collection view (2026-06-05)
   Appended to assets/odisei-patches.css. Paired with
   snippets/odisei-b2b-collection-list.liquid + the "B2B collection list" IIFE
   in odisei-patches.js. Only renders for logged-in B2B (company) customers.
   ========================================================================== */

.odisei-b2b-list {
  --b2b-border: rgba(0, 0, 0, 0.1);
  --b2b-muted: rgba(0, 0, 0, 0.55);
  width: 100%;
  border: 1px solid var(--b2b-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Shared column grid for header + rows */
.odisei-b2b-list__head,
.odisei-b2b-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 110px 132px 120px;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
}

.odisei-b2b-list__head {
  background: #f7f7f8;
  border-bottom: 1px solid var(--b2b-border);
  padding-top: 10px;
  padding-bottom: 10px;
}

.odisei-b2b-list__h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--b2b-muted);
}
.odisei-b2b-list__h--price,
.odisei-b2b-list__h--qty,
.odisei-b2b-list__h--add { text-align: center; }
.odisei-b2b-list__h--price { text-align: right; }

.odisei-b2b-row {
  border-bottom: 1px solid var(--b2b-border);
  transition: background-color 0.12s ease;
}
.odisei-b2b-row:last-child { border-bottom: 0; }
.odisei-b2b-row:hover { background: #fafafa; }

/* 1. Product cell */
.odisei-b2b-row__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.odisei-b2b-row__media {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border: 1px solid var(--b2b-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.odisei-b2b-row__media img { width: 100%; height: 100%; object-fit: contain; }
.odisei-b2b-row__media-empty { opacity: 0.35; }
.odisei-b2b-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odisei-b2b-row__title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.odisei-b2b-row__title:hover { text-decoration: underline; }
.odisei-b2b-row__sku { font-size: 12px; color: var(--b2b-muted); font-variant-numeric: tabular-nums; }
.odisei-b2b-row__sku:empty { display: none; }

/* 2. Variant select */
.odisei-b2b-row__variant { min-width: 0; }
.odisei-b2b-select-wrap { position: relative; display: flex; align-items: center; }
.odisei-b2b-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 30px 8px 12px;
  font-size: 14px;
  border: 1px solid var(--b2b-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  line-height: 1.2;
}
.odisei-b2b-select:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.odisei-b2b-select-wrap .icon {
  position: absolute; right: 10px; top: 50%;
  /* rotate 180deg so the caret points down (theme's caret defaults to up) */
  transform: translateY(-50%) rotate(180deg);
  pointer-events: none; width: 12px; height: 12px;
}
.odisei-b2b-row__single-option { font-size: 14px; color: var(--b2b-muted); }

/* 3. Price */
.odisei-b2b-row__price {
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 4. Quantity stepper */
.odisei-b2b-row__qty { display: flex; justify-content: center; }
.odisei-b2b-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--b2b-border);
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
}
.odisei-b2b-qty__btn {
  width: 36px; height: 100%;
  border: 0; background: #fff; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.12s ease;
}
.odisei-b2b-qty__btn:hover { background: #f0f0f0; }
.odisei-b2b-qty__input {
  width: 48px; height: 100%;
  border: 0;
  border-left: 1px solid var(--b2b-border);
  border-right: 1px solid var(--b2b-border);
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  -moz-appearance: textfield;
}
.odisei-b2b-qty__input::-webkit-outer-spin-button,
.odisei-b2b-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 5. Add button */
.odisei-b2b-row__add { display: flex; justify-content: center; }
.odisei-b2b-add {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.odisei-b2b-add[disabled] { opacity: 0.45; cursor: not-allowed; }
.odisei-b2b-add[data-state="added"] { pointer-events: none; }

/* Mobile: collapse columns into a card per product (Santa Helena bp = 749px) */
@media (max-width: 749px) {
  .odisei-b2b-list__head { display: none; }
  .odisei-b2b-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "product product"
      "variant variant"
      "price   qty"
      "add     add";
    gap: 12px;
    padding: 16px;
  }
  .odisei-b2b-row__product { grid-area: product; }
  .odisei-b2b-row__variant { grid-area: variant; }
  .odisei-b2b-row__variant:empty { display: none; }
  .odisei-b2b-row__price { grid-area: price; text-align: left; align-self: center; font-size: 17px; }
  .odisei-b2b-row__qty { grid-area: qty; justify-content: flex-end; }
  .odisei-b2b-row__add { grid-area: add; }
  .odisei-b2b-row__single-option:empty { display: none; }
}

/* Odisei patch (summer promo, live window 2026-06-19 to 2026-06-28; draft preview window starts 2026-06-09):
   Travel Sax 2 Yellow Camel summer-deal styles. Sunny yellow to coral palette for the Yellow Camel +
   summer vibe, deliberately distinct from the brand-blue clarinet promo styles above.
   .odisei-summer-cd        -> clickable countdown card (PDP, between title/price and the rest)
   .odisei-pdp-badge--summer -> warm modifier on the PDP image badge ("90 Euro Off")
   Delete this whole block when the promo ends. */

/* Warm summer variant of the PDP image badge (base .odisei-pdp-badge defined above). */
.odisei-pdp-badge--summer {
  background-color: #0218A0; /* corporate blue, contrasts the warm imagery without the alarming red */
  background-image: none;
  color: #ffffff;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(2, 24, 160, 0.32);
}

/* Clickable summer countdown card. */
.odisei-summer-cd {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.875rem 0 1rem;
  padding: 0.75rem 1rem;
  overflow: hidden;
  text-decoration: none;
  color: #3a230a;
  background-color: #ffd05c; /* solid summer yellow, matches the header banner */
  background-image: none;
  border: 1px solid rgba(214, 120, 40, 0.35);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(214, 120, 40, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.odisei-summer-cd:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(214, 120, 40, 0.33);
}
.odisei-summer-cd[hidden] { display: none; }

/* sun-glow accent, top-right corner */
.odisei-summer-cd::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.odisei-summer-cd__info {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  line-height: 1.15;
  z-index: 1;
}
.odisei-summer-cd__eyebrow {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #13163D;
}
.odisei-summer-cd__title {
  font-family: var(--font-heading-family, inherit);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #3a230a;
}
.odisei-summer-cd__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.0625rem;
}
.odisei-summer-cd__now {
  font-family: var(--font-heading-family, inherit);
  font-size: 1rem;
  font-weight: 800;
  color: #13163D;
}
.odisei-summer-cd__was {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(58, 35, 10, 0.55);
  text-decoration: line-through;
}
.odisei-summer-cd__timer {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  z-index: 1;
}
.odisei-summer-cd__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.25rem;
  padding: 0.25rem 0.125rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
}
.odisei-summer-cd__num {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #3a230a;
}
.odisei-summer-cd__lbl {
  margin-top: 0.1875rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #13163D;
}
.odisei-summer-cd__sep {
  align-self: center;
  padding-top: 0.125rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(58, 35, 10, 0.4);
}
.odisei-summer-cd__cta {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0218A0;
  z-index: 1;
}
.odisei-summer-cd__cta::after {
  content: "\2192";
  font-weight: 700;
}
@media (max-width: 600px) {
  .odisei-summer-cd { padding: 0.625rem 0.75rem; }
  .odisei-summer-cd__title { font-size: 0.9375rem; }
  .odisei-summer-cd__unit { min-width: 2rem; }
  .odisei-summer-cd__num { font-size: 1rem; }
}



/* Odisei patch (summer promo, live window 2026-06-19 to 2026-06-28; draft preview window starts 2026-06-09):
   Yellow Camel summer modifier for the floating CTA on /pages/travel-sax. Reuses the
   .odisei-floating-cta base (positioning, timer, fade-out) and recolors it into the warm
   sunny yellow->coral palette (matching .odisei-summer-cd), with dark text and a single
   coral "GET NOW" link button. Delete this block when the promo ends. */
.odisei-floating-cta--summer {
  color: #3a230a;
  background-color: rgba(255, 240, 205, 0.92); /* fallback */
  background-image: linear-gradient(150deg, rgba(255, 224, 138, 0.96) 0%, rgba(255, 194, 77, 0.96) 48%, rgba(251, 154, 75, 0.96) 100%);
  border: 1px solid rgba(214, 120, 40, 0.45);
  box-shadow: 0 20px 40px rgba(214, 120, 40, 0.30), 0 1px 2px rgba(120, 60, 10, 0.18);
}
.odisei-floating-cta--summer .odisei-floating-cta__eyebrow {
  color: #ffffff;
  background-color: #13163D;
}
.odisei-floating-cta--summer .odisei-floating-cta__title { color: #3a230a; }
.odisei-floating-cta--summer .odisei-floating-cta__components { color: rgba(58, 35, 10, 0.72); }
.odisei-floating-cta--summer .odisei-floating-cta__num { color: #3a230a; }
.odisei-floating-cta--summer .odisei-floating-cta__ulabel { color: #13163D; }
.odisei-floating-cta--summer .odisei-floating-cta__sep { color: rgba(58, 35, 10, 0.4); }
.odisei-floating-cta--summer .odisei-floating-cta__strike { color: rgba(58, 35, 10, 0.55); }
.odisei-floating-cta--summer .odisei-floating-cta__now { color: #13163D; }
.odisei-floating-cta--summer .odisei-floating-cta__save {
  color: #ffffff;
  background-color: #13163D;
}
.odisei-floating-cta--summer .odisei-floating-cta__btn--primary {
  color: #ffffff;
  background-color: #0218A0;
}
.odisei-floating-cta--summer .odisei-floating-cta__btn--primary:hover,
.odisei-floating-cta--summer .odisei-floating-cta__btn--primary:focus-visible {
  background-color: #01137a;
}

/* Odisei patch (summer promo, live window 2026-06-19 to 2026-06-28; draft preview window starts 2026-06-09):
   site-wide promo announcement bar above the main header (Loop-earplugs style). Warm summer gradient,
   shared countdown + two click-oriented CTAs. Delete this block when the promo ends. */
.odisei-promo-bar {
  width: 100%;
  position: sticky;
  inset-block-start: 0;
  z-index: 30; /* above the sticky header (z-20) so the bar stays pinned on top */
  color: #13163D;
  background-color: #ffd05c; /* solid summer yellow, no gradient */
  background-image: none;
  font-family: var(--font-body-family, inherit);
  line-height: 1.2;
}
.odisei-promo-bar[hidden] { display: none; }
/* Push the sticky main header down by the bar's height so the bar sits ON TOP without
   covering ("eating") the header. --odisei-promo-bar-h is measured by the snippet's
   inline script (0 when the bar is hidden/absent, so these become the theme default). */
.header-sticky,
.header-transparent.header-scrolled .header {
  inset-block-start: var(--odisei-promo-bar-h, 0px);
}
.odisei-promo-bar__inner {
  max-width: var(--page-width, 1280px);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.odisei-promo-bar__deal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
}
.odisei-promo-bar__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #13163D;
}
.odisei-promo-bar__timer {
  display: inline-flex;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
  color: #13163D;
}
.odisei-promo-bar__td b { font-weight: 800; }
.odisei-promo-bar__ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.odisei-promo-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  background-color: #0218A0;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.odisei-promo-bar__cta b { font-weight: 800; }
.odisei-promo-bar__cta:hover,
.odisei-promo-bar__cta:focus-visible {
  background-color: #01137a;
  transform: translateY(-1px);
}
/* Responsive CTA labels: full wording on desktop, compact on phones (avoids the bar
   wrapping/stacking on narrow screens). The short variant is the default-hidden one. */
.odisei-promo-bar__cta-short { display: none; }
@media (max-width: 749px) {
  .odisei-promo-bar__inner { gap: 0.4rem 0.75rem; padding: 0.45rem 0.75rem; }
  .odisei-promo-bar__deal { width: 100%; justify-content: center; font-size: 0.75rem; }
  .odisei-promo-bar__cta { font-size: 0.75rem; padding: 0.28rem 0.65rem; }
  .odisei-promo-bar__cta-full { display: none; }
  .odisei-promo-bar__cta-short { display: inline; }
}
/* Odisei patch (2026-07-21): hide WELCOME10 Klaviyo popup (form R2wYZK) for logged-in B2B. */
body.odisei-b2b .klaviyo-form-R2wYZK { display: none !important; }
/* Odisei patch (2026-07-29): hide Klaviyo AI chat widget for logged-in B2B customers. */
body.odisei-b2b .kl-hub-launcher { display: none !important; }
/* Odisei patch (2026-07-31): hide the bare instruments from the B2B reorder list so wholesale
   buyers order the "(1 Free Accessory Pack)" bundles instead. Cosmetic only, the products stay
   published and purchasable via direct link; for a real restriction unpublish them from the
   catalog (see ops/b2b/b2b-only-products.md). Applies to EVERY B2B catalog.
   Hook is data-url on the row, set from {{ product.url }} in snippets/odisei-b2b-row.liquid.
   `$=` (ends-with) so the accessory packs and the free-pack bundles are not matched. */
.odisei-b2b-row[data-url$="/products/travel-sax-2"],
.odisei-b2b-row[data-url$="/products/travel-clarinet"] { display: none !important; }



/* Odisei patch (2026-07-30): the Selleasy (lb-upsell) app embed injects
   [class*="subtitle"],[class*="description"],[class*="offer-header"] p { color:#333 !important }
   into <head> at runtime, which lands on the theme's .subtitle-* eyebrows and .description
   subtitles store-wide and renders them ~1.4:1 on our black sections. Re-pin each to its own
   section foreground so it is correct on dark AND light sections. Selectors are >= 0,2,0 vs the
   app's 0,1,0, so specificity wins regardless of stylesheet order. Remove once Selleasy's custom
   CSS is scoped to its own widget root (Apps -> Selleasy -> settings). */
.banner__subheading[class*="subtitle"],
p.heading[class*="subtitle"],
.title-wrapper .description[class*="description"],
.description[class*="description"],
.rte[class*="subtitle"] {
  color: rgb(var(--color-foreground)) !important;
}


/* Odisei patch (2026-07-30 b, narrowed 2026-08-28): eyebrows read grayer, not pure white (Kim).
   Overrides the re-pin above for the subtitle-class eyebrow only; section subtitles (.description)
   keep the adaptive foreground.

   2026-08-28: .banner__subheading dropped from this list. Banner eyebrows sit on the hero video /
   image, where the backdrop is not a flat dark ground: on the bright pavement frames of the
   homepage hero video #A5A5A5 measures ~1.1:1 and the line disappears (Notion "Minor Shopify
   Tweaks" > UX). Banner eyebrows now fall through to the re-pin above, which resolves to the
   section's own --color-foreground (white on the dark hero, dark on a light banner). Eyebrows on
   flat sections keep Kim's grey.

   Note the :not() rather than just dropping .banner__subheading from the list. The hero eyebrow is
   <p class="banner__subheading heading ... subtitle-md">, so it matches p.heading[class*="subtitle"]
   too; removing only the first selector changes nothing. */
p.heading[class*="subtitle"]:not(.banner__subheading),
.rte[class*="subtitle"]:not(.banner__subheading) {
  color: #A5A5A5 !important;
}


/* ==========================================================================
   Odisei patch (Odisei Play PRO launch offer, visible 2026-08-14 -> 2026-08-31,
   countdown runs to 2026-09-14).

   Flat brand blue, no gradients (Mario, 2026-08-14). Brand blue #0218A0 is the
   card ground here rather than a CTA colour, so the CTA inverts to bone/navy to
   stay the highest-contrast element on the card.

     .odisei-op-cd              -> inline bar under the PDP price (TS2 + bundles)
     .odisei-floating-cta--op   -> flat-blue modifier on the floating landing card

   Markup: snippets/odisei-op-pro-promo.liquid. Delete this whole block after
   2026-08-31, together with the snippet and its two includes.
   ========================================================================== */

/* ---- shared tokens ---- */
:root {
  --odisei-op-blue: #0218A0;
  --odisei-op-blue-tile: rgba(255, 255, 255, 0.14);
  --odisei-op-bone: #F2F0EB;
  --odisei-op-ink: #13163D;
}

/* ---- PDP inline bar ---- */
.odisei-op-cd {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem 1.25rem;
  margin: 0.875rem 0 1rem;
  padding: 1rem 1.125rem;
  text-decoration: none;
  color: #ffffff;
  background-color: var(--odisei-op-blue);
  background-image: none;
  border: 0;
  border-radius: 14px;
  transition: background-color 0.18s ease;
}
.odisei-op-cd:hover,
.odisei-op-cd:focus-visible {
  background-color: #011484;
}
.odisei-op-cd[hidden] { display: none; }

.odisei-op-cd__info {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  line-height: 1.2;
}
.odisei-op-cd__eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.odisei-op-cd__title {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.odisei-op-cd__sub {
  max-width: 34ch;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}
/* Timer + CTA travel together: side by side when the bar is wide, stacked full
   width under the copy in a narrow PDP column (which is the usual case, the
   Santa Helena product column is ~490px). */
.odisei-op-cd__aside {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.odisei-op-cd__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.5rem 0.9375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--odisei-op-ink);
  background-color: var(--odisei-op-bone);
  border-radius: 10px; /* squared off vs the theme's pill buttons, matches the timer tiles */
  transition: background-color 0.18s ease;
}
.odisei-op-cd:hover .odisei-op-cd__cta,
.odisei-op-cd:focus-visible .odisei-op-cd__cta {
  background-color: #ffffff;
}

.odisei-op-cd__timer {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.odisei-op-cd__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 3rem;
  padding: 0.4375rem 0.375rem;
  background-color: var(--odisei-op-blue-tile);
  border-radius: 10px;
}
.odisei-op-cd__num {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #ffffff;
}
.odisei-op-cd__lbl {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.odisei-op-cd__sep {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 700px) {
  .odisei-op-cd {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }
  .odisei-op-cd__title { font-size: 1.0625rem; }
  .odisei-op-cd__sub { font-size: 0.78125rem; }
  .odisei-op-cd__aside {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .odisei-op-cd__timer { justify-content: space-between; gap: 0.1875rem; }
  .odisei-op-cd__unit { flex: 1 1 0; min-width: 0; }
  .odisei-op-cd__num { font-size: 1.125rem; }
  .odisei-op-cd__cta { padding: 0.625rem 0.9375rem; font-size: 0.8125rem; }
}

/* ---- floating landing card (flat-blue modifier on .odisei-floating-cta) ---- */
.odisei-floating-cta--op {
  color: #ffffff;
  background-color: var(--odisei-op-blue);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: 0 18px 36px rgba(2, 24, 160, 0.28);
  /* Lifted clear of the support/chat launcher, which sits bottom-right at the
     base 1rem offset and otherwise covers the right end of the CTA. */
  bottom: 6rem;
}
.odisei-floating-cta--op .odisei-floating-cta__eyebrow {
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  background-color: transparent;
  border-radius: 0;
  letter-spacing: 0.12em;
}
.odisei-floating-cta--op .odisei-floating-cta__title { color: #ffffff; font-size: 1.125rem; }
.odisei-floating-cta--op .odisei-floating-cta__components { color: rgba(255, 255, 255, 0.82); }
.odisei-floating-cta--op .odisei-floating-cta__timer { gap: 0.25rem; }
.odisei-floating-cta--op .odisei-floating-cta__unit {
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 0;
  padding: 0.4375rem 0.25rem;
  background-color: var(--odisei-op-blue-tile);
  border-radius: 10px;
}
.odisei-floating-cta--op .odisei-floating-cta__num { font-size: 1.125rem; font-weight: 800; }
.odisei-floating-cta--op .odisei-floating-cta__ulabel {
  margin-top: 0;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.odisei-floating-cta--op .odisei-floating-cta__sep {
  padding-top: 0;
  color: rgba(255, 255, 255, 0.38);
}
.odisei-floating-cta--op .odisei-floating-cta__btn--primary {
  color: var(--odisei-op-ink);
  background-color: var(--odisei-op-bone);
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  border-radius: 10px; /* base is a 999px pill; squared off to match the timer tiles */
}
.odisei-floating-cta--op .odisei-floating-cta__btn--primary:hover,
.odisei-floating-cta--op .odisei-floating-cta__btn--primary:focus-visible {
  background-color: #ffffff;
}

@media (max-width: 480px) {
  .odisei-floating-cta--op { bottom: 5.25rem; }
}


/* ==========================================================================
   Odisei patch (2026-08-28): header language / country dropdown anchoring.

   santahelena.css ships

     .header-section .dropdown,
     .header-section .mega-menu__list { left:24px !important; right:24px !important; width:auto !important }

   which is meant for the full-bleed mega menu but also catches the localization
   dropdown in the header. The panel was stretched to the full header width, so on
   a 1440px viewport the "English" trigger sits at x=1224 while the language links
   render at x=48, ~1176px away: click the selector, then travel to the opposite
   side of the screen to pick a language (Notion "Minor Shopify Tweaks" > UX).

   Anchor the panel to its own trigger instead. `position: relative` on the <li>
   makes it the containing block (it was the <header>), then right:0 aligns the
   panel's right edge with the trigger's. max-width is re-pinned because
   `max-w-full` on the panel would otherwise resolve against the ~50px trigger.
   Scoped to .localization inside .header__menu, so the mega menu, the nav
   dropdowns, and the topbar / footer selectors are untouched.
   ========================================================================== */
.header-section .header__menu .localization { position: relative; }

.header-section .header__menu .localization > details > .dropdown {
  left: auto !important;
  right: 0 !important;
  width: max-content !important;
  max-width: min(90vw, 320px) !important;
  margin-inline-start: 0 !important;
}


/* ==========================================================================
   Odisei patch (2026-09-02): mobile PDP buy-path unblock.

   Measured on a 390x844 iPhone viewport against the two Back to School hero
   PDPs (travel-sax-2-music-bundle, travel-clarinet-music-bundle) while the
   1-15 Sept campaign was live. In the campaign's first two days those two
   pages took ~1,900 visitors, 10 add-to-carts and 0 checkouts, and Shopify
   recorded no Music Bundle sale at all.

   Cause: document.elementFromPoint() at the centre of the sticky Add to Cart
   returned the Klaviyo Hub widget, not the button. The Hub launcher is
   position:fixed at z-index 2147483646 (max int - 1) and lands on the same
   bottom strip as .product-sticky-form (z-index 20), so on mobile the tap
   never reached the theme's own buy button. Accepting the cookie banner did
   not help; only removing the Hub restored reachesATC: true.
   ========================================================================== */

/* 1. Keep the Klaviyo Hub off product pages, where it covers the buy bar and
      renders a second, competing "Add To Cart" card. Delete these two
      selectors to bring the Hub back. */
body.template-product .kl-hub-launcher-container,
body.template-product [class*="HubLauncher"],
body.template-product [class*="kl-hub"],
body.template-product [id*="klaviyo-hub"],
body.template-product klaviyo-hub {
  display: none !important;
}

/* 2. Lift the sticky buy bar above any remaining third-party overlay, while
      staying below Shopify's consent banner (z-index 2000000) so the cookie
      choice is never covered. */
.product-sticky-form {
  z-index: 1000000 !important;
}

/* 3. Mobile: the in-page Add to Cart sat at y=1456px - 1.7 screens down,
      behind a 256px description and a 90px app block. Reorder the info
      column so price, offer, variant picker and Add to Cart come first and
      the prose follows. Desktop is untouched. */
@media (max-width: 749px) {
  .product__info { display: flex; flex-direction: column; }
  .product__info > * { order: 7; }
  .product__info > .product__title { order: 1; }
  .product__info > .odisei-b2s-cd { order: 2; }
  .product__info > variant-picker { order: 3; }
  .product__info > .product-form-wrapper { order: 4; }
  .product__info > .product__inventory { order: 5; }
  .product__info > .product__text.rte { order: 6; }
}

/* 4. Sold-out colour swatches on the Travel Sax 2 Music Bundle (9995596955976).
      The theme tags them class="sr-only disabled" but leaves them clickable,
      which is where 44 of the 80 rage clicks on the sax PDPs landed. Hiding is
      driven by that class, so a restock brings the swatch back on its own with
      no further edit. All variants are inventoryPolicy DENY + tracked, so
      nothing becomes oversellable. */
/* The swatch lives in its own <li>; hiding just the <magnet-element> left that
   li's list gap behind, so a sold-out colour still read as an empty slot —
   measured pitch 64px against a normal 32px. Hide the li. Direct-child form so
   :has() cannot match an outer li and take the whole picker down with it. */
li:has(> magnet-element > input.disabled[id*="9995596955976"]) {
  display: none !important;
}
/* Odisei patch (2026-09-02): compact the Shopify consent banner on mobile.
   Measured 413px of an 844px viewport (48%). The height is content-driven,
   not position-driven, so the admin Position picker cannot fix it: a 118px
   paragraph plus three stacked buttons (32+50+50 plus gaps = 180px).
   All three controls stay visible and tappable — Accept and Decline just
   share a row, and the body copy tightens. Nothing is hidden. */
@media (max-width: 749px) {
  .shopify-pc__banner__dialog { padding: 14px 16px !important; }
  .shopify-pc__banner__dialog h2 { font-size: 15px !important; margin-bottom: 4px !important; }
  .shopify-pc__banner__dialog p { font-size: 12.5px !important; line-height: 1.35 !important; }
  .shopify-pc__banner__btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .shopify-pc__banner__btn-accept,
  .shopify-pc__banner__btn-decline {
    padding: 13px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
  }
  .shopify-pc__banner__btn-manage-prefs {
    grid-column: 1 / -1 !important;
    order: 2 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    min-height: 32px !important;
  }
}
/* ── Banner de consentimiento: centrarlo y exigir respuesta ───────────────────
   Odisei Music · preparado 2026-09-10 · pendiente de pegar en MAIN

   Por qué: el banner de Shopify sale a 480x348 en la esquina inferior izquierda
   y no bloquea nada — se puede navegar, añadir al carrito y pagar sin verlo. Sin
   respuesta no hay consentimiento, sin consentimiento Shopify no escribe
   _shopify_y/_shopify_s, y el pedido llega sin sesión, sin origen y sin UTM.

   Shopify lo pinta como .shopify-pc__banner__dialog, position:fixed y en el DOM
   normal (no shadow DOM), así que basta CSS del tema.

   Tres trampas, las tres comprobadas contra la tienda el 2026-09-10 con Chrome
   headless por CDP. Si tocas esto, vuelve a comprobarlas:

   1. El velo NO puede ir en body:has(.shopify-pc__banner__dialog). Al aceptar,
      Shopify no borra el diálogo: lo deja con display:none. El :has() seguiría
      casando y la web entera se quedaría sin clics. Va en un pseudo-elemento del
      propio diálogo, que muere con él.
   2. Ese pseudo no puede usar inset:0. El diálogo lleva transform, así que es el
      contenedor de sus descendientes fixed y un inset:0 se queda del tamaño del
      banner. De ahí el desbordamiento en vmax.
   3. El diálogo trae overflow:auto de serie, que recorta el pseudo. Hay que
      ponerlo en visible o el velo no se ve. */

.shopify-pc__banner__dialog{
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:min(560px, calc(100vw - 32px)) !important;
  max-width:none !important;
  overflow:visible !important;   /* si no, recorta el velo */
  z-index:2000000 !important;
}

.shopify-pc__banner__dialog::before{
  content:"";
  position:fixed;
  inset:-200vmax;                /* cubre la ventana desde el propio diálogo */
  z-index:-1;                    /* detrás del banner, delante de la página */
  background:rgba(0,0,0,.55);
}

/* Aceptar y Rechazar con el mismo peso visual: rechazar tiene que costar lo
   mismo que aceptar. Sin esto salen 109px y 113px con estilos distintos. */
.shopify-pc__banner__btn-accept,
.shopify-pc__banner__btn-decline{
  flex:1 1 0 !important;
}4

/* Odisei patch (OP hero badge): the Odisei Play badge names two instrument
   families, so it is ~40% longer than the Travel Sax / Travel Clarinet one.
   The theme sets `white-space: nowrap` on .hero-social-proof, which pushed the
   pill to 363px inside a 390px viewport and gave the page a horizontal scroll.
   Let it wrap on narrow screens. Scoped by the section id suffix so the
   reference heroes keep their single-line pill. */
@media (max-width: 560px) {
  [id$="__slideshow_hero_op"] .hero-social-proof {
    white-space: normal;
    max-width: 100%;
  }
}

/* Odisei patch (OP hero centring, 2026-09-14): on mobile the hero read as
   left-aligned and sat 20px right of centre. Measured at 390px over CDP, the
   DOM is three deep and each level broke it differently:

     nav.slideshow-words   grid, padding-left:1.25rem, text-align:start   w=358
      +- div.slideshow-word  flex, flex-direction:column, items-start      w=358
          +- a.button         flex                                        w=192

   1. .slideshow-words carried padding-left:1.25rem against padding-right:0,
      so every line sat 20px right of centre. That padding also squeezed the
      h1 (min-content 356.2px) into a 338px box, overflowing it by ~18px and
      giving the document a 2px horizontal scroll. Zeroing it gives the h1 the
      full 358px, so it fits and the overflow goes with it.
   2. text-align:start ran the copy left.
   3. .slideshow-word is a COLUMN FLEX with align-items:flex-start, which pins
      every child to the left edge. The h1, badge and subheading only looked
      centred once (2) was fixed because they are full-width boxes with centred
      text. The CTA is 192px, narrow enough for the flex alignment to show, so
      it stayed left. margin-inline:auto does NOT fix this: the element it
      would apply to already fills its container.

   WHY !important, and why NOT an id selector. The 1.25rem comes from a
   stylesheet the slideshow-hero section emits about itself, scoped
   `#shopify-section-<template-id>__slideshow_hero_op .slideshow-words`. That
   is (1,1,0) and is injected AFTER this file, so a plain [id$="..."] .class
   rule at (0,2,0) loses twice over -- confirmed with CDP
   CSS.getMatchedStylesForNode, which showed padding-left:0 losing to
   padding-left:1.25rem. Matching that id would win, but the id embeds the
   THEME's template id: template--27878698778952__ on the draft and
   template--26320885252424__ on MAIN. An id selector verified on a draft
   silently stops matching the moment it is promoted. !important on an
   id-free selector is the only form that is both strong enough and portable.
   align-items carries it too: .items-start is only (0,1,0) and would lose to
   this rule anyway, but the same section-scoped sheet could set align-items
   and this hero has already burned two rounds.

   justify-items and text-align need no !important; nothing contests them.

   Scoped to <=767px deliberately: the Travel Sax and Travel Clarinet pages run
   the same slideshow-hero section, and their desktop alignment is parity set
   on purpose when this hero was rebuilt to match them. Widen the scope only if
   that parity is being dropped on all three pages at once. */
@media (max-width: 767px) {
  [id$="__slideshow_hero_op"] .slideshow-words {
    padding-inline: 0 !important;
    justify-items: center;
    text-align: center;
  }
  [id$="__slideshow_hero_op"] .slideshow-word {
    align-items: center !important;
  }
}

/* ==========================================================================
   Odisei patch (2026-09-16): hide the theme's sticky buy bar on product pages.

   Requested by Mario. The floating card at the bottom of PDPs is the Santa
   Helena `sticky_buy_button` block (<product-sticky-form>, rendered from
   sections/main-product.liquid), NOT a Klaviyo widget. Klaviyo's only PDP
   element is the Hub launcher bubble; all 28 Klaviyo forms are email capture.

   Hiding here rather than deleting the block from the 6 product templates
   that carry it (default, music-bundle, sibling, pre-order,
   product-accessories, product-app), so this is reversible by removing this
   rule alone.

   NOTE: this was the mobile buy path -- the in-page Add to Cart sits ~1.7
   screens down. Section 2 above still lifts .product-sticky-form to z-index
   1000000; that rule is now inert but harmless, and is what makes a revert a
   one-line delete.
   ========================================================================== */
.product-sticky-form {
  display: none !important;
}

/* ==========================================================================
   Odisei patch (2026-09-16): out-of-stock clarity (6TSINEAR earphones).

   Why: 6TSINEAR went to 0 and it is a bundle COMPONENT, so Shopify's native
   bundles took 4 parent products down with it (TS2 + TC Master and Music
   bundles). The theme already flagged them -- badge--soldout pill on cards,
   disabled option values, CTA swapped to the Klaviyo back-in-stock button --
   but the pill was the same brand blue as the "Save 9%" pill sitting next to
   it, so a dead card was advertising a discount.

   Framing (Mario, 2026-09-16): these are coming back, so the card should still
   invite the click. No greyscale, no dimming -- the product photo stays as it
   is, and the pill goes brand yellow reading "Available Soon" (text swapped in
   odisei-patches.js, which owns the ES/FR strings).

   Keyed on the theme's own .badge--soldout class, never on badge TEXT, because
   /es/ renders "Agotado" and /fr/ "Epuise" with identical markup. Store-wide
   by design: 6 active products are fully unavailable today (our 5 + Adaptive
   Travel Sax 2) and all 6 should read the same way.

   Revert: delete this block. Pairs with the PDP band in odisei-patches.js.
   ========================================================================== */

/* ---- 1. Grid: "coming back", not "dead" ---- */

/* Yellow Camel (#FBD85D) is the store's own yellow -- the swatch on every TS2
   card -- so the pill reads as brand, not as a warning. Promos stay blue;
   waiting-on-stock goes yellow. Two states, two colours. */
.product-card .badge--soldout,
.badge--soldout {
  background: var(--odisei-oos-yellow, #FBD85D) !important;
  color: var(--odisei-op-ink, #13163D) !important;
  border: 0 !important;
}

/* One pill per card. A discount on something you cannot add to cart yet is a
   second, competing message -- and the price is still on the card either way. */
.product-card:has(.badge--soldout) .badge--onsale {
  display: none !important;
}

/* ---- 2. PDP: the explainer band injected by odisei-patches.js ---- */
.odisei-oos {
  display: block;
  margin: 0 0 1rem;
  padding: 0.9375rem 1.125rem;
  border: 1px solid rgba(19, 22, 61, 0.16);
  border-left: 3px solid var(--odisei-oos-yellow, #FBD85D);
  border-radius: 0.5rem;
  background: var(--odisei-op-bone, #F2F0EB);
  color: var(--odisei-op-ink, #13163D);
}
.odisei-oos__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.odisei-oos__title svg {
  flex: 0 0 auto;
  width: 1.0625rem;
  height: 1.0625rem;
}
.odisei-oos__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.85;
}
.odisei-oos__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0;
}
.odisei-oos__link {
  font-weight: 600;
  color: var(--odisei-op-blue, #0218A0);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.odisei-oos__link:hover {
  text-decoration-thickness: 2px;
}

/* ---- 3. The "All together" card CTA, re-enabled by odisei-patches.js ----
   Its inline script disables the button when the main form is disabled. We
   turn it back into a live control that opens the back-in-stock drawer, so
   it must not keep the greyed-out disabled look. */
.odisei-ops__btn[data-odisei-oos-notify] {
  cursor: pointer;
  opacity: 1;
}