:root{--navy:#0E2A47;--blue:#1697E6;--electric:#35B8FF;--red:#E53935;--green:#22C55E;--gold:#F59E0B;--ink:#14283d;--text:#64748B;--soft:#F6F9FC;--border:#DDE7F0;--white:#fff;--shadow:0 18px 55px rgba(14,42,71,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--navy);background:linear-gradient(180deg,#fff,#f8fbfe 55%,#f4f8fc);line-height:1.55}a{text-decoration:none;color:inherit}.wrap{width:min(1280px,calc(100% - 36px));margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}.topbar-inner{min-height:72px;display:flex;align-items:center;gap:18px}.brand{font-weight:900;display:flex;gap:10px;align-items:center;white-space:nowrap}.brand i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--electric));color:#fff;font-style:normal}.back{margin-left:auto;font-weight:800;color:var(--blue)}.hero{padding:64px 0 34px}.kicker{color:var(--blue);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900}.hero h1{font-size:clamp(2.2rem,5vw,4.7rem);line-height:.95;letter-spacing:-.055em;margin:10px 0 18px}.hero p{max-width:780px;color:var(--text);font-size:1.05rem}.tabs{display:flex;gap:9px;overflow:auto;padding:10px 0 18px;scrollbar-width:thin}.tab{flex:0 0 auto;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:.8rem;font-weight:800}.tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 0 80px}.specimen{min-height:190px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 12px 35px rgba(14,42,71,.07);padding:20px;display:flex;flex-direction:column;overflow:hidden}.sample{min-height:112px;border-radius:16px;background:linear-gradient(145deg,#f8fbff,#eef5fb);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}.specimen h3{font-size:.94rem;margin:14px 0 3px}.specimen small{color:var(--text);font-weight:700}.code{color:var(--blue);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-btn{border:0;padding:13px 22px;border-radius:12px;font:800 .86rem Inter,sans-serif;cursor:pointer;background:var(--blue);color:#fff;position:relative}.outline{background:transparent;color:var(--blue);border:2px solid var(--blue)}.pill{border-radius:999px}.ghost{background:rgba(255,255,255,.35);color:var(--navy);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px rgba(14,42,71,.12)}.liquid{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(53,184,255,.26));color:#0b4268;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff,inset 0 -8px 18px rgba(22,151,230,.12),0 12px 26px rgba(22,151,230,.2);backdrop-filter:blur(16px)}.neon{background:#071828;color:#61ddff;border:1px solid #35B8FF;box-shadow:0 0 8px #35B8FF,0 0 24px rgba(53,184,255,.6)}.gradient{background:linear-gradient(120deg,#0f7fe5,#7c3aed,#ec4899)}.metal{background:linear-gradient(#f9fbfc,#9aa9b5 45%,#eef2f5 52%,#82909d);color:#13212c;border:1px solid #8898a6;text-shadow:0 1px #fff;box-shadow:inset 0 1px #fff,0 6px 10px rgba(0,0,0,.18)}.gold{background:linear-gradient(135deg,#6c4a05,#f5d06f 45%,#8b5e08);color:#201300}.soft{background:#eef3f8;color:#31506d;box-shadow:8px 8px 16px #dce4eb,-8px -8px 16px #fff}.brutal{background:#ffe34f;color:#111;border:3px solid #111;border-radius:0;box-shadow:6px 6px 0 #111}.clay{background:#7c70ff;box-shadow:inset 7px 7px 14px rgba(255,255,255,.35),inset -8px -8px 16px rgba(60,40,160,.3),0 9px 18px rgba(70,55,180,.24);border-radius:20px}.holo{background:linear-gradient(115deg,#7dd3fc,#c4b5fd,#f9a8d4,#fde68a,#86efac);color:#243044;border:1px solid rgba(255,255,255,.8)}
.frame{width:150px;height:90px;background:linear-gradient(135deg,#b7dfff,#f4fbff);display:grid;place-items:center;font-size:.75rem;font-weight:900;color:#32516b}.input{width:min(240px,100%);padding:13px 14px;border:1px solid #cfdbe6;border-radius:10px;background:#fff;font:600 .8rem Inter;color:#40586e;outline:none}.label{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e8f4ff;color:#087bc1;font-size:.72rem;font-weight:900}.mini-table{width:100%;border-collapse:collapse;background:#fff;font-size:.68rem}.mini-table th,.mini-table td{padding:7px;border-bottom:1px solid #e6edf4;text-align:left}.font-demo{font-size:1.65rem;font-weight:900;line-height:1.05}.nav-demo{width:100%;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.nav-demo span{padding:7px 9px;border-radius:8px;font-size:.7rem;font-weight:800}.card-demo{width:min(230px,100%);background:white;border:1px solid #e2e8f0;border-radius:16px;padding:18px;box-shadow:0 12px 24px rgba(14,42,71,.09)}.alert{width:min(250px,100%);padding:12px 14px;border-radius:10px;background:#e8f4ff;border-left:4px solid var(--blue);font-size:.75rem;font-weight:700}.effect-box{width:160px;height:90px;border-radius:18px;background:linear-gradient(135deg,#1697e6,#7c3aed);box-shadow:0 18px 35px rgba(22,151,230,.3)}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.catalog-grid{grid-template-columns:1fr}.hero{padding-top:42px}.back{font-size:.78rem}.specimen{min-height:170px}}

/* Interactive catalog demos */
button,.demo-btn,.tab,.nav-demo span,.card-demo,.frame,.label,.alert,.effect-box{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,opacity .16s ease}
button:not(:disabled){cursor:pointer}
button:not(:disabled):active,.demo-btn:not(:disabled):active{transform:translateY(3px) scale(.97);filter:brightness(.96)}
.specimen{position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.specimen.demo-selected{border-color:#1697e6;box-shadow:0 14px 42px rgba(22,151,230,.18)}
.specimen.demo-selected::after{content:'Selected';position:absolute;right:12px;top:12px;padding:4px 8px;border-radius:999px;background:#0e2a47;color:#fff;font-size:.58rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;z-index:8}
.sample button:not(:disabled):hover{transform:translateY(-2px)}
.sample button:not(:disabled):active{transform:translateY(2px) scale(.97)}
.demo-toast{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:min(360px,calc(100vw - 40px));padding:13px 16px;border-radius:14px;background:#0e2a47;color:#fff;box-shadow:0 18px 45px rgba(14,42,71,.25);font-size:.78rem;font-weight:800;opacity:0;transform:translateY(14px);pointer-events:none;transition:.2s ease}
.demo-toast.show{opacity:1;transform:translateY(0)}
.fake-menu{position:absolute;z-index:20;min-width:150px;padding:7px;background:#fff;border:1px solid #dbe6ef;border-radius:10px;box-shadow:0 16px 35px #0e2a4722;font-size:.72rem;font-weight:800}
.fake-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;background:transparent;color:#0e2a47}.fake-menu button:hover{background:#eaf5fd}
.demo-switch{cursor:pointer;transition:background .2s}.demo-switch span{transition:transform .2s,margin .2s}.demo-switch.off{background:#cbd5e1!important}.demo-switch.off span{margin-left:0!important;margin-right:auto!important}
.demo-check,.demo-radio{cursor:pointer;user-select:none}
.demo-range-value{font-size:.65rem;font-weight:900;color:#087bc1;margin-left:8px}
.demo-spin{display:inline-block;animation:demoSpin .8s linear infinite}@keyframes demoSpin{to{transform:rotate(360deg)}}
.demo-shake{animation:demoShake .28s linear}@keyframes demoShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sample .nav-demo span{cursor:pointer}.sample .nav-demo span.demo-active{background:#1697e6!important;color:#fff!important}
.alert.demo-hidden{opacity:.18;transform:scale(.96)}
.effect-box.demo-pulse{animation:demoPulse .65s ease}@keyframes demoPulse{50%{transform:scale(1.08);filter:brightness(1.12)}}
.frame.demo-frame-active{transform:scale(1.05);box-shadow:0 0 0 4px #1697e633,0 18px 35px #0e2a4722!important}
.label.demo-label-active{transform:scale(1.08);filter:saturate(1.35)}
.font-demo[contenteditable="true"]{outline:2px dashed #1697e655;outline-offset:7px;border-radius:5px}
@media(max-width:600px){.demo-toast{right:12px;bottom:12px;max-width:calc(100vw - 24px)}}


/* Accessible light/dark theme */
body{color-scheme:light;}
.catalog-theme-toggle{margin-left:2px;width:42px;height:42px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#0E2A47;font-size:1.05rem;font-weight:900;display:grid;place-items:center;box-shadow:0 8px 20px rgba(14,42,71,.08)}
body.dark{color-scheme:dark;--navy:#f8fafc;--ink:#eef4f9;--text:#c9d6e2;--soft:#101f2f;--border:#3d566d;--white:#0b1724;background:linear-gradient(180deg,#071321,#0b1724 55%,#0e1d2b);color:#f8fafc}
body.dark .topbar{background:rgba(7,19,33,.94);border-color:#3d566d}
body.dark .brand{color:#f8fafc}
body.dark .back,body.dark .kicker,body.dark .code{color:#62c9ff}
body.dark .hero p,body.dark .specimen small{color:#c9d6e2}
body.dark .tab{background:#102131;border-color:#49647c;color:#eaf1f7}
body.dark .tab:hover{border-color:#62c9ff;color:#fff}
body.dark .tab.active{background:#1697e6;border-color:#1697e6;color:#fff}
body.dark .specimen{background:#102131;border-color:#3d566d;box-shadow:0 12px 35px rgba(0,0,0,.24)}
body.dark .specimen h3{color:#f8fafc}
body.dark .sample{background:linear-gradient(145deg,#172b3e,#0e1e2d);border:1px solid #284158}
body.dark .catalog-theme-toggle{background:#102131;border-color:#49647c;color:#fff}
body.dark .outline{color:#62c9ff;border-color:#35B8FF}
body.dark .ghost{background:rgba(255,255,255,.10);color:#f8fafc;border-color:rgba(255,255,255,.32)}
body.dark .soft{background:#172a3c;color:#e2edf6;box-shadow:7px 7px 15px #07111b,-5px -5px 14px #20384e}
body.dark .input,body.dark input,body.dark textarea,body.dark select{background:#0b1724;color:#f8fafc;border-color:#526b82}
body.dark input::placeholder,body.dark textarea::placeholder{color:#a8bacb;opacity:1}
body.dark .mini-table{background:#0d1b29;color:#eaf1f7}
body.dark .mini-table th,body.dark .mini-table td{border-color:#385168;color:#eaf1f7}
body.dark .mini-table tbody tr{background:#0d1b29!important}
body.dark .mini-table tbody tr:nth-child(even){background:#122538!important}
body.dark .card-demo{background:#102131!important;border-color:#49647c;color:#eef4f9}
body.dark .nav-demo:not([style*="background:#0b1724"]){color:#eef4f9}
body.dark .fake-menu{background:#102131;border-color:#49647c;color:#fff}
body.dark .fake-menu button{color:#eef4f9}
body.dark .fake-menu button:hover{background:#19344b}
body.dark .demo-toast{background:#1697e6;color:#fff}
body.dark .specimen.demo-selected{border-color:#35B8FF;box-shadow:0 14px 42px rgba(53,184,255,.20)}
body.dark .specimen.demo-selected::after{background:#1697e6;color:#fff}
body.dark .font-demo{color:#f8fafc}
body.dark .demo-range-value{color:#62c9ff}
body.dark .alert[style*="background:#fff"],body.dark .alert[style*="background:white"]{background:#102131!important;color:#eef4f9!important;border-color:#49647c!important}
body.dark .label[style*="background:#ffffff66"]{background:rgba(255,255,255,.14)!important;color:#f8fafc!important;border:1px solid rgba(255,255,255,.28)}
body.dark .frame{color:#17334b}
@media(max-width:600px){.catalog-theme-toggle{width:38px;height:38px}.topbar-inner{gap:10px}}

/* Final dark-mode lock for all catalog card surfaces */
body.dark .specimen,
body.dark .card-demo{
  background:#102131 !important;
  color:#f5f8fc !important;
  border-color:#3f5a72 !important;
}
body.dark .specimen h3,
body.dark .card-demo h3,
body.dark .card-demo strong{color:#f8fafc !important}
body.dark .specimen small,
body.dark .card-demo p,
body.dark .card-demo span{color:#d5e0ea}


/* Dark-mode foreground audit for transparent / glass specimen controls */
body.dark .sample button[style*="background:none"],
body.dark .sample button[style*="background: none"]{
  color:#eef6fc !important;
}
body.dark .sample .ghost[style*="color:#14314c"],
body.dark .sample .ghost[style*="color: #14314c"]{
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.34) !important;
}
body.dark .sample button[style*="border-bottom:2px solid #1697e6"]{
  color:#eef6fc !important;
}


/* ===== Customer Website Builder ===== */
.catalog-search-wrap{display:flex;align-items:center;gap:12px;margin:0 0 22px}.catalog-search{width:min(560px,100%);border:1px solid var(--border);background:var(--white);color:var(--navy);padding:13px 16px;border-radius:14px;font:inherit;box-shadow:0 8px 24px rgba(14,42,71,.06)}.catalog-search:focus{outline:3px solid #1697e633;border-color:var(--blue)}.catalog-result-count{font-size:.82rem;font-weight:800;color:var(--text)}
.specimen{position:relative}.select-design{position:absolute;top:12px;right:12px;z-index:6;border:1px solid #1697e655;background:var(--white);color:#087bc1;border-radius:999px;padding:7px 11px;font:800 .72rem Inter,system-ui;cursor:pointer;box-shadow:0 5px 14px rgba(14,42,71,.08)}.select-design:hover{transform:translateY(-1px);border-color:var(--blue)}.specimen.builder-selected{outline:3px solid var(--blue);outline-offset:-3px}.specimen.builder-selected .select-design{background:var(--blue);color:#fff;border-color:var(--blue)}
.selection-fab{position:fixed;right:22px;bottom:22px;z-index:40;background:var(--navy);color:#fff;border:1px solid #ffffff22;border-radius:999px;padding:12px 17px;font-weight:900;box-shadow:0 18px 40px #061b2d44}.selection-fab b{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:7px;border-radius:999px;background:var(--blue)}
body.dark .catalog-search,body.dark .select-design{background:#122a3d;color:#f7fbff;border-color:#385a73}body.dark .specimen.builder-selected{outline-color:#35b8ff}
.palette-demo{width:100%;display:grid;grid-template-columns:repeat(4,1fr);height:82px;border-radius:16px;overflow:hidden;border:1px solid #0001}.palette-demo span{display:block}.palette-hex{font-size:.68rem;color:var(--text);margin-top:10px;font-weight:700;letter-spacing:.02em}.header-mini,.hero-mini,.footer-mini,.section-mini{width:100%;min-height:110px;padding:18px;border:1px solid #cbd9e5;border-radius:16px;background:linear-gradient(145deg,#fff,#f1f6fa);color:#12304b;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center}.hero-mini{min-height:145px;font-size:.9rem;background:linear-gradient(135deg,#eaf6ff,#fff)}.footer-mini{background:#10283c;color:#eaf6ff;border-color:#31516a}.section-mini{min-height:135px}
.gallery-demo{width:100%;height:150px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.gallery-demo span{display:grid;place-items:center;background:linear-gradient(135deg,#1697e6,#7c3aed);color:white;border-radius:8px;font-weight:900}.gallery-demo.masonry span:nth-child(2),.gallery-demo.masonry span:nth-child(5){transform:scaleY(.78)}.gallery-demo.carousel{display:flex;overflow:hidden}.gallery-demo.carousel span{min-width:68%;}.gallery-demo.beforeafter{grid-template-columns:1fr 1fr}.gallery-demo.horizontal{display:flex;overflow:hidden}.gallery-demo.horizontal span{min-width:38%}.gallery-demo.polaroid span{transform:rotate(-4deg);border:6px solid white;box-shadow:0 6px 15px #0002}.gallery-demo.polaroid span:nth-child(even){transform:rotate(4deg)}.gallery-demo.bento{grid-template-columns:2fr 1fr 1fr}.gallery-demo.filmstrip{display:flex;background:#111;padding:10px}.gallery-demo.filmstrip span{min-width:30%;border-radius:2px}.gallery-demo.fullscreen span:first-child{grid-column:1/-1;grid-row:1/3}.gallery-demo.split span:first-child{grid-column:span 2}.gallery-demo.project span{padding-top:35px}.gallery-demo.lightbox span:nth-child(3){outline:4px solid #35b8ff}
body.dark .header-mini,body.dark .hero-mini,body.dark .section-mini{background:linear-gradient(145deg,#10283c,#0d2234);color:#f7fbff;border-color:#385a73}.builder-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:26px;padding-bottom:70px}.builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--white);margin-bottom:18px}.builder-muted{color:var(--text);font-size:.82rem}.builder-actions{display:flex;gap:8px;flex-wrap:wrap}.builder-actions button{border:1px solid var(--border);background:var(--white);color:var(--navy);border-radius:10px;padding:9px 12px;font-weight:800;cursor:pointer}.builder-actions .danger-lite{color:#b42318}.selection-groups{display:grid;gap:16px}.selection-group{border:1px solid var(--border);background:var(--white);border-radius:18px;padding:18px}.selection-group h2{font-size:1.05rem;margin:0 0 12px}.selection-item{display:grid;grid-template-columns:85px 1fr auto;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--border)}.selection-item:first-of-type{border-top:0}.selection-thumb{height:55px;border-radius:10px;background:linear-gradient(135deg,#dff3ff,#eef2ff);display:grid;place-items:center;font-weight:900;color:#087bc1}.selection-item h3{margin:0;font-size:.92rem}.selection-item p{margin:3px 0 0;color:var(--text);font-size:.76rem}.remove-selection{border:0;background:none;color:#b42318;font-weight:800;cursor:pointer}.builder-empty{text-align:center;border:1px dashed var(--border);border-radius:20px;padding:55px 20px;background:var(--white)}.builder-side{display:grid;gap:18px;align-content:start}.builder-panel{border:1px solid var(--border);border-radius:20px;background:var(--white);padding:20px;box-shadow:0 15px 40px rgba(14,42,71,.07)}.builder-panel h2{font-size:1.12rem;margin:6px 0 16px}.website-preview{overflow:hidden;border-radius:16px;border:1px solid #ccd9e5;background:#fff;color:#14314c}.preview-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:.58rem;border-bottom:1px solid #e2e8f0}.preview-nav i{font-style:normal;background:var(--preview-accent,#1697e6);color:white;padding:5px 8px;border-radius:6px}.preview-hero{padding:24px 18px;background:linear-gradient(135deg,var(--preview-soft,#edf8ff),#fff)}.preview-hero small{font-weight:900;color:var(--preview-accent,#1697e6)}.preview-hero h3{font-size:1.35rem;line-height:1.05;margin:8px 0;color:var(--preview-dark,#0e2a47)}.preview-hero p{font-size:.7rem;color:#64748b}.preview-hero button{border:0;background:var(--preview-accent,#1697e6);color:white;padding:8px 11px;border-radius:8px;font-weight:800}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}.preview-cards span{height:42px;border-radius:7px;background:var(--preview-soft,#edf8ff);border:1px solid #d7e4ee}.builder-field{display:grid;gap:6px;margin:11px 0;font-size:.76rem;font-weight:800}.builder-field input,.builder-field textarea{width:100%;border:1px solid var(--border);background:var(--white);color:var(--navy);border-radius:10px;padding:10px;font:inherit}.builder-field textarea{resize:vertical}body.dark .builder-toolbar,body.dark .selection-group,body.dark .builder-empty,body.dark .builder-panel,body.dark .builder-actions button,body.dark .builder-field input,body.dark .builder-field textarea{background:#10283c;color:#f7fbff;border-color:#385a73}body.dark .website-preview{border-color:#385a73}body.dark .selection-thumb{background:#17364f;color:#66c8ff}.builder-panel .demo-btn{width:100%;margin-top:7px}
@media(max-width:900px){.builder-layout{grid-template-columns:1fr}.builder-side{grid-template-columns:1fr 1fr}.selection-fab{right:14px;bottom:14px}}@media(max-width:650px){.builder-side{grid-template-columns:1fr}.builder-toolbar{align-items:flex-start;flex-direction:column}.selection-item{grid-template-columns:64px 1fr auto}.tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.tab{white-space:nowrap}.selection-fab{font-size:.78rem}}
@media print{.topbar,.hero .tabs,.builder-toolbar,.builder-side,.remove-selection,.selection-fab{display:none!important}.builder-layout{display:block}.selection-group{break-inside:avoid;box-shadow:none}}


/* Per-item customer color preferences */
.item-color-controls{margin:14px 0 52px;padding:13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 90%,var(--blue) 10%);position:relative;z-index:3}
.color-control-title{font-weight:850;font-size:.82rem;margin-bottom:8px}
.color-mode-row{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.78rem}
.color-mode-row label{display:flex;align-items:center;gap:5px;cursor:pointer}
.color-mode-row input{accent-color:var(--blue)}
.custom-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.custom-color-grid>label{font-size:.72rem;font-weight:750;color:var(--muted)}
.custom-color-grid label span{display:flex;align-items:center;gap:6px;margin-top:4px}
.custom-color-grid input[type=color]{width:34px;height:30px;padding:1px;border:1px solid var(--line);border-radius:7px;background:transparent}
.hex-color{width:88px!important;min-width:0!important;padding:6px 7px!important;font:700 .7rem ui-monospace,SFMono-Regular,Consolas,monospace!important}
.selection-color-note{display:block;margin-top:5px;color:var(--muted);line-height:1.45}
.selection-color-note i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid var(--line);vertical-align:-2px;margin-right:3px}
body.dark .item-color-controls{background:#0d2238;border-color:#35516e}
body.dark .hex-color{background:#081a2b!important;color:#f3f8fc!important}
@media(max-width:600px){.custom-color-grid{grid-template-columns:1fr}.color-mode-row{flex-direction:column;gap:7px}}

/* Live per-item color preview */
.specimen .sample{transition:background-color .2s ease,border-color .2s ease}
.specimen.custom-color-preview .sample,
.specimen.palette-color-preview .sample{background:var(--customer-bg,transparent)}
.specimen.custom-color-preview .sample button,
.specimen.palette-color-preview .sample button,
.specimen.custom-color-preview .sample a,
.specimen.palette-color-preview .sample a{
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

/* Guided Website Builder */
.guided-hero{padding-bottom:28px}.guided-builder{padding:28px 0 70px}.guided-progress-head{display:flex;justify-content:space-between;gap:15px;font-size:.85rem}.guided-progress{height:8px;background:var(--line);border-radius:99px;margin:10px 0 22px;overflow:hidden}.guided-progress span{display:block;height:100%;background:var(--blue);border-radius:99px;transition:width .25s}.guided-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:22px}.guided-steps button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}.guided-steps i{display:grid;place-items:center;width:29px;height:29px;margin:0 auto 5px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-style:normal}.guided-steps .active{color:var(--blue)}.guided-steps .active i,.guided-steps .done i{background:var(--blue);border-color:var(--blue);color:white}.guided-shell{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:22px;align-items:start}.guided-panel,.guided-preview-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 14px 35px rgba(0,0,0,.07)}.guided-panel h2{font-size:1.8rem;margin:8px 0}.guided-callout{padding:20px;border:1px dashed var(--line);border-radius:16px;margin-top:20px}.guided-nav{display:flex;justify-content:space-between;margin-top:30px}.guided-nav button{padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-weight:800}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.preview-toolbar button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:6px 8px;font-size:.7rem}.preview-toolbar button.active{background:var(--blue);color:#fff}.guided-device{margin:auto;transition:width .25s}.guided-device.desktop{width:100%}.guided-device.tablet{width:72%}.guided-device.mobile{width:42%}.guided-site{--gp-dark:#0E2A47;--gp-accent:#1697E6;--gp-light:#F6F9FC;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:white;color:#132238;min-height:390px}.guided-site header{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--gp-dark);color:white;padding:12px;font-size:.7rem}.guided-site button{background:var(--gp-accent);color:white;border:0;border-radius:7px;padding:7px 10px;font-weight:800}.gp-hero{padding:36px 24px;background:var(--gp-light)}.gp-hero small{color:var(--gp-accent);font-weight:900}.gp-hero h2{font-size:1.55rem;margin:6px 0}.gp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px}.gp-cards article{border:1px solid #dce4ec;border-radius:9px;padding:12px}.gp-cards p{font-size:.65rem}.guided-site footer{background:var(--gp-dark);color:white;padding:13px;text-align:center;font-size:.65rem}.guided-summary{display:flex;justify-content:space-between;gap:10px;margin-top:13px;font-size:.75rem}.guided-summary span{color:var(--blue);font-weight:800}.feature-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.feature-menu label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:11px;border-radius:11px;cursor:pointer}.feature-menu label.chosen{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 15%,transparent)}.feature-menu span{margin-left:auto;font-size:.62rem;color:var(--muted)}.guided-review-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.demo-btn.secondary{background:transparent!important;color:var(--blue)!important;border:1px solid var(--blue)!important}body.dark .guided-panel,body.dark .guided-preview-panel{background:#0d2238;border-color:#35516e}
@media(max-width:900px){.guided-shell{grid-template-columns:1fr}.guided-steps{grid-template-columns:repeat(4,1fr)}.guided-preview-panel{order:-1}}@media(max-width:560px){.guided-steps{grid-template-columns:repeat(2,1fr)}.feature-menu{grid-template-columns:1fr}.guided-device.tablet{width:88%}.guided-device.mobile{width:68%}.guided-summary{flex-direction:column}.guided-site header span{display:none}}

/* Primary + Secondary catalog variants */
.variant-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.variant-col{min-width:0}
.variant-label{display:block;margin:0 0 6px;font-size:.62rem;letter-spacing:.12em;font-weight:900;color:var(--muted)}
.variant-sample{height:100%;min-height:inherit}
.variant-secondary button,.variant-secondary .btn,.variant-secondary>a{filter:saturate(.9)}
.specimen.builder-selected .variant-pair{margin-bottom:4px}
@media(max-width:560px){.variant-pair{grid-template-columns:1fr}}

/* Secondary color fix: preserve full customer-selected color */
.variant-secondary button,
.variant-secondary .btn,
.variant-secondary>a{
  filter:none !important;
  opacity:1 !important;
}

/* Advanced design-system controls */
.dual-style-editor{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.dual-style-editor section{border:1px solid var(--line);border-radius:12px;padding:12px}
.dual-style-editor h4{margin:0 0 10px;font-size:.72rem;letter-spacing:.12em}
.dual-style-editor section>label,.global-color-grid>label{display:block;font-size:.7rem;font-weight:800;color:var(--muted);margin:7px 0}
.dual-style-editor label span,.global-color-grid label span{display:flex;align-items:center;gap:6px;margin-top:3px}
.pair-tools{grid-column:1/-1}.swap-pair{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:8px 11px;font-weight:800;cursor:pointer}
.inheritance-pill{float:right;font-size:.6rem;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue)}
.contrast-badge{display:inline-block;margin-top:8px;font-size:.65rem;font-weight:850;padding:4px 7px;border-radius:7px}.contrast-badge.good,.global-contrast-summary .good{color:#16803a}.contrast-badge.warn,.global-contrast-summary .warn{color:#b45309}
.customer-live-state:hover{background:var(--fs-hover)!important;background-color:var(--fs-hover)!important}.customer-live-state:active{background:var(--fs-pressed)!important;background-color:var(--fs-pressed)!important;transform:translateY(1px)}
.design-system-panel{margin-bottom:16px}.global-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.global-color-grid input[type=color]{width:34px;height:30px}.global-color-grid input[data-hex]{width:88px;padding:6px;font:700 .7rem ui-monospace,monospace}.global-contrast-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:.7rem}.global-contrast-summary span{padding:5px 7px;border-radius:7px;background:color-mix(in srgb,var(--panel) 80%,var(--line))}
.design-brief-head{margin:0 0 18px}.design-brief-head h1{font-size:2rem;margin:6px 0}.design-brief-head p{color:var(--muted)}
.starter-kits{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.starter-kits button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:14px;cursor:pointer}.starter-kits button:hover{border-color:var(--blue);transform:translateY(-1px)}.starter-kits span{font-size:.7rem;color:var(--muted);margin-top:3px}
body.dark .dual-style-editor section,body.dark .starter-kits button{border-color:#35516e}
@media(max-width:620px){.dual-style-editor,.global-color-grid,.starter-kits{grid-template-columns:1fr}}

.demo-pressed{transform:translateY(1px) scale(.985)!important}
.guided-project-summary{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.guided-project-summary h2{margin:0 0 12px}.guided-feature-list{display:flex;flex-wrap:wrap;gap:7px}
.guided-feature-list span{padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--blue) 10%,var(--panel));border:1px solid var(--line);font-size:.72rem;font-weight:750}
.guided-package-line{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.guided-package-line span{color:var(--blue);font-weight:850}

/* Supabase cloud project controls */
.cloud-account-panel{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))!important}
.cloud-signed-in{font-size:.82rem;margin:8px 0 12px}
.cloud-actions{display:flex;flex-wrap:wrap;gap:7px}
.cloud-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:8px 10px;font-weight:800;cursor:pointer}
.cloud-actions .demo-btn{border-color:var(--blue)}
.cloud-projects-title{font-size:.82rem;margin:18px 0 8px}
.cloud-project-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:11px;padding:10px;margin:7px 0}
.cloud-project-row.active{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 12%,transparent)}
.cloud-project-row div{min-width:0}.cloud-project-row strong{display:block;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cloud-project-row small{display:block;color:var(--muted);font-size:.62rem;margin-top:2px}
.cloud-project-row button{border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--blue);font-weight:800;padding:6px 9px;cursor:pointer}
.cloud-status{min-height:1.3em;margin:10px 0 0;font-size:.72rem;color:var(--muted)}
.cloud-status.success{color:#16803a}.cloud-status.error,.cloud-error{color:#b42318}
#cloud-otp-wrap{margin-top:10px}
body.dark .cloud-project-row{border-color:#35516e}
@media(max-width:560px){.cloud-project-row{align-items:flex-start}.cloud-actions{flex-direction:column}.cloud-actions button{width:100%}}

/* Account access in catalog header */
.catalog-account-button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:7px 11px;font-weight:800;cursor:pointer}
.catalog-account-button:hover{border-color:var(--blue);color:var(--blue)}

/* Global Theme Builder */
.theme-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:22px;padding-top:28px;padding-bottom:70px}
.theme-controls-panel,.theme-preview-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 14px 35px rgba(0,0,0,.06)}
.theme-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:.78rem}.theme-toolbar span{color:var(--muted)}
.theme-toolbar-actions{display:flex;gap:7px}.theme-toolbar-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:8px 10px;font-weight:800;cursor:pointer}
.theme-accordion details{border:1px solid var(--line);border-radius:14px;margin:9px 0;overflow:hidden}.theme-accordion summary{cursor:pointer;padding:13px 15px;font-weight:900}.theme-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 15px 15px}
.theme-fields label{font-size:.72rem;font-weight:800;color:var(--muted)}.theme-fields input,.theme-fields select{display:block;width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit}
.theme-fields input[type=color]{height:38px;padding:3px}.theme-fields .theme-check{display:flex;align-items:center;gap:7px;color:var(--text);padding-top:16px}.theme-check input{width:auto;margin:0}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.preview-toolbar button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:6px 8px;font-size:.68rem}.preview-toolbar button.active{background:var(--blue);color:#fff}
.theme-device{margin:auto;transition:width .2s}.theme-device.desktop{width:100%}.theme-device.tablet{width:76%}.theme-device.mobile{width:45%}
.theme-site-preview{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;color:#334155;transition:.2s}
.theme-site-preview header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 15px;z-index:3}.theme-site-preview header nav{font-size:.7rem}.theme-site-preview header button{border:0;border-radius:8px;padding:7px 10px;color:white;font-weight:800}
.tp-hero{padding:44px 26px}.tp-hero small{font-weight:900;color:var(--blue)}.tp-hero h2{font-size:1.65rem;margin:7px 0}.tp-hero p{font-size:.78rem;max-width:520px}.tp-hero a{font-weight:800;font-size:.78rem}
.tp-section{padding:60px 24px}.tp-section h3{margin:0 0 15px}.tp-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tp-card-grid article{transition:.2s}.tp-card-grid p{font-size:.67rem}
.theme-site-preview footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:22px 18px;font-size:.7rem}
.theme-preview-note{margin-top:12px;font-size:.7rem;color:var(--muted);text-align:center}
body.dark .theme-controls-panel,body.dark .theme-preview-panel{background:#0d2238;border-color:#35516e}
body.dark .theme-accordion details{border-color:#35516e}
@media(max-width:950px){.theme-builder-layout{grid-template-columns:1fr}.theme-preview-panel{order:-1}.theme-device.mobile{width:60%}}
@media(max-width:600px){.theme-fields{grid-template-columns:1fr}.theme-toolbar{align-items:flex-start;flex-direction:column}.theme-device.tablet{width:90%}.theme-device.mobile{width:72%}.tp-card-grid{grid-template-columns:1fr}}

/* Header + Hero live component editor */
.component-editor-page{background:#f4f7fb;color:#0b2540}
.editor-appbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;padding:14px 22px;background:#fff;border-bottom:1px solid #dce6f0}
.editor-back{border:1px solid #dce6f0;border-radius:9px;padding:10px 13px;text-decoration:none;color:#0879df;font-weight:800}.editor-title{display:flex;align-items:center;gap:12px}.editor-title strong{font-size:1.25rem;color:#0b4f9c}.editor-title em{font-style:normal;background:#e8f3ff;color:#0879df;padding:5px 8px;border-radius:7px;font-size:.72rem}
.editor-devices,.editor-actions{display:flex;gap:6px}.editor-devices button,.editor-actions button{border:1px solid #dce6f0;background:#fff;color:#16324d;border-radius:9px;padding:9px 12px;font-weight:800;cursor:pointer}.editor-devices button.active{background:#eaf4ff;color:#0879df}.editor-actions .demo-btn{background:#0879df;color:#fff}
.component-editor-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;padding:18px 18px 88px}.editor-controls{background:#fff;border:1px solid #dce6f0;border-radius:12px;overflow:hidden;height:max-content;position:sticky;top:86px}.editor-controls details{border-bottom:1px solid #e4ebf2}.editor-controls summary{padding:16px;color:#0879df;font-weight:900;cursor:pointer}.editor-fields{padding:0 16px 18px;display:grid;gap:11px}.editor-fields label{font-size:.72rem;font-weight:800}.editor-fields input,.editor-fields select,.editor-fields textarea{width:100%;margin-top:5px;border:1px solid #ccd9e5;border-radius:7px;padding:8px;background:#fff;color:#0b2540;font:inherit}.editor-fields input[type=color]{height:36px;padding:3px}.switch-row{display:flex;justify-content:space-between;align-items:center}.switch-row input{width:auto}.range-row{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:center}.range-row output{background:#f4f7fb;border:1px solid #dce6f0;border-radius:6px;padding:5px;text-align:center}
.editor-workspace{min-width:0}.editor-preview-frame{margin:auto;background:#fff;border:1px solid #dce6f0;border-radius:12px;padding:10px;transition:.25s}.editor-preview-frame.desktop{width:100%}.editor-preview-frame.tablet{width:72%}.editor-preview-frame.mobile{width:38%}.editor-site{margin:auto;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(10,38,66,.12)}
.live-header{display:flex;align-items:center;gap:20px;transition:.2s}.live-logo{display:flex;align-items:center;gap:7px;white-space:nowrap}.logo-mark{font-size:1.7rem;color:#69be28}.live-header nav{display:flex;gap:24px;flex:1}.live-header nav a{color:inherit;font-size:.8rem}.live-cta,.hero-buttons button{border:0;border-radius:7px;padding:11px 18px;color:#fff;font-weight:900}.mobile-menu{display:none;border:0;background:none;color:inherit;font-size:1.2rem}
.live-hero{min-height:430px;display:grid;place-items:center;text-align:center;padding:50px 28px;background:linear-gradient(rgba(4,25,47,var(--overlay)),rgba(4,25,47,var(--overlay))),linear-gradient(135deg,#4c789f,#0e2a47 55%,#07192b);position:relative}.live-hero[data-style=gradient]{background:linear-gradient(135deg,#1697e6,#0e2a47 70%)}.live-hero[data-style=minimal]{background:#f4f8fb}.live-hero[data-style=minimal] .hero-copy{color:#0e2a47!important}.hero-copy{max-width:760px}.hero-copy small{font-weight:900;letter-spacing:.12em}.hero-copy h1{font-size:clamp(2rem,4vw,4rem);line-height:1.05;margin:12px 0}.hero-copy p{font-size:1rem}.hero-buttons{display:flex;justify-content:center;gap:10px;margin-top:20px}.hero-buttons button:last-child{background:transparent;border:1px solid currentColor}
.editor-alternatives{margin-top:16px;background:#fff;border:1px solid #dce6f0;border-radius:12px;padding:14px}.alt-header-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.alt-header-card{text-decoration:none;color:#16324d;border:1px solid #dce6f0;border-radius:9px;padding:7px}.alt-header-card.active{outline:2px solid #0879df}.alt-header-card strong,.alt-header-card span{display:block;font-size:.72rem;margin-top:4px}.alt-header-card strong{color:#0879df}.alt-header-card .mini-site{height:92px;border-radius:6px;overflow:hidden;background:linear-gradient(135deg,#91b8d7,#1b476e)}.alt-header-card .mini-site>div{height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 6px;font-size:.38rem}.alt-header-card .mini-site>i{display:block;height:64px;background:linear-gradient(150deg,transparent 40%,rgba(3,28,53,.7) 41%),linear-gradient(#82acd0,#244f75)}
.editor-status{text-align:right;color:#16803a;font-size:.75rem}.editor-stepper{position:fixed;bottom:0;left:0;right:0;z-index:60;background:#061b31;color:#c9d7e5;padding:13px 28px;display:flex;align-items:center;gap:24px;font-size:.78rem}.editor-stepper strong{background:#0b579f;color:#fff;padding:10px 15px;border-radius:8px}.editor-stepper a{margin-left:auto;background:#0879df;color:#fff;padding:11px 16px;border-radius:8px;text-decoration:none;font-weight:900}
@media(max-width:1050px){.editor-appbar{grid-template-columns:1fr auto}.editor-title{grid-column:1/-1}.component-editor-shell{grid-template-columns:270px 1fr}.alt-header-grid{grid-template-columns:repeat(3,1fr)}.editor-stepper span{display:none}}
@media(max-width:760px){.editor-appbar{position:relative;grid-template-columns:1fr}.editor-devices,.editor-actions{flex-wrap:wrap}.component-editor-shell{grid-template-columns:1fr}.editor-controls{position:relative;top:auto}.editor-preview-frame.tablet,.editor-preview-frame.mobile{width:100%}.live-header nav,.live-header .live-cta{display:none}.mobile-menu{display:block;margin-left:auto}.alt-header-grid{grid-template-columns:repeat(2,1fr)}.editor-stepper{position:relative;flex-wrap:wrap}.editor-stepper a{margin-left:0}.live-hero{min-height:330px}}
body.dark.component-editor-page{background:#071727;color:#eef6ff}body.dark .editor-appbar,body.dark .editor-controls,body.dark .editor-alternatives,body.dark .editor-preview-frame{background:#0d2238;color:#eef6ff;border-color:#35516e}body.dark .editor-fields input,body.dark .editor-fields select,body.dark .editor-fields textarea{background:#091a2b;color:#eef6ff;border-color:#35516e}

/* Ordered customer website design flow */
.design-flow{position:sticky;top:0;z-index:35;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:10px max(16px,calc((100% - 1280px)/2))}
.design-flow-steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.flow-step{display:flex;align-items:center;gap:6px;flex:0 0 auto;text-decoration:none;color:var(--muted);font-size:.68rem;font-weight:850;padding:6px 9px;border-radius:999px;border:1px solid transparent}
.flow-step i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-style:normal;font-size:.62rem}
.flow-step:hover{color:var(--blue);border-color:var(--line)}
.flow-step.active{background:color-mix(in srgb,var(--blue) 12%,var(--panel));color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.flow-step.active i{background:var(--blue);border-color:var(--blue);color:#fff}
.design-flow-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:5px}
.flow-prev,.flow-next{text-decoration:none;font-weight:900;font-size:.72rem;padding:7px 10px;border-radius:8px}
.flow-prev{color:var(--muted)}.flow-next{background:var(--blue);color:#fff}
.start-design-flow{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:22px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.start-design-flow h2{margin:6px 0}.start-design-flow p{margin:0;color:var(--muted);max-width:760px}
.design-flow-prep{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px;background:color-mix(in srgb,var(--blue) 8%,var(--panel));border-bottom:1px solid var(--line);font-size:.75rem}.design-flow-prep span{color:var(--muted)}.design-flow-prep a{color:var(--blue);font-weight:900;text-decoration:none}
body.dark .design-flow{background:rgba(7,23,39,.94)}
.ordered-editor-stepper{overflow-x:auto;white-space:nowrap}
@media(max-width:760px){.design-flow{position:relative}.design-flow-actions{align-items:stretch}.flow-prev,.flow-next{text-align:center}.start-design-flow{flex-direction:column;align-items:flex-start}.design-flow-prep{align-items:flex-start;flex-direction:column}.ordered-editor-stepper span{display:none}}

/* Visual catalog thumbnails */
.visual-catalog-intro{display:flex;align-items:end;justify-content:space-between;gap:22px;margin:28px 0 18px}.visual-catalog-intro h2{font-size:2rem;margin:6px 0}.visual-catalog-intro p{max-width:780px;color:var(--muted);margin:0}.preview-project-link{color:var(--blue);font-weight:900;text-decoration:none;white-space:nowrap}
.visual-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-bottom:42px}.visual-catalog-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:13px;box-shadow:0 8px 24px rgba(0,0,0,.06)}.visual-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.selected-state{font-size:.65rem;color:var(--muted);font-weight:850}.selected-state.yes{color:#16803a}.visual-card-copy h3{margin:12px 0 5px}.visual-card-copy p{color:var(--muted);font-size:.82rem;min-height:2.5em}.visual-card-actions{display:flex;gap:8px}.visual-customize,.quick-select{flex:1;text-align:center;border-radius:9px;padding:9px 11px;font-weight:900;font-size:.76rem}.visual-customize{background:var(--blue);color:#fff;text-decoration:none}.quick-select{background:transparent;color:var(--blue);border:1px solid var(--blue);cursor:pointer}
.visual-site-thumb{height:230px;border-radius:12px;overflow:hidden;border:1px solid #d9e4ee;background:#eef5fb;color:#0e2a47}.visual-site-thumb .mini-nav,.nav-mini-top{height:42px;padding:0 12px;display:flex;align-items:center;gap:12px;background:#fff;font-size:.54rem}.visual-site-thumb .mini-nav b,.nav-mini-top b{margin-right:auto}.visual-site-thumb .mini-nav i,.nav-mini-top i{font-style:normal;background:#1697e6;color:#fff;padding:5px 7px;border-radius:5px}.mini-utility{height:20px;padding:0 9px;background:#07192b;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:.43rem}.mini-nav.centered b{margin:0 auto}.mini-nav.editorial{border-bottom:1px solid #dce6f0}.mini-hero{height:188px;padding:28px;display:flex;align-items:center;background:linear-gradient(145deg,#c9ddeb,#6b99bd 50%,#1d4668);position:relative}.mini-hero:after{content:'';position:absolute;right:0;bottom:0;width:52%;height:75%;background:linear-gradient(155deg,transparent 49%,rgba(9,42,68,.75) 50%)}.mini-hero>div{position:relative;z-index:1;max-width:60%}.mini-hero small,.mini-hero strong,.mini-hero span{display:block}.mini-hero small{font-size:.44rem;letter-spacing:.1em}.mini-hero strong{font-size:1rem;line-height:1.1;margin:4px 0}.mini-hero span{font-size:.5rem}.mini-hero em{display:inline-block;margin-top:8px;background:#1697e6;color:#fff;border-radius:4px;padding:5px 8px;font-size:.48rem;font-style:normal}.thumb-glass .mini-nav{margin:8px;border-radius:10px;background:rgba(255,255,255,.72);backdrop-filter:blur(7px)}.thumb-overlay .mini-nav{position:absolute;z-index:2;width:calc(100% - 28px);margin:8px 14px;background:rgba(6,25,43,.55);color:#fff;border-radius:7px}.thumb-centered .mini-hero{background:linear-gradient(145deg,#eee7df,#b99d80 55%,#3f3128)}.thumb-bold .mini-nav i{background:#69be28}.thumb-bold .mini-hero{background:linear-gradient(145deg,#9bc5e6,#0e2a47)}
.nav-thumb{height:185px}.nav-mini-screen{height:143px;padding:26px;background:linear-gradient(145deg,#eaf4fb,#bad5e9);display:flex;flex-direction:column;justify-content:center}.nav-mini-screen strong,.nav-mini-screen span{display:block}.nav-mini-screen span{font-size:.55rem;margin-top:5px}.nav-pill{margin:8px 14px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.08)}.nav-centered{justify-content:center}.nav-centered b{margin-right:0!important}.nav-mini-sidebar{float:left;width:34%;height:185px;background:#0e2a47;color:#fff;padding:16px 12px;display:flex;flex-direction:column;gap:12px;font-size:.55rem}.nav-mini-sidebar i{margin-top:auto;font-style:normal;background:#1697e6;padding:6px;border-radius:4px}.nav-mini-content{height:185px;padding:45px 20px 0 40%;background:#edf5fb}.nav-mini-content strong,.nav-mini-content span{display:block}.nav-mini-content span{font-size:.55rem;margin-top:5px}.nav-mini-mega{margin:6px 40px;background:#fff;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-shadow:0 8px 20px rgba(0,0,0,.08);font-size:.5rem}.nav-mini-mobile{height:45px;background:#0e2a47;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 14px}
body.dark .visual-catalog-card{background:#0d2238;border-color:#35516e}

/* Ordered flow done/skip */
.flow-step.done:not(.active){color:#16803a}.flow-step.done:not(.active) i{background:#16803a;color:#fff;border-color:#16803a}.skip-step{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;padding:7px 10px;font-weight:850;cursor:pointer}.flow-preview{margin-left:auto;color:var(--blue);font-weight:900;text-decoration:none;font-size:.72rem}

/* Sticky design cart */
.design-cart{position:fixed;right:18px;bottom:18px;z-index:90;border:0;border-radius:999px;background:#0e2a47;color:#fff;padding:12px 16px;box-shadow:0 14px 35px rgba(0,0,0,.25);font-weight:900;cursor:pointer}.design-cart b{display:inline-grid;place-items:center;margin-left:7px;min-width:23px;height:23px;border-radius:50%;background:#1697e6}.design-cart-drawer{position:fixed;right:0;top:0;bottom:0;width:min(390px,92vw);z-index:100;background:var(--panel);color:var(--text);border-left:1px solid var(--line);box-shadow:-22px 0 55px rgba(0,0,0,.18);transform:translateX(105%);transition:.22s;padding:18px;display:flex;flex-direction:column}.design-cart-drawer.open{transform:none}.cart-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}.cart-head button{border:0;background:transparent;color:inherit;font-size:1.6rem}.cart-body{overflow:auto;flex:1}.cart-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.75rem}.cart-row a{color:var(--blue);font-weight:850;text-decoration:none}.cart-row em{color:var(--muted)}.cart-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}.cart-foot a{text-align:center;background:var(--blue);color:#fff;text-decoration:none;padding:10px;border-radius:9px;font-weight:900;font-size:.72rem}

/* Navigation live editor */
.navigation-live-site{border-radius:10px;overflow:hidden;background:#eef5fb;min-height:500px}.navigation-live-site header{display:flex;align-items:center;gap:20px;padding:0 24px;height:78px;background:#fff}.navigation-live-site header nav{display:flex;flex:1}.navigation-live-site header nav a{font-size:.8rem;text-decoration:none;position:relative}.navigation-live-site header nav a:hover{color:var(--nav-hover)!important}.navigation-live-site header nav[data-active-style=underline] a.active:after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--nav-hover)}.navigation-live-site header nav[data-active-style=pill] a.active{background:#e8f3ff;padding:6px 9px;border-radius:999px}.navigation-live-site header nav[data-active-style=color] a.active{color:var(--nav-hover)!important}.navigation-live-site header>button:last-child{border:0;color:#fff;padding:10px 14px;border-radius:7px;font-weight:850}.navigation-live-site section{padding:90px 40px;min-height:420px;background:linear-gradient(145deg,#eaf4fb,#9ec3dd)}.navigation-live-site section h1{font-size:2.6rem;max-width:700px}.navigation-live-site section p{max-width:560px}.navigation-live-site #nav-mobile-trigger{display:none;border:0;background:none;font-size:1.4rem}

/* Assembled website preview */
.project-preview-layout{padding-top:24px;padding-bottom:70px}.project-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}.preview-completion{text-align:right}.preview-completion strong,.preview-completion span{display:block}.preview-completion span{font-size:.72rem;color:var(--muted)}.project-device{margin:auto;transition:.25s}.project-device.desktop{width:100%}.project-device.tablet{width:76%}.project-device.mobile{width:42%}.assembled-site{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 35px rgba(0,0,0,.1);background:#fff}.assembled-site>header{display:flex;align-items:center;gap:18px}.assembled-site>header nav{display:flex;flex:1}.assembled-site>header nav a{font-size:.75rem}.assembled-site>header>button:last-child{border:0;color:#fff;border-radius:7px;padding:9px 12px;font-weight:850}.assembled-menu{display:none;background:none!important;color:inherit!important;border:0!important}.assembled-hero{padding:85px 42px;text-align:center}.assembled-hero h1{font-size:clamp(2rem,4vw,4rem);max-width:900px;margin:10px auto}.assembled-hero p{max-width:650px;margin:auto}.assembled-hero div{margin-top:20px;display:flex;justify-content:center;gap:9px}.assembled-hero button{padding:10px 15px;border-radius:7px;border:1px solid currentColor}.assembled-hero button:first-child{background:#1697e6;color:#fff;border-color:#1697e6}.assembled-section{text-align:center}.assembled-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin:24px auto}.assembled-cards article{border:1px solid #dfe8f1;padding:22px}.assembled-form{max-width:650px;margin:20px auto;display:grid;gap:9px}.assembled-form input,.assembled-form textarea{padding:11px;border:1px solid #d6e0e8;border-radius:7px}.assembled-form button{background:#1697e6;color:#fff;border:0;padding:11px;border-radius:7px}.assembled-site footer{display:flex;justify-content:space-between;padding:28px}.preview-selection-summary{margin-top:20px}.preview-selection-summary #pv-selections{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preview-selection-summary span{border:1px solid var(--line);border-radius:8px;padding:8px;font-size:.7rem;color:var(--muted)}.preview-selection-summary span.done{color:#16803a}.preview-actions{display:flex;gap:8px;margin-top:16px}

/* responsive */
@media(max-width:800px){.visual-catalog-grid{grid-template-columns:1fr}.visual-catalog-intro{align-items:flex-start;flex-direction:column}.project-device.tablet,.project-device.mobile{width:100%}.assembled-site>header nav,.assembled-site>header>button:last-child{display:none}.assembled-menu{display:block!important;margin-left:auto}.assembled-cards{grid-template-columns:1fr}.preview-selection-summary #pv-selections{grid-template-columns:1fr 1fr}.project-preview-toolbar{align-items:flex-start;flex-direction:column}.preview-completion{text-align:left}.navigation-live-site header nav,.navigation-live-site header>button:last-child{display:none}.navigation-live-site #nav-mobile-trigger{display:block;margin-left:auto}}

/* Saved Supabase preview references */
.preview-reference-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.preview-reference-actions input{min-width:230px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--panel);color:var(--text)}
.saved-reference-panel{margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.saved-reference-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.saved-reference-head h2{margin:5px 0}.saved-reference-head p{color:var(--muted);margin:0}.saved-reference-head>span{font-size:.76rem;color:#16803a;font-weight:850}
.saved-reference-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.saved-reference-row:first-child{margin-top:14px}.saved-reference-row strong,.saved-reference-row span{display:block}.saved-reference-row span{font-size:.68rem;color:var(--muted);margin-top:3px}.saved-reference-row button{border:1px solid var(--blue);background:transparent;color:var(--blue);border-radius:8px;padding:7px 10px;font-weight:850;cursor:pointer}
.reference-viewer[hidden]{display:none}.reference-viewer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px}.reference-viewer-backdrop{position:absolute;inset:0;background:rgba(3,12,24,.78);backdrop-filter:blur(8px)}.reference-viewer-card{position:relative;z-index:1;width:min(1180px,96vw);max-height:92vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:18px}.reference-viewer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.reference-viewer-head h2{margin:4px 0}.reference-viewer-head button{border:0;background:transparent;color:inherit;font-size:1.8rem;cursor:pointer}.reference-viewer-body{border:1px solid var(--line);border-radius:12px;overflow:auto;background:#fff}.reference-viewer-body .assembled-site{box-shadow:none;border:0}.reference-data-details{margin-top:14px}.reference-data-details summary{cursor:pointer;font-weight:850}.reference-data-details pre{white-space:pre-wrap;font-size:.72rem;background:#081a2b;color:#eaf4fb;border-radius:10px;padding:12px;max-height:320px;overflow:auto}
@media(max-width:760px){.saved-reference-head,.saved-reference-row{flex-direction:column;align-items:flex-start}.preview-reference-actions{width:100%}.preview-reference-actions input,.preview-reference-actions button{width:100%}}

/* Rich website preview artwork for style-library cards */
.style-live-preview{
  height:230px;
  border-radius:14px 14px 0 0;
  overflow:hidden;
  position:relative;
  margin:-1px -1px 0;
  border-bottom:1px solid var(--line);
  background:#eef3f7;
}
.style-live-preview .slp-nav{
  height:48px;display:flex;align-items:center;gap:14px;padding:0 18px;
  background:#fff;color:#0d2035;font-size:.52rem;position:relative;z-index:2
}
.style-live-preview .slp-nav b{font-size:.76rem;margin-right:auto}
.style-live-preview .slp-nav i{
  font-style:normal;padding:6px 8px;border:1px solid currentColor;border-radius:5px;font-weight:900
}
.style-live-preview .slp-hero{
  height:182px;padding:28px 34px;display:flex;align-items:center;position:relative
}
.style-live-preview .slp-hero>div{position:relative;z-index:2;max-width:62%}
.style-live-preview .slp-hero strong{display:block;font-size:1.35rem;line-height:1.0}
.style-live-preview .slp-hero p{font-size:.58rem;line-height:1.45}
.style-live-preview .slp-hero em{display:inline-block;font-style:normal;font-size:.52rem;font-weight:900;padding:7px 9px;border-radius:4px}

/* Static Press */
.brutalist-preview{background:#111;color:#fff}
.brutalist-preview .slp-nav{background:#0a0a0a;color:#fff}
.brutalist-preview .slp-hero{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg,#202020 0 22px,#282828 22px 23px,#1b1b1b 23px 62px);
}
.brutalist-preview .slp-hero:after{
  content:"";position:absolute;right:8%;bottom:0;width:38%;height:78%;
  background:linear-gradient(135deg,transparent 40%,#333 41% 43%,transparent 44%),
             linear-gradient(90deg,transparent 40%,rgba(255,255,255,.12) 41% 43%,transparent 44%);
  opacity:.85
}
.brutalist-preview .slp-hero em{border:1px solid #fff;color:#fff}

/* Wheat & Ash */
.editorial-preview{background:#eee8dc;color:#3d3026}
.editorial-preview .slp-nav{background:#fbf7f0;color:#3d3026}
.editorial-preview .slp-nav i{background:#536f42;color:#fff;border-color:#536f42}
.editorial-preview .slp-hero{
  background:
    radial-gradient(circle at 82% 56%,#9b7647 0 16%,transparent 17%),
    radial-gradient(circle at 72% 63%,#c6a77d 0 12%,transparent 13%),
    linear-gradient(90deg,#efe4d2 0 58%,#c7b190 58% 100%);
}
.editorial-preview .slp-hero strong{font-family:Georgia,serif;font-size:1.55rem}
.editorial-preview .slp-hero em{background:#536f42;color:#fff}

/* Fluxline */
.saas-preview{background:#070f21;color:#fff}
.saas-preview .slp-nav{background:#07101f;color:#fff}
.saas-preview .slp-nav i{background:#6255ff;border-color:#6255ff}
.saas-preview .slp-hero{
  background:
    radial-gradient(ellipse at 80% 60%,rgba(98,85,255,.55),transparent 28%),
    radial-gradient(ellipse at 75% 75%,rgba(14,151,230,.35),transparent 32%),
    linear-gradient(135deg,#07101f,#0a1531 70%,#121741);
}
.saas-preview .slp-hero:after{
  content:"";position:absolute;right:5%;bottom:12%;width:46%;height:38%;
  border-top:2px solid #7568ff;border-radius:50%;transform:rotate(-10deg);
  box-shadow:0 -12px 0 -10px #4aa7ff,0 -24px 0 -22px #a95cff
}
.saas-preview .slp-hero strong u{text-decoration:none;color:#6255ff}
.saas-preview .slp-hero em{background:#6255ff;color:#fff}

/* Bloomtown */
.maximal-preview{background:#f7eee7;color:#412821}
.maximal-preview .slp-nav{background:#fff7f2;color:#412821}
.maximal-preview .slp-nav i{background:#ff6b64;color:#fff;border-color:#ff6b64}
.maximal-preview .slp-hero{
  background:
    radial-gradient(circle at 80% 25%,#ffb544 0 7%,transparent 8%),
    radial-gradient(circle at 72% 42%,#f05d6d 0 8%,transparent 9%),
    radial-gradient(circle at 88% 52%,#41a6a1 0 8%,transparent 9%),
    radial-gradient(circle at 76% 70%,#d45ca6 0 9%,transparent 10%),
    linear-gradient(90deg,#f8e9dc 0 56%,#efb2ae 56% 100%);
}
.maximal-preview .slp-hero strong{font-family:Georgia,serif;font-size:1.55rem}
.maximal-preview .slp-hero em{background:#ff6b64;color:#fff}

/* Keep floating cart compact and prevent duplicate labels */
.design-cart{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:auto!important;
  min-width:0!important;
  max-width:max-content!important;
  white-space:nowrap!important;
}
.design-cart::before,.design-cart::after{content:none!important;display:none!important}
.design-cart>span{display:inline!important;margin:0!important}
.design-cart>b{margin:0!important;flex:0 0 auto!important}

/* Legacy floating selections button retired; .design-cart is the only floating project control. */
.selection-fab{display:none!important}

/* =========================================================
   Catalog visual stability fixes — Aug 2026
   ========================================================= */

/* Keep the floating My Website control clear of the fixed editor
   stepper on live editor pages. The stepper is fixed at the bottom
   on desktop, so the cart needs its own lane above it. */
.editor-stepper ~ .design-cart,
.ordered-editor-stepper ~ .design-cart{
  bottom:82px;
}

/* Reserve breathing room at the end of catalog pages so the fixed
   cart never hides the last row of controls when the page is fully
   scrolled. */
body{
  padding-bottom:76px;
}

/* Keep the floating cart contained on smaller screens. */
.design-cart{
  max-width:calc(100vw - 28px);
  white-space:nowrap;
}

/* Header/Hero thumbnail sizing. Base previews are exactly 230px tall.
   Special headers that add utility bars or floating margins must use
   a shorter hero so their content does not get clipped. */
.thumb-glass .mini-hero{
  height:172px;
}
.thumb-utility .mini-hero{
  height:168px;
}

/* HD-04 uses an overlay menu. Anchor it to its own thumbnail rather
   than the page/card so it cannot span outside the preview frame. */
.thumb-overlay{
  position:relative;
  overflow:hidden;
}
.thumb-overlay .mini-nav{
  position:absolute;
  top:8px;
  left:14px;
  right:14px;
  width:auto;
  margin:0;
  box-sizing:border-box;
  z-index:2;
}
.thumb-overlay .mini-hero{
  height:100%;
  min-height:100%;
}

/* Action rows should wrap instead of forcing controls off-screen. */
.design-flow-actions,
.visual-card-actions,
.preview-actions,
.editor-actions{
  flex-wrap:wrap;
}
.flow-prev,
.flow-next,
.flow-preview{
  max-width:100%;
}

/* Prevent long page/action text from creating horizontal overflow. */
.flow-prev,.flow-next,.flow-preview,.preview-project-link,
.visual-customize,.quick-select{
  overflow-wrap:anywhere;
}

@media(max-width:760px){
  body{padding-bottom:66px}
  .design-cart{
    right:10px;
    bottom:10px;
    padding:10px 13px;
    font-size:.78rem;
  }
  /* The editor stepper becomes part of normal document flow on mobile,
     so the cart can return to the standard bottom position. */
  .editor-stepper ~ .design-cart,
  .ordered-editor-stepper ~ .design-cart{
    bottom:10px;
  }
  .thumb-overlay .mini-nav{
    left:8px;
    right:8px;
    padding-left:8px;
    padding-right:8px;
    gap:7px;
  }
  .thumb-overlay .mini-nav span{font-size:.5rem}
  .thumb-overlay .mini-nav i{padding:4px 6px}
}

@media(max-width:420px){
  .design-cart-label{display:none}
  .design-cart b{margin-left:0}
  .design-flow-actions{gap:7px}
  .flow-prev,.flow-next,.flow-preview{font-size:.68rem;padding:7px 8px}
}


/* =========================================================
   My Website drawer readability + click-outside behavior
   Shared by every catalog page through catalog.css/catalog.js
   ========================================================= */
.design-cart-backdrop{
  position:fixed;
  inset:0;
  z-index:998;
  background:rgba(4,15,28,.58);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.design-cart-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.design-cart-drawer{
  z-index:999 !important;
  background:#ffffff !important;
  color:#14283d !important;
  border-left:1px solid #d8e3ed !important;
  box-shadow:-24px 0 70px rgba(0,0,0,.28) !important;
  isolation:isolate;
}
.design-cart-drawer.open{
  transform:translateX(0);
}
.design-cart-drawer .cart-head{
  background:#ffffff;
}
.design-cart-drawer .cart-head strong{
  color:#0e2a47;
}
.design-cart-drawer .cart-head button{
  color:#0e2a47;
  cursor:pointer;
}
.design-cart-drawer .cart-row{
  color:#51677b;
}
.design-cart-drawer .cart-row span{
  color:#51677b;
}
.design-cart-drawer .cart-row a{
  color:#078de0;
}
.design-cart-drawer .cart-foot{
  background:#ffffff;
}
.design-cart-drawer .cart-foot a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
}

body.dark .design-cart-drawer,
body.dark .design-cart-drawer .cart-head,
body.dark .design-cart-drawer .cart-foot{
  background:#0d2238 !important;
  color:#f4f8fb !important;
  border-color:#35516e !important;
}
body.dark .design-cart-drawer .cart-head strong,
body.dark .design-cart-drawer .cart-head button{
  color:#f4f8fb !important;
}
body.dark .design-cart-drawer .cart-row,
body.dark .design-cart-drawer .cart-row span{
  color:#c9d6e2 !important;
}
body.dark .design-cart-drawer .cart-row a{
  color:#62c9ff !important;
}

/* Keep the floating trigger underneath the modal layer while open. */
body.design-cart-open .design-cart{
  z-index:90 !important;
}
body.design-cart-open{
  overflow:hidden;
}

@media(max-width:600px){
  .design-cart-drawer{
    width:min(360px,94vw);
    padding:16px;
  }
  .cart-foot{
    grid-template-columns:1fr;
  }
}


/* Catalog selection cleanup:
   The real Select/Selected pill is the single selection indicator.
   Suppress the retired double-click demo badge everywhere. */
.specimen.demo-selected::after{display:none!important;content:none!important}

/* ==========================================================
   2026 CATALOG WORKSPACE OVERHAUL
   ========================================================== */
:root{--ws-side:#08172d;--ws-side2:#0d2141;--ws-purple:#4f46e5;--ws-violet:#6d5dfc;--ws-line:#dfe6f0;--ws-bg:#f7f9fc;--ws-card:#fff;--ws-muted:#6b7a90}
body.catalog-workspace{background:var(--ws-bg);min-height:100vh;padding-left:238px;padding-right:320px;color:#0f1d36}
body.catalog-workspace .legacy-topbar{display:none}
body.catalog-workspace main{min-width:0}
body.catalog-workspace .wrap{width:min(1180px,calc(100% - 38px))}
.builder-sidebar{position:fixed;inset:0 auto 0 0;width:238px;z-index:100;background:linear-gradient(180deg,var(--ws-side),#061326 72%,#081831);color:#eef4ff;padding:20px 14px 16px;display:flex;flex-direction:column;overflow:auto;box-shadow:10px 0 34px rgba(8,23,45,.12)}
.workspace-brand{display:flex;gap:11px;align-items:center;padding:2px 5px 24px}.workspace-logo{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#2d8cff,#6d48ff);box-shadow:inset 0 0 0 3px rgba(255,255,255,.13),0 8px 20px rgba(52,88,255,.3);font-weight:900}.workspace-brand b{display:block;font-size:.98rem}.workspace-brand small{display:block;color:#9eabc0;font-size:.62rem;margin-top:1px}.workspace-label{font-size:.64rem;font-weight:800;letter-spacing:.08em;color:#91a2ba;padding:0 7px 8px}.builder-steps,.project-tools{display:grid;gap:4px}.builder-step,.project-tools a{min-height:40px;display:flex;align-items:center;gap:10px;border-radius:8px;padding:6px 8px;color:#eef4ff;font-size:.78rem;transition:.18s ease}.builder-step:hover,.project-tools a:hover{background:rgba(255,255,255,.07)}.builder-step.active,.project-tools a.active{background:linear-gradient(90deg,#4055ef,#6545f5);box-shadow:0 8px 22px rgba(77,72,235,.25)}.builder-step i{font-style:normal;width:25px;height:25px;border:1px solid #71809a;border-radius:6px;display:grid;place-items:center;font-size:.67rem;font-weight:800}.builder-step.active i{background:#fff;color:#4f46e5;border-color:#fff}.builder-step .step-state{margin-left:auto;width:20px;height:20px;border:1px solid #6c7d97;border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:#fff}.builder-step .step-state:not(:empty){background:#42c56b;border-color:#42c56b;color:#071c13}.sidebar-divider{height:1px;background:#2a3b56;margin:16px 6px}.project-tools a span{width:22px;text-align:center;font-size:1rem}.project-tools a b{margin-left:auto;background:#4f46e5;min-width:22px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:.68rem}.sidebar-help{margin-top:auto;border:1px solid #253b62;background:linear-gradient(145deg,#10264a,#0c1d39);border-radius:12px;padding:13px;color:#fff}.sidebar-help b,.sidebar-help small,.sidebar-help span{display:block}.sidebar-help small{color:#a5b2c5;font-size:.67rem;margin:4px 0 9px}.sidebar-help span{font-size:.7rem;color:#a7bcff;font-weight:800}
.workspace-rail{position:fixed;inset:0 0 0 auto;width:320px;z-index:80;background:#fff;border-left:1px solid var(--ws-line);padding:22px 16px;overflow:auto}.rail-head,.rail-selection-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.rail-head small{font-size:.58rem;letter-spacing:.08em;color:#7c8ba1;font-weight:900}.rail-head h3{font-size:.94rem;margin:2px 0 0}.rail-head a,.rail-selection-head a{font-size:.68rem;color:#4f46e5;font-weight:800}.mini-site{border:1px solid #dfe5ee;border-radius:10px;overflow:hidden;margin:14px 0;background:#fff;box-shadow:0 10px 26px rgba(13,33,65,.06)}.mini-nav{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:.55rem}.mini-nav span{font-size:.43rem;color:#50627a}.mini-hero{min-height:190px;padding:30px 18px;background:radial-gradient(circle at 78% 30%,rgba(82,167,255,.72),transparent 30%),linear-gradient(145deg,#063d7a,#071f43 70%,#0a1630);color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.mini-hero small{font-size:.5rem;opacity:.72}.mini-hero strong{font-size:1.38rem;line-height:1.04;margin:5px 0}.mini-hero p{font-size:.58rem;max-width:190px;opacity:.8}.mini-hero button{border:0;border-radius:5px;background:#2f67ff;color:#fff;padding:7px 10px;font-size:.55rem;font-weight:800}.mini-services{height:72px;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;font-size:.55rem;color:#263952}.rail-selections{border:1px solid #e1e7ef;border-radius:10px;overflow:hidden;margin-top:12px}.rail-selection-head{padding:11px 12px;border-bottom:1px solid #e6ebf2;font-size:.74rem}.rail-row{height:35px;padding:0 11px;border-bottom:1px solid #edf1f5;display:flex;align-items:center;justify-content:space-between;font-size:.65rem}.rail-row:last-child{border-bottom:0}.rail-row.done span{color:#203047}.rail-row.done span::first-letter{color:#34b862}.rail-row em{font-style:normal;color:#71809a}.rail-row.done em{color:#4f46e5}.full-preview-button{height:48px;margin-top:15px;border-radius:8px;background:linear-gradient(90deg,#4f46e5,#633ef0);display:grid;place-items:center;color:#fff;font-size:.76rem;font-weight:800}.workspace-menu-toggle{display:none;position:fixed;z-index:110;top:12px;left:12px;width:42px;height:42px;border:0;border-radius:10px;background:#0c1e39;color:#fff;font-size:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.2)}
body.catalog-workspace .hero{padding:40px 0 20px}body.catalog-workspace .hero h1{font-size:clamp(2rem,3.5vw,3.4rem);letter-spacing:-.045em}body.catalog-workspace .hero p{font-size:.92rem}.catalog-workspace .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:16px}.catalog-workspace .specimen{border-radius:13px;padding:12px;min-height:180px;box-shadow:0 6px 18px rgba(21,41,72,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.catalog-workspace .specimen:hover{transform:translateY(-2px);border-color:#b7c4ff;box-shadow:0 13px 30px rgba(47,61,135,.10)}.catalog-workspace .sample{border-radius:9px;min-height:115px}.catalog-workspace .specimen h3{font-size:.83rem}.catalog-workspace .specimen small{font-size:.68rem}.catalog-workspace .select-design{border-radius:7px}.catalog-workspace .builder-selected{border-color:#5b5af6!important;box-shadow:0 0 0 1px #5b5af6,0 12px 28px rgba(79,70,229,.11)!important}
/* Home dashboard */
.builder-home main{padding-top:0}.builder-home .hero{border-bottom:1px solid var(--ws-line);background:rgba(255,255,255,.8)}.builder-home .hero .wrap{padding-top:8px}.builder-home .hero h1{font-size:2.1rem;margin-bottom:8px}.builder-home .hero p{max-width:720px}.builder-home .start-design-flow{display:none}.builder-home .catalog-grid{padding-top:24px}.builder-home .specimen{min-height:205px}.builder-home .specimen .sample{min-height:128px;background:linear-gradient(145deg,#eef4ff,#fff)}
@media(max-width:1450px){body.catalog-workspace{padding-right:0}.workspace-rail{display:none}.catalog-workspace .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){body.catalog-workspace{padding-left:0}.builder-sidebar{transform:translateX(-102%);transition:.2s ease;box-shadow:20px 0 45px rgba(0,0,0,.25)}body.workspace-menu-open .builder-sidebar{transform:none}.workspace-menu-toggle{display:block}.catalog-workspace .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-workspace .hero{padding-top:74px}}
@media(max-width:650px){body.catalog-workspace .wrap{width:min(100% - 24px,1180px)}.catalog-workspace .catalog-grid{grid-template-columns:1fr}.builder-sidebar{width:min(290px,86vw)}}
.builder-sidebar .sidebar-divider.compact{margin-top:12px;margin-bottom:10px}.secondary-tools{gap:2px}.secondary-tools a{min-height:32px;color:#c8d3e4;font-size:.7rem}.secondary-tools a span{font-size:.78rem;color:#8ca2c2}

/* =========================================================
   Catalog workspace v1.1 — larger preview + tablet/mobile UX
   ========================================================= */
@media (min-width:1280px){
  body.catalog-workspace{padding-right:430px}
  .workspace-rail{display:block;width:430px;padding:24px 22px}
  .rail-head h3{font-size:1.08rem}
  .mini-site{margin:18px 0;border-radius:14px}
  .mini-nav{height:48px;padding:0 14px;font-size:.66rem}
  .mini-nav span{font-size:.52rem}
  .mini-hero{min-height:280px;padding:42px 28px}
  .mini-hero small{font-size:.58rem}
  .mini-hero strong{font-size:2rem;line-height:1.02;margin:8px 0}
  .mini-hero p{font-size:.7rem;max-width:260px;line-height:1.45}
  .mini-hero button{padding:9px 14px;font-size:.66rem}
  .mini-services{height:100px;font-size:.66rem}
  .rail-selection-head{font-size:.82rem;padding:13px 14px}
  .rail-row{height:39px;padding:0 13px;font-size:.7rem}
  .full-preview-button{height:54px;font-size:.84rem}
}

.workspace-preview-toggle{display:none;position:fixed;z-index:109;top:12px;right:12px;height:42px;padding:0 15px;border:0;border-radius:10px;background:linear-gradient(90deg,#4f46e5,#633ef0);color:#fff;font-size:.75rem;font-weight:900;box-shadow:0 6px 18px rgba(50,45,170,.24)}
.workspace-rail-close{display:none;width:36px;height:36px;border:1px solid #dfe5ee;border-radius:9px;background:#fff;color:#14283d;font-size:1rem;font-weight:900;place-items:center;flex:0 0 auto}
.workspace-rail-backdrop{display:none;position:fixed;inset:0;z-index:118;background:rgba(3,12,27,.48);backdrop-filter:blur(2px)}

/* Tablet: navigation and preview become independent drawers. */
@media (max-width:1279px){
  body.catalog-workspace{padding-left:0;padding-right:0}
  .builder-sidebar{transform:translateX(-102%);transition:transform .22s ease;box-shadow:20px 0 45px rgba(0,0,0,.25)}
  body.workspace-menu-open .builder-sidebar{transform:none}
  .workspace-menu-toggle,.workspace-preview-toggle{display:block}
  .workspace-rail{display:block;transform:translateX(104%);transition:transform .24s ease;z-index:120;width:min(520px,88vw);padding:20px 18px;box-shadow:-20px 0 50px rgba(0,0,0,.22)}
  body.workspace-preview-open .workspace-rail{transform:none}
  body.workspace-preview-open .workspace-rail-backdrop{display:block}
  .workspace-rail-close{display:grid}
  .rail-head{align-items:flex-start}
  .rail-head>div{flex:1}
  .mini-nav{height:46px;padding:0 14px;font-size:.65rem}
  .mini-nav span{font-size:.5rem}
  .mini-hero{min-height:300px;padding:44px 28px}
  .mini-hero strong{font-size:2.1rem}
  .mini-hero p{font-size:.72rem;max-width:280px}
  .mini-hero button{padding:9px 14px;font-size:.65rem}
  .mini-services{height:96px;font-size:.66rem}
  .catalog-workspace .hero{padding-top:74px}
  .catalog-workspace .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mid-size tablets */
@media (max-width:900px){
  body.catalog-workspace .wrap{width:min(100% - 30px,900px)}
  .catalog-workspace .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .catalog-workspace .specimen{min-height:165px}
  .catalog-workspace .sample{min-height:105px}
  .project-preview-toolbar{align-items:flex-start;flex-wrap:wrap}
  .project-device.tablet,.project-device.mobile{width:100%}
  .assembled-cards{grid-template-columns:repeat(2,1fr)}
  .preview-selection-summary #pv-selections{grid-template-columns:repeat(2,1fr)}
}

/* Phone: full-width drawers and single-column content. */
@media (max-width:650px){
  body.catalog-workspace .wrap{width:min(100% - 20px,650px)}
  .workspace-menu-toggle{left:10px;top:10px;width:44px;height:44px}
  .workspace-preview-toggle{right:10px;top:10px;height:44px;padding:0 12px}
  .builder-sidebar{width:min(320px,92vw);padding-top:18px}
  .workspace-rail{width:100vw;padding:16px 12px 24px}
  .workspace-rail-close{width:40px;height:40px}
  .rail-head{padding:0 2px}
  .rail-head h3{font-size:1rem}
  .mini-site{border-radius:12px;margin:14px 0}
  .mini-nav{height:42px;padding:0 10px}
  .mini-nav span{font-size:.44rem}
  .mini-hero{min-height:255px;padding:34px 22px}
  .mini-hero strong{font-size:1.75rem}
  .mini-hero p{font-size:.68rem}
  .mini-services{height:84px;font-size:.58rem}
  .catalog-workspace .catalog-grid{grid-template-columns:1fr;gap:12px}
  .catalog-workspace .hero{padding-top:70px;padding-bottom:14px}
  .catalog-workspace .hero h1{font-size:clamp(1.8rem,10vw,2.6rem)}
  .catalog-workspace .hero p{font-size:.86rem}
  .tabs{margin-left:-2px;margin-right:-2px;padding-bottom:12px}
  .tab{min-height:42px;display:flex;align-items:center}
  .catalog-workspace .specimen{padding:11px;min-height:160px}
  .catalog-workspace .sample{min-height:120px}
  .project-preview-layout{padding-top:72px}
  .project-preview-toolbar{display:grid;grid-template-columns:1fr;gap:12px}
  .preview-completion{text-align:left}
  .project-device.desktop,.project-device.tablet,.project-device.mobile{width:100%}
  .assembled-site>header{padding:12px!important;gap:8px}
  .assembled-site>header nav{display:none}
  .assembled-menu{display:block!important}
  .assembled-hero{padding:55px 20px}
  .assembled-hero div{flex-wrap:wrap}
  .assembled-cards{grid-template-columns:1fr}
  .assembled-site footer{flex-direction:column;gap:10px;text-align:center}
  .preview-selection-summary #pv-selections{grid-template-columns:1fr}
  .preview-actions{flex-direction:column}
  .preview-actions>*{width:100%}
}

/* ===== Unified dynamic website preview renderer ===== */
.pv-live-site{width:100%;min-height:100%;background:var(--pv-bg);color:var(--pv-body);font-family:var(--pv-font);overflow:hidden}.pv-live-site *{box-sizing:border-box}.pv-header{min-height:70px;padding:0 24px;display:flex;align-items:center;gap:18px;background:var(--pv-dark);color:var(--pv-header-text);position:relative;z-index:2}.pv-brand{white-space:nowrap}.pv-nav{display:flex;align-items:center;gap:22px;flex:1;justify-content:center}.pv-nav a{color:inherit;text-decoration:none;font-size:.76rem}.pv-menu{display:none;border:0;background:transparent;color:inherit;font-size:1.2rem}.pv-cta,.pv-primary,.pv-secondary,.pv-form button{border:0;border-radius:8px;padding:10px 15px;font-weight:850;cursor:pointer}.pv-cta,.pv-primary,.pv-form button{background:var(--pv-primary);color:#fff}.pv-secondary{background:transparent;color:var(--pv-heading);border:1px solid color-mix(in srgb,var(--pv-heading) 30%,transparent)}.pv-pill{border-radius:999px!important}.pv-glass{background:color-mix(in srgb,var(--pv-primary) 76%,transparent)!important;backdrop-filter:blur(10px);border:1px solid #ffffff55!important}.pv-glow{box-shadow:0 0 20px color-mix(in srgb,var(--pv-primary) 50%,transparent)}.pv-luxury{background:linear-gradient(135deg,var(--pv-primary),#d7a83e)!important}.pv-square{border-radius:2px!important}.pv-3d{box-shadow:0 7px 0 color-mix(in srgb,var(--pv-primary) 65%,#000)!important;transform:translateY(-2px)}
.pv-header-03{margin:12px;border-radius:16px;min-height:58px}.pv-header-04{position:absolute;left:0;right:0;background:linear-gradient(#0008,transparent);}.pv-header-05 .pv-brand{font-size:1.25rem}.pv-header-06{justify-content:center}.pv-header-06 .pv-nav{flex:0}.pv-header-07{border-bottom:3px solid var(--pv-primary)}.pv-header-08{background:var(--pv-bg);color:var(--pv-heading);border-bottom:1px solid var(--pv-border)}
.pv-nav-02{justify-content:flex-start}.pv-nav-03 a{padding:7px 10px;border-radius:999px;background:#ffffff14}.pv-nav-04{justify-content:flex-end}.pv-nav-05{gap:10px}.pv-nav-05 a{border-bottom:2px solid transparent;padding:8px 0}.pv-nav-05 a:first-child{border-color:var(--pv-primary)}.pv-nav-06 a{font-weight:900;text-transform:uppercase;letter-spacing:.08em}.pv-nav-07 a:first-child{background:var(--pv-primary);padding:7px 11px;border-radius:7px}.pv-nav-08{justify-content:space-around}
.pv-hero{min-height:430px;padding:76px 6%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);align-items:center;gap:30px;background:linear-gradient(135deg,var(--pv-soft),var(--pv-bg));color:var(--pv-heading);position:relative;overflow:hidden}.pv-hero-copy{position:relative;z-index:1;max-width:720px}.pv-hero small,.pv-section>small{font-size:.66rem;letter-spacing:.13em;font-weight:900;color:var(--pv-primary)}.pv-hero h1{font-size:clamp(2rem,4vw,4.5rem);line-height:.98;margin:10px 0 16px;letter-spacing:-.04em}.pv-hero p{font-size:1rem;line-height:1.65;max-width:620px}.pv-hero-actions{display:flex;gap:10px;margin-top:22px}.pv-hero-art{min-height:310px;position:relative}.pv-hero-art i{position:absolute;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--pv-primary) 85%,white),color-mix(in srgb,var(--pv-dark) 82%,black));filter:saturate(1.15);box-shadow:0 24px 70px color-mix(in srgb,var(--pv-primary) 25%,transparent)}.pv-hero-art i:nth-child(1){width:250px;height:250px;right:7%;top:10%}.pv-hero-art i:nth-child(2){width:150px;height:150px;right:48%;top:48%;opacity:.55}.pv-hero-art i:nth-child(3){width:85px;height:85px;right:5%;bottom:2%;opacity:.4}
.pv-section{padding:var(--pv-section-space) 5%;text-align:center;background:var(--pv-bg);color:var(--pv-body)}.pv-section.pv-alt{background:var(--pv-soft)}.pv-section h2{color:var(--pv-heading);font-size:clamp(1.5rem,2.7vw,2.7rem);margin:7px 0 24px}.pv-section-copy{max-width:720px;margin:auto}.pv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px;margin:0 auto}.pv-cards article{background:var(--pv-surface);border:1px solid var(--pv-border);border-radius:var(--pv-radius);padding:24px;text-align:left;min-height:145px;box-shadow:0 8px 30px #0d21410c}.pv-cards article span{display:block;color:var(--pv-primary);font-size:.68rem;font-weight:900}.pv-cards article b{display:block;color:var(--pv-heading);font-size:1.05rem;margin:10px 0}.pv-cards article p{font-size:.82rem;line-height:1.5;margin:0}.pv-card-03 article,.pv-card-07 article{border-top:4px solid var(--pv-primary)}.pv-card-04 article{border-radius:4px}.pv-card-05 article{box-shadow:0 18px 35px color-mix(in srgb,var(--pv-dark) 12%,transparent);border:0}.pv-card-06 article{background:linear-gradient(145deg,var(--pv-surface),var(--pv-soft))}.pv-card-08 article{border-color:var(--pv-primary)}
.pv-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:120px 120px;gap:10px;max-width:900px;margin:auto}.pv-gallery i{display:block;border-radius:var(--pv-radius);background:linear-gradient(145deg,var(--pv-dark),var(--pv-primary))}.pv-gallery i:first-child{grid-row:1/3}.pv-gallery i:nth-child(3){background:linear-gradient(145deg,var(--pv-primary),var(--pv-soft))}.pv-gallery i:nth-child(4){background:linear-gradient(145deg,var(--pv-soft),var(--pv-dark))}.pv-form{max-width:680px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.pv-form input,.pv-form textarea{padding:13px;border:1px solid var(--pv-border);border-radius:10px;background:var(--pv-surface);font:inherit}.pv-form textarea{grid-column:1/-1;min-height:110px}.pv-form button{grid-column:1/-1;justify-self:start}.pv-footer{padding:30px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--pv-footer);color:var(--pv-footer-text)}.pv-footer small{opacity:.65}.pv-has-effect .pv-hero-art i:first-child{animation:pvFloat 4s ease-in-out infinite alternate}@keyframes pvFloat{to{transform:translateY(-13px) rotate(5deg)}}
/* compact rail uses the same renderer, scaled to a real page composition */
.mini-site{height:clamp(390px,48vh,520px)!important;min-height:390px!important;position:relative;background:#fff!important}.mini-site>.pv-live-site{font-size:7px;transform-origin:top left}.pv-compact .pv-header{min-height:44px;padding:0 12px;gap:7px}.pv-compact .pv-brand{font-size:.72rem}.pv-compact .pv-nav{gap:7px}.pv-compact .pv-nav a{font-size:.48rem}.pv-compact .pv-cta{font-size:.48rem;padding:5px 7px}.pv-compact .pv-hero{min-height:235px;padding:34px 18px;grid-template-columns:1.2fr .8fr;gap:8px}.pv-compact .pv-hero h1{font-size:1.75rem;margin:5px 0 8px}.pv-compact .pv-hero p{font-size:.63rem;line-height:1.45}.pv-compact .pv-hero small{font-size:.44rem}.pv-compact .pv-hero-actions{margin-top:10px}.pv-compact .pv-primary{font-size:.5rem;padding:6px 8px}.pv-compact .pv-hero-art{min-height:160px}.pv-compact .pv-hero-art i:nth-child(1){width:130px;height:130px}.pv-compact .pv-hero-art i:nth-child(2){width:72px;height:72px}.pv-compact .pv-hero-art i:nth-child(3){width:42px;height:42px}.pv-compact .pv-section{padding:27px 13px}.pv-compact .pv-section h2{font-size:1.05rem;margin:4px 0 12px}.pv-compact .pv-cards{gap:6px}.pv-compact .pv-cards article{padding:10px;min-height:76px;border-radius:7px}.pv-compact .pv-cards article b{font-size:.68rem;margin:4px 0}.pv-compact .pv-cards article p{font-size:.47rem}.pv-compact .pv-footer{padding:15px 12px;font-size:.55rem}.pv-compact .pv-footer small{display:none}
.project-device .pv-live-site{min-height:640px}.project-device.tablet{max-width:820px}.project-device.mobile{max-width:430px}.project-device.mobile .pv-header,.project-device.tablet .pv-header{padding:12px 14px}.project-device.mobile .pv-nav{display:none}.project-device.mobile .pv-menu{display:block;margin-left:auto}.project-device.mobile .pv-cta{display:none}.project-device.mobile .pv-hero{grid-template-columns:1fr;padding:55px 24px;min-height:520px}.project-device.mobile .pv-hero-art{min-height:220px}.project-device.mobile .pv-cards{grid-template-columns:1fr}.project-device.mobile .pv-form{grid-template-columns:1fr}.project-device.mobile .pv-form textarea,.project-device.mobile .pv-form button{grid-column:auto}.project-device.mobile .pv-footer{flex-direction:column;text-align:center}
@media(max-width:1450px){.mini-site{height:min(62vh,560px)!important}}
@media(max-width:800px){.mini-site{height:62vh!important;min-height:430px!important}.pv-compact .pv-hero{min-height:260px}.pv-compact .pv-section{padding:30px 14px}}

/* v1.4 mini preview: render a true desktop canvas, then scale the whole page. */
.workspace-rail .mini-site{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  position:relative;
  background:#fff!important;
  border:1px solid var(--line);
  border-radius:14px;
}
.workspace-rail .mini-site>.pv-live-site{
  width:1200px;
  min-width:1200px;
  min-height:1000px;
  transform-origin:top left;
  font-size:16px;
  pointer-events:none;
}
/* Undo the old compact-preview overrides if an older cached class survives. */
.workspace-rail .mini-site .pv-live-site .pv-header{min-height:70px;padding:0 24px;gap:18px}
.workspace-rail .mini-site .pv-live-site .pv-brand{font-size:initial}
.workspace-rail .mini-site .pv-live-site .pv-nav{gap:22px}
.workspace-rail .mini-site .pv-live-site .pv-nav a{font-size:.76rem}
.workspace-rail .mini-site .pv-live-site .pv-cta{font-size:initial;padding:10px 15px}
.workspace-rail .mini-site .pv-live-site .pv-hero{min-height:430px;padding:76px 6%;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:30px}
.workspace-rail .mini-site .pv-live-site .pv-hero h1{font-size:clamp(2rem,4vw,4.5rem);margin:10px 0 16px}
.workspace-rail .mini-site .pv-live-site .pv-hero p{font-size:1rem;line-height:1.65}
.workspace-rail .mini-site .pv-live-site .pv-hero small{font-size:.66rem}
.workspace-rail .mini-site .pv-live-site .pv-hero-actions{margin-top:22px}
.workspace-rail .mini-site .pv-live-site .pv-primary{font-size:initial;padding:10px 15px}
.workspace-rail .mini-site .pv-live-site .pv-hero-art{min-height:310px}
.workspace-rail .mini-site .pv-live-site .pv-section{padding:var(--pv-section-space) 5%}
.workspace-rail .mini-site .pv-live-site .pv-section h2{font-size:clamp(1.5rem,2.7vw,2.7rem);margin:7px 0 24px}
.workspace-rail .mini-site .pv-live-site .pv-cards{gap:16px}
.workspace-rail .mini-site .pv-live-site .pv-cards article{padding:24px;min-height:145px;border-radius:var(--pv-radius)}
.workspace-rail .mini-site .pv-live-site .pv-cards article b{font-size:1.05rem;margin:10px 0}
.workspace-rail .mini-site .pv-live-site .pv-cards article p{font-size:.82rem}
.workspace-rail .mini-site .pv-live-site .pv-footer{padding:30px 5%;font-size:initial}

/* v1.5: isolate the live preview from legacy .mini-site thumbnail styles. */
.workspace-rail #workspace-mini-preview>.pv-live-site>div{height:auto;padding:0;font-size:inherit;}
.workspace-rail #workspace-mini-preview>.pv-live-site .pv-header{display:flex;}
.workspace-rail #workspace-mini-preview>.pv-live-site .pv-hero{display:grid;}


/* v1.6: keep the rail preview compact like a browser viewport. */
.workspace-rail #workspace-mini-preview{
  aspect-ratio:16 / 10;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
@media(max-width:1450px){
  .workspace-rail #workspace-mini-preview{height:auto!important;min-height:0!important;}
}
@media(max-width:800px){
  .workspace-rail #workspace-mini-preview{height:auto!important;min-height:0!important;}
}

/* ===== Design Studio page polish v1.9 ===== */
.studio-page-intro{margin:8px 0 18px;padding:22px 24px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,249,252,.82));box-shadow:0 14px 40px rgba(14,42,71,.07);display:flex;align-items:center;justify-content:space-between;gap:24px}
.studio-page-intro h2{margin:5px 0 5px;font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.035em}.studio-page-intro p{margin:0;color:var(--text);max-width:760px}.studio-step{font-size:.68rem;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.studio-preview-link,.studio-next{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;border-radius:12px;background:var(--navy);color:#fff;font-size:.78rem;font-weight:900;white-space:nowrap;box-shadow:0 8px 20px rgba(14,42,71,.14)}
.studio-toolbar{position:sticky;top:78px;z-index:18;margin:16px 0 20px;padding:11px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);box-shadow:0 10px 28px rgba(14,42,71,.08);display:flex;align-items:center;gap:10px}
.studio-search{height:42px;min-width:220px;flex:1;display:flex;align-items:center;gap:8px;padding:0 13px;border:1px solid var(--border);border-radius:12px;background:#f8fbfe;color:var(--text)}
.studio-search input{width:100%;border:0;outline:0;background:transparent;color:var(--navy);font:700 .8rem Inter,sans-serif}.studio-search input::placeholder{color:#8ba0b3}
.studio-filter-group{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.studio-filter-group::-webkit-scrollbar{display:none}.studio-filter{height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#526b82;font:800 .72rem Inter,sans-serif;cursor:pointer;white-space:nowrap}.studio-filter:hover,.studio-filter.active{border-color:var(--blue);background:#eaf6ff;color:#087bc1}
.studio-result-count{min-width:64px;text-align:right;color:var(--text);font-size:.7rem;font-weight:800}
.studio-theme-grid{padding-top:0}.studio-theme-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.studio-theme-card:hover{transform:translateY(-4px);border-color:#a9d8f5;box-shadow:0 18px 42px rgba(14,42,71,.12)}
.studio-theme-card .sample{min-height:135px}.studio-theme-card .palette-demo{width:100%;height:74px;border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(14,42,71,.1)}.studio-theme-card .palette-demo span{height:100%}
.studio-header-grid{gap:18px}.studio-header-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.studio-header-card:hover{transform:translateY(-4px);border-color:#a9d8f5;box-shadow:0 20px 44px rgba(14,42,71,.12)}
.studio-step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 82px;font-size:.8rem;font-weight:900}.studio-step-nav>a:first-child{color:var(--text);padding:10px 2px}
[data-studio-item][hidden]{display:none!important}
body.dark .studio-page-intro{background:linear-gradient(135deg,rgba(12,29,45,.96),rgba(10,24,39,.88));border-color:#24445e}body.dark .studio-toolbar{background:rgba(10,24,39,.92);border-color:#24445e}body.dark .studio-search,body.dark .studio-filter{background:#102b42;border-color:#294b65;color:#d7e8f5}body.dark .studio-search input{color:#eef8ff}body.dark .studio-filter.active,body.dark .studio-filter:hover{background:#123c5b;color:#69d0ff;border-color:#35b8ff}
@media(max-width:900px){.studio-page-intro{align-items:flex-start;flex-direction:column}.studio-toolbar{top:68px;flex-wrap:wrap}.studio-search{flex-basis:100%}.studio-filter-group{flex:1;max-width:calc(100% - 70px)}}
@media(max-width:600px){.studio-page-intro{padding:18px;border-radius:18px}.studio-toolbar{margin-left:-2px;margin-right:-2px;padding:9px;border-radius:14px}.studio-filter-group{max-width:100%;flex-basis:100%}.studio-result-count{display:none}.studio-preview-link{width:100%}.studio-step-nav{padding-bottom:64px}.studio-next{padding-inline:12px}.studio-theme-card .sample{min-height:118px}}

/* ===== Workspace cleanup + Clear Selections v1.10 ===== */
.catalog-workspace .design-flow,.catalog-workspace .design-flow-actions{display:none!important}
.workspace-clear-selections{width:100%;display:flex;align-items:center;gap:11px;min-height:42px;margin-top:7px;padding:9px 10px;border:1px solid rgba(239,68,68,.24);border-radius:11px;background:rgba(239,68,68,.06);color:#f87171;font:800 .76rem Inter,sans-serif;text-align:left;cursor:pointer;transition:.18s ease}
.workspace-clear-selections span{width:22px;text-align:center;font-size:1rem}.workspace-clear-selections:hover{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.5);transform:translateY(-1px)}
.workspace-confirm-backdrop{position:fixed;inset:0;z-index:10000;display:none;place-items:center;padding:20px;background:rgba(3,12,24,.58);backdrop-filter:blur(7px)}.workspace-confirm-backdrop.show{display:grid}
.workspace-confirm{width:min(430px,100%);padding:28px;border:1px solid #dce7f0;border-radius:22px;background:#fff;color:#0e2a47;box-shadow:0 30px 90px rgba(0,0,0,.24);text-align:center}.workspace-confirm-icon{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;background:#fff0f0;color:#dc2626;font-size:1.45rem;font-weight:900}.workspace-confirm h3{margin:0 0 8px;font-size:1.25rem}.workspace-confirm p{margin:0;color:#64748b;font-size:.84rem;line-height:1.6}.workspace-confirm-actions{display:flex;gap:10px;margin-top:22px}.workspace-confirm-actions button{flex:1;min-height:44px;border:1px solid #dce7f0;border-radius:12px;background:#f8fafc;color:#334155;font:900 .78rem Inter,sans-serif;cursor:pointer}.workspace-confirm-actions .danger{border-color:#dc2626;background:#dc2626;color:#fff}
body.dark .workspace-confirm{background:#0c2134;color:#eef8ff;border-color:#294b65}body.dark .workspace-confirm p{color:#9fb3c5}body.dark .workspace-confirm-actions button:not(.danger){background:#102b42;color:#d7e8f5;border-color:#294b65}
.workspace-clear-toast{position:fixed;left:50%;bottom:26px;z-index:10001;transform:translate(-50%,16px);opacity:0;padding:11px 16px;border-radius:999px;background:#0e2a47;color:#fff;font:800 .76rem Inter,sans-serif;box-shadow:0 12px 35px rgba(0,0,0,.2);transition:.2s ease}.workspace-clear-toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:600px){.workspace-confirm{padding:22px 18px}.workspace-confirm-actions{flex-direction:column-reverse}}

/* ===== Full Design Studio polish v1.11 ===== */
.catalog-workspace .hero{padding:34px 0 18px}.catalog-workspace .hero h1{font-size:clamp(1.9rem,3.4vw,3.5rem);margin:7px 0 12px}.catalog-workspace .hero p{font-size:.92rem;max-width:860px}
.studio-component-grid{padding-top:0;align-items:stretch}.studio-component-card{position:relative;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;background:rgba(255,255,255,.94)}
.studio-component-card:hover{transform:translateY(-4px);border-color:#a8d7f3;box-shadow:0 18px 44px rgba(14,42,71,.12)}.studio-component-card.builder-selected{border-color:#22c55e!important;box-shadow:0 0 0 2px rgba(34,197,94,.12),0 18px 44px rgba(14,42,71,.11)}
.studio-component-card.builder-selected:before{content:"✓ SELECTED";position:absolute;top:11px;right:11px;z-index:8;padding:5px 8px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:.58rem;font-weight:900;letter-spacing:.05em;box-shadow:0 4px 12px rgba(21,128,61,.12)}
.studio-component-card .sample{min-height:128px}.studio-component-card h3{font-size:.9rem}.studio-component-card small{font-size:.7rem;line-height:1.45}
.studio-library-divider{margin:26px 0 15px;padding:17px 19px;border:1px solid var(--border);border-radius:17px;background:#f8fbfe}.studio-library-divider.first{margin-top:4px}.studio-library-divider span{font-size:.78rem;font-weight:900;color:var(--navy)}.studio-library-divider p{margin:3px 0 0;font-size:.75rem;color:var(--text)}
.compact-library{grid-template-columns:repeat(4,1fr);gap:13px}.compact-library .specimen{min-height:160px;padding:14px;border-radius:17px}.compact-library .sample{min-height:86px;padding:12px}.compact-library .specimen h3{margin-top:10px}
.secondary-intro{margin-top:5px}
body.dark .studio-component-card{background:rgba(12,29,45,.94)}body.dark .studio-library-divider{background:#0d263b;border-color:#294b65}body.dark .studio-library-divider span{color:#e9f6ff}
@media(max-width:1250px){.compact-library{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.studio-component-grid{grid-template-columns:repeat(2,1fr)!important}.compact-library{grid-template-columns:repeat(2,1fr)}.catalog-workspace .hero{padding-top:25px}}
@media(max-width:560px){.studio-component-grid,.compact-library{grid-template-columns:1fr!important}.studio-component-card .sample{min-height:110px}.catalog-workspace .hero h1{font-size:1.8rem}}

/* ===== Single-choice + sticky search refinements v1.12 ===== */
.catalog-workspace .studio-toolbar{
  top:10px;
  z-index:60;
  background:#ffffff;
  border-color:#d9e6ef;
  box-shadow:0 10px 24px rgba(14,42,71,.12),0 -14px 0 10px #f8fbfe;
  isolation:isolate;
}
.catalog-workspace .studio-toolbar:after{
  content:"";position:absolute;left:-1px;right:-1px;bottom:-13px;height:13px;
  background:linear-gradient(180deg,rgba(248,251,254,.96),rgba(248,251,254,0));
  pointer-events:none;
}
body.dark.catalog-workspace .studio-toolbar{
  background:#0b2134;border-color:#294b65;
  box-shadow:0 10px 24px rgba(0,0,0,.3),0 -14px 0 10px #081a2b;
}
body.dark.catalog-workspace .studio-toolbar:after{background:linear-gradient(180deg,rgba(8,26,43,.96),rgba(8,26,43,0))}
.visual-catalog-card.builder-selected{border-color:#22c55e!important;box-shadow:0 0 0 2px rgba(34,197,94,.12),0 18px 44px rgba(14,42,71,.12)}
.visual-catalog-card.builder-selected .selected-state{background:#dcfce7;color:#15803d}
@media(max-width:900px){.catalog-workspace .studio-toolbar{top:8px}}

/* ===== Side Navigation upgrade v1.14 ===== */
.side-nav-showcase .nav-mini-sidebar{width:35%;padding:14px 12px;display:flex;flex-direction:column;align-items:stretch;gap:7px;background:#0e2a47;color:#fff}
.side-nav-showcase .nav-mini-sidebar b{margin-bottom:7px;font-size:.67rem}.side-nav-showcase .nav-mini-sidebar span,.side-nav-showcase .nav-mini-sidebar i{display:block;padding:6px 7px;border-radius:7px;font-size:.58rem;font-style:normal}
.side-nav-showcase .nav-mini-sidebar .active{background:#ffffff1c}.side-nav-showcase .nav-mini-sidebar i{margin-top:auto;background:#1697e6;text-align:center;font-weight:900}
.side-nav-showcase .nav-mini-content{width:65%;padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(145deg,#f8fbfe,#e6f2fb)}
.side-nav-showcase .nav-mini-content small{font-size:.5rem;font-weight:900;color:#1697e6;letter-spacing:.1em}.side-nav-showcase .nav-mini-content strong{margin:5px 0;font-size:.82rem}.side-nav-showcase .nav-mini-content span{font-size:.55rem;color:#64748b}.side-nav-showcase .nav-mini-content em{margin-top:9px;padding:4px 7px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:.48rem;font-style:normal;font-weight:900}

/* Navigation editor Side Navigation mode */
.navigation-live-site.side-nav-editor{position:relative;display:grid;grid-template-columns:var(--editor-side-width,260px) 1fr;min-height:560px}
.navigation-live-site.side-nav-editor.side-right{grid-template-columns:1fr var(--editor-side-width,260px)}
.navigation-live-site.side-nav-editor header{grid-column:1;grid-row:1;min-height:560px;height:auto;align-self:stretch;display:flex;flex-direction:column;align-items:stretch;padding:24px 18px;gap:18px;z-index:2}
.navigation-live-site.side-nav-editor.side-right header{grid-column:2}
.navigation-live-site.side-nav-editor section{grid-column:2;grid-row:1;min-height:560px;padding:90px 48px}
.navigation-live-site.side-nav-editor.side-right section{grid-column:1}
.navigation-live-site.side-nav-editor header nav{display:flex;flex:0 1 auto;flex-direction:column;align-items:stretch;gap:8px!important}
.navigation-live-site.side-nav-editor header nav a{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:8px}
.navigation-live-site.side-nav-editor header nav a.active{background:color-mix(in srgb,var(--nav-hover) 14%,transparent)}
.navigation-live-site.side-nav-editor header nav a i{width:18px;font-style:normal;text-align:center}
.navigation-live-site.side-nav-editor header>button:last-child{margin-top:auto}.navigation-live-site.side-nav-editor #nav-mobile-trigger{display:none}
.editor-field-note{margin:3px 0 0;color:var(--muted);font-size:.68rem;line-height:1.45}
@media(max-width:850px){
 .navigation-live-site.side-nav-editor{display:block;position:relative}
 .navigation-live-site.side-nav-editor header{position:absolute;top:0;bottom:0;left:0;width:min(82%,300px);transform:translateX(-102%);box-shadow:18px 0 45px rgba(0,0,0,.18)}
 .navigation-live-site.side-nav-editor.side-right header{left:auto;right:0;transform:translateX(102%)}
 .navigation-live-site.side-nav-editor section{display:block;min-height:500px;padding:90px 32px}
 .navigation-live-site.side-nav-editor:before{content:"☰  Side navigation becomes a slide-out drawer";display:block;padding:12px 18px;background:#0e2a47;color:#fff;font-size:.72rem;font-weight:850}
}

/* Assembled live website Side Navigation */
.pv-live-site.pv-side-layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%;background:var(--pv-bg)}
.pv-side-nav{grid-column:1;position:relative;z-index:5;min-height:100%;padding:28px 20px;display:flex;flex-direction:column;gap:20px;background:var(--pv-dark);color:var(--pv-header-text)}
.pv-side-brand{font-size:1.08rem}.pv-side-nav .pv-nav{display:flex!important;flex-direction:column;align-items:stretch;gap:7px}
.pv-side-nav .pv-nav a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;color:var(--pv-header-text);font-size:.78rem}
.pv-side-nav .pv-nav a i{width:18px;font-style:normal;text-align:center}.pv-side-nav .pv-nav a.active{background:color-mix(in srgb,var(--pv-primary) 34%,transparent)}
.pv-side-cta{margin-top:auto;border:0;border-radius:9px;padding:11px 12px;background:var(--pv-primary);color:#fff;font-weight:900}.pv-side-nav small{font-size:.58rem;opacity:.65}
.pv-side-layout .pv-site-content{grid-column:2;min-width:0}.pv-side-layout .pv-site-content>.pv-header{display:none}
@media(max-width:760px){
 .pv-live-site.pv-side-layout{display:block}
 .pv-side-layout .pv-side-nav{display:none}
 .pv-side-layout .pv-site-content>.pv-header{display:flex}
 .pv-side-layout .pv-site-content>.pv-header .pv-nav{display:none}
 .pv-side-layout .pv-menu{display:block}
}

/* ===== Mobile readability pass v1.16 ===== */
@media (max-width: 600px){
  /* Catalog/body copy */
  .catalog-workspace,
  .catalog-workspace p,
  .catalog-workspace small,
  .catalog-workspace .hero p,
  .studio-page-intro p,
  .studio-component-card small,
  .visual-card-copy p,
  .studio-library-divider p{
    font-weight:500;
  }

  .catalog-workspace .hero p,
  .studio-page-intro p,
  .visual-card-copy p{
    color:#53697d;
  }

  .studio-component-card small,
  .studio-library-divider p{
    color:#5c7184;
  }

  /* Sidebar labels need more weight on small screens */
  .workspace-sidebar a,
  .workspace-sidebar button,
  .workspace-sidebar .step-state,
  .project-tools a{
    font-weight:800;
  }

  /* Live preview copy */
  .pv-live-site p,
  .pv-live-site span,
  .pv-live-site small,
  .pv-live-site a{
    font-weight:500;
  }

  .pv-live-site .pv-nav a,
  .pv-live-site .pv-footer,
  .pv-live-site button{
    font-weight:700;
  }

  /* Forms/search controls */
  .studio-search input,
  .studio-filter{
    font-weight:700;
  }

  body.dark .catalog-workspace .hero p,
  body.dark .studio-page-intro p,
  body.dark .visual-card-copy p,
  body.dark .studio-component-card small,
  body.dark .studio-library-divider p{
    color:#b7c9d8;
  }
}

/* ===== Builder heading color alignment v1.17 ===== */
body:has(.design-brief-head) .hero h1{
  color:var(--text);
}

/* ===== My Website Selections mobile contrast correction v1.18 ===== */
body:has(.design-brief-head) .hero h1,
body:has(.design-brief-head) .hero p{
  color:#0e2a47;
}
body.dark:has(.design-brief-head) .hero h1,
body.dark:has(.design-brief-head) .hero p{
  color:#eef8ff;
}
@media(max-width:600px){
  body:has(.design-brief-head) .hero h1{
    color:#0e2a47;
    opacity:1;
  }
  body:has(.design-brief-head) .hero p{
    color:#0e2a47;
    opacity:1;
    font-weight:500;
  }
  body.dark:has(.design-brief-head) .hero h1,
  body.dark:has(.design-brief-head) .hero p{
    color:#eef8ff;
  }
}

/* ===== My Website Selections top text correction v1.19 ===== */
body:has(.design-brief-head):not(.dark) .hero,
body:has(.design-brief-head):not(.dark) .hero .kicker,
body:has(.design-brief-head):not(.dark) .hero h1,
body:has(.design-brief-head):not(.dark) .hero p{
  color:#0e2a47 !important;
  opacity:1 !important;
}
body.dark:has(.design-brief-head) .hero .kicker,
body.dark:has(.design-brief-head) .hero h1,
body.dark:has(.design-brief-head) .hero p{
  color:#eef8ff !important;
  opacity:1 !important;
}

/* ===== Automatic card text contrast v1.20 ===== */
.contrast-dark,
.contrast-dark h1,
.contrast-dark h2,
.contrast-dark h3,
.contrast-dark h4,
.contrast-dark h5,
.contrast-dark h6,
.contrast-dark p,
.contrast-dark small,
.contrast-dark span:not(.code):not(.selected-state),
.contrast-dark strong,
.contrast-dark b{
  color:#ffffff !important;
}
.contrast-dark .code,
.contrast-dark a{
  color:#7dd3fc;
}
.contrast-light,
.contrast-light h1,
.contrast-light h2,
.contrast-light h3,
.contrast-light h4,
.contrast-light h5,
.contrast-light h6,
.contrast-light p,
.contrast-light small,
.contrast-light span:not(.code):not(.selected-state),
.contrast-light strong,
.contrast-light b{
  color:#0e2a47 !important;
}
.contrast-light .code,
.contrast-light a{
  color:#087bc1;
}

/* Preserve status colors and button text where intentional. */
.contrast-dark .selected-state.yes,
.contrast-light .selected-state.yes{color:#15803d !important}
.contrast-dark button,
.contrast-light button{color:inherit}
.contrast-dark .demo-btn,
.contrast-dark .select-design,
.contrast-dark .quick-select,
.contrast-dark .visual-customize{
  color:#ffffff;
}

/* ===== Catalog light/dark mode system v1.22 ===== */
:root{
  --catalog-bg:#f8fbfe;
  --catalog-panel:#ffffff;
  --catalog-panel-2:#f1f7fb;
  --catalog-text:#0e2a47;
  --catalog-muted:#64748b;
  --catalog-line:#dbe7ef;
  --catalog-soft:#eef5fb;
  --catalog-shadow:0 18px 50px rgba(14,42,71,.10);
}

body{
  background:var(--catalog-bg);
  color:var(--catalog-text);
}

body.dark{
  --catalog-bg:#071522;
  --catalog-panel:#0d2234;
  --catalog-panel-2:#102b42;
  --catalog-text:#eef8ff;
  --catalog-muted:#a8bdcd;
  --catalog-line:#29475f;
  --catalog-soft:#0b1f31;
  --catalog-shadow:0 18px 50px rgba(0,0,0,.30);
  background:var(--catalog-bg);
  color:var(--catalog-text);
}

body.dark .hero,
body.dark main,
body.dark .wrap{
  color:var(--catalog-text);
}

body.dark .hero p,
body.dark .studio-page-intro p,
body.dark .visual-card-copy p,
body.dark .studio-component-card small,
body.dark .builder-muted,
body.dark .editor-status,
body.dark .selection-item p{
  color:var(--catalog-muted);
}

body.dark .topbar,
body.dark .legacy-topbar,
body.dark .studio-page-intro,
body.dark .studio-toolbar,
body.dark .specimen,
body.dark .studio-component-card,
body.dark .visual-catalog-card,
body.dark .guided-project-summary,
body.dark .selection-group,
body.dark .builder-toolbar,
body.dark .editor-controls,
body.dark .editor-workspace,
body.dark .component-editor-shell,
body.dark .design-brief-head,
body.dark .project-preview-toolbar{
  background:var(--catalog-panel);
  color:var(--catalog-text);
  border-color:var(--catalog-line);
}

body.dark .sample,
body.dark .variant-sample,
body.dark .studio-library-divider,
body.dark .studio-search,
body.dark .studio-filter,
body.dark .selection-item,
body.dark .editor-fields input,
body.dark .editor-fields textarea,
body.dark .editor-fields select{
  background:var(--catalog-panel-2);
  color:var(--catalog-text);
  border-color:var(--catalog-line);
}

body.dark .studio-search input,
body.dark .editor-fields input,
body.dark .editor-fields textarea,
body.dark .editor-fields select{
  color:var(--catalog-text);
}

body.dark .studio-search input::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder{
  color:#7f98aa;
}

body.dark .studio-filter{
  color:#c6d7e4;
}

body.dark .studio-filter.active,
body.dark .studio-filter:hover{
  background:#123c5b;
  color:#7dd3fc;
  border-color:#35b8ff;
}

body.dark .visual-customize,
body.dark .studio-preview-link,
body.dark .studio-next,
body.dark .full-preview-button{
  color:#ffffff;
}

body.dark .builder-sidebar{
  background:#061425;
  border-color:#1d3b54;
}

body.dark .builder-step,
body.dark .project-tools a,
body.dark .project-tools button{
  color:#d9e8f3;
}

body.dark .builder-step.active{
  background:linear-gradient(135deg,#0e6ab6,#5b3df5);
  color:#fff;
}

body.dark .workspace-rail{
  background:#0a1e30;
  color:#eef8ff;
  border-color:#27465d;
}

body.dark .rail-row{
  border-color:#244158;
}

body.dark .rail-row em{
  color:#9fb6c7;
}

body.dark .rail-selection-head,
body.dark .rail-head{
  color:#eef8ff;
}

body.dark .mini-site{
  background:#081a2b;
  border-color:#2a4860;
}

body.dark .workspace-confirm{
  background:#0c2134;
  color:#eef8ff;
  border-color:#294b65;
}

body.dark .workspace-confirm p{
  color:#a9bdcc;
}

/* Builder selections page */
body.dark .design-brief-head h1,
body.dark .design-brief-head p,
body.dark .hero h1,
body.dark .hero p,
body.dark .hero .kicker{
  color:#eef8ff !important;
}

body.dark .builder-toolbar,
body.dark .selection-group{
  background:#0d2a3f;
  color:#eef8ff;
}

body.dark .selection-item{
  background:#123047;
  color:#eef8ff;
}

body.dark .selection-color-note{
  color:#b5c8d7;
}

/* Editor app bars / controls */
body.dark .editor-appbar{
  background:#081a2b;
  color:#eef8ff;
  border-color:#29475f;
}

body.dark .editor-back,
body.dark .editor-title,
body.dark .editor-title strong,
body.dark .editor-title span,
body.dark .editor-title em{
  color:#eef8ff;
}

body.dark .editor-controls details{
  border-color:#29475f;
}

body.dark .editor-controls summary{
  color:#eef8ff;
}

/* Theme toggle itself */
.catalog-theme-toggle{
  border:1px solid var(--catalog-line);
  background:var(--catalog-panel);
  color:var(--catalog-text);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
body.dark .catalog-theme-toggle{
  background:#102b42;
  color:#fff;
  border-color:#35546a;
}

html.fs-dark-boot,
html.fs-dark-boot body{
  background:#071522;
  color:#eef8ff;
}

/* Catalog home: large assembled website preview replaces redundant category cards */
.catalog-home-preview{padding:22px 0 84px}
.catalog-preview-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:20px}
.catalog-preview-heading>div{max-width:760px}
.catalog-preview-heading h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.035em;margin:8px 0 10px;color:var(--navy)}
.catalog-preview-heading p{margin:0;color:var(--text);font-size:.96rem}
.catalog-preview-heading .demo-btn{flex:0 0 auto}
.catalog-preview-browser{overflow:hidden;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:0 24px 65px rgba(14,42,71,.14)}
.catalog-preview-browserbar{height:48px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fbfdff,#f1f5f9)}
.catalog-preview-browserbar>span{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.catalog-preview-browserbar>div{margin-left:9px;flex:1;max-width:420px;height:27px;display:grid;place-items:center;border:1px solid #dce5ee;border-radius:8px;background:#fff;color:#75869a;font-size:.68rem;font-weight:800}
.catalog-home-live-preview{min-height:760px;background:#fff;overflow:hidden}
.catalog-home-live-preview>.pv-live-site{min-height:760px}
@media(max-width:800px){.catalog-preview-heading{align-items:flex-start;flex-direction:column}.catalog-preview-heading .demo-btn{width:100%;text-align:center}.catalog-home-live-preview,.catalog-home-live-preview>.pv-live-site{min-height:640px}.catalog-preview-browser{border-radius:16px}}
@media(max-width:600px){.catalog-home-preview{padding-top:10px;padding-bottom:60px}.catalog-preview-browserbar{height:40px;padding:0 12px}.catalog-preview-browserbar>div{height:24px}.catalog-home-live-preview,.catalog-home-live-preview>.pv-live-site{min-height:590px}}
html.fs-dark-boot .catalog-preview-heading h2,body.fs-dark .catalog-preview-heading h2{color:var(--text)}
html.fs-dark-boot .catalog-preview-browser,body.fs-dark .catalog-preview-browser{background:#071828;border-color:var(--line)}
html.fs-dark-boot .catalog-preview-browserbar,body.fs-dark .catalog-preview-browserbar{background:#0c2034;border-color:var(--line)}
html.fs-dark-boot .catalog-preview-browserbar>div,body.fs-dark .catalog-preview-browserbar>div{background:#102a43;border-color:var(--line);color:#b9c8d8}


/* ==========================================================
   Catalog home design studio v1.3
   ========================================================== */
body.builder-home.catalog-workspace{padding-right:0}
.builder-home main{max-width:1700px;margin:0 auto;width:100%}
.builder-home .hero{background:transparent;border-bottom:0;padding-bottom:8px}
.builder-home .hero .wrap{width:min(1440px,calc(100% - 48px))}
.builder-home .catalog-home-preview{width:min(1440px,calc(100% - 48px));padding-top:12px}
.catalog-preview-heading{align-items:center;margin-bottom:18px}
.catalog-progress{width:min(330px,100%);padding:12px 14px;border:1px solid var(--ws-line);border-radius:12px;background:rgba(255,255,255,.78);box-shadow:0 6px 18px rgba(18,36,68,.05)}
.catalog-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.72rem;color:#5f7087}
.catalog-progress strong{font-size:.78rem;color:#152640}
.catalog-progress-track{height:7px;margin-top:9px;overflow:hidden;border-radius:999px;background:#e7edf5}
.catalog-progress-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#248cff,#5a52ff);box-shadow:0 0 14px rgba(66,99,255,.35);transition:width .3s ease}
.catalog-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:8px;border:1px solid var(--ws-line);border-radius:13px;background:rgba(255,255,255,.84);box-shadow:0 8px 24px rgba(18,36,68,.05);position:sticky;top:10px;z-index:30;backdrop-filter:blur(14px)}
.catalog-device-switcher,.catalog-preview-actions{display:flex;align-items:center;gap:5px}
.catalog-preview-toolbar button,.catalog-preview-toolbar a{min-height:36px;border:1px solid transparent;border-radius:8px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:#40516a;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer;transition:.16s ease}
.catalog-preview-toolbar button:hover,.catalog-preview-toolbar a:hover{background:#eef3f9;color:#142640}
.catalog-preview-toolbar button.is-active{background:#122b49;color:#fff;box-shadow:0 5px 14px rgba(14,42,71,.18)}
.catalog-preview-actions a{background:linear-gradient(135deg,#238cf4,#4c5cff 55%,#7b5cff);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 18px rgba(53,89,220,.2)}
.catalog-preview-stage{display:flex;justify-content:center;min-height:650px;padding:0;overflow:auto;border-radius:22px;transition:.25s ease}
.catalog-preview-browser{width:100%;position:relative;transition:width .28s ease,box-shadow .28s ease}
.catalog-preview-stage[data-device="tablet"] .catalog-preview-browser{width:820px;max-width:100%;box-shadow:0 26px 70px rgba(14,42,71,.18)}
.catalog-preview-stage[data-device="mobile"] .catalog-preview-browser{width:390px;max-width:100%;box-shadow:0 26px 70px rgba(14,42,71,.2)}
.catalog-preview-stage[data-device="tablet"],.catalog-preview-stage[data-device="mobile"]{padding:24px;background:linear-gradient(145deg,#edf2f8,#f8fbff);border:1px solid var(--ws-line)}
.catalog-preview-stage[data-device="tablet"] .catalog-home-live-preview,.catalog-preview-stage[data-device="mobile"] .catalog-home-live-preview{overflow:auto}
.catalog-preview-stage[data-device="mobile"] .pv-live-site{min-width:0!important;width:100%!important}
.catalog-preview-stage[data-device="tablet"] .pv-live-site{min-width:0!important;width:100%!important}
.catalog-edit-tip{position:absolute;z-index:70;pointer-events:none;padding:7px 10px;border-radius:7px;background:#0b2038;color:#fff;font-size:.66rem;font-weight:850;box-shadow:0 7px 20px rgba(0,0,0,.22);white-space:nowrap}
.catalog-home-live-preview .pv-header,.catalog-home-live-preview .pv-hero,.catalog-home-live-preview .pv-section,.catalog-home-live-preview .pv-cards,.catalog-home-live-preview .pv-gallery,.catalog-home-live-preview .pv-form,.catalog-home-live-preview .pv-footer,.catalog-home-live-preview .pv-nav,.catalog-home-live-preview .pv-primary,.catalog-home-live-preview .pv-secondary,.catalog-home-live-preview .pv-cta,.catalog-home-live-preview .pv-side-cta{transition:box-shadow .14s ease,outline-color .14s ease;cursor:pointer}
.catalog-home-live-preview .pv-edit-hover{outline:3px solid rgba(46,132,255,.92)!important;outline-offset:-3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 4px rgba(46,132,255,.14)!important;position:relative;z-index:4}
.preview-edit-off .catalog-home-live-preview *{cursor:default!important}
.preview-edit-off .catalog-home-live-preview .pv-edit-hover{outline:0!important;box-shadow:none!important}
.catalog-preview-browser:fullscreen{width:100vw;height:100vh;border-radius:0;background:#fff;overflow:auto}
.catalog-preview-browser:fullscreen .catalog-home-live-preview,.catalog-preview-browser:fullscreen .catalog-home-live-preview>.pv-live-site{min-height:calc(100vh - 48px)}
.builder-step{position:relative}
.builder-step .step-state:not(:empty){box-shadow:0 0 0 3px rgba(66,197,107,.12)}
.builder-step:not(.active):has(.step-state:not(:empty)){color:#fff}
body.dark .catalog-progress,body.dark .catalog-preview-toolbar{background:rgba(11,31,49,.88);border-color:#29475f}
body.dark .catalog-progress strong{color:#eef8ff}
body.dark .catalog-progress>div:first-child{color:#a9bdcc}
body.dark .catalog-progress-track{background:#19374e}
body.dark .catalog-preview-toolbar button{color:#c7d7e4}
body.dark .catalog-preview-toolbar button:hover{background:#17354d;color:#fff}
body.dark .catalog-preview-toolbar button.is-active{background:#2f67ff;color:#fff}
body.dark .catalog-preview-stage[data-device="tablet"],body.dark .catalog-preview-stage[data-device="mobile"]{background:linear-gradient(145deg,#071522,#0d263c);border-color:#29475f}
@media(max-width:1000px){
  .builder-home .hero .wrap,.builder-home .catalog-home-preview{width:min(100% - 30px,1000px)}
  .catalog-preview-toolbar{top:62px;flex-wrap:wrap}
  .catalog-preview-heading{align-items:flex-start;flex-direction:column}
  .catalog-progress{width:100%}
}
@media(max-width:650px){
  .builder-home .hero .wrap,.builder-home .catalog-home-preview{width:min(100% - 20px,650px)}
  .catalog-preview-heading p{font-size:.86rem}
  .catalog-preview-toolbar{top:62px;padding:7px}
  .catalog-device-switcher{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .catalog-preview-actions{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .catalog-preview-toolbar button,.catalog-preview-toolbar a{padding:0 6px;font-size:.65rem}
  .catalog-preview-toolbar button span,.catalog-preview-actions button span{display:none}
  .catalog-preview-stage[data-device="tablet"],.catalog-preview-stage[data-device="mobile"]{padding:10px}
  .catalog-preview-stage{min-height:560px;border-radius:14px}
  .catalog-preview-browser{border-radius:14px}
  .catalog-home-live-preview,.catalog-home-live-preview>.pv-live-site{min-height:560px}
}

/* Exact catalog button styles inside live website preview */
.pv-live-site .demo-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.35em;line-height:1.1}
.pv-live-site .demo-btn.outline{background:transparent;color:var(--pv-primary);border:2px solid var(--pv-primary)}
.pv-live-site .demo-btn.pill{border-radius:999px}
.pv-live-site .demo-btn.ghost{background:rgba(255,255,255,.35);color:var(--pv-heading);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 30px rgba(14,42,71,.12)}
.pv-live-site .demo-btn.liquid{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(53,184,255,.26));color:#0b4268;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 1px #fff,inset 0 -8px 18px rgba(22,151,230,.12),0 12px 26px rgba(22,151,230,.2);backdrop-filter:blur(16px)}
.pv-live-site .demo-btn.neon{background:#071828;color:#61ddff;border:1px solid #35B8FF;box-shadow:0 0 8px #35B8FF,0 0 24px rgba(53,184,255,.6)}
.pv-live-site .demo-btn.gradient{background:linear-gradient(120deg,#0f7fe5,#7c3aed,#ec4899)}
.pv-live-site .demo-btn.metal{background:linear-gradient(#f9fbfc,#9aa9b5 45%,#eef2f5 52%,#82909d);color:#13212c;border:1px solid #8898a6;text-shadow:0 1px #fff;box-shadow:inset 0 1px #fff,0 6px 10px rgba(0,0,0,.18)}
.pv-live-site .demo-btn.gold{background:linear-gradient(135deg,#6c4a05,#f5d06f 45%,#8b5e08);color:#201300}
.pv-live-site .demo-btn.soft{background:#eef3f8;color:#31506d;box-shadow:8px 8px 16px #dce4eb,-8px -8px 16px #fff}
.pv-live-site .demo-btn.brutal{background:#ffe34f;color:#111;border:3px solid #111;border-radius:0;box-shadow:6px 6px 0 #111}
.pv-live-site .demo-btn.clay{background:#7c70ff;box-shadow:inset 7px 7px 14px rgba(255,255,255,.35),inset -8px -8px 16px rgba(60,40,160,.3),0 9px 18px rgba(70,55,180,.24);border-radius:20px}
.pv-live-site .demo-btn.holo{background:linear-gradient(115deg,#7dd3fc,#c4b5fd,#f9a8d4,#fde68a,#86efac);color:#243044;border:1px solid rgba(255,255,255,.8)}


/* Final website preview: click-to-edit mode */
.preview-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#final-preview-edit-toggle{margin-left:6px}
#final-preview-edit-toggle.active{box-shadow:inset 0 0 0 2px rgba(46,132,255,.28);border-color:rgba(46,132,255,.72)}
.final-preview-edit-help{margin:10px 0 14px;padding:10px 14px;border:1px solid var(--line,#d9e2ec);border-radius:10px;background:var(--surface,#fff);font-size:.82rem;line-height:1.45;color:var(--muted,#526579)}
.project-device{position:relative}
.final-preview-edit-tip{position:absolute;z-index:90;pointer-events:none;padding:7px 10px;border-radius:7px;background:#0b2038;color:#fff;font-size:.68rem;font-weight:850;box-shadow:0 7px 20px rgba(0,0,0,.22);white-space:nowrap}
.project-device.final-edit-enabled .assembled-site .pv-header,
.project-device.final-edit-enabled .assembled-site .pv-hero,
.project-device.final-edit-enabled .assembled-site .pv-nav,
.project-device.final-edit-enabled .assembled-site .pv-side-nav,
.project-device.final-edit-enabled .assembled-site .pv-section,
.project-device.final-edit-enabled .assembled-site .pv-cards,
.project-device.final-edit-enabled .assembled-site .pv-gallery,
.project-device.final-edit-enabled .assembled-site .pv-form,
.project-device.final-edit-enabled .assembled-site .pv-primary,
.project-device.final-edit-enabled .assembled-site .pv-secondary,
.project-device.final-edit-enabled .assembled-site .pv-cta,
.project-device.final-edit-enabled .assembled-site .pv-side-cta,
.project-device.final-edit-enabled .assembled-site .pv-form-button,
.project-device.final-edit-enabled .assembled-site .pv-footer{cursor:pointer}
.project-device.final-edit-enabled .assembled-site .pv-edit-hover{outline:3px solid rgba(46,132,255,.92)!important;outline-offset:-3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 4px rgba(46,132,255,.14)!important;position:relative;z-index:4}
@media(max-width:700px){.preview-toolbar-actions{width:100%}.preview-toolbar-actions button{flex:1 1 auto}.final-preview-edit-help{font-size:.76rem}}


/* Individual button editing from the live previews */
.button-target-editor{position:sticky;top:12px;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 auto 22px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent,#1697e6) 35%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface,#fff) 94%,transparent);box-shadow:0 16px 45px rgba(15,42,71,.14);backdrop-filter:blur(18px)}
.button-target-editor>div:first-child{display:grid;gap:3px}.button-target-editor small{font-size:.68rem;font-weight:900;letter-spacing:.12em;color:#087bc1}.button-target-editor strong{font-size:1.08rem;color:var(--text,#0e2a47)}.button-target-editor span{font-size:.82rem;color:var(--muted,#52677c)}
.button-target-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.button-target-actions button,.button-target-actions a{min-height:40px;border-radius:999px;padding:9px 14px;font-weight:850;text-decoration:none}.button-target-actions button{border:1px solid #b8c9d9;background:transparent;color:var(--text,#0e2a47);cursor:pointer}.button-target-actions .demo-btn{display:inline-flex;align-items:center;justify-content:center}
.button-target-mode .select-design{min-width:155px}
@media(max-width:760px){.button-target-editor{position:relative;top:auto;align-items:flex-start;flex-direction:column}.button-target-actions{width:100%}.button-target-actions>*{flex:1;text-align:center}}

/* Individual element editing and component preview treatments */
.component-target-mode .select-design{min-width:155px}
.project-device.final-edit-enabled .assembled-site [data-component-slot],
.catalog-home-live-preview [data-component-slot]{cursor:pointer}

/* Frame choices. The numbered variants intentionally map catalog frame choices
   into visible border/radius/shadow treatments in the assembled preview. */
.pv-frame-01{border:1px solid var(--pv-border)}
.pv-frame-02{border:3px solid var(--pv-heading)}
.pv-frame-03{border:1px solid var(--pv-border);border-radius:24px;overflow:hidden}
.pv-frame-04{border:1px solid var(--pv-border);border-radius:999px;overflow:hidden}
.pv-frame-05{border:4px double var(--pv-heading)}
.pv-frame-06{border:1px solid var(--pv-border);box-shadow:0 18px 45px rgba(15,42,71,.18)}
.pv-frame-07{border:1px solid color-mix(in srgb,var(--pv-primary) 50%,transparent);box-shadow:0 0 0 5px color-mix(in srgb,var(--pv-primary) 10%,transparent)}
.pv-frame-08{border:8px solid var(--pv-heading);padding:6px}
.pv-frame-09{border:1px solid var(--pv-border);border-radius:50% 42% 48% 44%;overflow:hidden}
.pv-frame-10{border:2px solid var(--pv-primary);box-shadow:8px 8px 0 color-mix(in srgb,var(--pv-primary) 22%,transparent)}

/* Section layout variations */
.pv-section-02{text-align:center}.pv-section-03{border-radius:28px;margin:18px;box-shadow:0 18px 55px rgba(15,42,71,.08)}
.pv-section-04{padding-block:calc(var(--pv-section-space)*.62);border-top:1px solid var(--pv-border);border-bottom:1px solid var(--pv-border)}
.pv-section-05{background:linear-gradient(135deg,var(--pv-soft),var(--pv-bg))}.pv-section-06{max-width:1040px;margin-inline:auto}
.pv-section-07{border-left:5px solid var(--pv-primary)}.pv-section-08{background:var(--pv-heading);color:var(--pv-header-text)}.pv-section-08 h2{color:inherit}

/* Individual cards */
.pv-cards article.pv-card-02{border-top:4px solid var(--pv-primary)}
.pv-cards article.pv-card-03{border-radius:24px}.pv-cards article.pv-card-04{box-shadow:0 16px 36px rgba(15,42,71,.14)}
.pv-cards article.pv-card-05{background:var(--pv-heading);color:var(--pv-header-text)}.pv-cards article.pv-card-05 b{color:inherit}
.pv-cards article.pv-card-06{background:linear-gradient(145deg,var(--pv-soft),var(--pv-bg))}.pv-cards article.pv-card-07{border:2px solid var(--pv-primary)}
.pv-cards article.pv-card-08{transform:translateY(-5px)}

/* Gallery variants */
.pv-gallery-02{grid-template-columns:2fr 1fr 1fr}.pv-gallery-03{grid-template-columns:repeat(2,1fr)}.pv-gallery-04 i{border-radius:50%}
.pv-gallery-05{gap:14px}.pv-gallery-06 i:first-child{grid-column:span 2;grid-row:span 2}.pv-gallery-07{transform:rotate(-1deg)}

/* Table variants */
.pv-table-wrap{overflow:auto;border:1px solid var(--pv-border);border-radius:16px;background:var(--pv-surface)}
.pv-table-wrap table{width:100%;border-collapse:collapse;min-width:520px}.pv-table-wrap th,.pv-table-wrap td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--pv-border)}
.pv-table-wrap th{font-weight:900;color:var(--pv-heading)}.pv-table-02 tbody tr:nth-child(even){background:var(--pv-soft)}
.pv-table-03 thead{background:var(--pv-heading);color:var(--pv-header-text)}.pv-table-03 th{color:inherit}.pv-table-04 thead{background:var(--pv-primary);color:#fff}.pv-table-04 th{color:inherit}
.pv-table-05{border-radius:26px;box-shadow:0 18px 45px rgba(15,42,71,.12)}.pv-table-06 td:first-child{font-weight:900;color:var(--pv-primary)}

/* Input variants. Each field can carry its own catalog input style. */
.pv-form [class*="pv-input-"]{transition:.2s ease}
.pv-input-02{border-width:0 0 2px!important;border-radius:0!important}.pv-input-03{border-radius:999px!important}.pv-input-04{background:var(--pv-soft)!important}
.pv-input-05{border:2px solid var(--pv-primary)!important}.pv-input-06{box-shadow:inset 0 2px 7px rgba(15,42,71,.08)}.pv-input-07{border-style:dashed!important}.pv-input-08{border-radius:18px!important}
/* Additional numbered treatments keep every catalog choice visually distinct. */
.pv-section-09{background:var(--pv-soft);border-radius:0}.pv-section-10{box-shadow:inset 0 0 0 2px var(--pv-border)}
.pv-section-11{background:linear-gradient(110deg,var(--pv-heading),color-mix(in srgb,var(--pv-heading) 75%,var(--pv-primary)));color:var(--pv-header-text)}.pv-section-11 h2{color:inherit}
.pv-section-12{padding-inline:max(6vw,42px)}.pv-section-13{border-radius:32px 0 32px 0;margin:18px}.pv-section-14{border-top:6px solid var(--pv-primary)}
.pv-section-15{background:color-mix(in srgb,var(--pv-primary) 8%,var(--pv-bg))}.pv-section-16{text-align:center;max-width:1100px;margin-inline:auto}

.pv-frame-11{border:3px dashed var(--pv-primary)}.pv-frame-12{border:1px solid var(--pv-border);box-shadow:inset 0 0 0 7px var(--pv-bg),inset 0 0 0 8px var(--pv-border)}
.pv-frame-13{border:6px solid var(--pv-bg);outline:1px solid var(--pv-border)}.pv-frame-14{border:2px solid var(--pv-primary);border-radius:30px 6px}
.pv-frame-15{border:1px solid var(--pv-border);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}.pv-frame-16{border:10px solid color-mix(in srgb,var(--pv-heading) 88%,#fff)}
.pv-frame-17{border:2px solid var(--pv-primary);box-shadow:0 0 24px color-mix(in srgb,var(--pv-primary) 40%,transparent)}.pv-frame-18{border:1px solid var(--pv-border);border-radius:50%;overflow:hidden}
.pv-frame-19{border:4px ridge var(--pv-border)}.pv-frame-20{border:1px solid transparent;background:linear-gradient(var(--pv-bg),var(--pv-bg)) padding-box,linear-gradient(135deg,var(--pv-primary),var(--pv-heading)) border-box}
.pv-frame-21{border-left:8px solid var(--pv-primary)}.pv-frame-22{border-bottom:8px solid var(--pv-primary)}.pv-frame-23{outline:3px solid var(--pv-heading);outline-offset:6px}.pv-frame-24{border:1px solid var(--pv-border);box-shadow:10px 10px 0 var(--pv-soft)}

.pv-cards article.pv-card-09{border-radius:28px 4px}.pv-cards article.pv-card-10{border:0;box-shadow:inset 0 0 0 2px var(--pv-border)}
.pv-cards article.pv-card-11{background:var(--pv-soft)}.pv-cards article.pv-card-12{border-left:6px solid var(--pv-primary)}.pv-cards article.pv-card-13{border-bottom:6px solid var(--pv-primary)}
.pv-cards article.pv-card-14{background:linear-gradient(135deg,var(--pv-bg),var(--pv-soft))}.pv-cards article.pv-card-15{border:2px dashed var(--pv-border)}.pv-cards article.pv-card-16{box-shadow:8px 8px 0 var(--pv-soft)}
.pv-cards article.pv-card-17{border-radius:0}.pv-cards article.pv-card-18{outline:2px solid var(--pv-primary);outline-offset:3px}.pv-cards article.pv-card-19{background:color-mix(in srgb,var(--pv-primary) 9%,var(--pv-bg))}
.pv-cards article.pv-card-20{border-top-left-radius:34px;border-bottom-right-radius:34px}.pv-cards article.pv-card-21{box-shadow:0 0 0 1px var(--pv-border),0 20px 45px rgba(15,42,71,.12)}
.pv-cards article.pv-card-22{border:2px solid var(--pv-heading)}.pv-cards article.pv-card-23{transform:rotate(-1deg)}.pv-cards article.pv-card-24{background:var(--pv-heading);color:var(--pv-header-text);border-color:var(--pv-primary)}.pv-cards article.pv-card-24 b{color:inherit}

.pv-gallery-08{grid-template-columns:repeat(4,1fr)}.pv-gallery-09 i{border:2px solid var(--pv-primary)}.pv-gallery-10 i{box-shadow:0 12px 25px rgba(15,42,71,.16)}
.pv-gallery-11{background:var(--pv-heading);padding:12px;border-radius:18px}.pv-gallery-12 i:nth-child(even){transform:translateY(10px)}

.pv-table-07{border:2px solid var(--pv-heading)}.pv-table-08 tbody tr:hover{background:var(--pv-soft)}.pv-table-09 td,.pv-table-09 th{border-right:1px solid var(--pv-border)}
.pv-table-10{box-shadow:8px 8px 0 var(--pv-soft)}.pv-table-11 thead{background:var(--pv-soft)}.pv-table-12 tbody tr:nth-child(odd){background:color-mix(in srgb,var(--pv-primary) 5%,var(--pv-bg))}
.pv-table-13{border-radius:0}.pv-table-14{border:0;border-top:4px solid var(--pv-primary)}.pv-table-15 table{text-align:center}.pv-table-15 th,.pv-table-15 td{text-align:center}
.pv-table-16{background:var(--pv-heading);color:var(--pv-header-text)}.pv-table-16 th{color:inherit}.pv-table-17{outline:2px solid var(--pv-primary);outline-offset:3px}.pv-table-18{border-style:dashed}

.pv-input-09{border-radius:0!important}.pv-input-10{border:0!important;border-bottom:2px solid var(--pv-primary)!important}.pv-input-11{background:var(--pv-heading)!important;color:var(--pv-header-text)!important}
.pv-input-12{box-shadow:0 8px 22px rgba(15,42,71,.12)}.pv-input-13{border:2px dotted var(--pv-primary)!important}.pv-input-14{border-left:5px solid var(--pv-primary)!important}
.pv-input-15{border-right:5px solid var(--pv-primary)!important}.pv-input-16{background:color-mix(in srgb,var(--pv-primary) 8%,var(--pv-bg))!important}.pv-input-17{border-radius:18px 4px!important}
.pv-input-18{outline:2px solid color-mix(in srgb,var(--pv-primary) 28%,transparent);outline-offset:2px}.pv-input-19{font-weight:800}.pv-input-20{letter-spacing:.03em}
.pv-input-21{border-color:var(--pv-heading)!important}.pv-input-22{border-radius:22px!important;box-shadow:inset 0 0 0 1px var(--pv-soft)}.pv-input-23{background:transparent!important}.pv-input-24{border:2px solid var(--pv-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--pv-primary) 10%,transparent)}