/* Product Designer storefront styles: the catalogue page, the detail modal and the designer.
   Every selector repeats its first class (.pd-x.pd-x) so it sits at specificity (0,2,0) and
   beats host-theme resets when injected into a merchant's page. No em dash anywhere. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&display=swap');

.pd-app.pd-app {
  --pd-ink: #0f172a;
  --pd-ink-2: #334155;
  --pd-muted: #64748b;
  --pd-faint: #94a3b8;
  --pd-line: #e2e8f0;
  --pd-line-2: #cbd5e1;
  --pd-bg: #ffffff;
  --pd-panel: #f8fafc;
  --pd-panel-2: #f1f5f9;
  --pd-accent: #2563eb;
  --pd-accent-soft: #eff6ff;
  --pd-accent-ink: #ffffff;
  --pd-warn: #b45309;
  --pd-warn-bg: #fffbeb;
  --pd-danger: #b91c1c;
  --pd-danger-bg: #fef2f2;
  --pd-ok: #047857;
  --pd-ok-bg: #ecfdf5;
  --pd-radius: 16px;
  --pd-radius-sm: 10px;
  --pd-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 23, 42, 0.25);
  --pd-shadow-lg: 0 24px 60px -24px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(15, 23, 42, 0.06);
  --pd-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pd-display: "Bricolage Grotesque", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-family: var(--pd-font);
  color: var(--pd-ink);
  background: var(--pd-bg);
  line-height: 1.5;
  font-size: 15px;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 56px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pd-app.pd-app *, .pd-app.pd-app *::before, .pd-app.pd-app *::after { box-sizing: inherit; }
.pd-app.pd-app button, .pd-app.pd-app input, .pd-app.pd-app select { font: inherit; color: inherit; }
.pd-app.pd-app img { max-width: 100%; display: block; }
.pd-app.pd-app h1, .pd-app.pd-app h2, .pd-app.pd-app h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--pd-ink); line-height: 1.2; }
.pd-app.pd-app h1, .pd-app.pd-app h2, .pd-app.pd-app .pd-modal-title, .pd-app.pd-app .pd-total strong, .pd-app.pd-app .pd-modal-price strong { font-family: var(--pd-display); font-weight: 700; letter-spacing: -0.025em; }
.pd-app.pd-app p { margin: 0; }
.pd-app.pd-app [hidden] { display: none !important; }
.pd-app.pd-app :focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- header and stepper */
.pd-head.pd-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 0; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--pd-line); }
.pd-head-shop.pd-head-shop { font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.pd-head-shop.pd-head-shop small { display: block; color: var(--pd-muted); font-weight: 500; font-size: 12px; }
.pd-progress.pd-progress { flex: 1; display: flex; gap: 4px; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.pd-progress.pd-progress span { flex: 0 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 8px; border-radius: 999px; color: var(--pd-faint); font-size: 13px; font-weight: 500; }
.pd-progress.pd-progress span b { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--pd-line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--pd-muted); background: var(--pd-bg); }
.pd-progress.pd-progress span em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-progress.pd-progress span.is-current { color: var(--pd-ink); font-weight: 600; }
.pd-progress.pd-progress span.is-current b { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; }
.pd-progress.pd-progress span.is-done { color: var(--pd-ink-2); cursor: pointer; }
.pd-progress.pd-progress span.is-done b { background: var(--pd-ok-bg); border-color: #a7f3d0; color: var(--pd-ok); }
.pd-progress.pd-progress span.is-done:hover { background: var(--pd-panel); }
.pd-total.pd-total { text-align: right; white-space: nowrap; }
.pd-total.pd-total strong { font-size: 20px; display: block; letter-spacing: -0.02em; font-weight: 700; }
.pd-total.pd-total small { color: var(--pd-muted); font-size: 12px; }
.pd-help.pd-help { border: 1px solid var(--pd-line); background: var(--pd-bg); border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--pd-ink-2); white-space: nowrap; transition: border-color .12s, background .12s; }
.pd-help.pd-help:hover { border-color: var(--pd-line-2); background: var(--pd-panel); }
@media (max-width: 1040px) {
  .pd-progress.pd-progress span em { display: none; }
  .pd-progress.pd-progress span.is-current em { display: inline; }
}
@media (max-width: 760px) {
  .pd-head.pd-head { flex-wrap: wrap; gap: 10px; }
  .pd-progress.pd-progress { order: 3; flex-basis: 100%; }
  .pd-progress.pd-progress span em { display: none; }
  .pd-progress.pd-progress span.is-current em { display: inline; }
}

/* ---------------------------------------------------------------- buttons, inputs, notes */
.pd-btn.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--pd-line-2); background: var(--pd-bg); border-radius: var(--pd-radius-sm); padding: 11px 18px; min-height: 44px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--pd-ink); transition: background .12s, border-color .12s, transform .12s, box-shadow .12s; }
.pd-btn.pd-btn:hover { border-color: var(--pd-ink-2); background: var(--pd-panel); }
.pd-btn.pd-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.pd-btn.pd-btn.is-primary { background: var(--pd-ink); border-color: var(--pd-ink); color: #fff; box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.6); }
.pd-btn.pd-btn.is-primary:hover { background: #1e293b; border-color: #1e293b; transform: translateY(-1px); }
.pd-btn.pd-btn.is-quiet { border-color: transparent; color: var(--pd-muted); padding-left: 8px; padding-right: 8px; box-shadow: none; }
.pd-btn.pd-btn.is-quiet:hover { color: var(--pd-ink); background: var(--pd-panel); }
.pd-btn.pd-btn.is-small { padding: 7px 12px; min-height: 34px; font-size: 13px; border-radius: 8px; }
.pd-link.pd-link { background: none; border: 0; padding: 0; color: var(--pd-accent); cursor: pointer; font-weight: 500; text-decoration: none; }
.pd-link.pd-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-row.pd-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pd-input.pd-input { border: 1px solid var(--pd-line-2); border-radius: var(--pd-radius-sm); padding: 11px 14px; min-width: 0; min-height: 44px; background: var(--pd-bg); color: var(--pd-ink); transition: border-color .12s, box-shadow .12s; }
.pd-input.pd-input::placeholder { color: var(--pd-faint); }
.pd-input.pd-input:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.pd-search.pd-search { flex: 1; min-width: 220px; padding-left: 42px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>"); background-repeat: no-repeat; background-position: 14px center; }
.pd-note.pd-note { background: var(--pd-panel); border-radius: var(--pd-radius-sm); padding: 12px 14px; color: var(--pd-muted); font-size: 14px; }
.pd-alert.pd-alert { border-radius: var(--pd-radius-sm); padding: 12px 14px; font-size: 14px; background: var(--pd-warn-bg); color: var(--pd-warn); border: 1px solid #fde68a; }
.pd-alert.pd-alert.is-info { background: var(--pd-accent-soft); color: #1e40af; border-color: #bfdbfe; }
.pd-alert.pd-alert.is-danger { background: var(--pd-danger-bg); color: var(--pd-danger); border-color: #fecaca; }
.pd-alert.pd-alert.is-ok { background: var(--pd-ok-bg); color: var(--pd-ok); border-color: #a7f3d0; }
.pd-stack.pd-stack > * + * { margin-top: 12px; }
.pd-busy.pd-busy { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(15, 23, 42, 0.12); border-top-color: var(--pd-ink); border-radius: 50%; animation: pd-spin .8s linear infinite; vertical-align: middle; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-toast.pd-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--pd-ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; z-index: 40; max-width: 90vw; box-shadow: var(--pd-shadow-lg); }
.pd-toast.pd-toast.is-error { background: var(--pd-danger); }
.pd-helppanel.pd-helppanel { position: fixed; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 40px); background: var(--pd-bg); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); box-shadow: var(--pd-shadow-lg); padding: 20px; z-index: 30; }
.pd-helppanel.pd-helppanel h3 { margin-bottom: 8px; font-size: 17px; }
.pd-setup.pd-setup { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 20px; text-align: center; }

/* ---------------------------------------------------------------- step layout */
.pd-step.pd-step { padding: 32px 0 8px; }
.pd-step-head.pd-step-head { margin-bottom: 24px; max-width: 760px; }
.pd-step-head.pd-step-head h1 { font-size: 30px; margin-bottom: 8px; }
.pd-step-head.pd-step-head p { color: var(--pd-muted); font-size: 16px; }
.pd-eyebrow.pd-eyebrow { color: var(--pd-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.pd-foot.pd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--pd-line); flex-wrap: wrap; }
.pd-foot-right.pd-foot-right { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.pd-skip.pd-skip { color: var(--pd-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; font-size: 14px; }
.pd-skip.pd-skip:hover { color: var(--pd-ink); }
.pd-tabs.pd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pd-line); margin: 12px 0 20px; overflow-x: auto; }
.pd-tab.pd-tab { border: 0; background: none; padding: 12px 16px; cursor: pointer; color: var(--pd-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.pd-tab.pd-tab.is-active { color: var(--pd-ink); border-bottom-color: var(--pd-ink); font-weight: 600; }
.pd-tab.pd-tab .pd-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pd-accent); margin-left: 6px; vertical-align: middle; }

/* ---------------------------------------------------------------- option cards (garment types, blanks) */
.pd-cards.pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pd-card.pd-card { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 14px; cursor: pointer; background: var(--pd-bg); text-align: left; transition: border-color .15s, box-shadow .15s, transform .15s; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.pd-card.pd-card:hover { border-color: var(--pd-line-2); box-shadow: var(--pd-shadow); transform: translateY(-2px); }
.pd-card.pd-card.is-selected { border-color: var(--pd-ink); box-shadow: 0 0 0 1px var(--pd-ink); }
.pd-card.pd-card strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.pd-card.pd-card span { color: var(--pd-muted); font-size: 13px; }
.pd-card.pd-card .pd-card-img { aspect-ratio: 5 / 6; border-radius: 12px; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); margin-bottom: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.pd-card.pd-card .pd-card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-card.pd-card .pd-card-img svg { width: 74%; height: 74%; }
.pd-card.pd-card.pd-type:disabled, .pd-card.pd-card.is-empty { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.pd-ribbon.pd-ribbon { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--pd-warn-bg); color: var(--pd-warn); margin-top: 6px; letter-spacing: 0.01em; }
.pd-ribbon.pd-ribbon.is-out { background: var(--pd-danger-bg); color: var(--pd-danger); }
.pd-ribbon.pd-ribbon.is-ok { background: var(--pd-ok-bg); color: var(--pd-ok); }
.pd-ribbon.pd-ribbon.is-ask { background: var(--pd-accent-soft); color: #1e40af; }
.pd-card.pd-card.is-askus .pd-card-img { opacity: 0.85; }

/* ---------------------------------------------------------------- the catalogue front page */
.pd-catalogue.pd-catalogue { padding-bottom: 24px; }
.pd-catalogue.pd-catalogue .pd-step-head h1 { font-size: 40px; letter-spacing: -0.03em; }
.pd-catalogue.pd-catalogue .pd-step-head { position: relative; padding-top: 8px; }
.pd-catalogue.pd-catalogue .pd-step-head::before { content: ""; position: absolute; left: -40px; top: -60px; width: 420px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 99, 235, 0.07), transparent); pointer-events: none; z-index: -1; }
.pd-catalogue.pd-catalogue .pd-search { min-height: 52px; font-size: 16px; border-radius: 14px; width: 100%; box-shadow: var(--pd-shadow); }
.pd-cat.pd-cat { margin-top: 52px; opacity: 0; animation: pd-rise .55s cubic-bezier(.2,.7,.2,1) forwards; }
.pd-cat.pd-cat:first-of-type { margin-top: 36px; }
.pd-cat-head.pd-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--pd-line); }
.pd-cat-title.pd-cat-title { display: flex; align-items: baseline; gap: 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--pd-ink); margin: 0; }
.pd-cat-title.pd-cat-title small { font-family: var(--pd-font); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--pd-faint); font-variant-numeric: tabular-nums; }
.pd-cat-count.pd-cat-count { font-size: 13px; color: var(--pd-muted); font-weight: 500; }
.pd-cat-all.pd-cat-all .pd-brands { margin-top: 0; }
.pd-cat-all.pd-cat-all .pd-chip em { font-style: normal; color: var(--pd-faint); font-variant-numeric: tabular-nums; }
.pd-cat-all.pd-cat-all .pd-chip.is-active em { color: rgba(255,255,255,0.7); }
@keyframes pd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pd-catalogue.pd-catalogue .pd-step-head, .pd-catalogue.pd-catalogue .pd-search { animation: pd-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.pd-catalogue.pd-catalogue .pd-search { animation-delay: 80ms; }
@media (prefers-reduced-motion: reduce) { .pd-cat.pd-cat, .pd-catalogue.pd-catalogue .pd-step-head, .pd-catalogue.pd-catalogue .pd-search { animation: none; opacity: 1; } }
.pd-brands.pd-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pd-brands.pd-brands .pd-chip { padding: 8px 14px; font-weight: 500; }
.pd-brands.pd-brands .pd-chip.is-active { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }
.pd-chips.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip.pd-chip { border: 1px solid var(--pd-line-2); border-radius: 999px; padding: 6px 12px 6px 6px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--pd-bg); font-size: 13px; font-weight: 500; color: var(--pd-ink-2); transition: border-color .12s, background .12s, color .12s; }
.pd-chip.pd-chip:hover { border-color: var(--pd-ink-2); }
.pd-chip.pd-chip.is-active, .pd-chips.pd-chips .pd-chip.is-active { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }
.pd-chip.pd-chip i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); display: inline-block; flex: none; }
.pd-chip.pd-chip.is-active i { border-color: rgba(255,255,255,0.4); }

/* ---------------------------------------------------------------- the shop page: toolbar, filters, cards */
.pd-shop.pd-shop .pd-crumbs { font-size: 13px; color: var(--pd-muted); margin-bottom: 10px; }
.pd-shop.pd-shop .pd-crumbs .pd-link { color: var(--pd-muted); }
.pd-shop.pd-shop .pd-crumbs .pd-link:hover { color: var(--pd-ink); }
.pd-shop-head.pd-shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--pd-line); }
.pd-shop-head.pd-shop-head h1 { font-size: 30px; margin: 0 0 4px; }
.pd-shop-sub.pd-shop-sub { margin: 0; color: var(--pd-muted); font-size: 14px; }
.pd-shop-tools.pd-shop-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd-shop-tools.pd-shop-tools .pd-search { width: 300px; min-width: 0; flex: none; }
.pd-sort.pd-sort { width: auto; min-width: 190px; padding-right: 32px; appearance: auto; -webkit-appearance: auto; font-weight: 500; }
.pd-filters-toggle.pd-filters-toggle { display: none; }
.pd-shop-layout.pd-shop-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; margin-top: 22px; align-items: start; }
.pd-shop-main.pd-shop-main { min-width: 0; }
.pd-shop-grid.pd-shop-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.pd-filters.pd-filters { position: sticky; top: 16px; }
.pd-filters-head.pd-filters-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--pd-line); }
.pd-filters-head.pd-filters-head strong { font-size: 15px; flex: 1; font-weight: 700; }
.pd-filters-head.pd-filters-head .pd-link { font-size: 13px; color: var(--pd-muted); }
.pd-filters-close.pd-filters-close { display: none; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--pd-muted); }
.pd-fgroup.pd-fgroup { padding: 18px 0; border-bottom: 1px solid var(--pd-line); }
.pd-fgroup.pd-fgroup h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; color: var(--pd-ink); }
.pd-fsearch.pd-fsearch { width: 100%; padding: 8px 12px; min-height: 36px; font-size: 13px; margin-bottom: 8px; border-radius: 8px; }
.pd-flist.pd-flist { max-height: 264px; overflow: auto; padding-right: 4px; }
.pd-fcheck.pd-fcheck { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 5px 0; cursor: pointer; color: var(--pd-ink-2); }
.pd-fcheck.pd-fcheck:hover { color: var(--pd-ink); }
.pd-fcheck.pd-fcheck input { margin: 0; width: 16px; height: 16px; accent-color: var(--pd-ink); flex: none; }
.pd-fcheck.pd-fcheck em { margin-left: auto; font-style: normal; color: var(--pd-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.pd-fcolours.pd-fcolours { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.pd-fcolour.pd-fcolour { display: flex; align-items: center; gap: 9px; border: 1px solid transparent; background: none; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--pd-ink-2); text-align: left; font-weight: 500; }
.pd-fcolour.pd-fcolour:hover { background: var(--pd-panel); }
.pd-fcolour.pd-fcolour i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.12); flex: none; box-shadow: inset 0 0 0 2px #fff; }
.pd-fcolour.pd-fcolour.is-on { border-color: var(--pd-ink); background: var(--pd-panel); color: var(--pd-ink); font-weight: 600; }
.pd-fsizes.pd-fsizes { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-fsize.pd-fsize { min-width: 42px; padding: 7px 9px; border: 1px solid var(--pd-line-2); border-radius: 8px; background: var(--pd-bg); font-size: 13px; font-weight: 500; cursor: pointer; color: var(--pd-ink-2); }
.pd-fsize.pd-fsize:hover { border-color: var(--pd-ink-2); }
.pd-fsize.pd-fsize.is-on { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }
.pd-fprice.pd-fprice { display: flex; align-items: center; gap: 6px; }
.pd-fprice.pd-fprice .pd-input { width: 100%; padding: 8px 10px; min-height: 36px; font-size: 13px; border-radius: 8px; }
.pd-fprice.pd-fprice span { color: var(--pd-muted); font-size: 12px; }
.pd-active.pd-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.pd-active.pd-active .pd-link { font-size: 13px; color: var(--pd-muted); margin-left: 4px; }
.pd-active-chip.pd-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--pd-ink); color: #fff; font-size: 13px; font-weight: 500; }
.pd-active-chip.pd-active-chip button { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: rgba(255,255,255,0.7); padding: 0 2px; }
.pd-active-chip.pd-active-chip button:hover { color: #fff; }
.pd-card.pd-card.pd-blank { padding: 12px 12px 16px; }
.pd-card.pd-card.pd-blank .pd-card-img { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid var(--pd-line); }
.pd-card.pd-card.pd-blank .pd-card-flag { position: absolute; top: 10px; left: 10px; }
.pd-card.pd-card.pd-blank .pd-card-flag .pd-ribbon { margin: 0; backdrop-filter: blur(4px); }
.pd-card.pd-card.pd-blank .pd-blank-brand { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pd-muted); margin-bottom: 4px; }
.pd-card.pd-card.pd-blank strong { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-card.pd-card.pd-blank .pd-blank-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--pd-muted); }
.pd-card.pd-card .pd-blank-name { display: block; line-height: 1.3; }
.pd-card.pd-card .pd-price { display: block; color: var(--pd-ink); font-weight: 700; font-size: 15px; margin-top: 10px; letter-spacing: -0.01em; }
.pd-fams.pd-fams { display: inline-flex; gap: 3px; }
.pd-fams.pd-fams i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.12); display: inline-block; }
.pd-empty.pd-empty { padding: 56px 20px; text-align: center; border: 1px dashed var(--pd-line-2); border-radius: var(--pd-radius); }
.pd-empty.pd-empty strong { display: block; margin-bottom: 6px; font-size: 16px; }
.pd-empty.pd-empty span { color: var(--pd-muted); font-size: 14px; }
.pd-more.pd-more { margin-top: 24px; }
@media (max-width: 860px) {
  .pd-shop-layout.pd-shop-layout { grid-template-columns: 1fr; gap: 20px; }
  .pd-filters-toggle.pd-filters-toggle { display: inline-flex; }
  .pd-filters.pd-filters { display: none; position: fixed; inset: 0; z-index: 10000; background: var(--pd-bg); padding: 20px; overflow: auto; }
  .pd-shop-layout.pd-shop-layout.filters-open .pd-filters { display: block; }
  .pd-filters-close.pd-filters-close { display: inline-block; }
  .pd-shop-tools.pd-shop-tools .pd-search { width: auto; min-width: 0; flex: 1; }
  .pd-shop-head.pd-shop-head h1, .pd-step-head.pd-step-head h1, .pd-catalogue.pd-catalogue .pd-step-head h1 { font-size: 26px; }
}

/* ---------------------------------------------------------------- the detail modal */
.pd-app.pd-app.pd-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 20px; max-width: none; margin: 0; background: transparent; }
.pd-modal-lock { overflow: hidden !important; }
.pd-modal.pd-modal .pd-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(3px); }
.pd-modal.pd-modal .pd-modal-box { position: relative; background: var(--pd-bg); border-radius: 22px; width: min(1080px, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 28px; padding: 28px; box-shadow: var(--pd-shadow-lg); }
@media (max-width: 820px) { .pd-modal.pd-modal .pd-modal-box { grid-template-columns: 1fr; padding: 18px; border-radius: 18px; } }
.pd-modal.pd-modal .pd-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pd-line); background: var(--pd-bg); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; color: var(--pd-ink-2); transition: background .12s; }
.pd-modal.pd-modal .pd-modal-close:hover { background: var(--pd-panel); }
.pd-modal.pd-modal .pd-modal-main { aspect-ratio: 4 / 5; border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid var(--pd-line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-modal.pd-modal .pd-modal-main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-modal.pd-modal .pd-modal-noimg { color: var(--pd-muted); }
.pd-modal.pd-modal .pd-modal-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pd-modal.pd-modal .pd-modal-thumb { width: 54px; height: 64px; border: 1px solid var(--pd-line); border-radius: 10px; padding: 0; overflow: hidden; background: var(--pd-panel); cursor: pointer; transition: border-color .12s; }
.pd-modal.pd-modal .pd-modal-thumb:hover { border-color: var(--pd-ink-2); }
.pd-modal.pd-modal .pd-modal-thumb.is-active { border-color: var(--pd-ink); box-shadow: 0 0 0 1px var(--pd-ink); }
.pd-modal.pd-modal .pd-modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-modal.pd-modal .pd-modal-body { display: flex; flex-direction: column; gap: 14px; }
.pd-modal.pd-modal .pd-modal-body .pd-eyebrow { margin-bottom: 0; }
.pd-modal.pd-modal .pd-modal-title { font-size: 24px; }
.pd-modal.pd-modal .pd-modal-price strong { display: block; font-size: 22px; letter-spacing: -0.02em; }
.pd-modal.pd-modal .pd-modal-price span { color: var(--pd-muted); font-size: 13px; }
.pd-modal.pd-modal .pd-modal-desc { color: var(--pd-muted); font-size: 14px; line-height: 1.55; }
.pd-modal.pd-modal .pd-modal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pd-modal.pd-modal .pd-fact { background: var(--pd-panel); border-radius: 12px; padding: 12px 14px; }
.pd-modal.pd-modal .pd-fact span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pd-muted); margin-bottom: 2px; }
.pd-modal.pd-modal .pd-fact strong { font-size: 14px; font-weight: 600; }
.pd-modal.pd-modal .pd-modal-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-modal.pd-modal .pd-modal-swatch { width: 34px; height: 34px; border: 1px solid rgba(15,23,42,0.1); border-radius: 50%; padding: 0; overflow: hidden; background: var(--pd-panel); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; transition: transform .12s, box-shadow .12s; }
.pd-modal.pd-modal .pd-modal-swatch:hover { transform: scale(1.08); }
.pd-modal.pd-modal .pd-modal-swatch img { width: 100%; height: 100%; object-fit: cover; }
.pd-modal.pd-modal .pd-modal-swatch i { display: block; width: 100%; height: 100%; }
.pd-modal.pd-modal .pd-modal-swatch.is-out { opacity: 0.3; }
.pd-modal.pd-modal .pd-modal-swatch.is-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--pd-ink); }
.pd-modal.pd-modal .pd-modal-swatches .pd-note { padding: 6px 10px; font-size: 12px; border-radius: 999px; }
.pd-modal.pd-modal .pd-guide-wrap { border: 1px solid var(--pd-line); border-radius: 12px; overflow: hidden; }
.pd-modal.pd-modal .pd-guide { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-modal.pd-modal .pd-guide th, .pd-modal.pd-modal .pd-guide td { padding: 9px 12px; border-bottom: 1px solid var(--pd-line); text-align: left; }
.pd-modal.pd-modal .pd-guide tr:last-child td { border-bottom: 0; }
.pd-modal.pd-modal .pd-guide th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pd-muted); background: var(--pd-panel); }
.pd-modal.pd-modal .pd-guide td { font-variant-numeric: tabular-nums; }
.pd-modal.pd-modal .pd-guide td:first-child { font-weight: 600; }
.pd-modal.pd-modal .pd-guide-wrap .pd-note { margin: 0; font-size: 12px; border-radius: 0; background: var(--pd-panel); border-top: 1px solid var(--pd-line); }
.pd-modal.pd-modal .pd-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.pd-modal.pd-modal .pd-select { font-size: 15px; padding: 13px 26px; }

/* ---------------------------------------------------------------- colours */
.pd-swatches.pd-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.pd-swatch.pd-swatch { border: 1px solid var(--pd-line); border-radius: 14px; padding: 8px; cursor: pointer; background: var(--pd-bg); text-align: left; position: relative; transition: border-color .12s, box-shadow .12s, transform .12s; }
.pd-swatch.pd-swatch:hover { border-color: var(--pd-line-2); box-shadow: var(--pd-shadow); transform: translateY(-1px); }
.pd-swatch.pd-swatch.is-selected { border-color: var(--pd-ink); box-shadow: 0 0 0 1px var(--pd-ink); }
.pd-swatch.pd-swatch img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; background: var(--pd-panel); width: 100%; }
.pd-swatch.pd-swatch .pd-swatch-tile { border-radius: 9px; }
.pd-swatch.pd-swatch .pd-swatch-name { display: block; font-size: 12.5px; font-weight: 500; margin-top: 8px; line-height: 1.3; color: var(--pd-ink-2); }
.pd-swatch.pd-swatch .pd-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--pd-ink); color: #fff; font-size: 12px; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.pd-swatch.pd-swatch.is-selected .pd-check { display: flex; }
.pd-swatch.pd-swatch .pd-swatch-warn { position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--pd-warn); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.pd-swatch.pd-swatch .pd-ribbon { margin-top: 4px; }

/* ---------------------------------------------------------------- artwork: doors, canvas, guided */
.pd-doors.pd-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.pd-door.pd-door { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 26px 26px 24px; text-align: left; cursor: pointer; background: var(--pd-bg); transition: border-color .15s, box-shadow .15s, transform .15s; position: relative; }
.pd-door.pd-door:hover { border-color: var(--pd-ink); box-shadow: var(--pd-shadow); transform: translateY(-2px); }
.pd-door.pd-door strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.pd-door.pd-door span { color: var(--pd-muted); font-size: 14px; line-height: 1.5; }
.pd-door.pd-door em { display: block; width: max-content; margin-top: 18px; color: var(--pd-ink); font-style: normal; font-weight: 600; font-size: 14px; border-bottom: 1.5px solid var(--pd-ink); padding-bottom: 1px; }
.pd-door.pd-door em::after { content: "  \2192"; white-space: pre; }
.pd-door.pd-door::before { content: ""; display: block; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; background-color: var(--pd-panel); background-repeat: no-repeat; background-position: center; background-size: 22px; }
.pd-door.pd-door:nth-child(1)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 4 5 5L8 21H3v-5Z'/><path d='m14 6 4 4'/><path d='M5 3v3M3.5 4.5h3M19 14v3M17.5 15.5h3'/></svg>"); }
.pd-door.pd-door:nth-child(2)::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M3 15l5-5 4 4 3-3 6 6'/><circle cx='16' cy='8' r='1.5'/></svg>"); }
.pd-studio.pd-studio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 24px; align-items: start; }
@media (max-width: 820px) { .pd-studio.pd-studio { grid-template-columns: 1fr; } }
.pd-studio.pd-studio h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pd-ink); margin: 6px 0 10px; }
.pd-studio.pd-studio h3:first-child { margin-top: 0; }
.pd-canvas-wrap.pd-canvas-wrap { position: relative; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 16px; }
.pd-canvas.pd-canvas { position: relative; width: 100%; aspect-ratio: 5 / 6; user-select: none; touch-action: none; }
.pd-canvas-scroll.pd-canvas-scroll { border-radius: 10px; }
.pd-canvas-wrap.pd-canvas-wrap.is-zoomed .pd-canvas-scroll { max-height: 78vh; overflow: auto; overscroll-behavior: contain; }
.pd-zoom.pd-zoom { position: absolute; top: 10px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--pd-line); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); backdrop-filter: blur(6px); }
.pd-zoom.pd-zoom button { width: 28px; height: 28px; border-radius: 999px; border: 0; background: transparent; color: var(--pd-ink); font: 600 16px/1 var(--pd-font); cursor: pointer; }
.pd-zoom.pd-zoom button:hover:not(:disabled) { background: var(--pd-panel, #f1f5f9); }
.pd-zoom.pd-zoom button:disabled { opacity: 0.35; cursor: default; }
.pd-zoom.pd-zoom button.pd-zoom-fit { width: auto; padding: 0 10px; font-size: 12px; }
.pd-zoom.pd-zoom span { min-width: 42px; text-align: center; font-size: 12px; font-weight: 600; color: var(--pd-ink-2, #475569); }
.pd-canvas.pd-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd-canvas.pd-canvas.is-photo { background: #fff; border-radius: 10px; overflow: hidden; }
.pd-canvas.pd-canvas .pd-stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.pd-canvas.pd-canvas.is-photo .pd-zone { border: 1.5px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35), inset 0 0 0 1px rgba(15, 23, 42, 0.35); }
.pd-canvas.pd-canvas.is-photo .pd-zone.is-filled { border-style: dashed; }
.pd-canvas.pd-canvas .pd-free { border: 1.5px dashed rgba(15, 23, 42, 0.35); box-shadow: none; opacity: 0; transition: opacity .15s; border-radius: 4px; }
.pd-canvas.pd-canvas.is-photo .pd-free { border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.3), inset 0 0 0 1px rgba(15, 23, 42, 0.3); }
.pd-canvas.pd-canvas.is-dragging .pd-free { opacity: 1; }
.pd-zone.pd-zone { position: absolute; border: 1px dashed rgba(15, 23, 42, 0.28); pointer-events: none; border-radius: 2px; transition: border-color .12s, box-shadow .12s; }
.pd-zone.pd-zone.is-active { border: 1.5px dashed var(--pd-accent); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), inset 0 0 0 200px rgba(37, 99, 235, 0.06); }
.pd-zone.pd-zone.is-filled { border-style: solid; border-color: rgba(15, 23, 42, 0.18); }
.pd-zone-label.pd-zone-label { position: absolute; left: -1px; top: -24px; font-size: 11px; font-weight: 600; color: var(--pd-ink); white-space: nowrap; background: rgba(255,255,255,0.92); border: 1px solid var(--pd-line); border-radius: 999px; padding: 2px 8px; opacity: 0; transition: opacity .12s; }
.pd-zone.pd-zone.is-active .pd-zone-label, .pd-zone.pd-zone.is-filled .pd-zone-label { opacity: 1; }
.pd-zone.pd-zone.is-active .pd-zone-label { color: var(--pd-accent); border-color: rgba(37, 99, 235, 0.35); }
.pd-canvas.pd-canvas:hover .pd-zone .pd-zone-label { opacity: 1; }
.pd-art.pd-art { position: absolute; cursor: grab; outline: 1px solid transparent; }
.pd-art.pd-art img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.pd-art.pd-art.is-active { outline: 1.5px solid var(--pd-accent); }
.pd-art.pd-art.is-outside { outline: 2px solid var(--pd-warn); }
.pd-art.pd-art.is-locked { cursor: default; }
.pd-art.pd-art.is-locked .pd-handle { display: none; }
.pd-handle.pd-handle { position: absolute; width: 16px; height: 16px; right: -8px; bottom: -8px; background: var(--pd-bg); border: 2px solid var(--pd-accent); border-radius: 50%; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(15,23,42,0.2); }
.pd-dpi.pd-dpi { position: absolute; left: 0; bottom: -24px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--pd-ok-bg); color: var(--pd-ok); white-space: nowrap; border: 1px solid #a7f3d0; }
.pd-dpi.pd-dpi.is-low { background: var(--pd-warn-bg); color: var(--pd-warn); border-color: #fde68a; }
.pd-drop.pd-drop { display: block; border: 1.5px dashed var(--pd-line-2); border-radius: var(--pd-radius); padding: 28px 22px 26px 22px; text-align: center; color: var(--pd-muted); cursor: pointer; font-weight: 400; margin: 0; line-height: 1.5; background: var(--pd-bg); transition: border-color .12s, background .12s; position: relative; }
.pd-drop.pd-drop::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--pd-panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4'/><path d='m6 10 6-6 6 6'/><path d='M4 20h16'/></svg>") center / 22px no-repeat; }
.pd-drop.pd-drop:hover { border-color: var(--pd-ink-2); background: var(--pd-panel); }
.pd-drop.pd-drop strong { display: block; color: var(--pd-ink); margin-bottom: 4px; font-weight: 600; }
.pd-drop.pd-drop span { font-size: 13px; }
.pd-drop.pd-drop.is-over { border-color: var(--pd-accent); background: var(--pd-accent-soft); }
.pd-drop.pd-drop input { display: none; }
.pd-artlist.pd-artlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.pd-artthumb.pd-artthumb { border: 1px solid var(--pd-line); border-radius: 10px; padding: 5px; cursor: pointer; background: repeating-conic-gradient(#eef2f7 0 25%, #fff 0 50%) 0 0 / 12px 12px; position: relative; transition: border-color .12s; }
.pd-artthumb.pd-artthumb:hover { border-color: var(--pd-ink-2); }
.pd-artthumb.pd-artthumb img { aspect-ratio: 1; object-fit: contain; }
.pd-artthumb.pd-artthumb .pd-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--pd-ink); color: #fff; border: 2px solid #fff; font-size: 12px; cursor: pointer; line-height: 1; }
.pd-views.pd-views { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.pd-colourbar.pd-colourbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-mock.pd-mock { border-radius: var(--pd-radius); overflow: hidden; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); border: 1px solid var(--pd-line); aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; color: var(--pd-muted); font-size: 13px; }
.pd-mock.pd-mock img { width: 100%; height: 100%; object-fit: contain; }
.pd-methods.pd-methods { margin-top: 24px; }
.pd-methods.pd-methods .pd-card { padding: 18px 20px; }
.pd-methods.pd-methods .pd-card strong { font-size: 16px; }

/* ---------------------------------------------------------------- sizes */
.pd-matrix-wrap.pd-matrix-wrap { overflow-x: auto; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); background: var(--pd-bg); }
.pd-matrix.pd-matrix { border-collapse: collapse; width: 100%; min-width: 560px; }
.pd-matrix.pd-matrix th, .pd-matrix.pd-matrix td { padding: 10px 10px; border-bottom: 1px solid var(--pd-line); text-align: center; font-size: 14px; }
.pd-matrix.pd-matrix th { background: var(--pd-panel); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pd-muted); }
.pd-matrix.pd-matrix td:first-child, .pd-matrix.pd-matrix th:first-child { text-align: left; white-space: nowrap; padding-left: 16px; }
.pd-matrix.pd-matrix input { width: 62px; text-align: center; border: 1px solid var(--pd-line-2); border-radius: 8px; padding: 8px 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-matrix.pd-matrix input:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.pd-matrix.pd-matrix .pd-cell-stock { display: block; font-size: 10px; color: var(--pd-faint); margin-top: 3px; }
.pd-matrix.pd-matrix .pd-cell-stock.is-low { color: var(--pd-warn); }
.pd-matrix.pd-matrix .pd-cell-stock.is-out { color: var(--pd-danger); }
.pd-matrix.pd-matrix .pd-rowtotal, .pd-matrix.pd-matrix .pd-grandtotal { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-matrix.pd-matrix tfoot td { font-weight: 700; background: var(--pd-panel); }
.pd-sizes-feedback.pd-sizes-feedback { margin-top: 14px; }
.pd-ladder.pd-ladder { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pd-ladder.pd-ladder span { font-size: 12px; border: 1px solid var(--pd-line-2); border-radius: 999px; padding: 4px 10px; color: var(--pd-muted); background: var(--pd-bg); }
.pd-ladder.pd-ladder span.is-selected { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- review */
.pd-review.pd-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); gap: 28px; align-items: start; }
@media (max-width: 820px) { .pd-review.pd-review { grid-template-columns: 1fr; } }
.pd-review.pd-review h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.pd-gallery.pd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.pd-gallery.pd-gallery figure { margin: 0; }
.pd-gallery.pd-gallery img { border-radius: 12px; border: 1px solid var(--pd-line); background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }
.pd-gallery.pd-gallery figcaption { font-size: 12px; color: var(--pd-muted); margin-top: 6px; font-weight: 500; }
.pd-summary.pd-summary { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 22px; position: sticky; top: 84px; background: var(--pd-bg); box-shadow: var(--pd-shadow); }
.pd-summary.pd-summary h3 { font-size: 16px; text-transform: none; letter-spacing: -0.01em; margin-bottom: 12px; }
.pd-summary.pd-summary table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pd-summary.pd-summary td { padding: 7px 0; vertical-align: top; color: var(--pd-ink-2); }
.pd-summary.pd-summary td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pd-ink); }
.pd-summary.pd-summary tr.is-total td { border-top: 1px solid var(--pd-line); font-weight: 700; padding-top: 12px; font-size: 17px; color: var(--pd-ink); }
.pd-summary.pd-summary tr.is-deposit td { color: var(--pd-accent); font-weight: 700; }
.pd-summary.pd-summary .pd-fine { color: var(--pd-muted); font-size: 12px; margin-top: 14px; line-height: 1.5; }
.pd-summary.pd-summary .pd-btn.is-primary { width: 100%; margin-top: 16px; min-height: 50px; font-size: 15px; }
.pd-summary.pd-summary .pd-skip { display: block; margin: 12px auto 0; }
.pd-card.pd-card.pd-blank { display: flex; flex-direction: column; }
.pd-card.pd-card.pd-blank .pd-price { margin-top: auto; padding-top: 10px; }
.pd-zone.pd-zone { outline: 1px dashed rgba(255, 255, 255, 0.55); outline-offset: -2px; }
.pd-zone.pd-zone.is-active { outline-color: rgba(255, 255, 255, 0.75); }
.pd-mock.pd-mock:not(:has(img)) { aspect-ratio: auto; padding: 44px 20px; }
/* garment type photographs: the blank floats on the card surface, the white of the photo blends away */
.pd-card.pd-card.pd-type .pd-card-img.is-photo { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%); padding: 10%; }
.pd-card.pd-card.pd-type .pd-card-img.is-photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pd-card.pd-card.pd-type:hover .pd-card-img.is-photo img { transform: scale(1.04); }

/* the guided artwork panel: numbered steps, spot tiles, a segmented size control, the preview card */
.pd-gstep.pd-gstep { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.pd-gstep.pd-gstep b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pd-ink); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-2px); }
.pd-gstep.pd-gstep h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; margin: 0; }
.pd-gstep.pd-gstep span { margin-left: auto; font-size: 12px; color: var(--pd-muted); }
.pd-spots.pd-spots { display: flex; flex-direction: column; gap: 12px; }
.pd-spot-group.pd-spot-group h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pd-faint); }
.pd-spot-grid.pd-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pd-spot.pd-spot { position: relative; text-align: left; border: 1px solid var(--pd-line); border-radius: 10px; padding: 9px 12px; background: var(--pd-bg); cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.pd-spot.pd-spot:hover { border-color: var(--pd-ink-2); transform: translateY(-1px); }
.pd-spot.pd-spot strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.pd-spot.pd-spot span { display: block; font-size: 12px; color: var(--pd-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pd-spot.pd-spot i { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--pd-ok-bg); color: var(--pd-ok); font-style: normal; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pd-spot.pd-spot.is-active { border-color: var(--pd-ink); background: var(--pd-ink); color: #fff; }
.pd-spot.pd-spot.is-active span { color: rgba(255,255,255,0.7); }
.pd-spot.pd-spot.is-active i { background: rgba(255,255,255,0.18); color: #fff; }
.pd-seg.pd-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--pd-panel-2); }
.pd-seg-btn.pd-seg-btn { border: 0; border-radius: 9px; padding: 8px 10px; background: transparent; cursor: pointer; text-align: center; color: var(--pd-ink-2); transition: background .12s, color .12s, box-shadow .12s; }
.pd-seg-btn.pd-seg-btn strong { display: block; font-size: 13px; font-weight: 600; }
.pd-seg-btn.pd-seg-btn span { display: block; font-size: 11px; color: var(--pd-muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.pd-seg-btn.pd-seg-btn:hover { background: rgba(255,255,255,0.6); }
.pd-seg-btn.pd-seg-btn.is-active { background: var(--pd-bg); color: var(--pd-ink); box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 0 0 1px var(--pd-line); }
.pd-seg-btn.pd-seg-btn.is-active span { color: var(--pd-muted); }
.pd-previewcard.pd-previewcard { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 14px; background: var(--pd-bg); }
.pd-previewcard-head.pd-previewcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pd-previewcard-head.pd-previewcard-head strong { font-size: 14px; font-weight: 700; }
.pd-previewcard.pd-previewcard .pd-note { margin-top: 10px; font-size: 13px; }
.pd-previewcard.pd-previewcard .pd-mock { margin-top: 12px; }
.pd-zone.pd-zone.is-pickable { pointer-events: auto; cursor: pointer; }
.pd-zone.pd-zone.is-pickable:hover { border-color: var(--pd-accent); box-shadow: inset 0 0 0 200px rgba(37, 99, 235, 0.05); }
.pd-zone.pd-zone.is-pickable:hover .pd-zone-label { opacity: 1; }
.pd-views.pd-views .pd-btn.is-small { border-radius: 999px; }
.pd-studio.pd-studio .pd-stack > .pd-stack { gap: 0; }
.pd-seg.pd-seg { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
@media (min-width: 821px) { .pd-studio.pd-studio > div:first-child { position: sticky; top: 84px; } }

/* ---------------------------------------------------------------- review: where does it ship */
.pd-ship.pd-ship { border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 18px 20px; background: var(--pd-panel); margin: 0 0 16px; }
.pd-ship.pd-ship h2 { margin-bottom: 4px; }
.pd-ship.pd-ship .pd-note { background: none; border: 0; padding: 0; margin: 0 0 12px; color: var(--pd-muted); }
.pd-ship.pd-ship .pd-select { min-width: 150px; padding-right: 30px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.pd-ship.pd-ship .pd-input, .pd-ship.pd-ship .pd-select { min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--pd-line-2); border-radius: var(--pd-radius-sm); background: var(--pd-bg); font: inherit; }
.pd-ship.pd-ship .pd-input:focus, .pd-ship.pd-ship .pd-select:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.pd-summary.pd-summary .pd-link { color: var(--pd-accent); font-weight: 600; text-decoration: none; font-size: 13px; }
.pd-summary.pd-summary .pd-link:hover { text-decoration: underline; }
.pd-ship-options.pd-ship-options { display: grid; gap: 6px; }
.pd-ship-opt.pd-ship-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--pd-line); border-radius: var(--pd-radius-sm); background: var(--pd-bg); cursor: pointer; font-size: 14px; }
.pd-ship-opt.pd-ship-opt.is-on { border-color: var(--pd-ink); }
.pd-ship-opt.pd-ship-opt input { margin: 0; accent-color: var(--pd-ink); }
.pd-ship-opt.pd-ship-opt .pd-ship-name { flex: 1; }
.pd-ship-opt.pd-ship-opt .pd-ship-price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Removing artwork: a Remove button per piece on this side, a cross on the selected artwork, and
   the selected artwork's own Remove, all in the danger colour so they can be found */
.pd-btn.pd-btn.is-remove { color: var(--pd-danger); border-color: #fecaca; background: #fff; box-shadow: none; }
.pd-btn.pd-btn.is-remove:hover { background: var(--pd-danger-bg); border-color: var(--pd-danger); }
.pd-placed.pd-placed { display: flex; flex-direction: column; gap: 8px; }
.pd-placed.pd-placed h3 { margin: 0; }
.pd-placed-row.pd-placed-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--pd-line); border-radius: 10px; background: #fff; cursor: pointer; }
.pd-placed-row.pd-placed-row.is-active { border-color: var(--pd-accent); box-shadow: 0 0 0 1px var(--pd-accent); }
.pd-placed-row.pd-placed-row img, .pd-placed-ext.pd-placed-ext { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; border-radius: 6px; background: repeating-conic-gradient(#eef2f7 0 25%, #fff 0 50%) 0 0 / 10px 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--pd-muted); }
.pd-placed-name.pd-placed-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; }
.pd-placed-name.pd-placed-name span { color: var(--pd-muted); font-size: 12px; }
.pd-art-x.pd-art-x { position: absolute; top: -12px; right: -12px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--pd-danger); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: none; place-items: center; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3); z-index: 3; }
.pd-art.pd-art.is-active .pd-art-x, .pd-art.pd-art.is-locked .pd-art-x { display: grid; }

/* Uploading: the drop zone becomes a spinner, the file name, a bar and the percentage sent */
.pd-drop.pd-drop.is-busy { cursor: default; background: var(--pd-panel); }
.pd-drop.pd-drop.is-busy::before { display: none; }
.pd-drop.pd-drop.is-busy .pd-busy { display: block; width: 30px; height: 30px; border-width: 3px; margin: 2px auto 14px; }
.pd-drop-bar.pd-drop-bar { height: 6px; max-width: 280px; margin: 12px auto 8px; border-radius: 999px; background: var(--pd-line); overflow: hidden; }
.pd-drop-bar.pd-drop-bar i { display: block; height: 100%; width: 0; background: var(--pd-ink); border-radius: 999px; transition: width .2s ease; }
.pd-drop-state.pd-drop-state { font-size: 13px; font-variant-numeric: tabular-nums; }


/* Embroidery: "I already have a digitised stitch file" on the sizes step (product-designer.js ownFileBox) */
.pd-own-file.pd-own-file { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 14px 16px; border: 1.5px solid var(--pd-line); border-radius: var(--pd-radius-sm); background: var(--pd-bg); cursor: pointer; }
.pd-own-file.pd-own-file:hover { border-color: var(--pd-line-2); }
.pd-own-file.pd-own-file input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pd-ink); cursor: pointer; }
.pd-own-file.pd-own-file span { color: var(--pd-muted); font-size: 13.5px; line-height: 1.5; }
.pd-own-file.pd-own-file strong { display: block; margin: 0 0 2px; color: var(--pd-ink); font-size: 15px; }