/* ============================================================
   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; }

/* ---------- 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); }

/* ---------- 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; }

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