/** Shopify CDN: Minification failed

Line 963:58 Unexpected "1"
Line 989:53 Unexpected "1"

**/
/* ==========================================================================
   NTRL Custom Styles — Live Theme Override
   Uses px values because live theme sets html font-size: 10px
   ========================================================================== */


/* ==========================================================================
   0. CONTAINER & FONT BASE — Match Medtech theme defaults
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--xo-container-width, 1400px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-gap, 20px);
  padding-right: var(--container-gap, 20px);
}

/* Ensure custom NTRL sections inherit theme fonts */
.trust-marquee,
.spec-callout,
.comparison,
.testimonials-e,
.video-testimonials {
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  color: var(--color-text, #3D3D3D);
}

.trust-marquee h2,
.spec-callout h2,
.comparison h2,
.testimonials-e h2,
.video-testimonials h2 {
  font-family: var(--font-heading-family, var(--font-body-family, system-ui, -apple-system, sans-serif));
}

/* ==========================================================================
   1. MARQUEE TRUST BANNER — Full-width scrolling trust bar
   ========================================================================== */
.ntrl-marquee-bar {
  width: 100%;
  background: #1a1a1a;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
  z-index: 100;
}

.ntrl-marquee-track {
  display: flex;
  animation: ntrl-marquee-scroll 25s linear infinite;
  width: max-content;
}

.ntrl-marquee-track:hover {
  animation-play-state: paused;
}

.ntrl-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 32px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #fff;
  white-space: nowrap;
}

.ntrl-marquee-item svg {
  width: 16px;
  height: 16px;
  fill: #c9a84c;
  flex-shrink: 0;
}

.ntrl-marquee-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9a84c;
  margin: 0 12px;
  flex-shrink: 0;
}

@keyframes ntrl-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   2. TAB HEADERS — Bigger, bolder, more clickable
   ========================================================================== */
.product-information-tabs__header {
  border-bottom: 2px solid rgba(201, 168, 76, 0.2) !important;
  margin-bottom: 24px !important;
  gap: 0 !important;
}

.product-information-tabs__header xo-list-item {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  transition: color 0.2s ease, border-bottom 0.2s ease !important;
  color: #6B5D4F !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}

.product-information-tabs__header xo-list-item:hover {
  color: #3D3D3D !important;
  border-bottom-color: #c9a84c !important;
}

.product-information-tabs__header xo-list-item[active],
.product-information-tabs__header xo-list-item.active,
.product-information-tabs__header xo-list-item[aria-selected="true"] {
  color: #3D3D3D !important;
  border-bottom-color: #c9a84c !important;
}

/* ==========================================================================
   3. PRODUCT DESCRIPTION — Rich Text Styling (px values)
   ========================================================================== */
xo-tabs-pane xo-animate {
  font-size: 17px !important;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: #6B5D4F;
}

xo-tabs-pane xo-animate h2 {
  font-family: var(--font-heading, 'DM Serif Display', Georgia, serif);
  font-size: clamp(20px, 2.5vw, 24px) !important;
  font-weight: 600;
  color: #3D3D3D;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}

xo-tabs-pane xo-animate h3 {
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9a84c;
  margin: 28px 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

xo-tabs-pane xo-animate h3::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #c9a84c;
  flex-shrink: 0;
}

xo-tabs-pane xo-animate p {
  margin: 0 0 16px 0;
  color: #6B5D4F;
  font-size: 17px !important;
  line-height: 1.75;
}

xo-tabs-pane xo-animate h2 + p {
  font-size: 18px !important;
  line-height: 1.8;
  color: #3D3D3D;
  opacity: 0.85;
}

xo-tabs-pane xo-animate ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 0 20px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

xo-tabs-pane xo-animate ul li::marker {
  content: none !important;
  display: none !important;
}

xo-tabs-pane xo-animate ul li {
  position: relative;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  font-size: 16px !important;
  line-height: 1.6;
  color: #6B5D4F;
  transition: background 0.2s ease, padding-left 0.2s ease;
  border-radius: 4px;
}

xo-tabs-pane xo-animate ul li:last-child {
  border-bottom: none;
}

xo-tabs-pane xo-animate ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #d4b86a);
  box-shadow: 0 0 6px rgba(201, 168, 76, 0.3);
}

xo-tabs-pane xo-animate ul li:hover {
  background: rgba(201, 168, 76, 0.04);
  padding-left: 28px;
}

xo-tabs-pane xo-animate ul li strong {
  color: #3D3D3D;
  font-weight: 600;
  font-size: 16px !important;
}

/* Callout box */
xo-tabs-pane xo-animate h3:last-of-type + p {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.06), rgba(201, 168, 76, 0.02));
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 16px !important;
  line-height: 1.7;
  color: #3D3D3D;
  margin-bottom: 0;
}

/* ==========================================================================
   4. PRODUCT RECOMMENDATIONS — Fix card visibility
   ========================================================================== */
.xo-product-recommendations .xo-product-card,
.product-recommendations .xo-product-card,
[class*="product-recommendations"] [class*="product-card"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   5. TRUST BADGE — Better styling
   ========================================================================== */
[class*="trustbadge"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   6. STICKY ADD-TO-CART BAR — Improve visibility
   ========================================================================== */
[class*="sticky-addcart"] {
  font-size: 14px !important;
}

/* ==========================================================================
   7. HEADER — Remove harsh blue background
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — Mobile adjustments
   ========================================================================== */
@media (max-width: 749px) {
  .ntrl-marquee-item {
    font-size: 12px;
    padding: 0 20px;
  }

  .product-information-tabs__header xo-list-item {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  xo-tabs-pane xo-animate h2 {
    font-size: 20px !important;
  }
  xo-tabs-pane xo-animate h3 {
    margin-top: 20px;
    font-size: 13px !important;
  }
  xo-tabs-pane xo-animate p {
    font-size: 16px !important;
  }
  xo-tabs-pane xo-animate ul li {
    padding: 8px 0 8px 20px;
    font-size: 15px !important;
  }
  xo-tabs-pane xo-animate ul li::before {
    top: 13px;
  }
  xo-tabs-pane xo-animate h3:last-of-type + p {
    padding: 14px 16px;
    font-size: 15px !important;
  }
}

/* ==========================================================================
   FOCUS & OUTLINE RESET — No decorative focus boxes on click
   ========================================================================== */
.trust-marquee *:focus,
.spec-callout *:focus,
.comparison *:focus,
.testimonials-e *:focus,
.video-testimonials *:focus,
.trust-marquee *:focus-visible,
.spec-callout *:focus-visible,
.comparison *:focus-visible,
.testimonials-e *:focus-visible,
.video-testimonials *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Only show focus for keyboard navigation (accessibility) */
.trust-marquee *:focus-visible,
.spec-callout *:focus-visible,
.comparison *:focus-visible,
.testimonials-e *:focus-visible,
.video-testimonials *:focus-visible {
  outline: 2px solid #c9a84c !important;
  outline-offset: 2px !important;
}

/* Remove focus from non-interactive marquee items */
.trust-marquee__item:focus,
.trust-marquee__item:active,
.trust-marquee:focus,
.trust-marquee:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure trust marquee is full-width override */
.trust-marquee {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  max-width: none !important;
}

/* ==========================================================================
   PRODUCT PAGE SPACING — Gap after product section before marquee
   ========================================================================== */
.trust-marquee {
  margin-top: 40px !important;
}

/* ==========================================================================
   PRODUCT DESCRIPTION — Remove ugly bullet points, use clean paragraphs
   ========================================================================== */
xo-tabs-pane xo-animate ul {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  padding-left: 0 !important;
  margin: 0 0 20px 0 !important;
}

xo-tabs-pane xo-animate ul li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 12px 0 12px 0 !important;
  padding-left: 0 !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  font-size: 17px !important;
  line-height: 1.7;
  color: #6B5D4F;
}

xo-tabs-pane xo-animate ul li::before {
  display: none !important;
}

xo-tabs-pane xo-animate ul li::marker {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
}

xo-tabs-pane xo-animate ul li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   TAB BAR — Horizontal scroll for product info tabs
   ========================================================================== */
xo-tabs .xo-tab-titles,
.xo-tab-titles,
.product-detail__tabs-nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  flex-wrap: nowrap !important;
}

xo-tabs .xo-tab-titles::-webkit-scrollbar,
.xo-tab-titles::-webkit-scrollbar,
.product-detail__tabs-nav::-webkit-scrollbar {
  display: none;
}

xo-tabs .xo-tab-titles button,
.xo-tab-titles button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==========================================================================
   PRODUCT PAGE — Bidirectional sticky & responsive grid
   ========================================================================== */

/* Make image gallery column sticky (info column already has pos:sticky from theme) */
.xo-main-product xo-product-will-change {
  position: sticky !important;
  top: 16px !important;
  align-self: start;
}

/* Tablet product layout fix (770-990px) — force 2-col 50/50 grid */
@media (min-width: 768px) and (max-width: 990px) {
  .xo-main-product .xo-grid-block {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  /* Media block spans left column */
  .xo-main-product .xo-grid-block > div:first-child {
    grid-column: 1 / 2 !important;
    grid-row: 1 / -1 !important;
  }
  /* Info block spans right column */
  .xo-main-product .xo-grid-block > div:last-child {
    grid-column: 2 / 3 !important;
    grid-row: 1 / -1 !important;
  }
  /* Keep info sticky in right column */
  .xo-main-product .xo-grid-block > div:last-child > .pos\:sticky {
    position: sticky !important;
    top: 80px !important;
  }
}

/* Below 768px: stack to single column (mobile) */
@media (max-width: 767px) {
  .xo-main-product .xo-grid-block {
    grid-template-columns: 1fr !important;
  }
  .xo-main-product xo-product-will-change,
  .xo-main-product .pos\:sticky {
    position: static !important;
  }
}


/* ==========================================================================
   FOOTER — Hover Dimming Effect
   When hovering a link in a footer menu column, siblings dim
   ========================================================================== */
footer .xo-menu,
footer [class*="menu"] {
  transition: opacity 0.2s ease;
}

/* When hovering over a footer menu group, dim all links */
footer .xo-section-footer xo-menu:hover xo-menu-link,
footer .xo-section-footer .xo-menu:hover a {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

/* But keep the hovered link fully visible */
footer .xo-section-footer xo-menu:hover xo-menu-link:hover,
footer .xo-section-footer .xo-menu:hover a:hover {
  opacity: 1;
}

/* Broader selector for Medtech block-based footer menus */
.xo-section-footer [data-block-type="menu"]:hover a {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.xo-section-footer [data-block-type="menu"]:hover a:hover {
  opacity: 1;
}

/* Fallback: target footer list groups directly */
.xo-section-footer ul:hover li a,
.xo-section-footer nav:hover a {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.xo-section-footer ul:hover li a:hover,
.xo-section-footer ul:hover li:hover a,
.xo-section-footer nav:hover a:hover {
  opacity: 1;
}


/* ==========================================================================
   FOOTER — Hover Dimming Effect
   When hovering a link in a footer menu column, siblings dim
   ========================================================================== */

/* Target footer menu list groups */
.xo-section-footer ul:hover li a,
.xo-section-footer nav:hover a {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.xo-section-footer ul:hover li a:hover,
.xo-section-footer ul:hover li:hover a,
.xo-section-footer nav:hover a:hover {
  opacity: 1;
}

/* Medtech xo-menu web component support */
.xo-section-footer xo-menu:hover xo-menu-link {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.xo-section-footer xo-menu:hover xo-menu-link:hover {
  opacity: 1;
}


/* ==========================================================================
   FAQ ACCORDION — NTRL Brand Styling
   ========================================================================== */
.section-faq { background: var(--color-background, #F5F0E8); padding: 60px 0 80px; }
@media (max-width: 768px) { .section-faq { padding: 40px 0 60px; } }

.faq__heading {
  font-family: var(--font-heading-family, system-ui);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1A1A1A);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: -0.02em;
}

.faq__list { max-width: 760px; margin: 0 auto; }

.faq__item { border-bottom: 1px solid rgba(200, 169, 110, 0.25); }
.faq__item:first-child { border-top: 1px solid rgba(200, 169, 110, 0.25); }

.faq__question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; cursor: pointer; font-weight: 600;
  font-size: 1.0625rem; line-height: 1.4;
  color: var(--color-text, #1A1A1A);
  list-style: none; transition: color 0.2s ease;
}
.faq__question:hover { color: #C8A96E; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { display: none; content: ""; }

.faq__icon { transition: transform 0.3s ease; flex-shrink: 0; margin-left: 16px; opacity: 0.5; }
.faq__icon svg { width: 18px; height: 18px; }
.faq__item[open] .faq__icon { transform: rotate(180deg); opacity: 1; }
.faq__item[open] .faq__question { color: #C8A96E; }

.faq__answer {
  padding: 0 0 24px;
  color: var(--color-text-secondary, #6B5D4F);
  line-height: 1.75; font-size: 0.9375rem;
}
.faq__answer p { margin-bottom: 12px; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer strong { color: var(--color-text, #1A1A1A); font-weight: 600; }
.faq__answer a { color: #C8A96E; text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; }
.faq__answer a:hover { opacity: 0.8; }

.faq__item .faq__answer { animation: faq-slide-down 0.3s ease; }
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}



/* ═══════════════════════════════════════════════════════════
   NTRL Mobile Overflow & Performance Fixes — April 2, 2026
   ═══════════════════════════════════════════════════════════ */

/* Fix 1: Prevent horizontal overflow on all pages
   Using clip instead of hidden — hidden breaks position:sticky */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Fix 2: XO Grid — force single column on mobile
   The XO grid uses hardcoded 442px column width which overflows
   on mobile viewports (393px). Force 1fr on mobile.
   Using overflow-x: clip (not hidden) to preserve position:sticky */
@media (max-width: 749px) {
  .xo-grid-block {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: clip;
  }

  .xo-grid-block > * {
    max-width: 100% !important;
    min-width: 0;
    overflow-x: clip;
  }

  /* Contain the entire product section chain on mobile */
  .xo-main-product,
  .xo-main-product xo-product,
  .xo-main-product .xo-section,
  .xo-main-product xo-container,
  .xo-main-product xo-product-will-change {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  /* Ensure product gallery fits mobile viewport */
  .xo-gallery,
  .xo-product-info {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Fix carousel overflow within product grid */
  .xo-grid-block .xo-carousel,
  .xo-grid-block [class*="carousel"] {
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  /* Constrain product form on mobile */
  form[action*="/cart/add"] {
    max-width: 100% !important;
    overflow-x: clip;
  }
}

/* Fix 2b: Product carousel overflow — clip off-screen slides */
.xo-main-product xo-carousel,
.xo-main-product xo-carousel-inner,
.xo-main-product xo-gallery,
.xo-main-product xo-animate {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Keep product-will-change without overflow:hidden — it uses position:sticky */
.xo-main-product xo-product-will-change {
  max-width: 100% !important;
}

.xo-main-product xo-carousel-slide {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Ensure product info text does not overflow on mobile */
.xo-main-product .xo-section__container {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* Fix 3: XO Modals — prevent layout sprawl
   Pre-rendered quick-view modals are laid out in document flow,
   creating 8000px+ horizontal documents. Force them out of flow. */
xo-modal:not([xo-active]):not([xo-active="true"]) {
  position: fixed !important;
  visibility: hidden;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fix 4: Ensure product text doesn't truncate on mobile */
@media (max-width: 749px) {
  .xo-product-info,
  .xo-product-info * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Prevent any fixed-width elements from breaking mobile */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }
}


/* Fix 5: Hide cookie consent while age gate is active
   Show it only after age verification is complete.
   The age gate JS adds/removes .age-gate-active on <body> */
body.age-gate-active #shopify-pc__banner {
  display: none !important;
}


/* ==========================================================================
   TAB SECTION MOBILE SIZING FIX — April 6, 2026
   Fixes Information / FAQs / Shipping tabs overflow on mobile.
   Uses overflow-x: clip (NOT hidden) to preserve position:sticky elsewhere.
   ========================================================================== */

/* 1. Tab information container — constrain to viewport on all devices */
.xo-tab-information {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* 2. Tab header row — ensure labels fit without overflowing */
.xo-tab-information xo-list.xo-information-title {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}

.xo-tab-information xo-list.xo-information-title::-webkit-scrollbar {
  display: none;
}

/* 3. Individual tab triggers — prevent rigid sizing that breaks mobile */
.xo-tab-information xo-tabs-trigger {
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 4. Tab content panes — contain within parent */
.xo-tab-information xo-tabs-content {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.xo-tab-information xo-tabs-pane {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 5. The xo-tabs wrapper itself */
.xo-tab-information xo-tabs {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

/* 6. Mobile-specific: tighter tab label sizing for small screens */
@media (max-width: 749px) {
  .xo-tab-information {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Tab labels — reduce padding to fit 3 tabs on mobile */
  .xo-tab-information xo-tabs-trigger {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 13px !important;
  }

  /* Tab content — ensure text wraps properly */
  .xo-tab-information xo-tabs-pane {
    overflow-x: clip;
    max-width: 100%;
  }

  .xo-tab-information xo-tabs-pane * {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Active tab indicator line — keep within bounds */
  .xo-tab-information xo-tabs-active {
    max-width: 100%;
  }

  /* Images or embeds inside tab content */
  .xo-tab-information xo-tabs-pane img,
  .xo-tab-information xo-tabs-pane video,
  .xo-tab-information xo-tabs-pane iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* Prevent the parent group/block from expanding beyond viewport */
  .xo-tab-information,
  .xo-tab-information > * {
    min-width: 0;
  }
}

/* 7. Very small screens (320px-375px) — further compress tab labels */
@media (max-width: 374px) {
  .xo-tab-information xo-tabs-trigger {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
}


/* ==========================================================================
   HEADER MOBILE FIX — Restore pointer-events on header child elements
   The .xo-header wrapper has pe:none (pointer-events: none) by design so
   that touch/scroll events pass through to content behind it (e.g. the
   homepage scroll-video animation). We must NOT override .xo-header itself.
   
   The xo-sticky web component uses shadow DOM, which inherits
   pointer-events: none from .xo-header but the shadow boundary prevents
   external CSS from restoring it on internal parts. On mobile/touch
   devices this blocks all taps on the hamburger, cart, and search icons.
   
   Fix: Set pointer-events: auto on the xo-sticky element and its slotted
   content (xo-header-content, .xo-header__inner). These elements are
   sized to the header bar only, so they won't block page content below.
   The .xo-header outer div remains pointer-events: none.
   ========================================================================== */
.xo-header > xo-sticky {
  pointer-events: auto !important;
}

.xo-header xo-header-content,
.xo-header .xo-header__inner {
  pointer-events: auto !important;
}

/* Ensure all interactive header elements are tappable on mobile */
.xo-header a,
.xo-header button,
.xo-header [data-action],
.xo-header summary,
.xo-header .xo-header-cart,
.xo-header .xo-menu-hamburger,
.xo-header .xo-logo {
  pointer-events: auto !important;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE PRODUCT IMAGE FIXES — April 6, 2026
   ═══════════════════════════════════════════════════════════ */

/* Fix 1: Make product image taller on mobile — not forced square */
@media (max-width: 767px) {
  .xo-product-info-media-mobile__top {
    aspect-ratio: 3/4 !important;
    height: auto !important;
  }
  .xo-product-info-media-mobile__top xo-carousel-inner {
    height: 100% !important;
  }
  .xo-product-info-media-mobile__top xo-carousel-slide {
    height: 100% !important;
  }
  .xo-product-info-media-mobile__top xo-carousel-slide > div {
    height: 100% !important;
  }
  .xo-product-info-media-mobile__top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* Fix 2: Show carousel pagination dots on mobile */
@media (max-width: 767px) {
  .xo-product-info-media-mobile__pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 4px !important;
  }
  .xo-product-info-media-mobile__pagination xo-carousel-bullet {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
  }
  .xo-product-info-media-mobile__pagination xo-carousel-bullet[xo-active],
  .xo-product-info-media-mobile__pagination xo-carousel-bullet.xo-active {
    background: #C8A96E !important;
  }
}

/* Fix 3: Make carousel arrows more visible on mobile */
@media (max-width: 767px) {
  .xo-product-info-media-mobile__arrow {
    background: rgba(255,255,255,0.85) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    z-index: 10 !important;
  }
}


/* ==========================================================================
   MEGA-MENU HOVER ZONE FIX — April 6, 2026
   Problem: Every nav <li> renders an <xo-mega-menu> element (position:
   absolute, full-width) below the header. Empty ones create invisible
   hover zones. The Shop mega-menu has a 10px gap between the nav link
   and the dropdown content, causing the menu to close when moving the
   mouse to click items.
   
   Fix: 
   1. Collapse all non-Shop mega-menus to zero size
   2. Let the Shop mega-menu bridge the gap between nav link and dropdown
   3. Ensure dropdown content is clickable when shown
   ========================================================================== */

/* 1. Hide ALL mega-menu elements that are not the Shop dropdown */
.xo-menu-horizontal-base__item xo-mega-menu:not([xo-index=1]) {
  display: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* 2. The Shop <li> needs a hover bridge — a pseudo-element that extends
   from the bottom of the nav link through the gap to the dropdown panel.
   This keeps the :hover state alive while the mouse crosses the gap. */
.xo-menu-horizontal-base__item--hover:nth-child(2)::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 20px !important;
  background: transparent !important;
  z-index: 999 !important;
}

/* 3. The Shop mega-menu anchor element — allow pointer events so it
   acts as a hover bridge between the nav link and the modal content.
   Constrain width to the Shop link area only (not full page width). */
.xo-menu-horizontal-base__item xo-mega-menu[xo-index=1] {
  pointer-events: auto !important;
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}

/* 4. When the mega-menu modal is active (shown), make it interactive */
xo-modal[xo-name*=mega-menu][xo-active],
xo-modal[xo-name*=mega-menu][xo-active] * {
  pointer-events: auto !important;
}

/* 5. The mega-menu modal backdrop — keep it clickable to allow closing */
xo-modal[xo-name*=mega-menu] .xo-modal__backdrop {
  pointer-events: auto !important;
}


/* ==========================================================================
   PRODUCT MEDIA — Full-bleed + taller images on mobile (April 13, 2026)
   Issues: (1) 12px side gap from #xo-root page margin
           (2) 10px border-radius on slide container
           (3) 1:1 images leave too much empty space on tall mobile screens
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. Full-bleed: negate the page side margin so carousel is edge-to-edge */
  .xo-main-product .xo-media-mobile {
    margin-left: calc(-1 * var(--page-side-margin-mobile, 12px)) !important;
    margin-right: calc(-1 * var(--page-side-margin-mobile, 12px)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. Remove border-radius on carousel slides for clean edge-to-edge */
  .xo-main-product .xo-media-mobile xo-carousel-slide > div,
  .xo-main-product .xo-media-mobile xo-carousel-slide > xo-gallery-item > div,
  .xo-main-product .xo-media-mobile xo-carousel-slide .xo-image {
    border-radius: 0 !important;
  }

  /* 3. Taller aspect ratio — 3:4 instead of 1:1 so product fills more of screen */
  .xo-main-product .xo-media-mobile .xo-media-detail,
  .xo-main-product .xo-media-mobile xo-carousel-slide > xo-gallery-item {
    aspect-ratio: 3 / 4;
  }
  .xo-main-product .xo-media-mobile .xo-media-detail img,
  .xo-main-product .xo-media-mobile xo-carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}