.sf-page { max-width: 960px; margin: 0 auto; padding: 1.25rem 1.25rem 5rem; }
.sf-page-title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .35rem; letter-spacing: -.03em; }
.sf-page-sub { color: var(--sf-muted); margin: 0 0 1.25rem; }
.sf-back { display: inline-flex; margin-bottom: .85rem; color: var(--sf-primary); font-weight: 700; text-decoration: none; }

.sf-product-page {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.5rem; align-items: start;
}
@media (max-width: 800px) {
  .sf-product-page { grid-template-columns: 1fr; }
}
.sf-product-media {
  border-radius: 1.5rem; overflow: hidden; aspect-ratio: 1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sf-primary) 30%, #fff), var(--sf-primary));
  box-shadow: var(--sf-shadow, 0 16px 40px rgb(0 0 0 / .08));
}
.sf-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-product-media .sf-img-fallback { min-height: 100%; }
.sf-product-panel {
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 1.5rem;
  padding: 1.2rem 1.25rem; box-shadow: 0 12px 36px rgb(0 0 0 / .05);
}
.sf-product-panel h1 { margin: .4rem 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; }
.sf-product-desc { color: var(--sf-muted); white-space: pre-wrap; line-height: 1.5; margin: .75rem 0 1rem; }
.sf-opt-grid { display: grid; gap: .45rem; margin: .55rem 0 1rem; }
.sf-opt {
  display: flex; justify-content: space-between; gap: .75rem; align-items: center;
  border: 1px solid var(--sf-border); border-radius: .85rem; padding: .7rem .8rem; cursor: pointer;
  background: var(--sf-paper);
}
.sf-opt.is-on { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 10%, transparent); }
.sf-opt input { accent-color: var(--sf-primary); width: 20px; height: 20px; }
.sf-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0; }
.sf-qty-row .qty { display: inline-flex; gap: .45rem; align-items: center; }
.sf-qty-row button {
  width: 2.2rem; height: 2.2rem; border-radius: .65rem; border: 1px solid var(--sf-border);
  background: var(--sf-card); cursor: pointer; font-size: 1.1rem;
}

.sf-checkout-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.25rem; align-items: start;
}
@media (max-width: 860px) {
  .sf-checkout-grid { grid-template-columns: 1fr; }
}
.sf-box {
  background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 1.35rem;
  padding: 1.1rem 1.15rem; margin-bottom: 1rem;
}
.sf-box h2 { margin: 0 0 .85rem; font-size: 1.15rem; }
.sf-field { display: block; margin: .55rem 0 .25rem; color: var(--sf-muted); font-size: .88rem; }
.sf-box input, .sf-box select, .sf-box textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--sf-border); border-radius: .7rem;
  padding: .65rem .75rem; font: inherit; font-size: 16px; background: var(--sf-paper); color: var(--sf-ink);
}
.sf-box input[type=radio], .sf-box input[type=checkbox] {
  width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--sf-primary); flex: 0 0 auto;
}
.sf-pay-option {
  border: 1px solid var(--sf-border); border-radius: 1rem; padding: .85rem 1rem; margin: .5rem 0;
  cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: center;
  background: var(--sf-paper); transition: border-color .15s ease, background .15s ease;
}
.sf-pay-option input { grid-row: span 2; }
.sf-bank-card, .sf-link-card { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; cursor: pointer; }
.sf-bank-card > :not(input), .sf-link-card > :not(input) { grid-column: 2; }
.sf-bank-card input, .sf-link-card input { grid-row: span 4; margin-top: .15rem; }
.sf-pay-option:has(input:checked) {
  border-color: var(--sf-primary);
  background: color-mix(in srgb, var(--sf-primary) 10%, transparent);
}
.sf-pay-option strong { display: block; }
.sf-pay-option span { color: var(--sf-muted); font-size: .9rem; }
.sf-banks, .sf-links { display: grid; gap: .65rem; margin-top: .75rem; }
.sf-bank-card, .sf-link-card {
  border: 1px dashed var(--sf-border); border-radius: .9rem; padding: .75rem .85rem; background: var(--sf-card);
}
.sf-bank-card code { font-size: 1rem; font-weight: 800; color: var(--sf-primary); }
.sf-link-card a { color: var(--sf-primary); font-weight: 700; word-break: break-all; }
.sf-cart-line {
  display: flex; align-items: center; gap: .85rem; padding: .7rem 0;
  border-bottom: 1px solid var(--sf-border); font-size: .95rem;
}
.sf-cart-line .sf-cart-info { flex: 1; }
.sf-cart-line > strong { white-space: nowrap; }
.sf-cart-line .sub { color: var(--sf-muted); font-size: .8rem; }
.sf-submit {
  width: 100%; border: 0; border-radius: .85rem; padding: .9rem 1rem; font-weight: 800;
  background: var(--sf-primary); color: #fff; cursor: pointer; font: inherit; font-size: 1.05rem;
}
.sf-errors {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: .85rem; padding: .85rem 1rem; margin-bottom: 1rem;
}