/* ==========================================================================
 Phase 8 , Mobile PDP gallery polish (mobile-only, max-width: 768px)
 - Fixes collapsed .flex-control-thumbs container (was width: 4px)
 - Renders thumbs as horizontal scroll strip beneath main image
 - Hardens sticky ATC visual restraint + safe-area padding
 - Reinforces WC PhotoSwipe lightbox affordance (tap-to-zoom)
 ========================================================================== */

@media (max-width: 768px) {

 /* ----- Main gallery image: full-width, tap target = whole image ----- */
 .woocommerce div.product .woocommerce-product-gallery {
 width: 100% !important;
 margin: 0 0 12px;
 position: relative;
 }

 .woocommerce div.product .woocommerce-product-gallery .flex-viewport {
 border-radius: 8px;
 overflow: hidden;
 }

 /* PhotoSwipe trigger (magnifier) , visually clear pinch/zoom affordance */
 .woocommerce-product-gallery__trigger {
 top: 12px !important;
 right: 12px !important;
 width: 40px;
 height: 40px;
 background: rgba(255, 255, 255, 0.92);
 border-radius: 50%;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
 display: flex !important;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 text-decoration: none;
 z-index: 10;
 }

 .woocommerce-product-gallery__image img {
 touch-action: manipulation; /* enables double-tap zoom on supported browsers */
 }

 /* ----- Override 3rd-party "alex-*" vertical thumbnail wrapper (JS-injected) -----
 The plugin wraps FlexSlider thumbs in vertical .alex-thumb-panel/track/nav
 (92px column). On mobile we need horizontal layout. */
 .alex-gallery-main {
 display: block !important;
 width: 100% !important;
 }

 .alex-thumb-panel {
 width: 100% !important;
 max-width: 100% !important;
 display: block !important;
 margin: 12px 0 16px !important;
 position: static !important;
 }

 .alex-thumb-nav,
 .alex-thumb-prev,
 .alex-thumb-next {
 display: none !important; /* hide up/down chevrons; horizontal scroll instead */
 }

 .alex-thumb-track {
 width: 100% !important;
 max-width: 100% !important;
 height: auto !important;
 max-height: none !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 position: static !important;
 transform: none !important;
 }

 /* ----- Thumbnail strip , THIS IS THE FIX -----
 Existing container was collapsing to width: 4px on mobile because the
 parent column constrains flex children. Force width + horizontal scroll. */
 .woocommerce div.product .flex-control-thumbs,
 .woocommerce div.product .flex-control-nav.flex-control-thumbs,
 .alex-thumb-track .flex-control-thumbs,
 .alex-thumb-panel .flex-control-thumbs {
 width: 100% !important;
 max-width: 100% !important;
 display: flex !important;
 flex-wrap: nowrap !important;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 gap: 8px !important;
 padding: 4px 2px 8px !important;
 margin: 12px 0 16px !important;
 list-style: none !important;
 scroll-snap-type: x mandatory;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 }

 .woocommerce div.product .flex-control-thumbs::-webkit-scrollbar {
 height: 3px;
 }

 .woocommerce div.product .flex-control-thumbs::-webkit-scrollbar-thumb {
 background: rgba(0, 0, 0, 0.18);
 border-radius: 2px;
 }

 .woocommerce div.product .flex-control-thumbs li {
 flex: 0 0 64px !important;
 width: 64px !important;
 height: 64px !important;
 margin: 0 !important;
 padding: 0 !important;
 list-style: none !important;
 scroll-snap-align: start;
 border-radius: 6px;
 overflow: hidden;
 border: 2px solid transparent;
 transition: border-color 0.15s ease, opacity 0.15s ease;
 background: #f7f5f1;
 }

 .woocommerce div.product .flex-control-thumbs li img {
 width: 100% !important;
 height: 100% !important;
 max-width: none !important;
 object-fit: cover !important;
 opacity: 0.7;
 cursor: pointer;
 display: block;
 }

 .woocommerce div.product .flex-control-thumbs li img:hover,
 .woocommerce div.product .flex-control-thumbs li img.flex-active {
 opacity: 1;
 }

 .woocommerce div.product .flex-control-thumbs li:has(img.flex-active) {
 border-color: #1a3a52; /* Nilo navy accent */
 }

 /* ----- FlexSlider arrow nav: hide on mobile (swipe instead) ----- */
 .woocommerce div.product .flex-direction-nav {
 display: none !important;
 }

 /* ----- Sticky ATC bar , visual restraint per blueprint line 1381 ----- */
 .nilo-sticky-atc {
 background: rgba(255, 255, 255, 0.97) !important;
 backdrop-filter: saturate(180%) blur(8px);
 -webkit-backdrop-filter: saturate(180%) blur(8px);
 border-top: 1px solid rgba(0, 0, 0, 0.08);
 box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
 padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
 }

 .nilo-sticky-atc__inner {
 max-width: 100%;
 display: flex !important;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 }

 .nilo-sticky-atc__price {
 font-weight: 600;
 font-size: 16px;
 color: #1a1a1a;
 }

 .nilo-sticky-atc__btn {
 flex: 0 0 auto;
 min-height: 44px; /* tap-friendly per blueprint line 1387 */
 padding: 10px 20px;
 font-size: 15px;
 font-weight: 600;
 border-radius: 6px;
 }

 /* Add bottom padding to body so sticky ATC doesn't overlap final content */
 body.single-product.has-sticky-atc {
 padding-bottom: 76px !important;
 }

 /* ----- Tap-friendly variant buttons (holes/no holes etc.) ----- */
 .woocommerce div.product form.cart .variations select,
 .woocommerce div.product form.cart .variations .button-variable-item {
 min-height: 44px;
 font-size: 15px;
 }
}
/* ==========================================================================
 Phase 8b , Mobile PDP critical-bug patch (mobile-only, max-width: 768px)
 Appended 2026-05-08 , fixes 3 mobile PDP regressions:
 B1. alex-thumb-panel rendering ABOVE main image (should be below)
 B2. .nilo-mobile-search-toggle inheriting pink/magenta color
 B3. Elementor-sticky duplicate "spacer" pushing buy-box ~1200px below gallery
 ========================================================================== */

@media (max-width: 768px) {

 /* ----- B1: Reorder alex-product-gallery flex children so MAIN IMAGE comes first,
 thumbnail strip second. Both children currently have order:0; flex order alone
 does the reordering without touching DOM. ----- */
 .alex-product-gallery-root {
 display: flex !important;
 flex-direction: column !important;
 }
 .alex-product-gallery-root .alex-gallery-main {
 order: 1 !important;
 }
 .alex-product-gallery-root .alex-thumb-panel {
 order: 2 !important;
 }

 /* ----- B2: Force the mobile search-toggle icon to brand navy in ALL states.
 Resting color was inheriting #cc3366 from somewhere upstream; override
 resting + hover + focus + active. ----- */
 .nilo-mobile-search-toggle,
 .nilo-mobile-search-toggle:hover,
 .nilo-mobile-search-toggle:focus,
 .nilo-mobile-search-toggle:active,
 .nilo-mobile-search-toggle:focus-visible {
 color: #0a2540 !important;
 background: transparent !important;
 outline: none !important;
 }
 .nilo-mobile-search-toggle svg,
 .nilo-mobile-search-toggle:hover svg,
 .nilo-mobile-search-toggle:focus svg,
 .nilo-mobile-search-toggle:active svg {
 fill: #0a2540 !important;
 color: #0a2540 !important;
 }

 /* ----- B3: Kill the elementor-sticky "spacer" duplicate on mobile PDP.
 On desktop the gallery is in a 2-col grid; sticky behavior keeps the image
 in view as the buy-box scrolls. On mobile the grid collapses to single column
 and the sticky-spacer ghost (.elementor-sticky__spacer) reserves an empty
 588px slot, pushing the buy-box column ~1200px below the gallery.
 Fix: hide the spacer + neutralize sticky behavior on mobile. ----- */
 .woocommerce div.product .elementor-sticky__spacer,
 .single-product .elementor-sticky__spacer {
 display: none !important;
 height: 0 !important;
 min-height: 0 !important;
 }
 .woocommerce div.product .elementor-widget.elementor-sticky,
 .woocommerce div.product .elementor-widget.elementor-sticky--active,
 .woocommerce div.product .elementor-widget.elementor-sticky--effects {
 position: static !important;
 top: auto !important;
 width: auto !important;
 max-width: 100% !important;
 transform: none !important;
 }

 /* Force the parent grid that holds gallery + buy-box to behave as a single-column
 block flow on mobile so grid-template-rows from desktop (e.g. "1196px 1641px")
 cannot reserve empty space. */
 .woocommerce div.product .elementor-element-5ce5e26,
 .single-product .elementor-element-5ce5e26 {
 display: block !important;
 grid-template-rows: none !important;
 grid-template-columns: none !important;
 }
}