/* =========================================================================
   Vava Storefront — "Default" layout design system
   Shared by storefront-default.html (home) and the sd-*.html flow pages
   (sd-product, sd-browse, sd-account, sd-project, sd-share).
   Loaded AFTER css/app.css — consumes its --color-* / --shadow-* tokens.
   ========================================================================= */

/* Tinted page so the white panels + product cards carry real contrast */
body { background: #E4E4E4; }
.lp { max-width:1180px; margin:0 auto; padding:0 24px 56px; }

/* ---- Slim header on a clean white bar ---- */
.lp-topbar { background:var(--color-surface); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:5; padding:12px 24px; }
.lp-topbar-in { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; width:100%; max-width:none; margin:0; }
.lp-brand { display:block; flex:none; }
.lp-nav { display:flex; gap:22px; margin-left:auto; }
.lp-nav a { font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--color-text-muted); text-decoration:none; }
.lp-nav a:hover { color:var(--color-text); }
.lp-nav a.is-current { color:var(--color-text); font-weight:700; position:relative; }
.lp-nav a.is-current::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--color-primary); }
.lp-actions { display:flex; gap:8px; align-items:center; }

/* account identity chip in the header (signed-in state) */
.lp-acct { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px; border-radius:5px; position:relative; }
.lp-acct:hover { background:var(--color-surface-alt); }
.lp-acct .acct-name { font-weight:600; font-size:13px; color:var(--color-text); }
.lp-acct .chev { width:14px; height:14px; color:var(--color-text-muted); }

/* ---- Compact head band — title + count + search ---- */
.mn-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; }
.mn-head h1 { font-size:24px; font-weight:600; letter-spacing:-0.01em; margin:0; white-space:nowrap; }
.mn-count { color:var(--color-text-muted); font-size:13px; }
.mn-title { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.mn-search { display:flex; align-items:center; gap:8px; flex:0 1 360px; min-width:0; background:#fcfeec; border:1px solid var(--color-border-strong); border-radius:5px; padding:9px 14px; }
.mn-search svg { color:var(--color-text-subtle); flex:none; }
.mn-search input { border:0; outline:0; flex:1; min-width:0; font-size:14px; background:transparent; color:var(--color-text); }

/* ---- Inline product-type box selectors ---- */
.mn-types { display:flex; flex-wrap:wrap; gap:7px; }
.mn-type { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid var(--color-border-strong); border-radius:5px; background:var(--color-surface); color:var(--color-text); font-size:13px; font-weight:500; cursor:pointer; transition:border-color 140ms, background 140ms, color 140ms; }
.mn-type:hover { border-color:var(--color-primary); color:var(--color-primary-700); }
.mn-type.on { background:var(--color-primary-50); border-color:var(--color-primary); color:var(--color-primary-700); }
.mn-type .mn-tico { width:15px; height:15px; flex:none; }

/* ---- Filter section — always-visible chips (used inline; drawer below) ---- */
.ff-chips { display:flex; flex-wrap:wrap; gap:7px; }
.ff-chip { padding:6px 13px; border-radius:5px; border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-text); font-size:13px; font-weight:500; cursor:pointer; }
.ff-chip:hover { border-color:var(--color-primary); color:var(--color-primary-700); }
.ff-chip.on { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ---- Image-forward product grid — white cards lift off the tinted page ---- */
.mn-listhead { display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 12px; }
.mn-listhead h2 { font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); font-weight:600; margin:0; }
.mn-listhead a { font-size:13px; font-weight:500; }
.mn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mn-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.mn-card { background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:5px; overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--color-text); display:flex; flex-direction:column; transition:box-shadow 140ms, transform 140ms; position:relative; }
.mn-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.mn-img { aspect-ratio:1.5/1; background-size:cover; background-position:center; }
.mn-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px; flex:1; }
.mn-name { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
a.mn-name { color:var(--color-text); text-decoration:none; }
a.mn-name:hover { color:var(--color-primary-700); }
.mn-meta { font-size:12.5px; color:var(--color-text-muted); }
.mn-desc { font-size:12px; line-height:1.45; color:var(--color-text-subtle); margin:3px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mn-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; }
.mn-price { font-weight:600; font-size:13px; color:var(--color-value-tnum); font-variant-numeric:tabular-nums; }
.mn-note { font-size:12px; font-weight:600; color:var(--color-primary-700); background:none; border:0; cursor:pointer; padding:0; position:relative; z-index:2; }
.mn-note:hover { color:var(--color-primary); }
/* stretched product link — lets a card carry its own heart / add buttons */
.mn-cardlink { position:absolute; inset:0; z-index:1; border-radius:5px; }
/* heart / save overlay on a card image */
.mn-heart { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:999px; border:0; background:rgba(255,255,255,.92); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-danger); box-shadow:var(--shadow-sm); z-index:2; }
.mn-heart svg { width:16px; height:16px; }
.mn-heart.on svg { fill:var(--color-danger); }
/* small add-to-project button, bottom-right of a card foot */
.mn-add { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:5px; border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-primary-700); cursor:pointer; flex:none; position:relative; z-index:2; }
.mn-add:hover { border-color:var(--color-primary); background:var(--color-primary-50); }
.mn-add svg { width:16px; height:16px; }

.lp-footer { margin-top:44px; padding-top:16px; border-top:1px solid var(--color-border); color:var(--color-text-subtle); font-size:12px; text-align:center; }
.lp-footer a { color:var(--color-text-muted); }

@media (max-width:1000px){ .mn-grid.cols-4 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .mn-grid, .mn-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mn-grid, .mn-grid.cols-4 { grid-template-columns:1fr; } }

/* ---- Floating layout switcher (design-review nav — home only) ---- */
.vswitch { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:1000; display:flex; align-items:center; gap:6px; padding:6px 8px; background:#1B222B; border:1px solid rgba(255,255,255,.14); border-radius:5px; box-shadow:0 8px 28px rgba(16,24,40,.28); }
.vswitch__label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.55); font-weight:600; padding:0 4px 0 2px; }
.vswitch__n { width:28px; height:28px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; text-decoration:none; color:rgba(255,255,255,.85); background:rgba(255,255,255,.10); border:1px solid transparent; }
.vswitch__n:hover { background:rgba(255,255,255,.22); color:#fff; }
.vswitch__n.is-on { background:#fff; color:#141A21; }

/* ---- Left slide-in filter drawer — overlays the page, never reflows it ---- */
.ff-open { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex:none; border:1px solid #D6E2FA; border-radius:5px; background:var(--color-primary-50); color:var(--color-primary-700); cursor:pointer; }
.ff-open:hover { border-color:var(--color-primary); background:#DCE7F4; }
.ff-open .ff-ico { color:var(--color-primary-700); }
.ff-ico { color:var(--color-primary); flex:none; }
.fdrawer { position:fixed; inset:0; z-index:1200; visibility:hidden; }
.fdrawer.open { visibility:visible; }
.fdrawer__backdrop { position:absolute; inset:0; background:rgba(20,28,38,.42); opacity:0; transition:opacity 200ms; }
.fdrawer.open .fdrawer__backdrop { opacity:1; }
.fdrawer__panel { position:absolute; top:0; left:0; bottom:0; width:360px; max-width:86vw; display:flex; flex-direction:column; background:var(--color-surface); border-right:1px solid var(--color-border); box-shadow:var(--shadow-lg); transform:translateX(-100%); transition:transform 220ms ease; }
.fdrawer.open .fdrawer__panel { transform:none; }
.fdrawer__head { display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--color-border); font-weight:600; font-size:15px; color:var(--color-text); }
.fdrawer__head .ff-ico { color:var(--color-primary); flex:none; }
.fdrawer__count { color:var(--color-text-muted); font-weight:500; font-size:13px; }
.fdrawer__close { margin-left:auto; width:32px; height:32px; border:0; background:transparent; border-radius:5px; color:var(--color-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.fdrawer__close:hover { background:var(--color-surface-alt); color:var(--color-text); }
.fdrawer__body { padding:2px 16px 16px; overflow-x:hidden; overflow-y:auto; flex:1; }
.fdrawer__foot { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--color-border); }
.fsec { border-top:1px solid var(--color-border-strong); }
.fsec:first-child { border-top:0; }
.fsec__head { display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; padding:14px 2px 12px; cursor:pointer; list-style:none; font-weight:700; font-size:14px; color:var(--color-text); }
.fsec__head::-webkit-details-marker { display:none; }
.fsec__n { color:var(--color-text-subtle); font-weight:500; font-size:12px; }
.fsec__sum { flex-basis:100%; margin-top:7px; font-size:12px; font-weight:600; color:var(--color-primary-700); line-height:1.5; }
.fsec__sum:empty { display:none; margin-top:0; }
.fsec__chev { margin-left:auto; width:16px; height:16px; color:var(--color-text-subtle); flex:none; transition:transform 180ms; }
.fsec[open] .fsec__chev { transform:rotate(180deg); }
.fsec__body { padding:0 0 14px; }
.fsec__body--cats { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.fcat { display:flex; align-items:center; gap:11px; width:100%; padding:6px 5px; border:0; background:transparent; border-radius:5px; cursor:pointer; font-size:13.5px; color:var(--color-text); text-align:left; }
.fcat:hover { background:var(--color-surface-alt); }
.fcat__n { flex:none; min-width:27px; height:24px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--color-border-strong); border-radius:5px; font-size:12px; font-weight:600; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.fcat.on { color:var(--color-primary-700); font-weight:600; }
.fcat.on .fcat__n { border-color:var(--color-primary); background:var(--color-primary-50); color:var(--color-primary-700); }
.fsw { width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:-1px; margin-right:3px; }
.fsize__row { display:flex; align-items:center; gap:12px; }
.fsize__row + .fsize__row { margin-top:16px; }
.fsize__lbl { flex:none; width:46px; font-size:12px; font-weight:500; color:var(--color-text-muted); }
.fslider { position:relative; flex:1; height:4px; border-radius:5px; background:var(--color-border-strong); margin:0 6px; }
.fslider__fill { position:absolute; top:0; bottom:0; background:var(--color-primary); border-radius:5px; }
.fslider__knob { position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:var(--color-primary); border:2px solid #fff; box-shadow:var(--shadow-sm); transform:translate(-50%,-50%); }
.fsize__val { flex:none; font-size:12px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* =========================================================================
   Sub-page shared components (product / browse / account / project / share)
   ========================================================================= */

/* ---- Breadcrumb + page head ---- */
.sd-crumb { display:flex; align-items:center; gap:7px; margin-top:22px; font-size:13px; color:var(--color-text-muted); flex-wrap:wrap; }
.sd-crumb a { color:inherit; }
.sd-crumb a:hover { color:var(--color-primary-700); }
.sd-crumb .sep { color:var(--color-text-subtle); }
.sd-head { display:flex; align-items:flex-start; gap:14px; margin:12px 0 4px; flex-wrap:wrap; }
.sd-back { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none; border:1px solid var(--color-border-strong); border-radius:5px; background:var(--color-surface); color:var(--color-text-muted); cursor:pointer; }
.sd-back:hover { border-color:var(--color-primary); color:var(--color-primary-700); }
.sd-head h1 { font-size:24px; font-weight:600; letter-spacing:-0.01em; margin:0; }
.sd-head .sd-sub { font-size:13px; color:var(--color-text-muted); margin-top:3px; }
.sd-head .sd-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sd-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.sku { font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; color:var(--color-text-subtle); background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:5px; padding:3px 7px; }

/* ---- White content panel (clean, low-chrome) ---- */
.panel { background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:5px; box-shadow:var(--shadow-sm); overflow:hidden; }
.panel + .panel { margin-top:16px; }
.panel__h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--color-border); }
.panel__h h2, .panel__h h3 { margin:0; font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.panel__h .sub { font-size:12.5px; color:var(--color-text-muted); margin-top:2px; }
.panel__b { padding:16px; }
.panel__b.tight { padding:6px 16px; }

/* key/value rows */
.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--color-border); font-size:13px; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--color-text-muted); }
.kv .v { font-weight:500; color:var(--color-text); text-align:right; }

.sd-section-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:600; margin:0 0 8px; }
/* segmented single-select control (sort, request type, etc.) */
.seg { display:inline-flex; border:1px solid var(--color-border-strong); border-radius:5px; overflow:hidden; }
.seg button { border:0; background:var(--color-surface); padding:7px 13px; font-size:12.5px; font-weight:500; color:var(--color-text-muted); cursor:pointer; border-left:1px solid var(--color-border); }
.seg button:first-child { border-left:0; }
.seg button.on { background:var(--color-primary-50); color:var(--color-primary-700); font-weight:600; }
hr.sd-div { border:0; border-top:1px solid var(--color-border); margin:16px 0; }

/* ---- Product detail: two columns + sticky buy rail ---- */
.pd-cols { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:20px; align-items:start; margin-top:16px; }
.pd-rail { position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
.pd-hero { position:relative; width:100%; aspect-ratio:1.6/1; border-radius:5px; border:1px solid var(--color-border-strong); background-size:cover; background-position:center; }
.pd-hero-num { position:absolute; left:10px; bottom:10px; font-size:12px; font-weight:600; background:rgba(15,23,42,0.72); color:#fff; padding:3px 9px; border-radius:5px; }
.pd-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pd-thumb { width:66px; height:66px; flex:none; padding:0; cursor:pointer; position:relative; border-radius:5px; border:1px solid var(--color-border-strong); background-size:cover; background-position:center; }
.pd-thumb:hover { border-color:var(--color-primary); }
.pd-thumb.active { border-color:var(--color-primary); box-shadow:0 0 0 2px var(--color-primary-50); }
.pd-thumb .tag { position:absolute; left:4px; bottom:4px; font-size:10px; font-weight:700; letter-spacing:.03em; background:rgba(15,23,42,0.72); color:#fff; padding:1px 5px; border-radius:3px; }
.pd-price { font-size:28px; font-weight:600; letter-spacing:-0.02em; color:var(--color-value-tnum); font-variant-numeric:tabular-nums; }
.pd-price .u { font-size:13px; font-weight:500; color:var(--color-text-subtle); }
.pd-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pd-actions .btn { width:100%; }
.pd-actions .full { grid-column:1 / -1; }

.sd-callout { display:flex; gap:10px; padding:12px 14px; border-radius:5px; background:var(--color-warn-50); border:1px solid #EADFC2; color:var(--color-text); font-size:13px; line-height:1.5; }
.sd-callout svg { width:18px; height:18px; flex:none; color:var(--color-warn); margin-top:1px; }
.sd-lock { display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:5px; background:var(--color-info-50); border:1px solid #BFD3EC; color:var(--color-text); font-size:13px; }
.sd-lock svg { width:16px; height:16px; flex:none; color:var(--color-primary-700); margin-top:1px; }

.sd-doc { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--color-border); }
.sd-doc:last-child { border-bottom:0; }
.sd-doc .ico { width:34px; height:34px; flex:none; border-radius:5px; display:flex; align-items:center; justify-content:center; background:var(--color-danger-50); color:var(--color-danger); }
.sd-doc .ico svg { width:17px; height:17px; }
.sd-doc .meta { min-width:0; }
.sd-doc .meta .m { font-size:13px; font-weight:500; color:var(--color-text); }
.sd-doc .meta .s { font-size:11px; color:var(--color-text-muted); }

@media (max-width:900px){ .pd-cols { grid-template-columns:1fr; } .pd-rail { position:static; } }

/* ---- Account: project cards + saved grid ---- */
.pjx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.pjx-card { display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:5px; overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:var(--color-text); transition:box-shadow 140ms, transform 140ms; }
.pjx-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pjx-media { position:relative; aspect-ratio:1.7/1; background-size:cover; background-position:center; }
.pjx-status { position:absolute; top:8px; left:8px; }
.pjx-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
.pjx-name { font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.pjx-card:hover .pjx-name { color:var(--color-primary-700); }
.pjx-client { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--color-text-muted); }
.pjx-client svg { width:13px; height:13px; }
.pjx-meta { font-size:12px; color:var(--color-text-subtle); }
.pjx-thumbs { display:flex; gap:4px; margin-top:6px; }
.pjx-thumbs span { width:30px; height:30px; border-radius:5px; background-size:cover; background-position:center; border:1px solid var(--color-border); }
.pjx-thumbs .more { display:inline-flex; align-items:center; justify-content:center; background:var(--color-surface-alt); color:var(--color-text-muted); font-size:11px; font-weight:600; }
.pjx-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:210px; border:2px dashed var(--color-border-strong); border-radius:5px; background:var(--color-surface-alt); color:var(--color-text-muted); cursor:pointer; font:inherit; }
.pjx-add:hover { border-color:var(--color-primary); color:var(--color-primary-700); background:var(--color-primary-50); }
.pjx-add svg { width:30px; height:30px; stroke-width:2.4; }
.pjx-add span { font-size:13px; font-weight:600; }

/* ---- Project workspace: product cards with status + note + actions ---- */
.pjw-note { font-size:12px; color:var(--color-text-muted); background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:5px; padding:7px 9px; line-height:1.45; margin-top:2px; }
.pjw-note strong { color:var(--color-text); font-weight:600; }
.pjw-actions { display:flex; align-items:center; gap:2px; margin-top:auto; padding-top:8px; border-top:1px solid var(--color-border); }
.pjw-actions .spacer { flex:1; }
.pjw-status { position:absolute; top:8px; left:8px; z-index:2; }
.pjw-fav { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:5px; border:0; background:rgba(255,255,255,.92); box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--color-text-subtle); z-index:2; }
.pjw-fav svg { width:16px; height:16px; }
.pjw-fav.on { color:var(--color-warn); }
.pjw-fav.on svg { fill:var(--color-warn); }

/* ---- Selectable pick list (choose a project in the Add-to-Project modal) ---- */
.pick-list { display:flex; flex-direction:column; gap:6px; }
.pick-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--color-border-strong); border-radius:5px; cursor:pointer; font-size:13px; }
.pick-row:hover { border-color:var(--color-primary); background:var(--color-surface-alt); }
.pick-row:has(input:checked) { border-color:var(--color-primary); background:var(--color-primary-50); }
.pick-row input { accent-color:var(--color-primary); flex:none; }
.pick-row .pk-thumb { width:34px; height:34px; border-radius:5px; background-size:cover; background-position:center; border:1px solid var(--color-border); flex:none; }
.pick-row .pk-name { font-weight:600; color:var(--color-text); }
.pick-row .pk-meta { margin-left:auto; font-size:12px; color:var(--color-text-muted); }

/* ---- Compare table ---- */
.cmp-table { width:100%; border-collapse:collapse; font-size:13px; }
.cmp-table th, .cmp-table td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.cmp-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); background:var(--color-table-head); }
.cmp-table td.attr { font-weight:600; color:var(--color-text-muted); background:var(--color-surface-alt); }

/* =========================================================================
   Shared client view (sd-share) — no admin/account chrome
   ========================================================================= */
.shd-top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--color-surface); border-bottom:1px solid var(--color-border); }
.shd-studio { display:flex; align-items:center; gap:10px; }
.shd-studio .avatar { background:linear-gradient(135deg,#4C74A6,#6BA8DE); }
.shd-studio .s-name { font-weight:600; font-size:14px; }
.shd-studio .s-sub { font-size:12px; color:var(--color-text-muted); }
.shd-powered { margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--color-text-subtle); }
.shd-wrap { max-width:1080px; margin:0 auto; padding:22px 24px 48px; }
.shd-hero { background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:5px; padding:22px 24px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.shd-hero .ro { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-subtle); margin-bottom:8px; }
.shd-hero h1 { font-size:28px; letter-spacing:-0.02em; margin:0 0 6px; }
.shd-hero .prepared { color:var(--color-text-muted); font-size:14px; }
.shd-hero .prepared strong { color:var(--color-text); }
.shd-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.shd-room { margin-top:24px; }
.shd-room > h2 { font-size:17px; margin:0 0 12px; letter-spacing:-0.01em; }
.shd-card .sc-note { font-size:12px; color:var(--color-text-muted); background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:5px; padding:7px 9px; line-height:1.45; }
.shd-card .sc-note strong { color:var(--color-text); font-weight:600; }
.shd-feedback { margin-top:28px; }
.shd-footer { margin-top:24px; text-align:center; color:var(--color-text-subtle); font-size:12px; }

/* ---- Ship-to — the buyer's country in the header --------------------------
   Sits with Sign In because it qualifies every price and every button on the
   site, not one product. Styled as a quiet control, not a call to action: it
   states a fact the buyer already knows and only occasionally corrects. */
.lp-shipto { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font:inherit; font-size:13px; line-height:1.1; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:5px; cursor:pointer; transition:border-color 120ms, color 120ms; }
.lp-shipto:hover { border-color:var(--color-primary); color:var(--color-primary-700); }
.lp-shipto svg { width:15px; height:15px; flex:none; color:var(--color-text-muted); }
.lp-shipto .l { color:var(--color-text-muted); }
.lp-shipto .c { font-weight:600; }
/* Out of territory is the same box as .sd-lock in a warn key. Deliberately not
   an error: nothing has gone wrong, and the buyer can still start a conversation
   about freight — so it must not read like a wall. */
.sd-lock.warn { background:var(--color-warn-50); border-color:var(--color-warn); }
.sd-lock.warn svg { color:var(--color-warn); }