.crumbs { font-size: var(--text-small); color: var(--ink-3); margin-bottom: 20px; }
.crumbs a:hover { color: var(--ink); }
.product__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.gallery__main { position: relative; border-radius: var(--radius-card); background: radial-gradient(circle at 40% 30%, #F4EFE8, var(--bg-2)); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur); }
.gallery__main--contain img { object-fit: contain; padding: 8%; }
.gallery__main img.is-swapping { opacity: 0; }
.gallery__main .badge { position: absolute; top: 18px; left: 18px; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.gallery__thumb { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 2px solid transparent; transition: border-color var(--dur-fast); }
.gallery__thumb.is-active { border-color: var(--ink); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.buy__title { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); margin-bottom: 4px; }
.buy .price--big { margin: 14px 0 10px; }
.buy__label { display: block; font-size: var(--text-small); font-weight: 600; margin: 22px 0 10px; }
.colors { display: flex; gap: 10px; flex-wrap: wrap; }
.color-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--line-strong); border: 3px solid var(--bg); transition: transform var(--dur-fast) var(--ease-out); display: block; }
.color-dot:hover { transform: scale(1.12); }
.color-dot.is-current { box-shadow: 0 0 0 2px var(--ink); }
.chip--radio { position: relative; cursor: pointer; }
.chip--radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.chip--radio:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--radio:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.chip--unknown { border-style: dashed; }
.chip--out { opacity: .45; border-style: dashed; }
.chip--out:has(input:checked) { opacity: 1; background: var(--bg-2); color: var(--ink); border-color: var(--ink-3); border-style: solid; }
.buy__legend { margin-top: 10px; }
.buy__stocknote { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--paper); border-left: 3px solid var(--brass); color: var(--ink-2); }
.buy__size-error { display: none; margin-top: 8px; }
.buy__form.has-error .buy__size-error { display: block; }
.buy__fitting { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--paper); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.buy__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.buy__actions .btn { flex: 1 1 180px; }
.buy__perks { margin: 22px 0; padding: 16px 18px; border-radius: 14px; background: var(--bg-2); font-size: var(--text-small); display: grid; gap: 8px; }
.buy__perks li { padding-left: 22px; position: relative; }
.buy__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--brass); font-weight: 600; }
.specs th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 8px 12px 8px 0; width: 40%; vertical-align: top; }
.specs td { padding: 8px 0; }
.specs tr + tr th, .specs tr + tr td { border-top: 1px solid var(--line); }
.sticky-buy { display: none; }
@media (max-width: 900px) {
  .product__grid { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform var(--dur) var(--ease-out); }
  .sticky-buy.is-on { transform: none; }
  body[data-page="product"] { padding-bottom: 72px; }
}
