/* ============================================================================
   HUNTER SHOP — Warenkorb & Checkout
   ========================================================================== */

.page-head { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--sp-6); }
.page-head h1 { font-size: var(--fs-h1); }

/* --- CART ITEMS ----------------------------------------------------------- */
.cart-item { display: grid; grid-template-columns: 92px 1fr auto; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item__thumb { width: 92px; height: 92px; border-radius: var(--r-md); background: var(--mist); object-fit: cover; border: 1px solid var(--line); }
.cart-item__cat { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-soft); }
.cart-item__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); }
.cart-item__variant { font-size: var(--fs-sm); color: var(--text-muted); }
.cart-item__controls { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.cart-item__remove { font-size: var(--fs-sm); color: var(--text-soft); display: inline-flex; align-items: center; gap: 0.3em; }
.cart-item__remove:hover { color: var(--err); }
.cart-item__price { text-align: right; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-xl); color: var(--text-strong); white-space: nowrap; }
.cart-item .qty { --qty-btn: 40px; }
.cart-item .qty button { width: 40px; }
.cart-item .qty input { width: 40px; min-height: 40px; }
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 72px 1fr; grid-template-areas: "thumb info" "thumb price"; }
  .cart-item__thumb { width: 72px; height: 72px; grid-area: thumb; }
  .cart-item__price { text-align: left; grid-area: price; }
}

/* --- SUMMARY -------------------------------------------------------------- */
.summary { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-6); }
.summary h2, .summary h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
.summary__row span:last-child { color: var(--text-strong); font-weight: var(--fw-semi); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.summary__total b { font-size: var(--fs-sm); color: var(--text-strong); font-weight: var(--fw-semi); }
.summary__total .amount { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--fw-black); color: var(--text-strong); }
.summary__vat { font-size: var(--fs-xs); color: var(--text-soft); text-align: right; margin-top: -0.2rem; }
.summary .btn { margin-top: var(--sp-5); }
.summary__trust { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.summary__trust .assurance { font-size: var(--fs-xs); }

.free-ship { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
.free-ship p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.free-ship p strong { color: var(--leaf-600); }

/* --- CHECKOUT LAYOUT (1:1 nach Rasenstark-FunnelKit-Checkout) -------------- */
.co-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-bottom: var(--sp-10); }
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; } .co-side { order: 3; } }

/* Trust-Reihe oben */
.co-trustrow { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--mist); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.co-trust { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-semi); }
.co-trust svg { width: 20px; height: 20px; color: var(--color-primary); flex: none; }

.co-h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: var(--lh-tight); margin-bottom: var(--sp-6); }

/* Bestell-Box */
.co-order { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-3); }
.co-order__title { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--sp-4); }
.co-edit { font-size: var(--fs-sm); color: var(--color-primary); text-decoration: underline; display: inline-block; margin-bottom: var(--sp-7); }

/* Express-Buttons — echte Marken-Buttons */
.co-express-label { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); color: var(--text); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.co-express-label::before, .co-express-label::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.xpay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.xpay { min-height: 48px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; border: 1px solid transparent; cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-base); transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.xpay:hover { transform: translateY(-1px); filter: brightness(0.96); }
.xpay--pp { grid-column: 1 / -1; background: #ffc439; color: #003087; }
.xpay--pp img { height: 20px; width: auto; display: block; }
.xpay--apple { background: #000; color: #fff; }
.xpay--apple svg { width: 20px; height: 20px; }
.xpay--gpay { background: #fff; color: #3c4043; border-color: var(--line-strong); }
.xpay--gpay img { height: 20px; width: auto; display: block; }

.express-divider { display: flex; align-items: center; gap: var(--sp-4); margin-block: var(--sp-6); color: var(--text-soft); font-size: var(--fs-sm); }
.express-divider::before, .express-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* Abschnitte */
.co-section { margin-bottom: var(--sp-7); }
.co-section__h { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.co-section__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }

.form-stack { display: grid; gap: var(--sp-4); }

/* Telefon mit Ländervorwahl */
.tel-row { display: flex; gap: var(--sp-3); }
.tel-prefix { flex: none; display: inline-flex; align-items: center; gap: 0.4em; padding: 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--mist); font-size: var(--fs-sm); color: var(--text); }
.tel-row input { flex: 1; }

/* Zahlungsarten (echte Logos statt Text) */
.pay-methods { display: grid; gap: var(--sp-3); }
.pay-method { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.pay-method:hover { border-color: var(--color-primary); }
.pay-method input { width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
.pay-method:has(input:checked) { border-color: var(--color-primary); background: rgba(0, 101, 138,0.05); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.pay-method__label { font-weight: var(--fw-semi); }
.pay-method__note { font-size: var(--fs-xs); color: var(--text-soft); display: block; font-weight: 400; }
.pay-method__logo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.pay-method__logo img { height: 22px; width: auto; display: block; }

/* Bestell-Positionen in der Box */
.mini-item { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
.mini-item + .mini-item { border-top: 1px solid var(--line); }
.mini-item img { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--mist); border: 1px solid var(--line); object-fit: contain; padding: 3px; flex: none; }
.mini-item__info { min-width: 0; }
.mini-item .m-name { font-weight: var(--fw-semi); color: var(--text-strong); display: block; }
.mini-item .m-var { color: var(--text-soft); font-size: var(--fs-xs); }
.mini-item .m-price { margin-left: auto; font-weight: var(--fw-bold); white-space: nowrap; text-align: right; }
.mini-item .m-qty { font-family: var(--font-mono); color: var(--text-soft); font-size: var(--fs-xs); display: block; }
.co-order hr.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-4); }
.co-order .summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
.co-order .summary__row span:last-child { color: var(--text-strong); font-weight: var(--fw-semi); }
.co-order .summary__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.co-order .summary__total b { font-size: var(--fs-base); color: var(--text-strong); }
.co-order .summary__total .amount { font-family: var(--font-display); font-size: 1.7rem; font-weight: var(--fw-black); color: var(--text-strong); }
.co-order .summary__vat { font-size: var(--fs-xs); color: var(--text-soft); text-align: right; margin-top: 2px; }

/* AGB-Checkbox + Bestell-Button */
.co-agb { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--sp-4); }
.co-agb input { width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; margin-top: 1px; }
.co-agb a { color: var(--color-primary); text-decoration: underline; }
.co-place { width: 100%; min-height: 56px; background: #111; color: #fff; border-radius: var(--r-md); font-size: var(--fs-lg); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; box-shadow: var(--sh-sm); transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.co-place:hover { background: #000; transform: translateY(-1px); }
.co-place svg { width: 18px; height: 18px; }
.co-reassure { display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--sp-3); text-align: center; }
.co-reassure svg { width: 15px; height: 15px; color: var(--leaf-600); flex: none; }

.legal-note { font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--sp-4); line-height: var(--lh-normal); }
.legal-note a { color: var(--color-primary); text-decoration: underline; }

/* Checkout-Inputs (klar, ruhig — wie Referenz) */
.co-grid .field input, .co-grid .field select { border-radius: var(--r-sm); border: 1px solid var(--line-strong); padding: 12px 14px; }
.co-grid .field input:focus, .co-grid .field select:focus { border-color: var(--color-primary); }

/* Sidebar */
.co-side { display: grid; gap: var(--sp-5); }
.co-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.co-card__h { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }
.co-list { display: grid; gap: var(--sp-3); }
.co-list li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text); list-style: none; }
.co-list svg { width: 20px; height: 20px; color: var(--leaf-600); flex: none; margin-top: 1px; }
.co-list b { display: block; }
.co-list span { color: var(--text-muted); font-size: var(--fs-xs); }
.co-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.co-value { }
.co-value__ic { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--color-tint); color: var(--color-primary); margin-bottom: var(--sp-2); }
.co-value__ic svg { width: 20px; height: 20px; }
.co-value b { display: block; font-size: var(--fs-sm); }
.co-value p { font-size: var(--fs-xs); color: var(--text-muted); }
.co-callcard { background: var(--color-tint); border: 1px solid var(--color-line); border-radius: var(--r-lg); padding: var(--sp-5); }
.co-callcard b { display: block; font-family: var(--font-display); margin-bottom: var(--sp-2); }
.co-callcard .phone { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary); }