/* Cordnestia — product page overflow + compact pairing fixes (additive) */

/* ---------- Root cause: grid children default to min-width:auto ---------- */
.product-top,
.product-gallery,
.product-buy,
.product-section,
.pair-grid,
.product-grid,
#pair-grid,
#related-grid {
  min-width: 0;
}

.product-top {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.product-gallery,
.product-gallery__main,
.product-gallery__thumbs {
  min-width: 0;
  max-width: 100%;
}

.product-gallery__main img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Thumbnail row: independent horizontal scroll, never widens the page */
.product-gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  scrollbar-width: thin;
}

.product-gallery__thumbs button {
  flex: 0 0 auto;
  min-width: 60px;
  min-height: 60px;
}

/* Text block: allow wrapping, never force width */
.product-buy h1,
.product-buy p,
.product-desc,
.product-price,
.product-price-note,
.product-cat {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.buy-form {
  min-width: 0;
}

.buy-form input[type="number"] {
  max-width: 100%;
}

.buy-help {
  overflow-wrap: anywhere;
}

/* ---------- Pair it with: compact, product-appropriate cards ---------- */
#pair-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#pair-grid .card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: 12px;
  padding: 10px;
  height: auto;
}

#pair-grid .card__img {
  grid-row: 1 / span 3;
  grid-column: 1;
  aspect-ratio: 1 / 1;
  width: 84px;
  height: 84px;
  padding: 6px;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  background: var(--cn-paper);
  box-sizing: border-box;
}

#pair-grid .card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

#pair-grid .card__name {
  grid-column: 2;
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.3;
}

#pair-grid .card__price {
  grid-column: 2;
  margin: 0 0 8px;
  font-size: 0.88rem;
}

#pair-grid .card__price-note {
  display: block;
  margin-top: 2px;
}

#pair-grid .btn {
  grid-column: 2;
  justify-self: start;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* ---------- Related grid: keep contained ---------- */
#related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#related-grid .card__img img {
  max-width: 100%;
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .product-top {
    grid-template-columns: minmax(0, 1fr);
  }

  #pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Mobile (390px target) ---------- */
@media (max-width: 720px) {
  .product-top,
  .product-section,
  .breadcrumb {
    padding-inline: 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .product-gallery,
  .product-buy {
    width: 100%;
    max-width: 100%;
  }

  .product-gallery__main {
    width: 100%;
    max-width: 100%;
  }

  .product-gallery__main img {
    width: 100%;
    height: auto;
    padding: 10px;
  }

  .product-gallery__thumbs {
    gap: 8px;
    padding-bottom: 6px;
  }

  .product-gallery__thumbs button {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .product-buy h1 {
    font-size: clamp(1.25rem, 5.2vw, 1.6rem);
  }

  .product-price {
    font-size: 1.25rem;
  }

  .buy-form {
    align-items: stretch;
  }

  .buy-form label {
    flex: 1 1 100%;
  }

  .buy-form input[type="number"] {
    width: 100%;
    max-width: 120px;
  }

  .buy-form .btn {
    flex: 1 1 100%;
    min-height: 46px;
  }

  /* Pair cards: compact two-up, image on top but small */
  #pair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #pair-grid .card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    height: 100%;
  }

  #pair-grid .card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 120px;
    padding: 6px;
    margin-bottom: 8px;
  }

  #pair-grid .card__name {
    font-size: 0.84rem;
    margin: 0 0 4px;
  }

  #pair-grid .card__price {
    font-size: 0.82rem;
    margin: 0 0 8px;
  }

  #pair-grid .card__price-note {
    font-size: 0.68rem;
  }

  #pair-grid .btn {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 0.8rem;
    margin-top: auto;
  }

  #related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #related-grid .card__name {
    font-size: 0.86rem;
  }

  #related-grid .card__price {
    font-size: 0.86rem;
  }
}

@media (max-width: 400px) {
  #pair-grid,
  #related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pair-grid .card__img {
    max-height: 104px;
  }
}

/* ---------- Global guard: no horizontal page scroll from product area ---------- */
[data-product-root] {
  overflow-x: clip;
}

[data-product-root] img {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .product-gallery__thumbs {
    scroll-behavior: auto;
  }
}