/*
 * Concept B layer (Milestone 2, 22 Oct 2026). Loaded after main.css.
 * Values follow the Lusitania Casa design system: warm stone ground, serif headings with a bronze rule,
 * square shapes, products on the stage colour. main.css keeps the base layout; this file restyles it.
 */
:root {
	--stage: #ECE7E0;
	--panel: #EFEBE4;
	--night: #2A2722;
	--on-night: #EDE7DD;
	--on-night-muted: #B6AC9E;
	--accent-on-night: #C39A72;
	--rule: #8A6646;
	--line: #E0D9CE;
	--line-strong: #8C7D6E;
	--ease-b: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- type and small parts ---------- */
body { font-size: .9375rem; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--brand); }
html[lang="ar"] .eyebrow { font-size: .8125rem; letter-spacing: 0; }
.section-head .eyebrow::before, .page-hero .eyebrow::before { content: none; }
.rule { display: block; width: 44px; height: 1px; background: var(--rule); margin: 22px 0; }
.center .rule { margin-inline: auto; }
.section-title { font-size: clamp(2rem, 1.4rem + 1.9vw, 3.125rem); line-height: 1.06; letter-spacing: -.005em; }
.page-title { font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.section-head { align-items: flex-end; margin-bottom: clamp(28px, 4vw, 46px); }
.section-head .rule { margin-bottom: 0; }
.link-under { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 5px; white-space: nowrap; }
.link-under:hover { color: var(--brand); }
html[lang="ar"] .link-under { font-size: .875rem; letter-spacing: 0; }
.small { font-size: .8125rem; }
.code { font-size: .78em; letter-spacing: .1em; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { font-size: 10px; font-weight: 500; letter-spacing: .2em; min-height: 48px; padding: 0 26px; transition: background-color .25s, color .25s, border-color .25s; }
html[lang="ar"] .btn { font-size: .875rem; letter-spacing: 0; }
.btn--primary { background: var(--night); color: var(--bg); border-color: var(--night); }
.btn--primary:hover { background: var(--brand); border-color: var(--brand); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--on-dark { border: 1px solid var(--on-night); color: var(--on-night); background: transparent; }
.btn--on-dark:hover { background: var(--on-night); color: var(--night); }
.btn:active { transform: none; }

/* ---------- top bar and header ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
html[lang="ar"] .topbar { font-size: .75rem; letter-spacing: 0; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 36px; }
.topbar__links { display: flex; gap: 24px; align-items: center; }
.topbar a { text-decoration: none; color: var(--ink); }
.topbar a:hover { color: var(--brand); }
.topbar .lang-switch { min-height: 0; padding: 0; font-size: inherit; font-weight: 500; }
.site-header { background: rgba(245, 242, 237, .96); }
.site-header__bar { height: 84px; }
.brand__logo { height: 50px; }
.nav__link { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
html[lang="ar"] .nav__link { font-size: .9375rem; letter-spacing: 0; }
.nav__link::after { bottom: 10px; background: var(--brand); }
.header-wtb { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: 12px; padding-inline-start: 16px; border-inline-start: 1px solid var(--line); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.header-wtb:hover { color: var(--brand); }
.mega { background: var(--bg); box-shadow: 0 30px 40px -30px rgba(42, 39, 34, .3); }
.mega-tile__img, .mega-tile__img img { border-radius: 0; }
/* collection photographs (catalogue): fill the frame instead of the padded cut-out treatment */
.mega-tile__img img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.mega-tile__name, .mega__head { color: var(--ink); }
.mobile-nav__list a, .mobile-nav__list summary { color: var(--ink); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-bottom: 18px; }

/* ---------- collection / category / plain page opening ---------- */
.c-hero { padding-block: clamp(28px, 4vw, 48px) 0; }
.c-hero__inner { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.c-hero--split .c-hero__inner { grid-template-columns: 5fr 6fr; }
.c-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 1.6rem + 4.6vw, 5.75rem); line-height: .95; letter-spacing: -.01em; margin: 14px 0 10px; color: var(--ink); }
html[lang="ar"] .c-hero__title { line-height: 1.2; letter-spacing: 0; }
.c-hero__tag { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.3; color: var(--muted); margin: 0; }
.c-hero__story { color: var(--muted); max-width: 48ch; margin: 0; line-height: 1.8; }
.c-hero__media { aspect-ratio: 4 / 5; max-height: 640px; width: 100%; overflow: hidden; background: var(--stage); justify-self: end; }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.facts-row { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.facts-row div { display: flex; flex-direction: column-reverse; }
.facts-row dt { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .facts-row dt { font-size: .75rem; letter-spacing: 0; }
.facts-row dd { margin: 0; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; }
.facts-row__word { font-size: 1.4rem !important; }

/* ---------- filters ---------- */
.filters { margin-top: clamp(48px, 7vw, 96px); background: rgba(245, 242, 237, .96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-block: 14px; }
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.chip small { color: var(--muted); margin-inline-start: 6px; font-size: 10px; }
.chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.is-active small { color: var(--on-night-muted); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-inline-start: auto; }
.filters__label { font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-inline-end: 10px; }
html[lang="ar"] .filters__label { font-size: .75rem; letter-spacing: 0; }
.select-wrap { display: inline-flex; align-items: center; }
.select-wrap select { min-height: 38px; border: 1px solid var(--line-strong); border-radius: 0; background-color: var(--bg); font-size: 11.5px; font-weight: 500; }
.fin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } /* the full range has 36 finishes */
.fin-dot { width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 1px solid var(--line-strong); background: var(--sw, var(--bg)); box-shadow: inset 0 0 0 3px var(--bg); cursor: pointer; }
.fin-dot--all { background: conic-gradient(#c9cccf, #d4af5a, #232323, #b2aa9d, #c9cccf); }
.fin-dot[aria-pressed="true"] { outline: 1px solid var(--ink); outline-offset: 3px; }
.filters__count { margin: 26px 0 22px; font-size: 12px; color: var(--muted); }

/* ---------- product grid and cards ---------- */
.grid--products, .grid.grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 20px; }
.card__media { background: var(--stage); border-radius: 0; }
.card__img { padding: 11%; transition: transform .8s var(--ease-b); }
.card__body { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; }
.card__text { min-width: 0; }
.card__title { font-size: 1.15rem; line-height: 1.2; }
.card__meta { margin-top: 2px; }
.card__meta .code { font-size: 10.5px; }
.card__note { margin: 4px 0 0; font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card .swatches { flex: none; margin-top: 6px; gap: 6px; max-width: 76px; justify-content: flex-end; }
.card .swatch { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px rgba(42, 39, 34, .25); }
.badge { display: none; }

/* ---------- homepage ---------- */
.b-hero { position: relative; margin-inline: var(--gutter); height: clamp(460px, 62vw, 680px); overflow: hidden; background: var(--stage); }
.b-hero__media, .b-hero__media img { width: 100%; height: 100%; }
.b-hero__media img { object-fit: cover; object-position: 50% 60%; }
.b-hero__card { position: absolute; inset-inline-start: 0; bottom: 0; width: min(560px, 92%); background: var(--bg); padding: 40px 54px 0 0; }
html[dir="rtl"] .b-hero__card { padding: 40px 0 0 54px; }
.b-hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; margin: 0; }
.b-hero__sub { color: var(--muted); max-width: 42ch; margin: 16px 0 24px; line-height: 1.8; }
.b-world { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: clamp(80px, 10vw, 120px); }
.b-world__media { height: clamp(420px, 56vw, 720px); overflow: hidden; }
.b-world__media img, .b-phil__media img { width: 100%; height: 100%; object-fit: cover; }
.b-world__text { padding-inline: clamp(24px, 7vw, 96px); }
.b-world__text p { color: var(--muted); max-width: 48ch; line-height: 1.85; }
.b-world .facts-row { margin-bottom: 30px; }
.place-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; }
.place { display: block; text-decoration: none; }
.place__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage); }
.place__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-b); }
.place--cut .place__img img { object-fit: contain; padding: 16%; mix-blend-mode: multiply; }
.place:hover .place__img img { transform: scale(1.045); }
.place__cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.place__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.place__n { font-size: 11px; color: var(--muted); }
.objects { background: var(--stage); }
.objects .card__media { background: var(--bg); }
.b-fin__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 7vw, 90px); align-items: center; }
.b-fin__stage { position: relative; margin: 0; aspect-ratio: 1; background: var(--stage); }
.b-fin__stage img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.b-fin__stage figcaption { position: absolute; inset-inline-start: 24px; bottom: 20px; font-size: 11px; color: var(--muted); }
.b-fin__stage figcaption a { text-decoration: none; }
.swatch-pick { display: flex; gap: 14px; margin: 26px 0 10px; }
.swatch-pick__btn { width: 46px; height: 46px; border-radius: 50%; padding: 0; border: 1px solid var(--line-strong); background: var(--sw); box-shadow: inset 0 0 0 4px var(--bg); cursor: pointer; }
.swatch-pick__btn[aria-pressed="true"] { outline: 1px solid var(--ink); outline-offset: 4px; }
.b-fin__name { font-family: var(--font-display); font-size: 1.6rem; margin: 6px 0 4px; }
.fam-list { margin: 26px 0 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.fam__name { font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
html[lang="ar"] .fam__name { font-size: .75rem; letter-spacing: 0; }
.fam__dots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fam__dots .swatch { width: 22px; height: 22px; }
.b-pro { background: var(--night); color: var(--on-night); padding-block: clamp(72px, 10vw, 120px); }
.b-pro .eyebrow { color: var(--accent-on-night); }
.b-pro .section-title { color: var(--on-night); }
.b-pro p { color: var(--on-night-muted); max-width: 46ch; line-height: 1.85; }
.b-pro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 90px); align-items: center; }
.b-phil { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.b-phil__text { padding: clamp(48px, 7vw, 96px); }
.b-phil__media { height: clamp(380px, 46vw, 600px); overflow: hidden; }
.proj-card__media { aspect-ratio: 4 / 3; }

/* ---------- download grid (product page, professionals band) ---------- */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 26px; }
.dl-grid > * { background: var(--bg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.dl-grid > a:hover b { color: var(--brand); }
.dl-grid b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.2; }
.dl-grid small { font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .dl-grid small { font-size: .75rem; letter-spacing: 0; }
.dl-grid .is-request b { color: var(--muted); }
.dl-grid--dark { background: #46413A; border-color: #46413A; margin-top: 0; }
.dl-grid--dark > * { background: var(--night); padding: 24px; }
.dl-grid--dark b { color: var(--on-night); font-size: 1.25rem; }
.dl-grid--dark small { color: var(--on-night-muted); }
.dl-grid--dark .is-request b { color: var(--on-night-muted); }
.dl-grid--dark > a:hover b { color: var(--accent-on-night); }

/* ---------- product page ---------- */
.pdp { padding-top: 26px; }
.gallery__stage, .gallery__viewport, .gallery__slide { background: var(--stage); border-radius: 0; }
.gallery__thumb { border-radius: 0; background: var(--stage); }
.gallery__thumb.is-active { box-shadow: inset 0 0 0 1px var(--ink); }
.pdp__title { font-family: var(--font-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1.05; color: var(--ink); }
.pdp__meta { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.finish-picker { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.finish-picker legend { font-family: var(--font-display); font-size: 1.35rem; }
.fin-swatch__chip { width: 42px; height: 42px; border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 3px var(--bg); }
.pdp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.pdp__actions > .btn--block { grid-column: 1 / -1; }
.keyfacts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.keyfacts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.keyfacts li > :first-child { color: var(--muted); }
.keyfacts li > :last-child { text-align: end; }
.tech { border-top: 1px solid var(--line); }
.tech__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 64px); align-items: start; }
.tech__draw { background: #fff; border: 1px solid var(--line); padding: 28px; display: grid; gap: 20px; }
.tech__draw .drawing { border: 0; background: none; padding: 0; cursor: zoom-in; }
.tech__draw img { max-height: 640px; width: auto; margin-inline: auto; }
.tech__title { margin: 14px 0 22px; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); }
.tech .prose { font-size: .9375rem; color: var(--muted); margin-bottom: 22px; }
.spec-table th, .spec-table td { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.spec-table th { color: var(--muted); font-weight: 400; width: 44%; }
.tech__note { font-size: 11px; color: var(--muted); margin-top: 14px; }
.pdp-bar { background: var(--bg); border-top: 1px solid var(--line); }

/* ---------- related collections ---------- */
.rel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.rel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--panel); text-decoration: none; }
.rel__img { aspect-ratio: 1; background: var(--stage); overflow: hidden; }
.rel__img img { width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.rel__body { display: grid; gap: 8px; padding: 28px; }
.rel__name { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.rel__tag { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--muted); }

/* ---------- finishes page ---------- */
.fin-family + .fin-family { border-top: 1px solid var(--line); }
.fin-family .section-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 26px; }
.fin-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 20px; }
.fin-tile { display: grid; gap: 6px; text-decoration: none; }
.fin-tile__chip { display: block; aspect-ratio: 1; max-width: 120px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(42, 39, 34, .18); transition: transform .5s var(--ease-b); margin-bottom: 8px; }
.fin-tile:hover .fin-tile__chip { transform: scale(1.04); }
.fin-tile__name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; }
.fin-tile__meta { font-size: 11px; color: var(--muted); }

/* ---------- where to buy ---------- */
.wtb-country { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin: 0 0 22px; }
.wtb-list { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.wtb { background: var(--panel); padding: 28px; }
.wtb__name { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 6px; }
.wtb address { font-style: normal; color: var(--muted); margin: 10px 0 0; }
.wtb .keyfacts { margin-top: 18px; }
.wtb .btn-row { margin-top: 20px; }
.form-on-dark { background: var(--bg); color: var(--ink); padding: clamp(20px, 3vw, 32px); }
.form-on-dark p { color: var(--muted); }

.wtb-finder { margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.wtb-none { background: var(--panel); padding: 28px; margin-bottom: 40px; max-width: 760px; }
.wtb-none p { color: var(--muted); }

.dl-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 640px) { .dl-grid--wide { grid-template-columns: 1fr 1fr; } }

/* ---------- page openings and About (wording unchanged) ---------- */
.c-hero__title--page { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1; }
.c-hero + .section, .c-hero + .section--tight, .c-hero + .triad { margin-top: clamp(40px, 6vw, 80px); }
.triad, .triad--light { background: var(--panel); color: var(--ink); border-block: 1px solid var(--line); }
.triad__inner span { background: var(--rule); }
.quote p { color: var(--ink); }
.quote p::before, .quote p::after { color: var(--rule); }
.award--dark { color: var(--brand); }
.rounded { border-radius: 0; }
.panel { border-radius: 0; background: var(--panel); }
.field input, .field select, .field textarea { border-radius: 0; }

/* Spam trap field: clipped in place rather than pushed off-screen, which widened right-to-left pages. */
.hp { position: absolute !important; left: 0 !important; right: auto !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- footer ---------- */
.site-footer { background: var(--panel); color: var(--muted); border-top: 1px solid var(--line); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--brand); }
.site-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 36px; padding-block: 64px 40px; }
.site-footer__brand img { width: 120px; height: auto; margin-bottom: 14px; }
.footer-head { color: var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .2em; }
.site-footer ul { display: grid; gap: 6px; }
.site-footer li.muted { color: var(--muted); font-size: 12px; }
.site-footer__bottom { border-top: 1px solid var(--line); color: var(--muted); }
.social a { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
	.grid--products, .grid.grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.header-wtb { display: none; }
}
@media (max-width: 1000px) {
	.topbar__note { display: none; }
	.topbar__inner { justify-content: flex-end; }
	.c-hero--split .c-hero__inner, .b-fin__grid, .b-pro__grid, .tech__grid { grid-template-columns: 1fr; }
	.c-hero__media { order: -1; justify-self: stretch; aspect-ratio: 4 / 3; }
	.b-world, .b-phil { grid-template-columns: 1fr; }
	.b-world__text, .b-phil__text { padding: 40px var(--gutter) 0; }
	.b-phil__media { order: -1; }
	.site-footer__top { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.filters__row { margin-inline-start: 0; }
}
@media (max-width: 640px) {
	.grid--products, .grid.grid--products, .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
	.card__body { flex-direction: column; gap: 4px; }
	.card .swatches { justify-content: flex-start; max-width: none; }
	.card__title { font-size: 1rem; }
	.b-hero { margin-inline: 0; height: 430px; }
	.b-hero__card { position: static; width: auto; padding: 28px var(--gutter) 0; }
	.b-hero { height: auto; }
	.b-hero__media { height: 430px; }
	.filter-group { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; width: calc(100% + 2 * var(--gutter)); }
	.chip { flex: none; }
	.filters__row { width: 100%; justify-content: space-between; }
	.fin-row .filters__label, .select-wrap .filters__label { display: none; }
	.pdp__actions { grid-template-columns: 1fr; }
	.rel-row { grid-template-columns: 1fr; }
	.dl-grid--dark > * { padding: 18px; }
	.place__name { font-size: 1.15rem; }
}

/* ---------- homepage, short version (2.2) ---------- */
/* Hero with the text set over the photograph's sky (2.2.1). The photograph is mirrored in Arabic so the sky sits behind the text. */
.b-hero--over { margin-inline: 0; height: clamp(560px, 53vw, 880px); }
.b-hero--over .b-hero__media img { object-position: 30% 50%; }
html[dir="rtl"] .b-hero--over .b-hero__media img { transform: scaleX(-1); }
.b-hero--over .b-hero__card { top: clamp(48px, 8vw, 120px); bottom: auto; inset-inline-start: clamp(24px, 13vw, 240px); width: min(620px, 80%); padding: 0; background: none; }
html[dir="rtl"] .b-hero--over .b-hero__card { padding: 0; }
.b-hero--over .b-hero__title { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.4rem); margin-top: 18px; }
.b-hero--over .b-hero__sub { color: #4A443D; }
.b-hero__btn { display: inline-flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .12); }
.b-hero__btn .icon { width: 22px; height: 22px; }
.b-hero__btn:hover .icon { transform: translateX(3px); }
html[dir="rtl"] .b-hero__btn:hover .icon { transform: translateX(-3px); }
@media (max-width: 640px) {
	.b-hero.b-hero--over { height: min(700px, 88svh); }
	.b-hero--over .b-hero__media { height: 100%; }
	.b-hero--over .b-hero__media img { object-position: 22% 50%; }
	.b-hero--over .b-hero__card { position: absolute; top: 36px; inset-inline: var(--gutter); width: auto; padding: 0; }
	.b-hero--over::before { content: ""; position: absolute; inset: 0 0 45% 0; z-index: 0; background: linear-gradient(to bottom, rgba(244, 238, 230, .55), rgba(244, 238, 230, 0)); pointer-events: none; }
	.b-hero--over .b-hero__card { z-index: 1; }
}



.h-section { padding-block: clamp(56px, 7vw, 104px); }
.h-craft { padding-top: clamp(56px, 7vw, 96px); }
.h-craft__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 520px); gap: clamp(32px, 6vw, 88px); align-items: center; justify-content: center; }
.h-craft__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--stage); }
.h-craft__media img { width: 100%; height: 100%; object-fit: cover; }
.h-craft__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.15; margin: 10px 0 14px; color: var(--headline); text-wrap: balance; }
.h-craft__text p.muted { max-width: 42ch; line-height: 1.8; margin: 0 0 20px; }
.h-craft + .h-section { padding-top: clamp(48px, 6vw, 88px); }
@media (max-width: 700px) {
	.h-craft__grid { grid-template-columns: 1fr; gap: 24px; }
}


/* Collections cube (after bongio.com): sticky name panel folds back, photo columns drift. */
.h-cube { position: relative; background: #C9BFB1; margin-top: clamp(56px, 7vw, 96px); overflow: clip; }
.h-cube__text { position: sticky; top: 0; z-index: 1; height: 60vh; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px var(--gutter); background: var(--bg); text-align: center; transform-origin: center bottom; will-change: transform; }
.h-cube__cats { margin: 0; max-width: 980px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1rem + 3.4vw, 4.4rem); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); }
.h-cube__cats a { color: inherit; text-decoration: none; transition: opacity .3s; }
.h-cube__cats a:hover { opacity: .55; }
.h-cube__cats sup { font-family: var(--font-body, inherit); font-size: .26em; letter-spacing: .08em; vertical-align: super; margin-inline-start: 3px; color: var(--muted); }
.h-cube__cats span { opacity: .35; }
.h-cube__images { position: relative; z-index: 2; height: min(100vh, 980px); overflow: hidden; background: var(--stage); transform-origin: center top; will-change: transform, opacity; }
.h-cube__images::before, .h-cube__images::after { content: ""; position: absolute; inset-inline: 0; height: 14%; z-index: 2; pointer-events: none; }
.h-cube__images::before { top: 0; background: linear-gradient(var(--stage), transparent); }
.h-cube__images::after { bottom: 0; background: linear-gradient(to top, var(--stage), transparent); }
.h-cube__cols { display: flex; gap: 14px; height: 100%; padding-inline: 14px; }
.h-cube__cols--2 { display: none; }
.h-cube__col { flex: 1 1 0; position: relative; overflow: hidden; }
.h-cube__track { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 14px; will-change: transform; animation: cubeUp 48s linear infinite; }
.h-cube__col--down .h-cube__track { animation-name: cubeDown; }
@keyframes cubeUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes cubeDown { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
.h-cube:hover .h-cube__track, .h-cube:focus-within .h-cube__track, .h-cube.is-paused .h-cube__track { animation-play-state: paused; }
.h-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.h-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-b); }
.h-tile:hover img, .h-tile:focus-visible img { transform: scale(1.04); }
.h-tile__cap { position: absolute; inset-inline-start: 12px; bottom: 12px; padding: 6px 10px; background: rgba(244, 238, 230, .92); color: var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
html[lang="ar"] .h-tile__cap { letter-spacing: 0; font-size: .8125rem; }
.h-tile:hover .h-tile__cap, .h-tile:focus-visible .h-tile__cap { opacity: 1; transform: none; }
.h-cube__pause { position: absolute; z-index: 4; inset-inline-end: 18px; bottom: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(42, 39, 34, .78); color: var(--on-night); display: grid; place-items: center; cursor: pointer; }
.h-cube__pause .icon { width: 18px; height: 18px; }
.h-cube__pause .i-play, .h-cube.is-paused .h-cube__pause .i-pause { display: none; }
.h-cube.is-paused .h-cube__pause .i-play { display: inline; }
.h-cube + .h-fin { margin-top: 0; }
@media (max-width: 750px) {
	.h-cube__text { height: 52vh; min-height: 320px; }
	.h-cube__images { height: 78vh; }
	.h-cube__cols--4 { display: none; }
	.h-cube__cols--2 { display: flex; gap: 10px; padding-inline: 10px; }
	.h-cube__cols--2 .h-cube__track { gap: 10px; }
	.h-tile__cap { opacity: 1; transform: none; font-size: 9px; padding: 5px 8px; inset-inline-start: 8px; bottom: 8px; }
	.h-cube__pause { bottom: 12px; inset-inline-end: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.h-cube__track { animation: none; }
	.h-cube__text, .h-cube__images { transform: none !important; opacity: 1 !important; }
	.h-cube__pause { display: none; }
}
.h-fin { background: var(--stage); padding-block: clamp(48px, 6vw, 88px); }
.h-fin__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: center; justify-content: center; }
.h-fin__media { aspect-ratio: 4 / 5; overflow: hidden; }
.h-fin__media img { width: 100%; height: 100%; object-fit: cover; }
.h-fin__text .muted { margin: 14px 0 18px; }
.h-fin__dots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; max-width: 420px; }
.h-fin__dots .swatch { width: 22px; height: 22px; }
@media (max-width: 700px) { .h-fin__grid { grid-template-columns: 1fr; } .h-fin__media { max-width: 420px; } }
.h-proj.proj-grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- chat assistant (homepage) ---------- */
.chat { position: fixed; z-index: var(--z-float); inset-inline-end: 20px; bottom: max(20px, env(safe-area-inset-bottom)); }
.chat__launch { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding-inline: 18px 22px; border: 0; border-radius: 28px; background: var(--night); color: var(--on-night); font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); transition: transform .2s var(--ease-b); }
.chat__launch:hover { transform: translateY(-2px); }
.chat__launch .icon { width: 22px; height: 22px; }
.chat.is-open .chat__launch { display: none; }
.chat__panel { position: absolute; inset-inline-end: 0; bottom: 0; width: min(380px, calc(100vw - 40px)); height: min(580px, calc(100svh - 120px)); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(42, 39, 34, .45); }
.chat__panel[hidden] { display: none; }
.chat__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px 14px 20px; padding-inline: 20px 12px; background: var(--night); color: var(--on-night); }
.chat__title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; }
.chat__status { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--on-night-muted); }
.chat__status .icon { width: 13px; height: 13px; }
.chat__close { color: var(--on-night); }
.chat__log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__msg { max-width: 88%; margin: 0; padding: 10px 14px; font-size: .875rem; line-height: 1.55; }
.chat__msg--bot { align-self: flex-start; background: var(--stage); }
.chat__msg--me { align-self: flex-end; background: var(--night); color: var(--on-night); }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__chip { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--bg); color: var(--ink); font-size: .8125rem; cursor: pointer; }
.chat__chip:hover { border-color: var(--ink); }
.chat__links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.chat__links a { color: var(--brand); font-weight: 500; }
.chat__wa { display: flex; width: fit-content; margin-top: 10px; padding: 8px 14px; background: #1f7a4d; color: #fff; text-decoration: none; font-weight: 600; font-size: .8125rem; }
.chat__wa:hover { background: #18633e; }
.chat__cards { display: grid; gap: 8px; margin-top: 8px; }
.chat__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; background: var(--bg); padding: 6px; }
.chat__card img, .chat__card > span:first-child { width: 56px; height: 56px; object-fit: contain; background: var(--stage); mix-blend-mode: multiply; }
.chat__card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat__card-text a:first-child { color: var(--ink); font-weight: 500; font-size: .8125rem; line-height: 1.3; overflow-wrap: anywhere; }
.chat__card-text small { font-size: 10.5px; color: var(--muted); }
.chat__card-wa { font-size: 11px; font-weight: 600; color: #1f7a4d; }
.chat__dots { display: inline-flex; gap: 4px; }
.chat__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chatDot 1s infinite ease-in-out; }
.chat__dots i:nth-child(2) { animation-delay: .15s; } .chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.chat__form { display: flex; border-top: 1px solid var(--line); }
.chat__form input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; background: var(--bg); font-size: 16px; }
.chat__form input:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.chat__send { width: 52px; border: 0; background: var(--night); color: var(--on-night); cursor: pointer; }
html[dir="rtl"] .chat__send svg { transform: scaleX(-1); }
.btn--wa .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) { .chat__dots i { animation: none; } .h-tile img { transition: none; } }
@media (max-width: 640px) {
	.h-proj.proj-grid--row { grid-template-columns: none; }
	.chat { inset-inline-end: 16px; }
	.chat__launch-label { display: none; }
	.chat__launch { width: 56px; padding: 0; justify-content: center; }
	.chat__panel { position: fixed; inset-inline: 0; bottom: 0; width: auto; height: min(78svh, 600px); }
}

/* ---------------------------------------------------------------------------------------------
   One heading scale, tighter rhythm (2026-10-22).
   Every page title (homepage hero, inner pages, product pages) shares one size, every section
   heading shares another, and the space between blocks is cut back so pages are shorter.
   --------------------------------------------------------------------------------------------- */
:root {
	--fs-title: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
	--fs-section: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
	--gap-section: clamp(48px, 6vw, 88px);
}
.b-hero__title, .b-hero--over .b-hero__title, .c-hero__title, .c-hero__title--page, .page-title, .pdp__title { font-size: var(--fs-title); line-height: 1.04; }
.section-title, .fin-family .section-title, .h-craft__title, .h-sm { font-size: var(--fs-section); line-height: 1.1; }
.c-hero__title { margin: 8px 0 6px; }
.rule { margin: 16px 0; }
.facts-row { margin-top: 20px; padding-top: 16px; }
.filters { margin-top: clamp(24px, 3vw, 32px); margin-bottom: clamp(16px, 2vw, 24px); }
.browser { padding-bottom: var(--gap-section); }
.section, .h-section { padding-block: var(--gap-section); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.b-pro { padding-block: var(--gap-section); }
.c-hero + .section, .c-hero + .section--tight, .c-hero + .triad { margin-top: 0; }
.b-world { margin-top: var(--gap-section); }
.section-head { margin-bottom: clamp(20px, 3vw, 32px); }
.c-hero--split .c-hero__media { aspect-ratio: 4 / 3; max-height: 460px; }