/* ================================================================
   S3XY CARDS — app-v2.css
   The look of the order page (/order/). It loads after engraving.css,
   eng-motion.css and create-page.css, which give the page its
   structure, and before chrome.css, which styles the announce bar,
   header, menu sheet and footer. Every rule here either restyles a
   class those three sheets define or styles something only this page
   has. site-v2.css is not loaded on this page: its .btn, .container,
   .section, .chip and .timeline mean something else here.
   Inside a .btn, --bg / --fg / --bd are that button's fill, text and
   edge (engraving.css), so the page itself never uses the name --bg.
   ------------------------------------------------------------
   ORDER
   1.  Tokens
   2.  Base
   3.  Buttons
   4.  Forms and notices
   5.  Hero, order number, status pill
   6.  Page layout and panels
   7.  Next step
   8.  Your card: 3D carousel and its actions
   9.  Mailing instructions and the tracking form
   10. Proof
   11. Timeline
   12. Order details, engraving color, price
   13. Shipped, share, refund, lookup
   14. Dialogs
   15. Print
   16. Reduced motion
   ================================================================ */

/* ============================================================
   1. TOKENS
   The storefront's values under the names the three sheets above
   already read, so their rules repaint without being touched.
   ============================================================ */
:root{
  --black:#141416; --paper:#141416;          /* the page */
  --bg-elev:#19191C;                          /* the band under the hero */
  --surface:#1F1F23;                          /* panels */
  --gray-1:#27272C;                           /* fields and tiles inside a panel */
  --gray-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.18); --hair-2:rgba(255,255,255,.18);
  --line-control:rgba(255,255,255,.36);       /* the edge of a field or an outline button */
  --line-control-hover:rgba(255,255,255,.55);
  --ink:#F5F5F7; --ink-2:#F5F5F7; --white:#FFFFFF;
  --gray-7:#A1A1A6; --gray-3:#A1A1A6;         /* secondary text */
  --gray-5:#8E8E93;                           /* tertiary text: 4.56:1 on --gray-1, never darker */
  --silver:#D9D9DE; --silver-dim:rgba(217,217,222,.42);

  /* The accent: S3XY crimson. To go back to amber, replace these five values with the
     ones in the comment (site-v2.css, chrome.css and create-v2.css hold the same block). */
  --accent:#FF2D55; --accent-strong:#E80038; --on-accent:#FFFFFF;
  --accent-text:#FF5C7A; --accent-glow:rgba(255,45,85,.35);
  /* amber:
  --accent:#FFB547; --accent-strong:#FFB547; --on-accent:#09090B;
  --accent-text:#FFB547; --accent-glow:rgba(255,181,71,.35); */

  /* never the accent: focus, the chosen ring, and the three states */
  --focus:#F5F5F7; --ring:#F5F5F7;
  --err:#FF6B6B;  --err-soft:rgba(255,107,107,.1);  --err-line:rgba(255,107,107,.42);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.1);  --warn-line:rgba(251,191,36,.42);
  --ok:#4ADE80;   --ok-soft:rgba(74,222,128,.1);    --ok-line:rgba(74,222,128,.42);

  /* the white pill button */
  --pill:#F5F5F7; --pill-hover:#FFFFFF; --pill-press:#D9D9DE; --on-pill:#000000;

  /* one type family; --font-mono is the same face, so nothing on the page is set in monospace */
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --font-head:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
  --font-display:var(--font-head);
  --font-mono:var(--font-body);

  --r-sm:12px; --r:18px; --r-lg:28px;
  --shell:1120px; --pad:clamp(16px,4vw,32px);
  --shadow:0 10px 30px -14px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.2,.7,.2,1);
  --laser:0 0 0 4px var(--accent-glow);       /* the ring around the timeline's current dot */
  --header-h:64px;                            /* the sticky header in chrome.css; anchors stop below it */
}
@media (min-width:960px){
  :root{ --header-h:76px; }
}

/* ============================================================
   2. BASE
   ============================================================ */
html{ background:var(--paper); }
body{ background:var(--paper); font-size:1rem; line-height:1.6; color:var(--ink); }
::selection{ background:var(--silver); color:#141416; }
h1,h2,h3{ font-weight:600; letter-spacing:-.022em; line-height:1.12; }
h1{ font-size:clamp(2.4rem, 3.4vw + 1.1rem, 4rem); letter-spacing:-.03em; }
main a:not(.btn):not(.share-btn):not(.share-handle):not(.proof-pdf){ color:var(--ink); text-decoration-color:var(--line-control); text-underline-offset:3px; }
@media (hover:hover){ main a:not(.btn):not(.share-btn):not(.share-handle):not(.proof-pdf):hover{ text-decoration-color:currentColor; } }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* small labels: sentence case in the body face, never under 13px */
.kicker{
  display:block; margin:0 0 10px; font-family:var(--font-body); font-size:.8125rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gray-5);
}
.mono-label{ font-family:var(--font-body); font-size:.8125rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--gray-5); }
.mono{ font-family:var(--font-body); font-variant-numeric:tabular-nums; }
.muted{ color:var(--gray-7); }

/* panels rise into place once; no blur */
.reveal{ filter:none; transform:translateY(12px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay:0s; }
.reveal.in{ transform:none; }

/* ============================================================
   3. BUTTONS
   The white pill is the one main action; .btn-ghost is the outline
   pill. Hover only where there is a pointer.
   ============================================================ */
.btn,.btn-white{ --bg:var(--pill); --fg:var(--on-pill); --bd:var(--pill); }
.btn{
  min-height:52px; padding:0 26px; border-width:1.5px; font:500 1rem/1.2 var(--font-body); box-shadow:none;
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, color .18s, opacity .18s;
  -webkit-tap-highlight-color:transparent;
}
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-control); }
.btn-sm{ min-height:44px; padding:0 20px; font-size:.9375rem; }
.btn-lg{ min-height:56px; padding:0 32px; font-size:1.0625rem; }
.btn svg{ flex:none; }

/* the sheets above lift the button and turn it into an outline on hover: undo both */
.btn:hover{ transform:none; box-shadow:none; }
.btn:not(.btn-white):not(.btn-ghost):not(.btn-outline-white):hover,
.btn-white:hover{ --bg:var(--pill); --fg:var(--on-pill); --bd:var(--pill); }
.btn-ghost:hover{ --bg:transparent; --bd:var(--line-control); }
@media (hover:hover){
  .btn:not(.btn-white):not(.btn-ghost):not(.btn-outline-white):hover,
  .btn-white:hover{ --bg:var(--pill-hover); --bd:var(--pill-hover); }
  .btn-ghost:hover{ --bg:rgba(255,255,255,.06); --bd:var(--line-control-hover); }
}
.btn:active{ transform:scale(.965); }
.btn:not(.btn-white):not(.btn-ghost):not(.btn-outline-white):active,
.btn-white:active{ --bg:var(--pill-press); --bd:var(--pill-press); }
.btn-ghost:active{ --bg:rgba(255,255,255,.1); }
.btn:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; box-shadow:none; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; transform:none; }
/* loading: the spinner follows the label and the button takes no second click */
.btn.loading,.btn.loading:disabled{ opacity:.75; cursor:progress; pointer-events:none; transform:none; }

/* ============================================================
   4. FORMS AND NOTICES
   ============================================================ */
.field{ margin-bottom:18px; }
.field > label,.field > span:not(.err):not(.select-wrap){ display:block; margin-bottom:8px; font-size:.875rem; font-weight:600; line-height:1.5; color:var(--ink); }
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  min-height:52px; padding:13px 16px; font-size:1rem; line-height:1.5; color:var(--ink);
  background-color:var(--gray-1); border:1.5px solid var(--line-control); border-radius:var(--r-sm);
  transition:border-color .18s;
}
select{ padding-right:44px; background-image:none; }
textarea{ min-height:112px; }
::placeholder{ color:var(--gray-5); opacity:1; }
@media (hover:hover){ input:hover,select:hover,textarea:hover{ border-color:var(--line-control-hover); } }
input:focus,select:focus,textarea:focus{ border-color:var(--line-control-hover); box-shadow:none; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.select-chev{ stroke:var(--gray-7); right:16px; }

/* a field's error: an icon and a sentence under the control, never color alone */
.field.req > .err::after,.field.req > label::after{ content:none; }
.field .err{ margin:8px 0 0; font-size:.875rem; font-weight:500; line-height:1.5; color:var(--err); }
.field.has-err .err{ display:flex; align-items:flex-start; gap:6px; }
.field .err::before,.notice::before{
  content:""; flex:none; width:16px; height:16px; margin-top:2.5px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.field.has-err input,.field.has-err select,.field.has-err textarea{ border-color:var(--err); }

/* a tick row (the refund reasons): ticked is white, never the accent */
.check{ align-items:center; background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm); box-shadow:none; transition:border-color .18s, background-color .18s; }
.check.compact{ min-height:48px; padding:10px 14px; background:transparent; }
.check.compact span{ font-size:.9375rem; }
.check input,.check.compact input{ width:20px; height:20px; margin:0; accent-color:var(--ink); }
.check:hover{ border-color:var(--line-2); }
@media (hover:hover){ .check:hover{ border-color:var(--line-control); } }
.check:has(input:checked){ border-color:var(--ring); box-shadow:inset 0 0 0 1px var(--ring); background:var(--gray-1); }
.check:has(input:focus-visible){ outline:2px solid var(--focus); outline-offset:3px; }
.check input:focus-visible{ outline:none; }

/* notices: an icon in the state's color, the words in the text color */
.notice{
  display:flex; align-items:flex-start; gap:10px; margin:0 0 18px; padding:14px 16px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--gray-1);
  font-size:.9375rem; line-height:1.55; color:var(--ink);
}
.notice::before{ width:18px; height:18px; margin-top:2px; background:var(--gray-7); }
.notice p{ margin:0; }
.notice.info{ background:var(--gray-1); border-color:var(--line-2); color:var(--gray-7); }
.notice.info b{ color:var(--ink); }
.notice.ok{ background:var(--ok-soft); border-color:var(--ok-line); color:var(--ink); }
.notice.ok::before{
  background:var(--ok);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
.notice.warn{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--ink); }
.notice.warn::before{ background:var(--warn); }
.notice.err{ background:var(--err-soft); border-color:var(--err-line); color:var(--ink); }
.notice.err::before{ background:var(--err); }
#page-error{ max-width:470px; margin:0 auto 16px; }

/* ============================================================
   5. HERO, ORDER NUMBER, STATUS PILL
   ============================================================ */
.order-hero{
  padding:clamp(32px,5vw,60px) 0 clamp(26px,4vw,44px); color:var(--ink);
  background:radial-gradient(ellipse 70% 90% at 50% 0%, rgba(217,217,222,.07), transparent 70%), var(--paper);
}
.order-hero::before,.order-hero::after{ display:none; }
.order-hero .kicker{ color:var(--gray-5); }
.order-hero h1{ margin:0 0 16px; font-size:clamp(2.4rem, 3.4vw + 1.1rem, 4rem); text-wrap:balance; }
.order-hero p{ color:var(--gray-7); }
#hero-order{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:0 0 16px; }
.order-no,.status-pill{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; margin:0; padding:0 15px; border-radius:999px;
  font-family:var(--font-body); font-size:.875rem; font-weight:600; line-height:1.2; letter-spacing:0; text-transform:none;
  background:var(--surface); border:1px solid var(--line-2); -webkit-backdrop-filter:none; backdrop-filter:none;
}
.order-no{ color:var(--ink); font-variant-numeric:tabular-nums; }
.status-pill{ color:var(--gray-7); }
/* the dot says how the order stands: waiting on us, waiting on you, done, or canceled */
.status-pill::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--gray-5); }
.status-pill.hot{ background:var(--surface); border-color:var(--line-control); color:var(--ink); }
.status-pill.hot::before{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.status-pill.ok{ background:var(--surface); border-color:var(--line-2); color:var(--ink); }
.status-pill.ok::before{ background:var(--ok); }
.status-pill.off{ color:var(--gray-5); }
.status-pill.off::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--gray-5); }
.order-hero #hero-sub{ max-width:50ch; margin:0 auto; font-size:1rem; line-height:1.55; text-wrap:pretty; }
#hero-sub b{ color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.hero-thanks{ display:block; margin:0 0 4px; font-family:var(--font-head); font-size:1.1875rem; font-weight:600; letter-spacing:-.012em; color:var(--ink); }

/* ============================================================
   6. PAGE LAYOUT AND PANELS
   One column on phones and tablets. From 1024px the things to do
   and look at sit on the left, the timeline and the details on the right.
   ============================================================ */
.section.after-hero{ padding:clamp(20px,3.4vw,40px) 0 clamp(56px,8vw,96px); background:var(--bg-elev); border-top:1px solid var(--line); }
.after-hero::before{ display:none; }
.order-wrap{ max-width:720px; }
.order-cols,.order-main,.order-side{ display:grid; gap:16px; align-content:start; min-width:0; }
@media (min-width:1024px){
  .order-wrap{ max-width:1080px; }
  .order-cols{ grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:20px; align-items:start; }
  .order-main,.order-side{ gap:20px; }
}

.panel{
  margin:0; padding:clamp(20px,3vw,32px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.panel h2{ margin:0 0 12px; font-size:1.25rem; letter-spacing:-.018em; line-height:1.2; }
.panel h3{ font-size:1rem; letter-spacing:-.01em; }
.panel-h{ gap:8px 14px; margin-bottom:16px; align-items:baseline; }
.panel-h h2{ margin:0; }
.panel > p:last-child{ margin-bottom:0; }
.panel-note{ margin:0 0 16px; font-size:.9375rem; color:var(--gray-7); }
@media (max-width:640px){ .panel{ padding:20px 18px; border-radius:var(--r); } }
#loading{ max-width:470px; margin-inline:auto; }
#loading p{ margin:0; }
.order-help{ margin:28px 0 0; font-size:.9375rem; color:var(--gray-5); }

/* ============================================================
   7. NEXT STEP
   The first thing under the hero: what the customer does now, or
   what we are doing. The kicker is the page's one crimson label.
   ============================================================ */
.next-panel{ background:var(--gray-1); border-color:var(--line-2); }
.next-panel .kicker{ color:var(--accent-text); }
.next-panel h2{ margin:0 0 8px; font-size:clamp(1.5rem, 1.1vw + 1.25rem, 1.875rem); letter-spacing:-.024em; line-height:1.12; text-wrap:balance; }
.next-panel p{ margin:0; max-width:60ch; color:var(--gray-7); text-wrap:pretty; }
.next-track{ margin-top:18px; gap:10px; }
.next-track .chip{
  display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px;
  font-family:var(--font-body); font-size:.875rem; font-weight:500; letter-spacing:0; font-variant-numeric:tabular-nums;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
}
.next-panel.is-done{ border-color:var(--ok-line); }
.next-panel.is-done .kicker{ color:var(--ok); }
.next-panel.is-off{ background:var(--surface); border-color:var(--line-2); }
.next-panel.is-off .kicker{ color:var(--gray-5); }

/* ============================================================
   8. YOUR CARD: 3D CAROUSEL AND ITS ACTIONS
   ============================================================ */
.card-panel .card-3d{
  margin:0 0 14px; border-radius:var(--r); overflow:hidden;
  background:radial-gradient(ellipse 62% 70% at 50% 46%, rgba(217,217,222,.1), transparent 72%), var(--paper);
}
/* the plain mock-up, shown until the 3D card starts: fitted whole inside the stage, so nothing moves when 3D takes over */
.card-panel .card-3d .hero-fallback{ position:absolute; inset:0; margin:auto; width:auto; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -18px rgba(0,0,0,.8); }
/* several designs and no 3D on this device: the picture holds them stacked, so the stage grows to show every one */
.card-panel .card-3d.is-stack{ aspect-ratio:auto; max-height:none; padding:20px 0; }
.card-panel .card-3d.is-stack .hero-fallback{ position:static; max-height:none; }
.card-nav{ gap:6px; margin:0 0 4px; }
/* round arrows, 44px, as on the storefront's pagers */
.nav-arrow{ width:44px; height:44px; border:1.5px solid var(--line-control); background:transparent; color:var(--ink); transition:background-color .18s, border-color .18s, transform .18s var(--ease-out); }
.nav-arrow:hover{ background:transparent; border-color:var(--line-control); transform:none; }
@media (hover:hover){ .nav-arrow:hover{ background:rgba(255,255,255,.06); border-color:var(--line-control-hover); } }
.nav-arrow:active{ transform:scale(.92); }
.nav-arrow:focus-visible{ outline-offset:3px; }
/* dot pager: 8px dots in a 28 x 44 tap zone, the current one a short crimson pill */
.dots{ gap:0; max-width:none; flex-wrap:nowrap; }
.dots button,.dots button.on,.dots button:hover{ position:relative; width:28px; height:44px; border-radius:8px; background:none; transform:none; transition:width .25s var(--ease-out); }
.dots button::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:999px;
  background:var(--line-control); transition:width .25s var(--ease-out), margin .25s var(--ease-out), background-color .18s;
}
@media (hover:hover){ .dots button:hover::before{ background:var(--line-control-hover); } }
.dots button.on{ width:44px; }
.dots button.on::before{ width:24px; margin-left:-12px; background:var(--accent); }
.dots button:focus-visible{ outline-offset:-4px; }
.card-cap{ margin:0 0 14px; font-size:.9375rem; color:var(--gray-7); }
.card-actions{ gap:10px; }
.card-actions .btn svg{ margin-right:0; }
.card-locked{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px dashed var(--line-2); border-radius:999px;
  font-family:var(--font-body); font-size:.875rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--gray-5);
}
.share-row{ gap:10px; margin-top:14px; padding-top:14px; border-top-color:var(--line); }
.share-btn{ min-height:44px; padding:0 18px; border:1.5px solid var(--line-control); background:transparent; color:var(--ink); font:500 .9375rem/1.2 var(--font-body); transition:background-color .18s, border-color .18s; }
.share-btn:hover{ border-color:var(--line-control); }
@media (hover:hover){ .share-btn:hover{ background:rgba(255,255,255,.06); border-color:var(--line-control-hover); } }
.share-note{ flex:1 1 100%; margin:2px 0 0; font-size:.875rem; color:var(--gray-5); }
@media (max-width:420px){ .card-actions .btn{ flex:1 1 auto; } }

/* ============================================================
   9. MAILING INSTRUCTIONS AND THE TRACKING FORM
   ============================================================ */
.mail-steps{ gap:20px; margin:18px 0 0; }
.mail-step{ grid-template-columns:32px 1fr; gap:14px; }
.mail-step::before{
  width:32px; height:32px; background:transparent; color:var(--ink); border:1.5px solid var(--line-control);
  font-family:var(--font-body); font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.mail-step h3{ margin:4px 0 6px; }
.mail-step p,.mail-step ul{ font-size:.9375rem; color:var(--gray-7); }
.mail-step ul{ padding-left:20px; }
.mail-step b{ color:var(--ink); font-weight:600; }
.mail-step-more{ margin-top:12px !important; }
/* the address to write on the envelope */
.address{
  margin:10px 0 0; padding:16px 18px; border:1px solid var(--line-2); border-left:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--gray-1); color:var(--ink); font-family:var(--font-body); font-size:1rem; font-weight:500; line-height:1.55;
}
.address.pending{ border-color:var(--warn-line); border-left-color:var(--warn-line); background:var(--warn-soft); color:var(--ink); font-weight:400; }
.btn-icon{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }

.inline-form{ gap:12px; margin-top:4px; }
.inline-form .btn{ margin-top:30px; }             /* lines up with the fields, under their labels */
#incoming-form [name=tracking]{ font-family:var(--font-body); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
#incoming-saved{ margin:16px 0 0; }
@media (max-width:520px){
  .inline-form{ gap:14px; }
  .inline-form .btn{ margin-top:2px; }
}

/* ============================================================
   10. PROOF
   ============================================================ */
.proof-stage{ margin:16px 0; padding:clamp(16px,3vw,28px); border:1px solid var(--line); border-radius:var(--r); background:var(--paper); }
.proof-stage::before{ display:none; }
.proof-img{ height:auto; border:1px solid var(--line-2); border-radius:var(--r-sm); box-shadow:0 24px 50px -18px rgba(0,0,0,.8); }
.proof-foot{ margin:0 0 18px; }
.proof-help{ margin:14px 0 0; font-size:.875rem; color:var(--gray-5); }
#btn-approve{ box-shadow:none; }
/* a proof sent as a PDF: a card that opens it, in place of the picture */
.proof-pdf{
  display:flex; align-items:center; gap:14px; margin:16px 0 18px; padding:16px 18px; min-height:76px;
  border:1.5px solid var(--line-control); border-radius:var(--r); background:var(--gray-1);
  color:var(--ink); text-decoration:none; transition:border-color .18s, background-color .18s, transform .18s var(--ease-out);
}
.proof-pdf-icon{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--surface); border:1px solid var(--line-2); }
.proof-pdf-icon svg,.proof-pdf-go{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.proof-pdf-text{ flex:1 1 auto; min-width:0; font-weight:600; line-height:1.3; }
.proof-pdf-text small{ display:block; margin-top:3px; font-size:.875rem; font-weight:400; color:var(--gray-7); }
.proof-pdf-go{ flex:none; color:var(--gray-7); }
@media (hover:hover){ .proof-pdf:hover{ border-color:var(--line-control-hover); background:rgba(255,255,255,.1); } }
.proof-pdf:active{ transform:scale(.99); }

/* ============================================================
   11. TIMELINE
   A dot per step: done in silver, the current one crimson, the
   rest hollow. Nothing pulses.
   ============================================================ */
.timeline{ gap:0; }
.timeline li{ grid-template-columns:24px 1fr; gap:14px; padding:9px 0; font-size:.9375rem; line-height:1.45; color:var(--gray-5); }
.timeline li::after{ left:11.5px; top:28px; bottom:-10px; width:1px; background:var(--line-2); }
.timeline li.done::after{ background:var(--silver-dim); }
.timeline .dot{ width:10px; height:10px; margin:5px 7px; border:1.5px solid var(--line-control); background:transparent; }
.timeline li.done .dot{ background:var(--silver); border-color:var(--silver); }
.timeline li.now .dot{ background:var(--accent); border-color:var(--accent); box-shadow:var(--laser); }
.timeline li.now .dot::after{ content:none; animation:none; }
.timeline li.done{ color:var(--gray-7); }
.timeline li.open{ color:var(--gray-7); }   /* the order has moved past this row but it is not finished: hollow dot, readable text */
.timeline li.now{ color:var(--ink); font-weight:600; }
.timeline li small{ margin-top:1px; font-size:.8125rem; font-weight:400; color:var(--gray-5); }

/* ============================================================
   12. ORDER DETAILS, ENGRAVING COLOR, PRICE
   ============================================================ */
.kv{ gap:10px 18px; font-size:.9375rem; }
.kv dt{ color:var(--gray-5); font-family:var(--font-body); font-size:inherit; letter-spacing:0; text-transform:none; }
.kv dd{ color:var(--ink); }
/* the details read as label over value, so a long value (an address, the link policy) has the full width */
#details{ display:block; }
#details dt{ margin:16px 0 2px; font-size:.8125rem; font-weight:500; line-height:1.4; }
#details dt:first-child{ margin-top:0; }
#details dd{ line-height:1.5; overflow-wrap:anywhere; }
/* the engraving color: a small dot in the color, beside its name */
.color-dot{
  display:inline-block; width:14px; height:14px; margin:0 8px -2px 0; border-radius:50%;
  background:var(--sw, #D9D9DE); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.color-dot[data-finish="metallic"]{ background:linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 44%, rgba(0,0,0,.32) 100%), var(--sw, #D9D9DE); }
/* what was paid, row by row, from the amounts stored with the order */
.price-lines{ display:grid; gap:12px; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--line); font-size:.9375rem; }
.price-line{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.price-line dt{ color:var(--ink); line-height:1.4; }
.price-line dd{ margin:0; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.price-line-note{ display:block; font-size:.8125rem; color:var(--gray-5); }
.price-line-note::first-letter{ text-transform:uppercase; }
.price-line--total{ padding-top:14px; border-top:1px solid var(--line-2); font-size:1.0625rem; font-weight:600; }
.price-line--total:first-child{ padding-top:0; border-top:0; }

/* ============================================================
   13. SHIPPED, SHARE, REFUND, LOOKUP
   ============================================================ */
#p-shipped .kv{ grid-template-columns:auto 1fr; }
.ship-go{ margin:18px 0 0; }
#p-share{ background:var(--surface); border-color:var(--line); }
#p-share .kicker{ color:var(--gray-5); }
#p-share p{ color:var(--gray-7); }
#p-share .row{ gap:10px; margin:16px 0 0; }
.share-handle{
  min-height:44px; padding:0 18px; gap:9px; border:1.5px solid var(--line-control); background:transparent; color:var(--ink);
  font:500 .9375rem/1.2 var(--font-body); transition:background-color .18s, border-color .18s;
}
.share-handle:hover{ border-color:var(--line-control); }
@media (hover:hover){ .share-handle:hover{ background:rgba(255,255,255,.06); border-color:var(--line-control-hover); } }
.refund-panel p{ font-size:.9375rem; }
.refund-panel .btn{ margin-top:0; }
#refund-p{ margin:0 0 16px; color:var(--gray-7); }
#refund-sent{ margin:16px 0 0; }

.lookup{ max-width:470px; margin-inline:auto; }
.lookup h2{ margin-bottom:6px; font-size:1.375rem; }
.lookup .lookup-sub{ margin:0 0 22px; font-size:.9375rem; color:var(--gray-7); }
.lookup .btn{ margin-top:4px; }
.lookup-help{ margin:18px 0 0; font-size:.875rem; text-align:center; color:var(--gray-5); }

/* ============================================================
   14. DIALOGS: mailing template, refund request, approve the proof
   ============================================================ */
.lb{ padding:16px; background:rgba(0,0,0,.72); -webkit-backdrop-filter:none; backdrop-filter:none; overscroll-behavior:contain; }
.lb-card{
  padding:24px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85); overscroll-behavior:contain;
}
.lb-card:focus,.lb-card:focus-visible{ outline:none; }
.lb-card h2{ margin:0 44px 8px 0; font-size:1.375rem; letter-spacing:-.02em; line-height:1.2; text-wrap:balance; }
.lb-card img{ margin-top:14px; border-radius:var(--r-sm); }
.lb-title{ margin:0 44px 0 0; min-height:28px; font-size:1rem; font-weight:600; color:var(--ink); }
.lb-x{
  top:14px; right:14px; width:44px; height:44px; display:grid; place-items:center; padding:0;
  border:0; background:transparent; color:var(--gray-7); transition:background-color .18s, color .18s, transform .18s var(--ease-out);
}
.lb-x svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; }
.lb-x:hover{ background:transparent; }
@media (hover:hover){ .lb-x:hover{ background:rgba(255,255,255,.08); color:var(--ink); } }
.lb-x:active{ transform:scale(.92); }
.lb-note{ margin:12px 0 0; font-size:.9375rem; color:var(--gray-7); }
.lb-lead{ margin:0 0 4px; font-size:.9375rem; color:var(--gray-7); }
.rf-card h2{ margin:0 44px 8px 0; font-size:1.375rem; }
.rf-reasons{ gap:8px; margin:16px 0 18px; }
.lb-actions{ gap:10px; margin-top:20px; }
.rf-thanks{ padding:14px 0 4px; text-align:center; }
.rf-thanks h2{ margin:0 0 8px; }
.rf-thanks p{ margin:0 0 20px; color:var(--gray-7); }
.ap-card{ width:min(100%, 460px); }
.ap-card p{ margin:0; color:var(--gray-7); }
.ap-card .notice{ margin:16px 0 0; }
@media (max-width:640px){
  .lb-card{ padding:20px 18px; border-radius:var(--r); }
  .lb-actions .btn{ flex:1 1 100%; }
}

/* ============================================================
   15. PRINT
   Customers print this page for the mailing instructions: black on
   white, without the navigation and the buttons.
   ============================================================ */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  .skip-link,.announce,.site-header,.site-footer,.menu-sheet,.card-actions,.share-row,.lb,#p-share,#p-refund{ display:none !important; }
  .order-hero,.section.after-hero{ background:none !important; border:0 !important; }
  .panel{ background:none !important; border-color:#999 !important; color:#000 !important; box-shadow:none !important; }
  .panel *,.order-hero *{ color:#000 !important; }
  .address,.notice{ background:none !important; border-color:#999 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   16. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none; }
  .btn,.nav-arrow,.lb-x,.proof-pdf,.dots button,.dots button::before{ transition:none; }
  .btn:active,.nav-arrow:active,.lb-x:active,.proof-pdf:active{ transform:none; }
}