﻿.checkout-page { padding:24px 0 48px; color:var(--home-ink); background:var(--checkout-bg); }
.checkout-back { display:inline-flex; align-items:center; gap:8px; color:var(--home-muted); font-size:13px; margin-bottom:18px; }
.checkout-back:hover { color:var(--home-green); }
.checkout-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px 36px; margin-bottom:26px; background:#e8f0e2; border:1px solid #dce6d5; border-radius:20px; }
.checkout-hero h1 { margin:12px 0; font-size:clamp(30px,3.5vw,44px); font-weight:800; line-height:1.1; letter-spacing:-.05em; }
.checkout-hero h1 em { color:var(--home-green); font-style:normal; }
.checkout-hero p { color:#5b7060; margin:0; font-size:14px; line-height:1.7; }
.checkout-progress { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--home-muted); }
.checkout-progress > a,.checkout-progress > span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.checkout-progress > a { color:var(--home-green); }
.checkout-progress :is(b,a > span) { display:grid; place-items:center; width:27px; height:27px; border:1px solid #cad8c4; border-radius:50%; background:#ffffff5c; font-size:11px; font-weight:600; }
.checkout-progress [aria-current] { color:var(--home-green); font-weight:700; }
.checkout-progress [aria-current] b { background:var(--home-green); color:#fff; border-color:var(--home-green); }
.checkout-progress > i { color:#9aaf96; font-size:11px; }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:26px; align-items:start; }
.checkout-form-card { background:#fff; border:1px solid var(--home-line); border-radius:16px; padding:28px; min-width:0; }
.checkout-section { min-width:0; padding:0 0 24px; margin:0 0 24px; border:0; border-bottom:1px solid var(--home-line); }
.checkout-section:last-of-type { margin-bottom:0; }
.checkout-section legend { display:flex; align-items:center; gap:12px; float:none; width:auto; margin:0 0 22px; color:var(--home-ink); font-size:17px; font-weight:750; }
.checkout-section legend small { display:block; margin-top:3px; color:var(--home-muted); font-size:12px; font-weight:400; }
.checkout-step { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid #dce6d5; border-radius:10px; background:#eef3e8; color:var(--home-green); font-size:14px; font-weight:750; }
.checkout-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.checkout-field-grid > div { min-width:0; }
.checkout-required { margin-left:5px; color:var(--home-green); font-size:10px; font-weight:500; }
.checkout-section input[aria-invalid="true"] { border-color:#b44d41; }
.checkout-section label:not(.checkout-delivery) { display:block; margin-bottom:8px; color:#43594d; font-size:13px; font-weight:650; }
.checkout-section :is(input[type="text"],textarea) { display:block; width:100%; min-width:0; border:1px solid var(--home-line); border-radius:9px; padding:12px 14px; background:#fbfcfa; color:var(--home-ink); font:inherit; font-size:14px; line-height:1.6; }
.checkout-section input[type="text"] { min-height:48px; }
.checkout-section textarea { min-height:92px; resize:vertical; }
.checkout-section :is(input[type="text"],textarea)::placeholder { color:#9aa59b; }
.checkout-section :is(input[type="text"],textarea):focus { outline:2px solid #17644922; outline-offset:1px; border-color:var(--home-green); background:#fff; }
#checkout-address { margin-bottom:18px; }
.checkout-note { margin-top:20px; }
.checkout-note summary { width:fit-content; color:var(--home-green); font-size:13px; font-weight:650; cursor:pointer; }
.checkout-note summary span { margin-left:7px; color:var(--home-muted); font-size:11px; font-weight:400; }
.checkout-note textarea { margin-top:12px; }
.checkout-delivery-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.checkout-delivery { display:grid; grid-template-columns:18px 1fr; gap:9px; align-items:start; margin:0; padding:15px 12px; border:1px solid var(--home-line); border-radius:10px; background:#fff; font-size:13px; cursor:pointer; }
.checkout-delivery:has(input:checked) { border-color:var(--home-green); background:#f1f7ed; box-shadow:inset 0 0 0 1px var(--home-green); }
.checkout-delivery input { width:16px; height:16px; margin-top:3px; accent-color:var(--home-green); }
.checkout-delivery > span { font-weight:650; }
.checkout-delivery small { display:block; margin-top:3px; color:var(--home-muted); font-size:11px; font-weight:400; }
.checkout-delivery strong { grid-column:2; margin-top:2px; color:var(--home-green); font-size:15px; }
.checkout-payment { display:flex; align-items:center; gap:12px; margin-top:18px; padding:16px; background:#eef3e8; border-radius:10px; }
.checkout-payment > i { color:var(--home-green); font-size:23px; }
.checkout-payment strong { font-size:13px; font-weight:700; }
.checkout-payment p { margin:3px 0 0; color:var(--home-muted); font-size:11px; line-height:1.7; }
.checkout-payment-tag { margin-left:auto; padding:4px 7px; border:1px solid #d1dfc9; border-radius:5px; color:var(--home-green); font-size:10px; font-weight:700; }
.checkout-form-bottom { padding-top:20px; text-align:center; }
.checkout-form-bottom p { margin:0 0 10px; color:var(--home-muted); font-size:12px; line-height:1.7; }
.checkout-form-bottom > a { display:inline-flex; padding:7px 0; color:var(--home-green); font-size:12px; font-weight:650; }
.checkout-summary { position:sticky; top:110px; min-width:0; }
.checkout-summary-details { background:#fff; border:1px solid var(--home-line); border-radius:16px; }
.checkout-summary-details > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:24px; color:var(--home-ink); font-size:19px; font-weight:750; list-style:none; cursor:pointer; }
.checkout-summary-details > summary::-webkit-details-marker { display:none; }
.checkout-summary-details > summary small { display:inline-block; vertical-align:middle; margin-left:8px; padding:3px 7px; background:#f0f4ec; border-radius:5px; color:var(--home-muted); font-size:11px; font-weight:500; }
.checkout-summary-content { padding:0 24px 20px; }
.checkout-item { display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--home-line); }
.checkout-item-image { position:relative; flex:0 0 60px; width:60px; height:60px; border:1px solid var(--home-line); border-radius:9px; background:#f5f6f3; }
.checkout-item-image img { width:100%; height:100%; border-radius:8px; object-fit:contain; }
.checkout-item-image > span { position:absolute; top:-7px; right:-7px; display:grid; place-items:center; min-width:21px; height:21px; padding:0 4px; border-radius:50%; background:var(--home-green); color:#fff; font-size:10px; font-weight:650; }
.checkout-item-copy { flex:1; min-width:0; }
.checkout-item-copy h2 { margin:0 0 4px; color:var(--home-ink); font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.checkout-item-copy p { margin:0 0 3px; color:var(--home-muted); font-size:11px; }
.checkout-item-copy small { color:var(--home-muted); font-size:11px; }
.checkout-item > strong { flex-shrink:0; color:var(--home-ink); font-size:13px; font-weight:700; }
.checkout-totals { margin:8px 0 20px; padding-top:16px; border-top:1px solid var(--home-line); }
.checkout-totals > div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; font-size:13px; }
.checkout-totals dt { color:var(--home-muted); font-weight:400; }
.checkout-totals dd { margin:0; color:var(--home-ink); font-weight:600; white-space:nowrap; }
.checkout-totals .checkout-discount :is(dt,dd) { color:var(--home-green); }
.checkout-totals .checkout-grand-total { margin-top:20px; margin-bottom:0; padding-top:18px; border-top:1px solid var(--home-line); }
.checkout-grand-total dt { color:var(--home-ink); font-size:17px; font-weight:750; }
.checkout-grand-total small { display:block; margin-top:3px; color:var(--home-muted); font-size:11px; font-weight:400; }
.checkout-grand-total dd { color:var(--home-green); font-size:26px; font-weight:800; letter-spacing:-.04em; }
.checkout-place-order { display:flex; align-items:center; justify-content:center; gap:16px; width:100%; min-height:50px; padding:13px 18px; border:0; border-radius:9px; background:var(--home-green); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.checkout-place-order:hover { background:var(--home-dark); }
.checkout-place-order i { margin-left:auto; }
.checkout-summary-note { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--home-muted); margin:14px 0 0; font-size:11px; }
.checkout-summary-note i { color:var(--home-green); }
.checkout-help { display:flex; align-items:center; justify-content:center; gap:12px; padding:22px 12px; }
.checkout-help > i { color:var(--home-green); font-size:25px; }
.checkout-help > span { color:var(--home-muted); font-size:12px; }
.checkout-help a { display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--home-green); font-size:12px; font-weight:700; }
.checkout-message { margin-bottom:20px; padding:16px 20px; background:#eef3e8; border:1px solid #dce6d5; border-radius:10px; color:var(--home-dark); font-size:14px; }
.checkout-submit-mobile,.checkout-mobile-total,.checkout-summary-toggle { display:none; }
@media (max-width:991px) {
 .checkout-hero { align-items:start; flex-direction:column; gap:22px; }
 .checkout-layout { display:flex; flex-direction:column; gap:18px; }
 .checkout-form-card,.checkout-summary { width:100%; }
 .checkout-summary { position:static; order:-1; }
 .checkout-summary-details > summary { padding:18px 22px; font-size:16px; }
 .checkout-mobile-total { display:block; margin-left:auto; color:var(--home-green); font-size:18px; }
 .checkout-summary-toggle { display:block; color:var(--home-green); font-size:23px; font-weight:400; }
 .checkout-summary-details[open] .checkout-summary-toggle { transform:rotate(45deg); }
 .checkout-help,.checkout-submit-desktop { display:none; }
 .checkout-submit-mobile { display:flex; margin:18px 0 12px; }
 .checkout-submit-mobile > span { margin-left:auto; }
 .checkout-submit-mobile i { margin-left:0; }
}
@media (max-width:767px) {
 .checkout-page { padding-top:14px; }
 .checkout-back { margin-bottom:14px; font-size:12px; }
 .checkout-hero { padding:24px 20px; border-radius:13px; margin-bottom:18px; }
 .checkout-hero h1 { font-size:33px; }
 .checkout-hero p { font-size:12px; max-width:270px; }
 .checkout-progress { gap:8px; font-size:10px; }
 .checkout-progress :is(b,a > span) { width:23px; height:23px; font-size:10px; }
 .checkout-progress > a,.checkout-progress > span { gap:5px; }
 .checkout-progress > i { font-size:8px; }
 .checkout-form-card { padding:22px 18px; border-radius:13px; }
 .checkout-section { padding-bottom:22px; margin-bottom:22px; }
 .checkout-section legend { font-size:16px; gap:10px; margin-bottom:18px; }
 .checkout-section legend small { font-size:11px; }
 .checkout-field-grid { grid-template-columns:1fr; gap:16px; }
 .checkout-section :is(input[type="text"],textarea) { font-size:16px; padding:11px 12px; }
 .checkout-delivery-options { gap:9px; }
 .checkout-delivery { padding:12px 10px; font-size:12px; gap:7px; }
 .checkout-delivery strong { font-size:14px; }
 .checkout-payment { gap:9px; padding:13px 12px; }
 .checkout-payment-tag { display:none; }
 .checkout-payment p { font-size:10px; }
 .checkout-summary-details > summary { padding:16px 18px; font-size:15px; }
 .checkout-summary-details > summary small { margin-left:5px; font-size:10px; }
 .checkout-mobile-total { font-size:16px; }
 .checkout-summary-content { padding:0 18px 18px; }
 .checkout-item { gap:10px; }
 .checkout-item > strong { font-size:12px; }
 .checkout-item-copy h2 { font-size:12px; }
}
@media (max-width:359px) {
 .checkout-hero,.checkout-form-card { padding-inline:15px; }
 .checkout-progress { gap:5px; font-size:9px; }
 .checkout-progress > a,.checkout-progress > span { gap:4px; }
 .checkout-delivery-options { grid-template-columns:1fr; }
 .checkout-delivery { grid-template-columns:18px 1fr auto; align-items:center; }
 .checkout-delivery strong { grid-column:3; }
 .checkout-summary-details > summary { padding-inline:14px; gap:8px; }
 .checkout-summary-details > summary small { display:none; }
}
