/*
 * Mobile adaptation for WooCommerce single-product pages.
 *
 * Targets body.single-product only to avoid affecting other pages.
 * Structural changes (gallery thumbnails, SKU/brand display, quantity selector,
 * reviews block, replacing tabs with description) live in Elementor.
 */

@media (max-width: 767px) {
  /* NOTE: previously hid .elementor-element-c947ea2 thinking it was a separate
     SEO block — but it IS the entire footer template. Keep it visible. */

  /* Truncate breadcrumb on single product page — Figma shows 3 levels max.
     The last node is a plain text (product title) so we can't display:none it.
     Instead clamp the nav to a single line with ellipsis. */
  body.single-product nav.woocommerce-breadcrumb {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Gap from breadcrumb to "Повернутись" button = 44px total
     (parent flex-gap 20px + button margin-top 24px). */
  body.single-product .elementor-widget-woocommerce-breadcrumb + .elementor-widget-button {
    margin-top: 24px !important;
  }

  /* Gap from "Повернутись" to product image = 35px.
     Compensates Elementor's 40px button margin-bottom + 20px container gap +
     20px from outer container = 80px total, override to net 35. */
  body.single-product .elementor-widget-woocommerce-breadcrumb + .elementor-widget-button {
    margin-bottom: -5px !important;
  }

  /* Info column gaps (per Figma 292:14936):
     - gallery → SKU:        16
     - SKU → title:          24
     - title → brand:        24
     - brand → price:        24
     - price → ATC (Колір):  24
     Achieved by setting col flex-gap to 24 and pinning SKU (first child) to
     -8 to drop the cross-container gap (parent flex-gap 24 - 8 = 16). */
  body.single-product .elementor-element-7ad38d6 {
    gap: 24px !important;
    row-gap: 24px !important;
  }
  body.single-product .elementor-element-7ad38d6 > .elementor-widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body.single-product .elementor-element-7ad38d6 > .elementor-widget:first-child {
    margin-top: -4px !important;
  }

  /* Hide empty shortcode widgets (e.g. brand when product has no brand attribute)
     so they don't leave a 48px gap (24 above + 24 below) in the info column. */
  body.single-product .elementor-element-7ad38d6 > .elementor-widget-shortcode:has(.elementor-shortcode:empty) {
    display: none !important;
  }

  /* Inner elements (h1 title, .price) inherit theme's margin-bottom: 24px.
     With col flex-gap 24, that doubles visible gap to 48 between text glyphs.
     Zero them so the flex-gap is the only source.
     NOTE: do not touch table.variations margin — it's the variations→ATC button
     spacer set earlier. */
  body.single-product .elementor-element-7ad38d6 h1.product_title,
  body.single-product .elementor-element-7ad38d6 .product_title,
  body.single-product .elementor-element-7ad38d6 .elementor-widget-woocommerce-product-title h1,
  body.single-product .elementor-element-7ad38d6 .elementor-widget-woocommerce-product-title h2,
  body.single-product .elementor-element-7ad38d6 .price,
  body.single-product .elementor-element-7ad38d6 .elementor-widget-woocommerce-product-price .price {
    margin-bottom: 0 !important;
  }

  /* Inside ATC widget — gaps for Figma spec:
     - variations table (Колір/Об'єм) → "Додати до кошика":  24
     - "Додати до кошика" → quantity (− 1 +):                24
     - quantity → footnote:                                  49 (if present) */
  body.single-product .elementor-widget-woocommerce-product-add-to-cart .variations_form.cart > table.variations {
    margin-bottom: 24px !important;
  }
  /* WC default td.value has padding-bottom: 8 — zero it so visible gap from
     last swatch row to ATC button matches the 24 margin-bottom on variations. */
  body.single-product .elementor-widget-woocommerce-product-add-to-cart table.variations td.value,
  body.single-product .elementor-widget-woocommerce-product-add-to-cart table.variations th.label {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.single-product .woocommerce-variation-add-to-cart {
    gap: 24px !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .quantity {
    margin-bottom: 49px !important;
  }

  /* Thumbnails row — border-radius 8px on mobile (Figma spec). */
  body.single-product .flex-control-thumbs li img,
  body.single-product ol.flex-control-thumbs img {
    border-radius: 8px !important;
  }

  /* Zero out WooCommerce default 32px margin-bottom on the gallery wrap so
     the thumbs-row-to-SKU gap visually matches the column flex-gap (16). */
  body.single-product .woocommerce-product-gallery {
    margin-bottom: 0 !important;
  }

  /* Tabs (Інформація / Характеристики / Комплектація) — horizontal scroll pills.
     Active = solid purple bg. Inactive = transparent with 1px purple border. */
  body.single-product .elementor-widget-n-tabs .e-n-tabs-heading {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  body.single-product .elementor-widget-n-tabs .e-n-tabs-heading::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.single-product .elementor-widget-n-tabs .e-n-tab-title {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    margin: 0 !important;
    padding: 0 32px !important;
    border-radius: 100px !important;
    border: 1px solid #5B49F3 !important;
    background: transparent !important;
    color: #F9F9F9 !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  body.single-product .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-title-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
  body.single-product .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"] {
    background: #5B49F3 !important;
    color: #F9F9F9 !important;
  }

  /* Section heading rows ("СХОЖІ ТОВАРИ", "НЕЩОДАВНО ПЕРЕГЛЯНУТІ") have
     margin-bottom: 40 — combined with parent flex-gap 20 = 60. Reduce to 24
     visible gap from heading to first card row. */
  body.single-product .elementor-element-3b3f48e,
  body.single-product .elementor-element-0b2a0e0 {
    margin-bottom: 4px !important;
  }

  /* B. Quantity selector below "Додати до кошика" + hide form-side wishlist
     (moved to gallery top-left by JS — see octo-sp-wishlist--on-gallery rules).
     Gap of 24px between ATC button and quantity (per Figma). */
  body.single-product .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    order: 1 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .quantity {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    height: 56.24px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  /* Inside quantity: − button left, "1" center, + button right */
  body.single-product .woocommerce-variation-add-to-cart .quantity .octo-qty-btn:first-of-type {
    margin-right: auto !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .quantity .octo-qty-btn:last-of-type {
    margin-left: auto !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .quantity .qty {
    margin: 0 auto !important;
  }
  /* Hide the in-form wishlist on mobile — JS clones it onto the gallery */
  body.single-product .woocommerce-variation-add-to-cart .octo-sp-wishlist {
    display: none !important;
  }

  /* C. Wishlist heart over product image, top-left.
     Element placed by JS (octo_sp_wishlist_to_gallery in mu-plugin). */
  body.single-product .octo-sp-wishlist--on-gallery {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 10 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.single-product .octo-sp-wishlist--on-gallery .yith-wcwl-add-to-wishlist-button,
  body.single-product .octo-sp-wishlist--on-gallery a.yith-wcwl-add-to-wishlist-button__wrapper {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.single-product .octo-sp-wishlist--on-gallery svg,
  body.single-product .octo-sp-wishlist--on-gallery img {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
  }
  /* Gallery wrap must be position:relative to anchor the absolute heart */
  body.single-product .woocommerce-product-gallery,
  body.single-product .elementor-widget-woocommerce-product-images {
    position: relative !important;
  }
}

/* Tablet portrait (768–980px): ATC + qty + wishlist row overflows form width,
   so .quantity gets flex-shrunk to ~34px (overflow:hidden hides −/qty/+).
   Solution: wrap the row — ATC full-width on its own line, qty + wishlist
   below. Keeps desktop gallery/tabs/swatches untouched. */
@media (min-width: 768px) and (max-width: 980px) {
  body.single-product .woocommerce-variation-add-to-cart,
  body.single-product form.cart:not(.variations_form) {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  body.single-product form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .quantity,
  body.single-product form.cart:not(.variations_form) .quantity {
    flex: 0 0 175px !important;
    width: 175px !important;
    min-width: 175px !important;
  }
  body.single-product .woocommerce-variation-add-to-cart .octo-sp-wishlist,
  body.single-product form.cart:not(.variations_form) .octo-sp-wishlist {
    flex: 0 0 72px !important;
  }
}