/* ==========================================================================
   Single product gallery — FIXED main frame size (desktop + mobile)
   Scoped to body.single-product only.
   Note: If a source file has large empty margins baked into the image, re-crop
   and re-upload with tighter product boundaries; CSS cannot remove that padding.
   ========================================================================== */

body.single-product {
  --ax-gallery-frame-size: 560px;
}

/* ==========================================================================
   Desktop only — fixed 560×560 gallery stage
   ========================================================================== */
@media (min-width: 769px) {
  body.single-product .woocommerce div.product div.images,
  body.single-product .woocommerce-page div.product div.images {
    width: var(--ax-gallery-frame-size) !important;
    max-width: var(--ax-gallery-frame-size) !important;
    min-width: var(--ax-gallery-frame-size) !important;
    flex: 0 0 var(--ax-gallery-frame-size) !important;
  }

  body.single-product .ax-product-gallery,
  body.single-product .ax-product-gallery.images {
    display: block;
    width: var(--ax-gallery-frame-size) !important;
    max-width: var(--ax-gallery-frame-size) !important;
    min-width: var(--ax-gallery-frame-size) !important;
    margin-left: 0;
    margin-right: 0;
    position: relative !important;
    top: -40px !important;
    box-sizing: border-box;
  }

  body.single-product .ax-product-gallery__main {
    position: relative;
    display: block;
    width: var(--ax-gallery-frame-size) !important;
    max-width: var(--ax-gallery-frame-size) !important;
    min-width: var(--ax-gallery-frame-size) !important;
    height: var(--ax-gallery-frame-size) !important;
    min-height: var(--ax-gallery-frame-size) !important;
    max-height: var(--ax-gallery-frame-size) !important;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: #ffffff;
    overflow: visible;
    flex: none;
  }

  body.single-product .ax-product-gallery,
  body.single-product .ax-product-gallery.images,
  body.single-product .woocommerce div.product div.images,
  body.single-product .woocommerce-page div.product div.images {
    overflow: visible;
  }

  body.single-product .ax-product-gallery__main #ax-main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    margin: 0;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 1;
    cursor: zoom-in;
  }
}

/* Shared frame chrome (desktop + mobile) */
body.single-product .ax-product-gallery__main {
  position: relative;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #ffffff;
  overflow: visible;
}

@media (max-width: 768px) {
  body.single-product .ax-product-gallery__main {
    overflow: hidden;
  }
}

/* Navigation arrows — overlap frame edges (desktop); inside on mobile */
body.single-product .ax-product-gallery__main .ax-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #242323;
  border: 1px solid #242323;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  color: #f7e9cc;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 15;
  margin: 0;
  padding: 0;
}

@media (min-width: 769px) {
  body.single-product .ax-product-gallery__main .ax-prev {
    left: -22px;
  }

  body.single-product .ax-product-gallery__main .ax-next {
    right: -22px;
  }
}

body.single-product .ax-product-gallery__main .ax-nav:hover {
  border-color: #242323;
}

/* Discount / status badges — top-right of frame */
body.single-product .ax-product-gallery__main .single-product-badges {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
  pointer-events: none;
}

/* Horizontal thumbnails strip */
.ax-product-gallery__thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0 0;
  padding: 0;
}

.ax-product-gallery__thumbs .ax-thumb {
  display: block;
  width: 100%;
  padding: 6px;
  border-radius: 8px;
  outline: 2px solid rgba(0,0,0,0.06); /* default subtle frame */
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: outline-color .2s ease, box-shadow .2s ease;
}

.ax-product-gallery__thumbs .ax-thumb:hover {
  outline-color: rgba(0,0,0,0.12);
}

.ax-product-gallery__thumbs .ax-thumb.is-active {
  outline-color: #242323; /* match product hover red */
  box-shadow: 0 0 0 6px rgba(220,38,38,0.12);
}

body.single-product .ax-product-gallery__thumbs .ax-thumb-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: center center;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .ax-product-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
} 

/* Extra description spacing */
.ax-extra-description {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

/* Lightbox overlay — full-screen photo viewer, no boxed/white frame.
   The photo is sized off its own intrinsic aspect ratio (object-fit:
   contain against the viewport) instead of a fixed square box, so it fills
   as much of the screen as it can without letterboxing inside a frame.
   Additional photos live as a small strip pinned to the bottom-right
   corner instead of centered under the image. */
.ax-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483646;
}
.ax-lightbox.active { display: flex; }

.ax-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}

.ax-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Strip the shared .ax-product-gallery__main frame chrome (white background,
   border, fixed square size) for the lightbox specifically. */
.ax-lightbox .ax-lightbox__stage.ax-product-gallery__main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
  overflow: visible !important;
  touch-action: pan-y;
}

.ax-lightbox .ax-lightbox__stage.ax-product-gallery__main .ax-lightbox__img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  margin: 0 auto !important;
  /* Definite (not auto/max-only) size so a smaller source photo is scaled
     UP to fill the viewport instead of only ever shrinking to fit. */
  width: 94vw !important;
  height: 90vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  box-shadow: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ax-lightbox__close,
.ax-lightbox__nav {
  position: fixed;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 7;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ax-lightbox__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

.ax-lightbox__nav {
  top: 50%;
  margin-top: -28px;
  width: 56px;
  height: 56px;
}

.ax-lightbox__prev { left: 20px; }
.ax-lightbox__next { right: 20px; }

.ax-lightbox__close:hover,
.ax-lightbox__nav:hover { background: rgba(255,255,255,0.2); }

.ax-lightbox.no-nav .ax-lightbox__nav { display: none; }

.ax-lightbox__thumbs {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Additional photos — small strip pinned to the bottom-right corner,
   floating over the full-screen photo. Reuses .ax-product-gallery__thumbs /
   .ax-thumb (shared with the pre-zoom strip) with dark-overlay styling. */
body.single-product .ax-lightbox .ax-product-gallery__thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  width: auto !important;
  max-width: min(360px, calc(100vw - 40px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
  box-sizing: border-box;
  z-index: 6 !important;
}

body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
  border-radius: 6px !important;
  outline: 2px solid rgba(255,255,255,0.35) !important;
  background: rgba(0,0,0,0.45) !important;
  box-sizing: border-box !important;
}

body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb:hover {
  outline-color: rgba(255,255,255,0.7) !important;
}

body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb.is-active {
  outline-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25) !important;
}

body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body.single-product .ax-lightbox .ax-product-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 889px) {
  .ax-lightbox__nav {
    display: none !important;
  }

  /* Stack the photo above the thumbnail row as two in-flow items instead
     of floating the thumbs fixed at the screen's bottom-right corner (which
     left them sitting far below the photo, disconnected from it). */
  .ax-lightbox__inner {
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 80px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .ax-lightbox .ax-lightbox__stage.ax-product-gallery__main {
    flex: 0 1 auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Same #efefef backdrop as the pre-zoom strip, so the letterbox gaps
     object-fit:contain leaves above/below the photo (the image box is
     taller than it is wide, but the photo itself is roughly square) show
     a consistent frame instead of cutting straight to the black overlay. */
  .ax-lightbox .ax-lightbox__stage.ax-product-gallery__main .ax-lightbox__img {
    width: 92vw !important;
    height: 66vh !important;
    background: #efefef !important;
  }

  body.single-product .ax-lightbox .ax-product-gallery__thumbs {
    position: static !important;
    flex: 0 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    /* overflow-x:auto (needed so the row scrolls when it has more thumbs
       than fit) implicitly turns overflow-y into "auto" too per the CSS
       overflow spec — with zero vertical padding that clips the active
       thumb's outline/box-shadow ring at top and bottom. This padding is
       the buffer they need to render uncut. */
    padding: 8px 16px !important;
    gap: 10px !important;
  }

  body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb {
    flex: 0 0 56px !important;
    width: 56px !important;
  }

  body.single-product .ax-lightbox .ax-product-gallery__thumbs .ax-thumb-image {
    max-height: 48px;
  }
}

/* AX: Center thumbnails under main image on all viewports */
.ax-product-gallery__thumbs {
  grid-template-columns: repeat(auto-fit, 84px) !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 769px) {
  body.single-product .ax-product-gallery__thumbs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 96px) !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: var(--ax-gallery-frame-size) !important;
    max-width: var(--ax-gallery-frame-size) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
}

/* AX: Mobile - keep thumbnails on a single row */
@media (max-width: 768px) {
  .ax-product-gallery__thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }
  .ax-product-gallery__thumbs .ax-thumb {
    flex: 0 0 84px !important;
    width: 84px !important;
  }
  .ax-product-gallery__thumbs::-webkit-scrollbar { display: none; }
} 

/* AX: Tablet widths - ensure thumbs visible and closer to main image */
@media (min-width: 768px) and (max-width: 1060px) {
  .ax-product-gallery__thumbs {
    margin-top: 6px !important;
    position: relative !important;
    z-index: 50 !important;
  }
} 

/* AX: Prevent hover ring from being clipped on mobile */
body.single-product .ax-product-gallery.images { overflow: visible !important; }
.ax-product-gallery__thumbs { position: relative !important; z-index: 30 !important; }
.ax-product-gallery__thumbs .ax-thumb { position: relative !important; z-index: 1 !important; }
.ax-product-gallery__thumbs .ax-thumb:hover,
.ax-product-gallery__thumbs .ax-thumb.is-active { z-index: 2 !important; }
@media (max-width: 768px) {
  .ax-product-gallery__thumbs { overflow-x: auto !important; overflow-y: visible !important; padding: 8px 0 !important; }
} 

/* AX: Mobile - add side padding so first/last thumb ring isn't clipped */
@media (max-width: 768px) {
  .ax-product-gallery__thumbs {
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-left: 14px !important;
    scroll-padding-right: 14px !important;
  }
} 
/* ==========================================================================
   Mobile — full-width gallery (beats axalia 16px margins + parent padding)
   ========================================================================== */
@media (max-width: 889px) {
  /* The full-bleed gallery/summary blocks below assume the parent has
     exactly 40px of side padding to break out of (hardcoded -40px margins,
     unlike the desktop bleed() in ax-product-gallery.js which measures the
     real offset). Whenever that assumption is even slightly off, the page
     becomes horizontally scrollable, letting a swipe drag the whole body
     left and expose empty space on the right. html/body should never need
     horizontal scroll on this page, so cut it off at the source. */
  html:has(body.single-product),
  body.single-product {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Break out of .bricks-container padding — same width as full-bleed summary */
  html body.single-product .woocommerce div.product div.images,
  html body.single-product .woocommerce-page div.product div.images,
  html body.single-product .ax-product-gallery,
  html body.single-product .ax-product-gallery.images {
    display: block !important;
    width: calc(100% + 80px) !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-left: -40px !important;
    margin-right: -40px !important;
    margin-top: -48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
  }

  /* Square main frame — width follows channel, height from aspect-ratio */
  body.single-product .ax-product-gallery__main {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0;
    touch-action: pan-y;
  }

  /* Perfect center inside frame; size independent of image file dimensions */
  body.single-product .ax-product-gallery__main #ax-main-image {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 1;
    cursor: zoom-in;
  }

  /* Summary: match gallery full-bleed width; pull up toward gallery */
  html body.single-product .woocommerce div.product .summary.entry-summary {
    width: calc(100% + 80px) !important;
    max-width: none !important;
    margin-left: -40px !important;
    margin-right: -40px !important;
    margin-top: -32px !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    top: auto !important;
    box-sizing: border-box;
  }

  html body.single-product .content-area .product {
    /* was 8px — the header band must sit flush under the gallery strip */
    row-gap: 0 !important;
  }

  /* Thumbnails: horizontal scroll; side padding so first/last outline is not clipped */
  body.single-product .ax-product-gallery__thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 12px !important;
    margin-left: -6px !important;
    padding: 8px 16px 8px 10px !important;
    scroll-padding-left: 10px !important;
    scroll-padding-right: 16px !important;
    box-sizing: border-box;
  }

  body.single-product .ax-product-gallery__thumbs .ax-thumb {
    flex: 0 0 84px !important;
    width: 84px !important;
  }

  body.single-product .ax-product-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  body.single-product .ax-product-gallery__thumbs .ax-thumb-image {
    max-height: 72px;
    object-fit: contain;
    object-position: center center;
  }

  /* Hide prev/next arrows on mobile — use thumbnails instead */
  body.single-product .ax-product-gallery__main .ax-nav {
    display: none !important;
  }

  body.single-product .ax-product-gallery__main .single-product-badges {
    top: 12px;
    right: 12px;
    z-index: 10;
  }
}

/* Stacked tablet/desktop-narrow: center fixed 560px stage (890px+ only; mobile full-bleed below 890) */
@media (min-width: 890px) and (max-width: 1199px) {
  body.single-product .woocommerce div.product div.images,
  body.single-product .woocommerce-page div.product div.images {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    display: flex;
    justify-content: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.single-product .ax-product-gallery,
  body.single-product .ax-product-gallery.images {
    margin-left: auto;
    margin-right: auto;
  }
}
/* ==========================================================================
   niamori: Product accordion (+/−) — აღწერა / მახასიათებლები / მიწოდება
   ========================================================================== */
.ax-accordion {
  width: 100%;
  margin: 24px 0 8px;
  padding: 0;
  clear: both;
  font-family: inherit;
}
.ax-accordion .ax-acc-item {
  border-bottom: 1px solid #eae7e2;
}
.ax-accordion .ax-acc-item:first-child {
  border-top: 1px solid #eae7e2;
}
.ax-accordion .ax-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  margin: 0;
  background: transparent !important;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #242323 !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  transition: color .15s ease;
}
.ax-accordion .ax-acc-header:hover { color: #6e1f1f !important; }
.ax-accordion .ax-acc-title { flex: 1 1 auto; }

/* +/− icon */
.ax-accordion .ax-acc-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.ax-accordion .ax-acc-icon::before,
.ax-accordion .ax-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #a8a29a;
  transform: translate(-50%, -50%);
  transition: opacity .18s ease, transform .18s ease, background .15s ease;
}
.ax-accordion .ax-acc-header:hover .ax-acc-icon::before,
.ax-accordion .ax-acc-header:hover .ax-acc-icon::after { background: #6f6a64; }
.ax-accordion .ax-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* open state → minus (hide vertical bar) */
.ax-accordion .ax-acc-item.is-open .ax-acc-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* Panel */
.ax-accordion .ax-acc-panel[hidden] { display: none; }
.ax-accordion .ax-acc-panel-inner {
  padding: 2px 4px 24px;
  color: #3a3736;
  font-size: 15px;
  line-height: 1.7;
}
.ax-accordion .ax-acc-panel-inner p { margin: 0 0 12px; }
.ax-accordion .ax-acc-panel-inner p:last-child { margin-bottom: 0; }

/* Section 2: მახასიათებლები — spec table */
.ax-accordion .ax-spec-table {
  display: block;
  width: 100%;
}
.ax-accordion .ax-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed #eae7e2;
}
.ax-accordion .ax-spec-row:last-child { border-bottom: 0; }
.ax-accordion .ax-spec-label {
  color: #7c7772;
  font-size: 14px;
  flex: 0 0 auto;
}
.ax-accordion .ax-spec-value {
  color: #242323;
  font-weight: 600;
  text-align: right;
}
.ax-accordion .ax-spec-empty { color: #7c7772; font-style: italic; }

/* Section 3: მიწოდება და გადახდა */
.ax-accordion .ax-delivery h4 {
  margin: 0 0 8px;
  color: #242323;
  font-size: 15px;
  font-weight: 700;
}
.ax-accordion .ax-delivery h4:not(:first-child) { margin-top: 18px; }
.ax-accordion .ax-delivery ul {
  margin: 0;
  padding-left: 20px;
}
.ax-accordion .ax-delivery li { margin: 0 0 6px; }

@media (max-width: 480px) {
  .ax-accordion { margin-top: 20px; }
  .ax-accordion .ax-acc-header { font-size: 15px; padding: 16px 2px; }
  .ax-accordion .ax-spec-row { flex-wrap: wrap; gap: 2px 16px; }
  .ax-accordion .ax-spec-value { text-align: left; }
}

/* ==========================================================================
   NM layout — gallery strip on top (all photos equal size, full width),
   product info below it: title / price full width, then two columns
   (left: accordion, right: add-to-cart + personalization).

   Loaded after axalia-custom.css, so these rules intentionally override the
   older two-column widths (images 40% / summary 60%) for the strip layout.
   ========================================================================== */

/* --- Gallery container: full browser width (breaks out of the page container),
       no fixed 560px stage, no negative offset --- */
html body.single-product {
  overflow-x: hidden;
  overflow-x: clip; /* keeps position:sticky working, unlike hidden */
}

html body.single-product div.product .ax-product-gallery.ax-gallery--strip,
html body.single-product div.product div.images.ax-gallery--strip {
  display: block !important;
  float: none !important;
  position: relative !important;
  top: 0 !important;
  /* Full browser width is applied by ax-product-gallery.js (applyFullBleed),
     because the page container is not centred. These are the no-JS values. */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  /* the header band sits flush underneath the strip */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* The gallery sits flush under the breadcrumb.
   The breadcrumb is shifted up by `position: relative; top: -31px` while its
   layout box stays put, so the negative margin cancels exactly that shift and
   leaves no visual gap. */
html body.single-product nav.woocommerce-breadcrumb {
  margin-bottom: -31px !important;
}

html body.single-product div.product {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Main frame is not shown in strip mode (kept in the DOM for the lightbox). */
html body.single-product .ax-gallery--strip .ax-product-gallery__main {
  display: none !important;
}

/* --- Slider wrapper: strip + side arrows --- */
html body.single-product .ax-gallery--strip .ax-strip-wrap {
  position: relative;
  width: 100%;
}

html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60; /* the thumbs list is position:relative with z-index 30 */
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border-radius: 9999px;
  background: #242323;
  border: 1px solid #242323;
  color: #f7e9cc;
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-nav:hover {
  background: #3a3838;
  border-color: #3a3838;
}

html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-prev { left: 12px; right: auto; }
html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-next { right: 12px; left: auto; }
html body.single-product .ax-gallery--strip .ax-nav[hidden] { display: none !important; }

/* --- The strip itself: big equal photos, 3 per view, slides horizontally --- */
html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important; /* photos sit flush against each other */
  grid-template-columns: none !important;
  list-style: none;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #efefef; /* full-width band, its own height = photo height
                           (row height is set by the aspect-ratio:1/1 thumbs
                           inside), so it also shows through the side
                           padding added for mobile centering below. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs > li {
  flex: 0 0 calc(100% / 3) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  scroll-snap-align: start;
}

html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs .ax-thumb {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: #efefef !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: zoom-in;
}

/* No active/hover frame in strip mode — every photo is shown at once. */
html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs .ax-thumb:hover,
html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs .ax-thumb.is-active {
  outline: 0 !important;
  box-shadow: none !important;
}

html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs .ax-thumb-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0;
}

/* Badges sit at the top-right of the gallery area in strip mode. */
html body.single-product .ax-gallery--strip .single-product-badges {
  top: 10px !important;
  right: 10px !important;
}

/* --- Page layout: full-width rows + two columns underneath --- */
@media (min-width: 890px) {
  html body.single-product div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: 48px;
    row-gap: 4px;
    align-items: start;
  }

  /* Gallery spans both columns (top row). */
  html body.single-product div.product > .ax-product-gallery.ax-gallery--strip {
    grid-column: 1 / -1 !important;
  }

  /* .summary itself generates no box — its children become grid items. */
  html body.single-product div.product > .summary.entry-summary {
    display: contents !important;
  }

  /* Title, code, price, stock status, short description → full width. */
  html body.single-product div.product > .summary.entry-summary > * {
    grid-column: 1 / -1;
  }

  /* Add to cart (with personalization), product meta → right column. */
  html body.single-product div.product > .summary.entry-summary > form.cart,
  html body.single-product div.product > .summary.entry-summary > .product_meta {
    grid-column: 2 !important;
  }

  /* Accordion → left column, next to the add-to-cart block (dense packing). */
  html body.single-product div.product > .ax-accordion {
    grid-column: 1 !important;
    margin-top: 0 !important;
  }

  /* Anything rendered after the columns (tabs, upsells) → full width. */
  html body.single-product div.product > .woocommerce-tabs,
  html body.single-product div.product > .upsells {
    grid-column: 1 / -1;
  }
}

/* --- Tablet / mobile: fewer photos per view, arrows move inside --- */
@media (max-width: 1100px) {
  html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs > li {
    flex: 0 0 calc(100% / 2) !important;
  }
  html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-prev { left: 6px; }
  html body.single-product .ax-gallery--strip .ax-strip-wrap .ax-next { right: 6px; }
}

@media (max-width: 600px) {
  html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs > li {
    flex: 0 0 82% !important;
    scroll-snap-align: center !important;
  }
  /* Each 82%-wide photo used to sit flush left (peek space only on the
     right), making the active photo look shifted left. Padding the strip
     by half the leftover 18% centers it instead, with an equal peek of the
     next/previous photo on both sides. */
  html body.single-product .ax-gallery--strip .ax-product-gallery__thumbs {
    padding-left: 9% !important;
    padding-right: 9% !important;
    scroll-padding-left: 9% !important;
    scroll-padding-right: 9% !important;
  }
}

/* --- Header band: title (left) + code / price / stock (right) ---------------
   Built and stretched to the full browser width by ax-product-gallery.js. */
html body.single-product .nm-header-band {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* no fill — just a hairline under the band, edge to edge */
  background: transparent;
  border-bottom: 1px solid #e6e1d9;
  box-sizing: border-box;
  padding: 22px 0;
  margin: 0 0 24px;
}

html body.single-product .nm-header-band__main {
  min-width: 0;
  flex: 1 1 auto;
}

html body.single-product .nm-header-band__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

html body.single-product .nm-header-band .product_title,
html body.single-product .nm-header-band .ax-sku-inline,
html body.single-product .nm-header-band .price,
html body.single-product .nm-header-band .ax-stock-status {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 889px) {
  html body.single-product .nm-header-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  html body.single-product .nm-header-band__side {
    align-items: flex-start;
    text-align: left;
  }
}

/* --- Accordion tables: real cells (type | value) ---------------------------- */
html body.single-product .ax-accordion .ax-spec-table {
  display: block;
  width: 100%;
  border: 1px solid #e6e1d9;
  border-radius: 8px;
  overflow: hidden;
}

html body.single-product .ax-accordion .ax-spec-row {
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #e6e1d9;
}

html body.single-product .ax-accordion .ax-spec-row:last-child { border-bottom: 0; }
html body.single-product .ax-accordion .ax-spec-row:nth-child(odd) { background: #faf8f4; }

/* Additional characteristics (product-edit repeater) render as their own
   table right after the fixed one — this gap is what keeps them reading as a
   separate group instead of a continuation of the same list. */
html body.single-product .ax-accordion .ax-spec-table.ax-spec-table-extra {
  margin-top: 20px;
}

/* Each extra-characteristics group's admin-set title (e.g. "მეორე ბოთლის
   მახასიათებლები" for one bottle in a multi-bottle set). */
html body.single-product .ax-accordion .ax-spec-group-title {
  margin: 0 0 8px;
  font-family: 'BPGGuardianCaps', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #242323;
}

html body.single-product .ax-accordion .ax-spec-label,
html body.single-product .ax-accordion .ax-spec-value {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

html body.single-product .ax-accordion .ax-spec-label {
  color: #6f6a64;
  border-right: 1px solid #e6e1d9;
}

html body.single-product .ax-accordion .ax-spec-value {
  color: #242323;
  font-weight: 600;
}

/* Delivery / payment: same boxed frame around the lists */
html body.single-product .ax-accordion .ax-delivery {
  border: 1px solid #e6e1d9;
  border-radius: 8px;
  padding: 14px 16px;
}

@media (max-width: 480px) {
  html body.single-product .ax-accordion .ax-spec-row {
    grid-template-columns: 1fr;
  }
  html body.single-product .ax-accordion .ax-spec-label {
    border-right: 0;
    border-bottom: 1px solid #e6e1d9;
    padding-bottom: 6px;
  }
}

/* --- Header band: make the price the focal point --------------------------- */
html body.single-product .nm-header-band .price,
html body.single-product .nm-header-band .price .woocommerce-Price-amount,
html body.single-product .nm-header-band .price .woocommerce-Price-amount bdi {
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #7f170e !important;
  letter-spacing: .5px;
}

html body.single-product .nm-header-band .price {
  margin: 2px 0 !important;
}

/* Old price (on sale) stays small and muted next to it. */
html body.single-product .nm-header-band .price del,
html body.single-product .nm-header-band .price del .woocommerce-Price-amount,
html body.single-product .nm-header-band .price del bdi {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #9c9791 !important;
  opacity: 1;
}

html body.single-product .nm-header-band .price ins {
  text-decoration: none;
}

@media (max-width: 889px) {
  html body.single-product .nm-header-band .price,
  html body.single-product .nm-header-band .price .woocommerce-Price-amount,
  html body.single-product .nm-header-band .price .woocommerce-Price-amount bdi {
    font-size: 30px !important;
  }
}

/* --- Personalization block: slightly narrower, trimmed on the left --------- */
@media (min-width: 890px) {
  html body.single-product div.product form.cart .ax-pers-fields.ax-personalization {
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    flex: 0 0 calc(100% - 60px) !important;
    margin-left: auto !important;
    margin-right: -20px !important;
  }
}

/* --- Quantity + add-to-cart + buy-now: nudged to the right ------------------ */
@media (min-width: 890px) {
  html body.single-product div.product form.cart {
    justify-content: flex-end !important;
    column-gap: 12px !important;
  }
  html body.single-product div.product form.cart .ax-qty-label {
    margin-right: 4px !important;
  }
  html body.single-product div.product form.cart .quantity.mini-qty-wrapper {
    margin-right: 0 !important;
  }
  /* keep the whole row on one line, flush with the right edge */
  html body.single-product div.product form.cart .single_add_to_cart_button {
    margin-right: 0 !important;
    max-width: 220px !important;
  }
  /* form.cart has 20px right padding — pull the row past it so its right edge
     lines up with the personalization block and the price above. */
  html body.single-product div.product form.cart .ax-buy-now-button {
    margin-right: -20px !important;
  }
}

/* --- Quantity stepper: larger on the single product page ------------------- */
html body.single-product div.product form.cart .quantity.mini-qty-wrapper {
  display: inline-grid !important;
  grid-template-columns: 44px 62px 44px !important;
  grid-template-rows: 44px !important;
  gap: 6px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}

html body.single-product div.product form.cart .quantity.mini-qty-wrapper .mini-qty-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 9px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body.single-product div.product form.cart .quantity.mini-qty-wrapper .mini-qty-input,
html body.single-product div.product form.cart .quantity.mini-qty-wrapper input[type="number"],
html body.single-product div.product form.cart .quantity.mini-qty-wrapper input[type="text"] {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 44px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* --- Price next to the quantity stepper: the focal point ------------------- */
html body.single-product .ax-pers-qty-section .price,
html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount,
html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount bdi {
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #7f170e !important;
  letter-spacing: .5px;
}

html body.single-product .ax-pers-qty-section .price {
  /* the theme adds 10px bottom padding, which lifts the text off centre */
  margin: 0 !important;
  padding: 0 !important;
}

html body.single-product .ax-pers-qty-section .price del,
html body.single-product .ax-pers-qty-section .price del .woocommerce-Price-amount,
html body.single-product .ax-pers-qty-section .price del bdi {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #9c9791 !important;
}

html body.single-product .ax-pers-qty-section .price ins { text-decoration: none; }

@media (max-width: 889px) {
  html body.single-product .ax-pers-qty-section .price,
  html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount,
  html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount bdi {
    font-size: 30px !important;
  }
}


/* --- Quantity row: stepper · price | stock · code (one line) --------------- */
html body.single-product .ax-pers-qty-section > .quantity.mini-qty-wrapper {
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

html body.single-product .ax-pers-qty-section > .price {
  flex: 0 0 auto !important;
}

html body.single-product .ax-pers-qty-section > .nm-qty-meta {
  flex: 0 1 auto !important;
  width: auto !important;
  margin-left: auto !important;
}

/* --- Buttons row spans the personalization block width --------------------- */
@media (min-width: 890px) {
  html body.single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    /* line up with the (narrowed) personalization block on the left */
    margin-left: 80px !important;
    margin-right: 0 !important;
  }

  html body.single-product div.product form.cart .ax-buy-now-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: -20px !important;
  }
}

/* ==========================================================================
   MOBILE / TABLET (≤889px) — single column, no horizontal overflow
   ========================================================================== */
@media (max-width: 889px) {
  /* legacy negative offsets from the old two-column layout push content out */
  html body.single-product div.product {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  html body.single-product div.product > .summary.entry-summary,
  html body.single-product div.product > .ax-accordion,
  html body.single-product div.product form.cart {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* on desktop .summary generates no box (display:contents); on mobile it does,
     so the theme's grey card would show up — drop it */
  html body.single-product div.product > .summary.entry-summary {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* the personalization block must not stick out of the form (desktop trick) */
  html body.single-product div.product form.cart {
    padding-right: 0 !important;
    justify-content: flex-start !important;
    column-gap: 10px !important;
  }

  html body.single-product div.product form.cart .ax-pers-fields.ax-personalization {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 4px !important;
  }

  /* quantity row: stepper + price on one line, chips underneath */
  html body.single-product .ax-pers-qty-section {
    row-gap: 8px !important;
  }
  html body.single-product .ax-pers-qty-section > .quantity.mini-qty-wrapper {
    margin: 0 !important;
  }
  html body.single-product .ax-pers-qty-section > .price {
    margin: 0 0 0 4px !important;
  }
  html body.single-product .ax-pers-qty-section > .nm-qty-meta {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* buttons: two equal halves, full width of the block */
  html body.single-product div.product form.cart button.single_add_to_cart_button,
  html body.single-product div.product form.cart button.ax-buy-now-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* social icons keep three equal columns */
  html body.single-product .ax-pers-fields .ax-pers-radios {
    gap: 8px !important;
  }

  /* full-bleed elements stay inside the viewport */
  html body.single-product .nm-header-band {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 600px) {
  html body.single-product .nm-qty-meta .price,
  html body.single-product .ax-pers-qty-section .price,
  html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount,
  html body.single-product .ax-pers-qty-section .price .woocommerce-Price-amount bdi {
    font-size: 28px !important;
  }

  /* the buttons get their own line each when the labels no longer fit */
  html body.single-product div.product form.cart button.single_add_to_cart_button,
  html body.single-product div.product form.cart button.ax-buy-now-button {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  html body.single-product div.product form.cart button.ax-buy-now-button {
    margin-top: 10px !important;
  }
}

/* --- Header band: title exactly centred (theme adds an 8px bottom margin) --- */
html body.single-product .nm-header-band .nm-header-band__main {
  display: flex;
  align-items: center;
}

/* woocommerce.css has .single-product .summary.entry-summary .product_title.entry-title
   { margin-bottom: 6px !important } — this selector is one class stronger. */
html body.single-product .summary.entry-summary .nm-header-band .product_title.entry-title,
html body.single-product .nm-header-band .product_title.entry-title {
  margin: 0 !important;
  padding: 0 !important;
}

/* code / price / stock moved to the quantity row → the side slot is empty */
html body.single-product .nm-header-band__side:empty {
  display: none !important;
}

/* ==========================================================================
   Header band controls (desktop): quantity · price · add to cart · buy
   ========================================================================== */
@media (min-width: 890px) {
  html body.single-product .nm-header-band__side.nm-header-band__side--controls {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
  }

  /* "რაოდენობა" label shrinks to an inline caption next to the stepper */
  html body.single-product .nm-header-band__side--controls > .ax-pers-heading {
    margin: 0 !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* compact stepper */
  html body.single-product .nm-header-band__side--controls .quantity.mini-qty-wrapper {
    grid-template-columns: 36px 46px 36px !important;
    grid-template-rows: 38px !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
  }
  html body.single-product .nm-header-band__side--controls .quantity.mini-qty-wrapper .mini-qty-btn {
    width: 36px !important;
    height: 38px !important;
    min-width: 36px !important;
    font-size: 18px !important;
  }
  html body.single-product .nm-header-band__side--controls .quantity.mini-qty-wrapper .mini-qty-input,
  html body.single-product .nm-header-band__side--controls .quantity.mini-qty-wrapper input {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  /* price */
  html body.single-product .nm-header-band__side--controls .price,
  html body.single-product .nm-header-band__side--controls .price .woocommerce-Price-amount,
  html body.single-product .nm-header-band__side--controls .price .woocommerce-Price-amount bdi {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #7f170e !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
  }

  /* buttons */
  html body.single-product .nm-header-band__side--controls button.single_add_to_cart_button,
  html body.single-product .nm-header-band__side--controls button.ax-buy-now-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* the title takes whatever is left */
  html body.single-product .nm-header-band .nm-header-band__main {
    flex: 1 1 auto;
    min-width: 0;
  }
  html body.single-product .nm-header-band {
    gap: 24px;
  }
}

/* --- Header band title: smaller ------------------------------------------- */
html body.single-product .summary.entry-summary .nm-header-band .product_title.entry-title,
html body.single-product .nm-header-band .product_title.entry-title {
  font-size: 26px !important;
  line-height: 1.25 !important;
}

@media (max-width: 889px) {
  html body.single-product .summary.entry-summary .nm-header-band .product_title.entry-title,
  html body.single-product .nm-header-band .product_title.entry-title {
    font-size: 22px !important;
  }
}

/* --- "რაოდენობა" label sits next to the stepper, not above it -------------- */
html body.single-product .ax-pers-qty-section > .ax-pers-heading {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* --- Stepper inside the header band keeps its horizontal grid --------------
   (the theme styles it via `form.cart .quantity`, and in the band it is
   outside the form, so the layout has to be restated here) */
html body.single-product .nm-header-band .quantity.mini-qty-wrapper {
  display: inline-grid !important;
  grid-template-columns: 36px 46px 36px !important;
  grid-template-rows: 38px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .screen-reader-text {
  display: none !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-minus {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-input,
html body.single-product .nm-header-band .quantity.mini-qty-wrapper input {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-plus {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-btn {
  width: 36px !important;
  height: 38px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  background: #242323 !important;
  border: 1px solid #242323 !important;
  color: #f7e9cc !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-btn:disabled {
  opacity: .45 !important;
  cursor: default;
}


/* --- Header band sits directly under the gallery strip -------------------- */
html body.single-product .nm-header-band {
  margin-top: 0 !important;
}

html body.single-product div.product > .ax-product-gallery.ax-gallery--strip + * {
  margin-top: 0 !important;
}

/* the product wrapper is a wrapping flex box with an 8px row-gap — the gallery
   must sit flush against the header band, so cancel it under the strip */
html body.single-product div.product {
  row-gap: 0 !important;
}

html body.single-product div.product > .summary.entry-summary {
  margin-top: 0 !important;
}

/* --- Header band: one notch smaller across the board ---------------------- */
html body.single-product .summary.entry-summary .nm-header-band .product_title.entry-title,
html body.single-product .nm-header-band .product_title.entry-title {
  font-size: 22px !important;
}

@media (max-width: 889px) {
  html body.single-product .summary.entry-summary .nm-header-band .product_title.entry-title,
  html body.single-product .nm-header-band .product_title.entry-title {
    font-size: 19px !important;
  }
}

html body.single-product .nm-header-band__side--controls > .ax-pers-heading {
  font-size: 12px !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper {
  grid-template-columns: 30px 40px 30px !important;
  grid-template-rows: 32px !important;
  padding: 3px !important;
  border-radius: 10px !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-btn {
  width: 30px !important;
  height: 32px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}

html body.single-product .nm-header-band .quantity.mini-qty-wrapper .mini-qty-input,
html body.single-product .nm-header-band .quantity.mini-qty-wrapper input {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 32px !important;
  font-size: 14px !important;
}

html body.single-product .nm-header-band__side--controls .price,
html body.single-product .nm-header-band__side--controls .price .woocommerce-Price-amount,
html body.single-product .nm-header-band__side--controls .price .woocommerce-Price-amount bdi {
  font-size: 24px !important;
}

html body.single-product .nm-header-band__side--controls button.single_add_to_cart_button,
html body.single-product .nm-header-band__side--controls button.ax-buy-now-button {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}

html body.single-product .nm-header-band {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* --- Stepper: fixed width + perfectly centred digit ------------------------ */
html body.single-product .nm-header-band .quantity.mini-qty-wrapper,
html body.single-product .ax-pers-qty-section .quantity.mini-qty-wrapper {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: center !important;
}

/* number inputs reserve room for the spin buttons, which pushes the digit off
   centre and lets the field grow with longer values — remove them */
html body.single-product .nm-header-band .quantity.mini-qty-wrapper input[type="number"],
html body.single-product .ax-pers-qty-section .quantity.mini-qty-wrapper input[type="number"],
html body.single-product .quantity.mini-qty-wrapper input.mini-qty-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  -webkit-appearance: none !important;
  text-align: center !important;
  text-indent: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

html body.single-product .quantity.mini-qty-wrapper input.mini-qty-input::-webkit-outer-spin-button,
html body.single-product .quantity.mini-qty-wrapper input.mini-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* the price keeps a stable footprint, so a longer total never resizes the row */
html body.single-product .nm-header-band__side--controls .price {
  /* left aligned so the number hugs the stepper; min-width keeps the row from
     reflowing when the total gets longer */
  min-width: 92px !important;
  text-align: left !important;
  display: inline-block !important;
  margin-left: -6px !important;
}


/* header band: background removed, only the bottom hairline remains */
html body.single-product .nm-header-band {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e6e1d9 !important;
}

/* ==========================================================================
   Accordion rendered as horizontal tabs
   ========================================================================== */
html body.single-product .ax-accordion.ax-tabs {
  border: 0 !important;
  margin-top: 0 !important;
}

html body.single-product .ax-tabs .ax-tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 28px;
  margin: 0 0 26px;
  padding: 0 0 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

html body.single-product .ax-tabs .ax-tabs__nav::-webkit-scrollbar { display: none; }

html body.single-product .ax-tabs .ax-tab {
  flex: 0 0 auto;
  padding: 0 0 8px;
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8a847d;
  font-family: 'BPGGuardianCaps', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

html body.single-product .ax-tabs .ax-tab:hover { color: #242323; }

html body.single-product .ax-tabs .ax-tab.is-active {
  color: #242323;
  border-bottom-color: #242323;
}

/* panels: no accordion chrome left */
html body.single-product .ax-tabs .ax-acc-item {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.single-product .ax-tabs .ax-acc-panel[hidden] { display: none !important; }
html body.single-product .ax-tabs .ax-acc-panel-inner { padding: 0 !important; }

@media (max-width: 889px) {
  html body.single-product .ax-tabs .ax-tabs__nav {
    gap: 20px;
    margin-bottom: 20px;
  }
  html body.single-product .ax-tabs .ax-tab { font-size: 12px; }
}

/* --- Tabs: beat the theme's global <button> styling ------------------------ */
html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab,
html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab:hover,
html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  color: #8a847d !important;
  font-family: 'BPGGuardianCaps', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab:hover {
  color: #242323 !important;
}

html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab.is-active {
  color: #242323 !important;
  border-bottom: 2px solid #242323 !important;
}

@media (max-width: 889px) {
  html body.single-product .ax-tabs .ax-tabs__nav button.ax-tab {
    font-size: 12px !important;
  }
}

/* SKU / stock status are no longer rendered — collapse their (empty) slot */
html body.single-product .nm-qty-meta:empty {
  display: none !important;
}

/* --- Left tabs column starts at the same height as the personalization ----- */
@media (min-width: 890px) {
  html body.single-product div.product > .ax-accordion.ax-tabs {
    margin-top: 0 !important;
    /* matches the 22px lead-in above "პერსონალიზაციის პარამეტრები", so both
       headings sit on the same line */
    padding-top: 22px !important;
    align-self: start;
  }

  html body.single-product div.product form.cart {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body.single-product div.product form.cart .ax-pers-fields.ax-personalization {
    margin-top: 0 !important;
  }

  html body.single-product .ax-pers-fields .ax-pers-title {
    margin-top: 0 !important;
  }

  html body.single-product .ax-tabs .ax-tabs__nav {
    margin-top: 0 !important;
  }
}

/* --- Band controls start on the personalization column's x axis ------------ */
@media (min-width: 890px) {
  html body.single-product .nm-header-band .nm-header-band__main {
    /* left column width + column gap + the 80px the personalization block is
       inset by, so the stepper lines up with it */
    flex: 0 0 calc(50% + 104px) !important;
    min-width: 0;
  }

  html body.single-product .nm-header-band__side.nm-header-band__side--controls {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
  }

  /* buttons stay flush with the right edge */
  html body.single-product .nm-header-band__side--controls button.single_add_to_cart_button {
    margin-left: auto !important;
  }

  html body.single-product .nm-header-band {
    gap: 0 !important;
  }
}

/* the "რაოდენობა" caption is dropped in the band so the stepper itself starts
   on the personalization column's x axis (the label stays on mobile) */
@media (min-width: 890px) {
  html body.single-product .nm-header-band__side--controls > .ax-pers-heading {
    display: none !important;
  }

  html body.single-product .nm-header-band .nm-header-band__main {
    flex: 0 0 calc(50% + 100px) !important;
  }
}

/* --- Price rides with the buttons, not with the stepper -------------------
   The auto margin moves off the add-to-cart button and onto the price, so the
   free space in the row falls between the stepper and the price. The price
   then sits flush against "კალათაში დამატება" instead of the empty middle. */
@media (min-width: 890px) {
  html body.single-product .nm-header-band__side--controls .price {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }

  html body.single-product .nm-header-band__side--controls button.single_add_to_cart_button {
    margin-left: 0 !important;
  }
}

/* --- "პროდუქტის რაოდენობა" caption, left of the quantity stepper -----------
   Below the band breakpoint the caption follows the stepper into
   .ax-pers-qty-section (or stays in form.cart when there is no personalization
   block). Either way it is a narrow two-line caption on the stepper's left, so
   the "რაოდენობა" heading the personalization block puts above the stepper
   would just repeat it. */
@media (max-width: 889px) {
  html body.single-product .ax-pers-fields .ax-pers-qty-section > .ax-pers-heading {
    display: none !important;
  }

  html body.single-product .ax-qty-label {
    flex: 0 0 auto !important;
    white-space: normal !important;
    max-width: 92px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 8px 0 0 !important;
  }

  /* Inside the personalization block there is room to stack: caption on its own
     line above the stepper, then stepper left / price right on the next line. */
  html body.single-product .ax-pers-fields .ax-pers-qty-section > .ax-qty-label {
    flex: 1 1 100% !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 2px !important;
  }

  html body.single-product .ax-pers-fields .ax-pers-qty-section > .price {
    margin-left: auto !important;
  }
}

@media (max-width: 480px) {
  html body.single-product .ax-qty-label {
    max-width: 80px !important;
    font-size: 12px !important;
    margin-right: 6px !important;
  }
}

/* In the band the caption is the first control, so __main keeps its full basis
   and the caption — not the stepper — starts on the personalization column's x
   axis, i.e. flush with "პერსონალიზაციის პარამეტრები" below it. */
@media (min-width: 890px) {
  html body.single-product .nm-header-band__side--controls .ax-qty-label {
    /* min-content = the box hugs the longest word, so no dead space is left
       between the two wrapped lines and the stepper */
    flex: 0 0 auto !important;
    width: min-content !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
}

/* Body-width parity for related/category carousels below the photos: see the
   alignPostGalleryCarousels() function in ax-product-gallery.js. Handled in JS
   (not here) because the number of nested "max-width:1400px + 20px padding"
   wrapper layers above .carousel-container on this template varies with the
   viewport width (axalia-custom.css's cascading .site/.content-area/
   main.site-main overrides swap breakpoints at 1200/1400px) — a fixed CSS
   offset only lined up at one width. JS measures the live position and
   corrects it at every width instead of guessing the layer count. */