/* ============================================================
   NEXOHERO adaptation layer — makes the original Lemon theme
   CSS work without Shopify's custom elements & JS runtime.
   Loaded AFTER lemon.css + tokens.css. Zero visual overrides.
   ============================================================ */

/* ---------- Custom elements -> display behavior ----------
   Shopify JS defined these; here we give them the layout the
   original stylesheet expects (verified against theme.css rules). */
x-slideshow, slideshow-carousel, press-carousel, marquee-text,
media-with-text, store-header, height-observer, scroll-carousel,
reveal-items, split-lines, price-list, sale-price, compare-at-price,
cart-count, navigation-drawer, x-drawer, page-dots, video-media,
section-header, product-card, product-list, media-grid,
free-shipping-bar, scroll-progress {
  display: block;
}
media-grid, product-list, press-carousel, scroll-carousel, section-header { /* keep grid from lemon.css */ }

/* ---------- Hero slideshow (JS: .nx-slideshow) ---------- */
.slideshow__carousel { position: relative; min-height: 480px; }
.slideshow__slide { transition: opacity .6s ease; }
.content-over-media > picture { display: block; height: 100%; }
.content-over-media > picture > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 699px) {
  .slideshow__carousel { min-height: 300px; }
}

/* hero arrows (theme uses circle-button style) */
.slideshow__controls { position: absolute; bottom: var(--spacing-5); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--spacing-4); z-index: 3; }

/* ---------- Section spacing system ----------
   lemon.css scopes ALL section spacing to [role=main] .shopify-section.
   front-page.php now wraps sections in <main role="main"> (as the original
   Shopify page did). Each colored section carries --section-background-hash:0
   and passes --previous-section-background-hash:0 to its next sibling, so
   lemon.css computes --background-differs-from-previous and applies the
   standard 64px (--section-outer-spacing-block) gaps. Replicated here. */
[role="main"] .shopify-section--media-grid,
[role="main"] .shopify-section--featured-collection,
[role="main"] .shopify-section--press,
[role="main"] .shopify-section--media-with-text { --section-background-hash: 0; }
[role="main"] .shopify-section--media-grid + *,
[role="main"] .shopify-section--featured-collection + *,
[role="main"] .shopify-section--press + *,
[role="main"] .shopify-section--media-with-text + * { --previous-section-background-hash: 0; }

/* ---------- Hero height cap (user req: stop infinite growth when zooming/wide) ----------
   Original hero is content-over-media--auto = full-bleed image that grows with
   viewport width. Cap it so it never exceeds a sane height. */
.nx-hero-section .content-over-media--auto {
  --content-over-media-height: min(72vh, 720px);
}
.nx-hero-section .content-over-media--auto > picture {
  display: block;
  height: min(72vh, 720px);
  max-height: min(72vh, 720px);
}
.nx-hero-section .content-over-media--auto > picture > img {
  width: 100%;
  height: 100%;
  max-height: min(72vh, 720px);
  object-fit: cover;
  object-position: center;
}
.nx-hero-section .slideshow__carousel,
.nx-hero-section .slideshow__slide { min-height: 0; height: auto; }
.nx-banner-section .content-over-media--auto > picture { display: block; max-height: min(58vh, 560px); }
.nx-banner-section .content-over-media--auto > picture > img { width: 100%; height: 100%; max-height: min(58vh, 560px); object-fit: cover; }

/* ---------- Press → About(video) gap: tighten + guarantee video paints ---------- */
.shopify-section--press .section { padding-block-end: var(--spacing-6); }
.shopify-section--media-with-text .section { padding-block-start: 0; }
.media-with-text__media video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
video-media { display: block; position: relative; overflow: hidden; }

/* ---------- Global overflow guard (marquee/bleed sections must not scroll body) ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ---------- Announcement marquee ---------- */
.announcement-bar { overflow: hidden; }
.announcement-bar__scrolling-list { grid-auto-flow: column; width: max-content; animation: nx-marquee-scroll var(--nx-marquee-duration, 40s) linear infinite; }
@keyframes nx-marquee-scroll { to { transform: translateX(-50%); } }

/* ---------- Press carousel ---------- */
.press__list-item { transition: opacity .45s ease; }
.press__controls { display: flex; justify-content: center; align-items: center; gap: var(--spacing-4); margin-block-start: var(--spacing-6); }
.circle-button { width: var(--spacing-10); height: var(--spacing-10); border-radius: var(--rounded-full); border: 1px solid rgb(var(--text-primary) / .2); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s; }
.circle-button:hover { border-color: rgb(var(--text-primary) / .6); }
.animated-arrow { display: inline-block; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.animated-arrow--reverse { transform: rotate(-135deg); }

/* ---------- Media grid tiles ---------- */
.media-grid__item { border-radius: var(--rounded-sm); }
.media-grid__item .content-over-media { height: 100%; }

/* ---------- Product cards (Woo loop rendered into Lemon markup) ---------- */
.product-card__quick-buy { position: absolute; left: var(--product-card-quick-buy-inset); right: var(--product-card-quick-buy-inset); bottom: var(--product-card-quick-buy-inset); z-index: 4; opacity: 0; transition: opacity .25s ease; }
@media (pointer: fine) {
  .product-card:hover .product-card__quick-buy { opacity: 1; }
}
@media (pointer: coarse) {
  .product-card__quick-buy { opacity: 1; position: static; padding: 0 var(--spacing-4) var(--spacing-4); }
}
.product-card__quick-buy .button { width: 100%; }

/* ---------- Reveal on scroll (JS adds .nx-revealed; hiding is opt-in via html.nx-js
   so that if JS fails, content stays VISIBLE) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.nx-js [reveal-js], html.nx-js [reveal-on-scroll="true"] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  html.nx-js [reveal-js].nx-revealed, html.nx-js [reveal-on-scroll="true"].nx-revealed { opacity: 1; transform: none; }
  /* lemon.css hides [reveal-*] unconditionally — undo when JS flag missing */
  html:not(.nx-js) [reveal-js], html:not(.nx-js) [reveal-on-scroll="true"] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Drawer polyfill (navigation-drawer has no JS def here) ---------- */
navigation-drawer, x-drawer { display: none; }
nx-drawer { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / .45); opacity: 0; pointer-events: none; transition: opacity .25s; overflow: hidden; }
nx-drawer.is-open { opacity: 1; pointer-events: auto; }
nx-drawer .nx-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(380px, 88vw); background: rgb(var(--dialog-background)); color: rgb(var(--text-primary)); transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,1,.36,1); overflow-y: auto; padding: var(--spacing-6); }
nx-drawer.is-open .nx-panel { transform: translateX(0); }
nx-drawer .nx-panel--right { left: auto; right: 0; transform: translateX(100%); }
nx-drawer.is-open .nx-panel--right { transform: translateX(0); }
nx-drawer .nx-panel-close { float: right; background: none; border: none; cursor: pointer; font-size: 24px; color: inherit; line-height: 1; padding: var(--spacing-2); }

/* ---------- Single product: desktop two-column (gallery | summary) ---------- */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-10) var(--spacing-12);
  align-items: start;
  padding-block: var(--spacing-8) var(--spacing-12);
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce div.product div.images { grid-column: 1; grid-row: 1; }
.woocommerce div.product div.summary { grid-column: 2; grid-row: 1; }
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; grid-row: 2; width: 100% !important; }
.woocommerce div.product .product_title { font-size: clamp(24px, 3vw, 36px); line-height: 1.15; }
.woocommerce div.product p.price { font-size: 28px; font-weight: 800; color: rgb(var(--text-primary)) !important; margin-block: var(--spacing-4); }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: var(--text-base); opacity: .8; margin-block-end: var(--spacing-6); }
.woocommerce div.product form.cart { margin-block: var(--spacing-6); }
.woocommerce div.product form.cart .button { font-size: var(--text-base); padding: var(--spacing-4) var(--spacing-10); }
@media (max-width: 899px) {
  .woocommerce div.product { grid-template-columns: 1fr; gap: var(--spacing-6); }
  .woocommerce div.product div.images, .woocommerce div.product div.summary { grid-column: 1; }
  .woocommerce div.product div.summary { grid-row: 2; }
  .woocommerce div.product .woocommerce-tabs { grid-row: 3; }
}

/* ---------- WooCommerce integration seams ---------- */
/* Woo injects .woocommerce wrapper; neutralize its spacing inside lemon layout */
.nh-main .woocommerce-breadcrumb { display: none; }
.woocommerce ul.products { all: unset; display: grid; grid: auto / repeat(auto-fill, minmax(240px, 1fr)); gap: var(--grid-gutter, 12px); width: 100%; }
.woocommerce ul.products li.product { all: unset; }
.woocommerce .products .nx-woo-card-wrap { display: contents; }

/* single product page: gallery + summary layout using lemon grid */
.nx-product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-12); align-items: start; padding-block: var(--spacing-10); }
@media (max-width: 999px) { .nx-product { grid-template-columns: 1fr; gap: var(--spacing-6); } }
.nx-product__gallery .product-gallery__item img { width: 100%; border-radius: var(--rounded-sm); }
.nx-product__gallery .product-gallery__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; gap: var(--spacing-3); margin-block-start: var(--spacing-3); overflow-x: auto; }
.nx-product__gallery .product-gallery__thumbs img { border-radius: var(--rounded-sm); cursor: pointer; border: 2px solid transparent; }
.nx-product__gallery .product-gallery__thumbs img.is-active { border-color: rgb(var(--text-primary)); }

/* woo buttons inside lemon look */
.nh-main .woocommerce a.button, .nh-main .woocommerce button.button,
.nh-main .woocommerce input.button, .nh-main .woocommerce #respond input#submit,
.nh-main .woocommerce a.button.alt, .nh-main .woocommerce button.button.alt,
.nh-main .woocommerce button.button:disabled {
  border-radius: var(--rounded-button) !important;
  font-family: var(--text-font-family);
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
}
.woocommerce div.product p.price, .woocommerce div.product span.price { color: rgb(var(--text-primary)) !important; font-weight: 700; }
.woocommerce div.product .product_title { font-family: var(--heading-font-family); font-weight: 700; }

/* cart / checkout pages: keep readable on light bg */
.nh-main .woocommerce-cart .cart-collaterals, .nh-main .woocommerce-checkout #customer_details { background: rgb(var(--background-primary)); }
.nh-main .woocommerce table.shop_table { border-color: rgb(var(--text-primary) / .12); }
.nh-main .woocommerce table.shop_table td, .nh-main .woocommerce table.shop_table th { border-color: rgb(var(--text-primary) / .08); }

/* ---------- Static pages & blog (use lemon prose) ---------- */
.nx-page-wrap { max-width: 860px; margin-inline: auto; padding: var(--spacing-12) var(--spacing-4); }
.nx-page-wrap .prose { font-size: var(--text-base); }
.nx-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-gutter, 16px); }
@media (max-width: 999px) { .nx-blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .nx-blog-grid { grid-template-columns: 1fr; } }
.blog-post-card { border-radius: var(--rounded-sm); overflow: hidden; background: rgb(var(--background-primary)); }
.blog-post-card figure { margin: 0; aspect-ratio: 16/10; overflow: hidden; background: rgb(var(--text-primary) / .06); }
.blog-post-card figure img { width: 100%; height: 100%; object-fit: cover; }
.blog-post-card__info { padding: var(--spacing-4) var(--spacing-5) var(--spacing-6); }

/* pagination */
.nx-pagination { display: flex; justify-content: center; gap: var(--spacing-2); margin-block-start: var(--spacing-10); flex-wrap: wrap; }
.nx-pagination .page-numbers { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--rounded-sm); background: rgb(var(--background-primary)); font-weight: 700; font-size: var(--text-sm); }
.nx-pagination .page-numbers.current { background: rgb(var(--text-primary)); color: rgb(var(--background-primary)); }

/* ---------- Footer payment icons ---------- */
.footer__payment-icons { display: flex; gap: var(--spacing-2); flex-wrap: wrap; list-style: none; padding: 0; margin: 0; align-items: center; }
.footer__payment-icons li { display: contents; }
.footer__payment-icons svg { display: block; }
.footer__aside-bottom { margin-block-start: var(--spacing-6); }

/* ---------- no-js safety ---------- */
@media (scripting: none) {
  [reveal-js], [reveal-on-scroll="true"] { opacity: 1 !important; transform: none !important; }
}

/* ---------- reveal: UNCONDITIONAL (must beat lemon.css's [reveal-*]{opacity:0}
   which is NOT inside a media query; the block above is gated on
   prefers-reduced-motion so it fails under reduce-motion) ---------- */
[reveal-js].nx-revealed,
[reveal-on-scroll="true"].nx-revealed {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
/* video-media must show its video once 'loaded' is set (lemon hides video unless [loaded]) */
video-media[loaded] > video,
video-media[loaded] > iframe {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   PREMIUM HOVER LAYER (v2.0.14) — desktop only (pointer:fine),
   respects prefers-reduced-motion. Builds on the original Lemon
   hover system (zoom-image, reversed-link, quick-buy).
   ============================================================ */
@media (pointer: fine) {

  /* ---- Header nav links: lift + gradient underline sweep ---- */
  .header__link-list a { position: relative; display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s; }
  .header__link-list a:hover { transform: translateY(-2px); }

  /* ---- Header icon buttons (search/account/cart): circular hover backdrop ---- */
  .header__icon-list a, .header__icon-list button { transition: transform .3s cubic-bezier(.22,1,.36,1); border-radius: 999px; }
  .header__icon-list a:hover, .header__icon-list button:hover { transform: translateY(-2px) scale(1.1); }
  .header__cart-count .count-bubble { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .header__icon-list a:hover .count-bubble { transform: scale(1.25); }

  /* ---- Logo: subtle breathe on hover ---- */
  .header__logo a img { transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s; }
  .header__logo a:hover img { transform: scale(1.045); filter: drop-shadow(0 6px 18px rgb(0 0 0 / .18)); }

  /* ---- Category tiles (media-grid): lift + shadow + zoom (zoom-image already on) ---- */
  .media-grid__item { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; will-change: transform; }
  .media-grid__item:hover { transform: translateY(-6px) !important; box-shadow: 0 24px 48px -16px rgb(0 0 0 / .35); }
  .media-grid__item .content-over-media { overflow: hidden; }
  .media-grid__item:hover .content-over-media__media { filter: brightness(1.08) saturate(1.06); }
  .media-grid__item .content-over-media__media { transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s; }
  /* tile label: slide-up underline on hover */
  .media-grid__item .prose p { position: relative; display: inline-block; }
  .media-grid__item .prose p::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.22,1,.36,1); }
  .media-grid__item:hover .prose p::after { transform: scaleX(1); transform-origin: left; }

  /* ---- Product card: lift + image swap already; add shadow & title underline ---- */
  .product-card { transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .product-card:hover { transform: translateY(-4px) !important; }
  .product-card:hover .product-card__figure { box-shadow: 0 20px 44px -18px rgb(0 0 0 / .4); }
  .product-card__figure { transition: box-shadow .4s; border-radius: inherit; }
  .product-card__information a:hover { text-decoration: underline; text-underline-offset: 4px; }
  /* quick-buy button: spring pop */
  .product-card__quick-buy .button { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s, box-shadow .3s; }
  .product-card:hover .product-card__quick-buy .button { box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45); }
  .product-card__quick-buy .button:hover { transform: scale(1.05); }

  /* ---- Buttons (global): press feedback + glow ---- */
  .button { transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s, background-color .3s; }
  .button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgb(0 0 0 / .4); }
  .button:active { transform: translateY(0) scale(.98); }

  /* ---- Circle buttons (carousel arrows etc.): invert on hover ---- */
  .circle-button { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s, color .3s, border-color .3s; }
  .circle-button:hover { transform: scale(1.12); background: rgb(var(--text-primary)); color: rgb(var(--background-primary)); }

  /* ---- Press/testimonial cards: subtle glow when hovered ---- */
  .press__list-item { transition: box-shadow .4s, border-color .4s; border-radius: var(--rounded-lg, 12px); }
  .press__list-item.is-selected:hover { box-shadow: 0 18px 40px -20px rgb(0 0 0 / .3); }

  /* ---- Pagination dots: grow on hover ---- */
  .press__controls [data-nx-dot], .slideshow__controls button { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
  .press__controls [data-nx-dot]:hover { transform: scale(1.35); }

  /* ---- Footer links: color shift + slide ---- */
  .footer__block a:not(.button) { transition: color .25s, padding-left .3s cubic-bezier(.22,1,.36,1); }
  .footer__block a:not(.button):hover { padding-left: 6px; }

  /* ---- Blog cards: lift + image zoom ---- */
  .blog-post-card { transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .blog-post-card:hover { transform: translateY(-5px) !important; }
  .blog-post-card:hover .h5 { text-decoration: underline; text-underline-offset: 4px; }
  .nx-blog-grid img { transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .blog-post-card:hover img { transform: scale(1.04); }

  /* ---- Announcement bar: pause marquee on hover (readability + delight) ---- */
  .announcement-bar:hover .announcement-bar__item { animation-play-state: paused; }
}

/* reduced-motion users: no transforms, keep color cues only */
@media (prefers-reduced-motion: reduce) {
  .media-grid__item:hover, .product-card:hover, .button:hover { transform: none !important; }
}

/* ============================================================
   PRODUCT DETAIL PAGE (single-product.php) — original Lemon PDP
   layout: thumbnails-left gallery + sticky info column
   ============================================================ */
@media (min-width: 900px) {
  .nx-pdp-info { position: sticky; top: calc(var(--header-height, 80px) + var(--spacing-6)); }
}
@media (max-width: 899px) {
  .shopify-section--main-product .product { grid-template-columns: 1fr !important; gap: var(--spacing-6) !important; }
}

/* gallery stage: single visible slide, crossfade */
.nx-pdp-stage { position: relative; }
.nx-pdp-slide { display: none; }
.nx-pdp-slide.is-selected { display: block; animation: nx-pdp-fade .35s ease; }
@keyframes nx-pdp-fade { from { opacity: 0; } to { opacity: 1; } }
.nx-pdp-slide img { width: 100%; height: auto; border-radius: var(--rounded-lg, 12px); background: rgb(var(--background-primary)); }

/* thumbnails: vertical rail on desktop, horizontal on mobile */
.nx-pdp-thumbs { order: -1; }
.nx-pdp-thumbs .product-gallery__thumbnail-list { display: grid; grid-auto-flow: row; gap: var(--spacing-2-5, 10px); }
.nx-thumb { background: none; border: 2px solid transparent; border-radius: var(--rounded-sm, 8px); padding: 4px; cursor: pointer; transition: border-color .25s, transform .25s cubic-bezier(.22,1,.36,1); width: 72px; }
.nx-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; }
.nx-thumb:hover { transform: translateY(-2px); }
.nx-thumb.is-selected { border-color: rgb(var(--text-primary)); }
@media (max-width: 899px) {
  .nx-pdp-gallery { grid-template-columns: 1fr !important; }
  .nx-pdp-thumbs { order: 2; }
  .nx-pdp-thumbs .product-gallery__thumbnail-list { grid-auto-flow: column; overflow-x: auto; max-height: none; }
}

/* info column: title / price / qty / button typography */
.product-info__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; margin: 0; }
.product-info .price, .product-info .price-list { font-size: 30px !important; font-weight: 800; color: rgb(var(--text-primary)) !important; }
.product-info .price del { opacity: .45; font-size: .7em; }
.product-info__separator { border: 0; border-top: 1px solid rgb(var(--text-primary) / .12); margin-block: var(--spacing-2); }
.quantity-selector { display: flex; align-items: center; border: 1px solid rgb(var(--text-primary) / .2); border-radius: var(--rounded-sm, 8px); width: max-content; overflow: hidden; }
.quantity-selector__button { background: none; border: 0; width: 44px; height: 44px; font-size: 18px; cursor: pointer; color: inherit; transition: background-color .2s; }
.quantity-selector__button:hover { background: rgb(var(--text-primary) / .08); }
.quantity-selector__input { width: 56px; text-align: center; border: 0; background: none; font: inherit; font-weight: 700; height: 44px; -moz-appearance: textfield; appearance: textfield; color: inherit; }
.quantity-selector__input::-webkit-outer-spin-button, .quantity-selector__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-pdp-atc { display: inline-flex !important; justify-content: center; width: 100%; }

/* video showcase: rounded, black bg; video+text side-by-side like the original */
.nx-pdp-videotext { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: var(--spacing-12); align-items: center; }
.nx-pdp-videotext-content .h2 { font-size: clamp(24px, 2.6vw, 38px); margin: 0 0 var(--spacing-4); }
@media (max-width: 899px) { .nx-pdp-videotext { grid-template-columns: 1fr; gap: var(--spacing-6); } }
.nx-pdp-video { display: block; border-radius: var(--rounded-lg, 16px); overflow: hidden; background: #000; }
.nx-pdp-video video { width: 100%; height: auto; display: block; aspect-ratio: 1.775; object-fit: cover; }

/* dark custom-liquid bands */
.nx-pdp-dark .section { background: transparent; }

/* Woo tabs restyle (keep but blend with Lemon typography) */
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs { display: flex; gap: var(--spacing-6); list-style: none; padding: 0; margin: 0 0 var(--spacing-8); border-bottom: 1px solid rgb(var(--text-primary) / .12); }
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs li { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs li::before, .nx-pdp-tabs-section .woocommerce-tabs ul.tabs li::after { display: none !important; }
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs li a { display: block; padding: var(--spacing-4) 2px; font-weight: 700; font-size: var(--text-lg, 18px); color: rgb(var(--text-primary) / .5); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; }
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs li.active a { color: rgb(var(--text-primary)); border-bottom-color: rgb(var(--text-primary)); }
.nx-pdp-tabs-section .woocommerce-tabs ul.tabs li a:hover { color: rgb(var(--text-primary)); }
.nx-pdp-tabs-section .woocommerce-Tabs-panel { max-width: 900px; }
.nx-pdp-tabs-section .woocommerce-Tabs-panel h2 { font-size: var(--text-xl, 22px); margin-block: var(--spacing-8) var(--spacing-4); }
/* review form polish */
.nx-pdp-tabs-section .comment-reply-title { display: block; font-weight: 700; margin-block-end: var(--spacing-4); }
.nx-pdp-tabs-section #review_form input[type=text], .nx-pdp-tabs-section #review_form input[type=email], .nx-pdp-tabs-section #review_form textarea { width: 100%; padding: var(--spacing-3) var(--spacing-4); border: 1px solid rgb(var(--text-primary) / .2); border-radius: var(--rounded-sm, 8px); font: inherit; background: rgb(var(--background-primary)); color: inherit; }
.nx-pdp-tabs-section #review_form .stars a { font-size: 20px; }

/* product meta (SKU/category) — subtle */
.nx-pdp-tabs-section .product_meta { font-size: var(--text-sm, 14px); opacity: .65; margin-block-start: var(--spacing-8); }

/* hide Woo default gallery/summary remnants if any hook fires */
.single-product div.product .woocommerce-product-gallery { display: none !important; }

/* ---------- PDP CTA: premium black button (was low-contrast gray secondary) ---------- */
.nx-pdp-atc.button--secondary {
  --button-background: var(--text-primary) / 1;
  --button-text-color: var(--background-primary);
  background: rgb(var(--text-primary)) !important;
  color: rgb(var(--background-primary)) !important;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (pointer: fine) {
  .nx-pdp-atc.button--secondary:hover { background: rgb(var(--text-primary) / .88) !important; }
}
/* gallery images: keep hidden slides rendered so lazy src loads on first switch */
.nx-pdp-slide img { min-height: 1px; }

/* ---------- PDP fix 1: thumbnail rail — kill horizontal scrollbar ----------
   lemon.css sizes the thumb column to 64px but our thumbs are 72px → 8px
   overflow → overflow:auto produced a horizontal slide bar. Fit exactly. */
.nx-pdp-thumbs,
.nx-pdp-thumbs .product-gallery__thumbnail-list { overflow: visible !important; }
.nx-pdp-thumbs .product-gallery__thumbnail-list { grid-auto-columns: 76px !important; max-height: none !important; }
.nx-thumb { width: 76px; }

/* ---------- PDP fix 2: tighten per-section vertical gaps (was 64px+64px everywhere) ---------- */
.single-product main .shopify-section .section { padding-block-start: var(--spacing-8); padding-block-end: var(--spacing-8); }
.single-product .shopify-section--main-product .section { padding-block-start: var(--spacing-6); padding-block-end: var(--spacing-10); }
.single-product .shopify-section--rich-text .prose { padding-block: var(--spacing-8) !important; }
.single-product .shopify-section--video + .shopify-section--video .section { padding-block-start: 0; }
.single-product .nx-pdp-dark .section { padding-block: var(--spacing-10) var(--spacing-4); }
.single-product .nx-pdp-dark + .nx-pdp-dark .section { padding-block-start: var(--spacing-4); }
.single-product .nx-pdp-tabs-section .section { padding-block: var(--spacing-10) var(--spacing-8); }

/* ---------- PDP fix 3: kill the light-gray voids around dark blocks ----------
   Measured: gap above "Why It Stands Out" = vidSecPadB(32)+whySecPadT(32)=64px;
   gap between the two dark blocks = whySecPadB(32)+boxSecPadT(16)+pkgMarginT(40)=88px.
   Dark blocks are rounded cards inside transparent sections — collapse the
   section padding around them so the cards sit nearly flush. */
.single-product main .shopify-section--video .section { padding-block-end: var(--spacing-4) !important; }
.single-product .nx-pdp-dark .section { padding-block: var(--spacing-4) 0 !important; }
.single-product .nx-pdp-dark + .nx-pdp-dark .section { padding-block: 0 0 !important; }
.single-product .nexo-package-section { margin-top: var(--spacing-4) !important; }
.single-product .nx-pdp-tabs-section .section { padding-block-start: var(--spacing-10); }

/* ---------- PDP fix 4: dark blocks become a seamless full-bleed dark band ----------
   Root cause of the remaining light-gray seam: the dark cards are rounded boxes
   floating on the light page background, with section padding around them. Fill
   the SECTION background dark + full-bleed, drop the card radius/margin so the
   two dark blocks merge into one continuous band with no gray showing through. */
.single-product .nx-pdp-dark { background: linear-gradient(135deg, #0a0a0f 0%, #15151e 100%); }
.single-product .nx-pdp-dark > .section { padding-block: 0 !important; padding-inline: 0 !important; }
.single-product .nx-pdp-dark .nexo-desk-features,
.single-product .nx-pdp-dark .nexo-package-section {
  border-radius: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
}
/* video block above the dark band: flush — no gray seam at all */
.single-product main .shopify-section--video .section { padding-block-end: 0 !important; }
/* tabs block after the dark band: give it breathing room from the dark */
.single-product .nx-pdp-tabs-section .section { padding-block-start: var(--spacing-12) !important; }
/* keep inner card spacing (the blocks own top/bottom padding) but cap the huge 60px */
.single-product .nexo-desk-features { padding-block: clamp(28px, 4vw, 44px) !important; }
.single-product .nexo-package-section { padding-block: clamp(28px, 4vw, 44px) !important; }

/* ---------- PDP fix 5: second video's rounded corners leaked gray pockets ----------
   The video card has border-radius; where it meets the dark band the curved
   corners showed the light page background. Paint the SECOND video section
   (video + video adjacent sibling) with the same dark gradient and square off
   the video's bottom corners so the dark band starts seamlessly. */
.single-product main .shopify-section--video + .shopify-section--video { background: linear-gradient(135deg, #0a0a0f 0%, #15151e 100%); }
.single-product main .shopify-section--video + .shopify-section--video .nx-pdp-video,
.single-product main .shopify-section--video + .shopify-section--video .nx-pdp-video video { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }