/* ====================================================================
   STAGR storefront: pages the design has no module for (checkout, order
   confirmation, tracking, about, contact, policies, 404) and the review
   block, built only from the design's primitives (stagr.css).
   ==================================================================== */

/* ---------- generic page sections ---------- */
.st-page { padding: clamp(48px, 7vw, 96px) 0; }
.st-page + .st-page { padding-top: 0; }
.chero + .st-page { padding-top: clamp(40px, 6vw, 72px); }
.st-page.on-ink + .st-page { padding-top: clamp(48px, 7vw, 96px); }
.st-narrow { max-width: 820px; }
.st-cols { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .st-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.st-chapters { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 640px) { .st-chapters { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .st-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-chapter .media { border-radius: 14px; }
.st-n { font-family: var(--font-display); font-style: normal; font-weight: 300; color: var(--accent-deep); margin-right: .35em; }
.st-ghost { font-family: var(--font-display); font-weight: 300; font-size: clamp(6rem, 24vw, 16rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(239,237,230,.25); position: static; transform: none; margin-bottom: -.2em; }
body[data-page="checkout"] .nav, body[data-page="confirm"] .nav, body[data-page="track"] .nav, body[data-page="contact"] .nav, body[data-page="policy"] .nav, body[data-page="error"] .nav { color: var(--ink); }
.prose-sec { padding: clamp(40px, 6vw, 72px) 0 0; }
.prose { max-width: 72ch; color: var(--fg); }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 { font-family: var(--font-display); font-weight: 300; line-height: 1.12; letter-spacing: -.01em; margin: 1.4em 0 .5em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); } .prose h3, .prose h5 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); } .prose h4 { font-size: 1.15rem; }
.prose p, .prose li { line-height: 1.65; color: var(--fg); } .prose p + p { margin-top: 1em; }
.prose ul, .prose ol { margin: .8em 0 .8em 1.2em; list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-underline-offset: .22em; color: var(--accent-deep); }
.prose strong, .prose b { font-weight: 600; }
.acc-body.prose { max-width: none; }
.acc-body.prose h1, .acc-body.prose h2 { font-size: 1.2rem; margin: .9em 0 .4em; }
.acc-body.prose p + p { margin-top: .8em; }

/* ---------- forms ---------- */
.st-form { margin-top: 24px; }
.st-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .st-grid { grid-template-columns: 1fr 1fr; } .st-field--wide { grid-column: 1 / -1; } }
.st-field { display: grid; gap: 6px; }
.st-field label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
.st-field label span { text-transform: none; letter-spacing: 0; color: var(--fg-2); font-weight: 400; }
.st-field input, .st-field select, .st-field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--fg); font: inherit; font-size: .9375rem; transition: border-color .25s ease, box-shadow .25s ease; }
.st-field textarea { min-height: 110px; resize: vertical; }
.st-field input:focus, .st-field select:focus, .st-field textarea:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px rgba(139,74,31,.14); }
.st-field input[readonly] { color: var(--fg-2); }
.st-field .st-error { font-size: .75rem; color: var(--error); letter-spacing: 0; text-transform: none; }
.st-field input.st-error, .st-field select.st-error { border-color: var(--error); }
.st-foot { display: grid; gap: 12px; margin-top: 18px; }
.st-foot .btn { justify-self: start; }
.st-foot p { font-size: .8125rem; color: var(--fg-2); }
.form-alert { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: rgba(47,107,58,.1); color: var(--success); font-size: .9375rem; line-height: 1.5; }
.form-alert--err { background: rgba(163,45,45,.1); color: var(--error); }
.form-alert .link { color: inherit; }
.bk-form--done { align-content: start; }
.bk-form-foot .btn + .btn { margin-top: 0; }

/* ---------- checkout ---------- */
.co { padding: clamp(24px, 4vw, 48px) 0 clamp(48px, 7vw, 96px); }
.co .pd-crumbs { margin-bottom: 14px; }
.co-steps { display: flex; gap: 22px; margin-bottom: clamp(20px, 3vw, 32px); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.co-step { display: flex; align-items: center; gap: 10px; }
.co-step span { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: .75rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.co-step.is-on { color: var(--fg); } .co-step.is-on span { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.co-step.is-done span { background: var(--success); color: #fff; border-color: var(--success); }
.co-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .co-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: start; } }
.co-main [data-step-panel][hidden] { display: none; }
.co-note { margin-top: 18px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); display: grid; gap: 12px; }
.co-note-pick { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.co-note-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-note-box { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease; }
.co-note-box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--bone); border-bottom: 2px solid var(--bone); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.co-note-pick input:checked + .co-note-box { background: var(--ink); border-color: var(--ink); } .co-note-pick input:checked + .co-note-box::after { opacity: 1; }
.co-note-pick input:focus-visible + .co-note-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.co-note-text { display: grid; gap: 2px; font-size: .9375rem; } .co-note-text b { font-weight: 600; } .co-note-text b em { font-style: normal; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-left: 8px; } .co-note-text > span { color: var(--fg-2); font-size: .875rem; }
.co-note textarea { width: 100%; min-height: 90px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #FBFAF7; color: var(--ink); font: inherit; font-size: .9375rem; resize: vertical; }
.co-note-count { font-size: .75rem; color: var(--fg-2); }
.co-note.is-off textarea, .co-note.is-off .co-note-count { display: none; }
.co-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.co-review dd { text-align: left; max-width: 60%; }
.co-perks { margin-top: 28px; }
.co-summary { background: var(--surface); border-radius: 18px; padding: clamp(20px, 3vw, 32px); position: sticky; top: calc(var(--nav-h) + 20px); }
.co-lines { display: grid; gap: 14px; margin-top: 16px; }
.co-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.co-thumb { width: 64px; height: 64px; border-radius: 10px; background: #F3F1EC; display: grid; place-items: center; overflow: hidden; }
.co-thumb img { width: 86%; height: 86%; object-fit: contain; }
.co-line-name { font-size: .9375rem; font-weight: 600; line-height: 1.3; } .co-line-name a:hover { color: var(--accent-deep); }
.co-line-meta { font-size: .8125rem; color: var(--fg-2); margin-top: 2px; } .co-line-meta s { margin-left: .4em; }
.co-line-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-totals { margin-top: 18px; }
.co-totals .co-grand dd b { font-size: 1.25rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.st-lines { margin-top: 28px; }
.st-note { margin-top: 24px; padding: 18px; border-radius: 14px; background: var(--surface); }
.st-note p + p { margin-top: 8px; }
.st-result { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }

/* ---------- tracking steps ---------- */
.track-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; counter-reset: s; }
.track-steps li { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.track-steps li span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); display: grid; place-items: center; font-size: .8125rem; letter-spacing: 0; z-index: 1; }
.track-steps li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 17px; height: 1px; background: var(--line-strong); }
.track-steps li:first-child::before { display: none; }
.track-steps li.is-on { color: var(--fg); } .track-steps li.is-on span { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.track-steps li.is-done span { background: var(--success); color: #fff; border-color: var(--success); } .track-steps li.is-done::before, .track-steps li.is-on::before { background: var(--success); }
@media (max-width: 480px) { .track-steps li { font-size: .625rem; } }

/* ---------- product reviews ---------- */
.pd-reviews { padding: clamp(48px, 7vw, 96px) 0 0; }
.pd-card--reviews { background: #F4F2EE; }
.pd-rating { display: flex; align-items: center; gap: 10px; font-size: .875rem; margin-top: -4px; }
.pd-rating .stars, .pd-review-head .stars { color: var(--accent-deep); letter-spacing: .05em; }
.pd-rating a { text-decoration: underline; text-underline-offset: 3px; }
.pd-review-list { display: grid; gap: 18px; margin-top: 22px; }
.pd-review { border-top: 1px solid var(--line); padding-top: 14px; }
.pd-review-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .8125rem; color: var(--fg-2); } .pd-review-head b { color: var(--fg); } .pd-review-head em { font-style: normal; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--success); }
.pd-review h3 { font-size: 1rem; font-weight: 600; margin-top: 8px; } .pd-review p { margin-top: 6px; line-height: 1.55; }
.pd-buy-now { width: 100%; }
.pd-wa .arrow { display: none; }

/* ---------- 404 ---------- */
.st-404 { min-height: 70svh; display: flex; align-items: center; }
.st-404 .st-page { width: 100%; }

/* ---------- checkout partial: crumbs + perks (copied from pages/product.css) ---------- */
.co .pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--fg-2); margin-bottom: 18px; }
.co .pd-crumbs a:hover { color: var(--accent-deep); }
.co .pd-crumbs i { font-style: normal; opacity: .5; }
.co .pd-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.co .pd-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; line-height: 1.35; }
.co .pd-perks svg { flex: none; width: 22px; height: 22px; color: var(--accent-deep); }
.co .pd-perks b { display: block; font-weight: 600; }
.co .pd-perks span { color: var(--fg-2); }

/* ---------- shop category circles ---------- */
/* "All" shows a belt behind a wallet; photo thumbnails (no cutout) fill the circle */
.sh-cat-ring.is-pair { position: relative; }
.sh-cat-ring.is-pair img { position: absolute; width: 58%; height: 58%; }
.sh-cat-ring.is-pair img.back { left: 10%; top: 12%; transform: rotate(-12deg); }
.sh-cat-ring.is-pair img:not(.back) { right: 8%; bottom: 12%; }
.sh-cat:hover .sh-cat-ring.is-pair img.back { transform: rotate(-12deg) scale(1.06); }
.sh-cat-ring.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
@media (min-width: 1024px) { .shop-top:not(.shop-top--fixed) .sh-cats { gap: clamp(18px, 2.4vw, 40px); } }

/* cards for pieces without a cutout (e.g. the keychain): the photo fills the frame */
.cc-media.is-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

/* ---- guides (/guides, /guides/{slug}) ---- */
.gd-top .pd-crumbs { margin-bottom: 18px; }
.gd-top .explore-title { max-width: 18em; }
.gd-body { padding-top: 0; }
.gd-body .prose { max-width: 42em; }
.gd-body .prose h2 { margin-top: 2em; }
.gd-body .prose ul, .gd-body .prose ol { padding-left: 1.3em; }
.gd-cta { margin-top: 48px; padding: 24px 26px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 14px; }
.gd-related { margin-top: 32px; }
.gd-related ul { list-style: none; margin: 10px 0 0; padding: 0; }
.gd-related li { padding: 10px 0; border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 34px; }
.gd-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--card, transparent); }
.gd-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.gd-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gd-card:hover .gd-card-media img { transform: scale(1.04); }
.gd-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.gd-card-title { font-size: 1.15rem; line-height: 1.3; font-weight: 600; }
.gd-card-sub { font-size: .92rem; opacity: .75; line-height: 1.5; }
/* ---- product page: the long description ---- */
.pd-copy .prose { max-width: 42em; }
.pd-copy .prose h2 { font-size: 1.25rem; margin-top: 1.6em; }
.pd-guides { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; }
/* ---- collection pages: the keyword copy under the grid ---- */
.col-copy .prose { max-width: 46em; }
.col-copy .gd-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
/* ---- catalogue card rating ---- */
.cc-rating { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin: -4px 0 6px; }
.cc-rating .stars { letter-spacing: .05em; color: #B8873F; }