/* v4.6.0 — Mobile Product Page Pro
   A proper app-like single product page for phones. */

@media (max-width: 782px) {
  body.vlg-theme.single-product {
    background: #f4f7fb !important;
  }

  body.vlg-theme.single-product .vlg-single-product-page {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(96px + var(--vlg-mobile-appbar-h, 76px) + env(safe-area-inset-bottom)) !important;
  }

  body.vlg-theme.single-product .vlg-breadcrumbs {
    margin: 10px 0 8px !important;
    padding: 0 2px !important;
    font-size: 12px !important;
    color: #8291a8 !important;
  }

  body.vlg-theme.single-product .vlg-product-main-grid,
  body.vlg-theme.single-product .vlg-product-detail .vlg-product-main-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.vlg-theme.single-product .vlg-product-left,
  body.vlg-theme.single-product .vlg-product-right {
    display: contents !important;
  }

  /* Gallery as the hero of the product page */
  body.vlg-theme.single-product .vlg-product-gallery-card {
    order: 1 !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, #fff 0%, #f9fbff 100%) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
  }

  body.vlg-theme.single-product .vlg-product-gallery-media,
  body.vlg-theme.single-product div.product div.images,
  body.vlg-theme.single-product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 24px !important;
    background: #fff !important;
  }

  body.vlg-theme.single-product .woocommerce-product-gallery__wrapper,
  body.vlg-theme.single-product .woocommerce-product-gallery__image {
    min-height: 0 !important;
    max-height: none !important;
  }

  body.vlg-theme.single-product .woocommerce-product-gallery__image img,
  body.vlg-theme.single-product .vlg-product-gallery-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 365px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    padding: 8px !important;
  }

  body.vlg-theme.single-product .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  body.vlg-theme.single-product .flex-control-thumbs::-webkit-scrollbar { display: none !important; }
  body.vlg-theme.single-product .flex-control-thumbs li {
    flex: 0 0 62px !important;
    width: 62px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
  }

  body.vlg-theme.single-product .vlg-single-image-energy {
    left: 14px !important;
    bottom: 14px !important;
  }

  /* Summary card */
  body.vlg-theme.single-product .vlg-product-summary-card,
  body.vlg-theme.single-product div.product .summary {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08) !important;
  }

  body.vlg-theme.single-product .vlg-pill {
    display: inline-flex !important;
    margin-bottom: 10px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: #fff5e8 !important;
    color: #d46f00 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
  }

  body.vlg-theme.single-product .product_title,
  body.vlg-theme.single-product div.product .product_title {
    margin: 0 0 12px !important;
    font-size: clamp(25px, 7.2vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.055em !important;
    color: #071224 !important;
  }

  body.vlg-theme.single-product .vlg-product-rating-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  body.vlg-theme.single-product .vlg-stock-ok {
    display: inline-flex !important;
    min-height: 32px !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, .10) !important;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body.vlg-theme.single-product .vlg-product-price,
  body.vlg-theme.single-product div.product p.price,
  body.vlg-theme.single-product div.product span.price {
    margin: 10px 0 12px !important;
    color: #071224 !important;
    font-size: clamp(26px, 7vw, 34px) !important;
    font-weight: 950 !important;
    letter-spacing: -.04em !important;
  }

  body.vlg-theme.single-product .vlg-product-energy-inline {
    margin: 10px 0 12px !important;
  }

  body.vlg-theme.single-product .vlg-product-excerpt {
    margin: 12px 0 !important;
    color: #526174 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Specs as compact cards */
  body.vlg-theme.single-product .vlg-product-specs,
  body.vlg-theme.single-product .vlg-specs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }

  body.vlg-theme.single-product .vlg-product-specs > *,
  body.vlg-theme.single-product .vlg-specs-grid > * {
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid #e8eef6 !important;
  }

  /* Buybox inside summary — clean card, while the main form stays sticky */
  body.vlg-theme.single-product #vlg-product-buybox,
  body.vlg-theme.single-product .vlg-product-buybox {
    margin: 16px 0 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #fff8ef 0%, #ffffff 100%) !important;
    border: 1px solid rgba(253, 186, 116, .50) !important;
    box-shadow: 0 14px 34px rgba(242, 138, 0, .10) !important;
  }

  body.vlg-theme.single-product form.cart {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--vlg-mobile-appbar-h, 76px) + 12px + env(safe-area-inset-bottom)) !important;
    z-index: 9050 !important;
    display: grid !important;
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(226,232,240,.92) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    box-shadow: 0 20px 62px rgba(2, 8, 23, .24) !important;
  }

  body.vlg-theme.single-product form.cart .quantity {
    width: 100% !important;
    margin: 0 !important;
  }

  body.vlg-theme.single-product form.cart .qty {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 17px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border: 1px solid #dbe5f1 !important;
    background: #fff !important;
  }

  body.vlg-theme.single-product form.cart .single_add_to_cart_button {
    min-height: 52px !important;
    width: 100% !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ff9f1a 0%, #f28a00 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(242, 138, 0, .30) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.vlg-theme.single-product form.cart .single_add_to_cart_button::before {
    content: '🛒';
    margin-right: 7px;
  }

  body.vlg-theme.single-product .vlg-product-meta,
  body.vlg-theme.single-product .product_meta {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e8eef6 !important;
    color: #64748b !important;
    font-size: 13px !important;
  }

  /* Side info as trust chips */
  body.vlg-theme.single-product .vlg-product-sidecard,
  body.vlg-theme.single-product .vlg-product-side-info,
  body.vlg-theme.single-product .vlg-side-features {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body.vlg-theme.single-product .vlg-product-sidecard > *,
  body.vlg-theme.single-product .vlg-product-side-info > *,
  body.vlg-theme.single-product .vlg-side-features > * {
    padding: 13px !important;
    border-radius: 18px !important;
    background: #fff !important;
    border: 1px solid #e8eef6 !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.055) !important;
  }

  /* Tabs / accordions */
  body.vlg-theme.single-product .vlg-product-tabs {
    order: 4 !important;
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body.vlg-theme.single-product .vlg-product-tab {
    border: 1px solid #e4ebf5 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
    overflow: hidden !important;
  }

  body.vlg-theme.single-product .vlg-product-tab summary {
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    color: #071224 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
  }

  body.vlg-theme.single-product .vlg-product-tab summary::after {
    content: '+';
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 20px;
    line-height: 1;
  }

  body.vlg-theme.single-product .vlg-product-tab[open] summary::after { content: '−'; }

  body.vlg-theme.single-product .vlg-tab-content {
    padding: 0 16px 16px !important;
    color: #526174 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* Related / upsell products as horizontal rails */
  body.vlg-theme.single-product .vlg-product-related-wrap {
    order: 5 !important;
    margin-top: 2px !important;
  }

  body.vlg-theme.single-product .vlg-product-related-wrap h2,
  body.vlg-theme.single-product .related.products > h2,
  body.vlg-theme.single-product .upsells.products > h2 {
    margin: 18px 0 12px !important;
    color: #071224 !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
  }

  body.vlg-theme.single-product .related.products ul.products,
  body.vlg-theme.single-product .upsells.products ul.products,
  body.vlg-theme.single-product .vlg-product-related-wrap ul.products {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(178px, 68vw) !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    padding: 2px 2px 8px !important;
    scrollbar-width: none !important;
  }

  body.vlg-theme.single-product .related.products ul.products::-webkit-scrollbar,
  body.vlg-theme.single-product .upsells.products ul.products::-webkit-scrollbar,
  body.vlg-theme.single-product .vlg-product-related-wrap ul.products::-webkit-scrollbar { display: none !important; }

  body.vlg-theme.single-product .related.products ul.products li.product,
  body.vlg-theme.single-product .upsells.products ul.products li.product,
  body.vlg-theme.single-product .vlg-product-related-wrap ul.products li.product {
    width: auto !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
  }

  /* Hide duplicate mobile product bar from older versions; form.cart is the new bar. */
  body.vlg-theme.single-product .vlg-mobile-product-bar {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.vlg-theme.single-product form.cart {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    left: 8px !important;
    right: 8px !important;
    padding: 8px !important;
  }

  body.vlg-theme.single-product form.cart .qty,
  body.vlg-theme.single-product form.cart .single_add_to_cart_button {
    min-height: 48px !important;
  }

  body.vlg-theme.single-product form.cart .single_add_to_cart_button {
    font-size: 13px !important;
  }

  body.vlg-theme.single-product .vlg-product-specs,
  body.vlg-theme.single-product .vlg-specs-grid,
  body.vlg-theme.single-product .vlg-product-sidecard,
  body.vlg-theme.single-product .vlg-product-side-info,
  body.vlg-theme.single-product .vlg-side-features {
    grid-template-columns: 1fr !important;
  }
}