/* ============================================================
   MIT CLIMA PLUS — strat de DESKTOP
   ------------------------------------------------------------
   Preia identitatea vizuală a platformei de documentație:
   Big Caslon CC + Jost, paletarul albastru / roșu / auriu,
   fond #F6F6F6, carduri albe cu margine fină, butoane pastilă,
   antet alb lipit sus și navigație pe orizontală.

   Se aplică DOAR de la 1000px în sus. Sub 1000px nu schimbă
   nimic — pe telefon aplicația rămâne exact cum era.
   ============================================================ */

@font-face{
  font-family:'Jost MC';
  src:url('../assets/fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Big Caslon CC';
  src:local('Big Caslon Medium'),local('BigCaslon-Medium'),
      url('../assets/fonts/BigCaslon.ttf') format('truetype');
  font-weight:400 600;font-style:normal;font-display:swap;
}

@media (min-width:1000px){

  /* ---------- jetoanele de design ale documentației ---------- */
  :root{
    --blue-deep:#006BA6;
    --blue:#0496FF;
    --gold:#FFBC42;
    --red:#F1293F;
    --red-dark:#B80C09;
    --b50:#E3F2FD; --b100:#BBDEFB; --b700:#1976D2; --b800:#1565C0; --b900:#0D47A1;

    --ink:#313131; --navy:#313131; --grey:#313131;
    --mut:#747474;
    --bg:#F6F6F6; --white:#FFFFFF;
    --line:#E4EAF2;
    --green:#1B7A3D; --amber:#B07600;

    --radius:16px;
    --shadow:0 8px 24px rgba(13,71,161,.08);
    --shadow-soft:0 2px 10px rgba(13,71,161,.06);
    --ease:cubic-bezier(.2,.7,.3,1);

    --font-display:'Big Caslon CC','Big Caslon',Georgia,'Times New Roman',serif;
    --font-title:'Big Caslon CC','Big Caslon',Georgia,serif;

    --maxw:100%;
    --wrap:1240px;

    /* fără sticlă pe desktop — antetul e alb, plin */
    --glass-bg:#FFFFFF;
    --glass-blur:none;
    --glass-edge:none;
    --glass-shadow:0 1px 0 rgba(13,71,161,.03);
  }

  body{
    font-family:'Jost MC','Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
    background:var(--bg); color:var(--ink); font-size:15.5px; line-height:1.5;
    display:block; -webkit-font-smoothing:antialiased;
  }
  #app{ max-width:none; background:var(--bg); box-shadow:none; overflow:visible }
  #app::before{ display:none }          /* câmpul ambiental de sub sticlă nu-și mai are rostul */
  h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:.005em }

  /* ---------- antet alb, lipit sus ---------- */
  .hdr{
    order:-2;
    background:var(--white); backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom:1px solid #E9EDF3; box-shadow:0 1px 0 rgba(13,71,161,.03);
    padding:0; min-height:72px;
    display:flex; align-items:center; gap:24px;
    position:sticky; top:0; z-index:50;
    padding-left:max(32px,calc((100vw - var(--wrap))/2));
    padding-right:max(32px,calc((100vw - var(--wrap))/2));
  }
  .hdr h2{ font-size:26px; color:var(--ink) }
  .hdr .sub{ font-size:12.5px; color:var(--mut); letter-spacing:.1em; text-transform:uppercase }
  .hdr .logo{ font-size:21px }
  .hdr .back{
    width:38px; height:38px; border-radius:50%; background:var(--b50); color:var(--b800);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .hdr .back::before{ margin:0 2px 3px 0 }
  .hdrcart,.hdracct{ width:38px; height:38px; background:var(--b50); color:var(--b800) }
  .hdrcart:hover,.hdracct:hover{ background:var(--b100) }
  .hdrcart-badge{ background:var(--red) }
  .rolepill{ background:var(--b50); color:var(--b800) }

  /* ---------- navigația: din capsulă de jos în bară de sus ---------- */
  .offline-banner{ order:-1 }
  .bnav-wrap{
    order:0; position:static; transform:none; width:auto; left:auto; right:auto; bottom:auto;
    background:var(--white); border-bottom:1px solid #E9EDF3;
    padding:10px max(32px,calc((100vw - var(--wrap))/2));
    gap:10px; align-items:center;
  }
  .screen:has(.ctabar) .bnav-wrap{ position:static; margin:0 }
  .bnav{
    flex:0 1 auto; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none; border-radius:0; display:flex; gap:6px; padding:0; min-width:0;
  }
  .bnav .bitem,.bnav button,.bnav a{
    flex:0 0 auto; border-radius:999px; padding:9px 18px; font-size:15px; font-weight:500;
    color:var(--ink); background:transparent; height:auto;
    transition:background .18s var(--ease), color .18s;
  }
  .bnav .bitem:hover,.bnav button:hover{ background:var(--b50); color:var(--b800) }
  .bnav .bitem.on,.bnav button.on,.bnav .on{ background:var(--b800); color:#fff }
  .bnav .bitem.on:hover,.bnav button.on:hover{ background:var(--b900) }
  .bnav svg{ display:none }              /* pe desktop rămâne doar textul, ca în documentație */
  /* căutarea rămâne o pastilă, și în starea „extinsă" de pe telefon */
  .bsearch,.bsearch.wide{
    margin-left:auto; flex:0 0 auto; background:var(--b50); color:var(--b800);
    border-radius:999px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    width:auto; min-width:0; padding:9px 20px; font-size:15px; font-weight:500;
  }
  .bsearch:hover,.bsearch.wide:hover{ background:var(--b100) }
  /* iar tab-urile nu se micșorează — pe desktop e loc pentru toate */
  .bnav,.bnav.mini{ flex:0 1 auto; min-width:0 }
  .screen:has(.bnav-wrap) .scroll{ padding-bottom:0 }

  /* ---------- coloana de conținut ---------- */
  .scroll{ order:1; overflow:visible }
  .pad{
    padding-left:max(32px,calc((100vw - var(--wrap))/2));
    padding-right:max(32px,calc((100vw - var(--wrap))/2));
    padding-top:26px; padding-bottom:26px;
  }
  .chiprow{
    flex-wrap:wrap; overflow:visible;
    padding-left:max(32px,calc((100vw - var(--wrap))/2));
    padding-right:max(32px,calc((100vw - var(--wrap))/2));
  }
  .sect{ font-family:var(--font-display); font-size:26px; color:var(--ink) }

  /* ---------- carduri ---------- */
  .card{
    background:var(--white); border-radius:var(--radius); border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
    transition:box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s;
  }
  @media (hover:hover){
    .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--b100) }
  }

  /* ---------- butoane, în stilul documentației ---------- */
  .btn{
    border-radius:999px; font-weight:600; font-size:14.5px; letter-spacing:.02em;
    padding:11px 22px; text-transform:none;
    background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(241,41,63,.25);
    transition:background .18s var(--ease), transform .12s var(--ease);
  }
  .btn:hover{ background:var(--red-dark) }
  .btn:active{ transform:translateY(1px) }
  .btn.sec{
    background:var(--white); color:var(--b800); border:1.5px solid var(--b100); box-shadow:none;
  }
  .btn.sec:hover{ background:var(--b50); border-color:var(--blue) }
  .btn.sm{ padding:9px 18px; font-size:13.5px }
  .fchip{
    border-radius:999px; font-size:13px; font-weight:600; padding:7px 16px;
    background:var(--white); color:var(--b800); border:1px solid var(--line);
  }
  .fchip:hover{ background:var(--b50); border-color:var(--b100) }
  .fchip.on{ background:var(--b800); color:#fff; border-color:var(--b800) }

  /* ---------- căutare, ca pe pagina de documentație ---------- */
  .searchbox{
    max-width:680px; height:58px; border-radius:999px; border:1.5px solid var(--b100);
    background:var(--white); box-shadow:var(--shadow); padding:0 22px;
  }
  .searchbox input{ font-size:16.5px }
  .searchbox svg circle,.searchbox svg path{ stroke:var(--b700) }

  /* ---------- acasă ---------- */
  .gcat{ grid-template-columns:repeat(4,1fr)!important; gap:14px!important }
  .promo-hero{ border-radius:var(--radius); padding:38px 40px }
  .promo-hero h3{ font-family:var(--font-display); font-size:48px }

  /* ---------- catalog: grilă, nu o coloană ---------- */
  #catlist{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:14px; align-items:start;
  }
  #catlist>.card{ margin-bottom:0!important }
  #catlist>.empty,#catlist>#loadmore,#catlist>.btn{ grid-column:1/-1; justify-self:start }

  /* ---------- pagina de produs: două coloane ---------- */
  .scroll:has(>.phero){
    display:grid; grid-template-columns:minmax(340px,40%) minmax(0,1fr); column-gap:48px;
    align-content:start;
    padding:28px max(32px,calc((100vw - var(--wrap))/2)) 48px;
  }
  .scroll:has(>.phero)>.phero{
    position:sticky; top:96px; border-radius:var(--radius); border:1px solid var(--line);
    background:var(--white); aspect-ratio:1000/1100;
  }
  .scroll:has(>.phero)>.pad{ padding:0 }
  .acc{ border-color:var(--line) }
  .acc-h{ font-family:var(--font-display); font-size:20px; color:var(--ink) }

  /* bara de acțiune stă la baza coloanei, nu lipită de fereastră */
  .ctabar{
    order:2; background:var(--white); border-top:1px solid #E9EDF3;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:14px max(32px,calc((100vw - var(--wrap))/2));
    justify-content:flex-end; gap:14px;
  }
  .ctabar .btn{ max-width:320px }

  .bubble{ max-width:56% }
  .acc-b .row{ max-width:860px }
  .muted{ color:var(--mut) }
}