/* Kazio Mobile Responsive Product v2
   Focus: product page readability on 390px mobile viewport.
   Desktop untouched.
*/
@media (max-width: 768px) {
  body.product-product,
  body[class*="product-product"] {
    overflow-x: hidden !important;
  }

  body.product-product #content,
  body[class*="product-product"] #content {
    width: 100% !important;
    max-width: calc(100vw - 14px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Force product main areas to real single column */
  body.product-product #content > *,
  body.product-product .product-info,
  body.product-product .product-detail,
  body.product-product .product-details,
  body.product-product .product-main,
  body.product-product .product-page,
  body.product-product .product-wrapper,
  body.product-product .product-layout,
  body.product-product .product-card,
  body.product-product .product-card-main,
  body.product-product .product-summary,
  body.product-product .product-description,
  body.product-product #product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.product-product .product-info,
  body.product-product .product-detail,
  body.product-product .product-details,
  body.product-product .product-main,
  body.product-product .product-page,
  body.product-product .product-wrapper,
  body.product-product .product-layout,
  body.product-product .product-card-main,
  body.product-product #product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.product-product .row,
  body.product-product [class*="row"],
  body.product-product [class*="grid"],
  body.product-product [class*="columns"],
  body.product-product [class*="cols"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.product-product .row,
  body.product-product [class*="row"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.product-product [class^="col-"],
  body.product-product [class*=" col-"],
  body.product-product [class*="column"],
  body.product-product [class*="side"],
  body.product-product [class*="left"],
  body.product-product [class*="right"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    flex: 0 0 auto !important;
  }

  /* Product title was breaking one word per line in the video */
  body.product-product h1,
  body.product-product .product-title,
  body.product-product [class*="product-title"],
  body.product-product [class*="title"] h1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

  body.product-product .product-meta,
  body.product-product .product-price,
  body.product-product .price,
  body.product-product [class*="price"],
  body.product-product [class*="meta"] {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  /* Image/gallery */
  body.product-product .image,
  body.product-product .images,
  body.product-product .product-image,
  body.product-product .product-gallery,
  body.product-product .thumbnails,
  body.product-product [class*="gallery"],
  body.product-product [class*="image"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  body.product-product .image img,
  body.product-product .images img,
  body.product-product .product-image img,
  body.product-product .product-gallery img,
  body.product-product .thumbnails img,
  body.product-product [class*="gallery"] img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Feature/spec/attribute blocks: avoid skinny 2-col text columns */
  body.product-product .feature-grid,
  body.product-product .features-grid,
  body.product-product .spec-grid,
  body.product-product .specs-grid,
  body.product-product .attribute-grid,
  body.product-product .details-grid,
  body.product-product .info-grid,
  body.product-product [class*="feature"],
  body.product-product [class*="spec"],
  body.product-product [class*="attribute"],
  body.product-product [class*="detail-card"],
  body.product-product [class*="info-card"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.product-product .feature-grid,
  body.product-product .features-grid,
  body.product-product .spec-grid,
  body.product-product .specs-grid,
  body.product-product .attribute-grid,
  body.product-product .details-grid,
  body.product-product .info-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.product-product [class*="feature"] *,
  body.product-product [class*="spec"] *,
  body.product-product [class*="attribute"] *,
  body.product-product [class*="detail-card"] *,
  body.product-product [class*="info-card"] * {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.9 !important;
  }

  /* Any product tables should scroll internally, not break the page */
  body.product-product table {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.product-product .table-responsive,
  body.product-product .tab-content,
  body.product-product .product-tabs,
  body.product-product [class*="tab"],
  body.product-product [class*="table"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Add to cart area in the video was too cramped */
  body.product-product .button-group,
  body.product-product .product-actions,
  body.product-product .cart-actions,
  body.product-product .add-to-cart,
  body.product-product [class*="add-to-cart"],
  body.product-product [class*="cart-action"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  body.product-product #button-cart,
  body.product-product button,
  body.product-product .btn,
  body.product-product a.btn {
    max-width: 100% !important;
    min-height: 44px;
  }

  body.product-product #button-cart,
  body.product-product .add-to-cart button,
  body.product-product [class*="add-to-cart"] button {
    width: 100% !important;
    border-radius: 16px !important;
  }

  body.product-product input[name="quantity"],
  body.product-product input[name="quantity"] + button,
  body.product-product .quantity,
  body.product-product [class*="quantity"] {
    max-width: 100% !important;
  }

  body.product-product .quantity,
  body.product-product [class*="quantity"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* Related products: 2 columns are okay on 390px, but no fixed card width */
  body.product-product .related-products,
  body.product-product [class*="related"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.product-product .related-products .row,
  body.product-product [class*="related"] .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.product-product .related-products .product-layout,
  body.product-product [class*="related"] .product-layout,
  body.product-product .related-products .product-thumb,
  body.product-product [class*="related"] .product-thumb {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Breadcrumb on mobile */
  body.product-product .breadcrumb,
  body.product-product [class*="breadcrumb"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 430px) {
  body.product-product h1,
  body.product-product .product-title,
  body.product-product [class*="product-title"] {
    font-size: 23px !important;
  }

  body.product-product .product-card,
  body.product-product .product-summary,
  body.product-product .product-description,
  body.product-product [class*="card"] {
    border-radius: 18px !important;
  }
}