/* Poppins for every Latin character, Almarai for Arabic. Both self-hosted. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/almarai-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/almarai-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Almarai"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/almarai-800-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Grupo Allpro. Ink on warm white, one yellow. Logical properties throughout so Arabic
   mirrors without a second stylesheet. */






:root {
	--ink: #131313;
	--ink-2: #2b2a28;
	--body: #3d3b37;
	--soft: #6f6a62;
	--softer: #756f66;
	--line: #e4e0d8;
	--line-2: #efece6;
	--paper: #f7f5f0;
	--paper-2: #efece6;
	--white: #ffffff;
	--yellow: #f2b41c;
	--yellow-2: #d99e0f;
	--yellow-soft: #fdf3d6;
	--pad: clamp(18px, 4vw, 48px);
	--sec-y: clamp(48px, 7vw, 96px);
	--font: "Poppins", "Almarai", "Segoe UI", Tahoma, Arial, sans-serif;
	--display: "Poppins", "Almarai", "Segoe UI", Tahoma, Arial, sans-serif;
	--radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 15.5px/1.65 var(--font); color: var(--body); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--yellow-2); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { inset-inline-start: 8px; }
[dir="rtl"] body, .is-rtl { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }

.eyebrow { display: block; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.eyebrow--light { color: #d7d1c6; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--radius); font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn--cta { background: var(--yellow); color: var(--ink); }
.btn--cta:hover { background: var(--yellow-2); color: var(--ink); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--ghost-dark { border-color: var(--line); color: var(--ink); }
.btn--ghost-dark:hover { border-color: var(--ink); }
.btn--block { width: 100%; }

/* ---------- Topbar + header ---------- */
.topbar { background: var(--ink); color: #cfc9be; font-size: 13px; }
.topbar__inner { display: flex; align-items: center; gap: 22px; min-height: 36px; flex-wrap: wrap; }
.topbar a { color: #e8e3d9; }
.topbar a:hover { color: var(--yellow); }
.topbar__phone { font-weight: 700; }
.topbar__note { color: #9a948a; }
.topbar__spacer { flex: 1; }
.lang { display: flex; gap: 2px; }
.lang__item { padding: 4px 9px; border-radius: 4px; font-size: 12.5px; color: #e8e3d9; }
.lang__item.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; }
.site-header { background: rgba(247, 245, 240, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand img { height: 42px; width: auto; }
.brand__light { display: none; }
.site-nav { display: flex; align-items: center; flex: 1; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; align-items: center; font-size: 15px; font-weight: 500; }
.site-nav__list a { color: var(--ink-2); }
[hidden] { display: none !important; }
.site-nav__list > li > a { display: inline-flex; align-items: center; height: 76px; position: relative; }
.site-nav__list > li > a::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transition: transform 0.15s; }
.site-nav__list > li:hover > a::before, .site-nav__list > .current-menu-item > a::before, .site-nav__list > .current-menu-ancestor > a::before { transform: scaleX(1); }
.site-nav__list li { position: relative; }
.site-nav__list .sub-menu { display: none; position: absolute; top: 100%; inset-inline-start: -12px; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); list-style: none; margin: 0; flex-direction: column; z-index: 60; }
.site-nav__list .sub-menu::before { content: ""; position: absolute; inset: -6px 0 100% 0; }
.site-nav__list li:hover > .sub-menu, .site-nav__list li:focus-within > .sub-menu { display: flex; }
.site-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 4px; font-size: 14.5px; }
.site-nav__list .sub-menu a:hover { background: var(--paper-2); }
.site-nav__cta { display: none; }
.nav-new { display: inline-block; background: var(--yellow); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; padding: 4px 6px 3px; border-radius: 3px; margin-inline-start: 6px; vertical-align: 2px; }
.site-header__actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.btn-quote { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: var(--ink); color: #fff; padding: 11px 16px; border-radius: var(--radius); font-weight: 600; font-size: 14.5px; }
.btn-quote:hover { background: var(--ink-2); color: #fff; }
.btn-quote__count { display: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.btn-quote__count.is-visible { display: inline-block; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; position: relative; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink); content: ""; }
.nav-toggle__bar { top: 21px; }
.nav-toggle__bar::before { top: -7px; left: 0; }
.nav-toggle__bar::after { top: 7px; left: 0; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #d7d1c6; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset-inline-end: -12vw; top: -20%; width: 60vw; height: 140%; background: radial-gradient(closest-side, rgba(242, 180, 28, 0.18), transparent 70%); pointer-events: none; }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.hero__title { color: #fff; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 22px; max-width: 14ch; }
[dir="rtl"] .hero__title { letter-spacing: 0; line-height: 1.25; }
.hero__sub { font-size: clamp(16px, 1.4vw, 19px); max-width: 52ch; color: #cfc9be; margin: 0 0 30px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hero__facts li { border-inline-start: 3px solid var(--yellow); padding-inline-start: 16px; }
.hero__facts strong { display: block; color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.hero__facts span { font-size: 13.5px; color: #b8b1a5; }

/* ---------- Sections ---------- */
.section { padding-block: var(--sec-y); }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(22px, 3vw, 36px); }
.section__title { font-size: clamp(26px, 3vw, 40px); max-width: 26ch; margin: 0; }
.section__title--sm { font-size: clamp(22px, 2.2vw, 28px); }
.section__link { font-weight: 700; font-size: 14.5px; border-bottom: 2px solid var(--yellow); padding-bottom: 3px; }

.families { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.family { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s, transform 0.15s; }
.family:hover { border-color: var(--yellow); transform: translateY(-2px); }
.family__media { display: block; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.family__media img { width: 100%; height: 100%; object-fit: cover; }
.family__body { padding: 16px 18px 18px; }
.family__title { font-size: 17px; margin: 0 0 4px; }
.family__title a::after { content: ""; position: absolute; inset: 0; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; }
.steps__n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-weight: 800; margin-bottom: 14px; }
.steps h3 { font-size: 18px; }
.steps p { margin: 0; color: var(--soft); font-size: 15px; }
.about-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: start; }
.about-strip__text p { font-size: 16.5px; }

/* ---------- Catalogue heads + filters ---------- */
.shop-head { background: var(--ink); color: #cfc9be; }
.shop-head__inner { padding-block: clamp(28px, 4vw, 52px); }
.crumbs { font-size: 13px; color: #9a948a; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: #cfc9be; }
.crumbs span { color: #fff; }
.crumbs--dark { color: var(--softer); padding-top: 18px; margin-bottom: 4px; }
.crumbs--dark a { color: var(--soft); }
.crumbs--dark span { color: var(--ink); }
.shop-head__title { color: #fff; font-size: clamp(30px, 4vw, 52px); margin: 0 0 10px; }
.shop-head__sub { max-width: 60ch; margin: 0; font-size: 16px; }
.filters { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 76px; z-index: 40; }
.filters__inner { display: flex; align-items: center; gap: 14px; padding-block: 10px; overflow-x: auto; }
.filters__up { white-space: nowrap; font-size: 13.5px; color: var(--soft); }
.filters__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.filters__pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; font-size: 13.5px; font-weight: 500; }
.filters__pill span { color: var(--softer); font-size: 12px; }
.filters__pill:hover { border-color: var(--ink); color: var(--ink); }
.filters__pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters__pill.is-active span { color: #cfc9be; }

/* ---------- Product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.empty { color: var(--soft); }
.pagination { margin-top: 32px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 13px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Product page ---------- */
.product { padding-block: 8px clamp(40px, 6vw, 72px); }
.product__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pgallery__main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 4 / 3; padding: 16px; }
.pgallery__main img { width: 100%; height: 100%; object-fit: contain; }
.pgallery__thumbs { display: flex; gap: 8px; margin-top: 10px; }
.pgallery__thumb { width: 72px; height: 72px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.pgallery__thumb.is-active { border-color: var(--ink); }
.pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.psummary__title { font-size: clamp(28px, 3vw, 40px); }
.psummary__desc { font-size: 16.5px; color: var(--body); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 22px 0; }
.specs__cell { background: #fff; padding: 12px 14px; }
.specs dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--softer); margin-bottom: 3px; }
[dir="rtl"] .specs dt { letter-spacing: 0; }
.specs dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.qbox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.qbox__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.qbox__label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--softer); font-weight: 700; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.stepper button { width: 38px; height: 40px; border: 0; background: var(--paper-2); font-size: 18px; }
.stepper input { width: 84px; height: 40px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper__unit { padding-inline: 10px; font-size: 13px; color: var(--soft); background: var(--paper-2); height: 40px; display: inline-flex; align-items: center; }
.qbox__link { display: none; margin-top: 12px; font-weight: 700; font-size: 14px; }
.qbox__link.is-visible { display: inline-block; }
.qbox__note { margin: 14px 0 0; font-size: 13px; color: var(--soft); }
.product__copy { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.product__aside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: 96px; }
.flow > * + * { margin-top: 1em; }
.flow h2 { font-size: 24px; margin-top: 1.4em; }
.flow--narrow { max-width: 760px; }

/* ---------- Quote page + forms ---------- */
.quote-empty { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); max-width: 720px; }
.quote-empty__paths { display: flex; gap: 12px; flex-wrap: wrap; }
.quote__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.quote__items { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.quote__items-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.quote__items-head h2 { font-size: 20px; }
.quote__items-head span { font-size: 13px; color: var(--soft); }
.quote-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-2); }
.quote-item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; }
.quote-item img.is-blank { visibility: hidden; }
.quote-item__name { font-weight: 600; color: var(--ink); font-size: 15px; }
.quote-item__tag { font-size: 12px; color: var(--softer); }
.quote-item__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; direction: ltr; }
.quote-item__qty button { width: 32px; height: 36px; border: 0; background: var(--paper-2); }
.quote-item__qty input { width: 64px; height: 36px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.quote-item__qty input::-webkit-outer-spin-button, .quote-item__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.quote-item__unit { padding-inline: 8px; font-size: 12.5px; color: var(--soft); }
.quote-item__rm { border: 0; background: none; color: var(--softer); font-size: 20px; width: 32px; height: 32px; }
.quote-item__rm:hover { color: #b32d2e; }
.quote__more { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; }
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.form h2 { font-size: 20px; margin-bottom: 18px; }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.form__field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form__opt { font-weight: 400; color: var(--softer); }
.form input:not([type="hidden"]), .form select, .form textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--yellow); outline-offset: 1px; border-color: var(--yellow); }
.form__note { margin: 12px 0 0; font-size: 13px; color: var(--soft); text-align: center; }
.hp-field { position: absolute; inset-inline-start: -9999px; }
.notice { border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.notice--ok { background: var(--yellow-soft); border: 1px solid #f0dca0; }
.notice--err { background: #fbe4e4; border: 1px solid #f0b8b8; color: #8a1f1f; }
.notice h2 { font-size: 22px; }
.notice p { margin-bottom: 14px; }
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact__aside { background: var(--ink); color: #cfc9be; border-radius: var(--radius); padding: 28px; }
.contact__aside h2 { color: #fff; font-size: 22px; }
.contact__aside address { font-style: normal; color: #fff; margin-bottom: 8px; }
.contact__hint { font-size: 13.5px; color: #9a948a; }
.contact__list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.contact__list a { color: var(--yellow); font-weight: 600; }
.contact__hours { font-size: 13.5px; margin: 0; }

/* ---------- Reach + footer ---------- */
.reach { background: var(--ink-2); color: #cfc9be; padding-block: var(--sec-y); }
.reach__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.reach__lead h2 { color: #fff; font-size: clamp(24px, 3vw, 36px); }
.reach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reach__card { display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); padding: 18px; color: #fff; transition: border-color 0.15s; }
.reach__card:hover { border-color: var(--yellow); color: #fff; }
.reach__k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); font-weight: 700; }
.reach__v { font-size: 17px; font-weight: 700; }
.reach__s { font-size: 13px; color: #b3ada3; }
.site-footer { background: var(--ink); color: #b8b1a5; padding-block: 48px 24px; font-size: 14px; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.site-footer__brand img { height: 40px; width: auto; margin-bottom: 16px; }
.site-footer h3 { color: #fff; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer h3 a { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: #d7d1c6; }
.site-footer a:hover { color: var(--yellow); }
.site-footer__addr { font-style: normal; margin-top: 18px; color: #9a948a; line-height: 1.5; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; color: #9a948a; }
.wa-float { position: fixed; inset-inline-end: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); z-index: 45; }
.wa-float:hover { color: #fff; transform: scale(1.05); }

/* ---------- Consent + reveals ---------- */
.consent { position: fixed; inset-inline: 18px; bottom: 18px; max-width: 520px; margin-inline-start: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); padding: 18px; z-index: 60; display: flex; gap: 14px; align-items: center; opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; }
.consent.is-in { opacity: 1; transform: none; }
.consent__text { margin: 0; font-size: 13.5px; }
.consent__actions { display: flex; gap: 8px; }
.consent__btn { padding: 9px 14px; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.consent__btn--ghost { background: none; color: var(--ink); }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.steps { grid-template-columns: 1fr; }
}
@media (max-width: 896px) {
	.topbar__note, .topbar__mail { display: none; }
	.site-header__inner { height: 64px; gap: 14px; }
	.brand img { height: 34px; }
	.nav-toggle { display: block; }
	.site-nav { display: none; position: absolute; top: 64px; inset-inline: 0; background: #161616; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); padding: 12px var(--pad) 20px; flex-direction: column; align-items: stretch; max-height: calc(100vh - 64px); overflow: auto; }
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list > li > a { height: auto; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
	.site-nav__list .sub-menu a { color: #e8e3d9; }
	.site-nav__list > li > a::before { display: none; }
	.site-nav__list .sub-menu { display: none; position: static; box-shadow: none; border: 0; padding: 0 0 8px 14px; min-width: 0; }
	.site-nav__list li.is-open > .sub-menu { display: flex; }
	.site-nav__cta { display: flex; margin-top: 14px; }
	.site-nav__cta .btn { border-color: rgba(255, 255, 255, 0.3); color: #fff; flex: 1; }
	.hero__inner { grid-template-columns: 1fr; gap: 28px; }
	.hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.filters { top: 64px; }
	.product__grid, .product__copy, .quote__grid, .contact, .reach__inner, .about-strip { grid-template-columns: 1fr; }
	.product__aside { position: static; }
}
@media (max-width: 640px) {
	.wrap { padding-inline: 16px; }
	.topbar__inner { gap: 10px; min-height: 32px; }
	.topbar { font-size: 12px; }
	.lang__item { padding: 3px 6px; font-size: 11.5px; }
	.btn-quote { padding: 9px 12px; font-size: 13.5px; }
	.site-header__actions { gap: 8px; }
	.hero__facts { grid-template-columns: 1fr; gap: 10px; }
	.form__row--2, .reach__grid, .site-footer__grid { grid-template-columns: 1fr; }
	.specs { grid-template-columns: 1fr; }
	.quote-item { grid-template-columns: 52px minmax(0, 1fr) auto; }
	.quote-item__qty { grid-column: 2 / 4; }
	.consent { flex-direction: column; align-items: stretch; }
	.pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.pcard__body { padding: 12px; }
	.pcard__desc { display: none; }
	.pcard__foot { flex-direction: column; align-items: stretch; gap: 6px; }
	.families { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.family__body { padding: 12px; }
	.family__title { font-size: 15px; }
}

/* ---------- Mega menu + search ---------- */
.site-nav__item--mega > a { gap: 6px; }
.site-nav__caret { width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.5; margin-inline-start: 4px; }
.mega { display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 60; }
.site-nav__list .site-nav__item--mega { position: static; }
.site-nav__item--mega:hover > .mega, .site-nav__item--mega:focus-within > .mega, .site-nav__item--mega.is-open > .mega { display: block; }
.mega::before { content: ""; position: absolute; inset: -14px 0 100% 0; }
.mega { padding-inline: var(--pad); }
.mega__inner { display: grid; grid-template-columns: repeat(var(--mega-cols, 2), minmax(0, 1fr)) 300px; gap: 28px; background: #161616; border: 1px solid rgba(255, 255, 255, 0.08); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); padding: 26px 28px 28px; max-width: 1184px; margin-inline: auto; color: #e8e3d9; }
.site-nav__list .mega__title { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.site-nav__list .mega__link { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; font-size: 14px; color: #e8e3d9; }
.site-nav__list .mega__link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mega__thumb { width: 40px; height: 40px; border-radius: 4px; background: #222; overflow: hidden; flex: none; border: 1px solid rgba(255, 255, 255, 0.14); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__name { flex: 1; font-weight: 500; line-height: 1.25; }
.mega__promo { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #cfc9be; border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.mega__promo h3 { color: #fff; font-size: 19px; margin: 0; }
.mega__promo p { margin: 0; font-size: 13.5px; }
.mega__promo .btn { align-self: flex-start; margin-top: 6px; }
.site-nav__list .mega__all { font-size: 13px; color: var(--yellow); font-weight: 600; }
.site-search { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: #fff; padding-inline-start: 14px; height: 40px; width: 220px; margin-inline-start: auto; }
.site-search input { border: 0; background: none; flex: 1; min-width: 0; font-size: 13.5px; outline: none; }
.site-search button { border: 0; background: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--soft); }
.site-header__actions { margin-inline-start: 0; }
@media (max-width: 1200px) { .site-search { width: 170px; } }
@media (max-width: 896px) {
	.site-search { display: none; }
	.mega { display: none; position: static; }
	.site-nav__item--mega.is-open > .mega { display: block; }
	.mega__inner { grid-template-columns: 1fr; gap: 16px; margin: 0 0 12px; padding: 6px 0 10px; box-shadow: none; border: 0; background: none; }
	.mega__list { grid-template-columns: 1fr; }
	.mega__promo { display: none; }
	.site-nav__list .sub-menu a { padding: 8px 0; }
}

/* ---------- Shop-front homepage ---------- */
.hero--shop .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mosaic__tile { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #fff; }
.mosaic__tile:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mosaic__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mosaic__tile:hover img { transform: scale(1.04); }
.mosaic__tile span { position: absolute; inset-inline-start: 10px; bottom: 10px; background: rgba(19, 19, 19, 0.82); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 4px; }
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__cell { padding: 16px 18px; border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.trust__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.trust__cell strong { color: var(--ink); font-size: 15px; }
.trust__cell span { font-size: 12.5px; color: var(--soft); }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.tile:hover { border-color: var(--yellow); transform: translateY(-2px); }
.tile__media { display: block; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { display: flex; flex-direction: column; padding: 10px 12px 12px; }
.tile__root { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--softer); font-weight: 700; }
.tile__name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: 2px; }
.tile__count { font-size: 12px; color: var(--soft); margin-top: 2px; }
.pgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } .pgrid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 896px) { .hero--shop .hero__inner { grid-template-columns: 1fr; } .mosaic { order: -1; } .trust__grid { grid-template-columns: 1fr 1fr; } .trust__cell { padding: 12px 14px; } .trust__cell:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } .trust__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; } .pgrid--4 { grid-template-columns: repeat(2, 1fr); } .mosaic { gap: 6px; } .mosaic__tile span { font-size: 10.5px; padding: 3px 6px; } }

/* ---------- Photo hero ---------- */
.hero--photo { min-height: clamp(520px, 62vh, 760px); display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
.hero--photo::after { display: none; }
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg img { object-fit: cover; object-position: 35% center; }
.hero--photo .hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.86) 42%, rgba(10, 10, 10, 0.42) 60%, rgba(10, 10, 10, 0) 80%); }
.hero--photo .hero__inner { position: relative; display: block; padding-block: clamp(56px, 8vw, 110px); }
.hero--photo .hero__content { max-width: 560px; }
.hero--photo .hero__title { max-width: 12ch; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero--photo .hero__sub { color: #e6e1d8; }
[dir="rtl"] .hero--photo .hero__scrim { background: linear-gradient(265deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.86) 42%, rgba(10, 10, 10, 0.42) 60%, rgba(10, 10, 10, 0) 80%); }
[dir="rtl"] .hero__bg img { object-position: 65% center; }
@media (max-width: 640px) {
	.hero--photo { min-height: 560px; justify-content: flex-end; }
	.hero--photo .hero__scrim { background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.9) 100%); }
	[dir="rtl"] .hero--photo .hero__scrim { background: linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.9) 100%); }
	.hero--photo .hero__title { font-size: 34px; }
}

/* ---------- Headings: Poppins; Arabic headings in Almarai (Poppins has no Arabic) ---------- */
.hero__title, .shop-head__title, .section__title, .reach__lead h2, .about-strip .section__title, .acc-block__title, .psummary__title, .mega__promo h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.hero--photo .hero__title { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; max-width: 14ch; text-transform: none; }
[dir="rtl"] .hero__title, [dir="rtl"] .shop-head__title, [dir="rtl"] .section__title, [dir="rtl"] .acc-block__title, [dir="rtl"] .psummary__title, [dir="rtl"] .acc__name { font-family: "Almarai", var(--font); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
/* The hero copy hugs the left edge where the wall is, instead of the centred content column. */
.hero--photo .hero__inner { max-width: none; width: 100%; margin-inline: 0; padding-inline: clamp(24px, 5vw, 96px); }

/* ---------- Motion + glass + accordion (homepage) ---------- */
.glass { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px -30px rgba(0, 0, 0, 0.6); border-radius: 12px; }

/* Hero: slow drift on the photo, a cascade on the copy, the trust bar as a glass shelf. */
/* The drift is for the phone still only; on desktop the video carries the motion. */
@media (max-width: 767px) { .hero--photo .hero__bg img { animation: ap-drift 26s ease-in-out infinite alternate; transform-origin: 60% 60%; } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% center; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.hero__video.is-playing { opacity: 1; }
[dir="rtl"] .hero__video { object-position: 65% center; }
@keyframes ap-drift { from { transform: scale(1); } to { transform: scale(1.07) translate3d(-1.5%, 0, 0); } }
.hero__in { opacity: 0; transform: translate3d(0, 18px, 0); animation: ap-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
@keyframes ap-rise { to { opacity: 1; transform: none; } }
.hero--photo .hero__inner { max-width: 1280px; width: 100%; margin-inline: auto; padding-inline: var(--pad); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(28px, 4vw, 48px); min-height: inherit; }
.hero--photo .trust { align-self: stretch; }
.hero--photo .hero__content { max-width: 600px; }
.hero--photo .trust { display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px; color: #fff; }
.hero--photo .trust__cell { padding: 14px 18px; border-inline-start: 1px solid rgba(255, 255, 255, 0.12); }
.hero--photo .trust__cell:first-child { border-inline-start: 0; }
.hero--photo .trust__cell strong { color: #fff; font-size: 15px; }
.hero--photo .trust__cell span { color: #cfc9be; }
.trust { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .hero--photo .hero__bg img { animation: none; } .hero__in { animation: none; opacity: 1; transform: none; } }

/* Expanding image accordion: one strip per sub-category, the active one opens wide. */
.acc-block { margin-top: 28px; }
.acc-block__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.acc-block__title { font-size: 20px; margin: 0; }
.acc { display: flex; gap: 8px; height: clamp(260px, 30vw, 380px); }
.acc__item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--ink-2); transition: flex-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1); isolation: isolate; }
.acc__item.is-active { flex-grow: 4.2; }
.acc__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; filter: saturate(0.85) brightness(0.9); }
.acc__item.is-active img { transform: scale(1.04); filter: none; }
.acc__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, 0.78) 100%); }
.acc__label { position: absolute; inset-inline: 0; bottom: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; color: #fff; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.4s ease 0.15s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; }
.acc__item.is-active .acc__label { opacity: 1; transform: none; }
.acc__name { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.1; letter-spacing: -0.02em; }
[dir="rtl"] .acc__item.is-active .acc__item::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; }
.acc__item:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 896px) {
	.acc { height: auto; flex-direction: column; gap: 8px; }
	.acc__item { flex: none; height: 64px; transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
	.acc__item.is-active { height: 220px; flex-grow: 0; }
		[dir="rtl"] 	.acc__label { padding: 14px 18px; }
	.hero--photo .trust { grid-template-columns: 1fr 1fr; }
	.hero--photo .trust__cell:nth-child(odd) { border-inline-start: 0; }
}

/* Steps as a timeline on one rule, not three boxes. */
.steps--line { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps--line li { background: none; border: 0; border-radius: 0; padding: 26px 28px 8px 0; position: relative; }
.steps--line li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 44px; height: 3px; background: var(--yellow); }
.steps--line .steps__n { width: auto; height: auto; border-radius: 0; background: none; color: var(--soft); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.14em; margin-bottom: 18px; }
@media (max-width: 896px) { .steps--line { grid-template-columns: 1fr; } .steps--line li { padding: 20px 0 8px; border-top: 1px solid var(--line); } .steps--line li:first-child { border-top: 0; } }

/* Product cards: lift and zoom, tactile press on the button. */
.pcard__add:active, .btn:active { transform: scale(0.98); }
[data-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); }
[data-stagger].is-revealed > * { animation: ap-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { [data-stagger] > * { opacity: 1; transform: none; animation: none; } }

/* Mega menu: settles in rather than pops. No backdrop blur here: the header already has one,
   and a blur nested inside a blur paints the page through the panel in Chromium. */
.mega__inner { animation: ap-settle 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ap-settle { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
.acc-block__title a:hover { color: var(--yellow-2); }

/* Collapsed strips: darker, with the name on a small glass pill running up the middle, cut
   with an ellipsis when it is longer than the strip is tall. */
.acc__item:not(.is-active) .acc__shade { background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.8) 100%); }
.acc__side { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-block: 16px; pointer-events: none; opacity: 1; transition: opacity 0.25s ease; }
.acc__item.is-active .acc__side { opacity: 0; }
.acc__pill { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; padding: 12px 7px; border-radius: 99px; background: rgba(12, 12, 12, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
[dir="rtl"] .acc__pill { letter-spacing: 0; }
@media (max-width: 896px) {
	.acc__side { align-items: center; justify-content: flex-start; padding: 0 14px; }
	.acc__pill { writing-mode: horizontal-tb; transform: none; max-width: 100%; padding: 6px 12px; }
}

/* The open strip's title waits for the strip to finish widening, and never wraps mid-way. */
.acc__label { transition: opacity 0.15s ease, transform 0.2s ease; }
.acc__item.is-active .acc__label { transition: opacity 0.4s ease 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }
.acc__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Hero, shorter: one line under the title, the trust bar as four plain labels. */
.hero--photo .hero__sub { font-size: clamp(16px, 1.3vw, 19px); max-width: 44ch; }
.hero--photo .trust { list-style: none; margin: 0; align-self: flex-start; display: flex; flex-wrap: wrap; padding: 6px; gap: 0; }
.hero--photo .trust__cell { padding: 12px 22px; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.hero--photo .trust__cell strong { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.hero--photo .trust__cell span { font-size: 12.5px; color: #cfc9be; }
@media (max-width: 896px) { .hero--photo .trust { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; } .hero--photo .trust__cell { border-inline-start: 0; padding: 10px 14px; } .hero--photo .trust__cell strong { font-size: 16px; } }

/* Interior products are materials: the swatch fills the card edge to edge, and the room
   scene (the second photo) fades in on hover. Outdoor cut-outs keep the white panel. */

/* ---------- Company band: the metallic mark ---------- */
.brand-band { background: var(--ink); color: #cfc9be; overflow: hidden; padding-block: clamp(48px, 6vw, 88px); position: relative; isolation: isolate; min-height: clamp(400px, 36vw, 540px); display: flex; align-items: center; }
.brand-band__inner { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@keyframes ap-breathe { 0%, 100% { transform: scale(0.94); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes ap-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* A glint that runs across the metal only, clipped to the mark's own shape. */
@keyframes ap-glint { 0% { background-position: 130% 0; } 28%, 100% { background-position: -30% 0; } }
.brand-band__title { color: #fff; }
.brand-band__copy p { font-size: 16.5px; color: #d7d1c6; max-width: 58ch; }
.brand-band__copy .btn { margin-top: 10px; }
.brand-band__title { margin-bottom: 20px; }

/* ---------- Page headers over a photo ---------- */
.shop-head--media { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(220px, 20vw, 300px); display: flex; align-items: center; }
.shop-head__bg, .shop-head__bg picture, .shop-head__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shop-head__bg { z-index: -2; }
.shop-head__bg img { object-fit: cover; object-position: center 55%; animation: ap-settle-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ap-settle-in { from { transform: scale(1.06); } to { transform: scale(1); } }
.shop-head__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.7) 38%, rgba(10, 10, 10, 0.25) 70%, rgba(10, 10, 10, 0.1) 100%), linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 55%); }
[dir="rtl"] .shop-head__scrim { background: linear-gradient(265deg, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.7) 38%, rgba(10, 10, 10, 0.25) 70%, rgba(10, 10, 10, 0.1) 100%), linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 55%); }
.shop-head--media .shop-head__inner { width: 100%; padding-block: clamp(28px, 3.5vw, 44px); }
.shop-head--media .shop-head__title { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.shop-head--media .shop-head__sub { color: #e6e1d8; max-width: 56ch; }
.shop-head--media .crumbs span { color: #fff; }
@media (max-width: 640px) { .shop-head--media { min-height: 220px; } .shop-head__scrim { background: linear-gradient(0deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 60%, rgba(10, 10, 10, 0.35) 100%); } }
@media (prefers-reduced-motion: reduce) { .shop-head__bg img { animation: none; } }

/* ---------- Masthead: topbar and header stick as one; the topbar slides out first ---------- */
.masthead { position: sticky; top: -36px; z-index: 50; }
@media (max-width: 640px) { .masthead { top: -32px; } }

/* Over a photo, the header is dark glass until the visitor scrolls past the photo. The
   masthead pulls the page up under itself, and the photo sections pad for it. */
.head-over .masthead { margin-bottom: calc(-1 * var(--masthead-h, 112px)); }
.head-over .hero--photo, .head-over .shop-head--media { padding-top: var(--masthead-h, 112px); }
.head-over .masthead:not(.is-solid) .site-header { background: rgba(10, 10, 10, 0.28); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border-bottom-color: rgba(255, 255, 255, 0.12); }
.head-over .masthead:not(.is-solid) .topbar { background: rgba(10, 10, 10, 0.55); }
.head-over .masthead:not(.is-solid) .brand__dark { display: none; }
.head-over .masthead:not(.is-solid) .brand__light { display: block; }
.head-over .masthead:not(.is-solid) .site-nav__list > li > a { color: #fff; }
.head-over .masthead:not(.is-solid) .site-search { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.head-over .masthead:not(.is-solid) .site-search input { color: #fff; }
.head-over .masthead:not(.is-solid) .site-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.head-over .masthead:not(.is-solid) .site-search button { color: #fff; }
.head-over .masthead:not(.is-solid) .btn-quote { background: var(--yellow); color: var(--ink); }
.head-over .masthead:not(.is-solid) .btn-quote:hover { background: var(--yellow-2, #ffc43d); color: var(--ink); }
.head-over .masthead:not(.is-solid) .nav-toggle { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(255, 255, 255, 0.1); }
.head-over .masthead:not(.is-solid) .nav-toggle__bar, .head-over .masthead:not(.is-solid) .nav-toggle__bar::before, .head-over .masthead:not(.is-solid) .nav-toggle__bar::after { background: #fff; }
.site-header, .topbar, .site-search, .btn-quote { transition: background-color 0.3s ease, border-color 0.3s ease; }
.masthead.is-solid .site-header { box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.35); }

/* ---------- Company band over the sculpture photo; copy on the right, the GAP piece on the left ---------- */
.brand-band__bg, .brand-band__bg picture, .brand-band__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-band__bg { z-index: -2; }
.brand-band__bg img { object-fit: cover; object-position: 30% center; }
.brand-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.72) 40%, rgba(10, 10, 10, 0.25) 62%, rgba(10, 10, 10, 0.05) 100%), linear-gradient(0deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0) 40%); }
.brand-band__copy p { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
/* The sculpture is on the left of the photo in every language, so the copy keeps the right
   half in RTL too: grid columns count from the right there, so the copy takes column 1. */
[dir="rtl"] .brand-band__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
[dir="rtl"] .brand-band__copy { grid-column: 1; }
[dir="rtl"] .brand-band__space { grid-column: 2; }
@media (max-width: 896px) {
	.brand-band { min-height: 0; padding-top: clamp(96px, 26vw, 130px); padding-bottom: 40px; }
	.brand-band__bg img { object-position: 45% 55%; }
	.brand-band__inner { grid-template-columns: 1fr; }
	.brand-band__space { display: none; }
	.brand-band__scrim { background: linear-gradient(0deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.85) 45%, rgba(10, 10, 10, 0.1) 75%, rgba(10, 10, 10, 0) 100%); }
}

/* ---------- The metallic GAP mark, tucked into the corner of "How it works" ---------- */
.steps-section { position: relative; overflow: hidden; }
.steps-section .wrap { position: relative; z-index: 1; }
.steps-section__mark { position: absolute; inset-inline-end: -2%; bottom: -14%; width: clamp(280px, 30vw, 480px); pointer-events: none; perspective: 1100px; }
.tuck-mark { position: relative; transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) rotate(-8deg); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); animation: ap-float 9s ease-in-out infinite; opacity: 0.92; }
.tuck-mark img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.28)); }
.tuck-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; -webkit-mask: url("../img/gap-mark.webp") center / contain no-repeat; mask: url("../img/gap-mark.webp") center / contain no-repeat; animation: ap-glint 7s ease-in-out infinite 2s; }
@media (max-width: 896px) { .steps-section__mark { width: 200px; bottom: -8%; inset-inline-end: -6%; opacity: 0.85; } .steps-section .steps { padding-bottom: 120px; } }
@media (prefers-reduced-motion: reduce) { .tuck-mark, .tuck-mark::after { animation: none; } .tuck-mark { transform: none; } }

/* ---------- Touch sizes: every control at least 40 px tall on phones ---------- */
@media (max-width: 896px) {
	.site-footer a:not(.brand), .contact a, .reach a, .acc-block__title a { display: inline-block; padding-block: 8px; }
	.section__link { display: inline-block; padding-block: 8px 3px; }
	.pcard__add, .pcard__foot .pcard__add { padding: 10px 14px; }
	.filters__pill { padding: 9px 14px; }
	.filters__up { display: inline-flex; align-items: center; min-height: 40px; }
	.qbox button { min-width: 44px; min-height: 44px; }
	.crumbs a { display: inline-block; padding-block: 6px; }
}

/* ---------- Phone: header fills its row, drawer scrolls, search lives in the drawer ---------- */
@media (max-width: 896px) {
	.site-header__actions { margin-inline-start: auto; }
	.site-nav { max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
	.site-nav__search { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 99px; background: rgba(255, 255, 255, 0.08); padding-inline: 14px 6px; height: 46px; }
	.site-nav__search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-size: 15px; outline: none; }
	.site-nav__search input::placeholder { color: rgba(255, 255, 255, 0.6); }
	.site-nav__search button { border: 0; background: var(--yellow); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
	.site-nav__list > li > a { font-size: 17px; }
	.wa-float { width: 48px; height: 48px; inset-inline-end: 14px; bottom: 14px; }
	.pgallery__main { max-height: 300px; }
	.qbox { position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.3); }
}
@media (min-width: 897px) { .site-nav__search { display: none; } }

/* ---------- Live search suggestions ---------- */
.has-suggest { position: relative; }
.suggest { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 70; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35); padding: 6px; max-height: min(70vh, 520px); overflow-y: auto; min-width: 320px; text-align: start; }
.site-header__inner .site-search { position: relative; }
.site-header__inner .suggest { inset-inline: auto 0; width: 380px; }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; color: var(--ink); }
.suggest__item:hover, .suggest__item.is-active { background: var(--paper-2); }
.suggest__img { width: 44px; height: 44px; flex: none; border-radius: 4px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line-2); }
.suggest__img img { width: 100%; height: 100%; object-fit: contain; }
.suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.suggest__meta { font-size: 12px; color: var(--soft); letter-spacing: 0.02em; }
.suggest__all { display: block; padding: 10px; margin-top: 4px; border-top: 1px solid var(--line-2); font-weight: 700; font-size: 13.5px; color: var(--ink); text-align: center; }
.suggest__all:hover, .suggest__all.is-active { background: var(--paper-2); border-radius: 6px; }
.suggest__none { padding: 12px 10px; font-size: 13.5px; color: var(--soft); }
/* over the dark glass header the panel stays white, which reads as a sheet, like the mega menu on light pages */
/* in the phone drawer the list is part of the dark drawer */
@media (max-width: 896px) {
	.site-nav__search .suggest { position: static; margin-top: 8px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; max-height: none; min-width: 0; }
	.site-nav__search .suggest__item { color: #fff; }
	.site-nav__search .suggest__item:hover, .site-nav__search .suggest__item.is-active { background: rgba(255, 255, 255, 0.08); }
	.site-nav__search .suggest__meta { color: #cfc9be; }
	.site-nav__search .suggest__img { background: #222; border-color: rgba(255, 255, 255, 0.14); }
	.site-nav__search .suggest__all { color: var(--yellow); border-top-color: rgba(255, 255, 255, 0.12); }
	.site-nav__search .suggest__none { color: #cfc9be; }
	.site-nav__search.has-suggest { flex-wrap: wrap; height: auto; border-radius: 16px; padding-block: 4px; }
	.site-nav__search .suggest { flex-basis: 100%; }
}

/* ---------- Phone drawer: catalogue groups fold, everything flush with the left edge ---------- */
@media (max-width: 896px) {
	.mega__inner { padding: 0 0 6px; gap: 0; }
	.mega__col { padding: 0; }
	.site-nav__list .mega__title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; cursor: pointer; }
	.site-nav__list .mega__title::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.6; margin-inline-end: 6px; transition: transform 0.2s; }
	.mega__col.is-open .mega__title::after { transform: rotate(-135deg); }
	.mega__list { display: none; padding: 6px 0 10px; }
	.mega__col.is-open .mega__list { display: grid; }
	.site-nav__list .mega__link { padding: 8px 0; }
	.mega__thumb { width: 36px; height: 36px; }
	.site-nav__list .mega__all { display: block; padding: 12px 0; }
}

/* ---------- Product cards: the photo is the card, the text sits over its foot ---------- */
.pcard { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #fff; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; }
.pcard__media { position: absolute; inset: 0; display: block; }
.pcard__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard--light .pcard__photo { object-fit: contain; object-position: center 30%; padding: 12px 12px 34%; box-sizing: border-box; }
.pcard__body { position: relative; z-index: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.pcard--light .pcard__body { background: linear-gradient(0deg, #fff 0%, #fff 55%, rgba(255, 255, 255, 0) 100%); padding-top: 30px; }
.pcard--scene .pcard__body { background: linear-gradient(0deg, rgba(12, 12, 12, 0.94) 0%, rgba(12, 12, 12, 0.72) 55%, rgba(12, 12, 12, 0) 100%); padding-top: 48px; color: #fff; }
.pcard__title { font-size: 17px; line-height: 1.25; margin: 0; }
.pcard--scene .pcard__title a { color: #fff; }
.pcard__desc { font-size: 13.5px; line-height: 1.45; margin: 0; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard--scene .pcard__desc { color: rgba(255, 255, 255, 0.78); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pcard__ref { font-size: 12px; color: var(--softer); letter-spacing: 0.06em; direction: ltr; }
.pcard--scene .pcard__ref { color: rgba(255, 255, 255, 0.6); }
.pcard__add { border: 0; border-radius: 99px; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--ink); color: #fff; transition: background 0.15s, color 0.15s, transform 0.15s; white-space: nowrap; }
.pcard__add:hover { background: var(--yellow); color: var(--ink); }
.pcard--scene .pcard__add { background: #fff; color: var(--ink); }
.pcard--scene .pcard__add:hover { background: var(--yellow); }
.pcard__add.is-added, .pcard--scene .pcard__add.is-added { background: var(--yellow); color: var(--ink); }
.pcard__add:active { transform: scale(0.97); }
.pcard__chip { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); background: #fff; }
.pcard__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
	.pcard { border-radius: 12px; aspect-ratio: 4 / 5; }
	.pcard__body { padding: 14px 12px 12px; }
	.pcard--scene .pcard__body { padding-top: 44px; }
	.pcard__title { font-size: 15px; }
	.pcard__desc { display: none; }
	.pcard__add { padding: 9px 12px; font-size: 12.5px; }
	.pcard__chip { width: 44px; height: 44px; top: 8px; inset-inline-end: 8px; }
	.pcard--light .pcard__photo { padding: 8px 8px 38%; object-position: center 30%; }
}