/* ==========================================================================
   Eskartec Solutions — Upgrade layer (v3)
   Loaded AFTER css/style.css. Contains: shop, cart, account, WhatsApp,
   trust signals, testimonials, FAQ, calculator, mobile action bar.
   Brand tokens stay the same as style.css so the look stays consistent.
   ========================================================================== */

:root{
  --wa:#25D366;
  --wa-dark:#128C7E;
  --price:#0b1220;
  --sale:#e11d48;
  --star:#f59e0b;
  --radius-sm:16px;
}

/* ---------- Header additions: utility actions, cart, login ---------- */
.header-actions{display:flex;align-items:center;gap:.55rem}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:44px;padding:0 .95rem;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:800;font-size:.9rem;cursor:pointer;transition:.2s;
}
.icon-btn:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px;flex:none}
.icon-btn.solid{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 24px rgba(0,174,239,.24)}
.icon-btn.solid:hover{background:#0098d1;color:#fff}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:.72rem;font-weight:900;display:none;
  align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(247,146,30,.4);
}
.cart-count.show{display:flex}
.nav a.shop-link{color:var(--orange)}

/* Top bar upgrade */
.topbar .container{align-items:center}
.topbar a{color:#dbeafe}
.topbar a:hover{color:#fff}
.topbar-social{display:flex;gap:.55rem;align-items:center}
.topbar-social a{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);transition:.2s}
.topbar-social a:hover{background:var(--blue)}
.topbar-social svg{width:13px;height:13px;fill:currentColor}

/* ---------- Trust strip ---------- */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip .container{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.5rem 0;
}
.trust-item{display:flex;gap:.85rem;align-items:center}
.trust-item .t-ico{
  width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;
  background:linear-gradient(135deg,rgba(0,174,239,.12),rgba(155,184,60,.16));
}
.trust-item b{display:block;color:var(--dark);font-size:.97rem;line-height:1.3}
.trust-item span{color:var(--muted);font-size:.84rem;font-weight:600}

/* ---------- Floating WhatsApp + back to top ---------- */
.float-stack{
  position:fixed;right:18px;bottom:22px;z-index:2500;
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;
}
.wa-float{
  display:inline-flex;align-items:center;gap:.6rem;height:58px;padding:0 20px 0 16px;
  border-radius:999px;background:var(--wa);color:#fff;font-weight:800;font-size:.95rem;
  box-shadow:0 14px 34px rgba(37,211,102,.42);transition:.25s;white-space:nowrap;
}
.wa-float:hover{background:var(--wa-dark);color:#fff;transform:translateY(-3px);box-shadow:0 18px 42px rgba(37,211,102,.5)}
.wa-float svg{width:28px;height:28px;fill:#fff;flex:none}
.wa-float .wa-label{max-width:190px;overflow:hidden}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:waPulse 2.6s infinite;pointer-events:none;
}
.wa-float{position:relative;overflow:visible}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.to-top{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:#fff;
  border:0;cursor:pointer;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 26px rgba(11,18,32,.3);
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--blue)}

/* ---------- Mobile sticky action bar ---------- */
.mobile-bar{display:none}
@media(max-width:820px){
  .mobile-bar{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:2400;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(15,23,42,.12);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
    padding:.6rem 0 .55rem;font-size:.7rem;font-weight:800;color:var(--muted);
  }
  .mobile-bar a svg{width:21px;height:21px;fill:currentColor}
  .mobile-bar a.wa{color:var(--wa)}
  .mobile-bar a.call{color:var(--blue)}
  .mobile-bar a.shop{color:var(--orange)}
  body{padding-bottom:66px}
  .float-stack{bottom:80px;right:14px}
  .wa-float .wa-label{display:none}
  .wa-float{padding:0;width:56px;height:56px;justify-content:center}
}

/* ---------- Shop: layout ---------- */
.shop-layout{display:grid;grid-template-columns:265px 1fr;gap:2rem;align-items:start}
.shop-filters{
  background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.4rem;
  box-shadow:0 10px 30px rgba(15,23,42,.05);position:sticky;top:104px;
}
.shop-filters h4{margin:0 0 .8rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filter-group{margin-bottom:1.5rem}
.filter-group:last-child{margin-bottom:0}
.filter-btn{
  display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  padding:.6rem .85rem;border-radius:12px;border:0;background:transparent;font:inherit;font-weight:700;
  color:var(--ink);cursor:pointer;transition:.18s;margin-bottom:.2rem;font-size:.93rem;
}
.filter-btn:hover{background:var(--soft)}
.filter-btn.active{background:linear-gradient(135deg,rgba(0,174,239,.13),rgba(155,184,60,.14));color:#00728f}
.filter-btn .n{font-size:.78rem;color:var(--muted);font-weight:800}
.shop-toolbar{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.shop-search{position:relative;flex:1;min-width:230px}
.shop-search input{margin:0;padding-left:2.7rem;border-radius:999px;height:50px}
.shop-search svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:var(--muted)}
.shop-toolbar select{margin:0;width:auto;min-width:190px;border-radius:999px;height:50px;padding:0 1.1rem}
.result-count{color:var(--muted);font-weight:700;font-size:.92rem;margin-bottom:1rem}

/* ---------- Shop: product card ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;
  flex-direction:column;transition:.25s;box-shadow:0 10px 30px rgba(15,23,42,.05);position:relative;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,174,239,.35)}
.pc-media{position:relative;display:block;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:.5s}
.product-card:hover .pc-media img{transform:scale(1.06)}
.pc-tags{position:absolute;top:.8rem;left:.8rem;display:flex;flex-direction:column;gap:.35rem;z-index:2}
.tag{
  display:inline-flex;padding:.3rem .65rem;border-radius:999px;font-size:.7rem;font-weight:900;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--blue);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.tag.hot{background:var(--orange)}
.tag.save{background:var(--sale)}
.tag.new{background:var(--green)}
.pc-body{padding:1.15rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.pc-cat{font-size:.74rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:.4rem}
.pc-body h3{font-size:1.06rem;margin:0 0 .45rem;line-height:1.3}
.pc-body h3 a:hover{color:var(--blue)}
.pc-desc{color:var(--muted);font-size:.88rem;margin:0 0 .9rem;line-height:1.55}
.pc-spec{list-style:none;padding:0;margin:0 0 1rem;font-size:.84rem;color:var(--muted);font-weight:600}
.pc-spec li{position:relative;padding-left:1.1rem;margin:.22rem 0}
.pc-spec li::before{content:"·";position:absolute;left:.25rem;color:var(--green);font-weight:900;font-size:1.2rem;line-height:1}
.pc-price{margin-top:auto;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.pc-price .now{font-size:1.4rem;font-weight:900;color:var(--price);letter-spacing:-.02em}
.pc-price .was{font-size:.95rem;color:var(--muted);text-decoration:line-through;font-weight:700}
.pc-price .poa{font-size:1.05rem;font-weight:900;color:var(--blue)}
.pc-actions{display:grid;grid-template-columns:1fr auto;gap:.55rem}
.btn-add{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:999px;
  padding:.8rem 1rem;background:var(--blue);color:#fff;font:inherit;font-weight:800;font-size:.9rem;
  cursor:pointer;transition:.22s;box-shadow:0 10px 24px rgba(0,174,239,.24);
}
.btn-add:hover{background:#0098d1;transform:translateY(-2px)}
.btn-add.added{background:var(--green);box-shadow:0 10px 24px rgba(155,184,60,.3)}
.btn-wa{
  display:inline-flex;align-items:center;justify-content:center;width:46px;border-radius:999px;
  background:rgba(37,211,102,.12);color:var(--wa-dark);border:1px solid rgba(37,211,102,.3);transition:.22s;
}
.btn-wa:hover{background:var(--wa);color:#fff}
.btn-wa svg{width:20px;height:20px;fill:currentColor}
.shop-empty{text-align:center;padding:4rem 1rem;color:var(--muted)}
.shop-empty h3{color:var(--dark)}

/* ---------- Product detail ---------- */
.pd-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
.pd-gallery img.main{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px;box-shadow:var(--shadow);background:var(--soft)}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-top:.8rem}
.pd-thumbs img{aspect-ratio:1;object-fit:cover;border-radius:14px;cursor:pointer;border:2px solid transparent;transition:.2s}
.pd-thumbs img:hover,.pd-thumbs img.sel{border-color:var(--blue)}
.pd-info h1{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em}
.pd-price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:1rem 0}
.pd-price .now{font-size:2.2rem;font-weight:900;color:var(--price);letter-spacing:-.03em}
.pd-price .was{font-size:1.1rem;color:var(--muted);text-decoration:line-through;font-weight:700}
.pd-buy{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qty button{width:44px;height:52px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.qty button:hover{background:var(--soft)}
.qty input{width:52px;text-align:center;border:0;margin:0;padding:0;height:52px;font-weight:900;border-radius:0}
.pd-meta{border-top:1px solid var(--line);padding-top:1.3rem;margin-top:1.3rem;display:grid;gap:.6rem;font-size:.92rem;color:var(--muted);font-weight:600}
.pd-meta b{color:var(--dark)}
.spec-table{width:100%;border-collapse:collapse;margin-top:1rem}
.spec-table td{padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.94rem}
.spec-table td:first-child{color:var(--muted);font-weight:700;width:44%}
.spec-table td:last-child{font-weight:700;color:var(--dark)}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:2rem;align-items:start}
.cart-items{background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.05)}
.cart-row{display:grid;grid-template-columns:96px 1fr auto;gap:1.1rem;padding:1.2rem;border-bottom:1px solid var(--line);align-items:center}
.cart-row:last-child{border-bottom:0}
.cart-row img{width:96px;height:96px;object-fit:cover;border-radius:16px;background:var(--soft)}
.cart-row h4{margin:0 0 .2rem;font-size:1rem}
.cart-row .c-cat{font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.cart-row .c-unit{color:var(--muted);font-size:.87rem;font-weight:700}
.cart-right{text-align:right;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
.cart-right .line-total{font-weight:900;font-size:1.1rem;color:var(--price)}
.rm{border:0;background:transparent;color:var(--sale);font-weight:800;cursor:pointer;font-size:.84rem;padding:0}
.rm:hover{text-decoration:underline}
.qty.sm button{width:34px;height:38px;font-size:1.05rem}
.qty.sm input{width:40px;height:38px;font-size:.9rem}
.cart-summary{background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.6rem;box-shadow:0 10px 30px rgba(15,23,42,.05);position:sticky;top:104px}
.sum-row{display:flex;justify-content:space-between;padding:.6rem 0;font-weight:700;color:var(--muted)}
.sum-row.total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:1rem;font-size:1.3rem;font-weight:900;color:var(--price)}
.btn-wa-lg{
  display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:1.05rem;border-radius:999px;
  background:var(--wa);color:#fff;font-weight:900;font-size:1rem;border:0;cursor:pointer;transition:.25s;
  box-shadow:0 12px 30px rgba(37,211,102,.3);margin-top:1rem;
}
.btn-wa-lg:hover{background:var(--wa-dark);color:#fff;transform:translateY(-2px)}
.btn-wa-lg svg{width:22px;height:22px;fill:#fff}
.pay-note{margin-top:1.1rem;padding:1rem;border-radius:16px;background:var(--soft);font-size:.85rem;color:var(--muted);font-weight:600;line-height:1.6}
.pay-note b{color:var(--dark)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:4000;
  background:var(--dark);color:#fff;padding:.95rem 1.4rem;border-radius:999px;font-weight:800;font-size:.92rem;
  box-shadow:0 18px 45px rgba(11,18,32,.4);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
  display:flex;align-items:center;gap:.6rem;max-width:90vw;
}
.toast.show{transform:translate(-50%,0)}
@media(max-width:820px){.toast{bottom:80px}}

/* ---------- Account / login modal ---------- */
.modal{position:fixed;inset:0;z-index:3500;display:none;align-items:center;justify-content:center;padding:1.2rem;background:rgba(6,14,26,.72);backdrop-filter:blur(5px)}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:28px;width:min(430px,100%);padding:2rem;box-shadow:0 40px 90px rgba(6,14,26,.45);position:relative;max-height:92vh;overflow:auto}
.modal-card h2{font-size:1.6rem;margin-bottom:.3rem}
.modal-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem}
.modal-close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border-radius:50%;border:0;background:var(--soft);font-size:1.3rem;cursor:pointer;color:var(--ink)}
.modal-close:hover{background:var(--line)}
.tabs{display:flex;gap:.4rem;background:var(--soft);padding:.3rem;border-radius:999px;margin-bottom:1.4rem}
.tabs button{flex:1;border:0;background:transparent;padding:.65rem;border-radius:999px;font:inherit;font-weight:800;cursor:pointer;color:var(--muted);transition:.2s}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(15,23,42,.1)}
.form-note{font-size:.84rem;color:var(--muted);text-align:center;margin-top:1rem;line-height:1.6}
.form-note a{color:var(--blue);font-weight:800}
.divider{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.8rem;font-weight:800;margin:1.2rem 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem}
.testi{background:#fff;border:1px solid var(--line);border-radius:24px;padding:1.7rem;box-shadow:0 10px 30px rgba(15,23,42,.05);display:flex;flex-direction:column}
.stars{color:var(--star);font-size:1.05rem;letter-spacing:.1em;margin-bottom:.8rem}
.testi p{font-size:.97rem;line-height:1.7;color:var(--ink);margin:0 0 1.2rem}
.testi .who{margin-top:auto;display:flex;align-items:center;gap:.8rem}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--blue),var(--green));flex:none}
.who b{display:block;color:var(--dark);font-size:.95rem}
.who span{color:var(--muted);font-size:.83rem;font-weight:700}

/* ---------- FAQ accordion ---------- */
.faq{max-width:880px;margin:auto;display:grid;gap:.8rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 1.4rem;box-shadow:0 8px 24px rgba(15,23,42,.04);transition:.2s}
.faq details[open]{border-color:rgba(0,174,239,.4);box-shadow:0 14px 34px rgba(0,174,239,.1)}
.faq summary{cursor:pointer;padding:1.25rem 0;font-weight:800;font-size:1.02rem;color:var(--dark);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--blue);font-weight:400;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 1.35rem;color:var(--muted);line-height:1.75;font-size:.96rem;margin:0}

/* ---------- Calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:1.9rem;box-shadow:var(--shadow)}
.calc-panel label{display:block;font-weight:800;font-size:.9rem;margin-bottom:.4rem;color:var(--dark)}
.calc-panel .hint{font-size:.82rem;color:var(--muted);margin:-.7rem 0 1rem;font-weight:600}
.calc-out{background:linear-gradient(135deg,#06101f,#12233f);border-radius:28px;padding:1.9rem;color:#fff;box-shadow:var(--shadow)}
.calc-out h3{color:#fff}
.calc-metric{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:1.2rem;margin-bottom:.8rem}
.calc-metric span{display:block;color:#a9c3dd;font-weight:700;font-size:.86rem;margin-bottom:.2rem}
.calc-metric strong{font-size:1.85rem;letter-spacing:-.03em;line-height:1.1;display:block}
.calc-metric.hi strong{color:var(--orange)}
.calc-disclaimer{font-size:.8rem;color:#94a3b8;margin-top:1rem;line-height:1.6}

/* ---------- Misc ---------- */
.breadcrumb{font-size:.86rem;color:var(--muted);font-weight:700;margin-bottom:1rem}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{margin:0 .4rem;opacity:.5}
.section.tight{padding:3.4rem 0}
.pill-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:.85rem;font-weight:800;color:#fff}
.section-head.left{text-align:left;margin-left:0}
.socials a svg{width:16px;height:16px;fill:currentColor}
.socials a{transition:.22s}
.socials a:hover{background:var(--blue);transform:translateY(-2px)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:.7rem 1.2rem;z-index:5000;border-radius:0 0 12px 0;font-weight:800}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid rgba(0,174,239,.55);outline-offset:3px;border-radius:6px}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
  .shop-layout{grid-template-columns:1fr}
  .shop-filters{position:static}
  .filter-group{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:1rem}
  .filter-group h4{display:none}
  .filter-btn{flex:none;width:auto;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
  .filter-btn .n{display:none}
  .pd-wrap,.cart-layout,.calc,.testi-grid{grid-template-columns:1fr}
  .cart-summary{position:static}
  .trust-strip .container{grid-template-columns:1fr 1fr;gap:1.2rem}
  .header-actions .label-text{display:none}
  .icon-btn{padding:0 .75rem}
}
@media(max-width:620px){
  .product-grid{grid-template-columns:1fr}
  .trust-strip .container{grid-template-columns:1fr}
  .cart-row{grid-template-columns:70px 1fr;gap:.85rem}
  .cart-row img{width:70px;height:70px}
  .cart-right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
  .pd-thumbs{grid-template-columns:repeat(4,1fr)}
  .modal-card{padding:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Layout corrections (v3.1)
   Fixes header crowding at desktop widths and rebalances the hero so the
   call-to-action buttons sit above the fold on a laptop screen.
   ========================================================================== */

/* Header: keep everything on one line */
.navwrap{gap:1rem}
.brand img{width:168px;max-height:74px}
.nav{gap:.85rem;font-size:.88rem}
.nav a{white-space:nowrap}
.nav .btn{padding:.72rem 1.05rem;font-size:.86rem;white-space:nowrap}
.btn{white-space:nowrap}
.icon-btn{white-space:nowrap;height:42px}
.header-actions{gap:.45rem;flex:none}

@media(max-width:1240px){
  .nav{gap:.65rem;font-size:.84rem}
  .brand img{width:150px}
  .header-actions .label-text{display:none}
  .icon-btn{padding:0 .7rem}
}

/* Hero: tighter type so the buttons are visible without scrolling */
.hero{min-height:auto}
.hero-content{padding:4.5rem 0}
.hero h1{font-size:clamp(2.2rem,4.3vw,3.7rem);letter-spacing:-.035em;max-width:16ch}
.hero .lead{font-size:1.06rem;max-width:60ch}
.page-hero{padding:4.5rem 0}
.page-hero h1{font-size:clamp(2.1rem,4vw,3.4rem)}
.page-hero p{font-size:1.03rem}

@media(max-width:940px){
  .hero-content{padding:3.5rem 0}
  .hero h1{max-width:none}
  .navwrap{gap:.6rem}
  .brand img{width:150px;max-height:66px}
}
@media(max-width:620px){
  .brand img{width:132px;max-height:58px}
  .page-hero{padding:3.2rem 0}
}

/* Mobile menu sits below the taller header */
@media(max-width:940px){
  .nav{inset:76px 0 auto 0;max-height:calc(100vh - 76px);overflow-y:auto}
  .nav .btn{margin-top:.5rem}
}

/* ---------- Contact form ---------- */
.contact-panel label{display:block;font-weight:800;font-size:.88rem;margin-bottom:.35rem;color:var(--dark)}
.contact-panel input,.contact-panel select,.contact-panel textarea{margin-bottom:1.1rem}
.contact-panel textarea{min-height:120px}
.form-status{padding:1.1rem 1.25rem;border-radius:18px;margin-bottom:1.4rem;font-size:.94rem;line-height:1.6}
.form-status.good{background:rgba(155,184,60,.14);border:1px solid rgba(155,184,60,.4);color:#4a6410}
.form-status.bad{background:rgba(225,29,72,.09);border:1px solid rgba(225,29,72,.3);color:#9f1239}
.form-status a{font-weight:800;text-decoration:underline}

/* ---------- Polish fixes (v3.2) ---------- */
/* The quote button should never get the nav underline treatment */
.nav a.btn::after{display:none!important}

/* Branch cards sit inside a half-width column on the contact page */
.contact-branches{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.contact-branches .branch-card{padding:1rem;border-radius:18px}
.contact-branches .branch-card .icon{width:38px;height:38px;font-size:1.1rem;margin-bottom:0;border-radius:12px}
.contact-branches .branch-card b{font-size:.92rem}
.contact-branches .branch-card span{font-size:.8rem;color:var(--muted)}
@media(max-width:620px){.contact-branches{grid-template-columns:1fr}}

/* ---------- Float / mobile-bar de-duplication (v3.3) ----------
   On mobile the bottom action bar already exposes WhatsApp permanently, so the
   floating bubble is redundant there and was overlapping the product card
   buttons. Desktop keeps the bubble; mobile keeps the bar. */
@media(max-width:820px){
  .wa-float{display:none}
  .float-stack{bottom:74px;right:12px;gap:0}
  .to-top{width:42px;height:42px;background:rgba(11,18,32,.72);backdrop-filter:blur(6px)}
}

/* ==========================================================================
   v3.4 — Top bar removed from the header and relocated to the footer.
   With that strip gone the header is the only bar at the top of the page, so
   it returns to a standard, comfortable size rather than the compressed one
   it needed when it was sharing space.
   ========================================================================== */

/* ---------- Header back to standard size ---------- */
.navwrap{padding:.85rem 0;gap:1.4rem}
.brand img{width:200px;max-height:90px}
.nav{gap:1.05rem;font-size:.96rem}
.nav .btn{padding:.85rem 1.3rem;font-size:.93rem}
.icon-btn{height:48px;padding:0 1.1rem;font-size:.94rem}
.icon-btn svg{width:20px;height:20px}
.header-actions{gap:.55rem}
.hamb{font-size:2.1rem}

/* Step down gently on narrower laptops instead of jumping straight to mobile */
@media(max-width:1300px){
  .navwrap{gap:1rem}
  .brand img{width:180px;max-height:82px}
  .nav{gap:.8rem;font-size:.9rem}
  .nav .btn{padding:.78rem 1.1rem;font-size:.88rem}
  .icon-btn{height:45px;padding:0 .9rem;font-size:.9rem}
}
@media(max-width:1150px){
  .brand img{width:162px;max-height:74px}
  .nav{gap:.62rem;font-size:.85rem}
  .header-actions .label-text{display:none}
  .icon-btn{padding:0 .8rem}
}

/* Mobile drawer now anchors to the header itself, so it always sits directly
   beneath it whatever the header height is */
@media(max-width:940px){
  .site-header{position:sticky}
  .nav{position:absolute;top:100%;left:0;right:0;inset:auto;
       max-height:calc(100vh - 100%);overflow-y:auto}
  .navwrap{padding:.7rem 0;gap:.7rem}
  .brand img{width:158px;max-height:70px}
}
@media(max-width:620px){
  .brand img{width:138px;max-height:62px}
  .icon-btn{height:42px;padding:0 .7rem}
}

/* ---------- Footer bar (moved down from the header) ---------- */
.footer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.fb-tag{color:#94a3b8;font-size:.92rem;font-weight:700;letter-spacing:.01em}
.fb-contact{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.fb-contact a{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;font-weight:800;font-size:.92rem;transition:.22s;white-space:nowrap;
}
.fb-contact a svg{width:16px;height:16px;fill:currentColor;flex:none}
.fb-contact a:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}
.fb-contact a.fb-wa{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.4);color:#7ff0ae}
.fb-contact a.fb-wa:hover{background:var(--wa);color:#fff;border-color:var(--wa)}

@media(max-width:760px){
  .footer-bar{flex-direction:column;align-items:flex-start;gap:1rem}
  .fb-tag{font-size:.86rem}
  .fb-contact{width:100%}
  .fb-contact a{flex:1;justify-content:center;font-size:.88rem;padding:.7rem .8rem}
}

/* ---------- v3.5 mobile drawer correction ----------
   The previous rule declared `inset:auto` after top/left/right, and the
   shorthand reset all of them, so the drawer collapsed to a narrow box pinned
   to the top of the viewport. Longhands only, declared after any shorthand. */
@media(max-width:940px){
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    bottom:auto;
    width:auto;
    max-height:78vh;
    overflow-y:auto;
    background:#fff;
    padding:1.1rem 4vw 1.4rem;
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav a{padding:.35rem 0}
}

/* ---------- v3.6 ----------
   The branch card grid has been removed from the homepage, so "Why Choose
   Eskartec?" now runs full width. Two columns keeps the list from becoming a
   single tall stack. */
.why-choose{max-width:1000px}
.why-choose h2{margin-bottom:1.2rem}
.why-choose .check-list{columns:2;column-gap:2.5rem}
.why-choose .check-list li{break-inside:avoid;margin-bottom:.85rem}
@media(max-width:780px){
  .why-choose .check-list{columns:1}
}

/* ==========================================================================
   v3.7 — Header sizing
   --------------------------------------------------------------------------
   The logo was being squeezed by flexbox: `width:200px` was set, but because
   the nav row overflowed the 1180px container the image shrank to about 156px
   and the header collapsed to 81px. Two fixes:

     1. `.brand{flex:none}` so the logo renders at the size it is given
        instead of absorbing the overflow.
     2. The header gets its own wider container, so a logo + eight links +
        three buttons has room to sit on one comfortable row.

   TO ADJUST THE HEADER HEIGHT, change --logo-w below and nothing else.
   Header height = (--logo-w / 2.94) + twice --header-pad.
     --logo-w:200px  ->  about 92px tall
     --logo-w:186px  ->  about 87px tall   (current)
     --logo-w:170px  ->  about 82px tall
     --logo-w:150px  ->  about 75px tall
   ========================================================================== */

:root{
  --logo-w:186px;
  --header-pad:.8rem;
}

/* Header spans a wider container than page content so the row never crowds */
.site-header .container{width:min(1360px,94vw)}

.navwrap{padding:var(--header-pad) 0;gap:1.5rem;flex-wrap:nowrap}
.brand{flex:none}
.brand img{width:var(--logo-w);height:auto;max-height:none}
.nav{gap:1.05rem;font-size:.95rem;flex:none}
.nav .btn{padding:.82rem 1.25rem;font-size:.92rem}
.header-actions{flex:none;gap:.5rem}
.icon-btn{height:46px;padding:0 1.05rem;font-size:.93rem}

@media(max-width:1340px){
  :root{--logo-w:168px}
  .navwrap{gap:1.1rem}
  .nav{gap:.82rem;font-size:.9rem}
  .nav .btn{padding:.75rem 1.05rem;font-size:.87rem}
  .icon-btn{height:44px;padding:0 .85rem;font-size:.89rem}
}
@media(max-width:1180px){
  :root{--logo-w:156px}
  .nav{gap:.62rem;font-size:.85rem}
  .nav .btn{padding:.7rem .9rem;font-size:.83rem}
  .header-actions .label-text{display:none}
  .icon-btn{padding:0 .78rem}
}
@media(max-width:940px){
  :root{--logo-w:172px;--header-pad:.7rem}
  .navwrap{gap:.8rem}
  .nav{font-size:1rem;flex:auto}
}
@media(max-width:620px){
  :root{--logo-w:150px}
}