/*
Theme Name:   Magnetherm
Theme URI:    https://www.magnetherm.com.br
Description:  Tema filho do Astra para a Magnetherm. Portal de duas divisões (Serviços e Loja) em versão clara sobre o azul-marinho da marca, com sistema de design próprio: paleta tirada do logotipo — MAGNE vermelho, THERM azul — e a "costura térmica" que separa as divisões.
Author:       LMNTTECH
Template:     astra
Version:      3.0.0
Text Domain:  magnetherm
*/

/* ─────────────────────────────────────────────────────────────────
   Design tokens — light. Accents come from the Magnetherm logo and
   are darkened for legible contrast on white. Neutrals are biased
   blue toward the cold accent so nothing reads as flat grey.
   ───────────────────────────────────────────────────────────────── */
:root{
  /* Official brand, taken from the 2023 identity art (01 - Logo):
     the logo is built on #020A2E, so that navy is the brand's own ground
     and the anchor for every dark surface here. Reds and blues are
     sampled from the logo itself, not approximated. */
  --mg-navy:#020A2E;      /* brand ground — logo art background */
  --mg-paper:#FFFFFF;
  --mg-sand:#F2F5FA;
  --mg-ink:#0A1430;       /* text: navy-derived, never neutral black */
  --mg-ink-2:#55617D;
  --mg-line:#DBE1EC;
  --mg-cold:#004091;      /* logo blue */
  --mg-sky:#56ACDE;       /* logo highlight blue */
  --mg-hot:#D90E22;       /* logo red */
  --mg-seam:linear-gradient(90deg,var(--mg-cold) 0%,#7B4FA8 50%,var(--mg-hot) 100%);
  --mg-seam-v:linear-gradient(180deg,var(--mg-cold) 0%,#7B4FA8 50%,var(--mg-hot) 100%);

  --mg-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mg-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --mg-wrap:1280px;
  /* 4px-based spacing scale and one control height, so header elements sit on
     the same optical line instead of each having its own vertical size. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --ctrl:48px; --logo-h:46px;
  --mg--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --mg-0:clamp(1rem,.96rem + .2vw,1.07rem);
  --mg-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --mg-2:clamp(1.55rem,1.35rem + 1vw,2.05rem);
  --mg-3:clamp(2rem,1.6rem + 2vw,3rem);
  --mg-4:clamp(2.5rem,1.8rem + 3.6vw,4.6rem);
}

/* Scoped under .mg so Astra keeps styling every page that is not on a
   Magnetherm template. Nothing here leaks into the rest of the site. */
.mg *,.mg *::before,.mg *::after{box-sizing:border-box}
/* Every interactive element states its own colour, so parent or plugin CSS
   that styles bare `button` can never make our text invisible. Only colour and
   font are reset here: `.mg button` (0,1,1) would otherwise outrank component
   classes like `.lj-dep-card` (0,1,0) and strip their borders. */
.mg button,.mg input,.mg select,.mg textarea{color:var(--mg-ink);font-family:inherit}
.mg{
  background:var(--mg-paper);color:var(--mg-ink);
  font-family:var(--mg-sans);font-size:var(--mg-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.mg img{max-width:100%;display:block}
.mg a{color:inherit}
.mg h1,.mg h2,.mg h3{margin:0;line-height:1.06;text-wrap:balance;font-weight:800;letter-spacing:-.022em}
.mg p{margin:0}
.mg-wrap{width:min(100% - 2.5rem,var(--mg-wrap));margin-inline:auto}
.mg-label{font-family:var(--mg-mono);font-size:var(--mg--1);text-transform:uppercase;letter-spacing:.15em;color:var(--mg-ink-2)}
.mg-seam{height:4px;background:var(--mg-seam);border:0;margin:0}
.mg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Portal (Option A — symmetric) ──────────────────────────────── */
.mg-gate{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--mg-paper)}
.mg-gate-top{display:grid;gap:1rem;justify-items:center;text-align:center;
  padding:clamp(2rem,5vh,3.2rem) 1.25rem clamp(1.6rem,3vh,2.2rem);background:var(--mg-paper)}
.mg-gate-top img{height:auto;width:clamp(230px,32vw,380px)}
.mg-gate-top h1{font-size:clamp(1.3rem,1rem + 1.8vw,2.4rem);max-width:22ch}

.mg-doors{display:grid;grid-template-columns:1fr 4px 1fr;min-height:0}
.mg-doors .mg-divider{background:var(--mg-seam-v)}

.mg-door{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.6rem;padding:clamp(1.6rem,3.5vw,2.8rem);text-decoration:none;border:0;overflow:hidden;
  min-height:clamp(300px,40vh,420px);background:var(--mg-sand);
}
.mg-door-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s ease}
.mg-door::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(12,26,40,.82) 68%,rgba(12,26,40,.94) 100%)}
.mg-door:hover .mg-door-img,.mg-door:focus-visible .mg-door-img{transform:scale(1.05)}
.mg-door h2{font-size:var(--mg-3);color:#fff}
.mg-door p{color:#D6E0EA;max-width:34ch;font-size:var(--mg--1)}
.mg-door .mg-go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mg-mono);
  font-size:var(--mg--1);text-transform:uppercase;letter-spacing:.14em;margin-top:.3rem;color:#fff}
.mg-door .mg-go::after{content:"\2192";transition:transform .3s ease}
.mg-door:hover .mg-go::after,.mg-door:focus-visible .mg-go::after{transform:translateX(6px)}
.mg-door .mg-tagbar{position:absolute;top:0;left:0;right:0;height:5px}
.mg-door:focus-visible{outline:3px solid var(--mg-ink);outline-offset:-6px}
.mg-door--serv .mg-tagbar{background:var(--mg-cold)}
.mg-door--loja .mg-tagbar{background:var(--mg-hot)}

.mg-gate-foot{background:var(--mg-paper);border-top:1px solid var(--mg-line);padding:1rem 0}
.mg-gate-foot .mg-wrap{display:flex;gap:1.4rem;align-items:center;justify-content:center;flex-wrap:wrap}

.mg-ilink{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--mg-ink-2);
  font-family:var(--mg-mono);font-size:var(--mg--1);letter-spacing:.08em;padding:.25rem 0;border-bottom:1px solid transparent}
.mg-ilink svg{width:16px;height:16px;flex:none;fill:currentColor}
.mg-ilink:hover,.mg-ilink:focus-visible{color:var(--mg-ink);border-bottom-color:var(--mg-cold)}
.mg-ilink--wa:hover,.mg-ilink--wa:focus-visible{color:#0F8A3C;border-bottom-color:#0F8A3C}

/* ── Page chrome ────────────────────────────────────────────────── */
/* LOGOTIPO_BRANCO is transparent and reads on white, so the header stays
   light. The seam sits under it as the brand rule. */
.mg-head{background:var(--mg-paper);border-bottom:4px solid transparent;border-image:var(--mg-seam) 1}
.mg-head .mg-wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.mg-brand img{height:auto;width:clamp(150px,18vw,210px)}
.mg-nav{display:flex;gap:1.5rem;align-items:center;list-style:none;margin:0;padding:0}
.mg-nav a{text-decoration:none;font-size:var(--mg--1);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding-block:.35rem;border-bottom:2px solid transparent}
.mg-nav a:hover,.mg-nav a:focus-visible{border-bottom-color:var(--mg-cold)}
.mg-nav .mg-to-store{color:var(--mg-hot)}
.mg-nav .mg-to-store:hover{border-bottom-color:var(--mg-hot)}
.mg-nav .mg-to-serv{color:var(--mg-cold)}

.mg-hero{position:relative;isolation:isolate;min-height:min(58vh,500px);display:flex;align-items:flex-end}
.mg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mg-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,26,40,.35) 0%,rgba(12,26,40,.55) 45%,rgba(12,26,40,.9) 100%)}
.mg-hero .mg-wrap{padding:3rem 0 2.6rem;display:grid;gap:1rem;color:#fff}
.mg-hero h1{font-size:var(--mg-4);max-width:15ch;color:#fff}
.mg-hero h1 em{font-style:normal;color:#7FBAF5}
.mg-hero p{max-width:54ch;font-size:var(--mg-1);color:#D6E0EA}
.mg-hero .mg-label{color:#A9C4DC}

.mg-section{padding:clamp(2.8rem,6vw,4.8rem) 0}
.mg-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.mg-sec-head h2{font-size:var(--mg-2)}

.mg-grid{display:grid;gap:1px;background:var(--mg-line);border:1px solid var(--mg-line)}
.mg-grid-3{grid-template-columns:repeat(3,1fr)}
.mg-grid-4{grid-template-columns:repeat(4,1fr)}
.mg-cell{background:var(--mg-paper);padding:1.6rem 1.4rem;display:grid;gap:.5rem;align-content:start}
.mg-cell h3{font-size:var(--mg-1)}
.mg-cell p{color:var(--mg-ink-2);font-size:var(--mg--1);line-height:1.6}
.mg-cell .mg-n{font-family:var(--mg-mono);font-size:var(--mg--1);color:var(--mg-cold);letter-spacing:.1em}

.mg-spec{background:var(--mg-sand);border-block:1px solid var(--mg-line)}
.mg-spec .mg-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mg-line)}
.mg-spec dl{background:var(--mg-sand);margin:0;padding:1.4rem 1.2rem;display:grid;gap:.25rem}
.mg-spec dt{font-family:var(--mg-mono);font-size:var(--mg--1);text-transform:uppercase;letter-spacing:.13em;color:var(--mg-ink-2)}
.mg-spec dd{margin:0;font-size:var(--mg-1);font-weight:700;letter-spacing:-.01em}

.mg-band{position:relative;background:var(--mg-sand);border-block:1px solid var(--mg-line);padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.mg-band::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--mg-seam)}
.mg-band .mg-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.mg-band h2{font-size:var(--mg-2);margin-bottom:.7rem}
.mg-band p{color:var(--mg-ink-2);max-width:46ch}

.mg-btn{display:inline-block;padding:.85rem 1.7rem;background:var(--mg-hot);color:#fff;font-weight:700;
  text-decoration:none;font-size:var(--mg--1);text-transform:uppercase;letter-spacing:.1em;border:0;cursor:pointer}
.mg-btn:hover{background:var(--mg-ink);color:#fff}
.mg-btn:focus-visible{outline:3px solid var(--mg-ink);outline-offset:3px}
.mg-btn--cold{background:var(--mg-cold)}

/* ── Contact form ───────────────────────────────────────────────── */
.mg-contact .mg-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.mg-contact h2{font-size:var(--mg-2);margin-bottom:.8rem}
.mg-clist{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem}
.mg-form{display:grid;gap:.9rem;background:var(--mg-sand);padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--mg-line)}
.mg-form label{display:grid;gap:.4rem;font-family:var(--mg-mono);font-size:var(--mg--1);
  text-transform:uppercase;letter-spacing:.1em;color:var(--mg-ink-2)}
.mg-form input,.mg-form textarea,.mg-form select{
  font:inherit;font-size:var(--mg-0);color:var(--mg-ink);background:var(--mg-paper);
  border:1px solid var(--mg-line);padding:.7rem .8rem;border-radius:0;width:100%;
}
.mg-form input:focus-visible,.mg-form textarea:focus-visible,.mg-form select:focus-visible{
  outline:2px solid var(--mg-cold);outline-offset:1px;border-color:var(--mg-cold)}
.mg-form textarea{resize:vertical;min-height:110px}
.mg-hp{position:absolute!important;left:-9999px!important}
.mg-note{padding:.85rem 1rem;border:1px solid var(--mg-line);background:var(--mg-paper);font-size:var(--mg--1)}
.mg-note--ok{border-color:#137A43;color:#0B5C32}
.mg-note--err{border-color:var(--mg-hot);color:#8E1014}

/* ── Footer ─────────────────────────────────────────────────────── */
.mg-foot{padding:2.2rem 0;border-top:1px solid var(--mg-line);background:var(--mg-sand)}
.mg-foot .mg-wrap{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}
.mg-foot p{color:var(--mg-ink-2);font-size:var(--mg--1)}
.mg-socials{display:flex;gap:1.2rem;flex-wrap:wrap}

/* Content the owner writes in the page editor */
.mg-editor{max-width:70ch}
.mg-editor h2,.mg-editor h3{margin-top:1.6rem}
.mg-editor p{margin-bottom:1rem;color:var(--mg-ink-2)}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1000px){ .mg-grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .mg-gate{min-height:auto}
  .mg-doors{grid-template-columns:1fr;grid-template-rows:auto 4px auto}
  .mg-doors .mg-divider{background:var(--mg-seam)}
  .mg-spec .mg-wrap{grid-template-columns:repeat(2,1fr)}
  .mg-grid-3,.mg-grid-4{grid-template-columns:1fr}
  .mg-contact .mg-wrap,.mg-band .mg-wrap{grid-template-columns:1fr}
  .mg-nav{display:none}
}
@media (prefers-reduced-motion:reduce){ .mg *{animation:none!important;transition:none!important} }

/* ── Migrated pages ─────────────────────────────────────────────────
   Content converted out of WPBakery shortcodes into plain HTML. The
   old markup carried inline colours meant for dark builder sections
   (white text, etc.), which would be invisible here — so inline
   colour is neutralised inside the editor column. */
.mg-pagehead{background:var(--mg-sand);border-bottom:1px solid var(--mg-line);
  padding:clamp(2.2rem,5vw,3.4rem) 0}
.mg-pagehead h1{font-size:var(--mg-3);max-width:20ch}

.mg-editor{max-width:74ch;font-size:1.03rem}
.mg-editor h2{font-size:var(--mg-2);margin:2.2rem 0 .8rem}
.mg-editor h3{font-size:var(--mg-1);margin:1.8rem 0 .6rem}
.mg-editor h4{font-size:1.05rem;margin:1.5rem 0 .5rem}
.mg-editor p{margin:0 0 1.05rem;color:var(--mg-ink-2)}
.mg-editor ul,.mg-editor ol{margin:0 0 1.05rem 1.2rem;color:var(--mg-ink-2)}
.mg-editor li{margin-bottom:.4rem}
.mg-editor a{color:var(--mg-cold);text-decoration:underline;text-underline-offset:2px}
.mg-editor strong{color:var(--mg-ink)}
.mg-editor hr.mg-rule{border:0;height:3px;background:var(--mg-seam);margin:2.4rem 0}
.mg-editor table{width:100%;border-collapse:collapse;margin:0 0 1.2rem}
.mg-editor td,.mg-editor th{border:1px solid var(--mg-line);padding:.6rem .7rem;text-align:left}

/* Builder text was often white-on-dark; force it legible on paper. */
.mg-editor [style*="color"]{color:inherit!important}
.mg-editor [style*="background"]{background:none!important}

.mg-editor .mg-fig{margin:1.6rem 0}
.mg-editor .mg-fig img{width:100%;height:auto;border:1px solid var(--mg-line)}
.mg-editor img{max-width:100%;height:auto}
.mg-editor .mg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;margin:1.6rem 0}
.mg-editor .mg-gallery .mg-fig{margin:0}
.mg-editor h4.mg-when{font-family:var(--mg-mono);font-size:var(--mg--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mg-hot);margin-top:2rem}

/* Floats from the old editor content shouldn't break the column. */
.mg-editor::after{content:"";display:table;clear:both}
.mg-editor .alignleft{float:left;margin:0 1.2rem 1rem 0;max-width:50%}
.mg-editor .alignright{float:right;margin:0 0 1rem 1.2rem;max-width:50%}
.mg-editor .aligncenter{display:block;margin-inline:auto}
@media (max-width:700px){
  .mg-editor .alignleft,.mg-editor .alignright{float:none;margin:1.2rem 0;max-width:100%}
}


/* <picture> is inline by default; keep the lockup sizing on the img. */
.mg-gate-top picture,.mg-brand picture{display:block;line-height:0}
.mg-gate-top picture img{height:auto;width:clamp(230px,32vw,380px)}
.mg-brand picture img{height:auto;width:clamp(150px,18vw,210px)}

/* ══ LOJA — layout de e-commerce ═══════════════════════════════════ */
.lj-top{background:var(--mg-navy);color:#B9C6E0;font-size:.76rem;padding:var(--sp-2) 0}
.lj-top .mg-wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.lj-top a{color:#fff;text-decoration:none}.lj-top a:hover{text-decoration:underline}

.lj-head{background:var(--mg-paper);border-bottom:1px solid var(--mg-line);padding:var(--sp-4) 0}
.lj-head .mg-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-6);align-items:center}
.lj-logo{display:flex;align-items:center}
.lj-logo picture img{height:var(--logo-h);width:auto;display:block}
.lj-search{display:flex;position:relative}
.lj-search input{flex:1;min-width:0;font:inherit;font-size:.95rem;height:var(--ctrl);
  padding:0 calc(var(--ctrl) + var(--sp-3)) 0 var(--sp-4);
  border:1.5px solid var(--mg-navy);background:#fff;color:var(--mg-ink)}
.lj-search input:focus-visible{outline:3px solid var(--mg-sky);outline-offset:-3px}
.lj-search button{position:absolute;right:0;top:0;width:var(--ctrl);height:var(--ctrl);border:0;color:#fff;
  cursor:pointer;background:var(--mg-navy);display:grid;place-items:center}
.lj-search button svg{width:20px;height:20px;fill:#fff}
.lj-search button:hover{background:var(--mg-hot)}
.lj-wa{display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none;background:#12A54B;
  color:#fff;height:var(--ctrl);padding:0 var(--sp-4);font-size:.78rem;white-space:nowrap}
.lj-wa svg{width:22px;height:22px;fill:currentColor}
.lj-wa span{display:grid;line-height:1.15}.lj-wa b{font-size:.9rem}
.lj-wa:hover{background:#0E8C3F}

.lj-dep{background:var(--mg-navy)}
.lj-dep .mg-wrap{display:flex;gap:var(--sp-1);flex-wrap:wrap;padding:var(--sp-2) 1.25rem}
.lj-chip{font:inherit;font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;color:#CBD6EC!important;
  background:transparent;border:0;appearance:none;padding:.45rem .8rem;border-radius:4px}
.lj-chip b{font-weight:400;opacity:.65;margin-left:.35rem}
.lj-chip:hover{background:rgba(255,255,255,.1);color:#fff}
.lj-chip.is-on{background:var(--mg-hot);color:#fff}
.lj-chip:focus-visible{outline:2px solid #fff;outline-offset:1px}

.lj-hero{position:relative;background:var(--mg-sand)}
.lj-slides{position:relative;aspect-ratio:1920/400;min-height:150px}
.lj-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;display:block}
.lj-slide.is-on{opacity:1;pointer-events:auto}
.lj-slide img{width:100%;height:100%;object-fit:cover}
.lj-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;cursor:pointer;
  background:rgba(255,255,255,.85);color:var(--mg-navy);font-size:1.9rem;line-height:1;
  width:40px;height:52px;display:grid;place-items:center}
.lj-arrow:hover{background:#fff}.lj-prev{left:0}.lj-next{right:0}
.lj-dots{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);display:flex;gap:.4rem;z-index:3}
.lj-dot{width:26px;height:5px;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0}
.lj-dot.is-on{background:var(--mg-hot)}

.lj-benefits{background:var(--mg-sand);border-bottom:1px solid var(--mg-line)}
.lj-benefits .mg-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.lj-benefits div{padding:var(--sp-3) var(--sp-4);display:grid;gap:1px}
.lj-benefits div + div{border-left:1px solid var(--mg-line)}
.lj-benefits b{font-size:.82rem;color:var(--mg-navy)}
.lj-benefits span{font-size:.76rem;color:var(--mg-ink-2)}

.lj-section{padding:var(--sp-7) 0}
.lj-sechead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  margin-bottom:var(--sp-5);border-bottom:1px solid var(--mg-line);padding-bottom:var(--sp-3);position:relative}
.lj-sechead::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--mg-hot)}
.lj-sechead h2{font-size:1.32rem;letter-spacing:-.02em}
.lj-seeall,.lj-count{font:inherit;font-size:.8rem;color:var(--mg-cold)!important;background:0;border:0;cursor:pointer;font-weight:700}
.lj-count{color:var(--mg-ink-2);font-weight:400;cursor:default}

.lj-deps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
.lj-dep-img{aspect-ratio:3/2}
.lj-dep-card{display:flex;flex-direction:column;cursor:pointer;overflow:hidden;color:var(--mg-ink);appearance:none;
  background:#fff;border:1px solid var(--mg-line);padding:0;font:inherit;text-align:left;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.lj-dep-card:hover{border-color:var(--mg-hot);box-shadow:0 8px 20px rgba(10,20,48,.09);transform:translateY(-2px)}
.lj-dep-img{display:block;aspect-ratio:4/3;background:#fff;overflow:hidden;border-bottom:1px solid #EEF1F6}
.lj-dep-img img{width:100%;height:100%;object-fit:contain;display:block;padding:9%;box-sizing:border-box}
.lj-dep-img.is-fill img{object-fit:cover;padding:0}
.lj-dep-txt{display:grid;gap:.1rem;padding:.75rem .85rem .9rem}
.lj-dep-card b{font-size:.84rem;line-height:1.25}
.lj-dep-card i{font-style:normal;font-size:.72rem;color:var(--mg-ink-2)}

.lj-shelf-wrap .mg-wrap{position:relative}
.lj-shelf-wrap .mg-wrap::after{content:"";position:absolute;top:4.2rem;right:0;bottom:var(--sp-2);width:56px;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--mg-paper));pointer-events:none}
.lj-shelf{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp-2);scrollbar-width:thin}
.lj-shelf .lj-card{flex:0 0 clamp(164px,16vw,196px);scroll-snap-align:start}
.lj-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}

.lj-card{background:#fff;border:1px solid var(--mg-line);padding:var(--sp-2);display:flex;
  flex-direction:column;gap:2px;transition:box-shadow .2s,border-color .2s,transform .2s}
.lj-card:hover{box-shadow:0 8px 22px rgba(10,20,48,.10);border-color:#BFCEDC;transform:translateY(-2px)}
.lj-shot{aspect-ratio:1;background:#fff;overflow:hidden;margin-bottom:var(--sp-2)}
.lj-shot img{width:100%;height:100%;object-fit:contain;display:block}
.lj-shot.is-fill img{object-fit:cover}
.lj-brand{font-family:var(--mg-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mg-hot);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-card h3{font-size:.78rem;font-weight:600;line-height:1.3;margin:0;color:var(--mg-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.lj-cod{font-family:var(--mg-mono);font-size:.63rem;color:#8B97AB}
.lj-price{font-size:.72rem;font-weight:600;color:var(--mg-ink-2);margin:2px 0 var(--sp-2)}
.lj-buy{margin-top:auto;display:block;text-align:center;text-decoration:none;font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.06em;padding:.5rem;background:var(--mg-hot);color:#fff}
.lj-buy:hover{background:var(--mg-navy)}
.lj-empty{padding:2rem 0;color:var(--mg-ink-2)}
.lj-note{margin-top:1.4rem;padding:.9rem 1.1rem;background:var(--mg-sand);border-left:4px solid var(--mg-hot);
  color:var(--mg-ink-2);font-size:.82rem;max-width:80ch}

.lj-brands{background:var(--mg-sand);border-block:1px solid var(--mg-line);padding:1.6rem 0}
.lj-brandlabel{font-family:var(--mg-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mg-ink-2);text-align:center;margin-bottom:1rem}
.lj-brandrow{display:flex;gap:2.2rem;align-items:center;justify-content:center;flex-wrap:wrap}
.lj-brandrow img{height:38px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.lj-brandrow img:hover{filter:none;opacity:1}

.lj-cross{background:var(--mg-navy);color:#fff;padding:clamp(1.8rem,3.5vw,2.6rem) 0}
.lj-cross .mg-wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.lj-cross h2{font-size:1.35rem;margin:.2rem 0}
.lj-cross p{color:#B9C6E0;max-width:52ch;font-size:.9rem}
.lj-cross .mg-label{color:#8FA3C4}

.lj-foot{background:#06102B;color:#B9C6E0;padding:2.4rem 0 0}
.lj-footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.lj-foot h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin-bottom:.7rem}
.lj-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.lj-foot a,.lj-flink{color:#B9C6E0!important;text-decoration:none;font-size:.85rem;background:0;border:0;
  padding:0;font:inherit;cursor:pointer;text-align:left}
.lj-foot a:hover,.lj-flink:hover{color:#fff;text-decoration:underline}
.lj-foot p{font-size:.85rem;margin:.8rem 0}

.lj-foot .lj-footgrid>div:first-child picture img{height:42px;width:auto;background:#fff;padding:6px 10px;display:block}
.lj-social{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.6rem}
.lj-social .mg-ilink{color:#B9C6E0}.lj-social .mg-ilink:hover{color:#fff}
.lj-legal{border-top:1px solid #16224A;margin-top:2rem;padding:1rem 0;font-size:.76rem}
.lj-legal .mg-wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width:1240px){ .lj-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:1080px){ .lj-grid{grid-template-columns:repeat(4,1fr)} .lj-deps{grid-template-columns:repeat(4,1fr)} }
@media (max-width:980px){
  .lj-head .mg-wrap{grid-template-columns:1fr auto;row-gap:.8rem}
  .lj-search{grid-column:1/-1;order:3}
  .lj-grid{grid-template-columns:repeat(3,1fr)}
  .lj-deps{grid-template-columns:repeat(3,1fr)}
  .lj-footgrid{grid-template-columns:1fr 1fr}
  .lj-benefits .mg-wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lj-grid{grid-template-columns:repeat(2,1fr)}
  .lj-deps{grid-template-columns:repeat(2,1fr)}
  .lj-footgrid{grid-template-columns:1fr}
  .lj-arrow{width:32px;height:44px;font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){ .lj-slide{transition:none} }