/* Product shell shared by the working workshop, local wardrobe and service doors. */
body.product-page { --product-ink:#1f3a5f; --product-paper:#faf8f2; --product-line:#d9d9d1; --product-accent:#8f2038; margin:0; color:var(--product-ink); background:var(--product-paper); font-family:Helvetica,Arial,sans-serif; }
body.product-page * { box-sizing:border-box; }
body.product-page :is(a,button,input,select,textarea):focus-visible { outline:3px solid #8f2038; outline-offset:4px; }
body.product-page .product-main { width:min(1180px,100%); margin:0 auto; padding:56px 32px 80px; }
body.product-page .product-eyebrow { margin:0 0 14px; color:var(--product-accent); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
body.product-page .product-title { margin:0 0 20px; font-family:'Didot','Bodoni 72',Georgia,serif; font-size:clamp(32px,5vw,58px); font-weight:400; line-height:1.08; letter-spacing:-1px; }
body.product-page .product-lead { max-width:64ch; font-size:17px; line-height:1.7; margin:0 0 28px; }
body.product-page .product-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr); gap:24px; align-items:start; }
body.product-page .product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:22px; margin:28px 0; }
body.product-page .product-card { min-width:0; padding:28px; border:1px solid var(--product-line); background:#fff; }
body.product-page .product-card h2 { margin:0 0 14px; font-family:'Didot','Bodoni 72',Georgia,serif; font-size:28px; font-weight:400; }
body.product-page .product-card p { font-size:15px; line-height:1.7; }
body.product-page .product-status { display:inline-block; border:1px dashed #bcb5ae; padding:7px 11px; margin:0 0 18px; font-size:12px; line-height:1.5; color:#684551; background:#faf6f2; }
body.product-page .product-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
/* Fallback look for product pages that do not load shared-button.css yet (account.html); the signature itself lives there. */
body.product-page .product-button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 19px; border:1px solid var(--product-ink); background:var(--product-ink); color:white; font-size:14px; font-family:inherit; text-decoration:none; cursor:pointer; line-height:1.4; }
body.product-page .product-button:visited { color:white; }
body.product-page .product-button.secondary { color:var(--product-ink); background:transparent; }
body.product-page .product-button:disabled { opacity:.55; cursor:default; }
body.product-page .product-meta { color:#586579; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
body.product-page .product-empty { padding:36px; border:1px dashed #a9afb5; background:#fff; }
body.product-page .product-preview { width:100%; min-height:220px; display:block; object-fit:contain; background:#fbfaf7; }
body.product-page .product-result { min-width:0; margin-top:24px; }
body.product-page .product-error { color:#801e34; border-left:3px solid #8f2038; padding:12px 16px; background:#fff1f2; line-height:1.6; }
body.product-page .product-note { border-top:1px solid var(--product-line); padding-top:22px; margin-top:32px; max-width:72ch; font-size:14px; line-height:1.7; }
body.product-page .product-footer { padding:24px 32px; border-top:1px solid var(--product-line); font-size:12px; line-height:1.7; }
/* Wardrobe: unfinished device-local drafts sit between the create action and saved designs. */
body.product-page .product-drafts { margin:40px 0 0; padding:28px 0; border-top:1px solid var(--product-line); border-bottom:1px solid var(--product-line); }
body.product-page .product-drafts[hidden] { display:none; }
body.product-page .product-drafts .product-grid { margin:22px 0 0; }
body.product-page .product-section-title { margin:0 0 8px; font-family:'Didot','Bodoni 72',Georgia,serif; font-size:clamp(22px,3vw,28px); font-weight:400; line-height:1.2; }
body.product-page .product-section-note { margin:0; max-width:72ch; font-size:14px; line-height:1.7; }
body.product-page .product-draft-card { border-style:dashed; border-color:#bcb5ae; }
body.product-page .product-draft-title { margin:0 0 14px; font-family:'Didot','Bodoni 72',Georgia,serif; font-size:20px; font-weight:400; line-height:1.35; overflow-wrap:anywhere; }
body.product-page .product-draft-thumb { display:block; width:auto; max-width:100%; height:auto; max-height:160px; object-fit:contain; margin:0 0 14px; border:1px solid var(--product-line); background:#fbfaf7; }
body.product-page .product-draft-card .product-status { max-width:100%; overflow-wrap:anywhere; }
body.product-page .product-draft-detail { margin-top:4px; }
body.product-page .product-draft-detail summary { cursor:pointer; font-size:13px; line-height:1.4; padding:12px 0; }
body.product-page .product-draft-detail pre { margin:4px 0 0; max-width:100%; overflow-wrap:anywhere; font-family:ui-monospace,Menlo,monospace; }
@media(max-width:760px) {
  body.product-page .product-main { padding:36px 20px 56px; }
  body.product-page .product-layout { grid-template-columns:minmax(0,1fr); }
  body.product-page .product-card, body.product-page .product-empty { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { body.product-page *, body.product-page *::before, body.product-page *::after { animation:none!important; transition:none!important; } }
body.product-page #screen > .product-section-title { margin-top:40px; }
body.product-page footer .wrap { padding-left:32px; padding-right:32px; }
@media(max-width:760px) { body.product-page footer .wrap { padding-left:20px; padding-right:20px; } }
body.product-page .product-select { min-height:46px; min-width:140px; max-width:100%; padding:10px 12px; border:1px solid var(--product-ink); background:#fff; color:var(--product-ink); font:15px/1.4 Helvetica,Arial,sans-serif; }
body.product-page .product-button.secondary[aria-pressed="true"] { background:var(--product-ink); color:white; }
body.product-page .product-compare-panel { margin-top:18px; }
body.product-page .product-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
body.product-page .product-compare-side { min-width:0; border-top:1px solid var(--product-line); padding-top:12px; }
body.product-page .product-compare-side h4 { margin:0 0 4px; font-size:15px; }
/* Compare: each drawing at its real proportion (width set in % of the wider one), no letterbox. */
body.product-page .product-compare .product-preview { min-height:0; height:auto; aspect-ratio:auto; object-fit:fill; background:none; align-self:flex-start; }
body.product-page .product-compare-summary { margin:16px 0 4px; font-size:14px; line-height:1.6; }
body.product-page .product-compare-facts { margin:8px 0 12px; font-size:13px; line-height:1.5; }
body.product-page .product-compare-facts > div { display:grid; grid-template-columns:minmax(0,8em) minmax(0,1fr); gap:8px; padding:4px 0; border-bottom:1px solid var(--product-line); }
body.product-page .product-compare-facts dt { color:#586579; }
body.product-page .product-compare-facts dd { margin:0; overflow-wrap:break-word; }
/* Phone: two narrow columns, so each fact stacks its label over its value instead of splitting words. */
@media(max-width:760px) { body.product-page .product-compare-facts > div { grid-template-columns:minmax(0,1fr); gap:0; } }
/* Technical record: plain facts, no reading dump. */
body.product-page .product-technical { margin-top:24px; }
body.product-page .product-technical-list { margin:10px 0 0; font-size:13px; line-height:1.6; }
body.product-page .product-technical-list > div { display:grid; grid-template-columns:minmax(0,10em) minmax(0,1fr); gap:10px; padding:4px 0; }
body.product-page .product-technical-list dt { color:#586579; }
body.product-page .product-technical-list dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:760px) { body.product-page .product-compare { gap:10px; } }
body.product-page .product-compare-pick { display:inline-flex; align-items:center; gap:8px; }
/* Wardrobe account strip: one visible state at a time (data-account = checking | still-checking | signed-out |
   signed-in | unavailable | absent); the account area never disappears silently. */
body.product-page .product-account-strip { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:20px; max-width:72ch; padding:14px 16px; border:1px solid var(--product-line); background:#fff; }
body.product-page .product-account-strip[hidden] { display:none; }
/* Message and an invisible sizer share one grid cell: the box is as tall as the larger of the two. */
body.product-page .product-account-body { display:grid; flex:1 1 280px; min-width:0; }
body.product-page .product-account-body > p { grid-area:1/1; margin:0; min-width:0; color:var(--product-ink); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
body.product-page .product-account-sizer { visibility:hidden; }
body.product-page .product-account-placeholder { visibility:hidden; }
body.product-page .product-empty-loading { display:grid; }
body.product-page .product-empty-loading > p { grid-area:1/1; margin:0; }
body.product-page .product-account-actions { display:flex; flex-wrap:wrap; gap:10px; }
body.product-page .product-account-more { flex:1 1 100%; min-width:0; }
body.product-page :is(.product-account-actions,.product-account-more):empty { display:none; }
body.product-page .product-account-strip:is([data-account="checking"],[data-account="still-checking"]) { border-style:dashed; }
body.product-page .product-account-strip:is([data-account="checking"],[data-account="still-checking"]) .product-account-body > p[role=status]::before { content:''; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%; background:var(--product-accent); vertical-align:1px; animation:product-account-pulse 1.2s ease-in-out infinite; }
body.product-page .product-account-strip[data-account="unavailable"] { border-left:3px solid var(--product-accent); background:#fff7f5; }
body.product-page .product-account-strip[data-account="absent"] { border-style:dashed; background:transparent; }
body.product-page .product-account-strip[data-account="absent"] .product-account-body > p { color:#586579; font-size:13px; }
body.product-page .product-account-more pre { margin:4px 0 0; white-space:pre-wrap; font-family:ui-monospace,Menlo,monospace; }
body.product-page [data-account-panel] .product-actions:empty { display:none; }
/* Wardrobe: the strip starts at its usual one-row height; disclosures are full-size tap targets. */
/* The wardrobe fills in after load: keep the footer below the first screen so it does not jump. */
@media(min-width:761px) { body.product-page .product-main:has(> #screen) { min-height:100vh; } }
body.product-page #screen summary { min-height:44px; padding:12px 0; line-height:20px; }
body.product-page .product-empty a, body.product-page .product-empty a:visited { color:var(--product-ink); text-decoration:underline; text-underline-offset:3px; }
@keyframes product-account-pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }

/* Keep the working form in the same typographic and control family as account
   and wardrobe; older couture/composer rules otherwise win on this page. */
body.product-page .design-composer h2 { font-family:'Didot','Bodoni 72',Georgia,serif; }
body.product-page .design-composer :is(textarea,select,button,.composer-secondary) { font-family:inherit; border-radius:0; }
body.product-page .design-composer { border-color:var(--product-line); border-radius:0; box-shadow:none; }
body.product-page .composer-eyebrow { color:var(--product-accent); }
body.product-page .product-loading { min-height:240px; }
body.product-page [hidden] { display:none !important; }
/* Wardrobe: which version and size is open (detail) and newest (cards); downloads belong to the open one. */
body.product-page .product-version-banner { margin:0 0 18px; padding:14px 0 14px 16px; border-left:3px solid var(--product-ink); }
body.product-page .product-version-banner > p { margin:0; }
body.product-page .product-version-banner .product-version-title { font-family:'Didot','Bodoni 72',Georgia,serif; font-size:clamp(24px,3.2vw,32px); line-height:1.2; }
body.product-page .product-version-banner .product-meta { margin-top:4px; }
body.product-page .product-version-banner .product-version-older { margin-top:10px; color:#684551; font-size:14px; line-height:1.6; }
body.product-page .product-version-banner .product-actions { margin-top:10px; }
body.product-page .product-drawings { margin-top:28px; }
body.product-page .product-drawings h3 { margin:0 0 6px; }
body.product-page .product-drawings .product-actions { margin-top:12px; }
body.product-page .product-compare-side { display:flex; flex-direction:column; }
body.product-page .product-compare-side .product-button { margin-top:auto; align-self:flex-start; }
body.product-page .product-card .product-card-newest { margin:0 0 4px; font-size:15px; font-weight:700; line-height:1.5; }
body.product-page .product-card .product-card-next { margin:0 0 16px; font-size:14px; line-height:1.6; }
/* Removal from the account: a quiet first button, a clearly marked confirm. */
body.product-page .product-remove { margin-top:18px; padding-top:14px; border-top:1px dashed var(--product-line); }
body.product-page .product-remove > p { margin:0; }
body.product-page .product-remove > .product-actions:empty { display:none; }
body.product-page .product-remove .product-actions { margin-top:10px; }
/* Wardrobe cards: a small drawing (fixed box, no shift when it loads) and the account badge. */
body.product-page .product-card-thumb { display:block; width:100%; height:140px; object-fit:contain; margin:0 0 16px; background:#fbfaf7; border:1px solid var(--product-line); }
body.product-page .product-card .product-card-badge { display:inline-block; margin:0 0 8px; padding:3px 10px; border:1px solid var(--product-ink); font-size:12px; line-height:1.5; letter-spacing:.3px; }
body.product-page #screen > #account-designs:not([hidden]) { margin-top:40px; }