/* skip-a-beat — shop-*.html product pages (v2 Editorial Contrast) */

.product-wrap { background: var(--paper); padding-top: 100px; }
.product-layout { display: grid; grid-template-columns: 1fr; gap: 0; max-width: var(--maxw); margin: 0 auto; }
@media (min-width: 900px) { .product-layout { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 100px); } }

.product-img-col { background: var(--muted); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-img-col img { width: 100%; height: 100%; object-fit: cover; max-height: 70vh; }
@media (min-width: 900px) { .product-img-col img { max-height: none; } }

.product-img-gallery { background: var(--muted); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.product-img-gallery img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) { .product-img-gallery { max-height: calc(100vh - 100px); } }

.product-price { margin-top: 20px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

.product-info-col { padding: 48px 24px 80px; }
@media (min-width: 768px) { .product-info-col { padding: 64px 56px 100px; } }

.product-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg);
  transition: color 0.3s;
}
.product-back:hover { color: var(--accent); }
.product-back svg { width: 12px; height: 12px; }

.product-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.product-name { margin-top: 20px; font-size: 44px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.2; text-transform: lowercase; padding-bottom: 0.08em; }
@media (min-width: 768px) { .product-name { font-size: 60px; } }
.product-desc { margin-top: 28px; max-width: 32rem; font-size: 15px; line-height: 1.8; color: var(--muted-fg); }

.product-specs { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.product-spec { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.product-spec-k { color: var(--muted-fg); }
.product-spec-v { font-weight: 500; text-align: right; }

.product-cs-box { margin-top: 40px; padding: 28px; background: var(--ink); color: var(--paper); }
.product-cs-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.product-cs-heading { margin-top: 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-transform: lowercase; }
.product-cs-form { margin-top: 20px; display: flex; border-bottom: 1px solid rgba(242,239,232,0.4); }
.product-cs-email { flex: 1; background: none; border: 0; padding: 10px 0; font-family: var(--font); font-size: 14px; color: var(--paper); }
.product-cs-email::placeholder { color: rgba(242,239,232,0.4); }
.product-cs-submit {
  background: none; border: 0; font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); cursor: pointer; padding: 10px 0 10px 16px; transition: opacity 0.3s;
}
.product-cs-submit:hover { opacity: 0.7; }

.product-buy-box { margin-top: 40px; padding: 28px; background: var(--ink); color: var(--paper); }
.product-buy-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.product-buy-btn {
  display: block; margin-top: 16px; padding: 14px 24px; text-align: center;
  background: var(--accent); color: var(--ink); font-family: var(--font); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; transition: opacity 0.3s;
}
.product-buy-btn:hover { opacity: 0.8; }

.product-collab { margin-top: 32px; font-size: 12px; color: var(--muted-fg); }