/* ========================================= */
/* CHECKOUT PAGE */
/* ========================================= */

/* --- Header --- */
.checkout-header .checkout-topbar{display:flex;align-items:center;justify-content:space-between;height:5rem;border-bottom:1px solid var(--line)}
.checkout-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:500;color:var(--muted);transition:color .2s var(--ease)}
.checkout-back:hover{color:var(--ink)}
.checkout-secure{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase}
.checkout-secure svg{width:.85rem;height:.85rem}

/* --- Layout --- */
.checkout{padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(4rem,8vw,7rem)}
.checkout__head{max-width:40rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.checkout__head .kicker{color:var(--gold);margin-bottom:1rem}
.checkout__head h1{font-size:clamp(2.6rem,6vw,4rem);line-height:.95;letter-spacing:-.04em}
.checkout__head p{max-width:32rem;margin-top:1.1rem;color:var(--muted);font-size:.92rem}
.checkout__grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* --- Form --- */
.checkout-form{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem)}
.form-block{display:flex;flex-direction:column}
.form-block__title{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem;color:var(--ink);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.form-block__title b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border:1px solid var(--forest);border-radius:50%;font-size:.62rem;font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1 / -1}
.field label{font-size:.72rem;font-weight:500;color:var(--ink)}
.field label span{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;padding:.9rem 1rem;border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:.92rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{resize:vertical;min-height:5.5rem}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666b63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.field input::placeholder,.field textarea::placeholder{color:#a7a99f}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(11,46,29,.08)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#b4452f;box-shadow:0 0 0 3px rgba(180,69,47,.08)}
.field__error{display:none;color:#b4452f;font-size:.68rem}
.field.is-invalid .field__error{display:block}

/* --- Payment options --- */
.pay-list{display:flex;flex-direction:column;gap:.8rem}
.pay-option{position:relative;display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;border:1px solid var(--line);background:var(--white);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.pay-option:hover{border-color:var(--muted)}
.pay-option input{position:absolute;opacity:0;pointer-events:none}
.pay-option__dot{flex:none;width:1.15rem;height:1.15rem;margin-top:.1rem;border:1px solid var(--muted);border-radius:50%;transition:border-color .2s var(--ease)}
.pay-option__dot::after{content:"";display:block;width:.55rem;height:.55rem;margin:.24rem;border-radius:50%;background:var(--forest);transform:scale(0);transition:transform .2s var(--ease)}
.pay-option__text strong{display:block;font-size:.85rem;font-weight:600}
.pay-option__text small{display:block;margin-top:.2rem;color:var(--muted);font-size:.74rem}
.pay-option:has(input:checked){border-color:var(--forest);background:var(--ivory)}
.pay-option:has(input:checked) .pay-option__dot{border-color:var(--forest)}
.pay-option:has(input:checked) .pay-option__dot::after{transform:scale(1)}
.pay-option:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}

/* --- Order summary --- */
.summary{position:sticky;top:6.5rem;padding:1.6rem;background:var(--ivory);border:1px solid var(--line)}
.summary__title{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.2rem;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.summary__item{display:flex;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.summary__thumb{flex:none;width:4.5rem;height:4.5rem;overflow:hidden;background:#e9e2d3}
.summary__thumb img{width:100%;height:100%;object-fit:cover}
.summary__info{flex:1;display:flex;flex-direction:column}
.summary__info h3{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.summary__info small{margin-top:.2rem;color:var(--muted);font-family:var(--mono);font-size:.58rem;text-transform:uppercase}
.summary__price{margin-top:auto;font-weight:600;letter-spacing:-.02em}
.summary__price del{margin-left:.5rem;color:var(--muted);font-weight:400;font-size:.8rem}

/* Quantity stepper */
.qty{display:inline-flex;align-items:center;margin-top:.7rem;border:1px solid var(--line);width:max-content}
.qty button{display:grid;place-items:center;width:2rem;height:2rem;color:var(--ink);font-size:1rem;line-height:1;transition:background .2s var(--ease)}
.qty button:hover{background:rgba(11,46,29,.06)}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty input{width:2.4rem;height:2rem;border:0;border-inline:1px solid var(--line);text-align:center;font-family:var(--mono);font-size:.8rem;background:transparent;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.summary__remove{margin-top:.4rem;width:max-content;color:var(--muted);font-size:.64rem;text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease)}
.summary__remove:hover{color:#b4452f}
.summary__empty{padding:1.4rem 0;color:var(--muted);font-size:.85rem}
.summary__rows{padding:1.3rem 0;border-bottom:1px solid var(--line)}
.summary__row{display:flex;justify-content:space-between;margin-top:.7rem;font-size:.82rem;color:var(--muted)}
.summary__row:first-child{margin-top:0}
.summary__row b{color:var(--ink);font-weight:500}
.summary__row .free{color:var(--success);font-weight:500}
.summary__total{display:flex;align-items:baseline;justify-content:space-between;padding-top:1.3rem}
.summary__total span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.summary__total strong{font-size:1.7rem;font-weight:500;letter-spacing:-.04em}
.summary .button{margin-top:1.5rem}
.summary__perks{display:grid;gap:.7rem;margin-top:1.4rem}
.summary__perks li{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.74rem}
.summary__perks svg{flex:none;width:1rem;height:1rem;color:var(--success)}

/* --- Success state --- */
.checkout-success{display:none;max-width:42rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem);background:var(--ivory);border:1px solid var(--line);text-align:center}
.checkout-success.is-active{display:block}
.checkout-success__mark{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin:0 auto 1.6rem;border-radius:50%;background:var(--forest);color:var(--white)}
.checkout-success__mark svg{width:1.6rem;height:1.6rem}
.checkout-success h2{font-size:clamp(2.2rem,5vw,3.2rem)}
.checkout-success p{max-width:30rem;margin:1rem auto 0;color:var(--muted);font-size:.92rem}
.checkout-success__order{display:inline-flex;gap:.5rem;margin-top:1.5rem;padding:.7rem 1.1rem;border:1px dashed var(--muted);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.checkout-success__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}

@media(max-width:60rem){
  .checkout__grid{grid-template-columns:1fr}
  .summary{position:static;order:-1}
  .checkout-secure span{display:none}
}
@media(max-width:36rem){
  .form-grid{grid-template-columns:1fr}
}
/* END CHECKOUT PAGE */