/* Essential Peptides: cart, quantity and checkout styles (loaded after styles.css). */
.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--green); transition: background 0.2s; }
.nav-cart:hover, .nav-cart[aria-current="page"] { background: var(--green-pale); }
.nav-cart svg { width: 22px; height: 22px; }
.cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--green); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.cart-badge[hidden] { display: none; }

.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: 24px; overflow: hidden; background: #fff; height: 44px; }
.qty button { width: 40px; border: none; background: transparent; color: var(--green); font-size: 18px; cursor: pointer; font-family: inherit; }
.qty button:hover { background: var(--green-pale); }
.qty input { width: 48px; border: none; text-align: center; font: inherit; font-size: 15px; color: var(--text); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 2px solid var(--green); outline-offset: -2px; }

.buy-box { display: grid; gap: 12px; margin-bottom: 8px; }
.buy-row { display: flex; gap: 12px; align-items: center; }
.buy-row label { font-size: 14px; font-weight: 500; }
.buy-box .btn-buy, .cart-summary .btn-buy { width: 100%; border: none; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; }
.btn-buy:disabled, .btn-add:disabled { opacity: 0.6; cursor: default; transform: none; }
button.btn-add { border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; }
.cart-status { font-size: 14px; line-height: 1.6; padding: 10px 14px; border-radius: var(--radius-sm); }
.cart-status.ok { background: var(--green-pale); border: 1px solid var(--border); color: var(--green); }
.cart-status.ok a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cart-status.err, .checkout-status, .cart-error { background: #fdf1f0; border: 1px solid #f0c9c5; color: #7a1c16; }
.cart-status[hidden], .checkout-status[hidden], .cart-error[hidden], [data-cart-empty][hidden], [data-cart-summary][hidden], [data-order-ref][hidden] { display: none !important; }

.cart-page { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; padding: 48px var(--pad-x) 72px; }
.cart-page.is-busy .cart-lines { opacity: 0.6; pointer-events: none; }
.cart-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto 96px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }
.cart-line-img { width: 64px; height: 88px; background: var(--green-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cart-line-img img { height: 80px; width: auto; }
.cart-line-name { font-weight: 500; font-size: 16px; }
.cart-line-unit { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cart-remove { background: none; border: none; padding: 0; margin-top: 6px; font: inherit; font-size: 13px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-line-total { text-align: right; font-weight: 500; }
.cart-empty { padding: 28px 0; }
.cart-empty p { margin-bottom: 16px; color: var(--muted); }
.cart-summary { background: var(--green-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; }
.cart-summary h2 { font-size: 22px; }
.cart-summary dl { display: grid; gap: 8px; margin: 0; }
.cart-summary dl div { display: flex; justify-content: space-between; font-size: 15px; }
.cart-summary dl .cart-total { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; font-size: 17px; }
.cart-summary dd { margin: 0; }
.cart-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.confirm-box { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-light); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--text); cursor: pointer; }
.confirm-box input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }
.confirm-box input[aria-invalid="true"] { outline: 2px solid #b3261e; outline-offset: 2px; }
.checkout-status, .cart-error { font-size: 14px; padding: 10px 14px; border-radius: var(--radius-sm); line-height: 1.6; }
.thanks-page { max-width: 720px; padding: 64px var(--pad-x) 80px; }
.thanks-page h1 { margin-bottom: 12px; }
.thanks-page p { margin-bottom: 14px; line-height: 1.7; }
@media (max-width: 900px) {
  .cart-page { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .cart-line { grid-template-columns: 56px 1fr auto; }
  .cart-line-total { grid-column: 2 / -1; text-align: left; }
}

/* ── Place-order flow (Oct 2026): cart.html, checkout.html, order-confirmation.html ── */
.card-ctas button.btn-add { padding: 8px 18px; }
.product-card .cart-status { margin-top: 10px; font-size: 13px; padding: 8px 12px; }
.buy-box { margin: 24px 0 4px; }
.buy-box .stock-note { font-size: 13px; color: var(--muted); margin: 0; }
.buy-alt { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.buy-alt a { color: var(--green); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cart-line-name a { color: inherit; }
.cart-summary .btn-buy, .checkout-summary .btn-buy { display: block; text-align: center; }
.cart-free-hint { font-size: 13px; color: var(--green); margin: 0; }
.cart-free-hint[hidden] { display: none; }
.compliance-note { font-size: 13px; line-height: 1.6; color: #6b5a1e; background: var(--gold-light); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
.checkout-page { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; padding: 48px var(--pad-x) 72px; }
.checkout-page .contact-card h2 { font-size: 22px; margin: 8px 0 0; }
.checkout-page fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; }
.checkout-page legend { font-family: 'DM Serif Display', serif; font-size: 22px; margin-bottom: 14px; padding: 0; }
.field-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.checkout-page .confirm-box { margin: 0; }
.checkout-page .confirm-box a { color: var(--green); font-weight: 500; text-decoration: underline; }
.checks { display: grid; gap: 10px; }
.checks .field-error { margin: -4px 0 0 4px !important; }
.checkout-summary { background: var(--green-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; position: sticky; top: 96px; }
.checkout-summary h2 { font-size: 22px; }
.summary-items, .conf-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.summary-items li, .conf-items li { display: flex; justify-content: space-between; gap: 12px; }
.summary-items small { color: var(--muted); }
.checkout-summary dl { display: grid; gap: 8px; margin: 0; border-top: 1px solid var(--border); padding-top: 10px; }
.checkout-summary dl div { display: flex; justify-content: space-between; font-size: 15px; }
.checkout-summary dl .cart-total { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; font-size: 17px; }
.checkout-summary dd { margin: 0; }
.pay-note { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; line-height: 1.6; }
.confirm-page { max-width: 760px; padding: 56px var(--pad-x) 80px; }
.confirm-page h1 { margin-bottom: 12px; }
.confirm-page > p, .confirm-page [data-order] > p { margin-bottom: 14px; line-height: 1.7; }
.order-ref { font-size: 15px; }
.order-ref strong { font-size: 20px; letter-spacing: 0.5px; color: var(--green); }
.bank-box { background: var(--green-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 24px 0; }
.bank-box h2 { font-size: 22px; margin-bottom: 12px; }
.bank-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0 0 12px; font-size: 16px; }
.bank-box dt { color: var(--muted); }
.bank-box dd { margin: 0; font-weight: 600; }
.bank-box p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
.conf-items { margin: 10px 0 24px; border-top: 1px solid var(--border); padding-top: 10px; }
[data-order][hidden], [data-no-order][hidden] { display: none !important; }
@media (max-width: 900px) {
  .cart-page, .checkout-page { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
  .checkout-summary { position: static; order: -1; }
  .cart-line { grid-template-columns: 48px 1fr; }
  .cart-line .qty, .cart-line-total { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field:first-child { grid-column: 1 / -1; } }

/* ── Customer accounts (login.html, account.html) ── */
.nav-account { font-size: 14px; font-weight: 500; color: var(--green); padding: 6px 10px; border-radius: 20px; white-space: nowrap; }
.nav-account:hover, .nav-account[aria-current="page"] { background: var(--green-pale); }
.nav-account[hidden] { display: none; }
.mobile-menu .mm-account[hidden] { display: none; }
.auth-page { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px var(--pad-x) 72px; align-items: start; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.auth-tabs button { flex: 1; border: 1px solid var(--border); background: #fff; border-radius: 22px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--green); cursor: pointer; }
.auth-tabs button.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.auth-page [data-pane][hidden] { display: none; }
.auth-page .form-status.is-ok { color: var(--green); background: var(--green-pale); border-color: var(--border); }
.auth-info h1 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 44px; margin-bottom: 14px; }
.auth-info p, .auth-info li { font-size: 16px; color: var(--muted); line-height: 1.7; }
.auth-info ul { margin: 12px 0 20px 18px; }
.field-hint { font-size: 13px; color: var(--muted); margin: 0; }
.account-page { padding: 48px var(--pad-x) 72px; display: grid; grid-template-columns: 1fr 2.2fr; gap: 40px; align-items: start; }
.account-side { background: var(--green-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; }
.account-side h2 { font-size: 20px; }
.account-side p { font-size: 14px; color: var(--muted); margin: 0; word-break: break-word; }
.account-side button { margin-top: 8px; }
.orders-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.order-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; background: #fff; }
.order-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.order-head h3 { font-size: 18px; letter-spacing: .3px; color: var(--green); margin: 0; }
.order-date { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
.order-status { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 5px 10px; border-radius: 14px; white-space: nowrap; }
.st-await { background: var(--gold-light); color: #6b5a1e; border: 1px solid var(--gold-border); }
.st-paid { background: #e6f0fb; color: #1d4f86; border: 1px solid #bcd3ee; }
.st-dispatched { background: var(--green-pale); color: var(--green); border: 1px solid var(--border); }
.st-done { background: var(--green); color: #fff; }
.st-cancel { background: #f3f3f3; color: #666; border: 1px solid #ddd; }
.order-items { font: inherit; font-size: 14px; white-space: pre-line; margin: 0 0 8px; color: var(--text); }
.order-total { font-size: 15px; margin: 0; }
.order-total span { color: var(--muted); font-size: 13px; }
.order-track, .order-note, .order-pay { font-size: 14px; margin: 8px 0 0; line-height: 1.6; }
.order-track a { color: var(--green); font-weight: 500; text-decoration: underline; }
.order-pay { background: var(--gold-light); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 8px 12px; }
.orders-msg[hidden], [data-orders-loading][hidden], .member-note[hidden], [data-conf-member][hidden], [data-conf-guest][hidden] { display: none; }
.member-note { font-size: 14px; background: var(--green-pale); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0; }
.member-note a, .conf-account a { color: var(--green); font-weight: 500; text-decoration: underline; }
@media (max-width: 900px) { .auth-page, .account-page { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; } .nav-account { display: none; } }
.captcha-slot[hidden] { display: none; } .captcha-slot { display: grid; gap: 8px; }