/* ── Product Detail ──────────────────────────────────────── */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2rem 0; }
.gallery { display: flex; flex-direction: column; gap: .75rem; }
.gallery__main { aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--gray-100); background: var(--gray-50); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery__main img { max-height: 400px; object-fit: contain; transition: opacity .2s; }
.gallery__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.gallery__thumb { width: 64px; height: 64px; border-radius: 8px; border: 2px solid var(--gray-200); background: var(--gray-50); overflow: hidden; cursor: pointer; transition: border-color .15s; display: flex; align-items: center; justify-content: center; padding: .25rem; }
.gallery__thumb.active, .gallery__thumb:hover { border-color: var(--red); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-info__brand { font-size: .875rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: .05em; }
.product-info h1 { font-size: 1.625rem; font-weight: 800; color: var(--gray-900); margin: .5rem 0 .25rem; line-height: 1.3; }
.product-info__model { font-size: .875rem; color: var(--gray-400); }
.product-info__price-box { background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; }
.product-info__price { font-size: 2rem; font-weight: 800; color: var(--gray-900); }
.product-info__currency { font-size: .875rem; color: var(--gray-400); font-weight: 400; margin-left: .25rem; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { margin-top: 1.5rem; }
.tabs__header { display: flex; border-bottom: 2px solid var(--gray-100); gap: .25rem; }
.tabs__btn { padding: .75rem 1.25rem; font-size: .9375rem; font-weight: 600; color: var(--gray-500); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tabs__btn.active { color: var(--red); border-bottom-color: var(--red); }
.tabs__btn:hover { color: var(--gray-900); }
.tabs__panel { padding: 1.5rem 0; display: none; }
.tabs__panel.active { display: block; }
.tabs__panel p, .tabs__panel li { font-size: .9375rem; color: var(--gray-700); line-height: 1.65; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--gray-100); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table td { padding: .625rem .75rem; font-size: .875rem; }
.specs-table td:first-child { color: var(--gray-500); font-weight: 600; width: 40%; }

/* ── Checkout ────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 2.5rem; padding: 2rem 0 4rem; align-items: start; }
.form-section { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; }
.form-section h2 { font-size: 1.0625rem; font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: .625rem; margin-bottom: 1.25rem; }
.form-section h2 svg { color: var(--red); }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .875rem; font-weight: 500; color: var(--gray-700); margin-bottom: .375rem; }
.form-label .req { color: var(--red); }
.form-control { width: 100%; padding: .75rem 1rem; border: 1px solid var(--gray-200); border-radius: 10px; font-size: .9375rem; color: var(--gray-900); transition: border-color .15s, box-shadow .15s; }
.form-control:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(185,28,28,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.payment-option { display: flex; align-items: flex-start; gap: .875rem; padding: .875rem 1rem; border-radius: 10px; border: 2px solid var(--gray-100); cursor: pointer; transition: all .15s; margin-bottom: .625rem; }
.payment-option input { margin-top: .125rem; accent-color: var(--red); }
.payment-option:has(input:checked) { border-color: var(--red); background: var(--red-light); }
.payment-option__label { font-size: .9375rem; font-weight: 600; }
.payment-option__desc { font-size: .8125rem; color: var(--gray-500); margin-top: .125rem; }

/* ── Order Summary (dark) ───────────────────────────────────── */
.order-summary { background: var(--gray-900); color: #fff; border-radius: 1.25rem; padding: 2rem; position: sticky; top: 80px; }
.order-summary h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.summary-items { display: flex; flex-direction: column; gap: .75rem; max-height: 40vh; overflow-y: auto; padding-right: .25rem; margin-bottom: 1.5rem; }
.summary-item { background: rgba(255,255,255,.05); border-radius: 10px; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.summary-item__top { display: flex; justify-content: space-between; gap: .75rem; }
.summary-item__name { font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.summary-item__remove { color: var(--gray-400); flex-shrink: 0; transition: color .15s; }
.summary-item__remove:hover { color: #f87171; }
.summary-item__bottom { display: flex; align-items: center; justify-content: space-between; }
.summary-item__qty { display: flex; align-items: center; gap: .5rem; background: rgba(0,0,0,.3); border-radius: 6px; padding: .25rem .5rem; }
.summary-item__qty button { color: #fff; font-size: .875rem; }
.summary-item__qty span { font-size: .8125rem; font-weight: 700; min-width: 16px; text-align: center; }
.summary-item__subtotal { font-size: .875rem; font-weight: 700; color: #f87171; }
.summary-totals { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.summary-totals__row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--gray-400); }
.summary-totals__total { display: flex; justify-content: space-between; font-size: 1.125rem; font-weight: 700; color: #fff; border-top: 1px solid rgba(255,255,255,.1); padding-top: .75rem; margin-top: .25rem; }
.summary-totals__total span:last-child { color: #f87171; }

/* ── Success screen ─────────────────────────────────────────── */
.success-screen { text-align: center; padding: 4rem 1rem; max-width: 540px; margin: 0 auto; }
.success-icon { width: 80px; height: 80px; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.success-screen h2 { font-size: 1.875rem; font-weight: 800; color: var(--gray-900); margin-bottom: .75rem; }
.success-screen p { font-size: 1rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 2rem; }
.success-screen .folio { font-weight: 700; color: var(--red); }

/* ── Contact ───────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 380px; gap: 3rem; padding: 2rem 0 4rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; }
.contact-card__icon { width: 40px; height: 40px; background: var(--red-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--red); flex-shrink: 0; }
.contact-card__title { font-size: .875rem; font-weight: 700; color: var(--gray-900); }
.contact-card__text { font-size: .9375rem; color: var(--gray-600); margin-top: .125rem; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert { padding: .875rem 1rem; border-radius: 10px; font-size: .875rem; margin-bottom: 1rem; }
.alert--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert--success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

/* ── Responsive detail/checkout/contact ─────────────────────── */
@media (max-width: 1024px) {
  .checkout-layout, .contact-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}
@media (max-width: 768px) {
  .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
}