/* ZOOP mobile-only overrides
   - 4 swatches per row
   - Mobile card layout for size/qty/price/stock
   - Desktop table untouched
*/

/* Hide mobile cards on desktop by default */
.zoop-product-variations-block .zoop-mobile-cards-wrap {
  display: none;
}

@media (max-width: 768px) {
  /* 4 swatches per row */
  .zoop-product-variations-block .zoop-swatches {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .zoop-product-variations-block .zoop-swatch,
  .zoop-product-variations-block button.zoop-swatch {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    padding: 6px 8px !important;
    line-height: 1.1 !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* Hide desktop table on mobile */
  .zoop-product-variations-block .zoop-desktop-table-wrap {
    display: none !important;
  }

  /* Show mobile cards */
  .zoop-product-variations-block .zoop-mobile-cards-wrap {
    display: block !important;
    margin-top: 10px !important;
    border: 1px solid var(--zoop-border) !important;
    background: #fff !important;
  }

  .zoop-product-variations-block .zoop-mobile-cards-head {
    display: grid !important;
    grid-template-columns: 64px 110px minmax(90px, 1fr) 70px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--zoop-border) !important;
    background: var(--zoop-header-bg) !important;
    color: var(--zoop-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
  }

  .zoop-product-variations-block .zoop-mobile-card {
    display: grid !important;
    grid-template-columns: 64px 110px minmax(90px, 1fr) 70px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--zoop-border) !important;
    box-sizing: border-box !important;
  }

  .zoop-product-variations-block .zoop-mobile-card:last-child {
    border-bottom: 0 !important;
  }

  .zoop-product-variations-block .zoop-mobile-size {
    font-weight: 700 !important;
    color: var(--zoop-text) !important;
    line-height: 1.1 !important;
  }

  .zoop-product-variations-block .zoop-mobile-qty input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .zoop-product-variations-block .zoop-mobile-price {
    font-weight: 700 !important;
    color: var(--zoop-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .zoop-product-variations-block .zoop-mobile-stock {
    font-size: 12px !important;
    color: var(--zoop-muted) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .zoop-product-variations-block .zoop-mobile-out {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #b42318 !important;
  }

  .zoop-product-variations-block .zoop-add-selected,
  .zoop-product-variations-block button.zoop-add-selected {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }
}