/* Four looks for the OROXID shop: same layout, type and photos; only the palette changes.
   B and A/C come from Dado's art direction (base #0a557b); D is derived from the OROXID logo blue (#1b75bc). */
:root[data-look="b"] {
    --color-page: #fbfcfe; --color-surface-alt: #e1f0fa; --color-line: #d5e1ea; --color-text: #0a3449; --color-text-soft: #546573;
    --color-action: #0a557b; --color-action-hover: #004465; --color-deep: #003953; --color-accent: #588cad; --hero-room: #e1f0fa; --hero-lamp: #f9fdff;
}
:root[data-look="a"] {
    --color-page: #fbfcfe; --color-surface-alt: #f0f6fa; --color-line: #dfe6ec; --color-text: #0a3449; --color-text-soft: #546573;
    --color-action: #0a557b; --color-action-hover: #004465; --color-deep: #003953; --color-accent: #588cad; --hero-room: #f0f6fa; --hero-lamp: #ffffff;
}
:root[data-look="c"] {
    --color-page: #fdfcfa; --color-surface-alt: #f8f4f0; --color-line: #e9e5e0; --color-text: #253746; --color-text-soft: #5c6772;
    --color-action: #0a557b; --color-action-hover: #004465; --color-deep: #253746; --color-accent: #b98f4c; --hero-room: #f8f4f0; --hero-lamp: #ffffff;
    --forte-light: #eef2f5; --sensitiv-light: #f9eef0;
}
:root[data-look="d"] {
    --color-page: #fbfcff; --color-surface-alt: #e9f1ff; --color-line: #d6e0f0; --color-text: #00375e; --color-text-soft: #59667c;
    --color-action: #1b75bc; --color-action-hover: #005f9c; --color-deep: #004272; --color-accent: #cb3878; --hero-room: #e4efff; --hero-lamp: #fafcff;
    --forte: #1b75bc; --forte-light: #e4efff;
}
:root[data-look="d"] .badge.sale { background: var(--color-accent); }

/* ---------- Mock-up page (mock.html): static, nothing interactive ---------- */
.mock .hdr { position: static; }
.mock .nav span { padding: 8px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; }
.mock .nav span:first-child { background: var(--color-surface-alt); }
.mock .tools span { display: inline-grid; place-items: center; width: 44px; height: 44px; }
.mock .tools svg { width: 22px; height: 22px; }
.mock .tile:hover { transform: none; }
.mock .card-product h3 span { text-decoration: none; }
.mock .add { cursor: default; }
.mock-ftr .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: 48px 36px; }
.mock-ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
@media (max-width: 860px) { .mock-ftr .wrap { grid-template-columns: 1fr 1fr; } .mock-ftr .wrap > :first-child { grid-column: 1 / -1; } }

/* ---------- Presentation page (index.html) ---------- */
.deck { background: #eef1f4; color: #1d2329; }
.deck .wrap { max-width: 1320px; }
.deck-hdr { padding-block: 44px 20px; display: grid; gap: 14px; }
.deck-hdr .brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.deck-hdr .brand img { width: 150px; }
.deck-hdr .brand span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #5a636c; }
.deck-hdr h1 { font-size: 54px; max-width: 18ch; }
.deck-hdr .lead { max-width: 70ch; color: #4b5560; }
.basis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 28px 0 8px; }
.basis > div { padding: 22px; border-radius: 22px; background: #fff; display: grid; gap: 10px; align-content: start; }
.basis h3 { font-size: 22px; }
.basis p { font-size: 14px; color: #4b5560; }
.type-sample b { display: block; font: 500 34px/1.05 var(--font-serif); }
.type-sample i { display: block; font: italic 400 34px/1.05 var(--font-serif); }
.lines { display: flex; flex-wrap: wrap; gap: 8px; }
.lines span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; }
.basis .photo { padding: 0; overflow: hidden; }
.basis .photo img { width: 100%; height: 150px; object-fit: cover; object-position: center 30%; }
.basis .photo div { padding: 16px 20px 20px; display: grid; gap: 6px; }
@media (max-width: 1000px) { .basis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .basis { grid-template-columns: 1fr; } .deck-hdr h1 { font-size: 38px; } }

.look { margin: 30px 0; padding: 32px clamp(18px, 2.4vw, 34px); border-radius: 28px; background: #fff; }
.look-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: end; margin-bottom: 22px; }
.look-letter { grid-row: span 2; font: 500 84px/.8 var(--font-serif); color: var(--look-action); }
.look-tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5a636c; }
.look-name { font: 500 38px/1.05 var(--font-serif); }
.look-idea { grid-column: 2; max-width: 80ch; color: #4b5560; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 6px 0 26px; }
.sw { display: grid; gap: 6px; font-size: 12px; color: #5a636c; }
.sw i { display: block; height: 54px; border-radius: 14px; border: 1px solid rgb(0 0 0 / .08); }
.sw b { font-size: 13px; color: #1d2329; font-weight: 500; }
@media (max-width: 760px) { .swatches { grid-template-columns: repeat(3, 1fr); } }
.frames { display: flex; gap: 26px; align-items: flex-start; }
.frame { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #d9dde2; background: #fff; box-shadow: 0 18px 40px -22px rgb(0 0 0 / .35); }
.frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.frame.desk { flex: none; width: 806px; height: 1600px; }
.frame.desk iframe { width: 1300px; height: 2580px; transform: scale(.62); }
.phones { display: grid; gap: 18px; }
.frame.phone { width: 273px; height: 568px; border-radius: 30px; border: 6px solid #1d2329; }
.frame.phone iframe { width: 390px; height: 812px; transform: scale(.7); }
.frame-label { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5a636c; }
@media (max-width: 1240px) { .frame.desk { width: 600px; height: 1190px; } .frame.desk iframe { transform: scale(.4615); } }
@media (max-width: 980px) { .frames { flex-direction: column; } .frame.desk { width: 100%; max-width: 600px; } .phones { grid-template-columns: repeat(2, 273px); } }
@media (max-width: 640px) { .frame.desk { display: none; } .desk-label { display: none; } .phones { grid-template-columns: 273px; } }

.questions { margin: 30px 0 60px; padding: 36px clamp(18px, 2.4vw, 34px); border-radius: 28px; background: #0a3449; color: #e8eef3; display: grid; gap: 18px; }
.questions h2 { color: #fff; font-size: 40px; }
.questions ol { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; font-size: 17px; max-width: 75ch; }
.questions ol li::marker { font: 500 20px var(--font-serif); color: #9fc3da; }
.deck-ftr { padding: 0 0 48px; font-size: 13px; color: #5a636c; }