.button { display:inline-flex; min-height:3.1rem; align-items:center; justify-content:center; gap:.8rem; padding:.8rem 1.35rem; border:1px solid transparent; border-radius:var(--radius-sm); font-size:.78rem; font-weight:600; line-height:1.3; text-align:center; transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast); }
.button-dark { background:var(--dark); color:var(--paper); }
.button-dark:hover { background:#46443d; }
.button-outline { border-color:#8d887e; background:transparent; color:var(--ink); }
.button-outline:hover { background:var(--soft); }
.button-wide { width:100%; }
.button[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.text-link { display:inline-flex; align-items:center; gap:.45rem; border:0; background:none; color:var(--ink); font-size:.75rem; text-decoration:underline; text-underline-offset:4px; }
.text-link:hover { color:var(--accent); }
.text-link-button { padding:.4rem 0; border:0; background:none; color:var(--ink); font-size:.8rem; text-decoration:underline; text-underline-offset:4px; }
.sample-note { display:flex; align-items:flex-start; gap:.5rem; margin:1rem 0; padding:.65rem .85rem; border-left:2px solid var(--accent); background:rgba(238,232,222,.62); color:#63594d; font-size:.72rem; }
.notice { padding:1rem 1.15rem; border-left:2px solid var(--accent); background:var(--soft); color:var(--ink); font-size:.82rem; }
.notice-neutral { margin:1.5rem 0; }
.notice-feedback { margin:1rem 0 1.35rem; }
.notice-feedback-success { border-left-color:var(--green); background:#edf4ed; }
.notice-feedback-error { border-left-color:var(--danger); background:#fbefed; color:#642c25; }
.notice-feedback-info { border-left-color:var(--accent); }
.form-field { min-width:0; margin:1.15rem 0; }
.form-field > label,.form-field legend { display:block; margin:0 0 .45rem; color:var(--ink); font-size:.77rem; font-weight:600; }
.field-label { margin:0 0 .45rem; color:var(--ink); font-size:.77rem; font-weight:600; }
.required-mark { color:#9a5b4e; }
.optional-mark { margin-left:.35rem; color:var(--muted); font-size:.7rem; font-weight:400; }
.form-field input:not([type=radio]):not([type=checkbox]):not([type=file]),.form-field select,.form-field textarea,.phone-input input { width:100%; min-height:var(--control-height); padding:.75rem .85rem; border:1px solid #d9d3c9; border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); }
.form-field textarea { min-height:7rem; resize:vertical; }
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible { outline:none; box-shadow:var(--focus); border-color:var(--accent); }
.field-help { display:block; margin-top:.4rem; color:var(--muted); font-size:.71rem; line-height:1.5; }
.field-error { display:block; margin-top:.35rem; color:var(--danger); font-size:.75rem; }
.choice-set { display:grid; gap:.55rem; padding:0; border:0; }
.choice-option { display:flex !important; min-height:2.8rem; align-items:center; gap:.7rem; margin:0 !important; padding:.6rem .75rem; border:1px solid var(--line); background:var(--paper); font-size:.78rem !important; font-weight:400 !important; cursor:pointer; }
.choice-option:has(input:checked) { border-color:var(--accent); background:#f5f0e9; }
.choice-option input { width:1rem; height:1rem; accent-color:var(--dark); }
.phone-input { display:flex; }
.phone-input > span { display:grid; min-width:4rem; place-items:center; border:1px solid #d9d3c9; border-right:0; background:var(--soft); font-size:.8rem; }
.phone-input input { flex:1; min-width:0; }
.upload-control { display:flex !important; min-height:3.2rem; align-items:center; gap:.7rem; margin:0 !important; padding:.7rem .85rem; border:1px dashed #b8afa2; background:var(--paper); color:var(--ink); font-size:.78rem !important; cursor:pointer; }
.upload-control:hover { border-color:var(--accent); background:#faf7f2; }
.upload-icon { display:grid; width:1.7rem; height:1.7rem; place-items:center; border-radius:50%; background:var(--soft); font-size:1rem; }
.file-preview { display:block; margin-top:.4rem; color:var(--muted); font-size:.72rem; }
.file-preview img { width:4rem; height:4rem; margin-top:.45rem; object-fit:cover; }
.quantity-control { display:flex; width:max-content; align-items:center; border:1px solid var(--line); }
.quantity-control button { width:2.8rem; height:2.8rem; border:0; background:var(--paper); font-size:1.2rem; }
.quantity-control input { width:3rem !important; min-height:2.8rem !important; padding:.3rem !important; border:0 !important; border-inline:1px solid var(--line) !important; border-radius:0 !important; text-align:center; }
.quantity-control input::-webkit-inner-spin-button { appearance:none; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:0 0 1rem; color:var(--muted); font-size:.7rem; }
.breadcrumbs a:hover { color:var(--ink); }
.breadcrumbs span[aria-hidden] { color:#b6afa5; }
.page-intro { max-width:55rem; padding:2.2rem 0 2rem; }
.page-intro p:last-child { max-width:40rem; margin-bottom:0; color:var(--muted); }
.page-title { margin:.2rem 0 1rem; font:400 clamp(2.6rem,6vw,5.1rem)/1.04 var(--font-serif); letter-spacing:-.04em; }
.section-title { margin:.25rem 0 0; font:400 clamp(2rem,4.2vw,3.2rem)/1.08 var(--font-serif); letter-spacing:-.035em; }
.empty-state { padding:4rem 1rem; text-align:center; }
.empty-state p { color:var(--muted); }
.empty-state .button { margin-top:.8rem; }
.serif-heading { font-family:var(--font-serif); }
.status-badge { display:inline-flex; min-height:1.7rem; align-items:center; padding:.25rem .6rem; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--paper); font-size:.68rem; }
.status-awaiting-payment,.status-in-production,.status-ready { border-color:#c9d5cb; background:#eef3ee; color:#35533d; }
.status-review,.status-payment-review,.status-changes-requested { border-color:#dfd3bc; background:#f6f0e5; color:#735c35; }
.status-declined,.status-cancelled,.status-payment-issue { border-color:#e4cbc7; background:#f7eeec; color:#81453f; }
.order-timeline { margin:0; padding:0; list-style:none; }
.timeline-step { position:relative; display:grid; grid-template-columns:1rem 1fr; gap:.8rem; min-height:4.2rem; }
.timeline-step:not(:last-child)::after { position:absolute; top:1rem; bottom:0; left:.43rem; width:1px; background:var(--line); content:""; }
.timeline-mark { z-index:1; width:.9rem; height:.9rem; margin-top:.15rem; border:1px solid #b9b2a8; border-radius:50%; background:var(--bg); }
.timeline-step.is-complete .timeline-mark { border-color:var(--green); background:var(--green); box-shadow:inset 0 0 0 3px var(--paper); }
.timeline-step h3 { margin:0 0 .15rem; font-size:.78rem; font-weight:600; }
.timeline-step p,.timeline-step time { display:block; margin:0 0 .2rem; color:var(--muted); font-size:.7rem; }
.document-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.document-action { display:inline-flex; min-height:2.7rem; align-items:center; gap:.5rem; padding:.55rem .8rem; border:1px solid var(--line); font-size:.73rem; }
.document-action:hover { background:var(--soft); }
.skeleton { display:grid; gap:.7rem; padding:1rem 0; }
.skeleton span { display:block; height:.85rem; background:linear-gradient(90deg,var(--soft),#f6f2ec,var(--soft)); background-size:200% 100%; animation:skeleton-shimmer 1.2s linear infinite; }
.skeleton span:nth-child(2) { width:72%; }.skeleton span:nth-child(3) { width:46%; }
@keyframes skeleton-shimmer { to { background-position:-200% 0; } }
.site-dialog { width:min(34rem,calc(100% - 2rem)); max-height:calc(100% - 2rem); padding:0; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.site-dialog::backdrop { background:rgba(35,33,29,.42); }
.dialog-inner { position:relative; padding:2rem; }
.dialog-inner h2 { padding-right:2rem; font:400 1.6rem var(--font-serif); }
.dialog-close { position:absolute; top:.6rem; right:.7rem; width:2.5rem; height:2.5rem; border:0; background:none; font-size:1.6rem; }
.toast { position:fixed; z-index:100; right:max(1rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); max-width:min(26rem,calc(100% - 2rem)); padding:.9rem 1.1rem; border-left:3px solid var(--accent); background:var(--dark); color:var(--paper); box-shadow:0 6px 20px rgba(41,40,35,.12); font-size:.82rem; line-height:1.5; }
.toast[data-tone="success"] { border-left-color:var(--green); }
.toast[data-tone="error"] { border-left-color:var(--danger); }
.system-error-page { min-height:100vh; background:var(--bg); color:var(--ink); }
.system-error-header { min-height:5.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
.system-error-header .wordmark { display:block; width:min(13rem,55vw); line-height:0; }
.system-error-header img { display:block; width:100%; height:auto; }
.system-error-header > span { color:var(--muted); font-size:var(--text-sm); text-align:right; }
.system-error-main { min-height:calc(100vh - 5.5rem); display:grid; place-items:center; }
.system-error-card { width:min(100%,38rem); padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--line); background:var(--paper); }
.system-error-card h1 { margin:.5rem 0 1rem; font-size:clamp(2.2rem,6vw,3.7rem); }
.system-error-card > p:not(.eyebrow) { max-width:33rem; margin:0 0 1.6rem; color:var(--muted); }
@media (max-width:600px) { .system-error-header { min-height:4.5rem; }.system-error-header > span { max-width:9rem; font-size:.75rem; }.system-error-main { min-height:calc(100vh - 4.5rem); } }
@media (prefers-reduced-motion:reduce) { .skeleton span { animation:none; } }
@media (max-width:600px) { .page-shell { padding-top:1rem; } .page-intro { padding:1.55rem 0 1.5rem; } .page-title { font-size:clamp(2.45rem,12vw,3.6rem); } }