/* ============ Shop, cart and pre-order pages ============ */
.sp-page{
  --sp-bone:var(--bone,#f3ead9);
  --sp-dim:var(--bone-dim,#b8ab9a);
  --sp-ember:#e0742a;
  --sp-line:rgba(243,234,217,.13);
  --sp-card:rgba(255,255,255,.045);
  padding:3.5rem 0 6rem;
  color:var(--sp-bone);
}
.sp-page h1,.sp-page h2,.sp-page h3{color:var(--sp-bone);margin:0}
.sp-page a{color:inherit}
.sp-narrow{max-width:960px}

/* ---- Shop hero ---- */
.sp-hero{text-align:center;margin-bottom:3rem}
.sp-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .95rem;border:1px solid var(--sp-line);border-radius:999px;background:var(--sp-card);font-size:.9rem;color:var(--sp-dim)}
.sp-pill i{width:8px;height:8px;border-radius:50%;background:var(--sp-ember);box-shadow:0 0 0 4px rgba(224,116,42,.22)}
.sp-hero h1{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;margin:1.1rem 0 .9rem}
.sp-hero p{max-width:54ch;margin:0 auto;color:var(--sp-dim);font-size:1.08rem;line-height:1.6}
.sp-steps{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.8rem 0 0;padding:0;color:var(--sp-dim);font-size:.95rem}
.sp-steps li{display:flex;align-items:center;gap:.55rem}
.sp-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--sp-line);font-size:.8rem;color:var(--sp-bone)}

/* ---- Product cards ---- */
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem}
.sp-card{--accent:var(--sp-ember);display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sp-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.sp-card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 65%),#120d0a}
.sp-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.sp-card:hover .sp-card-media img{transform:scale(1.05)}
.sp-badge{position:absolute;top:.9rem;left:.9rem;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem;border-radius:999px;background:rgba(10,7,5,.72);backdrop-filter:blur(6px);font-size:.8rem;color:var(--sp-bone)}
.sp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sp-card-body{display:flex;flex-direction:column;gap:.7rem;padding:1.4rem;flex:1}
.sp-heat{display:flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--sp-dim)}
.sp-heat span{margin-left:.45rem}
.sp-dot{width:9px;height:9px;border-radius:50%;background:rgba(243,234,217,.18)}
.sp-dot.on{background:var(--accent)}
.sp-card h2{font-family:"Fraunces",Georgia,serif;font-size:1.55rem;font-weight:700}
.sp-card p{margin:0;color:var(--sp-dim);line-height:1.55;flex:1}
.sp-card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem;padding-top:1.1rem;border-top:1px solid var(--sp-line)}
.sp-price{font-family:"Fraunces",Georgia,serif;font-size:1.7rem;font-weight:700}
.sp-card .btn.is-added{background:#2f7d4f;border-color:#2f7d4f}

/* ---- Cart bar at the end of the products ---- */
.sp-cartbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding:1.1rem 1.4rem;border:1px solid rgba(224,116,42,.55);border-radius:14px;background:rgba(224,116,42,.08)}
.sp-cartbar-text{color:var(--sp-dim)}
.sp-cartbar-text strong{color:var(--sp-bone)}
.sp-cartbar .btn.is-off{opacity:.45;pointer-events:none}

/* ---- Toast ---- */
.sp-toast{position:fixed;left:50%;bottom:2rem;z-index:1000;transform:translate(-50%,20px);display:flex;align-items:center;gap:.8rem;max-width:calc(100% - 2rem);padding:.85rem 1.2rem;border-radius:12px;background:#1f3d2b;border:1px solid #2f7d4f;color:#e8fff0;box-shadow:0 14px 40px -10px rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.sp-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sp-toast .sp-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2f7d4f;font-size:.85rem}
.sp-toast a{margin-left:.4rem;font-weight:700;text-decoration:underline}

/* ---- Cart / checkout pages ---- */
.sp-title{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(2rem,5vw,3rem);margin-bottom:1.2rem !important}
.sp-progress{list-style:none;display:flex;gap:.6rem 1.4rem;margin:0 0 2rem;padding:0;color:var(--sp-dim);font-size:.95rem}
.sp-progress li{display:flex;align-items:center;gap:.55rem}
.sp-progress b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--sp-line);font-size:.8rem}
.sp-progress li.on{color:var(--sp-bone)}
.sp-progress li.on b{background:var(--sp-ember);border-color:var(--sp-ember);color:#fff}

.sp-row{display:grid;grid-template-columns:76px 1fr auto auto auto;gap:1rem 1.25rem;align-items:center;padding:1rem;margin-bottom:.9rem;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-card)}
.sp-thumb{width:76px;height:76px;border-radius:10px;object-fit:cover;background:#120d0a}
.sp-name{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;font-weight:700}
.sp-name small{display:block;margin-top:.2rem;font-family:"Public Sans",sans-serif;font-weight:400;font-size:.9rem;color:var(--sp-dim)}
.sp-qty{display:inline-flex;align-items:center;gap:.7rem;padding:.25rem;border:1px solid var(--sp-line);border-radius:999px}
.sp-qty button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--sp-bone);font-size:1.1rem;cursor:pointer}
.sp-qty button:hover{background:var(--sp-ember)}
.sp-qty span{min-width:1.4ch;text-align:center;font-weight:600}
.sp-line{font-weight:700;min-width:5.5ch;text-align:right}
.sp-remove{background:none;border:0;color:var(--sp-dim);text-decoration:underline;cursor:pointer;font:inherit;font-size:.9rem}
.sp-remove:hover{color:#ff8a5c}

.sp-summary{margin-top:1.6rem;padding:1.4rem;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-card)}
.sp-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.15rem}
.sp-total strong{font-family:"Fraunces",Georgia,serif;font-size:2rem}
.sp-note{margin:.7rem 0 0;color:var(--sp-dim);font-size:.95rem;line-height:1.5}
.sp-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.sp-ghost{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.4rem;border:1px solid var(--sp-line);border-radius:3px;background:transparent;color:var(--sp-bone);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.sp-ghost:hover{border-color:var(--sp-ember);background:rgba(224,116,42,.1)}

.sp-empty{text-align:center;padding:3rem 1rem;border:1px dashed var(--sp-line);border-radius:14px;color:var(--sp-dim)}
.sp-empty h2{font-family:"Fraunces",Georgia,serif;margin-bottom:.6rem !important}
.sp-empty .btn{margin-top:1.2rem}

.sp-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:start}
.sp-aside{position:sticky;top:1.5rem;padding:1.4rem;border:1px solid var(--sp-line);border-radius:12px;background:var(--sp-card)}
.sp-aside h3{font-family:"Fraunces",Georgia,serif;font-size:1.25rem;margin-bottom:1rem !important}
.sp-aside ul{list-style:none;margin:0 0 1rem;padding:0}
.sp-aside li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--sp-line);color:var(--sp-dim)}
.sp-aside li span:first-child{color:var(--sp-bone)}
.sp-form-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.sp-error{margin:1rem 0 0;padding:.8rem 1rem;border:1px solid #a33;border-radius:8px;background:rgba(170,40,40,.15);color:#ffb4a8}
.hp{position:absolute;left:-9999px}

/* ---- Success popup ---- */
.sp-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:1.25rem;background:rgba(10,7,5,.82);backdrop-filter:blur(6px)}
.sp-modal[hidden]{display:none}
.sp-modal-card{width:100%;max-width:460px;padding:2.2rem 1.8rem;text-align:center;border:1px solid var(--sp-line);border-radius:18px;background:#1c1511;box-shadow:0 30px 80px -20px #000}
.sp-modal-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 1.2rem;border-radius:50%;background:#2f7d4f;font-size:2rem;color:#fff;animation:sp-pop .5s cubic-bezier(.2,1.4,.4,1)}
.sp-modal-card h2{font-family:"Fraunces",Georgia,serif;font-size:1.7rem;margin-bottom:.8rem !important}
.sp-modal-card p{margin:0 0 .8rem;color:var(--sp-dim);line-height:1.6}
.sp-modal-card .sp-count{font-size:.9rem}
@keyframes sp-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- Responsive ---- */
@media (max-width:760px){
  .sp-row{grid-template-columns:64px 1fr auto;grid-template-areas:"img name remove" "img qty line"}
  .sp-row .sp-thumb{grid-area:img;width:64px;height:64px}
  .sp-row .sp-name{grid-area:name}
  .sp-row .sp-qty{grid-area:qty;justify-self:start}
  .sp-row .sp-line{grid-area:line}
  .sp-row .sp-remove{grid-area:remove;justify-self:end}
  .sp-split{grid-template-columns:1fr}
  .sp-aside{position:static;order:-1}
  .sp-toast{bottom:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .sp-card,.sp-card-media img,.sp-toast{transition:none}
  .sp-modal-icon{animation:none}
}
.sp-page button:focus-visible,.sp-page a:focus-visible{outline:2px solid var(--sp-ember);outline-offset:2px}

/* ---- Confirm popup + country dropdown ---- */
.sp-modal-icon.sp-warn{background:#b5532a}
.sp-modal-actions{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.sp-danger{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.4rem;border:0;border-radius:3px;background:#c0392b;color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:filter .2s}
.sp-danger:hover{filter:brightness(1.12)}
.form-card select{width:100%;padding:.95rem 2.6rem .95rem 1rem;border:1px solid rgba(243,234,217,.2);border-radius:4px;background-color:#1a1410;color:var(--sp-bone,#f3ead9);font:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23e0742a' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.form-card select:focus{outline:none;border-color:#e0742a;box-shadow:0 0 0 3px rgba(224,116,42,.25)}
.form-card select:invalid{color:#8f8576}
.form-card select option{background:#1a1410;color:#f3ead9}