/*
 * HYGSI.SK product detail responsive fix, 2026-08-16.
 *
 * Keeps the buy form readable throughout the phone/tablet transition:
 * availability and prices, quantity discounts, variants, quantity and the
 * cart button are always laid out as separate rows up to 1024 px.
 * Manual product sets keep their dedicated layout from the set stylesheet.
 */

html body.type-detail
#product-detail-form.hygsi-buy-form > .hygsi-watchdog-button,
html body.type-detail
.hygsi-buy-panel .link-icons .watchdog,
html body.type-detail
.hygsi-buy-panel .watchdog.hygsi-watchdog-button {
  display: none !important;
}

@media (max-width: 1024px) {
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form,
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form.hygsi-has-quantity-discounts,
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form:not(.hygsi-has-quantity-discounts) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "info"
      "discounts"
      "variants"
      "quantity"
      "buy" !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    column-gap: 0 !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .hygsi-purchase-info {
    grid-area: info !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 30px 0 0 !important;
    align-self: start !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .hygsi-quantity-discounts {
    grid-area: discounts !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 28px 0 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .p-variants-block,
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .hygsi-linked-variants {
    grid-area: variants !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 28px !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form
  .p-to-cart-block > .add-to-cart {
    grid-area: quantity !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form
  .p-to-cart-block > .add-to-cart-button,
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form .hygsi-cart-ready {
    grid-area: buy !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  .hygsi-quantity-discounts,
  html body.type-detail:not(.hygsi-manual-set)
  .hygsi-quantity-discounts-table {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* The advisor has two link columns on desktop. In the narrower product-image
 * column they collided, so keep one readable link per row on compact layouts.
 */
@media (min-width: 768px) and (max-width: 1279px) {
  html body.type-detail .hygsi-product-advisor {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.type-detail .hygsi-product-advisor .hygsi-advisor-links {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.type-detail .hygsi-product-advisor .hygsi-advisor-links a {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 767px) {
  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .hygsi-purchase-info {
    margin-top: 38px !important;
  }

  html body.type-detail:not(.hygsi-manual-set)
  #product-detail-form.hygsi-buy-form > .hygsi-quantity-discounts {
    margin-top: 32px !important;
  }
}