/* THREAD — PDP, Cart, Checkout, Confirmation */

/* ========== PDP ========== */
.pdp { display: grid; grid-template-columns: 628px 608px; gap: 44px; padding-bottom: 96px; }
.pdp .gallery .main {
  aspect-ratio: 628 / 720; border-radius: var(--radius-card); overflow: hidden; background: var(--surface-alt);
}
.pdp .gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.pdp .thumbs { display: flex; gap: 16px; margin-top: 16px; }
.pdp .thumbs button {
  width: 100px; height: 100px; border-radius: var(--radius-input); overflow: hidden;
  border: 2px solid transparent; background: var(--surface-alt); padding: 0;
}
.pdp .thumbs button.active { border-color: var(--ink); }
.pdp .thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp .info .eyebrow { color: var(--accent); }
.pdp .info h1 { font-size: 40px; line-height: 1.1; font-weight: 700; margin: 12px 0 8px; }
.pdp .info .colour { font-size: 14px; color: var(--ink-secondary); }
.pdp .info .price { font-size: 28px; font-weight: 700; color: var(--accent); margin: 16px 0; }
.pdp .info .desc { font-size: 14px; line-height: 1.6; color: var(--ink-secondary); max-width: 520px; }
.pdp .info hr { margin: 32px 0; }

.selector { margin-bottom: 28px; }
.selector .label { font-size: 14px; margin-bottom: 12px; display: flex; justify-content: space-between; }
.selector .label .muted { color: var(--ink-secondary); }
.selector .label .muted strong { color: var(--ink); font-weight: 500; }
.swatches { display: flex; gap: 12px; }
.swatch {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  display: grid; place-items: center; padding: 0; border: 1.5px solid transparent;
}
.swatch .dot { width: 28px; height: 28px; border-radius: var(--radius-pill); border: 1px solid rgba(0,0,0,.08); }
.swatch.active { border-color: var(--ink); }

.size-chips { display: flex; gap: 12px; }
.size-chip {
  min-width: 56px; height: 40px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; background: var(--surface);
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.size-chip:hover:not(:disabled) { border-color: var(--ink); }
.size-chip.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.size-chip:disabled { color: var(--ink-disabled); cursor: not-allowed; text-decoration: line-through; }
.size-guide { font-size: 14px; color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.sg-dialog { border: 0; border-radius: 16px; padding: 32px; width: min(480px, 92vw); box-shadow: 0 24px 64px rgba(5,5,5,.18); }
.sg-dialog::backdrop { background: rgba(5,5,5,.4); }
.sg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sg-head h3 { font-size: 24px; font-weight: 700; }
.sg-close { background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--ink); padding: 4px; }
.sg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sg-table th, .sg-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.sg-table th { font-weight: 600; font-size: 12px; color: var(--ink-secondary); text-transform: uppercase; letter-spacing: .04em; }
.sg-note { margin-top: 16px; font-size: 13px; color: var(--ink-secondary); }
.ci-each { font-size: 12px; font-weight: 400; color: var(--ink-secondary); }
.promo-msg { font-size: 13px; margin-top: 8px; }
.promo-msg.ok { color: var(--ink-secondary); }
.promo-msg.bad { color: var(--error); }
.size-error { color: var(--error); font-size: 13px; margin-top: 10px; display: block; visibility: hidden; min-height: 17px; }
.size-error.show { visibility: visible; }
@keyframes shake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(-3px)} 50%{transform:translateX(3px)} }
.size-chips.shake { animation: shake .4s; }

.pdp .actions { display: flex; gap: 16px; margin: 8px 0 16px; }
.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-pill); height: 48px;
}
.stepper button { width: 44px; height: 100%; font-size: 18px; color: var(--ink); }
.stepper button:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.stepper .val { min-width: 32px; text-align: center; font-size: 16px; font-weight: 500; }

/* Accordion */
.accordion { border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 20px 0; font-size: 16px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .plus { transition: transform var(--dur); font-size: 20px; font-weight: 400; }
.accordion details[open] summary .plus { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--ink-secondary); }

/* Related */
.related { padding: 96px 0 40px; }
.related h2 { margin-bottom: 40px; }

/* ========== CART ========== */
.cart-layout { display: grid; grid-template-columns: 1fr 411px; gap: 64px; padding-bottom: 96px; align-items: start; }
.cart-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.cart-item { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.cart-list > .cart-item:first-child { border-top: 1px solid var(--border); }
.cart-item .thumb { width: 110px; height: 132px; border-radius: var(--radius-input); overflow: hidden; background: var(--surface-alt); flex: 0 0 auto; }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .ci-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cart-item .ci-name { font-size: 18px; font-weight: 600; }
.cart-item .ci-meta { font-size: 14px; color: var(--ink-secondary); }
.cart-item .ci-price { font-size: 18px; font-weight: 700; color: var(--accent); margin-top: auto; }
.cart-item .ci-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-item .remove { font-size: 14px; color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
.cart-item .remove:hover { color: var(--ink); }
.stepper.sm { height: 44px; }
.stepper.sm button { width: 40px; }
.continue { display: inline-block; margin-top: 24px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.summary {
  background: var(--surface-alt); border-radius: var(--radius-card); padding: 32px;
  position: sticky; top: 104px;
}
.summary h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.summary .row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; }
.summary .row .lbl { color: var(--ink-secondary); }
.summary .row .val { font-weight: 500; }
.summary .promo { display: flex; gap: 8px; margin: 16px 0; }
.summary .promo input {
  flex: 1; height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); font-size: 14px;
}
.summary .promo button { height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
.summary .total .lbl { font-size: 18px; font-weight: 600; }
.summary .total .val { font-size: 18px; font-weight: 700; color: var(--accent); }
.summary .note { text-align: center; font-size: 12px; color: var(--ink-secondary); margin-top: 12px; }

/* Empty state */
.empty { text-align: center; padding: 120px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.empty svg { color: var(--accent); }
.empty h2 { font-size: 40px; font-weight: 700; }
.empty p { color: var(--ink-secondary); max-width: 360px; line-height: 1.6; }
.empty .cta { display: flex; gap: 16px; margin-top: 4px; }

/* ========== CHECKOUT ========== */
.co-header {
  height: 80px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.co-header .back { font-size: 14px; color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
.co-header .secure { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.co-header .secure svg { color: var(--accent); width: 16px; height: 16px; }
.stepper-steps { display: flex; justify-content: center; gap: 12px; padding: 32px 0; font-size: 14px; }
.stepper-steps .step { color: var(--ink-secondary); }
.stepper-steps .step.done { color: var(--ink-secondary); }
.stepper-steps .step.current { color: var(--ink); font-weight: 600; }
.stepper-steps .sep { color: var(--ink-disabled); }

.co-layout { display: grid; grid-template-columns: 620px 411px; gap: 64px; padding-bottom: 96px; align-items: start; }
.co-form section { margin-bottom: 40px; }
.co-form h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; margin-bottom: 8px; }
.field input {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-input); font-size: 16px; font-weight: 500;
  transition: border-color var(--dur);
}
.field input::placeholder { color: var(--ink-disabled); font-weight: 400; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } /* border + ring = 2px indicator, no layout shift */
.field.error input { border-color: var(--error); }
.field .err { color: var(--error); font-size: 13px; margin-top: 6px; display: none; }
.field.error .err { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.option-card {
  border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; margin-bottom: 12px; transition: border-color var(--dur);
}
.option-card.selected { border: 1.5px solid var(--ink); }
.option-card .radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); flex: 0 0 auto; display: grid; place-items: center; }
.option-card.selected .radio { border: 5px solid var(--accent-btn); }
.option-card .oc-main { flex: 1; }
.option-card .oc-title { font-size: 15px; font-weight: 500; }
.option-card .oc-sub { font-size: 13px; color: var(--ink-secondary); }
.option-card .oc-price { font-weight: 500; }
.card-fields { margin-top: 12px; }

.error-banner {
  background: var(--error-bg); border: 1px solid var(--accent);
  border-radius: var(--radius-input); padding: 16px 20px;
  display: flex; gap: 12px; margin-bottom: 24px;
}
.error-banner svg { color: var(--accent); flex: 0 0 auto; }
.error-banner .eb-title { font-size: 16px; font-weight: 600; }
.error-banner .eb-text { font-size: 14px; color: var(--ink-secondary); margin-top: 4px; }
.pay-legal { text-align: center; font-size: 12px; color: var(--ink-secondary); margin-top: 12px; }

.mini-item { display: flex; gap: 12px; padding: 12px 0; align-items: center; }
.mini-item .mi-thumb { width: 56px; height: 64px; border-radius: var(--radius-mini); overflow: hidden; background: var(--surface-alt); }
.mini-item .mi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-item .mi-info { flex: 1; }
.mini-item .mi-name { font-size: 14px; font-weight: 600; }
.mini-item .mi-meta { font-size: 12px; color: var(--ink-secondary); }
.mini-item .mi-price { font-size: 14px; font-weight: 600; }

/* ========== CONFIRMATION ========== */
.confirm { text-align: center; padding: 64px 0 40px; display: flex; flex-direction: column; align-items: center; }
.confirm .check { color: var(--accent); margin-bottom: 20px; }
.confirm h1 { font-size: 40px; font-weight: 700; }
.confirm p { color: var(--ink-secondary); line-height: 1.6; margin-top: 12px; max-width: 480px; }
.details-card {
  width: 620px; max-width: 100%; margin: 40px auto 0;
  background: var(--surface-alt); border-radius: var(--radius-card); padding: 32px; text-align: left;
}
.details-card .total-paid { display: flex; justify-content: space-between; padding: 16px 0; }
.details-card .total-paid .lbl { font-size: 18px; font-weight: 600; }
.details-card .total-paid .val { font-size: 18px; font-weight: 700; color: var(--accent); }
.details-card .del-info { display: flex; gap: 40px; padding-top: 16px; }
.details-card .del-info h5 { font-size: 12px; font-weight: 500; color: var(--ink-secondary); margin-bottom: 4px; }
.details-card .del-info p { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }
.confirm .cta { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }