/* =====================================================================
   page-liqui-moly.css: the Liqui Moly Gear Tronic 3 page only. Tokens and parts come from system.css.
   1 hero: name as token + descriptor, the real photograph on a plate with a blurred fill
   2 the exchange: three vessels on a drawing sheet (new oil in, old oil out) driven by ONE variable, --k (0..1)
   3 the option: what is included, and the filter + gasket switch
   ===================================================================== */

/* 1. hero */
.eq-name .l1{display:block}
.eq-name .l2{display:block;font-size:.5em;font-weight:400;color:var(--soft);line-height:1.25;margin-top:.14em;letter-spacing:.005em}
.eq-lm .eq-name.big{font-size:clamp(40px,5.2vw,76px)}
@media (max-width:640px){.eq-lm .eq-name.big{font-size:52px}}
.eq-lm .eq-plate .plate{aspect-ratio:1.12/1}
@media (max-width:899px){.eq-lm .eq-plate .plate{aspect-ratio:1.36/1}}
/* tablet (768): the photograph is only 480 px wide, so a tall plate is mostly blur-fill; a wider, lower plate lifts the copy and the buttons up the page */
@media (min-width:641px) and (max-width:899px){.eq-lm .eq-plate .plate{aspect-ratio:1.75/1}}
/* phones (390 x 844): machine, name, line, button, the place line and the hours line all sit on the first screen. The plate is a little shorter and the rhythm a little tighter to make room for the hours. */
@media (max-width:640px){
  .eq-lm .eq-plate{padding-top:16px}
  .eq-lm .eq-plate .plate{aspect-ratio:1.62/1}
  .eq-lm .eq-plate .plate:not(.plate-crop) img{max-width:calc(100% - 40px);max-height:calc(100% - 38px)}
  .eq-lm .eq-name .l2{font-size:.44em}
  .eq-lm .eq-hero{gap:12px}
  .eq-lm .eq-copy{gap:9px}
  .eq-lm .pb-foot{gap:4px 14px}
}
.eq-lm .eq-line{text-wrap:balance}
/* the folio row never breaks: «03 / 07» stays whole and the category shrinks first */
.eq-lm .eq-idx .n{flex:none;white-space:nowrap}
.eq-lm .eq-idx .t{min-width:0}
.eq-lm .eq-idx .dl{flex:0 1 48px;min-width:14px}
/* prev / next on a phone: the device names are a little smaller so they stay on one line */
@media (max-width:640px){.eq-lm .eq-pn a b{font-size:clamp(16px,4.7vw,24px);gap:8px}.eq-lm .eq-pn a .ic{width:20px;height:20px}}

/* tap targets: the two phone numbers in the facts bar get a 44 px box (side by side with a wide gap; stacked, 44 px apart, when the bar is narrow); the breadcrumb links get a 44 px hit area with no change in layout */
.eq-lm .fact-tel{gap:0 22px}
.eq-lm .fact-tel a{display:inline-flex;align-items:center;min-height:44px}
.eq-lm .crumbs a{padding-block:10px;margin-block:-10px}
/* the facts bar is one column at 900 px and below: the hero above it already says where we are, so the place cell steps aside */
@media (max-width:900px){
  .eq-lm .facts .fact:first-child{display:none}
  .eq-lm .facts .fact:nth-child(2){border-top:0}
}
/* from 900 px up the hero corner already gives the place and the hours, so the facts bar carries only what is not there: the two labelled numbers (nothing is said twice on one screen) */
@media (min-width:900px){
  .eq-lm .facts .fact:nth-child(-n+2){display:none}
  .eq-lm .facts .fact:nth-child(3){border-inline-start:0;border-top:0}
}
@media (min-width:901px){.eq-lm .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the two numbers are labelled («واتساب · اتصال» / «هاتف الكراج»): the label is the small line, the number is the thing you read and tap */
.eq-lm .fact-t .fact-b b{font-size:var(--fs-3);font-weight:600;color:var(--soft)}
.eq-lm .fact-t .fact-tel a{font-size:var(--fs-5);letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.eq-lm .up,html.js .eq-lm .eq-rule .rail-car{animation:none}}
/* the photograph is 480 x 640: it is never shown above that. The rest of the plate is the same picture, blurred and darkened (blur-fill). */
.lm-plate .lm-bleed{position:absolute;inset:-6%;z-index:0;pointer-events:none;background:url(assets/equip-transmission-real.jpg) center/cover no-repeat;filter:blur(26px) saturate(.75) brightness(.42);transform:translateZ(0)}
.lm-plate .plate-x{z-index:0}
.lm-plate img{z-index:1}

/* 2. the exchange */
.lm-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.lm-fig{min-width:0}
.lm-sheet{--k:1;--H:clamp(200px,24vw,268px);--vw:clamp(62px,12vw,104px);--bw:clamp(100px,22vw,190px);position:relative;overflow:hidden;border:1px solid var(--line-2);border-bottom:0;padding:clamp(40px,5vw,60px) clamp(18px,3vw,40px) clamp(20px,2.6vw,30px);
  --bc:rgba(79,200,232,.85);--bs:16px;
  background:
    linear-gradient(rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(64% 70% at 50% 46%,#22323a 0%,#121a1e 60%,#0b0f11 100%)}
.lm-sheet .zn{color:rgba(214,244,255,.5)}
.lm-row{display:grid;grid-template-columns:var(--vw) minmax(18px,1fr) var(--bw) minmax(18px,1fr) var(--vw);align-items:start;direction:rtl}
.lm-v{display:grid;justify-items:center;align-content:start;gap:14px;min-width:0}
.lm-cap{font-weight:600;font-size:var(--fs-2);line-height:1.5;color:var(--soft);text-align:center;white-space:nowrap}
/* the glass tube: a graduated cylinder */
.lm-tube{position:relative;width:100%;height:var(--H);border:1.5px solid rgba(255,255,255,.4);border-top-color:rgba(255,255,255,.22);border-radius:5px 5px 14px 14px;background:rgba(255,255,255,.035);overflow:hidden}
.lm-tube::before{content:'';position:absolute;inset:0 auto 0 12%;width:8%;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);z-index:2;pointer-events:none}
.lm-scale{position:absolute;z-index:3;inset:8px 0 8px auto;width:16px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 10%) right top/100% 100% no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.lm-fluid{position:absolute;inset:0;--f:1;clip-path:inset(calc((1 - var(--f)) * 100%) 0 0 0)}
.lm-fluid::before{content:'';position:absolute;top:0;inset-inline:0;height:100%;background:var(--fl)}
.lm-fluid::after{content:'';position:absolute;inset-inline:0;top:0;height:2px;background:rgba(255,255,255,.7)}
.lm-new{--fl:linear-gradient(180deg,#9ce6f8,#4FC8E8 40%,#1f7c99)}
.lm-waste{--fl:linear-gradient(180deg,#4a3d33,#241c17 40%,#0e0b09)}
.lm-new .lm-fluid{--f:calc(1 - .9 * var(--k))}
.lm-waste .lm-fluid{--f:calc(.9 * var(--k))}
/* the gearbox: a housing whose oil goes from old (dark) to new (cyan) */
.lm-box{--fl:none}
.lm-case{position:relative;width:100%;height:calc(var(--H) * .62);margin-top:calc(var(--H) * .38);border:2px solid rgba(255,255,255,.5);border-radius:10px;overflow:hidden;background:#0c1113;box-shadow:0 0 0 4px rgba(13,13,13,.9),0 0 0 5px rgba(255,255,255,.14)}
.lm-case i{position:absolute;inset:0}
.lm-cyan{background:linear-gradient(180deg,#9ce6f8,#4FC8E8 38%,#1f7c99)}
.lm-old{background:linear-gradient(180deg,#4a3d33,#241c17 40%,#0e0b09);clip-path:inset(calc(var(--k) * 100%) 0 0 0)}
.lm-old::after{content:'';position:absolute;inset-inline:0;top:0;height:2px;background:rgba(255,255,255,.55)}
.lm-case::before,.lm-case::after{content:'';position:absolute;z-index:2;top:9px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 calc(var(--H) * .62 - 29px) 0 rgba(255,255,255,.45)}
.lm-case::before{inset-inline-start:9px}.lm-case::after{inset-inline-end:9px}
/* the two hoses. They are drawn as plain lines; while the exchange runs they carry moving dashes (right to left, the reading direction) */
.lm-pipe{align-self:start;margin-top:calc(var(--H) * .38 + var(--H) * .31 - 3px);height:6px;display:block;position:relative;color:#4FC8E8}
.lm-pipe-b{color:#8c8178}
.lm-pipe i{position:absolute;inset:0;display:block;background:repeating-linear-gradient(90deg,currentColor 0 9px,transparent 9px 18px);background-size:18px 100%;opacity:.42}
.lm-sheet.is-run .lm-pipe i{opacity:1;animation:lmflow .55s linear infinite}
@keyframes lmflow{to{background-position:-18px 0}}
html.tab-hidden .lm-pipe i{animation-play-state:paused}

.lm-ctl{display:none;border:1px solid var(--line-2);border-bottom:0;padding:8px 18px}
.lm-on .lm-ctl{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.lm-r{-webkit-appearance:none;appearance:none;display:block;flex:1;min-width:0;height:44px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.lm-r:focus{outline:none}
.lm-r:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lm-r::-webkit-slider-runnable-track{height:22px;background:
  linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 10%) 0 50%/100% 12px no-repeat}
.lm-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-2px;border-radius:50%;background:var(--cyan);border:3px solid #0d0d0d;box-shadow:0 0 0 1.5px var(--cyan)}
.lm-r::-moz-range-track{height:22px;background:
  linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 10%) 0 50%/100% 12px no-repeat}
.lm-r::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--cyan);border:3px solid #0d0d0d;box-shadow:0 0 0 1.5px var(--cyan)}
.lm-replay{flex:none}
.lm-fig .tb{border-top:1px solid var(--line-2)}

/* 3. what is included + the switch. The slider, the replay button and the filter switch appear only once page-liqui-moly.js is running (html.lm-on); without it the finished exchange and the full list are the complete picture. */
.lm-side{display:grid;gap:24px;align-content:start;align-self:center;min-width:0}
.lm-card{gap:18px}
.lm-list{display:grid;border-top:1px solid var(--line-c)}
.lm-list li{display:flex;align-items:center;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-5);font-weight:600;line-height:1.5;color:#f0f2f3;transition:color .3s}
.lm-ck{flex:none;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--cyan);background:var(--cyan);color:#06181e;border-radius:3px;transition:background-color .3s,border-color .3s,color .3s}
.lm-ck .ic{width:18px;height:18px;stroke-width:3}
.lm-t{flex:1;min-width:0}
.lm-tag{flex:none;font-style:normal;font-weight:600;font-size:13px;line-height:1.7;padding:0 10px;border:1px dashed rgba(79,200,232,.55);color:var(--cyan)}
.lm-o:not(.is-on){color:var(--soft)}
.lm-o:not(.is-on) .lm-ck{background:transparent;border:2px dashed var(--mute);color:transparent}
.lm-o.is-on .lm-tag{border-style:solid}
.lm-sw{display:none;align-items:center;justify-content:space-between;gap:16px}
.lm-on .lm-sw{display:flex}
.lm-sw-t{font-size:var(--fs-4);font-weight:600;color:var(--soft);line-height:1.5}
.lm-sw-b{direction:ltr;position:relative;flex:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 6px 0 14px;border:1px solid var(--line-c);border-radius:999px;background:rgba(79,200,232,.05);cursor:pointer;transition:background-color .3s,border-color .3s}
.lm-sw-b i{order:2;position:relative;display:block;width:50px;height:28px;border-radius:999px;background:#2a3237;transition:background-color .3s}
.lm-sw-b i::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.lm-sw-b em{order:1;font-style:normal;font-weight:700;font-size:var(--fs-3);min-width:2.2em;text-align:center;color:var(--soft);direction:rtl}
.lm-sw-b[aria-checked=true]{border-color:var(--cyan);background:rgba(79,200,232,.12)}
.lm-sw-b[aria-checked=true] i{background:var(--cyan)}
.lm-sw-b[aria-checked=true] i::after{transform:translateX(22px);background:#06181e}
.lm-sw-b[aria-checked=true] em{color:var(--cyan)}
.lm-sw-b:hover{border-color:var(--cyan)}
.lm-sw-b:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media (max-width:899px){.lm-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .lm-sheet{padding:44px 26px 18px;--H:190px}
  .lm-cap{font-size:13px}
  .lm-sw{flex-wrap:wrap}
  .lm-replay span{display:none}
  .lm-replay{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.lm-replay{display:none!important}}

/* the housing's filler neck */
.lm-box{position:relative}
.lm-port{position:absolute;z-index:2;top:calc(var(--H) * .38 - 12px);left:50%;width:24px;height:12px;margin-left:-12px;border:2px solid rgba(255,255,255,.5);border-bottom:0;border-radius:4px 4px 0 0;background:#0c1113}