/* ==========================================================================
   AX: Product-summary redesign (Niamori-style) — desktop (>=1200px) gets
   the full header purchase row + tabbed info; mobile (<=889px) gets the
   same tab UI / Buy Now button / spec-table styling adapted to a stacked
   single-column layout; the 890-1199px tablet range keeps the older,
   untouched stacked layout (no tabs, no Buy Now) exactly as it was.
   ========================================================================== */

/* .ax-price-qty-row (built by ax-product-summary.js) stays invisible as a
   box on tablet (890-1199px) only — price/quantity keep their existing
   independent positioning there. Both mobile (<=889px, block below) and
   desktop (>=1200px, further down) turn it into an actual bordered white
   price/badge/quantity row. */
.ax-price-qty-row { display: contents; }

/* Price block: sale-percentage badge stacked directly above the price,
   no background — just the orange brand color on the "ფასდაკლება -NN%"
   text. The block (not p.price directly) owns the "price" grid-area /
   positioning so the badge rides along with the price at every
   breakpoint. */
html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-sale-badge {
  background: none !important;
  color: var(--brand-orange, #f6623c) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: 'FiraGO-SemiBold', sans-serif;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   Tablet-only (890-1199px) safety net: tabs behave as plain stacked
   sections — nav hidden, every panel visible, Buy Now hidden — matching
   the previous flat .custom-product-fields output 1:1. Mobile gets its
   own tab UI in the 889px block below; desktop gets it at 1200px+.
   -------------------------------------------------------------------------- */
@media (min-width: 890px) and (max-width: 1199px) {
  .ax-tabs-nav { display: none; }
  .ax-tab-panel { display: block; }
  .ax-tab-panel[data-tab-panel="delivery"] { display: none; }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-actions-col {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-title-block {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-new-badge {
    display: none !important;
  }

  /* Typography-only alignment with the >=1200px treatment (Issue C fix):
     this band's layout/grid stays the old stacked flow untouched (per the
     comment above), but the sale badge, old price and primary CTA were
     silently falling through to unrelated generic site-wide rules
     (.ax-price-sale-badge's own unscoped base rule; woocommerce.css's
     `.woocommerce div.product .price del` at 18px; woocommerce.css's
     `...single_add_to_cart_button` at 13px) instead of the same values
     used at >=1200px. Values below are copied verbatim from the
     >=1200px block further down this file — no new styling invented. */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-sale-badge {
    background: var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 17px !important;
    padding: 8px 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary p.price del,
  html body.single-product.woocommerce div.product .summary.entry-summary p.price del * {
    font-size: 22px !important; /* new price (ins) is 24px in this band; old price = new - 2px */
    font-weight: 400 !important;
    color: #9ca3af !important;
    opacity: 1 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
  }
}

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------
     Header → breadcrumb → gallery spacing, fixed at its actual source.

     Root cause (traced via the browser's own cascade, not guesswork):
     header.css declares "body { padding-top: 105px; }" — the real,
     site-wide reservation for the 70px fixed header (plus a little
     built-in breathing room). But ".woocommerce, .woocommerce-page {
     padding: 0 !important; }" (woocommerce.css) ALSO matches <body>,
     because ".woocommerce" is a class Bricks puts directly on <body> on
     this template (not a separate wrapper div) — and a class selector
     outranks a bare element selector, so that rule wins and body's real
     padding-top computes to 0px. Every downstream hack we've since been
     tuning (the old 160px/134px/132px breadcrumb margin-top, the
     "-30px" pulls on #primary/#main) existed only to compensate for that
     lost clearance — none of it was the actual source.

     Fix: restore the header clearance where it actually belongs (body's
     own padding-top, scoped to this template so nothing else on the
     site is touched), undo the compensating "-30px" pulls on #primary/
     #main since they're no longer needed, and let the breadcrumb/gallery
     use only small, literal spacing values — no large margin standing in
     for missing structural padding. */
  html body.single-product.woocommerce {
    padding-top: 70px !important; /* = exact fixed header height, no extra gap */
  }
  html body.single-product #primary,
  html body.single-product #main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html body.single-product nav.woocommerce-breadcrumb {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: 0 !important;
  }
  html body.single-product.woocommerce div.product {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ------------------------------------------------------------------
     Header purchase row: title/SKU on the left, everything else
     (availability, quantity, price, Add to Cart, Buy Now) in one
     vertically-centered row on the right.
     ------------------------------------------------------------------ */
  html body.single-product.woocommerce div.product .summary.entry-summary {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-areas:
      "title  priceqty  actions"
      "sku    priceqty  actions"
      "stock  priceqty  actions"
      "tabs   tabs      tabs" !important;
    column-gap: 20px !important;
    row-gap: 4px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  /* Full-bleed site-gray backdrop behind the title/price/buttons rows only
     (grid-row 1/4 = the title+sku+stock, priceqty and actions areas — the
     "tabs" row that follows is row 4 and stays outside this span). A plain
     in-flow grid item sized by grid-row/-column placement, so its height
     always matches those rows exactly with no fragile height math; the
     negative left/right margins are the classic "same width as its own
     centered container, but stretched to the viewport" full-bleed trick
     (safe because body/html already set overflow-x:hidden site-wide).
     margin-top: -32px closes the gap up to the gallery above — that gap is
     div.product's own fixed 32px flex `gap` (not content-dependent), so
     this reaches exactly its bottom edge on every product. margin-bottom:
     -32px mirrors it below (matched by .ax-product-tabs's own 32px
     margin-top, so the bleed stops exactly at that section's border
     rather than overlapping it), so the title/price/buttons content ends
     up centered within the gray band's height instead of sitting at its
     top. */
  html body.single-product.woocommerce div.product .summary.entry-summary::before {
    content: "" !important;
    grid-row: 1 / 4 !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
    margin-top: -32px !important;
    margin-bottom: -32px !important;
    margin-left: calc((100% - 100vw) / 2) !important;
    margin-right: calc((100% - 100vw) / 2) !important;
    background: #f3f4f6 !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .product_meta {
    display: none !important;
  }

  /* Title / SKU / availability: one compact left-side block, stacked in
     that order, tight spacing between the three lines. The "ახალი" badge
     (when present) sits inside the title's own grid cell, stacked above
     the heading text via .ax-title-block. */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-title-block {
    grid-area: title !important;
    align-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-new-badge {
    display: inline-block !important;
    align-self: flex-start !important;
    background: var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product_title.entry-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  /* The gallery-image copy of "ახალი" is redundant once it shows above
     the title on desktop — "მალე" keeps its usual spot on the image. */
  body.single-product .ax-product-gallery .single-product-badge--news {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-sku-inline {
    grid-area: sku !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #8a8f98 !important;
    font-weight: 400 !important;
    align-self: start !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-sku-inline .ax-sku-value {
    color: #6b7280 !important;
    font-weight: 500 !important;
  }

  /* Availability status — grouped under the title/SKU block (not in the
     right-side purchase row), same gray as the SKU value rather than
     green, wording/stock logic untouched. */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-stock-status {
    grid-area: stock !important;
    align-self: start !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-stock-status.in {
    color: #6b7280 !important;
  }

  /* form.cart's box disappears; its children become direct grid items so
     quantity/Add to Cart/Buy Now can sit in the row alongside .price
     (which lives outside form.cart in the DOM) in the exact requested
     order: availability, quantity, price, Add to Cart, Buy Now. */
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .ax-qty-label {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .quantity.mini-qty-wrapper {
    grid-area: qty !important;
    margin: 0 !important;
  }

  /* Price + badge + quantity: one shared bordered white row (same
     treatment as mobile), spanning the merged "priceqty" grid area.
     Internally a 2-row grid: the badge spans BOTH columns in row 1, as
     a full-bleed orange bar (negative margins pull it out to the
     row's own edges; the row's overflow:hidden + border-radius clips
     it back into a rounded top so it never needs its own radius).
     Price and quantity sit side by side in row 2, so their vertical
     centers coincide on their own — the badge row above never factors
     into that, unlike centering a single stacked price+badge block
     against quantity. */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "badge  badge"
      "price  qty" !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: center !important;
    grid-area: priceqty !important;
    align-self: stretch !important;
    padding: 14px 18px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-block {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-sale-badge {
    grid-area: badge !important;
    margin: -14px -18px 0 -18px !important;
    padding: 8px 0 !important;
    background: var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 17px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary p.price {
    grid-area: price !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    white-space: nowrap !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111111 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary p.price ins {
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111111 !important;
  }
  /* Strikethrough drawn as a manually centered pseudo-element instead of
     native text-decoration: line-through — the browser's own line-through
     draws high relative to numeral height, not at the true vertical
     middle of the price text. */
  html body.single-product.woocommerce div.product .summary.entry-summary p.price del {
    position: relative !important;
    display: inline-block !important;
    font-size: 22px !important; /* new price (ins) is 24px; old price = new - 2px */
    font-weight: 400 !important;
    color: #9ca3af !important;
    opacity: 1 !important;
    text-decoration: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary p.price del::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    height: 2px !important;
    background: #f6623c !important;
    transform: translateY(-50%) !important;
  }

  /* Add to Cart + Buy Now: stacked vertically in one shared column
     (site-orange pair, --brand-secondary — same orange used for
     arrows/badges/qty buttons/active-tab underline elsewhere on the
     site), rounded, equal-height, equal-width (stretched to whichever
     button is naturally wider). */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-actions-col {
    grid-area: actions !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: var(--brand-secondary, #f6623c) !important;
    border: 1px solid var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    min-width: 0 !important;
    transition: background-color .15s ease, border-color .15s ease !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button:hover,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button:hover {
    /* Same darker-orange hover shade used site-wide for this brand color
       (e.g. .apply-filter-btn:hover, mini-qty-btn hover) — stays in the
       orange palette rather than falling back to black. */
    background: #e65934 !important;
    border-color: #e65934 !important;
    color: #ffffff !important;
  }

  /* ------------------------------------------------------------------
     Product information tabs
     ------------------------------------------------------------------ */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-product-tabs {
    grid-area: tabs !important;
    /* Matches the gray backdrop's own 32px top bleed (see the
       .summary.entry-summary::before rule above) so that backdrop can
       extend an equal 32px below the price/actions row too, centering
       the title/price/buttons content within the gray band's height. */
    margin-top: 32px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e5e7eb !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tabs-nav {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-btn {
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 0 -1px !important;
    padding: 0 0 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: color .15s ease, border-color .15s ease !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-btn:hover {
    color: #111111 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-btn.is-active {
    color: #111111 !important;
    font-weight: 700 !important;
    border-bottom-color: #141414 !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel.is-active {
    display: block !important;
  }

  /* Description text inside the "features" panel */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-description {
    margin: 0 0 20px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    margin-bottom: 10px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note .ax-extra-title {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-body {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #374151 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note {
    margin: 16px 0 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note .ax-extra-body {
    font-size: 14px !important;
    color: #6b7280 !important;
  }

  /* Premium spec-table look for both .product-specs-list rows and the
     L/W/H .dimension-item cards — same clean two-column row style,
     built entirely from the existing markup/classes. */
  html body.single-product.woocommerce div.product .summary.entry-summary .product-dimensions-container {
    margin: 0 0 4px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list {
    display: block !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item:nth-child(even) {
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item:last-child {
    border-bottom: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-label {
    flex: 0 0 200px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-value {
    color: #111111 !important;
    font-weight: 500 !important;
  }

  /* Dimensions (სიგრძე/სიგანე/სიმაღლე): same table-row treatment, icons
     dropped so it visually matches the spec rows above/below it. */
  html body.single-product.woocommerce div.product .summary.entry-summary .product-dimensions {
    display: block !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fafafa !important;
    gap: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 13px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item:nth-child(even) {
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item:last-child {
    border-bottom: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-icon {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-label {
    flex: 0 0 200px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-value {
    font-size: 14px !important;
    color: #111111 !important;
    font-weight: 500 !important;
  }
}

/* ==========================================================================
   AX: Mobile (<=889px) — same design language as the desktop redesign
   above (grouped title/SKU/availability block, orange Add to Cart + Buy
   Now pair, tab-switched product info, premium spec tables), adapted to a
   single-column stacked layout. The product gallery itself (single large
   image + swipe) is untouched — only the summary section below it changes.
   The 890-1199px tablet range is intentionally excluded (see the block
   above this file's desktop section) and keeps its older, untouched
   stacked-no-tabs layout.
   ========================================================================== */
@media (max-width: 889px) {

  /* Visual order only (DOM/hook order untouched, so tablet/desktop are
     unaffected): title → SKU → availability → price/qty + Add to Cart +
     Buy Now → info tabs. The purchase block sits above the tabs instead
     of below them. */
  html body.single-product.woocommerce div.product .summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-title-block {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-new-badge {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product_title.entry-title {
    order: 1 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-sku-inline {
    order: 2 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-stock-status {
    order: 3 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart {
    order: 4 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-product-tabs {
    order: 5 !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .product_meta {
    display: none !important;
  }

  /* Title / SKU / availability — same compact grouped block as desktop,
     just left-aligned and stacked without a purchase row beside it. */
  html body.single-product.woocommerce div.product .summary.entry-summary .product_title.entry-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-sku-inline {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #8a8f98 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-sku-inline .ax-sku-value {
    color: #6b7280 !important;
    font-weight: 500 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-stock-status {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-stock-status.in {
    color: #6b7280 !important;
  }

  /* Price + badge + quantity: one shared bordered row (Niamori-style),
     same treatment as desktop — the badge spans the full row as an
     orange bar with white text (negative margins bleed it to the row's
     own edges; overflow:hidden + border-radius clip it into a rounded
     top), price and quantity sit side by side below it. The
     ".ax-price-qty-row" wrapper is built by ax-product-summary.js WITHOUT
     moving the quantity control out of form.cart (still nested inside it
     via this wrapper), so the real add-to-cart form submission and
     product-qty.js's "closest('form.cart')" check both keep working. */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row {
    display: grid !important;
    grid-template-columns: auto auto !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "badge  badge"
      "price  qty" !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    align-items: center !important;
    /* Without this, price/qty (being block-level boxes) default to
       stretching to fill their auto-sized column, then left-packing
       their own content inside — which reads as "price stuck at the
       left edge" with dead space after it and after qty. Centering
       them keeps each one in the middle of its own column instead. */
    justify-items: center !important;
    margin: 14px 0 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-block {
    display: contents !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-sale-badge {
    grid-area: badge !important;
    justify-self: stretch !important;
    margin: -14px -16px 0 -16px !important;
    padding: 8px 0 !important;
    background: var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 15px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row p.price {
    grid-area: price !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111111 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row p.price ins {
    text-decoration: none !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111111 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row p.price del {
    font-size: 20px !important; /* new price (ins) is 22px in this band; old price = new - 2px */
    font-weight: 400 !important;
    color: #9ca3af !important;
    opacity: 1 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-price-qty-row .quantity.mini-qty-wrapper {
    grid-area: qty !important;
    margin: 0 !important;
  }

  /* Add to Cart / Buy Now stacked full-width below the price/quantity row. */
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-actions-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .ax-qty-label {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: var(--brand-secondary, #f6623c) !important;
    border: 1px solid var(--brand-secondary, #f6623c) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button:hover,
  html body.single-product.woocommerce div.product .summary.entry-summary form.cart .single_add_to_cart_button:active,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button:hover,
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-buy-now-button:active {
    background: #e65934 !important;
    border-color: #e65934 !important;
    color: #ffffff !important;
  }

  /* ------------------------------------------------------------------
     Product information tabs — same tab UI as desktop; nav scrolls
     horizontally since the Georgian labels don't all fit one screen.
     ------------------------------------------------------------------ */
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-product-tabs {
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #e5e7eb !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tabs-nav {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tabs-nav::-webkit-scrollbar {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-btn {
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 0 -1px !important;
    padding: 0 0 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-btn.is-active {
    color: #111111 !important;
    font-weight: 700 !important;
    border-bottom-color: #141414 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel.is-active {
    display: block !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-description {
    margin: 0 0 16px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    margin-bottom: 8px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note .ax-extra-title {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-extra-body {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note {
    margin: 14px 0 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .ax-tab-panel .ax-delivery-note .ax-extra-body {
    font-size: 13px !important;
    color: #6b7280 !important;
  }

  /* Premium spec-table look, same as desktop, sized down slightly. */
  html body.single-product.woocommerce div.product .summary.entry-summary .product-dimensions-container {
    margin: 0 0 4px !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list {
    display: block !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item:nth-child(even) {
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-item:last-child {
    border-bottom: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-label {
    flex: 0 0 130px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .product-specs-list .spec-value {
    color: #111111 !important;
    font-weight: 500 !important;
  }

  html body.single-product.woocommerce div.product .summary.entry-summary .product-dimensions {
    display: block !important;
    border: 1px solid #ececec !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fafafa !important;
    gap: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #ececec !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item:nth-child(even) {
    background: #fafafa !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-item:last-child {
    border-bottom: 0 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-icon {
    display: none !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-label {
    flex: 0 0 130px !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
  }
  html body.single-product.woocommerce div.product .summary.entry-summary .dimension-value {
    font-size: 13px !important;
    color: #111111 !important;
    font-weight: 500 !important;
  }
}