/* fonts.css */
/* Self-hosted fonts (Speed rules, 27 Oct 2026). Hanken Grotesk is one variable file for 400-700. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-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:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-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:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-500-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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
/* site.css */
/* nabulsiamad.com. Built from the mock-up v93 styles (claude.ai/artifact/LmmXh3uwpiE83A5xJEDKmx), 2026-10-29. */
/* --- pages.css (mock-up shared look) --- */
/*tight-2026-10-25*/
/* Shared look for the inner pages (search, category, product). Same tokens as the homepage. */
:root{--ink:#1D1D1F;--ground:#FFFFFF;--stone:#F2F1EE;--line:#DAD8D3;--black:#000;--muted:#5E5E63;--onblack:#F5F5F7;--onblack-muted:#A1A1A6;--link:#007C79;--link-onblack:#3FD0CC;--brown:#6D3628;
  --font:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;--arabic:'IBM Plex Sans Arabic','Geeza Pro',Tahoma,sans-serif;
  --gut:max(20px,env(safe-area-inset-left,0px));--gutR:max(20px,env(safe-area-inset-right,0px));color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--black);z-index:30}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.035em;line-height:1.05;text-wrap:balance}
p{margin:0}
button,input{font:inherit;color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutR)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.more{color:var(--link);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.more::after{content:"\203A";margin-inline-start:6px;font-size:1.15em;transition:transform .2s}
.more:hover{text-decoration:underline;text-underline-offset:4px}
.more:hover::after{transform:translateX(3px)}
/* section headings that open their own page (Tariq 2026-11-02: "the headings, faucets, showers etc.. within the page clickable") */
.hlink{color:inherit;text-decoration:none;padding-block:3px}
.hlink::after{content:"\203A";display:inline-block;margin-inline-start:.22em;color:var(--link);transition:transform .2s}
.hlink:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.hlink:hover::after{transform:translateX(4px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--ink);color:#FFF;text-decoration:none;font-weight:600;font-size:17px;border:0;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:#3A3A3C}
.btn:active{transform:translateY(1px)}
/* Strip */
.strip{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--black);color:var(--onblack)}
.strip .wrap{display:flex;align-items:center;gap:28px;min-height:76px}
.strip .logo img{height:54px;width:auto}
.strip nav{display:flex;gap:26px;font-size:15px;flex:1}
.strip nav a,.strip .ar,.strip .srch{text-decoration:none;color:#D2D2D7;min-height:44px;display:inline-flex;align-items:center}
.strip .srch{min-width:44px;justify-content:center}
.strip nav a:hover,.strip .ar:hover,.strip .srch:hover{color:#FFF}
.strip nav a[aria-current]{color:#FFF}
.strip .ar{font-family:var(--arabic);font-size:15px}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:flex-end;font-size:15px;color:#FFF}
.menu summary::-webkit-details-marker{display:none}
.menu ul{list-style:none;margin:0;padding:8px 0 16px;position:absolute;left:0;right:0;top:100%;background:var(--black)}
.menu li a{display:flex;align-items:center;min-height:52px;padding-left:var(--gut);padding-right:var(--gutR);font-size:22px;font-weight:600;color:#FFF;text-decoration:none}
/* Breadcrumb */
.crumbs{font-size:15px;color:var(--muted);padding-block:14px 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:center}
.crumbs li+li::before{content:"\203A";margin-inline-end:8px}
.crumbs a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
/* Chips (filters, tabs) */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--ground);cursor:pointer;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s}
.chip:hover{border-color:#A9A6A0}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#FFF}
.chip .n{font-size:13px;opacity:.65;font-variant-numeric:tabular-nums}
/* Visit band + footer */
footer{background:var(--black);color:var(--onblack-muted);padding-block:28px 36px}
footer .top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
footer img{height:52px;width:auto}
footer nav{display:grid;grid-template-columns:repeat(3,auto);gap:10px 40px;font-size:15px}
footer nav a{text-decoration:none;color:#D2D2D7;min-height:32px;display:inline-flex;align-items:center}
footer nav a:hover{color:#FFF}
footer .base{margin-top:24px;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){
  .strip nav,.strip .ar.wide{display:none}
  .menu{display:block;margin-inline-start:auto}
  .strip .wrap{gap:12px;min-height:58px}
  .strip .logo img{height:44px}
  footer nav{grid-template-columns:repeat(2,auto)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}html{scroll-behavior:auto}}

/* 2026-10-26 Tariq: compact showroom row; when it follows the enquiry it joins the same stone band */
.visit{background:var(--stone);padding-block:20px}
.ask+.visit,.ask+#visit>.visit{padding-top:0;padding-bottom:28px}
/* 2026-10-29 Tariq: the band was "sticking" to the content above it; space it off unless it joins the enquiry band */
.ask,.visit{margin-top:clamp(32px,4vw,48px)}
.ask+.visit,.ask+#visit>.visit{margin-top:0}
.also+.ask,.dlb+.ask,.also+.visit,.dlb+.visit{margin-top:0}
.visit .vrow{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.ask+.visit .vrow,.ask+#visit>.visit .vrow{border-top:1px solid var(--line);padding-top:18px}
.visit .vpin{flex:none;width:40px;height:40px;border-radius:50%;background:#FFF;display:grid;place-items:center;color:var(--ink)}
.visit .vtx{flex:1 1 320px;min-width:0}
.visit h2{font-size:17px;font-weight:700;letter-spacing:0;line-height:1.3}
.visit p{color:var(--muted);margin-top:2px;font-size:15px;line-height:1.45}
.visit p a{color:inherit}
.visit .dot{padding-inline:2px}
.visit .vgo{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:#FFF}
.visit .vgo:hover{background:var(--ink);color:#FFF}
.visit .vgo span{margin-inline-start:6px}
@media (max-width:600px){.visit .vpin{display:none}.visit .vgo{width:100%;justify-content:center}}

/* --- mock-up block 7 --- */
.strip.nv .wrap{gap:22px}
.strip.nv .mnav{display:flex;gap:4px;flex:1;font-size:15px;align-items:stretch}
.strip.nv .mi{display:flex}
.strip.nv .mt{display:inline-flex;align-items:center;min-height:76px;padding:0 10px;text-decoration:none;color:#D2D2D7}
.strip.nv .mt:hover,.strip.nv .mt[aria-current],.strip.nv .mi.open .mt{color:#FFF}
.strip.nv .mega{display:none;position:absolute;left:0;right:0;top:100%;background:#FFF;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.18);z-index:40}
.strip.nv .mi.open .mega{display:block}
.strip.nv .mega{text-align:start}.strip.nv .mega li a{align-items:flex-start}
.strip.nv .menu .mpanel ul{position:static;padding:0;margin:0;background:none;list-style:none}
@media (hover:hover) and (min-width:901px){.strip.nv .mi:hover .mega{display:block}.strip.nv .mi:hover .mt{color:#FFF}}
.strip.nv .mg{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding-block:28px 32px}
.strip.nv .mcol ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.strip.nv .mcol2 ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.strip.nv .mega li a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 10px;border-radius:16px;text-decoration:none;color:var(--ink)}
.strip.nv .mega li a:hover{background:var(--stone)}
.strip.nv .mega li b{font-size:17px;font-weight:600}.strip.nv .mega li span{font-size:15px;color:var(--muted)}
.strip.nv .mh{font-size:15px;font-weight:600;margin:0 0 8px 10px;color:var(--muted)}
.strip.nv .mh a{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.strip.nv .mh a:hover{text-decoration:underline}
.strip.nv .mpic{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.strip.nv .mpic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.strip.nv .mpic:hover span{text-decoration:underline}
.strip.nv .hsrch{display:flex;align-items:center;background:#1C1C1E;border-radius:999px;padding-inline:16px 4px;min-height:44px;width:250px}
.strip.nv .hsrch input{flex:1;min-width:0;background:transparent;border:0;color:#FFF;font-size:15px;outline:0;padding:0}
.strip.nv .hsrch input::placeholder{color:#A1A1A6}
.strip.nv .hsrch:focus-within{box-shadow:0 0 0 2px var(--link-onblack,#3FD0CC)}
.strip.nv .hsrch button,.strip.nv .msrch button{background:none;border:0;color:#D2D2D7;min-width:40px;min-height:40px;display:grid;place-items:center;cursor:pointer}
.strip.nv .srch{display:none}
@media (max-width:1180px){.strip.nv .hsrch{display:none}.strip.nv .srch{display:inline-flex}}
.strip.nv .menu .mpanel{position:absolute;left:0;right:0;top:100%;background:var(--black);max-height:calc(100vh - 58px);overflow:auto;padding:12px 0 24px}
.strip.nv .msrch{display:flex;align-items:center;margin:4px var(--gutR) 10px var(--gut);background:#1C1C1E;border-radius:999px;padding-inline:18px 4px;min-height:52px}
.strip.nv .msrch input{flex:1;min-width:0;background:transparent;border:0;color:#FFF;font-size:17px;outline:0}
.strip.nv .msrch input::placeholder{color:#A1A1A6}
.strip.nv .pg2 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding-inline:var(--gut) var(--gutR);font-size:22px;font-weight:600;color:#FFF}
.strip.nv .pg2 summary::-webkit-details-marker{display:none}
.strip.nv .pg2 summary::after{content:"+";font-weight:400;font-size:30px;color:#A1A1A6}
.strip.nv .pg2[open] summary::after{content:"\2212"}
.strip.nv .pg2 ul,.strip.nv .mend{list-style:none;margin:0;padding:0}
.strip.nv .pg2 li a{display:flex;align-items:center;min-height:48px;padding-inline:calc(var(--gut) + 14px) var(--gutR);font-size:17px;color:#D2D2D7;text-decoration:none}
.strip.nv .mend{margin-top:8px;padding-top:8px;border-top:1px solid #2C2C2E}
.strip.nv .mend li a{display:flex;align-items:center;min-height:52px;padding-inline:var(--gut) var(--gutR);font-size:17px;font-weight:600;color:#FFF;text-decoration:none}
@media (max-width:900px){.strip.nv .mnav,.strip.nv .hsrch{display:none}.strip.nv .srch{display:inline-flex}.strip.nv .menu{display:block;margin-inline-start:auto}}
@media (min-width:901px){.strip.nv .menu{display:none}}
/* 2026-10-27 Tariq: the open menu was "too bulky and covers most of the pages": a small drop-down list under the word instead of a full-width panel */
.strip.nv .mi{position:relative}
.strip.nv .mega{left:auto;right:auto;inset-inline-start:-6px;width:max-content;min-width:230px;max-width:min(320px,calc(100vw - 32px));border-radius:0 0 16px 16px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.strip.nv .mg{display:block;padding:8px 6px 10px}
.strip.nv .mega .wrap{padding-inline:0}
.strip.nv .mpic,.strip.nv .mega li span{display:none}
.strip.nv .mcol ul,.strip.nv .mcol2 ul{display:block}
.strip.nv .mega li a{min-height:38px;padding:0 14px;border-radius:16px;justify-content:center}
.strip.nv .mega li b{font-size:15px;font-weight:500}
.strip.nv .mh{margin:0 0 2px;padding:0 14px;font-size:15px}
.strip.nv .mh a{min-height:40px;color:var(--link);font-weight:600}
.strip.nv .mcol2{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.strip.nv .mcol2 .mh{color:var(--muted);min-height:36px;display:flex;align-items:center}
footer .fprod{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 28px;margin-top:28px;padding-top:24px;border-top:1px solid #2C2C2E}
footer .fprod p{color:#FFF;font-weight:600;font-size:15px;margin:0 0 6px}
footer .fprod p a{color:#FFF;text-decoration:none}
footer .fprod ul{list-style:none;margin:0;padding:0}
footer .fprod li a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#A1A1A6;text-decoration:none}
footer .fprod a:hover{color:#FFF}
footer .fg summary{list-style:none;color:#FFF;font-weight:600;font-size:15px;margin:0 0 6px;pointer-events:none}
footer .fg summary::-webkit-details-marker{display:none}
footer .fg>p a{color:#D2D2D7}
@media (max-width:900px){footer .fprod{grid-template-columns:minmax(0,1fr);gap:0}
 footer .fg{border-bottom:1px solid #2C2C2E}
 footer .fg summary{pointer-events:auto;cursor:pointer;min-height:52px;margin:0;display:flex;align-items:center;justify-content:space-between}
 footer .fg summary::after{content:"";width:9px;height:9px;border-inline-end:2px solid #A1A1A6;border-bottom:2px solid #A1A1A6;transform:rotate(45deg);margin-inline-end:6px;transition:transform .2s}
 footer .fg[open] summary::after{transform:rotate(-135deg)}
 footer .fg>p,footer .fg>ul{padding-bottom:10px}
 footer .fg ul{columns:2;column-gap:16px}}
/* --- mock-up block 8 --- */
.lg{display:block;height:calc(var(--lh,30px)*var(--s,1));width:auto;max-width:100%;color:var(--ink,#17130E)}
.lgm{display:inline-block;vertical-align:middle;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center}
/* 2026-11-03: wordmarks set in type are sized like the drawn logos: font-size = --lh x --s (see partials/brand-logos.html) */
.lgw{height:auto;line-height:1;font-size:calc(var(--lh,30px)*var(--s,1));font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.lgw.w-ax{letter-spacing:.14em;font-weight:500}.lgw.w-fl{letter-spacing:.08em;font-weight:500}
svg.lg{overflow:visible} /* RAK's drawing touches its frame edge; small sizes clipped the foot of CERAMICS */
/* --- mock-up block 11 --- */
html body footer nav a,html body footer .fg>p a{min-height:44px;display:inline-flex;align-items:center}
p a[href^="tel:"],p a[href^="mailto:"],li a[href^="tel:"]{display:inline-block;padding-block:12px;margin-block:-12px}
.wa{position:fixed;z-index:40;inset-inline-end:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;background:#25D366;color:#FFF;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18);text-decoration:none}
.wa:hover{background:#1FB955}
.wa:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.askf{grid-template-columns:repeat(4,minmax(0,1fr)) auto auto}
.askf select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236E6E73' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
[dir=rtl] .askf select{background-position:left 14px center}
.askf label{font-size:13px;letter-spacing:.02em}
.askf .wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#FFF;color:var(--ink);font-weight:600;font-size:17px;text-decoration:none;white-space:nowrap}
.askf .wa-btn svg{width:20px;height:20px;color:#1FB955}
.askf .wa-btn:hover{border-color:var(--ink)}
.askf .priv{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
@media (max-width:900px){.askf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.askf .btn,.askf .wa-btn{grid-column:1/-1;width:100%}}
/* --- mock-up block 12 --- */
.pc{display:none}
/* --- mock-up block 15 --- */
.intro{padding-block:20px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.blk.first{padding-top:28px}
.intro h1{font-size:clamp(44px,7vw,72px)}
.intro p{font-size:clamp(17px,1.6vw,22px);color:var(--muted);line-height:1.45;max-width:32em}
.code{margin-top:18px;display:flex;gap:8px;max-width:520px}
.code input{flex:1;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:999px;padding:0 18px;font:inherit;font-size:17px}
.qhint{font-size:15px;color:var(--muted);margin-top:8px}
.code button{min-height:48px;border-radius:999px;border:0;background:var(--ink);color:#fff;padding:0 22px;font:inherit;font-weight:600;cursor:pointer}
.blk{padding-block:28px 0}
.blk h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-0.02em}
.blk .sub{color:var(--muted);margin-top:6px}
.row{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.row a{display:block;text-decoration:none}
.row b{display:block;font-size:17px;font-weight:600;margin-top:10px;letter-spacing:-0.01em}
.row a span:not(.rp):not(.sc){display:block;font-size:15px;color:var(--muted)}
.row a:hover b{color:var(--link)}
.rooms{grid-template-columns:repeat(5,minmax(0,1fr))}
.rooms .rp{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.rooms img{width:100%;height:100%;object-fit:cover}
.looks{grid-template-columns:repeat(8,minmax(0,1fr))}
.looks img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--stone)}
.sizes{grid-template-columns:repeat(6,minmax(0,1fr))}
.sizes a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:#FFF}
.sizes a:hover{border-color:var(--ink)}
.sizes .szn{font-size:clamp(22px,1.8vw,22px);font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sizes .szn small{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.row a span.szu{font-size:15px;color:var(--muted);margin-top:2px}
.sizes a{padding:0;border:0;border-radius:0;background:none;gap:0}
.sizes .szp{display:block;width:100%;aspect-ratio:4/5;background-repeat:no-repeat;background-color:var(--stone);margin-bottom:12px}
.sizes .szn{font-size:clamp(22px,1.7vw,22px)}
.sizes .szn small{display:inline;font-size:15px;margin-inline-start:4px}
.mfrs{grid-template-columns:repeat(5,minmax(0,1fr))}
.mfrs .mp{display:block;width:100%;aspect-ratio:4/3;background-repeat:no-repeat;background-color:var(--stone)}
.mfrs b{font-size:22px}
.mfrs a span:not(.mp){margin-top:4px;line-height:1.4}
/* Tiles by room: one row of six small cards (Tariq 2026-11-03: "make it smaller", "its taking too much space";
   it was 2 big + 3 + 1 once Pool surrounds made six) */
.rooms{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.rooms .rp{aspect-ratio:4/3}
.rooms b{font-size:17px;margin-top:8px}
.row.rooms a span:not(.rp){font-size:14px;line-height:1.35}
.mks{min-width:0}
.seeall{margin-top:14px;text-decoration:none;color:inherit}
.ptext{padding-block:40px 0;max-width:46em}
.ptext h2{font-size:clamp(22px,2.4vw,30px)}
.ptext p{color:var(--muted);margin-top:10px;line-height:1.6}
.cols{grid-template-columns:repeat(8,minmax(0,1fr))}
.cols i{display:block;width:100%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line)}
.fins{margin-top:20px}
.fins a.chip{text-decoration:none;color:inherit}
.mk{border-top:1px solid var(--line);padding-block:28px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:28px}
.mk:first-of-type{margin-top:22px}
.mkh h3{font-size:22px;letter-spacing:-0.02em}
.mkh p{color:var(--muted);font-size:15px;margin-top:6px}
.mkh .more{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
.sers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.sers a{display:block;text-decoration:none}
.sers img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--stone)}
.sers b{display:block;font-size:15px;font-weight:600;margin-top:8px;line-height:1.25}
.sers span{display:block;font-size:13px;color:var(--muted)}
.also{grid-column:2;font-size:15px;color:var(--muted);line-height:1.9}
.also a{color:var(--ink)}
#list{scroll-margin-top:42px}
.lbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:10;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:20px}
.lbar .wrap{display:flex;gap:10px;align-items:center;min-height:64px;overflow-x:auto;scrollbar-width:none}
.lbar .wrap::-webkit-scrollbar{display:none}
.fbtn{flex:none}
.act{display:flex;gap:6px;flex:none}
.act .chip{background:var(--ink);color:#fff;border-color:var(--ink)}
.lcount{margin-inline-start:auto;flex:none;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums;padding-inline-start:10px}
.panel{border-bottom:1px solid var(--line);background:#fff}
.panel[hidden]{display:none}
.panel .wrap{padding-block:18px 22px;display:grid;gap:16px}
.fg{border:0;margin:0;padding:0;min-width:0}
.fg legend{font-size:15px;color:var(--muted);margin-bottom:8px;padding:0}
.panel .done{justify-self:start}
/* 2026-10-30 Tariq: "wrapping into a second line for no reason". Every filter row (bathroom and faucet lists, the tile
   filters, the projects page) stays on one line: tighter chips on a computer, and a row that still does not fit slides
   sideways, with a soft fade at the edge that has more (site.js sets more-s / more-e). "ul" so these win over each
   page's own row rules. */
ul.fx{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:3px}
ul.fx::-webkit-scrollbar{display:none}
ul.fx>li{flex:none}
ul.fx.more-e{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 56px);mask-image:linear-gradient(to left,transparent 0,#000 56px)}
ul.fx.more-s{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 56px);mask-image:linear-gradient(to right,transparent 0,#000 56px)}
ul.fx.more-s.more-e{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}
@media (max-width:899px){ul.fx{margin-inline:calc(var(--gut,16px)*-1);padding-inline:var(--gut,16px);scroll-padding-inline:var(--gut,16px)}}
@media (min-width:900px){ul.fx{gap:8px;scrollbar-width:thin;scrollbar-color:#C9C6C0 transparent}
 ul.fx::-webkit-scrollbar{display:block;height:6px}ul.fx::-webkit-scrollbar-thumb{background:#C9C6C0;border-radius:3px}
 ul.fx .chip,ul.fx .fchip{padding:0 14px;font-size:14px;gap:6px}ul.fx .chip .n,ul.fx .fchip .n{font-size:12px}}
/* a row that still does not fit on a computer gets a round arrow at the edge with more (site.js adds it; a mouse
   cannot slide a row the way a finger can) */
.fxw{position:relative;min-width:0}
.fxb{display:none}
@media (hover:hover) and (min-width:900px){
 .fxb{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:36px;height:36px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.10);cursor:pointer;
  align-items:center;justify-content:center}
 .fxb:hover{border-color:#A9A6A0}
 .fxb.e{inset-inline-end:0}.fxb.s{inset-inline-start:0}
 .fxw.more-e>.fxb.e,.fxw.more-s>.fxb.s{display:inline-flex}}
.tg{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 12px}
.tg a{display:block;text-decoration:none}
.tg img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--stone)}
.tg b{display:block;font-size:15px;font-weight:600;margin-top:10px;line-height:1.3}
.tg span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.tg a>span:not(.am):not(.pk){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg .flag{display:none}
body.internal .tg .flag{display:inline-block;font-size:13px;padding:3px 6px;background:#FFF0A8;color:var(--ink);border-radius:3px;margin-top:6px}
.lmore{margin:26px 0 0}
.lmore[hidden]{display:none}
.spi{display:block;width:100%;aspect-ratio:1;background-repeat:no-repeat;background-color:var(--stone)}
.intl{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;margin-top:10px}
.intl input{width:20px;height:20px}
.help{padding-block:44px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.help h2{font-size:clamp(30px,4vw,44px)}
.help details{border-bottom:1px solid var(--line)}
.help summary{cursor:pointer;list-style:none;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:17px;font-weight:600}
.help summary::-webkit-details-marker{display:none}
/* 2026-11-02: the question sits in one <span>. In a flex summary each text run and each <bdi> (Latin names on
   Arabic pages) is its own item and cannot wrap, so /ar/brands scrolled 146 px sideways at 390 px */
.help summary>span{min-width:0}
.help summary::after{content:"+";font-size:30px;font-weight:400;color:var(--muted)}
.help details[open] summary::after{content:"\2212"}
.help details p{padding-bottom:20px;color:var(--muted);font-size:17px;max-width:38em}
@media (max-width:1100px){.looks,.cols{grid-template-columns:repeat(4,minmax(0,1fr))}.sers{grid-template-columns:repeat(4,minmax(0,1fr))}.tg{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
 .intro{grid-template-columns:1fr;gap:12px;padding-top:12px}
 .blk{padding-top:44px}
 .row.rooms,.row.looks,.row.sizes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut,16px)*-1);padding-inline:var(--gut,16px);scrollbar-width:none}
 .row::-webkit-scrollbar{display:none}
 .rooms li{flex:0 0 42%;scroll-snap-align:start}
 .looks li{flex:0 0 34%;scroll-snap-align:start}
 .sizes li{flex:0 0 44%;scroll-snap-align:start}
 .mfrs{grid-template-columns:1fr 1fr;gap:24px 12px}
 .mfrs b{font-size:17px}
 .mfrs li:last-child:nth-child(odd){grid-column:1/-1}
 .mfrs li:last-child:nth-child(odd) .mp{aspect-ratio:16/9}
 .cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px}
 .cols b{font-size:15px}
 .mk{grid-template-columns:1fr;gap:12px;padding-block:22px}
 .sers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(var(--gut,16px)*-1);padding-inline:var(--gut,16px);scrollbar-width:none}
 .sers::-webkit-scrollbar{display:none}
 .sers li{flex:0 0 31%;scroll-snap-align:start}
 .also{grid-column:1}
 .lbar{top:calc(env(safe-area-inset-top,0px) + 58px)}
 .tg{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
 .help{grid-template-columns:1fr;gap:20px;padding-block:32px}
}
/* --- mock-up block 16 --- */
.sintro{padding-block:20px 4px}
.sintro h1{font-size:clamp(44px,6vw,72px)}
.sintro .by{font-size:clamp(17px,1.6vw,22px);margin-top:6px}
.sintro p.lead{font-size:clamp(17px,1.5vw,22px);color:var(--muted);line-height:1.45;max-width:40em;margin-top:12px}
.shero{margin-top:22px;aspect-ratio:21/8;overflow:hidden;background:var(--stone)}
.shero img{width:100%;height:100%;object-fit:cover;display:block}
.rel{padding-block:24px 0}
.rel h2{font-size:clamp(22px,2.4vw,30px)}
.rel .chips{margin-top:14px}
.rel a.chip{text-decoration:none}
.rel a.chip[aria-current]{background:var(--ink);color:#fff}
.shero.ser{aspect-ratio:3/2;max-width:960px}
.shero.strip{aspect-ratio:5/1}
.shero .amb{display:block;width:100%;height:100%;background-repeat:no-repeat}
.sintro .dist{font-size:15px;color:var(--muted);margin-top:10px}
.cats{margin-top:16px}.cats .lbl{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0}
.cats ul{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cats li{flex:none}.cats .cat{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:16px;background:#FFF;font-size:15px}
.cats .cat small{color:var(--muted);font-size:13px}
.cats a.cat{text-decoration:none;color:var(--ink)}.cats a.cat:hover{border-color:var(--ink)}
.tg .am{position:relative;display:block;aspect-ratio:3/2;background-color:var(--stone);background-repeat:no-repeat;overflow:hidden}
.tg .tf{position:absolute;inset-inline-start:8px;bottom:8px;width:28%;aspect-ratio:1;background-repeat:no-repeat;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tg .tf2{position:absolute;inset:0;margin:auto;height:86%;aspect-ratio:1;background-repeat:no-repeat}
.tg li.pick a{outline:2px solid var(--ink);outline-offset:4px}
.tg .pk{display:inline-block;font-size:13px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;margin-top:6px}
@media (max-width:700px){.shero{aspect-ratio:4/3;margin-inline:calc(var(--gut,16px)*-1)}.shero.strip{aspect-ratio:3/1}.shero.ser{aspect-ratio:3/2}}
/* --- mock-up block 17 --- */
.sfirst{padding-block:28px 0}
.sfirst h2,.lh{font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em}
.sfirst .sub{color:var(--muted);margin-top:4px}
.sgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px}
.sgrid li.xs{display:none}.sfirst.open .sgrid li.xs{display:block}
.sgrid a{display:block;text-decoration:none;color:inherit}
.sgrid .am{position:relative;display:block;aspect-ratio:3/2;background-color:var(--stone);background-repeat:no-repeat;overflow:hidden}
.sgrid .tf{position:absolute;inset-inline-start:8px;bottom:8px;width:28%;aspect-ratio:1;background-repeat:no-repeat;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.sgrid .tf2{position:absolute;inset:0;margin:auto;height:86%;aspect-ratio:1;background-repeat:no-repeat}
.sgrid b{display:block;font-size:17px;font-weight:600;margin-top:10px}
.sgrid .v{display:block;font-size:13px;color:var(--muted)}
.sgrid .shw{display:block;font-size:15px;margin-top:2px}
.sgrid em{font-style:normal;color:var(--muted)}
#sall{margin-top:18px}
.lh{margin-top:6px}
.lhw{padding-top:34px}
@media (max-width:900px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.sgrid b{font-size:15px}}
/* --- mock-up block 18 --- */
/* 2026-10-26 Tariq: series top like Midi, then Pick a colour: one big room photo, the tile small on it, downloads in the same block */
.cb{padding-block:18px 8px}
.cbh{text-align:center;max-width:46em;margin-inline:auto}
.cbh .eb{font-size:15px;color:var(--muted)}
.cbh .eb a{color:inherit}
.cbh h1{font-size:clamp(44px,8vw,72px);line-height:1;letter-spacing:-0.035em;margin-top:6px}
.cbh .sline{margin-top:12px;font-size:clamp(17px,1.6vw,22px);color:var(--ink);line-height:1.45}
.cbg{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;margin-top:34px;align-items:start}
.cbv{margin:0;position:sticky;top:84px}
.cbp{position:relative;aspect-ratio:3/2;background:var(--stone);overflow:hidden}
.cbp canvas,.cbp .big{display:block;width:100%;height:100%;background-repeat:no-repeat}
.cbp .big{background-size:cover}
.cbp .bf{position:absolute;inset-inline-start:14px;bottom:14px;width:26%;aspect-ratio:1;background-repeat:no-repeat;background-color:var(--stone);border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cbp.noroom{display:grid;place-items:center}.cbp.noroom .bf{display:block;position:static;width:auto;height:100%;aspect-ratio:1;border:0;box-shadow:none}
.cbv figcaption{font-size:15px;color:var(--muted);margin-top:8px;max-width:40em}
.cbi h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.015em}
.cbi .lbl{font-size:13px;color:var(--muted);margin-top:18px;text-transform:uppercase;letter-spacing:.06em}
.sw{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sw button{width:48px;height:48px;padding:0;border:1px solid var(--line);background-repeat:no-repeat;background-color:var(--stone);cursor:pointer;border-radius:4px}
.sw button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}
.szl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.szl li{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:15px;font-variant-numeric:tabular-nums}
.szl li small{color:var(--muted);font-size:13px;margin-inline-start:6px}
.fin{margin-top:8px;font-size:17px}
.use{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.use li{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--stone);font-size:15px}
.use li::before{content:"";width:14px;height:8px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.unote{font-size:15px;color:var(--muted);margin-top:10px;max-width:34em}
.cbi .acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:22px}
.cbi .dlt{margin-top:18px}
@media (max-width:900px){.cbg{grid-template-columns:1fr;gap:18px;margin-top:22px}.cbv{position:static}.cbp .bf{width:30%;inset-inline-start:12px;bottom:12px}.sw button{width:44px;height:44px}}
/* --- mock-up block 19 --- */
/* 2026-10-26 Tariq: "compact it and design it better": heading and form side by side on laptop; the showroom row sits in the same band */
.ask{background:var(--stone);padding-block:28px 20px}
.ask>.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:end}
.ask h2{font-size:clamp(22px,2vw,22px);letter-spacing:-0.01em;line-height:1.2}
.ask .sub{font-size:15px;color:var(--muted);margin-top:4px}
.ask .sub a{color:inherit}
.askf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end;margin:0}
.askf label{display:flex;flex-direction:column;gap:4px;font-size:15px;font-weight:600;color:var(--muted)}
.askf input,.askf select{min-height:44px;border:1px solid var(--line);border-radius:16px;padding:8px 12px;font:inherit;font-size:17px;letter-spacing:0;text-transform:none;font-weight:400;background:#FFF;color:var(--ink);width:100%}
.askf input:focus,.askf select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.askf .btn{min-height:44px;padding:0 24px;font-size:17px}
.askf .tiny{grid-column:1/-1;font-size:13px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.askf .tiny:empty{display:none}
@media (min-width:1100px){.ask>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);gap:32px}}
@media (max-width:900px){.askf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.askf .btn{grid-column:1/-1;width:100%}}
/* --- mock-up block 20 --- */
.dlt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:18px;font-size:15px}
.dlt>span{font-weight:600;color:var(--muted);margin-inline-end:4px}
.dlt a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;color:var(--ink);background:#FFF}
.dlt a:hover{border-color:var(--ink)}
.dlt .dlx{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px dashed var(--line);border-radius:999px;font-weight:600;color:var(--muted)}
.dlt.on-photo>span{color:rgba(255,255,255,.85)}
.dlt.on-photo a{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#FFF;backdrop-filter:blur(6px)}
/* 2026-10-26 bottom downloads: compact file rows */
.dlb{padding-block:32px;border-top:1px solid var(--line)}
.dlb .dlh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.dlb h2{font-size:clamp(22px,2vw,22px);letter-spacing:-0.01em}
.dlb .dlh .sub{font-size:15px;color:var(--muted);margin:0}
.dlb .dls{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.dlb .dls a,.dlb .dlx2{display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px 10px 10px;min-height:64px;border:1px solid var(--line);border-radius:16px;background:#FFF;text-decoration:none;color:var(--ink)}
.dlb .dlx2{border-style:dashed}
.dlb .dls a:hover{border-color:var(--ink)}
.dlb .ft{flex:none;width:44px;height:44px;border-radius:16px;background:var(--stone);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);text-transform:uppercase}
.dlb .dtx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dlb .dls b,.dlb .dlx2 b{font-size:15px;line-height:1.3}
.dlb .dtx>span{font-size:13px;color:var(--muted);line-height:1.35}
.dlb .dls a>svg{flex:none;color:var(--muted)}
.dlb .dls a:hover>svg{color:var(--ink)}
/* --- mock-up block 21 --- */
.ptx{margin-top:24px;font-size:17px;line-height:1.6;color:var(--ink);text-align:start}.ptx p{margin:0;max-width:44em}.ptx h2{font-size:clamp(22px,2.4vw,30px);margin:0 0 10px}.ptx details{margin-top:10px;font-size:15px;color:var(--muted)}.ptx details p{font-family:"IBM Plex Sans Arabic",sans-serif;font-size:17px;line-height:1.8;color:var(--ink);margin-top:8px}.ptx summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.sintro .labout{font-size:15px;color:var(--muted);margin-top:10px;max-width:46em;line-height:1.5}
.mkabout{padding-block:8px 24px}.mkabout p{max-width:46em;color:var(--muted)}

/* Tariq 2026-10-29: the enquiry heading sits level with the form fields; WhatsApp sits beside
   "Directions and hours" in the showroom row, not under the form */
.ask>.wrap{align-items:start}
@media (min-width:901px){.askf{grid-template-columns:repeat(4,minmax(0,1fr)) auto}}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:#FFF;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.wa-btn svg{width:20px;height:20px;color:#1FB955}
.wa-btn:hover{border-color:var(--ink)}
.visit .vbtns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@media (max-width:600px){.visit .vbtns{width:100%;flex-wrap:nowrap}.visit .vbtns a{flex:1 1 0;min-width:0;justify-content:center;padding-inline:10px;white-space:normal;text-align:center;line-height:1.2}.visit .vgo span{display:none}}  /* 2026-10-31: the two buttons side by side on a phone, so the row is shorter */
/* design awards beside a product or series name (Tariq 2026-10-29) */
.awards-box{margin:6px 0 14px}.awb{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding:0;list-style:none}.awb img{height:80px;width:auto;display:block}.awb span{display:inline-flex;align-items:center;min-height:56px;font-size:15px;line-height:1.25;padding:8px 12px;border:1px solid var(--line,#d9d4cc);border-radius:4px;color:var(--ink,#17130E)}
.awt{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--ink,#17130E)}
@media (max-width:600px){.awt{padding-inline-end:64px}}/* clear of the floating WhatsApp button (audit 2026-10-30) */
@media (max-width:600px){.awb img{height:64px}.awb{gap:10px}}
.cbh .awb{justify-content:center}.cbh .awt{text-align:center}
.awb li{display:flex;align-items:center;gap:6px}.awb small{font-size:12px;line-height:1.2;color:var(--muted);max-width:11em}
/* showroom page photos (Tariq 2026-10-30): our own building at dusk under the title, then two photos from inside and at the door */
.srm-hero{margin-top:28px;margin-bottom:8px}
.srm-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.srm-hero figcaption,.srm-gal figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.srm-gal{padding-top:48px;padding-bottom:56px}
.srm-gal ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
.srm-gal figure{margin:0}
.srm-gal img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
@media (min-width:700px){.srm-gal ul{grid-template-columns:1fr 1fr}.srm-hero img{aspect-ratio:16/8}}
.askf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* the enquiry form's field for robots only (app/enquiry.py) */
[aria-busy=true]{opacity:.55;transition:opacity .15s}
/* tap a photo to see it big (site.js; every body photo that is not a link, 2026-11-02) */
.lb{position:fixed;inset:0;z-index:1000;background:#0B0B0B;display:flex;align-items:center;justify-content:center;padding:64px 16px;cursor:zoom-out;touch-action:pinch-zoom}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;display:block;-webkit-user-select:none;user-select:none;transition:opacity .15s}  /* site.js fit() sizes it */
.lb img.ld{opacity:.3}
.lbx,.lbn{position:absolute;width:48px;height:48px;border-radius:999px;border:0;background:rgba(255,255,255,.16);color:#FFF;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.lbx{top:max(12px,env(safe-area-inset-top));inset-inline-end:12px}
.lbn{top:50%;margin-top:-24px;font-size:34px}
.lbp{inset-inline-start:12px}.lbf{inset-inline-end:12px}
.lbn[hidden],.lbc[hidden]{display:none}
.lbc{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));inset-inline:0;text-align:center;color:#FFF;font-size:15px;font-variant-numeric:tabular-nums;pointer-events:none}
.lbx:hover,.lbn:hover{background:rgba(255,255,255,.28)}
.lbx:focus-visible,.lbn:focus-visible{outline:2px solid #FFF;outline-offset:2px}
@media (max-width:600px){.lb{padding:56px 0}.lbn{top:auto;bottom:max(8px,env(safe-area-inset-bottom));margin-top:0}}
html.lbo{overflow:hidden}
/* real.css */
/* Real-site additions on top of the mock-up styles (2026-10-29): real <img> pictures inside
   the mock-up's picture boxes, link-based filters and swatches, the test-site bar. */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:#fff;color:var(--ink);padding:12px 16px}
.skip:focus{inset-inline-start:8px}
.pvbar{background:#FFF4D6;color:#5C4400;font-size:13px;text-align:center;padding:4px 12px}
.noimg{display:block;background:var(--stone);width:100%;height:100%}
.arf{font-family:var(--arabic)}
/* picture boxes: fill with the photo */
.tg .am>img.ri,.sgrid .am>img.ri,.rail .ph img,.rooms .rp img,.mfrs .mp img{display:block;width:100%;height:100%;object-fit:cover}
.tg .tf img,.sgrid .tf img{width:100%;height:100%;object-fit:cover;display:block}
.tg .tf2 img,.sgrid .tf2 img{width:100%;height:100%;object-fit:cover;display:block}
.tg .tf .noimg,.sgrid .tf .noimg,.tg .tf2 .noimg,.sgrid .tf2 .noimg{width:100%;height:100%}
.cbp img.big{display:block;width:100%;height:100%;object-fit:cover}
.cbp canvas{position:absolute;inset:0;width:100%;height:100%}
.cbp .bf img{width:100%;height:100%;object-fit:cover;display:block}
.cbp.noroom .bf img{object-fit:contain}
/* a hairline round every tile face (2026-10-31, Tariq on Scarlet): a white or ivory tile on the stone box had no edge
   and read as an empty box */
.tg .tf img,.sgrid .tf img,.tg .tf2 img,.sgrid .tf2 img,.cbp .bf img{outline:1px solid rgba(23,19,14,.14);outline-offset:-1px}
.looks img.lf,.looks .noimg{width:100%;aspect-ratio:1;object-fit:cover}
.mfrs .mp{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.rail .ph{overflow:hidden}
/* swatches as links */
.sw a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--stone)}
.sw a img{width:100%;height:100%;object-fit:cover}
.sw a[aria-current=true]{outline:2px solid var(--ink);outline-offset:2px}
.codes code{font-size:15px;background:var(--stone);padding:2px 6px;border-radius:4px;display:inline-block;margin:2px 0}
/* tile list filters (2026-10-31 Tariq: the open panel "covers the products"; "just have a drop down for each"):
   one small drop-down per group in the sticky bar; its list opens over the tiles and never pushes them down.
   Phones: the bar slides sideways, so the list hangs from the whole bar (full width, outside the sliding row);
   computers: the list hangs under its own button. */
.fdds{display:flex;gap:6px;flex:none}
.fdd{position:static}
.fdd>summary{list-style:none;cursor:pointer;padding:0 12px 0 14px;font-size:14px;gap:6px;white-space:nowrap}
.fdd>summary::-webkit-details-marker{display:none}
.fdd>summary::after{content:"";width:6px;height:6px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-inline-start:2px}
.fdd[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.fdd>summary .n{opacity:1;font-weight:600}
.fdd[open]>summary{border-color:var(--ink)}
.fpop{position:absolute;inset-inline:var(--gut) var(--gutR);top:calc(100% + 6px);background:#FFF;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.16);max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain;z-index:15}
.fpop ul{list-style:none;margin:0;padding:6px 0}
.fpop a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;color:var(--ink);text-decoration:none;font-size:15px}
.fpop a::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid #A9A6A0;border-radius:4px;box-sizing:border-box}
.fpop a[aria-pressed=true]::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.6 11 12.5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--ink)}
.fpop a:hover{background:var(--stone)}
.fpop .n{margin-inline-start:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.act .chip.clr{background:none;color:var(--ink);border-color:var(--line)}
@media (min-width:900px){
 .lbar .wrap{overflow:visible;flex-wrap:wrap;row-gap:8px;padding-block:10px;min-height:64px}
 .fdd{position:relative}
 .fdd>summary{min-height:40px}
 .fpop{inset-inline:0 auto;width:max-content;min-width:240px;max-width:340px}
 .fdds .fdd:nth-last-child(-n+2) .fpop{inset-inline:auto 0}}
a.chip{text-decoration:none}
a.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.lmore,.sall{display:inline-flex;margin-top:18px}
.sfirst .sgrid li.xs{display:none}.sfirst.open .sgrid li.xs{display:block}
.none{padding:24px 0;color:var(--muted)}
.cta{margin-top:20px}
.fin-h{margin-top:26px;font-size:clamp(22px,2.4vw,30px)}
.hpsub{color:var(--muted);margin-top:14px}
.plist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.plist li{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid var(--line)}
.plist span{color:var(--muted);font-size:15px}
.home .shop .ci img{width:100%;height:100%;object-fit:contain}
@media print{.strip,.wa,.ask,footer,.lbar,.pvbar,.visit{display:none!important}}

/* ---- Polish items (Tariq 2026-10-29, DECISIONS 14). No fades. ---- */
/* 5: browser parts in our colours */
:root{accent-color:var(--ink)}
::selection{background:var(--ink);color:#FFF}
select{accent-color:var(--ink)}
/* 14: the line under each big heading in full black; grey stays for small notes */
.intro p,.sintro p.lead,.mkh p,.ptext p,.blk .sub,.sfirst .sub,.hero .sub,.ask .sub,body.home .sub{color:var(--ink)}
/* 4: WhatsApp button hides while scrolling down, back on scroll up */
.wa{transition:transform .2s ease}
.wa.away{transform:translateY(calc(100% + 24px))}
/* 1: the home category row fits on desktop; phones keep the swipe */
@media (min-width:1100px){.hero .shop{overflow:visible}.hero .shop li{flex:1 1 0;width:auto;min-width:0}}
/* 8: swipe rows keep the page margin on tablets */
.rail,.sers,.row.rooms,.row.looks,.row.sizes,.rooms5,.tri,.blist{scroll-padding-inline:var(--gut,16px)}
/* 10: long breadcrumb trails drop the last step on phones (the title below says it) */
@media (max-width:600px){.crumbs.long li[aria-current]{display:none}.crumbs.long li:nth-last-child(2)::after{content:none}}
/* 11: picked filters wrap instead of running off the edge */
.act{display:flex;flex-wrap:wrap;gap:8px}
/* 12: form errors in our own words, under the field */
.askf .err{display:block;color:#B3261E;font-size:13px;font-weight:600;margin-top:4px}
.askf [aria-invalid="true"]{border-color:#B3261E}
/* 23: buttons and chips give a little when pressed */
button,.btn,.chip,a.vgo,.cta,.ask a,.sw a,.mt{transition:transform .12s ease}
button:active,.btn:active,.chip:active,a.vgo:active,.cta:active,.ask a:active,.sw a:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.wa,.wa.away{transition:none}button:active,.btn:active,.chip:active,a.vgo:active,.cta:active,.ask a:active,.sw a:active{transform:none}}
/* A1: 44 px taps in the phone menu search */
.strip.nv .msrch button,.strip.nv .hsrch button{min-width:44px;min-height:44px}
/* Menu headers are links; the arrow opens the drop-down on touch and keyboard (Tariq 2026-10-29) */
.strip.nv .mt{padding-inline-end:2px}
.strip.nv .mx{display:inline-flex;align-items:center;justify-content:center;min-height:76px;width:24px;padding:0;margin-inline-end:6px;border:0;background:none;color:#8E8E93;cursor:pointer}
.strip.nv .mx:hover,.strip.nv .mi.open .mx,.strip.nv .mi:hover .mx{color:#FFF}
.strip.nv .mi.open .mx svg{transform:rotate(180deg)}
.strip.nv .mx:focus-visible{outline:2px solid #FFF;outline-offset:-6px}
.sizes .szp{overflow:hidden}.sizes .szp img{display:block;width:100%;height:100%;object-fit:cover}
/* finish chips and size boxes with their order codes (series page, 2026-10-29) */
.fch{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fch a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--ink);text-decoration:none}
.fch a[aria-current]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.szc{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px}
.szc li{border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.szn{margin:0;flex:1 0 auto;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.szn small{color:var(--muted);font-size:13px;font-weight:400;margin-inline-start:8px}
.szk{margin:0;margin-inline-start:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 8px}
.szk+.szk{flex-basis:100%}  /* 2026-10-29 Tariq: "align them to the right": every code line ends in one column */
.szk code{font-size:15px;background:var(--stone);padding:2px 6px;border-radius:4px;overflow-wrap:anywhere}
.szv{font-size:13px;color:var(--muted)}
.szk.hit code,.codes code.hit{box-shadow:0 0 0 2px var(--link)}
.cpy3{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#FFF;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
/* 2026-10-29 Tariq (here so the home page gets it too): footer "insanely big and repetitive". Computer: logo and company links in the first column,
   the five product columns beside it, each heading is its own link, tight rows. Phone: closed groups that open on tap */
footer{padding-block:32px 24px}
footer .wrap{display:grid;grid-template-columns:minmax(150px,1fr) 5fr;gap:24px 40px}
footer .top{flex-direction:column;gap:14px}
footer img{height:44px}
footer nav{display:flex;flex-direction:column;gap:0;font-size:14px}
html body footer nav a{min-height:28px}
footer .fprod{margin:0;padding:0;border:0;gap:0 24px}
footer .fg summary{margin:0 0 8px;pointer-events:auto}
footer .fg summary a{color:#FFF;text-decoration:none}
footer .fprod li a{min-height:28px;font-size:14px}
footer .fall{display:none}
footer .base{grid-column:1/-1;margin-top:8px;padding-top:16px;border-top:1px solid #2C2C2E;font-size:12px}
@media (max-width:900px){
 footer .wrap{grid-template-columns:minmax(0,1fr);gap:20px}
 footer .top{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 24px}
 footer nav{flex-direction:row;flex-wrap:wrap;gap:0 18px;font-size:15px}
 html body footer nav a{min-height:44px}
 footer .fprod{border-top:1px solid #2C2C2E}
 footer .fg summary{margin:0}
 footer .fg summary a{pointer-events:none}
 footer .fprod li a{min-height:44px;font-size:15px}
 footer .fall{display:list-item}
 footer .base{margin-top:0;border-top:0;padding-top:0;flex-direction:column;gap:6px;padding-inline-end:64px}
}

footer .fprod li a,footer nav a,footer .fg summary a{min-width:44px}
footer .fg summary a{display:inline-flex;align-items:center;min-height:28px}
/* the maker's own photo of the picked colour, over the series room photo (Tariq 2026-10-29/30) */
.cbp img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cbp img.real[hidden]{display:none}
/* maker photo galleries: one column on a phone, lazy loaded (Tariq 2026-10-30 "go: galleries") */
.mgal{margin-top:48px}
.mgal .sub{color:var(--muted);margin-top:4px}
.mg{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mg li[hidden]{display:none}
.mgx{margin-top:14px}.mgx>summary{list-style:none}.mgx>summary::-webkit-details-marker{display:none}.mgx[open]>summary{display:none}
.mg img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;background:var(--stone)}
.mg li.pr img{object-fit:contain;background:#fff;border:1px solid var(--line)}
/* 2026-11-02 "More from <series>": every product of the series in one sliding row, arrows beside the heading
   (Tariq: "add all the serie in the more from axor one, with a slider"; DECISIONS 172). Five cards show on a
   computer as before, the rest slide in. Here (not bath.css) so the copied mock-up pages get it too. */
.srl{padding-block:8px}
.srl .rh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 12px}
.srl .rh h2{margin:0;font-size:clamp(17px,1.8vw,22px)}
.srl .rh h2 span{color:var(--muted);font-weight:400}
.srl .rnav{display:flex;gap:8px;flex:none}
.srl .rnav[hidden]{display:none}
.srl .rnav button{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:#FFF;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.srl .rnav button:disabled{opacity:.35;cursor:default}
.coll.srl ul.rail{list-style:none;margin:0;padding:0 0 8px;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/5);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;scrollbar-width:thin}
.srl .rail li{scroll-snap-align:start;min-width:0}
.srl .rail a{display:flex;flex-direction:column;gap:4px;height:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:#FFF;color:var(--ink);text-decoration:none}
.srl .rail .cpi{display:block;aspect-ratio:1;background:#FFF;overflow:hidden}
.srl .rail .cpi img{width:100%;height:100%;object-fit:contain}
.srl .rail b{font-size:13px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;overflow-wrap:anywhere}
.srl .rail a>span:last-child{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:959px){.coll.srl ul.rail{grid-auto-columns:calc((100% - 30px)/4)}}
@media (max-width:639px){.coll.srl ul.rail{grid-auto-columns:38%;margin-inline:calc(var(--gut,16px)*-1);padding-inline:var(--gut,16px);scroll-padding-inline:var(--gut,16px);scrollbar-width:none}
 .coll.srl ul.rail::-webkit-scrollbar{display:none}}
/* 2026-11-03 Tariq (colours beside the photo on a phone, see bath.css): the same for the product pages copied from the
   mock-up (AXOR One, Citterio M, Starck column, Raindance, Rainmaker) and the TECE flush plate pages. Phone only. */
@media (max-width:900px){
 .mkx-port .buy:has(.swatches){display:flex;flex-direction:column;align-items:stretch;gap:18px}
 .mkx-port .buy:has(.swatches)>.gal{margin-bottom:6px}
 .mkx-port .buy:has(.swatches)>.info,.mkx-port .fpb:has(.sws)>.info{display:contents}
 .mkx-port .buy:has(.swatches)>.info>*,.mkx-port .fpb:has(.sws)>.info>*{order:2}
 .mkx-port .buy:has(.swatches)>.info>.fin,.mkx-port .fpb:has(.sws)>.info>.fin{order:1;margin-top:-10px;border-top:0;padding:0 0 16px;border-bottom:1px solid var(--line)}
 .mkx-port .fpb:has(.sws){display:flex;flex-direction:column;align-items:stretch;gap:0}
 .mkx-port .fpb:has(.sws)>.ph{margin-bottom:18px}
 .mkx-port .fpb:has(.sws)>.info>.fin{margin:0 0 16px}
 .mkx-port .buy:has(.swatches) .swatches,.mkx-port .fpb:has(.sws) .sws{gap:6px}
}
/* 2026-11-03 (DECISIONS 223): on a phone the WhatsApp button steps aside while a colour swatch is under it (site.js) */
@media (max-width:900px){.wa{transition:opacity .18s,transform .18s}.wa.aside{opacity:0;transform:scale(.6);pointer-events:none}}
/* rtl.css */
/* Arabic pages (stage 3, 2026-10-31): loaded only on /ar/. Almost all layout already uses logical properties
   (inline-start/end), so this file only flips what is drawn left/right and keeps Arabic letters joined. */
[dir=rtl] body{font-family:'Hanken Grotesk','IBM Plex Sans Arabic','Geeza Pro',Tahoma,sans-serif;line-height:1.7}
/* letter-spacing breaks the joins between Arabic letters */
[dir=rtl] :is(h1,h2,h3,h4,h5,h6,p,a,li,span,b,strong,summary,button,label,dt,dd,th,td,figcaption):not(.en-body *):not(.lgw){letter-spacing:0!important}
/* 2026-11-03: .lgw = a brand wordmark in Latin type (AXOR, FLAVIKER): it keeps its own spacing on Arabic pages too */
[dir=rtl] .wrap{padding-left:var(--gut);padding-right:var(--gut)}
[dir=rtl] .menu li a{padding-left:var(--gut);padding-right:var(--gut)}
/* arrows point the reading way */
[dir=rtl] .more::after{content:"\2039"}
[dir=rtl] .more:hover::after{transform:translateX(-3px)}
[dir=rtl] .hlink::after{content:"\2039"}
[dir=rtl] .hlink:hover::after{transform:translateX(-4px)}
/* product pages: the English body keeps its own direction and font (Tariq 2026-10-31: product pages stay English) */
.en-body{display:contents}
[dir=rtl] .en-body{font-family:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;line-height:1.5}
/* phone numbers, codes and sizes stay left to right inside Arabic (rule 38) */
[dir=rtl] bdi[dir=ltr]{unicode-bidi:isolate}
[dir=rtl] input[type=tel],[dir=rtl] input[type=search]{text-align:start}
/* off-screen helpers: -9999px to the left or start scrolls sideways on a right-to-left page, so clip them in place */
[dir=rtl] .askf .hp{left:auto;right:0;clip-path:inset(50%);overflow:hidden}
[dir=rtl] .skip:not(:focus){inset-inline-start:8px;top:-200px}
/* phase 2 (2026-10-31): the descriptive parts of a product page in Arabic, inside its English body */
.en-body .ar-part{display:contents}
[dir=rtl] .en-body .ar-part :is(h2,h3,p,li){font-family:'Hanken Grotesk','IBM Plex Sans Arabic','Geeza Pro',Tahoma,sans-serif;line-height:1.7;letter-spacing:0!important}
/* Arabic top menu (Tariq 2026-10-31: "find a way to make the header more appealing in arabic"): each item on one
   line, the Arabic a little larger, and the search box folds to its icon until the menu has room for both */
@media (min-width:901px){
  [dir=rtl] .strip.nv .mnav{font-size:16px;gap:0}
  [dir=rtl] .strip.nv .mt{white-space:nowrap;padding:0 9px;line-height:1.2;font-weight:500}
  [dir=rtl] .strip.nv .mx{margin-inline-start:-4px}
  [dir=rtl] .strip.nv .hsrch{display:none}
  [dir=rtl] .strip.nv .srch{display:inline-flex}
}
@media (min-width:1600px){[dir=rtl] .strip.nv .hsrch{display:flex}[dir=rtl] .strip.nv .srch{display:none}}
/* the Arabic menu needs about 880 px on one line: below 1280 px it uses the phone menu instead of squeezing the logo */
[dir=rtl] .strip.nv .logo{flex:none}
@media (min-width:901px) and (max-width:1279px){
  [dir=rtl] .strip.nv .mnav,[dir=rtl] .strip .ar.wide{display:none}
  [dir=rtl] .strip.nv .menu{display:block;margin-inline-start:auto}
}
/* 2026-10-31 (Tariq's screenshot of the showroom block): Arabic letters carry dots and tails below the line (في, ج, ي).
   At the English heading line-height (1.0 to 1.2) they reached into the next line, e.g. the dots of "في" over the phone
   number. Every Arabic heading gets 1.45 (1.3 still touched, measured); !important because the copied mock-up styles set line-height on many selectors.
   scripts/check_layout.js fails an Arabic text of 22 px or more under 1.4. */
[dir=rtl] :is(h1,h2,h3,h4):not(.en-body *){line-height:1.45!important}
/* the same for other large Arabic text found by the check (home lead lines, the journal's article names) */
[dir=rtl] :is(.sub,.lede,.jt b):not(.en-body *){line-height:1.45!important}
/* Phone check 2026-11-03. (1) Inside an English product body (.en-body, dir=ltr) a link's arrow points forward, as on
   the English page; it had turned to "‹". (2) A card name cut short with "…" that is an English name (product and
   series names stay English) reads as an English line: the "…" goes after the last word, not before the first, and
   no word is cut in half ("…hirlpool bath 200"). Lines starting in Arabic are unchanged (plaintext follows the text). */
[dir=rtl] [dir=ltr] .more::after{content:"\203A"}
[dir=rtl] [dir=ltr] .more:hover::after{transform:translateX(3px)}
[dir=rtl] .pg b.nm,[dir=rtl] .pg .pf,[dir=rtl] .coll b,[dir=rtl] .pjg b,[dir=rtl] .pjg figcaption span,[dir=rtl] .srl .rail b,
[dir=rtl] .tg a>span:not(.am):not(.pk){unicode-bidi:plaintext;text-align:right}
/* ...but not inside a product page's English body (dir=ltr, DECISIONS 88): there the names are already English
   left to right with their "…" at the end; the rule above would drop the "…" and push them right. */
[dir=rtl] [dir=ltr] .pg b.nm,[dir=rtl] [dir=ltr] .pg .pf,[dir=rtl] [dir=ltr] .coll b,[dir=rtl] [dir=ltr] .pjg b,
[dir=rtl] [dir=ltr] .pjg figcaption span,[dir=rtl] [dir=ltr] .srl .rail b,
[dir=rtl] [dir=ltr] .tg a>span:not(.am):not(.pk){unicode-bidi:normal;text-align:inherit}