/* MoonLight_X — single-product.css
   Gallery zoom · Sticky add-to-cart · Qty buttons · Variation image swap */

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT GALLERY
══════════════════════════════════════════════════════════════════ */

/* Main image container */
.woocommerce-product-gallery__image:first-child {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #f8f8f8;
  cursor: zoom-in;
}
.woocommerce-product-gallery__image:first-child img {
  width: 100% !important;
  height: auto !important;
  display: block;
  transition: opacity .3s ease, transform .4s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Force WC gallery visible — wc-single-product.js sets opacity:0 on init
   and reveals it after flexslider. Since we disabled flexslider, we force it. */
.woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
  overflow: visible !important; /* allow thumb strip to flow outside */
}

/* Kill WC zoom.js ghost image — disabled via filter but defensively hidden too */
.woocommerce-product-gallery > .zoomImg,
.mlx-single-product__gallery > .zoomImg,
.woocommerce-product-gallery__wrapper > .zoomImg {
  display: none !important;
}

/* Hide non-first gallery images — WC stacks them vertically without FlexSlider.
   They become visible when user clicks a thumbnail (JS swaps main src instead). */
.woocommerce-product-gallery__image:not(:first-child) {
  display: none !important;
}

/* Zoom active state */
.woocommerce-product-gallery__image:first-child.mlx-zoom-active {
  cursor: crosshair;
}
.woocommerce-product-gallery__image:first-child.mlx-zoom-active img {
  transition: transform .1s ease; /* fast move tracking */
}

/* Zoom toggle button */
.mlx-zoom-toggle {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  color: #444;
  transition: background .2s, color .2s;
}
.mlx-zoom-toggle:hover,
.mlx-zoom-toggle.is-active { background: var(--mlx-bg-card,#fff); color: var(--mlx-color-primary, #0a0a0a); }
.mlx-zoom-toggle svg { width: 18px; height: 18px; }

/* Gallery wrapper — contain all images, prevent stacking */
.woocommerce-product-gallery {
  position: relative;
  overflow: hidden;
}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  /* WC wraps all images in this - make it block so images stack correctly */
  display: block;
}

/* Thumbnail strip — appended to .mlx-single-product__gallery column by JS */
.mlx-gallery-thumbs {
  display: flex;
  flex-wrap: nowrap;        /* single row */
  overflow-x: auto;         /* scroll if too many thumbs */
  gap: .5rem;
  margin-top: .75rem;
  padding: 0 0 4px;         /* bottom padding for scrollbar */
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
  -webkit-overflow-scrolling: touch;
}
.mlx-gallery-thumbs::-webkit-scrollbar { height: 3px; }
.mlx-gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }
.mlx-gallery-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f5f5f5;
  padding: 0;
  transition: border-color .2s, transform .15s, box-shadow .15s;
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .mlx-gallery-thumb { width: 56px; height: 56px; }
  .mlx-gallery-thumbs { gap: .375rem; }
}
.mlx-gallery-thumb:hover { transform: scale(1.04); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mlx-gallery-thumb.is-active { border-color: var(--mlx-color-primary, #0a0a0a); }
.mlx-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep WC flex-control-thumbs hidden — we build our own strip */
.flex-control-thumbs { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   GALLERY — LEFT SIDEBAR THUMBNAIL LAYOUT
   .mlx-gallery--thumbs-left is added to .mlx-single-product__gallery
══════════════════════════════════════════════════════════════════ */
.mlx-single-product__gallery.mlx-gallery--thumbs-left {
  display: flex !important;
  flex-direction: row !important;
  gap: .625rem;
  align-items: flex-start;
}

/* Thumb strip: vertical column on the left */
.mlx-single-product__gallery.mlx-gallery--thumbs-left .mlx-gallery-thumbs--left {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  width: 76px;
  gap: .5rem;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  order: -1; /* always first */
  padding-right: 2px;
}
.mlx-single-product__gallery.mlx-gallery--thumbs-left .mlx-gallery-thumbs--left .mlx-gallery-thumb {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0;
}

/* Gallery takes remaining space */
.mlx-single-product__gallery.mlx-gallery--thumbs-left .woocommerce-product-gallery {
  flex: 1;
  min-width: 0;
}

/* Responsive: collapse to row on mobile */
@media (max-width: 767px) {
  .mlx-single-product__gallery.mlx-gallery--thumbs-left {
    flex-direction: column !important;
  }
  .mlx-single-product__gallery.mlx-gallery--thumbs-left .mlx-gallery-thumbs--left {
    flex-direction: row !important;
    width: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    order: 0;
  }
}

/* Sticky gallery on desktop — the entire column including thumbs stays sticky */
@media (min-width: 1024px) {
  .mlx-sticky-gallery .mlx-single-product__gallery {
    position: sticky;
    top: calc(var(--mlx-header-h, 70px) + 1rem);
    align-self: flex-start;
    /* Column must not overflow — thumbs flow inside it */
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VARIATION IMAGE SWAP — smooth fade transition
══════════════════════════════════════════════════════════════════ */
.woocommerce-product-gallery__image:first-child img[data-original-src] {
  transition: opacity .3s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   STICKY ADD-TO-CART BAR
══════════════════════════════════════════════════════════════════ */
.mlx-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.mlx-sticky-atc.is-visible {
  transform: translateY(0);
}

.mlx-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .875rem;
}

.mlx-sticky-atc__img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.07);
}

.mlx-sticky-atc__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.mlx-sticky-atc__title {
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mlx-color-primary, #0a0a0a);
}
.mlx-sticky-atc__price {
  font-size: .875rem;
  color: var(--mlx-color-accent, #e84545);
  font-weight: 600;
}
.mlx-sticky-atc__price del { color: #aaa; font-weight: 400; text-decoration: line-through; margin-right: .25rem; }

.mlx-sticky-atc__btn {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 160px;
}

@media (max-width: 639px) {
  .mlx-sticky-atc__img  { display: none; }
  .mlx-sticky-atc__btn  { min-width: 120px; font-size: .8125rem; }
  .mlx-sticky-atc__title{ font-size: .875rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   QUANTITY BUTTONS
══════════════════════════════════════════════════════════════════ */
/* Qty wrapper — styles in woocommerce-ui.css */

/* ═══════════════════════════════════════════════════════════════════
   SIZE GUIDE TRIGGER — enhanced
══════════════════════════════════════════════════════════════════ */
.mlx-size-guide-trigger {
  margin: .5rem 0 1rem;
}
.mlx-size-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--mlx-color-accent, #e84545);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.mlx-size-guide-btn:hover { color: var(--mlx-color-primary, #0a0a0a); }
.mlx-size-guide-btn svg   { width: 16px; height: 16px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════
   SINGLE PRODUCT SUMMARY — tighten up spacing
══════════════════════════════════════════════════════════════════ */
.mlx-single-product__summary {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding-block: .25rem;
}

/* ── Breadcrumb inside summary (fallback if not standalone) ── */
.mlx-single-product__summary .woocommerce-breadcrumb {
  font-size: .8125rem;
  color: #aaa;
  margin: 0;
}

/* ── Title ── */
.mlx-single-product__summary .product_title {
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--mlx-color-primary, #0a0a0a);
}

/* ── Rating ── */
.mlx-single-product__summary .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: -.25rem 0 0;
}
.mlx-single-product__summary .star-rating { font-size: .875em; }
.mlx-single-product__summary .woocommerce-review-link {
  font-size: .8125rem;
  color: #888;
  text-decoration: none;
}
.mlx-single-product__summary .woocommerce-review-link:hover { color: var(--mlx-color-accent, #e84545); }

/* ── Price ── */
.mlx-single-product__summary .price {
  font-size: 2rem;
  font-weight: 700;
  margin: .125rem 0 0;
  line-height: 1;
  color: var(--mlx-color-primary, #0a0a0a);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .375rem;
}
.mlx-single-product__summary .price del {
  opacity: .4;
  font-size: .65em;
  font-weight: 500;
  text-decoration: line-through;
}
.mlx-single-product__summary .price ins {
  text-decoration: none;
  color: var(--mlx-color-accent, #e84545);
}
/* Price range separator */
.mlx-single-product__summary .price .woocommerce-Price-amount + .woocommerce-Price-amount::before {
  content: '–';
  margin: 0 .125rem;
  opacity: .4;
  font-weight: 400;
}

/* ── Divider between price and variations ── */
.mlx-single-product__summary .price + *:not(.woocommerce-variation-price) {
  padding-top: .75rem;
  border-top: 1px solid rgba(0,0,0,.07);
}

/* ── Short description ── */
.mlx-single-product__summary .woocommerce-product-details__short-description {
  font-size: .9375rem;
  line-height: 1.75;
  color: #555;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding-bottom: .875rem;
  margin-bottom: .125rem;
}
.mlx-single-product__summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* Variations table */
.mlx-variations-table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.mlx-variations-table tr { border-bottom: 1px solid #f0f0f0; }
.mlx-variations-table tr:last-child { border: none; }
.mlx-variations-table th {
  width: 120px;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .75rem 0;
  vertical-align: top;
  padding-top: .875rem;
  text-align: left;
  color: #777;
}
.mlx-variations-table td { padding: .625rem 0; vertical-align: middle; }
.mlx-variations-table select {
  padding: .5rem .75rem;
  border: 1.5px solid var(--mlx-input-border, #ddd);
  border-radius: 6px;
  font-size: .875rem;
  background: #fff;
  cursor: pointer;
  min-width: 140px;
}
.mlx-variations-table .reset_variations a {
  margin-left: .75rem;
  font-size: .8125rem;
  color: #888;
  text-decoration: none;
}
.mlx-variations-table .reset_variations a:hover { color: var(--mlx-color-accent, #e84545); }

/* Add to cart row — simple products */
.cart {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.cart .quantity { flex-shrink: 0; }

/* Variable product form — stack attributes ABOVE qty+ATC */
form.cart.mlx-variations-form,
.variations_form.cart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
/* The ATC row (qty + button) is flex row */
.variations_form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.variations_form.cart .woocommerce-variation-add-to-cart .quantity { flex-shrink: 0; }
.cart .single_add_to_cart_button {
  flex: 1;
  min-width: 180px;
  padding: 1rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  letter-spacing: .01em;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: background .2s, box-shadow .2s, transform .15s !important;
}
.cart .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.cart .single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.cart .single_add_to_cart_button::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M2 3h2l2.5 9h9L17 7H6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='16' r='1' fill='%23fff'/%3E%3Ccircle cx='15' cy='16' r='1' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

/* Quick buy sits below cart row */
.mlx-quick-buy-btn {
  margin-top: .5rem;
  width: 100%;
  border-radius: 8px !important;
  padding: .875rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: background .2s, border-color .2s !important;
}

/* Product meta */
.product_meta {
  font-size: .875rem;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-top: .5rem;
  border-top: 1px solid #f0f0f0;
}
.product_meta a { color: #555; text-decoration: none; }
.product_meta a:hover { color: var(--mlx-color-accent, #e84545); }
.product_meta .sku_wrapper .sku { color: #555; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — single column
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .mlx-single-product { grid-template-columns: 1fr !important; }
  .mlx-single-product__summary .price { font-size: 1.5rem; }
  .mlx-sticky-atc__info { display: none; }
  .mlx-sticky-atc__btn  { flex: 1; max-width: 100%; }
  .mlx-sticky-atc__inner { gap: .75rem; }
}

@media (max-width: 479px) {
  .mlx-gallery-thumb { width: 56px !important; height: 56px !important; }
  .cart { flex-direction: column; align-items: stretch; }
  .cart .single_add_to_cart_button { flex: none; width: 100%; }
  .quantity { align-self: flex-start; }
}

/* Ensure gallery column fully contains the thumbs on all screen sizes */
.mlx-single-product__gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mlx-single-product__gallery .woocommerce-product-gallery {
  flex: 0 0 auto;
}
.mlx-single-product__gallery .mlx-gallery-thumbs {
  flex: 0 0 auto;
  margin-top: .625rem;
}
/* ═══════════════════════════════════════════════════════════════════
   LIGHTBOX — custom modal, no library
══════════════════════════════════════════════════════════════════ */
.mlx-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.mlx-lightbox.is-open { display: flex; }

.mlx-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}

.mlx-lb__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  gap: .75rem;
}

.mlx-lb__img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  transition: opacity .25s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.mlx-lb__counter {
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  letter-spacing: .04em;
}

/* Close button */
.mlx-lb__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
  backdrop-filter: blur(4px);
}
.mlx-lb__close:hover { background: rgba(255,255,255,.22); }

/* Prev / Next */
.mlx-lb__prev,
.mlx-lb__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background .2s, transform .15s;
  backdrop-filter: blur(4px);
}
.mlx-lb__prev { left: 1rem; }
.mlx-lb__next { right: 1rem; }
.mlx-lb__prev:hover,
.mlx-lb__next:hover { background: rgba(255,255,255,.2); }
.mlx-lb__prev:active { transform: translateY(-50%) scale(.94); }
.mlx-lb__next:active { transform: translateY(-50%) scale(.94); }
.mlx-lb__prev svg,
.mlx-lb__next svg    { width: 24px; height: 24px; pointer-events: none; }

@media (max-width: 479px) {
  .mlx-lb__prev { left: .375rem; }
  .mlx-lb__next { right: .375rem; }
}
/* ── Generic thumb-left: works in Elementor widget context ── */
.mlx-gallery--thumbs-left {
  display: flex !important;
  flex-direction: row !important;
  gap: .625rem;
  align-items: flex-start;
}
.mlx-gallery--thumbs-left .mlx-gallery-thumbs--left {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  width: 76px;
  gap: .5rem;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  order: -1;
}
.mlx-gallery--thumbs-left .mlx-gallery-thumbs--left .mlx-gallery-thumb {
  width: 72px !important;
  height: 72px !important;
  flex-shrink: 0;
}
.mlx-gallery--thumbs-left .woocommerce-product-gallery {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .mlx-gallery--thumbs-left {
    flex-direction: column !important;
  }
  .mlx-gallery--thumbs-left .mlx-gallery-thumbs--left {
    flex-direction: row !important;
    width: auto;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Product page ATC qty sizing handled in woocommerce-ui.css */

/* ── Sticky gallery ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .mlx-sticky-gallery .mlx-single-product__gallery {
    align-self: start;
  }
}

/* ── Related / Upsell sections ── */
.related.products,
.up-sells,
.mlx-related-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--mlx-border, #eee);
}

/* ── Related products responsive grid ─────────────────────────── */
.mlx-related-section .mlx-related-grid {
  display: grid !important;
  grid-template-columns: repeat( var(--mlx-rel-cols, 4), minmax(0,1fr) ) !important;
  gap: var(--mlx-gap, 1.25rem);
}
@media (min-width:1024px) and (max-width:1279px) {
  .mlx-related-section .mlx-related-grid { grid-template-columns: repeat( var(--mlx-rel-cols-l, 3), minmax(0,1fr) ) !important; }
}
@media (min-width:768px) and (max-width:1023px) {
  .mlx-related-section .mlx-related-grid { grid-template-columns: repeat( var(--mlx-rel-cols-t, 2), minmax(0,1fr) ) !important; }
}
@media (max-width:767px) {
  .mlx-related-section .mlx-related-grid { grid-template-columns: repeat( var(--mlx-rel-cols-m, 2), minmax(0,1fr) ) !important; }
}