/* Cardone configurator: shared editorial identity with the collection website.
   System typography and the existing logo work in both web and offline builds. */
:root {
  --paper:#faf9f6;
  --ink:#123448;
  --muted:#5e6d76;
  --gold:#9d8160;
  --gold-text:#806744;
  --line:#dfe0da;
  --canvas:#f0eee7;
  --control:#fffefa;
  color-scheme:light;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; min-width:280px; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.55; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:350; letter-spacing:-.04em; line-height:1.12; }
a:hover { text-decoration:underline; text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,#viewport:focus-visible {
  outline:2px solid var(--gold-text);
  outline-offset:4px;
}
[hidden] { display:none!important; }
.skip { position:fixed; top:0; left:20px; z-index:100; transform:translateY(-120%); padding:12px 18px; background:var(--paper); border:1px solid var(--ink); }
.skip:focus { top:8px; transform:none; }
.utility { display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:1440px; margin:auto; padding:10px 4% 0; color:var(--muted); font-size:9px; font-weight:500; letter-spacing:1.5px; line-height:1.5; }
header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; width:92%; max-width:1325px; height:92px; margin:auto; border-bottom:1px solid var(--line); }
header>img,header>.brand { position:absolute; left:50%; transform:translateX(-50%); width:106px; height:64px; }
header>img,header>.brand img { display:block; width:106px; height:64px; object-fit:contain; }
header>.brand { line-height:0; }
.back,.text-button { font-size:12px; font-weight:500; }
.back { display:flex; align-items:center; gap:12px; min-height:44px; }
.text-button { border:0; border-radius:0; background:transparent; padding:10px 0; min-height:44px; }
.text-button:hover,.inline-button:hover { color:var(--gold-text); text-decoration:underline; text-underline-offset:5px; }
main { max-width:1440px; margin:auto; padding:0 4%; }
.intro { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding:32px 0 30px; }
.eyebrow { color:var(--gold-text); font-size:10px; font-weight:500; letter-spacing:2px; line-height:1.65; text-transform:uppercase; }
h1 { margin-top:10px; font-size:clamp(36px,3.8vw,58px); }
.intro>p { flex:0 1 350px; padding-bottom:3px; font-size:13px; line-height:1.8; color:var(--muted); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start; }
.preview,.scene-grid,.choices { min-width:0; }
.preview { position:sticky; top:24px; }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 24px 18px; background:var(--canvas); }
.preview-head h2 { margin-top:5px; font-size:38px; }
.pill { border:1px solid var(--line); padding:6px 10px; font-size:11px; }
.comparison-controls { display:flex; align-items:center; gap:20px; }
.comparison-controls label { display:none; color:var(--muted); font-size:11px; line-height:1.5; }
.comparison-controls select { min-width:145px; margin:6px 0 0; padding:9px 32px 9px 11px; font-size:13px; }
.compare-button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 0; border:0; border-bottom:1px solid var(--gold); border-radius:0; background:transparent; color:var(--ink); font-size:12px; font-weight:500; white-space:nowrap; }
.compare-button:hover { color:var(--gold-text); border-bottom-color:var(--ink); }
.compare-button[aria-pressed=true] { color:var(--ink); background:transparent; }
.preview #viewport { position:relative; height:430px; overflow:hidden; background:var(--canvas); touch-action:none; }
#scene,#dimensions { position:absolute; inset:0; display:block; width:100%; height:100%; }
#dimensions { pointer-events:none; overflow:visible; }
#dimensions line { stroke:#74888d; stroke-width:1; }
#dimensions text { fill:#254650; stroke:var(--canvas); paint-order:stroke; stroke-width:4px; font:500 11px "Segoe UI",Arial,sans-serif; }
#dimensions .dash { stroke-dasharray:4 4; opacity:.65; }
#render-fallback { position:absolute; inset:38% 8% auto; font-size:14px; line-height:1.7; }
.gesture { position:absolute; bottom:12px; left:12px; width:calc(100% - 24px); color:#596d76; font-size:10px; line-height:1.5; text-align:center; pointer-events:none; }
.view-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.view-buttons { display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.view-buttons button { min-height:40px; padding:9px 10px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; font-size:12px; line-height:1.4; white-space:nowrap; }
.view-buttons button:hover { border-bottom-color:var(--gold); color:var(--gold-text); }
.view-buttons button[aria-pressed=true] { color:var(--ink); background:transparent; border-bottom-color:var(--ink); font-weight:600; }
.toggle { display:flex; align-items:center; gap:7px; min-height:44px; white-space:nowrap; cursor:pointer; font-size:12px; }
.toggle input { width:16px; height:16px; accent-color:var(--ink); margin:0; }
.view-tools>.text-button { font-size:12px; }
.measurements { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:22px 0 0; }
.measurements>div { min-width:0; padding:0 18px; border-left:1px solid var(--line); }
.measurements>div:first-child { padding-left:0; border-left:0; }
.measurements span { display:block; min-height:32px; color:var(--muted); font-size:11px; line-height:1.5; }
.measurements strong { display:block; margin-top:4px; font-size:25px; font-weight:350; letter-spacing:-.04em; line-height:1.35; }
.measurements em { font-style:normal; color:var(--gold-text); font-size:10px; }
.preview-note { margin:18px 0 28px; color:var(--muted); font-size:11px; line-height:1.8; }
.inline-button { padding:0; border:0; border-bottom:1px solid var(--gold); background:transparent; font:inherit; color:var(--ink); }
fieldset { min-width:0; margin:0 0 26px; padding:0 0 27px; border:0; border-bottom:1px solid var(--line); }
legend { display:flex; align-items:center; gap:13px; width:100%; margin-bottom:20px; padding:0; font-size:25px; font-weight:350; letter-spacing:-.04em; line-height:1.2; }
legend>span { color:var(--gold-text); font-size:10px; font-weight:500; letter-spacing:1px; }
label:not(.toggle) { display:block; margin-bottom:7px; font-size:12px; line-height:1.5; }
select,input[type=number] { display:block; width:100%; min-height:46px; max-width:100%; padding:11px 12px; border:1px solid #cfd5d3; border-radius:0; background:var(--control); font-size:13px; line-height:1.5; }
select { margin-bottom:16px; padding-right:30px; }
input[type=number] { margin-bottom:16px; font-variant-numeric:tabular-nums; }
select:hover:not(:disabled),input[type=number]:hover { border-color:#8e9b9e; }
select:disabled { opacity:1; color:var(--muted); background:#efeee8; border-color:var(--line); cursor:default; }
.fields-row { display:flex; gap:14px; }
.fields-row>div { flex:1; min-width:0; }
.small-note { color:var(--muted); font-size:11px; line-height:1.8; }
.swatches { display:flex; flex-wrap:wrap; gap:9px; }
.swatch { position:relative; width:40px; height:40px; padding:0; border:4px solid var(--paper); outline:1px solid transparent; border-radius:50%; }
.swatch[aria-pressed=true] { outline-color:var(--ink); }
.swatch[aria-pressed=true]::after { content:'✓'; position:absolute; inset:2px; display:grid; place-items:center; color:white; font-size:12px; text-shadow:0 1px 3px #222; }
.swatch:focus-visible { outline:2px solid var(--gold-text); outline-offset:3px; }
.color-label { display:flex; justify-content:space-between; gap:12px; margin:12px 0 9px; font-size:12px; line-height:1.5; }
.color-label strong { font-weight:500; }
.color-label span { color:var(--muted); font-size:11px; }
#fabric-swatches,#cushion-swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:9px; margin:18px 0 12px; }
.fabric-swatch { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:44px; min-height:74px; padding:5px; border:1px solid transparent; border-radius:0; background:transparent; color:var(--ink); }
.fabric-swatch-chip { display:block; width:100%; min-height:39px; aspect-ratio:1; border:1px solid #0001; border-radius:0; }
.fabric-swatch-code { max-width:100%; color:var(--ink); font-size:11px; line-height:1.4; letter-spacing:.02em; overflow-wrap:anywhere; text-align:center; }
.fabric-swatch:hover { background:#12344808; }
.fabric-swatch[aria-pressed=true] { border-color:var(--ink); background:#12344808; box-shadow:inset 0 0 0 1px var(--ink); }
#fabric-color-name,#cushion-color-name { display:block; min-height:20px; margin:10px 0 16px; font-size:13px; font-weight:500; }
#fabric-note a,#cushion-note a { text-decoration:underline; text-underline-offset:4px; }
#indicative-colors,#cushion-tones { margin-top:16px; }
.cushion-color-control { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
#choices:has(#upholstery-category option[value="pelle"]:checked) #fabric-swatches,
#choices:has(#cushion-category option[value="pelle"]:checked) #cushion-swatches { grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); }
.foot-reference { display:flex; align-items:center; gap:18px; }
.foot-reference img { flex:0 0 76px; width:76px; height:80px; object-fit:contain; mix-blend-mode:multiply; }
.mattress-reference { display:grid; grid-template-columns:110px minmax(0,1fr); gap:18px; align-items:center; margin:20px 0 16px; padding-top:20px; border-top:1px solid var(--line); }
#mattress-photo { display:block; width:110px; height:125px; object-fit:contain; mix-blend-mode:multiply; }
.mattress-reference-copy { min-width:0; }
#mattress-family { margin-bottom:5px; color:var(--gold-text); font-size:10px; letter-spacing:1px; line-height:1.6; text-transform:uppercase; }
#mattress-name { display:block; font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.4; }
#mattress-features { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.8; }
#mattress-detail { margin-top:8px; padding:8px 0; border-bottom:1px solid var(--gold); font-size:11px; text-align:left; }
.technical { margin:0; padding:18px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:12px; }
.technical summary { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:28px; font-weight:500; list-style:none; cursor:pointer; }
.technical summary::-webkit-details-marker { display:none; }
.technical summary>span { font-size:20px; font-weight:300; line-height:1; }
.technical[open] summary { margin-bottom:18px; }
.technical[open] summary>span { transform:rotate(45deg); }
.technical p { color:var(--muted); line-height:1.8; margin-bottom:16px; }
.technical label span { color:var(--muted); }
#validation:not(:empty) { margin:12px 0 0; padding:12px 14px; border-left:2px solid var(--gold); background:#f3eee4; color:#715333; }
.export-area { margin:27px 0 0; }
.primary,.secondary { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:52px; margin:12px 0 0; padding:14px 17px; border:1px solid var(--ink); border-radius:0; font-size:13px; font-weight:500; line-height:1.5; text-align:left; }
.primary { background:var(--ink); color:var(--paper); }
.primary:hover:not(:disabled) { background:#254b5b; }
.secondary,#save-pdf { background:transparent; color:var(--ink); border-color:var(--gold); }
.secondary:hover:not(:disabled),#save-pdf:hover:not(:disabled) { background:#eee9df; border-color:var(--ink); }
.primary span,.secondary span { font-size:21px; font-weight:300; line-height:1; }
.export-area>p:not(.eyebrow) { margin-top:14px; color:var(--muted); font-size:11px; line-height:1.8; text-align:left; }
#download-status,#pdf-status { display:block; margin-top:12px; color:var(--muted); font-size:12px; line-height:1.7; }
.project-note { display:grid; grid-template-columns:1fr 2fr; gap:50px; margin:48px 0 65px; padding-top:28px; border-top:1px solid var(--line); }
.project-note>p:last-child { max-width:760px; color:var(--muted); font-size:13px; line-height:1.9; }
footer { display:flex; justify-content:space-between; gap:24px; padding:28px max(4%,calc((100vw - 1325px)/2)); border-top:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:11px; line-height:1.6; }
footer.company-footer { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:24px 40px; padding-block:38px; }
.company-footer .company-identity { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.company-footer .company-identity img { width:190px; max-width:100%; height:auto; }
.company-footer strong { color:var(--ink); font-weight:500; }
.company-footer .company-registration>strong { display:block; font-size:14px; }
.company-footer address { font-style:normal; }
.company-footer p { margin:0 0 14px; }
.company-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.company-footer a { overflow-wrap:anywhere; text-decoration:none; }
.company-footer a:hover { text-decoration:underline; text-underline-offset:4px; }
.company-footer a:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
@media(max-width:760px){footer.company-footer { grid-template-columns:1fr; gap:20px; }}
dialog { width:min(920px,calc(100% - 40px)); max-height:88svh; padding:34px; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #12344833; overscroll-behavior:contain; }
dialog::backdrop { background:#102f437d; backdrop-filter:blur(4px); }
dialog h2 { margin:8px 40px 24px 0; font-size:36px; }
dialog img { width:100%; height:min(58svh,560px); object-fit:contain; background:var(--canvas); }
dialog>p:last-child { margin-top:16px; color:var(--muted); font-size:12px; line-height:1.8; }
.dialog-close { position:absolute; top:8px; right:10px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; font-size:30px; font-weight:300; }
#source-content { font-size:13px; line-height:1.8; }
#source-content h3 { margin:24px 0 10px; font-size:21px; font-weight:400; }
#source-content ul { padding-left:20px; }
#source-content table { width:100%; border-collapse:collapse; }
#source-content td { padding:10px 12px; border-bottom:1px solid var(--line); font-size:12px; }
/* Comparison remains a working area, with both references immediately visible. */
.compare-mode .workspace { grid-template-columns:minmax(0,1fr); gap:30px; }
.compare-mode .preview { position:relative; top:0; }
.compare-mode .preview-head { padding:0 0 22px; background:transparent; }
.compare-mode .comparison-controls label { display:block; }
.compare-mode .scene-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); background:var(--canvas); }
.compare-mode .preview #viewport { height:440px; }
#catalogue-comparison { display:flex; flex-direction:column; justify-content:center; gap:12px; min-width:0; margin:0; padding:22px; border-right:1px solid #deded7; }
#comparison-photo { display:block; width:100%; height:330px; object-fit:contain; }
#comparison-source { min-height:32px; color:var(--muted); font-size:10px; line-height:1.65; text-align:center; }
.compare-mode .view-tools { justify-content:flex-end; gap:8px 24px; }
.compare-mode .choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 55px; width:100%; max-width:1120px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line); }
.compare-mode .choices fieldset { margin-bottom:0; }
.compare-mode .technical,.compare-mode .export-area { align-self:start; margin:0; }
/* Photo gallery: one full image and genuine previous/next controls. */
#photo-dialog { width:min(1000px,calc(100% - 40px)); }
#photo-dialog h2 { margin-bottom:20px; }
.photo-stage { min-width:0; }
.photo-stage img { display:block; width:100%; height:min(52svh,570px); object-fit:contain; touch-action:pan-y pinch-zoom; }
.photo-stage figcaption { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.7; }
.photo-stage figcaption:empty { display:none; }
#photo-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
#photo-controls button { display:flex; align-items:center; gap:12px; min-height:44px; padding:10px 0; border:0; border-bottom:1px solid var(--gold); border-radius:0; background:transparent; font-size:12px; }
#photo-controls button:hover:not(:disabled) { color:var(--gold-text); }
#photo-controls button:disabled { opacity:.35; }
#photo-counter { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#photo-source { font-size:11px!important; }
@media(min-width:1450px) {
  .workspace { grid-template-columns:minmax(0,1fr) 370px; gap:48px; }
  .preview #viewport { height:490px; }
  .compare-mode .preview #viewport { height:480px; }
  #comparison-photo { height:370px; }
}
@media(max-height:820px) and (min-width:761px) {
  .preview { position:relative; top:0; }
}
@media(max-width:1100px) {
  .workspace { grid-template-columns:minmax(0,1fr) 300px; gap:26px; }
  .intro { align-items:flex-start; gap:24px; }
  .intro>p { flex-basis:290px; font-size:12px; }
  .preview-head { padding:20px 20px 16px; gap:14px; }
  .preview-head h2 { font-size:34px; }
  .preview #viewport { height:380px; }
  .measurements { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 0; }
  .measurements>div:nth-child(3) { padding-left:0; border-left:0; }
  .measurements span { min-height:0; }
  .comparison-controls { gap:16px; }
  .compare-mode .choices { gap:28px 38px; }
  .compare-mode .preview #viewport { height:410px; }
  #comparison-photo { height:300px; }
}
@media(max-width:760px) {
  .utility { padding:10px 5% 0; font-size:8px; letter-spacing:1.2px; }
  .utility>span:first-child { display:none; }
  .utility { justify-content:center; }
  header { width:90%; height:79px; gap:14px; }
  header>img,header>.brand,header>.brand img { width:89px; height:54px; }
  .back { font-size:22px; padding-right:14px; }
  .back span { display:none; }
  header>.text-button { font-size:11px; }
  main { padding-inline:5%; }
  .intro { display:block; padding:26px 0 25px; }
  h1 { margin-top:9px; font-size:clamp(33px,7.5vw,46px); }
  .intro>p { max-width:480px; margin-top:15px; padding:0; font-size:12px; line-height:1.7; }
  .intro>p br { display:none; }
  .eyebrow { font-size:9px; letter-spacing:1.7px; }
  .workspace { display:block; }
  .preview { position:relative; top:0; }
  .preview-head { padding:20px 16px 15px; }
  .preview-head h2 { font-size:32px; }
  .preview #viewport { height:340px; }
  .compare-mode .preview-head { flex-wrap:wrap; align-items:flex-start; gap:18px; padding-bottom:20px; }
  .compare-mode .comparison-controls { justify-content:space-between; width:100%; gap:20px; }
  .comparison-controls label { flex:1; }
  .comparison-controls select { min-width:120px; max-width:240px; font-size:16px; }
  .compare-button { flex-shrink:0; font-size:11px; }
  .compare-mode .scene-grid { grid-template-columns:minmax(0,1fr); }
  .compare-mode .preview #viewport { height:350px; }
  #catalogue-comparison { padding:16px 16px 18px; border-right:0; border-bottom:1px solid #deded7; }
  #comparison-photo { height:240px; }
  #comparison-source { min-height:0; font-size:10px; }
  .view-tools,.compare-mode .view-tools { justify-content:space-between; gap:7px 18px; padding:9px 0; }
  .view-buttons { flex-wrap:nowrap; justify-content:flex-start; width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#aeb6b6 transparent; padding-bottom:3px; }
  .view-buttons button { flex:0 0 auto; min-height:44px; padding:10px 11px; }
  .gesture { font-size:10px; }
  .gesture span { display:none; }
  .measurements { margin-top:22px; }
  .measurements>div { padding-inline:18px; }
  .measurements strong { font-size:25px; }
  .measurements span { font-size:11px; }
  .preview-note { margin-bottom:28px; }
  .choices,.compare-mode .choices { display:block; max-width:none; padding-top:28px; border-top:1px solid var(--line); }
  fieldset,.compare-mode .choices fieldset { margin-bottom:28px; padding-bottom:28px; }
  legend { margin-bottom:20px; font-size:27px; }
  label:not(.toggle) { font-size:12px; }
  select,input[type=number] { min-height:48px; font-size:16px; }
  .fields-row { gap:12px; }
  .small-note { font-size:12px; }
  .color-label { font-size:13px; }
  .color-label span { font-size:11px; }
  .swatch { width:44px; height:44px; }
  #fabric-swatches,#cushion-swatches { grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:10px; }
  .fabric-swatch-code { font-size:12px; }
  .fabric-swatch { min-height:76px; }
  .mattress-reference { grid-template-columns:120px minmax(0,1fr); }
  #mattress-photo { width:120px; height:135px; }
  #mattress-features { font-size:12px; }
  #mattress-detail { font-size:12px; }
  .technical { font-size:13px; padding-block:18px; }
  .technical p { font-size:12px; }
  .export-area,.compare-mode .export-area { margin-top:28px; }
  .primary,.secondary { min-height:54px; font-size:14px; }
  .project-note { display:block; margin:36px 0 44px; padding-top:26px; }
  .project-note>p:last-child { margin-top:16px; font-size:12px; }
  footer { padding:24px 5%; font-size:10px; gap:18px; }
  dialog,#photo-dialog { width:calc(100% - 24px); max-height:92svh; padding:28px 18px; }
  dialog h2 { font-size:30px; }
  .photo-stage img { height:min(45svh,440px); }
  #photo-controls { gap:10px; }
  #photo-controls button { gap:8px; }
}
@media(max-width:380px) {
  header>.text-button { max-width:80px; }
  .intro>p { font-size:11px; }
  .preview #viewport,.compare-mode .preview #viewport { height:305px; }
  #comparison-photo { height:205px; }
  .mattress-reference { grid-template-columns:90px minmax(0,1fr); gap:14px; }
  #mattress-photo { width:90px; height:120px; }
  .measurements>div { padding-inline:12px; }
  .measurements strong { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}
@media(forced-colors:active) {
  .swatch,.fabric-swatch-chip { forced-color-adjust:none; }
  .swatch[aria-pressed=true],.fabric-swatch[aria-pressed=true],.view-buttons button[aria-pressed=true] { outline:2px solid Highlight; }
}