/* ==========================================================================
   Egyptian Electric / المصرية إليكتريك
   Palette from the company mark: signal red + industrial blue on cool steel.
   The thermal gradient (blue → amber → red) appears ONLY on the temperature
   rail, where it carries real data. Nowhere else.
   ========================================================================== */

:root{
  --ink:      #0C1620;
  --ink-2:    #24333F;
  --steel:    #64757F;
  --steel-2:  #93A2AC;
  --line:     #DCE3E8;
  --paper:    #F1F4F6;
  --white:    #FFFFFF;
  --red:      #E00A17;
  --red-dk:   #B00812;
  --blue:     #1583D4;
  --blue-dk:  #0F63A3;
  --amber:    #F2A20C;

  --shadow-s: 0 1px 2px rgba(12,22,32,.06), 0 2px 8px rgba(12,22,32,.05);
  --shadow-m: 0 2px 4px rgba(12,22,32,.06), 0 12px 32px rgba(12,22,32,.08);

  --r:   4px;
  --r-l: 8px;

  --wrap: 1180px;
  --gap:  clamp(1rem, 2.4vw, 2rem);

  --f-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-body:    "IBM Plex Sans Arabic", "Alexandria", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--f-display); color:var(--ink); line-height:1.25; margin:0; font-weight:700; letter-spacing:-.01em }
p{ margin:0 0 1em }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
ul{ margin:0; padding:0; list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }

:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:2px }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem) }
.only-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* --- eyebrow / labels -------------------------------------------------- */
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin:0 0 .9rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line) }

/* --- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.4rem; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--f-display); font-weight:600; font-size:.95rem;
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--red); color:#fff }
.btn-primary:hover{ background:var(--red-dk) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--ink); background:var(--white) }
.btn-light{ background:#fff; color:var(--ink) }
.btn-wa{ background:#1F9D55; color:#fff }
.btn-wa:hover{ background:#17743F }

/* --- header ------------------------------------------------------------ */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-block-end:1px solid var(--line);
}
.head-in{ display:flex; align-items:center; gap:1.2rem; min-height:74px }
.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0 }
.brand img{ width:46px; height:46px }
.brand b{ font-family:var(--f-display); font-size:1.02rem; font-weight:800; color:var(--ink); display:block; line-height:1.2 }
.brand span{ font-size:.7rem; color:var(--steel); display:block; line-height:1.3 }

.nav{ display:flex; gap:.3rem; margin-inline-start:auto }
.nav a{
  padding:.5rem .85rem; border-radius:var(--r); font-size:.94rem; font-weight:500;
  color:var(--ink-2); transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--paper); color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--red); font-weight:600 }

.head-tools{ display:flex; align-items:center; gap:.55rem; flex-shrink:0 }
.lang{
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  border:1px solid var(--line); border-radius:var(--r); padding:.42rem .68rem; color:var(--ink);
}
.lang:hover{ border-color:var(--ink) }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:.5rem .7rem; cursor:pointer }

@media (max-width:960px){
  .nav{
    position:fixed; inset-block-start:74px; inset-inline:0; flex-direction:column; gap:0;
    background:#fff; border-block-end:1px solid var(--line); padding:.5rem 1rem 1rem;
    box-shadow:var(--shadow-m); display:none;
  }
  .nav.open{ display:flex }
  .nav a{ padding:.85rem .5rem; border-block-end:1px solid var(--line); border-radius:0 }
  .nav-toggle{ display:block; margin-inline-start:auto }
  .head-tools .btn{ display:none }
}

/* --- hero -------------------------------------------------------------- */
.hero{ background:var(--white); border-block-end:1px solid var(--line); overflow:hidden }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center; padding-block:clamp(2.5rem,6vw,4.5rem);
}
.hero h1{
  font-size:clamp(1.9rem,4.4vw,3.2rem); font-weight:800; letter-spacing:-.02em;
  white-space:pre-line; margin-block-end:1.1rem;
}
.hero p{ font-size:1.06rem; color:var(--steel); max-width:46ch }
.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-block-start:1.7rem }
.hero-art{ position:relative }
.hero-art img{ width:100%; border-radius:var(--r-l) }
.hero-art::before{
  content:""; position:absolute; inset-block-start:-8%; inset-inline-end:-8%;
  width:58%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(21,131,212,.12), transparent 70%);
  z-index:0;
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:2rem }
  .hero-art{ order:-1 }
}

/* --- THERMAL RAIL — the signature element ------------------------------ */
/* A real scale: 0 °C on one end, 1800 °C on the other, sensor families sit
   where their rated range actually falls. It is a legend and a filter.     */
.rail-block{ background:var(--ink); color:#fff; padding-block:clamp(2rem,4vw,3rem) }
.rail-block h2{ color:#fff; font-size:1.15rem; font-weight:600; margin-block-end:2.2rem }
.rail-block h2 small{ display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel-2); font-weight:400; margin-block-end:.4rem }

.rail{ position:relative; padding-block-start:2.6rem; padding-block-end:1.4rem }
.rail-track{
  height:6px; border-radius:3px;
  background:linear-gradient(to var(--rail-dir,left), var(--blue) 0%, var(--amber) 62%, var(--red) 100%);
}
[dir="rtl"] .rail-track{ background:linear-gradient(to left, var(--blue) 0%, var(--amber) 62%, var(--red) 100%) }
[dir="ltr"] .rail-track{ background:linear-gradient(to right, var(--blue) 0%, var(--amber) 62%, var(--red) 100%) }

.rail-ticks{ position:relative; height:1.9rem; margin-block-start:.55rem }
.rail-tick{ position:absolute; transform:translateX(50%); font-family:var(--f-mono); font-size:.7rem; color:var(--steel-2) }
[dir="ltr"] .rail-tick{ transform:translateX(-50%) }
.rail-tick::before{ content:""; display:block; width:1px; height:7px; background:#3A4A56; margin:0 auto .3rem }

.rail-marks{ position:absolute; inset-block-start:0; inset-inline:0; height:2.6rem }
.rail-mark{
  position:absolute; inset-block-start:0; transform:translateX(50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:#fff; font-size:.82rem; font-weight:600; white-space:nowrap;
}
[dir="ltr"] .rail-mark{ transform:translateX(-50%) }
.rail-mark span{ font-family:var(--f-mono); font-size:.68rem; color:var(--steel-2); font-weight:400 }
.rail-mark::after{ content:""; width:1px; height:.7rem; background:#4A5A66; margin-block-start:.15rem }
.rail-mark:hover{ color:var(--amber) }

.rail-span{ position:absolute; inset-block-start:calc(2.6rem - 0px); height:6px; border-radius:3px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9) inset }

.rail-legend{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-block-start:1.6rem; font-size:.86rem; color:var(--steel-2) }
.rail-legend a{ display:flex; align-items:center; gap:.5rem; color:#fff }
.rail-legend a:hover{ color:var(--amber) }
.rail-legend i{ width:10px; height:10px; border-radius:2px; display:inline-block }

@media (max-width:700px){
  .rail-mark{ font-size:.72rem }
  .rail-tick{ font-size:.62rem }
}

/* --- sections ---------------------------------------------------------- */
.sec{ padding-block:clamp(2.8rem,6vw,4.6rem) }
.sec-white{ background:var(--white) }
.sec-head{ max-width:62ch; margin-block-end:2.4rem }
.sec-head h2{ font-size:clamp(1.4rem,2.8vw,2.05rem); font-weight:700 }
.sec-head p{ color:var(--steel); margin-block-start:.8rem }

/* --- category grid ----------------------------------------------------- */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden }
.cat{ background:var(--white); padding:1.4rem; display:flex; flex-direction:column; gap:.85rem;
  transition:background .18s ease }
.cat:hover{ background:#FAFCFD }
.cat-img{ background:var(--paper); border-radius:var(--r); aspect-ratio:16/11; display:grid; place-items:center; overflow:hidden }
.cat-img img{ width:78%; height:78%; object-fit:contain; transition:transform .3s ease }
.cat:hover .cat-img img{ transform:scale(1.05) }
.cat h3{ font-size:1.02rem; font-weight:600 }
.cat p{ font-size:.87rem; color:var(--steel); margin:0; flex:1 }
.cat-more{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red) }
.cat-temp{ font-family:var(--f-mono); font-size:.7rem; color:var(--blue); border:1px solid var(--line);
  border-radius:99px; padding:.12rem .6rem; align-self:flex-start }

/* --- brands ------------------------------------------------------------ */
.brands{ display:flex; flex-wrap:wrap; gap:.6rem }
.brands b{ font-family:var(--f-display); font-size:.95rem; font-weight:600; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:.6rem 1.2rem }

/* --- why grid ---------------------------------------------------------- */
.why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem }
.why-item{ border-block-start:2px solid var(--red); padding-block-start:1.1rem }
.why-item h3{ font-size:1rem; font-weight:600; margin-block-end:.5rem }
.why-item p{ font-size:.9rem; color:var(--steel); margin:0 }

/* --- stats ------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-block-start:2.5rem }
.stat{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:1.3rem }
.stat b{ font-family:var(--f-mono); font-size:1.6rem; font-weight:600; color:var(--red); display:block; line-height:1.1 }
.stat span{ font-size:.84rem; color:var(--steel) }

/* --- CTA band ---------------------------------------------------------- */
.cta{ background:var(--ink); color:#fff; padding-block:clamp(2.4rem,5vw,3.6rem) }
.cta-in{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:space-between }
.cta h2{ color:#fff; font-size:clamp(1.3rem,2.6vw,1.85rem) }
.cta p{ color:var(--steel-2); max-width:52ch; margin:.7rem 0 0 }
.cta-actions{ display:flex; gap:.7rem; flex-wrap:wrap }

/* --- page header ------------------------------------------------------- */
.page-head{ background:var(--white); border-block-end:1px solid var(--line); padding-block:clamp(2rem,4.5vw,3.4rem) }
.page-head h1{ font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:800 }
.page-head p{ color:var(--steel); max-width:62ch; margin-block-start:.9rem }
.crumb{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); margin-block-end:.8rem }
.crumb a:hover{ color:var(--red) }

/* --- catalogue layout -------------------------------------------------- */
.cat-layout{ display:grid; grid-template-columns:250px 1fr; gap:2.2rem; align-items:start }
@media (max-width:900px){ .cat-layout{ grid-template-columns:1fr } }

.filters{ position:sticky; top:96px; display:flex; flex-direction:column; gap:1.6rem }
@media (max-width:900px){ .filters{ position:static } }
.filter-group h3{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); font-weight:600; margin-block-end:.75rem }
.filter-list{ display:flex; flex-direction:column; gap:.1rem }
.filter-list button{
  text-align:start; background:none; border:none; cursor:pointer; padding:.42rem .6rem;
  border-radius:var(--r); font-size:.9rem; color:var(--ink-2);
  display:flex; justify-content:space-between; gap:.5rem; align-items:center;
}
.filter-list button:hover{ background:var(--white) }
.filter-list button[aria-pressed="true"]{ background:var(--ink); color:#fff }
.filter-list em{ font-family:var(--f-mono); font-size:.7rem; font-style:normal; opacity:.6 }

.searchbox{ position:relative }
.searchbox input{
  width:100%; padding:.72rem .9rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); font-size:.92rem;
}
.searchbox input:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(21,131,212,.14) }

.temp-chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.temp-chips button{
  font-family:var(--f-mono); font-size:.74rem; padding:.34rem .7rem; cursor:pointer;
  border:1px solid var(--line); border-radius:99px; background:var(--white); color:var(--ink-2);
}
.temp-chips button[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff }
.filter-note{ font-size:.76rem; color:var(--steel-2); margin:.6rem 0 0 }

.count{ font-family:var(--f-mono); font-size:.78rem; color:var(--steel); margin-block-end:1.1rem }
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1.1rem }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--steel-2); box-shadow:var(--shadow-m); transform:translateY(-2px) }
.card-img{ background:var(--paper); aspect-ratio:4/3; display:grid; place-items:center; padding:.9rem }
.card-img img{ max-height:100%; width:auto; object-fit:contain }
.card-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.card-cat{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--steel-2) }
.card h3{ font-size:.96rem; font-weight:600; line-height:1.45 }
.card p{ font-size:.83rem; color:var(--steel); margin:0; flex:1 }
.card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-block-start:.3rem }
.badge-temp{ font-family:var(--f-mono); font-size:.68rem; color:var(--red); border:1px solid var(--line);
  border-radius:99px; padding:.1rem .55rem }
.card-link{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--red) }
.empty{ background:var(--white); border:1px dashed var(--line); border-radius:var(--r-l); padding:2.5rem; text-align:center; color:var(--steel) }

/* --- product detail ---------------------------------------------------- */
.pd{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start }
@media (max-width:840px){ .pd{ grid-template-columns:1fr } }
.pd-gallery{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:1.6rem }
.pd-gallery img{ width:100%; aspect-ratio:4/3; object-fit:contain }
.pd h1{ font-size:clamp(1.4rem,3vw,2.1rem); font-weight:700; margin-block-end:.9rem }
.pd-lead{ color:var(--steel); font-size:1rem }
.pd-block{ margin-block-start:2rem }
.pd-block h2{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); font-weight:600; margin-block-end:.9rem }
.spec-list li{ display:flex; gap:.7rem; padding-block:.6rem; border-block-end:1px solid var(--line); font-size:.92rem }
.spec-list li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--red);
  flex-shrink:0; margin-block-start:.6rem }
.tags{ display:flex; flex-wrap:wrap; gap:.45rem }
.tags span{ font-size:.83rem; background:var(--white); border:1px solid var(--line); border-radius:99px; padding:.32rem .8rem }
.pd-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-block-start:2rem }

/* --- forms ------------------------------------------------------------- */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(1.4rem,3vw,2.2rem) }
.field{ margin-block-end:1.1rem }
.field label{ display:block; font-size:.86rem; font-weight:500; color:var(--ink); margin-block-end:.4rem }
.field label i{ color:var(--red); font-style:normal }
.field input,.field select,.field textarea{
  width:100%; padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); font-size:.94rem;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(21,131,212,.14) }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr } }
.form-msg{ margin-block-start:1rem; padding:.9rem 1.1rem; border-radius:var(--r); font-size:.9rem; display:none }
.form-msg.show{ display:block }
.form-msg.ok{ background:#EAF7EE; color:#14603A; border:1px solid #BFE3CC }
.form-msg.err{ background:#FDECEC; color:#8E1119; border:1px solid #F5C6C8 }

.contact-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:2rem; align-items:start }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr } }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); padding:1.6rem }
.info-card h3{ font-size:1rem; margin-block-end:1rem }
.info-list li{ padding-block:.6rem; border-block-end:1px solid var(--line); font-size:.9rem }
.info-list li:last-child{ border:none }
.info-list b{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-2); font-weight:600; margin-block-end:.15rem }

/* --- services ---------------------------------------------------------- */
.svc-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden }
.svc{ background:var(--white); padding:1.8rem; display:grid; grid-template-columns:3.2rem 1fr; gap:1.4rem; align-items:start }
@media (max-width:640px){ .svc{ grid-template-columns:1fr; gap:.6rem } }
.svc b{ font-family:var(--f-mono); font-size:1.1rem; color:var(--red); font-weight:600 }
.svc h3{ font-size:1.05rem; font-weight:600; margin-block-end:.5rem }
.svc p{ color:var(--steel); font-size:.93rem; margin:0 }

/* --- prose ------------------------------------------------------------- */
.prose{ max-width:68ch }
.prose p{ margin-block-end:1.2em }
.prose .lead{ font-size:1.12rem; color:var(--ink); font-family:var(--f-display); font-weight:400; line-height:1.6 }

/* --- footer ------------------------------------------------------------ */
.site-foot{ background:var(--ink); color:var(--steel-2); padding-block:3rem 1.5rem; font-size:.88rem }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem }
@media (max-width:840px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr } }
.site-foot h4{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; font-weight:600; margin-block-end:1rem }
.site-foot a:hover{ color:#fff }
.site-foot li{ padding-block:.28rem }
.foot-brand{ display:flex; align-items:center; gap:.7rem; margin-block-end:1rem }
.foot-brand img{ width:44px; height:44px }
.foot-brand b{ font-family:var(--f-display); color:#fff; font-size:1rem; display:block }
.foot-bottom{ margin-block-start:2.4rem; padding-block-start:1.4rem; border-block-start:1px solid #223140;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem }

/* --- floating whatsapp ------------------------------------------------- */
.wa-float{
  position:fixed; inset-block-end:1.2rem; inset-inline-end:1.2rem; z-index:70;
  width:52px; height:52px; border-radius:50%; background:#1F9D55; color:#fff;
  display:grid; place-items:center; box-shadow:var(--shadow-m);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.07) }
.wa-float svg{ width:26px; height:26px; fill:#fff }


/* ==========================================================================
   RTL corrections
   Arabic is a connected script: tracking and uppercase must not apply to it,
   and Latin/number runs inside Arabic text need bidi isolation.
   ========================================================================== */
[dir="rtl"] :is(h1,h2,h3,h4){ letter-spacing:0 }
[dir="rtl"] :is(.eyebrow,.crumb,.card-cat,.card-link,.cat-more,.count,
  .filter-group h3,.pd-block h2,.site-foot h4,.rail-block h2 small,
  .info-list b,.stat span){ letter-spacing:0; text-transform:none }

.num,.badge-temp,.cat-temp,.rail-mark span,.stat b{
  unicode-bidi:isolate; direction:ltr;
}
.badge-temp,.cat-temp{ display:inline-block }

/* rail labels must not spill past the container at the two extremes */
.rail-mark.at-start{ inset-inline-start:0 !important; transform:none; align-items:flex-start }
.rail-mark.at-end{ inset-inline-start:auto !important; inset-inline-end:0; transform:none; align-items:flex-end }
.rail-mark.at-start::after,.rail-mark.at-end::after{ margin-inline:0 }

/* a page header carrying only a breadcrumb should not reserve headline space */
.page-head.slim{ padding-block:1.1rem }

.pd .badge-temp{ margin-block-end:1rem }