/* ============================================================
   ENGRAVING BY SILVA — create-page.css
   Styling for the two customer flow pages:
     /create/   the 5-step card designer + checkout
     /order/    order tracking, proof approval, mailing
   Loaded AFTER engraving.css and eng-motion.css, so everything in
   here is an override layer. engraving.css is never edited.

   Palette: black, concrete gray, silver, white. The only glow is a
   thin white/silver laser line. Motion is transform/opacity only.
   ------------------------------------------------------------
   1. Shared tokens + surfaces      5. Steps 3-5 (info/agree/review)
   2. Create: shell + progress      6. Order page
   3. Create: the designer          7. Motion + reduced motion
   4. Create: package tiers         8. Responsive
   ============================================================ */

/* ============ 1. SHARED TOKENS + SURFACES ============ */
html{ background:#0A0A0B; }
body.create-page{ background-color:#0A0A0B; }
:root{
  color-scheme:dark;              /* native checkboxes, selects and scrollbars go dark */
  --silver:      #C0C0C8;
  --silver-dim:  rgba(192,192,200,.42);
  --glass:       rgba(20,20,22,.66);
  --glass-2:     rgba(26,26,30,.55);
  --hair:        rgba(255,255,255,.09);
  --hair-2:      rgba(255,255,255,.16);
  --laser:       0 0 10px rgba(255,255,255,.42);
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* a dark glass surface: translucent charcoal, one hairline, soft blur */
.glass{
  background:var(--glass);
  border:1px solid var(--hair);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}

/* thin silver rule used as a section divider */
.laser-rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--silver-dim) 18%, var(--silver-dim) 82%, transparent);
}

/* small mono label */
.mono-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-5);
}

kbd{
  font-family:var(--font-mono); font-size:.68rem; line-height:1;
  padding:4px 6px; border-radius:6px; color:var(--gray-3);
  background:rgba(255,255,255,.06); border:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
}

:where(button, a, input, select, textarea, summary, label.opt, label.check):focus-visible{
  outline:2px solid var(--silver);
  outline-offset:2px;
}


/* ============ 2. CREATE: SHELL + PROGRESS ============ */
body.create-page{
  background-image:radial-gradient(120% 62% at 50% -8%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%);
  background-repeat:no-repeat;
}
.create-bar{
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--hair);
}
.create-main{ padding-top:clamp(18px,3.4vw,36px); }

/* the flow card */
.flow-create{
  background:linear-gradient(180deg, rgba(24,24,28,.92), rgba(15,15,17,.96));
  border:1px solid var(--hair);
  border-radius:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 100px rgba(0,0,0,.55);
  /* clip (not hidden) so the sticky footer still sticks to the viewport */
  overflow:clip;
}
.flow-head{ padding:20px clamp(16px,2.4vw,28px) 0; }
.flow-body{ padding:clamp(18px,2.6vw,28px); }

/* head: wordmark + step counter + the 5-segment bar */
.flow-topline{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:34px; }
.s3xy-lockup{ display:flex; align-items:center; gap:12px; min-width:0; }
.s3xy-lockup img{ height:30px; width:auto; opacity:.92; }
.s3xy-lockup .sep{ width:1px; height:22px; background:var(--hair-2); }
.s3xy-lockup .who{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-5); white-space:nowrap; }
.step-label{ display:block; text-align:right; }
#step-count{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-5); white-space:nowrap; }
#step-name{ display:none; }

.progress{ display:flex; gap:10px; margin:16px 0 0; }
/* the bar is rebuilt here: the <i> is only a column, the rail is its ::before */
.progress i, .progress i.done, .progress i.now{
  flex:1 1 0; display:block; height:auto; min-width:0;
  background:none; border-radius:0; opacity:1; font-style:normal;
}
.progress i::before{
  content:""; display:block; height:2px; border-radius:2px;
  background:var(--line-2);
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.progress i .lbl{
  display:block; margin-top:9px; font:500 .74rem/1.2 var(--font-body);
  color:var(--gray-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .35s var(--ease);
}
.progress i.done::before{ background:var(--silver); }
.progress i.done .lbl{ color:var(--gray-7); }
.progress i.now::before{ background:#fff; box-shadow:var(--laser); animation:laserBreathe 3.2s ease-in-out infinite; }
.progress i.now .lbl{ color:var(--ink); font-weight:600; }
@keyframes laserBreathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }

/* step titles */
.fstep-titlerow{ display:flex; align-items:flex-start; gap:16px; justify-content:space-between; }
.fstep-title{ letter-spacing:-.035em; }
.fstep > .lead{ color:var(--gray-7); max-width:62ch; }

/* footer bar: sticks to the bottom of the viewport while you work */
.flow-foot{
  position:sticky; bottom:0; z-index:6;
  background:rgba(13,13,15,.9);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-top:1px solid var(--hair);
  padding:16px clamp(16px,2.4vw,28px) max(16px, env(safe-area-inset-bottom));
}
.flow-foot .tot b{ font-size:1.5rem; }
.flow-foot #btn-next{ box-shadow:0 10px 30px rgba(0,0,0,.5); }
.flow-error{ margin-inline:clamp(16px,2.4vw,28px); }

/* buttons: quieter hover, silver ghost */
.btn:hover{ box-shadow:0 8px 22px rgba(0,0,0,.45); }
.btn-ghost{ --bd:var(--hair-2); }
.btn-ghost:hover{ --bd:var(--silver); --bg:rgba(255,255,255,.05); }

/* inputs on the flow card */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  background:rgba(10,10,11,.55); border-color:var(--hair-2);
}
input:focus,select:focus,textarea:focus{ border-color:var(--silver); box-shadow:0 0 0 3px rgba(192,192,200,.14); }
.check{ background:rgba(10,10,11,.4); border-color:var(--hair); }
.check:hover{ border-color:var(--hair-2); }
.file-drop{ background:rgba(10,10,11,.4); border-color:var(--hair-2); }
.file-drop:hover,.file-drop.drag{ border-color:var(--silver); background:rgba(255,255,255,.035); }


/* ============ 3. CREATE: THE DESIGNER ============ */
.ed{ gap:20px; }

/* --- the stage: a lit concrete room, the card floating on it --- */
.ed-stage{
  background:#000 url(/assets/images/hero-backdrop-m.jpg) center 58% / cover no-repeat;
  border-radius:20px;
  border:1px solid var(--hair);
  padding:clamp(12px,4%,34px);
  isolation:isolate;
}
.ed-stage::before{                       /* scrim, keeps the room quiet behind the card */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.3) 44%, rgba(10,10,11,.72) 100%);
}
.ed-stage::after{                        /* one soft overhead light */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(58% 42% at 50% 2%, rgba(255,255,255,.12), rgba(255,255,255,0) 72%);
}
.ed-stage .canvas-container{
  position:relative; z-index:1;
  border-radius:4%/6.5%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.11),
    0 18px 34px rgba(0,0,0,.62),
    0 46px 80px rgba(0,0,0,.58);
}
.ed-empty{
  z-index:2; align-content:end; gap:5px; padding:20px 20px 11%;
  background:linear-gradient(180deg, rgba(10,10,11,0) 52%, rgba(10,10,11,.6));
}
.ed-empty b{ font-size:1.05rem; letter-spacing:-.02em; }
.ed-empty span{ color:var(--gray-7); max-width:30ch; margin-inline:auto; }

/* --- toolbar: one pill bar under the card --- */
.ed-toolbar{
  width:fit-content; max-width:100%; margin:16px auto 0;
  gap:3px; padding:5px; border-radius:999px;
  background:var(--glass); border:1px solid var(--hair);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  justify-content:center;
}
.tb{
  width:36px; height:36px; border-radius:999px; border:1px solid transparent;
  background:transparent; color:var(--gray-3);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tb:hover:not(:disabled){ background:rgba(255,255,255,.08); border-color:var(--hair-2); color:var(--ink); }
.tb:disabled{ opacity:.28; }
.tb svg{ width:17px; height:17px; stroke-width:1.7; }
.tb.text{ width:auto; padding:0 14px; font:500 .8rem var(--font-body); color:var(--gray-5); }
.tb.text:hover{ color:var(--ink); }
.tb.danger:hover:not(:disabled){ border-color:rgba(198,40,40,.55); color:#F3A6A6; background:rgba(198,40,40,.12); }
.tb-sep{ height:20px; background:var(--hair-2); margin:0 3px; }

.ed-hint{ margin-top:12px; color:var(--gray-5); font-size:.66rem; }
.ed-keys{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  font-size:.74rem; color:var(--gray-5);
}
.ed-keys li{ display:inline-flex; align-items:center; gap:6px; }

/* --- side panel: dark glass --- */
.ed-side{
  background:var(--glass); border:1px solid var(--hair); border-radius:20px;
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  padding:14px; top:16px;
}
.ed-tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  background:rgba(10,10,11,.55); border:1px solid var(--hair);
  border-radius:14px; padding:5px; margin-bottom:14px;
}
.ed-tabs button{
  display:grid; justify-items:center; align-content:center; gap:6px;
  padding:11px 2px 10px; border-radius:10px;
  font:500 .7rem/1 var(--font-body); letter-spacing:.01em; color:var(--gray-5);
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.ed-tabs button svg{
  width:20px; height:20px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.ed-tabs button:hover{ color:var(--gray-3); }
.ed-tabs button.on{
  background:rgba(255,255,255,.07); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2);
}
.ed-panel-h{ margin:0 0 10px; }

/* text presets */
.ed-add{
  background:rgba(10,10,11,.45); border:1px solid var(--hair-2); border-radius:12px;
  padding:15px 12px; margin-bottom:8px; color:var(--gray-3);
  transition:border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.ed-add:hover{ border-color:var(--silver); color:var(--ink); transform:translateY(-1px); }

/* element + template tiles */
.ed-grid{ gap:8px; }
.ed-tile{
  border:1px solid var(--hair); border-radius:12px; background:rgba(10,10,11,.45);
  color:var(--gray-5); padding:9px 6px 8px; gap:7px; line-height:1.25;
  transition:border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.ed-tile:hover{ border-color:var(--silver); color:var(--ink); transform:translateY(-1px); }
.ed-glyph svg{ width:30px; height:30px; stroke:var(--gray-3); stroke-width:1.6; }
.ed-tile:hover .ed-glyph svg{ stroke:var(--ink); }
.ed-thumb{ border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.5); }
.ed-note{ color:var(--gray-5); }

/* selected-object properties */
.ed-props{ border-top:1px solid var(--hair); margin-top:16px; padding-top:14px; }
.ed-props-h{ color:var(--gray-5); }
.ed-props .field > span{ color:var(--gray-7); }
.ed-btnrow .tb{ width:34px; height:34px; border-color:var(--hair-2); background:rgba(10,10,11,.45); }
.ed-btnrow .tb.on{ background:var(--silver); color:var(--paper); border-color:var(--silver); }
.ed-props input[type=range]{ width:100%; accent-color:var(--silver); }
.check.compact{ background:rgba(10,10,11,.45); }

/* "we design it for you" drawer + extras */
.ed-idea{
  margin-top:20px; background:rgba(10,10,11,.4); border:1px solid var(--hair); border-radius:var(--r);
}
.ed-idea summary{ position:relative; padding:16px 46px 16px 18px; color:var(--gray-7); }
.ed-idea summary::after{
  content:""; position:absolute; right:20px; top:50%; width:9px; height:9px;
  border-right:1.6px solid var(--gray-5); border-bottom:1.6px solid var(--gray-5);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s var(--ease);
}
.ed-idea[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.ed-idea .field{ padding:0 18px 18px; }
.ed-extra{ margin-top:20px; display:grid; gap:4px; }
.err-editor-slot{ margin-top:12px; }


/* ============ 4. CREATE: PACKAGE TIERS ============ */
.opts.two{ gap:16px; }
.opt.pkg{
  background:linear-gradient(180deg, rgba(26,26,30,.7), rgba(15,15,17,.7));
  border:1px solid var(--hair); border-radius:20px; padding:20px 20px 18px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.opt.pkg:hover{ border-color:var(--hair-2); }   /* no transform here: data-tilt owns it */
.opt.pkg.on{
  border-color:var(--silver);
  box-shadow:0 0 0 1px rgba(192,192,200,.28), 0 26px 60px rgba(0,0,0,.5);
}
/* the tick lives on ::before because ::after belongs to the motion layer's glare */
.opt.pkg::after{ content:none; }
.opt.pkg::before{
  content:""; position:absolute; z-index:2; top:20px; right:18px; width:22px; height:22px;
  border-radius:50%; border:1.5px solid var(--hair-2); background:rgba(10,10,11,.55);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.opt.pkg.on::before{
  border-color:var(--silver); background:var(--silver) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/13px no-repeat;
}
.pkg-name{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-5); margin-bottom:10px;
}
.pkg-price{
  font-family:var(--font-head); font-weight:700; font-size:clamp(2.1rem,4.4vw,2.8rem);
  letter-spacing:-.04em; line-height:1; color:var(--ink);
}
.pkg-ship{ margin-top:8px; font-size:.84rem; color:var(--gray-5); }
.opt.pkg .d{ margin-top:12px; color:var(--gray-7); font-size:.92rem; }

/* the product shot: a black card standing on lit concrete */
.pkg-show{
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(255,255,255,.13), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #35353B 0%, #24242A 46%, #141418 100%);
  border:1px solid var(--hair); border-radius:16px;
}
.pkg-show::before{ background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35)); }
.pkg-card3d .pkg-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08); }
.pkg-card3d::after{ background:radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,.28) 45%, rgba(0,0,0,0) 72%); }

.totals{ border:1px solid var(--hair); border-radius:var(--r); background:rgba(10,10,11,.35); }
.totals div{ border-top-color:var(--hair); }
.totals div[hidden]{ display:none; }
.totals div.sum{ background:rgba(255,255,255,.04); }
.ship-note{ color:var(--gray-5); font-size:.85rem; margin:14px 0 0; }


/* ============ 5. STEPS 3-5 ============ */
.form-h{
  margin:26px 0 14px; padding-top:20px; border-top:1px solid var(--hair);
  font-size:.72rem; font-family:var(--font-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-5); font-weight:600;
}
.field.has-err input,.field.has-err select,.field.has-err textarea{ border-color:var(--err); }
.addr-preview{
  background:rgba(10,10,11,.45); border:1px solid var(--hair);
  border-left:2px solid var(--silver-dim); font-family:var(--font-mono); font-size:.92rem;
}
.addr-preview.empty{ border-left-color:var(--hair); }

/* the address / agreement rows: big checkbox, silver when confirmed */
.check{ border-radius:14px; padding:16px 18px; align-items:center; }
.check input{ width:24px; height:24px; accent-color:var(--silver); }
.check:has(input:checked){ border-color:var(--silver-dim); background:rgba(192,192,200,.07); }
#addr-verify:has(input:checked)::after{
  content:"Address confirmed"; margin-left:auto; flex:0 0 auto; align-self:center;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:var(--silver); border-radius:999px; padding:5px 10px; white-space:nowrap;
}
.disclaimer-box{ border-color:var(--hair); background:rgba(10,10,11,.35); color:var(--gray-5); }

/* review: one receipt */
.review{ gap:0; border:1px solid var(--hair); border-radius:20px; background:rgba(10,10,11,.35); overflow:hidden; }
.rv{ border:0; border-top:1px solid var(--hair); border-radius:0; padding:18px clamp(16px,2.4vw,22px); }
.rv:first-child{ border-top:0; }
.rv .rv-h h3{ color:var(--gray-5); }
.rv .edit{ color:var(--gray-7); text-decoration:none; border-bottom:1px solid var(--hair-2); }
.rv .edit:hover{ color:var(--ink); border-bottom-color:var(--silver); }
.rv-mock{
  margin:4px 0 14px; padding:16px; border-radius:14px; border:1px solid var(--hair);
  background:#000 url(/assets/images/hero-backdrop-m.jpg) center 58% / cover no-repeat;
  position:relative; isolation:isolate;
}
.rv-mock::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(10,10,11,.66); }
.rv-mock img{
  position:relative; z-index:1; width:min(100%,330px); margin:0 auto;
  border-radius:4%/6.5%; box-shadow:0 20px 44px rgba(0,0,0,.6);
}
.rv .lines div{ color:var(--gray-7); }
.rv .lines .sum{ border-top-color:var(--hair); color:var(--ink); font-size:1.35rem; }
.rv.rv-total{ background:rgba(255,255,255,.035); }
.pay-note{ color:var(--gray-5); }
.pay-note svg{ stroke:var(--silver); }


/* ============ 6. ORDER PAGE ============ */
.order-hero{ background-image:url(/assets/images/hero-backdrop.jpg); }
.order-hero .kicker{ color:var(--gray-5); }
#hero-order{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin:10px 0 16px; }
.order-no{
  background:rgba(255,255,255,.05); color:var(--ink);
  border:1px solid var(--hair-2); border-radius:14px;
  padding:11px 22px; margin:0; letter-spacing:.08em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.status-pill{
  background:rgba(255,255,255,.05); border:1px solid var(--hair-2); color:var(--gray-3);
  padding:8px 14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.status-pill.hot{ background:rgba(255,255,255,.1); border-color:var(--silver); color:#fff; }
.status-pill.ok{ background:rgba(31,138,76,.16); border-color:rgba(31,138,76,.5); color:#A7E3BE; }

.panel{
  background:linear-gradient(180deg, rgba(24,24,28,.86), rgba(15,15,17,.9));
  border:1px solid var(--hair); border-radius:22px;
  padding:clamp(20px,3vw,30px); margin-bottom:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.panel h2{ font-size:1.28rem; letter-spacing:-.02em; }
.panel-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.panel-h h2{ margin:0; }
.lookup{ max-width:470px; }
.lookup h2{ text-align:center; margin-bottom:6px; }
.lookup .lookup-sub{ text-align:center; color:var(--gray-5); font-size:.92rem; margin:0 0 20px; }
.lookup .laser-rule{ margin:0 0 20px; }

/* mailing steps */
.mail-steps{ gap:18px; }
.mail-step{ grid-template-columns:38px 1fr; gap:16px; }
.mail-step::before{
  width:38px; height:38px; background:transparent; color:var(--silver);
  border:1px solid var(--silver-dim); font-family:var(--font-mono); font-size:.9rem; font-weight:500;
}
.mail-step h3{ margin:6px 0 5px; font-size:1rem; letter-spacing:-.01em; }
.mail-step p, .mail-step ul{ color:var(--gray-5); }
.address{
  background:rgba(10,10,11,.55); border:1px solid var(--hair);
  border-left:2px solid var(--silver); border-radius:12px; color:var(--gray-3);
}
.address.pending{ border-left-color:#F5C98A; }

/* incoming tracking */
.inline-form{ gap:12px; align-items:flex-start; }
.inline-form .field.carrier{ flex:0 0 150px; }
.inline-form .btn{ margin-top:30px; }        /* clears the field labels */
@media (max-width:520px){
  .inline-form{ align-items:stretch; gap:16px; }
  .inline-form .field.carrier{ flex:0 0 auto; }
  .inline-form .btn{ margin-top:0; }
}

/* proof */
.proof-stage{
  margin:16px 0; padding:clamp(18px,3vw,34px); border-radius:18px;
  border:1px solid var(--hair); position:relative; isolation:isolate;
  background:#000 url(/assets/images/hero-backdrop-m.jpg) center 58% / cover no-repeat;
  display:grid; place-items:center;
}
.proof-stage::before{ content:""; position:absolute; inset:0; z-index:0; background:rgba(10,10,11,.7); }
.proof-img{
  position:relative; z-index:1; margin:0;
  width:min(100%,460px); max-height:460px; object-fit:contain;
  border:1px solid var(--hair-2); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.proof-foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:0 0 18px; }
.proof-help{ margin:14px 0 0; text-align:center; color:var(--gray-5); font-size:.86rem; }

/* timeline */
.timeline{ gap:2px; }
.timeline li{ grid-template-columns:24px 1fr; gap:16px; padding:11px 0; align-items:start; }
.timeline li::before{ content:none; }
.timeline li::after{ left:11px; top:30px; bottom:-4px; width:1px; background:var(--hair); }
.timeline li.done::after{ background:var(--silver-dim); }
.timeline .dot{
  position:relative; width:12px; height:12px; margin:6px; border-radius:50%;
  border:1.5px solid var(--line-2); background:var(--surface); box-sizing:border-box;
}
.timeline li.done .dot{ background:var(--silver); border-color:var(--silver); }
.timeline li.now .dot{ background:#fff; border-color:#fff; box-shadow:var(--laser); }
.timeline li.now .dot::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  animation:dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ transform:scale(.72); opacity:.9; }
  50%    { transform:scale(1.18); opacity:0; }
}
.timeline .t{ display:block; }
.timeline li{ color:var(--gray-5); }
.timeline li.done{ color:var(--gray-3); }
.timeline li.now{ color:var(--ink); font-weight:600; }
.timeline li small{ color:var(--gray-5); font-weight:400; margin-top:2px; }

/* details */
.kv dt{ color:var(--gray-5); }
.kv dd{ color:var(--gray-3); }

/* show off / referral */
#p-share{ background:linear-gradient(180deg, rgba(20,20,24,.9), rgba(9,9,10,.94)); border-color:var(--hair-2); }
#p-share h2{ color:var(--ink); }
#p-share p{ color:var(--gray-7); }
.share-handle{
  font-family:var(--font-mono); font-size:.9rem; text-decoration:none; color:var(--ink);
  background:rgba(255,255,255,.06); border:1px solid var(--hair-2); border-radius:999px;
  padding:9px 16px; display:inline-flex; align-items:center; gap:8px;
}
.share-handle:hover{ border-color:var(--silver); }
.referral{ border:1px dashed var(--hair-2); border-radius:var(--r-lg); padding:22px; margin-top:20px; }
.referral h3{ margin-bottom:6px; font-size:1.05rem; }
.referral p{ margin:0 0 14px; color:var(--gray-5); font-size:.94rem; }
/* when the discount launches: add class "has-code" to .referral and fill .code-slot */
.referral .code-slot{
  display:none; margin:0 0 14px; font-family:var(--font-mono); font-size:.95rem;
  background:rgba(255,255,255,.06); border:1px solid var(--hair-2); border-radius:12px; padding:14px 16px;
}
.referral.has-code .code-slot{ display:block; }
.order-help{ color:var(--gray-5); font-size:.88rem; margin-top:22px; }


/* ============ 7. MOTION ============ */
@media (prefers-reduced-motion:reduce){
  .progress i.now::before,
  .timeline li.now .dot::after{ animation:none; }
  .opt.pkg:hover, .ed-add:hover, .ed-tile:hover{ transform:none; }
  .btn:hover{ transform:none; }
}


/* ============ 8. RESPONSIVE ============ */
@media (max-width:1080px){
  .ed{ grid-template-columns:minmax(0,1fr) 268px; }
}
@media (max-width:900px){
  .ed{ grid-template-columns:1fr; gap:0; }
  /* the tools become a sheet that sits right under the card */
  .ed-side{
    position:static; margin-top:18px; border-radius:20px 20px 0 0;
    padding:8px 14px 16px; background:rgba(20,20,22,.82);
  }
  .ed-side::before{
    content:""; display:block; width:42px; height:4px; border-radius:99px;
    background:var(--hair-2); margin:0 auto 12px;
  }
  .ed-tabs{ position:sticky; top:8px; z-index:4; background:rgba(12,12,14,.94); }
  .ed-keys{ display:none; }
}
@media (max-width:760px){
  .progress{ gap:6px; }
  .progress i .lbl{ display:none; }
  #step-name{ display:inline; font:600 .82rem var(--font-body); color:var(--ink); letter-spacing:-.01em; }
  .step-label{ text-align:right; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
  .s3xy-lockup .sep, .s3xy-lockup .who{ display:none; }
  .s3xy-lockup img{ height:26px; }
}
@media (max-width:640px){
  .flow-create{ border-radius:20px; }
  .flow-body{ padding:18px 14px; }
  .flow-head{ padding:16px 14px 0; }
  .flow-foot{ padding:14px 14px max(14px, env(safe-area-inset-bottom)); gap:10px; }
  .flow-foot .tot b{ font-size:1.25rem; }
  .flow-foot .btn{ min-height:50px; padding:0 18px; font-size:.95rem; }
  .flow-error{ margin-inline:14px; }
  .ed-stage{ border-radius:16px; padding:10px; }
  /* the card is small here: keep only the actionable line, clear of the TESLA box */
  .ed-empty{ padding:10px 12px 6%; gap:2px; }
  .ed-empty b{ display:none; }
  .ed-empty span{ font-size:.78rem; max-width:24ch; color:var(--gray-3); }
  .ed-toolbar{ margin-top:12px; width:100%; }
  .opts.two{ gap:12px; }
  .opt.pkg{ padding:18px 16px 16px; }
  .pkg-price{ font-size:2.2rem; }
  .panel{ padding:20px 16px; border-radius:18px; }
  .rv-mock img{ width:min(100%,260px); }
  #hero-order{ gap:10px; }
}
@media (max-width:420px){
  .ed-tabs button{ font-size:.62rem; padding:10px 1px 9px; }
  .ed-tabs button svg{ width:19px; height:19px; }
  .tb{ width:34px; height:34px; }
  .mail-step{ grid-template-columns:32px 1fr; gap:12px; }
  .mail-step::before{ width:32px; height:32px; font-size:.82rem; }
}


/* ============ 9. GUIDED DESIGNER (Cash-App-style short flow) ============
   The card is always on screen: to the left of the tools on desktop, pinned
   to the top of the viewport on phones while the tool sheet scrolls under it.
   Three big starting points on a blank card, four small tabs after that. */

/* --- top bar: back · title · logo --- */
.gd-bar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.gd-bar-nav{ justify-self:start; display:inline-flex; align-items:center; gap:4px; }
.gd-bar .back-link{ margin-left:0; background:none; border:0; cursor:pointer; padding:8px 10px; border-radius:999px; font:inherit; font-size:.93rem; font-weight:500; color:var(--gray-7); transition:color .15s var(--ease), background .15s var(--ease); }
.gd-bar .back-link:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.gd-bar .back-link.home{ color:var(--gray-5); }
.gd-bar-title{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray-3); text-align:center; white-space:nowrap; }
.gd-bar-logo{ justify-self:end; }
.gd-bar-logo img{ height:26px; width:auto; opacity:.9; }

/* --- layout --- */
.ed.gd{ grid-template-columns:minmax(0,1fr) 340px; gap:22px; margin-top:0; align-items:start; }
.gd-stagewrap{ min-width:0; }
.gd .ed-stage{ padding:0; background:none; border:0; border-radius:0; aspect-ratio:auto; }
.gd .ed-stage::before, .gd .ed-stage::after{ content:none; }
.gd .ed-stage .canvas-container{ margin:0 auto; }
.gd-under{ display:grid; justify-items:center; gap:10px; margin-top:12px; }
.gd-toolbar{ margin:0; }
.gd-toolbar .tb.preview{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); background:rgba(255,255,255,.07); border-color:var(--hair-2); font-weight:600; }
.gd-toolbar .tb.preview svg{ width:16px; height:16px; }
.gd-toolbar .tb.preview:disabled{ opacity:.35; }
.gd-legend{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-5);
}
.gd-legend .sw{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:-3px; }
.gd-legend .sw.silver{ background:#E4E4E7; box-shadow:0 0 8px rgba(255,255,255,.45); }
.gd-legend .sw.black{ background:#0A0A0B; border:1px solid var(--hair-2); }
.gd-legend .sep{ opacity:.5; }
.ed.gd:focus, .ed.gd:focus-visible{ outline:none; }
.gd .ed-empty{ padding-bottom:7%; }
.gd .ed-empty span{ color:var(--gray-3); font-size:.85rem; }

/* --- side: three big choices --- */
.gd-side{ padding:16px; }
.gd-start-h{ margin:2px 0 12px; font-family:var(--font-head); font-weight:700; font-size:1.1rem; letter-spacing:-.02em; color:var(--ink); }
.gd-choice{
  width:100%; display:grid; grid-template-columns:44px 1fr; align-items:center; gap:14px;
  padding:14px 14px; margin-bottom:10px; text-align:left; cursor:pointer;
  background:rgba(10,10,11,.5); border:1px solid var(--hair-2); border-radius:16px; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.gd-choice:hover{ border-color:var(--silver); background:rgba(255,255,255,.05); transform:translateY(-1px); }
.gd-choice svg{ width:44px; height:44px; padding:11px; border-radius:12px; background:rgba(255,255,255,.07); stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gd-choice b{ display:block; font-family:var(--font-head); font-size:1rem; letter-spacing:-.01em; }
.gd-choice small{ display:block; margin-top:2px; font-size:.8rem; color:var(--gray-5); line-height:1.35; }
.gd-choice:first-of-type{ border-color:var(--silver-dim); }

/* --- tabs (after a start is picked) --- */
.gd-tabs{ margin-bottom:12px; }
.gd-tabs button{ padding:10px 2px 9px; }
.gd-tabs.hidden, .gd-start.hidden{ display:none; }

/* --- templates: chips, then a small grid --- */
.gd-cats{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gd-cats::-webkit-scrollbar{ display:none; }
.gd-chip{
  flex:0 0 auto; padding:7px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:rgba(10,10,11,.5); border:1px solid var(--hair-2); color:var(--gray-3);
  font:500 .76rem var(--font-body);
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.gd-chip:hover{ border-color:var(--silver); color:var(--ink); }
.gd-chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.gd-tpls{ grid-template-columns:repeat(2,1fr); gap:8px; }
.gd-tile{ padding:6px 6px 8px; }
.gd-tile .ed-thumb.img{ aspect-ratio:1013/638; background:#0A0A0B; display:grid; place-items:center; }
.gd-tile .ed-thumb.img img{ width:100%; height:100%; object-fit:cover; display:block; filter:invert(1) grayscale(1) contrast(1.05); opacity:.92; }
.gd-tile.loading{ opacity:.5; pointer-events:none; }
.gd-more{
  width:100%; margin-top:8px; padding:10px; border-radius:12px; cursor:pointer;
  background:transparent; border:1px dashed var(--hair-2); color:var(--gray-3); font:500 .8rem var(--font-body);
}
.gd-more:hover{ border-color:var(--silver); color:var(--ink); }
.gd-more.hidden{ display:none; }

/* --- side: properties --- */
.gd .ed-props{ margin-top:12px; }
.gd .ed-props input[type=range]{ margin-top:6px; }

/* --- card step: mail it or buy new --- */
.opt.src{ padding:20px 20px 18px 20px; border-radius:20px; background:linear-gradient(180deg, rgba(26,26,30,.7), rgba(15,15,17,.7)); border:1px solid var(--hair); }
.opt.src.on{ border-color:var(--silver); box-shadow:0 0 0 1px rgba(192,192,200,.28), 0 26px 60px rgba(0,0,0,.5); }
.opt.src::after{ top:18px; right:16px; border-color:var(--hair-2); background:rgba(10,10,11,.55); }
.opt.src.on::after{ border-color:var(--silver); background:var(--silver) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/13px no-repeat; }
.opt.src .ico{ width:30px; height:30px; stroke:var(--silver); margin-bottom:12px; }
.opt.src .t{ font-size:1.15rem; }
.opt.src .d{ margin-top:6px; }
.src-tag{ display:inline-block; margin-top:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--hair-2); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-3); }

/* --- review: one big render, three ticks --- */
.rv.rv-top{ padding:0; background:transparent; }
.rv-hero{
  position:relative; isolation:isolate; padding:clamp(18px,4vw,36px);
  background:#000 url(/assets/images/hero-backdrop-m.jpg) center 58% / cover no-repeat;
}
.rv-hero::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(10,10,11,.55), rgba(10,10,11,.35) 45%, rgba(10,10,11,.75)); }
.rv-hero img{
  position:relative; z-index:1; width:min(100%,520px); margin:0 auto; display:block;
  border-radius:4%/6.5%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.65);
  transform:rotate(-2deg);
}
.rv-hero.idea img{ opacity:.8; }
.rv-hero.idea p{ position:relative; z-index:1; margin:16px auto 0; max-width:38ch; text-align:center; color:var(--gray-3); font-size:.92rem; }
.rv-checks{
  list-style:none; margin:0; padding:14px clamp(16px,2.4vw,22px);
  display:grid; gap:8px; background:rgba(255,255,255,.035); border-top:1px solid var(--hair);
}
.rv-checks li{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); font-size:.95rem; }
.rv-checks li::before{
  content:""; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--silver) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --- preview dialog --- */
.gd-preview{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(5,5,6,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.gd-preview.hidden{ display:none; }
.gd-preview-card{
  width:min(100%, 640px); max-height:100%; overflow:auto;
  background:linear-gradient(180deg, rgba(24,24,28,.98), rgba(15,15,17,.99)); border:1px solid var(--hair-2); border-radius:24px;
  padding:clamp(18px,3vw,28px); box-shadow:0 40px 100px rgba(0,0,0,.6); text-align:center;
}
.gd-preview-card h2{ font-size:clamp(1.3rem,3vw,1.7rem); margin:6px 0 14px; }
.gd-preview-stage{
  position:relative; isolation:isolate; border-radius:18px; overflow:hidden; padding:clamp(18px,5vw,40px);
  background:#000 url(/assets/images/hero-backdrop-m.jpg) center 58% / cover no-repeat;
}
.gd-preview-stage::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(10,10,11,.5), rgba(10,10,11,.3) 45%, rgba(10,10,11,.75)); }
.gd-preview-stage img{ position:relative; z-index:1; width:100%; border-radius:4%/6.5%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.65); transform:rotate(-3deg) scale(.96); }
.gd-preview-note{ margin:14px auto 16px; max-width:44ch; color:var(--gray-5); font-size:.9rem; }
.gd-preview-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
body.gd-lock{ overflow:hidden; }

/* --- phones and small tablets --- */
@media (max-width:900px){
  .ed.gd{ grid-template-columns:1fr; gap:0; }
  /* the card is pinned; the tools scroll under it */
  .gd-stagewrap{
    position:sticky; top:0; z-index:5;
    margin:-18px -14px 0; padding:10px 14px 10px;
    background:rgba(17,17,20,.98);
    box-shadow:0 14px 18px -12px rgba(0,0,0,.7);
    border-bottom:1px solid var(--hair);
  }
  /* phones: the editing tools sit ABOVE the card, the legend stays below it */
  .gd-stagewrap{ display:grid; gap:8px; }
  .gd-under{ display:contents; }
  .gd-toolbar{ order:-1; width:100%; margin:0; }
  .gd .ed-stage{ order:0; }
  .gd-legend{ order:1; }
  .gd-legend{ font-size:.58rem; }
  .gd-side{ margin-top:8px; border-radius:20px; padding:12px 14px 16px; }
  .gd-side::before{ margin-bottom:10px; }
  .gd-tabs{ position:static; }
  .gd-tpls{ grid-template-columns:repeat(3,1fr); }
  .gd-choice{ padding:12px; }
}
@media (max-width:640px){
  .gd-bar{ grid-template-columns:1fr auto; }
  .gd-bar-title{ display:none; }
  .gd-bar .back-link{ padding:8px 7px; font-size:.88rem; }
  .gd-stagewrap{ margin:-18px -14px 0; padding:8px 10px 8px; }
  .gd-tpls{ grid-template-columns:repeat(2,1fr); }
  .gd .ed-empty span{ font-size:.78rem; }
  .gd-toolbar .tb.text{ padding:0 10px; font-size:.74rem; }
  .opts.two{ grid-template-columns:1fr; }
  .rv-hero img{ transform:none; }
  .gd-preview{ padding:10px; align-items:end; }
  .gd-preview-card{ border-radius:20px 20px 16px 16px; }
  .gd-preview-actions .btn{ flex:1 1 auto; }
}
@media (max-width:420px){
  .gd-tpls{ grid-template-columns:repeat(2,1fr); }
  .gd-legend .sep, .gd-legend .note{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .gd-choice:hover{ transform:none; }
}

/* --- the designs tray: more than one design per order --- */
.gd-designs{ grid-column:1; display:grid; gap:10px; margin-top:14px; }
.gd-side{ grid-column:2; grid-row:1 / span 2; }
.gd-add{
  display:inline-flex; align-items:center; gap:10px; justify-self:center;
  padding:11px 18px 11px 14px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--hair-2); color:var(--ink); font:600 .9rem var(--font-body);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.gd-add:hover{ border-color:var(--silver); background:rgba(255,255,255,.08); }
.gd-add svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; }
.gd-add small{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--gray-5); }
.gd-add.hidden, .gd-add-note.hidden, .gd-tray.hidden{ display:none; }
.gd-add-note{ margin:0; text-align:center; }
.gd-tray{ background:rgba(10,10,11,.45); border:1px solid var(--hair); border-radius:18px; padding:12px 12px 10px; }
.gd-tray-h{ margin:0 0 10px 4px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-5); }
.gd-tray-h span{ color:var(--gray-3); margin-left:8px; }
.gd-tray-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.gd-dtile{ flex:0 0 150px; display:grid; gap:6px; }
.gd-dpick{
  display:block; width:100%; aspect-ratio:1013/638; padding:0; border-radius:10px; overflow:hidden; cursor:pointer;
  background:#0a0a0b; border:2px solid transparent; box-shadow:0 8px 20px rgba(0,0,0,.5);
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.gd-dpick img{ width:100%; height:100%; object-fit:cover; display:block; }
.gd-dpick:hover{ transform:translateY(-1px); border-color:var(--hair-2); }
.gd-dtile.on .gd-dpick{ border-color:var(--silver); box-shadow:0 0 0 3px rgba(192,192,200,.18), 0 8px 20px rgba(0,0,0,.5); }
.gd-dblank{ display:grid; place-items:center; height:100%; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-5); }
.gd-dbar{ display:flex; align-items:center; gap:2px; }
.gd-dbar > span{ flex:1; font:600 .74rem var(--font-body); color:var(--gray-3); padding-left:2px; }
.gd-dtile.on .gd-dbar > span{ color:var(--ink); }
.tb.mini{ width:24px; height:24px; font-size:.95rem; line-height:1; }
@media (max-width:900px){
  .gd-side{ grid-column:1; grid-row:auto; }
  .gd-designs{ margin-top:10px; }
  .gd-dtile{ flex-basis:124px; }
}

/* review with several designs: side by side, captioned */
.rv-strip{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:18px 22px; justify-content:center; }
.rv-strip figure{ margin:0; flex:1 1 240px; max-width:340px; }
.rv-hero .rv-strip img{ width:100%; transform:none; }
.rv-strip figcaption{ margin-top:10px; text-align:center; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-3); }
.gd-dbar > span{ white-space:nowrap; }
@media (max-width:900px){ .gd-dbar > span{ font-size:.68rem; } }

/* price on the new-card option */
.opt.src .t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.src-price{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--silver); font-weight:600; white-space:nowrap; }

/* --- the cards block: stacked product shot + count --- */
.cards-box{
  display:grid; grid-template-columns:1.15fr 1fr; gap:22px; align-items:center;
  padding:18px; border-radius:20px; border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(26,26,30,.7), rgba(15,15,17,.7));
}
.pkg-show.stack{ margin:0; height:220px; perspective:1100px; perspective-origin:50% 40%; }
.pkg-show.stack .pkg-card3d{
  width:min(58%, 230px); bottom:34px; left:56%;
  transform:translateX(calc(-50% - var(--i) * 16%)) translateZ(calc(var(--i) * -44px)) rotateY(-24deg);
  z-index:calc(10 - var(--i));
}
.pkg-show.stack[data-n="1"] .pkg-card3d{ left:50%; width:min(66%, 250px); }
.cards-meta{ display:grid; gap:14px; }
.cards-locked b{ display:block; font-family:var(--font-head); font-size:1.6rem; letter-spacing:-.03em; color:var(--ink); }
.cards-locked p{ margin:6px 0 0; color:var(--gray-7); font-size:.92rem; }
.cards-locked.hidden, .cards-qty.hidden{ display:none; }
.cards-qty p{ margin:8px 0 0; color:var(--gray-7); font-size:.9rem; }
.stepper{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px; border-radius:999px; background:rgba(10,10,11,.55); border:1px solid var(--hair-2); }
.stepper button{
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; font-size:1.3rem; line-height:1;
  background:rgba(255,255,255,.08); color:var(--ink); transition:background .15s var(--ease);
}
.stepper button:hover:not(:disabled){ background:var(--ink); color:var(--paper); }
.stepper button:disabled{ opacity:.3; cursor:default; }
.stepper b{ min-width:44px; text-align:center; font-family:var(--font-head); font-size:1.35rem; letter-spacing:-.02em; }
.cards-pricing{ margin:0; padding-top:12px; border-top:1px solid var(--hair); color:var(--gray-5); font-size:.84rem; }
.cards-pricing b{ color:var(--ink); }
@media (max-width:760px){
  .cards-box{ grid-template-columns:1fr; gap:14px; }
  .pkg-show.stack{ height:190px; }
}

/* --- card source: compact rows that open when picked --- */
.opts.two.src-opts{ grid-template-columns:1fr; gap:10px; }
.opt.src{ padding:14px 16px; border-radius:16px; }
.opt.src .src-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding-right:34px; }
.opt.src .ico{ width:22px; height:22px; margin:0; stroke:var(--gray-3); }
.opt.src.on .ico{ stroke:var(--silver); }
.opt.src .t{ font-size:1.02rem; display:block; padding:0; }
.opt.src::after{ top:19px; transform:none; right:16px; }   /* stays on the title row when the option opens */
.src-price{
  font-family:var(--font-body); font-weight:600; font-size:.88rem; letter-spacing:0; white-space:nowrap;
  color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--hair-2); border-radius:999px; padding:5px 11px;
}
.src-price small{ font-weight:500; font-size:.72rem; color:var(--gray-5); }
.src-price.muted-price{ color:var(--gray-5); background:transparent; }
.opt.src.on .src-price:not(.muted-price){ color:var(--paper); background:var(--silver); border-color:var(--silver); }
.opt.src.on .src-price:not(.muted-price) small{ color:rgba(10,10,11,.7); }
/* the details: closed until the option is picked */
.src-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease); }
.src-more > div{ overflow:hidden; min-height:0; }
.opt.src.on .src-more{ grid-template-rows:1fr; }
.opt.src .src-more .d{ margin:12px 0 0 36px; padding-top:12px; border-top:1px solid var(--hair); color:var(--gray-7); font-size:.92rem; }
.src-points{ list-style:none; margin:10px 0 2px 36px; padding:0; display:grid; gap:6px; font-size:.86rem; color:var(--gray-3); }
.src-points li{ display:flex; align-items:center; gap:8px; }
.src-points li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--silver); flex:0 0 auto; }
@media (max-width:640px){
  .opt.src .src-row{ gap:10px; padding-right:30px; }
  .opt.src .t{ font-size:.96rem; }
  .src-price{ font-size:.8rem; padding:4px 9px; }
  .opt.src .src-more .d, .src-points{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .src-more{ transition:none; } }

/* email + phone: the email gets the room; the phone keeps a fixed width and drops
   below on its own when the row is too narrow to show the full address */
.contact-row{ display:flex; flex-wrap:wrap; gap:0 16px; }
.contact-row .field:first-child{ flex:1 1 320px; min-width:0; }
.contact-row .field:last-child{ flex:0 1 190px; min-width:170px; }
.contact-row .field input{ width:100%; min-width:0; }
@media (max-width:640px){ .contact-row .field:last-child{ flex-basis:100%; } }

/* Facebook handle icon on the order page */
.share-handle svg{ width:18px; height:18px; flex:0 0 auto; }

/* --- draw tab --- */
.gd-tabs{ grid-template-columns:repeat(5,1fr); }
.gd-tabs button{ font-size:.66rem; padding:10px 1px 9px; }
.gd-draw-hint{ margin:0 0 12px; color:var(--gray-3); font-size:.9rem; line-height:1.5; }
.gd-brushes{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.gd-brush{
  display:grid; justify-items:center; gap:8px; padding:12px 6px 10px; cursor:pointer;
  background:rgba(10,10,11,.45); border:1px solid var(--hair-2); border-radius:12px; color:var(--gray-3);
  font:500 .74rem var(--font-body);
}
.gd-brush i{ display:block; width:60%; border-radius:99px; background:#E4E4E7; }
.gd-brush:hover{ border-color:var(--silver); color:var(--ink); }
.gd-brush.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.gd-brush.on i{ background:var(--paper); }
.ed.gd.is-drawing .ed-stage .canvas-container{ box-shadow:0 0 0 2px rgba(228,228,231,.55), 0 18px 34px rgba(0,0,0,.62), 0 46px 80px rgba(0,0,0,.58); }
.ed.gd.is-drawing .upper-canvas{ cursor:crosshair; }
@media (max-width:420px){ .gd-tabs button{ font-size:.58rem; } .gd-tabs button svg{ width:17px; height:17px; } }

/* --- Canva: the fourth starting point, and the callout on the Upload tab --- */
.gd-choice.gd-canva{ text-decoration:none; }
.gd-choice.gd-canva svg{ background:linear-gradient(135deg, #00C4CC, #7D2AE8); stroke:#fff; }
.gd-canva-box{ margin-top:14px; padding:14px; border:1px solid var(--hair-2); border-radius:14px; background:rgba(10,10,11,.45); display:grid; gap:10px; justify-items:start; }
.gd-canva-box .btn svg{ width:16px; height:16px; margin-right:8px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-canva-box p{ margin:0; color:var(--gray-3); font-size:.88rem; line-height:1.5; }
.gd-canva-box .gd-canva-note{ color:var(--gray-5); font-size:.78rem; }

/* --- order page: the card, plain --- */
.card-panel .card-show{ margin:4px 0 16px; }
.card-panel .card-show img{ display:block; width:min(100%, 520px); margin:0 auto; border-radius:4%/6.5%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 26px 60px rgba(0,0,0,.6); }
.card-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.card-actions .btn svg{ width:16px; height:16px; margin-right:8px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card-locked{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-5); padding:8px 12px; border:1px dashed var(--hair-2); border-radius:999px; }
.share-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--hair); }
.share-btn{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; border:1px solid var(--hair-2); background:rgba(255,255,255,.05); color:var(--ink); text-decoration:none; font:600 .84rem var(--font-body); cursor:pointer; }
.share-btn:hover{ border-color:var(--silver); }
/* --- order page: next step --- */
.next-panel{ border-color:var(--silver-dim); background:linear-gradient(180deg, rgba(28,28,32,.92), rgba(16,16,18,.94)); }
.next-panel .kicker{ color:var(--silver); }
.next-panel h2{ font-size:1.5rem; margin:0 0 8px; }
.next-panel p{ margin:0; color:var(--gray-3); }
.next-track{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.next-track:empty{ display:none; }
.next-track .chip{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--hair-2); color:var(--ink); }
.next-panel.is-done{ border-color:rgba(31,138,76,.5); }
.next-panel.is-done .kicker{ color:#A7E3BE; }
/* --- designer in edit mode --- */
body.gd-edit .gd-designs .gd-add-note{ display:none; }

/* --- order page: the 3D carousel of their designs --- */
.card-panel .card-3d{ position:relative; width:100%; aspect-ratio:21/9; max-height:420px; display:grid; place-items:center; margin:4px 0 6px; }
.card-panel .card-3d .hero-fallback{ width:min(100%, 520px); height:auto; border-radius:4%/6.5%; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 26px 60px rgba(0,0,0,.6); filter:none; }   /* mockups are already dark: no invert */
.card-panel .card-3d.is-3d .hero-fallback{ display:none; }
.card-panel .card-3d .card3d-canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.card-nav{ margin:0 0 6px; justify-content:center; }
.card-cap{ margin:0 0 14px; text-align:center; }
@media (max-width:640px){ .card-panel .card-3d{ aspect-ratio:4/3; max-height:320px; } }
/* --- lightbox (mailing template, refund) --- */
.lb{ position:fixed; inset:0; z-index:230; display:grid; place-items:center; padding:16px; background:rgba(5,5,6,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lb.hidden{ display:none; }
.lb-card{ position:relative; width:min(100%, 760px); max-height:100%; overflow:auto; background:rgba(20,20,22,.98); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:22px 22px 18px; box-shadow:0 40px 100px rgba(0,0,0,.6); }
.lb-card img{ width:100%; height:auto; border-radius:12px; margin-top:10px; }
.lb-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--white); font-size:1.25rem; line-height:1; cursor:pointer; z-index:1; }
.lb-x:hover{ background:rgba(255,255,255,.14); }
.lb-note{ margin:12px 0 0; color:var(--gray-5); font-size:.9rem; }
.rf-card{ width:min(100%, 540px); }
.rf-card h2{ font-size:1.35rem; margin:6px 32px 8px 0; }
.rf-reasons{ display:grid; gap:8px; margin:12px 0 14px; }
.rf-reasons .check{ margin:0; }
.lb-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.refund-panel .btn{ margin-top:2px; }

/* --- order page: carrier dropdown chevron, spaced tracking, centred thank-you --- */
.select-wrap{ position:relative; display:block; }
.select-wrap select{ width:100%; padding-right:40px; appearance:none; -webkit-appearance:none; }
.select-chev{ position:absolute; right:14px; top:50%; width:16px; height:16px; transform:translateY(-50%); pointer-events:none; stroke:var(--gray-3); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#incoming-form [name=tracking]{ font-family:var(--font-mono); letter-spacing:.06em; }
#incoming-form .btn-pop{ box-shadow:0 0 0 0 rgba(255,255,255,.25), 0 12px 30px rgba(0,0,0,.5); }
.order-hero #hero-sub{ text-align:center; max-width:46ch; margin-left:auto; margin-right:auto; }
.hero-thanks{ display:block; font-family:var(--font-head); font-size:1.35rem; color:var(--white); margin-bottom:6px; letter-spacing:-.01em; }


/* ============ 10. ZAZZLE-STYLE EDITOR ============
   Step 1 rebuilt around the pattern people know from Zazzle / Canva on a
   phone: a slim top bar (undo · redo · ··· · DONE), the card,
   an action dock under it whose buttons change with what is
   selected, and an "Add" sheet that slides up from the bottom. Desktop
   follows the same idea: the dock sits under the card, the Add tools stay
   in the side panel. Loaded last, so these rules win over sections 3/8/9. */

/* --- top bar --- */
.gd-top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:0 0 10px; }
.gd-top-l{ display:inline-flex; gap:2px; justify-self:start; }
.gd-top-r{ display:inline-flex; gap:6px; align-items:center; justify-self:end; }
.gd-top .tb{ width:38px; height:38px; color:var(--gray-3); }
.gd-top .tb svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-layer{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  background:transparent; border:1px solid transparent; color:var(--ink); font:600 .84rem var(--font-body); cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.gd-layer:hover{ background:rgba(255,255,255,.06); border-color:var(--hair-2); }
.gd-layer svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-done{
  min-height:38px; padding:0 18px; border-radius:10px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); font:700 .82rem var(--font-body); letter-spacing:.08em; cursor:pointer;
  transition:transform .15s var(--ease), background .15s var(--ease);
}
.gd-done:hover{ background:#fff; }
.gd-done:active{ transform:scale(.97); }
.gd-morewrap{ position:relative; }
.gd-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:240px;
  background:rgba(22,22,25,.98); border:1px solid var(--hair-2); border-radius:14px; padding:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.gd-menu.hidden{ display:none; }
.gd-menu button[hidden]{ display:none; }
.gd-menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 10px; border-radius:9px; border:0;
  background:transparent; color:var(--gray-3); font:500 .88rem var(--font-body); text-align:left; cursor:pointer;
}
.gd-menu button:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
.gd-menu button.danger:hover{ color:#F3A6A6; background:rgba(198,40,40,.14); }
.gd-menu button svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.gd-menu-note{ margin:6px 4px 4px; padding:8px 6px 4px; border-top:1px solid var(--hair); font-size:.72rem; color:var(--gray-5); line-height:1.5; }
.gd-menu-note .sw{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.gd-menu-note .sw.silver{ background:#E4E4E7; }
.gd-menu-note .sw.black{ background:#0A0A0B; border:1px solid var(--hair-2); }

/* --- the card --- */
.gd .ed-stage{ position:relative; overflow:visible; }
.gd .ed-empty{ z-index:3; }
.ed-empty .mob{ display:none; }
.ed-empty .mob b{ display:inline; font-size:inherit; color:var(--ink); }
.ed-empty b{ color:var(--ink); }
.gd-legend{ margin:8px 0 0; }

/* --- the action dock --- */
.gd-dockwrap{ position:relative; margin-top:12px; }
.gd-dock{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px;
  padding:6px; border-radius:18px;
  background:var(--glass); border:1px solid var(--hair);
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.dk{
  display:grid; justify-items:center; align-content:start; gap:5px;
  min-width:66px; padding:7px 6px 6px; border-radius:12px; border:1px solid transparent;
  background:transparent; color:var(--gray-3); font:500 .68rem/1 var(--font-body); cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.dk svg{
  width:36px; height:36px; padding:8px; border-radius:999px; box-sizing:border-box;
  background:rgba(255,255,255,.06); stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:background .15s var(--ease);
}
.dk:hover:not(:disabled){ color:var(--ink); }
.dk:hover:not(:disabled) svg{ background:rgba(255,255,255,.12); }
.dk:disabled{ opacity:.35; cursor:default; }
.dk.primary{ color:var(--ink); }
.dk.primary svg{ background:var(--ink); stroke:var(--paper); stroke-width:2.2; box-shadow:var(--laser); }
.dk.on{ color:var(--ink); }
.dk.on svg{ background:var(--silver); stroke:var(--paper); }
.dk.danger:hover:not(:disabled){ color:#F3A6A6; }
.dk.danger:hover:not(:disabled) svg{ background:rgba(198,40,40,.18); }
.gd-dock-sep{ width:1px; align-self:stretch; margin:6px 4px; background:var(--hair-2); }

/* the tool strip above the dock: rotate / size / font / flip / arrange / draw */
.gd-tool{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
  margin:0 0 8px; padding:8px 10px; border-radius:14px;
  background:rgba(22,22,25,.96); border:1px solid var(--hair-2);
}
.gd-tool.hidden{ display:none; }
.gd-tool-h{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-5); margin-right:4px; }
.gd-tool input[type=range]{ flex:1 1 140px; min-width:120px; accent-color:var(--silver); }
.gd-tool output{ min-width:44px; text-align:center; font:600 .8rem var(--font-mono); color:var(--ink); }
.gd-tool .tb{ border-color:var(--hair-2); background:rgba(255,255,255,.04); color:var(--gray-3); }
.gd-tool .tb.text{ height:34px; font-size:.78rem; color:var(--gray-3); }
.gd-tool .tb.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.gd-tool .tb svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-brush-t i{ display:inline-block; width:22px; border-radius:99px; background:currentColor; margin-right:8px; vertical-align:middle; }
.gd-fonts{ display:flex; flex-wrap:wrap; gap:6px; }
.gd-font{
  padding:8px 12px; border-radius:10px; border:1px solid var(--hair-2); background:rgba(255,255,255,.04);
  color:var(--gray-3); font-size:1rem; cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease);
}
.gd-font:hover{ border-color:var(--silver); color:var(--ink); }
.gd-font.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* the first-visit tip that points at Add */
.gd-tip{
  position:absolute; left:8px; bottom:calc(100% + 12px); z-index:6; max-width:280px;
  padding:12px 14px; border-radius:12px; background:#1d7cff; color:#fff; font:500 .88rem/1.35 var(--font-body);
  box-shadow:0 12px 30px rgba(0,0,0,.45); animation:gd-tip-in .35s var(--ease) both;
}
.gd-tip::after{ content:""; position:absolute; left:28px; top:100%; border:9px solid transparent; border-top-color:#1d7cff; border-bottom:0; }
.gd-tip.hidden{ display:none; }
@keyframes gd-tip-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* "All changes saved" */
.gd-toast{
  position:fixed; left:50%; bottom:calc(var(--dock-h, 0px) + 18px); z-index:60; transform:translate(-50%, 8px);
  padding:10px 18px; border-radius:12px; background:rgba(28,28,32,.97); border:1px solid var(--hair-2);
  color:var(--ink); font:500 .84rem var(--font-body); box-shadow:0 14px 34px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.gd-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (min-width:901px){ .gd-toast{ bottom:24px; } }

/* --- the Add sheet / side panel --- */
.gd-scrim{ display:none; }
.gd-side::before{ display:none; }
.gd-sheet-head{ display:none; }
.gd-tabs{
  display:flex; grid-template-columns:none; gap:2px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:4px; margin:0 0 12px;
}
.gd-tabs::-webkit-scrollbar{ display:none; }
.gd-tabs button{ flex:0 0 auto; min-width:66px; padding:9px 6px 8px; font-size:.66rem; }
.gd-tabsrow{ margin:0 0 12px; }
.gd-tabsrow.hidden{ display:none; }
.gd-tabsrow .gd-tabs{ flex:1; min-width:0; margin:0; }
.gd-tabsrow .gd-catarrow{ margin-bottom:0; }
/* Canva: its own call-to-action in the tool row */
.gd-tab-canva{
  flex:0 0 auto; display:grid; justify-items:center; align-content:center; gap:6px; min-width:66px; padding:9px 6px 8px;
  border-radius:10px; text-decoration:none; font:600 .66rem/1 var(--font-body); color:#fff;
  background:linear-gradient(135deg, #00C4CC, #7D2AE8); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .15s var(--ease), filter .15s var(--ease);
}
.gd-tab-canva svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.gd-tab-canva:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.gd-canva-cta{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 14px; border-radius:14px; text-decoration:none;
  border:1px solid var(--hair-2); background:rgba(10,10,11,.45); color:var(--ink); transition:border-color .15s var(--ease), background .15s var(--ease);
}
.gd-canva-cta:hover{ border-color:var(--silver); background:rgba(255,255,255,.05); }
.gd-canva-cta svg{ flex:0 0 auto; width:40px; height:40px; padding:9px; border-radius:11px; background:linear-gradient(135deg, #00C4CC, #7D2AE8); stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gd-canva-cta b{ display:block; font-size:.95rem; }
.gd-canva-cta small{ display:block; margin-top:2px; font-size:.78rem; color:var(--gray-5); line-height:1.35; }
.gd-upload-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden;
  min-height:52px; padding:0 18px; border-radius:999px; background:var(--ink); color:var(--paper);
  font:700 .95rem var(--font-body); cursor:pointer; transition:background .15s var(--ease), transform .15s var(--ease);
}
.gd-upload-btn:hover{ background:#fff; }
.gd-upload-btn:active{ transform:scale(.985); }
.gd-upload-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.gd-upload-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gd-uploads{ margin-top:14px; }
.gd-uploads.hidden{ display:none; }
.gd-upload-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gd-upload-tile{
  aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--hair); background:#fff; padding:0; cursor:pointer;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.gd-upload-tile img{ width:100%; height:100%; object-fit:contain; display:block; }
.gd-upload-tile:hover{ border-color:var(--silver); transform:translateY(-1px); }
.gd-search{
  display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0 12px; border-radius:999px;
  background:rgba(10,10,11,.5); border:1px solid var(--hair-2);
}
.gd-search svg{ width:18px; height:18px; stroke:var(--gray-5); fill:none; stroke-width:1.8; stroke-linecap:round; flex:0 0 auto; }
.gd-search input{ flex:1; min-width:0; background:transparent; border:0; color:var(--ink); font:500 .95rem var(--font-body); padding:11px 0; outline:none; }
.gd-search input::placeholder{ color:var(--gray-5); }
.gd-icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.gd-icon{
  display:grid; justify-items:center; gap:6px; padding:10px 4px 8px; border-radius:12px;
  border:1px solid var(--hair); background:rgba(10,10,11,.45); color:var(--gray-3); font:500 .64rem var(--font-body); cursor:pointer;
  transition:border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.gd-icon svg{ width:34px; height:34px; }
.gd-icon span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-icon:hover{ border-color:var(--silver); color:var(--ink); transform:translateY(-1px); }
.gd-empty-note{ grid-column:1 / -1; margin:8px 0; }
.gd-designs.flash .gd-tray, .gd-designs.flash .gd-add{ box-shadow:0 0 0 2px var(--silver); transition:box-shadow .2s; }

/* --- desktop: dock under the card, Done lives in the flow footer --- */
@media (min-width:901px){
  .gd-done{ display:none; }
  .gd-tip{ display:none !important; }
}

/* --- phones and small tablets: full editor --- */
@media (max-width:900px){
  body.gd-designing .flow-head{ display:none; }
  body.gd-designing .flow-foot{ display:none; }
  body.gd-designing .create-main{ padding-bottom:calc(var(--dock-h, 220px) + 18px); }
  body.gd-designing .create-foot{ display:none; }
  body.gd-designing .flow-create{ background:transparent; border:0; box-shadow:none; border-radius:0; }
  body.gd-designing .create-main{ padding-top:6px; }
  .flow-create .flow-body{ padding-top:10px; }
  .gd-stagewrap{
    position:static; display:block; margin:0; padding:0;
    background:none; box-shadow:none; border:0;
  }
  .gd-top{ margin:0 0 8px; }
  .ed-empty .desk{ display:none; }
  .ed-empty .mob{ display:block; }
  .gd-legend{ font-size:.6rem; margin-top:6px; }
  /* the dock pins to the bottom of the screen, like the Zazzle tool tray */
  .gd-dockwrap{
    position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0;
    padding:8px 10px max(10px, env(safe-area-inset-bottom));
    background:#0e0e10; border-top:1px solid var(--hair);
  }
  .gd-dock{
    display:grid; grid-template-columns:repeat(4,1fr); gap:4px 2px; justify-content:stretch;
    max-height:36vh; overflow-y:auto; padding:2px 0 0;
    background:none; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .dk{ min-width:0; padding:5px 2px 5px; gap:5px; font-size:.72rem; }
  .dk svg{ width:42px; height:42px; padding:10px; }
  .gd-dock-sep{ display:none; }
  .gd-tool{ margin:0 0 8px; }
  .gd-tip{ left:6px; bottom:calc(100% + 14px); }
  /* the Add sheet slides up over the dock */
  .gd-scrim{
    display:block; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
  }
  .gd-scrim.on{ opacity:1; pointer-events:auto; }
  .gd-side{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40; margin:0;
    display:flex; flex-direction:column;
    max-height:min(84vh, 100dvh - 56px); overflow:hidden; overscroll-behavior:contain;
    border-radius:22px 22px 0 0; padding:0 14px 0;
    background:#121215; box-shadow:0 -20px 60px rgba(0,0,0,.6);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transform:translateY(104%); transition:transform .3s var(--ease); will-change:transform;
  }
  .gd-side.open{ transform:none; }
  .gd-sheet-head{
    display:flex; align-items:center; justify-content:center; position:sticky; top:0; z-index:3;
    height:38px; margin:0 -14px 4px; background:rgba(18,18,21,.99); border-radius:22px 22px 0 0;
  }
  .gd-sheet-handle{ width:44px; height:5px; border-radius:99px; background:var(--hair-2); }
  .gd-sheet-close{
    position:absolute; right:8px; top:4px; width:32px; height:32px; border-radius:999px; border:0;
    background:rgba(255,255,255,.06); color:var(--gray-3); cursor:pointer; display:grid; place-items:center;
  }
  .gd-sheet-close svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
  /* the sheet is a column: handle + tabs stay put, only the panel underneath scrolls */
  .gd-sheet-head, .gd-tabsrow{ flex:0 0 auto; }
  .gd-tabsrow{ position:static; margin:0 -4px 10px; padding:4px 0; }
  .gd-side > .ed-panel.on, .gd-side > .gd-start{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    margin:0 -14px; padding:0 14px max(18px, env(safe-area-inset-bottom));
  }
  .gd-side > .gd-start{ padding-top:4px; }
  /* search + category chips stay at the top of the scrolling panel */
  .ed-panel .gd-search, .ed-panel .gd-catsrow{ position:sticky; z-index:2; background:#121215; }
  .ed-panel .gd-search{ top:0; margin:0 0 8px; box-shadow:0 -14px 0 0 #121215; }
  .ed-panel .gd-catsrow{ top:0; margin:0 0 6px; padding:2px 0; }
  .ed-panel[data-panel="icons"] .gd-catsrow{ top:56px; }
  .ed-panel .gd-catsrow .gd-cats{ padding-bottom:6px; }
  .gd-tabs button{ min-width:70px; font-size:.7rem; padding:10px 6px 9px; }
  .gd-tab-canva{ min-width:70px; font-size:.7rem; padding:10px 6px 9px; }
  .gd-tabs button svg{ width:22px; height:22px; }
  .gd-icon-grid{ grid-template-columns:repeat(4,1fr); }
  .gd-upload-grid{ grid-template-columns:repeat(4,1fr); }
  body.gd-sheet{ overflow:hidden; }
  .gd-preview{ z-index:70; }
}
@media (max-width:420px){
  .dk{ font-size:.7rem; }
  .dk svg{ width:42px; height:42px; padding:10px; }
  .gd-done{ padding:0 14px; }
  .gd-layer{ padding:7px 8px; font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce){
  .gd-side, .gd-scrim, .gd-toast, .gd-tip{ transition:none; animation:none; }
}

/* --- category chips: sideways row with two arrows on desktop --- */
.gd-catsrow{ position:relative; display:flex; align-items:center; gap:4px; margin:0 0 6px; }
.gd-catsrow .gd-cats{ flex:1; min-width:0; margin:0; padding-bottom:6px; scroll-behavior:smooth; }
.gd-catarrow{
  flex:0 0 auto; width:30px; height:30px; margin-bottom:6px; border-radius:999px; border:1px solid var(--hair-2);
  background:rgba(255,255,255,.05); color:var(--ink); cursor:pointer; display:none; place-items:center;
  transition:background .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);
}
.gd-catarrow svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gd-catarrow:hover:not(:disabled){ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.gd-catarrow:disabled{ opacity:.25; cursor:default; }
@media (min-width:901px){
  .gd-catsrow.scrollable .gd-catarrow{ display:grid; }
}

/* --- Free Design Help: link under the card, CTA in the Describe tab, the popup --- */
.gd-help-link{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; margin-left:2px;
  border:1px solid #fff; background:#fff; color:var(--paper); cursor:pointer;
  font:700 .72rem var(--font-body); letter-spacing:.02em; text-transform:none;
  box-shadow:0 0 10px rgba(255,255,255,.55), 0 0 24px rgba(255,255,255,.28);
  transition:box-shadow .2s var(--ease), transform .15s var(--ease);
}
.gd-help-link:hover{ box-shadow:0 0 14px rgba(255,255,255,.8), 0 0 34px rgba(255,255,255,.4); transform:translateY(-1px); }
.gd-help-link:active{ transform:none; }
.gd-help-link svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-help-cta{ width:100%; margin-top:4px; }
.gd-help-cta svg{ width:18px; height:18px; margin-right:8px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gd-help-note{ margin-top:10px; text-align:center; }
.gd-help-card{ width:min(100%, 560px); }
.gd-help-card .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.gd-help-card .file-drop{ margin-bottom:14px; }
.gd-help-card #gd-help-done h2{ margin-right:0; }
#gd-help-done.hidden, #gd-help-body.hidden{ display:none; }
@media (max-width:640px){
  .gd-help-card .grid-2{ grid-template-columns:1fr; }
  .gd-legend .gd-help-link{ margin-left:0; }
}
@media (max-width:420px){
  .gd-legend .sep{ display:none; }
  .gd-legend{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; }
}