/* Cart, mini-cart drawer, checkout and confirmation (phase 3). Logical properties only. */

/* Header badge: shared .sf-count-btn / .sf-count-badge (storefront.css) — cart, wishlist and compare alike. */

/* Mini-cart drawer */
.sf-cart-drawer { inline-size: min(92vw, 420px); }
.sf-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.sf-mini-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.sf-mini-thumb { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 10px; overflow: hidden; background: var(--ys-bg); color: var(--ys-line); }
.sf-mini-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-mini-name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-mini-variant { font-size: .8rem; color: var(--ys-muted); }
.sf-mini-line { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; margin-block-start: .2rem; }
.sf-mini-remove { border: 0; background: transparent; color: var(--ys-muted); inline-size: 34px; block-size: 34px; border-radius: 50%; }
.sf-mini-remove:hover { background: var(--ys-bg); color: var(--ys-danger); }
.sf-mini-footer { border-block-start: 1px solid var(--ys-line); margin-block-start: 1rem; padding-block-start: 1rem; }
.sf-mini-total { display: flex; justify-content: space-between; font-size: 1.05rem; margin-block-end: .25rem; }
.sf-mini-total.is-muted { font-size: .9rem; color: var(--ys-muted); }
.sf-mini-total.is-discount { color: var(--ys-success); }
.sf-line-problem { color: var(--ys-danger); font-size: .82rem; font-weight: 600; margin-block-start: .25rem; }
.has-problem .sf-mini-thumb, .has-problem .sf-cart-thumb { opacity: .6; }

/* Cart page */
.sf-cart-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block-end: 3rem; }
@media (min-width: 992px) { .sf-cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start; } }
.sf-cart-lines { display: grid; gap: 1rem; }
.sf-cart-line {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb info remove" "thumb qty total";
  gap: .5rem .9rem; padding: .9rem; border: 1px solid var(--ys-line); border-radius: var(--sf-card-radius); align-items: center;
}
@media (min-width: 768px) {
  .sf-cart-line { grid-template-columns: 96px minmax(0, 1fr) auto auto auto; grid-template-areas: "thumb info qty total remove"; padding: 1rem; gap: .5rem 1rem; }
}
.sf-cart-thumb { grid-area: thumb; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--ys-bg); color: var(--ys-line); }
.sf-cart-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-cart-info { grid-area: info; min-inline-size: 0; }
.sf-cart-name { font-weight: 600; display: block; }
.sf-cart-variant { font-size: .85rem; color: var(--ys-muted); }
.sf-cart-unit { font-size: .9rem; margin-block-start: .25rem; }
.sf-cart-unit del { margin-inline-start: .35rem; }
.sf-cart-total { grid-area: total; text-align: end; font-size: 1.05rem; }
.sf-cart-remove { grid-area: remove; border: 0; background: transparent; color: var(--ys-muted); inline-size: 40px; block-size: 40px; border-radius: 50%; justify-self: end; }
.sf-cart-remove:hover { background: var(--ys-bg); color: var(--ys-danger); }

/* Quantity stepper (cart page + product page) */
.sf-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--ys-line); border-radius: 999px; overflow: hidden; inline-size: fit-content; background: #fff; }
.sf-qty-btn { inline-size: 42px; block-size: 42px; border: 0; background: transparent; font-size: 1.15rem; font-weight: 700; color: var(--ys-ink); }
.sf-qty-btn:hover { background: var(--ys-bg); }
.sf-qty-btn:disabled { color: var(--ys-muted); background: transparent; }
.sf-qty-btn:focus-visible, .sf-qty-input:focus-visible { outline: 2px solid var(--ys-primary); outline-offset: -3px; }
.sf-qty-input { inline-size: 48px; block-size: 42px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.sf-qty-input::-webkit-outer-spin-button, .sf-qty-input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* Summaries */
.sf-cart-summary, .sf-checkout-summary { border: 1px solid var(--ys-line); border-radius: var(--sf-card-radius); padding: 1.25rem; background: var(--ys-bg); }
@media (min-width: 992px) { .sf-cart-summary, .sf-checkout-summary { position: sticky; inset-block-start: calc(var(--sf-header-h) + 1rem); } }
.sf-summary-list { display: grid; gap: .5rem; margin: 0 0 1rem; }
.sf-summary-list > div { display: flex; justify-content: space-between; gap: 1rem; }
.sf-summary-list dt { font-weight: 500; color: var(--ys-muted); }
.sf-summary-list dd { margin: 0; font-weight: 600; text-align: end; }
.sf-summary-list .is-discount dd { color: var(--ys-success); }
.sf-summary-list .is-total { border-block-start: 1px solid var(--ys-line); padding-block-start: .6rem; margin-block-start: .25rem; font-size: 1.1rem; }
.sf-summary-list .is-total dt { color: var(--ys-ink); font-weight: 700; }
.sf-summary-list.is-plain dt { min-inline-size: 5rem; }
.sf-summary-items { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.sf-summary-items li { display: flex; align-items: center; gap: .75rem; }
.sf-summary-thumb { inline-size: 48px; block-size: 48px; border-radius: 8px; overflow: hidden; background: #fff; flex: none; }
.sf-summary-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sf-summary-name { flex: 1; min-inline-size: 0; font-size: .92rem; }
.sf-summary-price { font-weight: 700; white-space: nowrap; }

/* Product page buy box */
.sf-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1rem 1.25rem; }
.sf-buy-btn { border-radius: 999px; padding-inline: 1.5rem; flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-block-size: 46px; }

/* Checkout */
.sf-checkout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block-end: 3rem; }
@media (min-width: 992px) { .sf-checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: 2.5rem; align-items: start; } }
.sf-checkout-section { border: 1px solid var(--ys-line); border-radius: var(--sf-card-radius); padding: 1.25rem; margin-block-end: 1rem; background: #fff; }
.sf-checkout-title { font-size: 1rem; font-weight: 800; margin: 0 0 1rem; }
.sf-field .form-control, .sf-field .form-select { min-block-size: 46px; font-size: 1rem; }
.sf-honeypot { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.sf-checkout-submit { position: sticky; inset-block-end: 0; padding-block: .75rem; background: linear-gradient(to top, #fff 70%, transparent); z-index: 5; }
.sf-checkout-submit .btn { border-radius: 999px; }

/* Confirmation */
.sf-confirmation { padding-block: 2rem 3rem; }
.sf-confirmation-head { text-align: center; max-inline-size: 640px; margin-inline: auto; margin-block-end: 2rem; }
.sf-confirmation-icon { display: inline-grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--ys-primary-soft); color: var(--ys-primary); font-size: 2rem; margin-block-end: 1rem; }
.sf-confirmation-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .sf-confirmation-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.sf-confirmation-card { border: 1px solid var(--ys-line); border-radius: var(--sf-card-radius); padding: 1.5rem; }
.sf-next-steps { padding-inline-start: 1.2rem; color: var(--ys-muted); display: grid; gap: .35rem; }