/* =====================================================================
   Product page: gallery, buying panel, details, questions form.
   ===================================================================== */

.product-top { padding-top: var(--s-6); }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--s-7), 5vw, var(--s-11));
  margin-top: var(--s-5);
  align-items: start;
}
@media (max-width: 899px) { .product-layout { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Gallery ---------- */
.gallery { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
@media (max-width: 899px) { .gallery { position: static; margin-inline: calc(var(--gutter) * -1); } }

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-l);
  background: var(--c-bg-alt);
}
.gallery-track::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .gallery-track { border-radius: 0; } }

.gallery-slide {
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.gallery-slide .placeholder-art { width: 30%; color: #c7c7cc; }

.gallery-thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; }
@media (max-width: 899px) { .gallery-thumbs { padding-inline: var(--gutter); } }
.gallery-thumb {
  flex: 0 0 64px;
  height: 64px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  background: var(--c-bg-alt);
  overflow: hidden;
  transition: border-color var(--dur-1) var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gallery-thumb[aria-current="true"] { border-color: var(--c-text); }

/* ---------- Buying panel ---------- */
.buy .pcard-brand { font-size: var(--fs-sm); }
.buy > .badge { padding-left: 0; }   /* line the label up with the text below */
.buy .h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); margin-top: var(--s-1); }
.buy-short { margin-top: var(--s-3); color: var(--c-text-2); }
.buy-price { margin-top: var(--s-5); font-size: var(--fs-lg); }
.buy-price .price-was { font-size: var(--fs-base); }
.buy-save { font-size: var(--fs-sm); color: var(--c-sale); margin-top: 2px; }

.buy-section { margin-top: var(--s-7); }
.pills-wrap { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.pills-wrap legend { padding: 0; }
.buy-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); }
.buy-label span { font-weight: var(--fw-regular); color: var(--c-text-3); }

.buy-stock { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); margin-top: var(--s-5); }
.buy-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.buy-actions { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.buy-actions .btn--dark { grid-column: 1 / -1; }
.buy-actions .btn { min-height: 50px; }
.buy-note { margin-top: var(--s-3); font-size: var(--fs-sm); }

/* Delivery / pickup / warranty / payment list */
.perks { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--c-line-soft); }
.perk { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line-soft); font-size: var(--fs-sm); }
.perk svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-text-3); }
.perk strong { display: block; font-weight: var(--fw-semibold); }
.perk span { color: var(--c-text-2); }

/* ---------- Details ---------- */
.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-7), 5vw, var(--s-11)); }
@media (max-width: 899px) { .details { grid-template-columns: 1fr; } }
.details .h2 { margin-bottom: var(--s-5); }
.prose p + p { margin-top: var(--s-4); }
.prose { color: var(--c-text-2); }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.spec-table th, .spec-table td { text-align: left; vertical-align: top; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.spec-table th { width: 40%; padding-right: var(--s-4); font-weight: var(--fw-regular); color: var(--c-text-3); }

/* ---------- Ask a question ---------- */
.ask { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-l); background: var(--c-bg-alt); }
@media (max-width: 899px) { .ask { grid-template-columns: 1fr; } }
.ask .lead { margin-top: var(--s-3); }
.ask-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.ask-form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .ask-form { grid-template-columns: 1fr; } }
.textarea { min-height: 120px; resize: vertical; }

/* Loading placeholder for the whole page */
.product-loading .skeleton-block { aspect-ratio: 1 / 1; border-radius: var(--radius-l); }