/* Taisyk.lt website UI kit — layout + component styles (tokens come from colors_and_type.css) */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--white);font-family:var(--font);color:var(--ink)}
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'opsz' 24;vertical-align:middle}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

.page{width:100%;max-width:1920px;margin:0 auto;background:var(--white);overflow:hidden}
.wrap{padding-left:clamp(40px,7.2vw,130px);padding-right:clamp(40px,7.2vw,130px)}

/* ---------- buttons ---------- */
.btn{height:48px;border-radius:var(--button-border-radius,var(--r-sm));text-transform:var(--button-text-transform,none);padding:0 24px;font:var(--w-medium) 16px/1 var(--font);
     display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn--orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn--orange:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--teal:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn--ghost{background:#fff;color:var(--teal);border-color:var(--teal)}
.btn--ghost:hover{background:var(--teal-tint)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--bg-soft)}
.btn[disabled]{background:var(--fg-muted);border-color:var(--fg-muted);color:#fff;cursor:default}
.link{display:inline-flex;align-items:center;gap:8px;font:var(--w-medium) 16px/1 var(--font);color:var(--teal);transition:gap .15s}
.link:hover{gap:12px}
.link--orange{color:var(--orange)}

/* ---------- top bar ---------- */
.topstrip{height:52px;display:flex;align-items:center;justify-content:space-between;font:var(--w-regular) 14px/1 var(--font);color:var(--fg-1)}
.topstrip .grp{display:flex;align-items:center;gap:32px}
.topstrip .cell{display:flex;align-items:center;gap:8px;color:var(--fg-1)}
.topstrip .cell .material-symbols-rounded{font-size:18px;color:var(--fg-3)}
.nav{height:80px;display:flex;align-items:center;gap:40px;border-top:1px solid var(--line-cool)}
.brand{display:flex;align-items:center;gap:9px}
.brand img{height:40px}
.brand .wm{font:var(--w-bold) 26px/1 var(--font);letter-spacing:1px;color:var(--ink)}
.nav .links{display:flex;gap:32px;margin-left:8px}
.nav .links a{font:var(--w-medium) 16px/1 var(--font);color:var(--ink);position:relative;padding:4px 0;transition:color .15s}
.nav .links a:hover,.nav .links a.active{color:var(--teal)}
.nav .tools{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav .tools .ic{color:#1d1d1f;font-size:24px;position:relative;display:flex}
.nav .tools .ic:hover{color:var(--teal)}
.badge{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:var(--orange);color:#fff;font:var(--w-bold) 10px/16px var(--font);text-align:center;padding:0 3px}

/* ---------- hero ---------- */
.hero{position:relative;height:380px;background:linear-gradient(90deg,#FFF1EA 0%,#FBEFE9 28%,#EAF7F4 72%,#E7F6F6 100%);overflow:hidden}
.hero .inner{position:relative;z-index:2;padding-top:64px;max-width:520px}
.hero h1{font:var(--w-medium) 48px/1.15 var(--font);color:var(--ink);letter-spacing:-0.01em;margin:0 0 16px}
.hero p{font:var(--w-regular) 16px/1.6 var(--font);color:var(--fg-1);margin:0 0 28px;max-width:420px}
.hero .cta{display:flex;gap:16px}
.hero .collage{position:absolute;right:40px;top:0;bottom:0;width:780px;z-index:1}
.hero .collage img{position:absolute;filter:drop-shadow(0 18px 30px rgba(20,40,60,.16))}

/* ---------- section ---------- */
.section{padding:72px 0 8px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.sec-head h2{font:var(--w-medium) 36px/1.2 var(--font);color:var(--ink);margin:0}
/* legacy styles.css ships `.products-section h2{font-size:20px}` in a later
   sheet — keep design section headings at design size inside those wrappers */
.products-section .sec-head h2{font-size:36px}

/* ---------- service grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:var(--bg-soft);border-radius:var(--r-lg);padding:28px 28px 30px;transition:box-shadow .18s}
.svc:hover{box-shadow:var(--shadow-card)}
.svc .ic{font-size:46px;color:var(--ink);font-variation-settings:'wght' 250;height:64px;display:flex;align-items:center}
.svc h3{font:var(--w-medium) 20px/1.35 var(--font);color:var(--ink);margin:16px 0 8px}
.svc p{font:var(--w-regular) 14px/1.55 var(--font);color:var(--fg-2);margin:0 0 18px;min-height:66px}

/* ---------- product cards ---------- */
.prod-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:16px;position:relative;transition:transform .18s,box-shadow .18s}
.prod:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(120,120,120,.16)}
.prod .tag{position:absolute;left:16px;top:16px;height:32px;border-radius:var(--r-sm);background:var(--orange);color:#fff;font:var(--w-bold) 16px/32px var(--font);padding:0 10px}
.prod .fav{position:absolute;right:14px;top:14px;color:var(--teal);font-size:24px;cursor:pointer}
.prod .ph{height:170px;display:flex;align-items:center;justify-content:center;margin:6px 0 14px}
.prod .ph img{max-height:170px;max-width:90%}
.prod .name{font:var(--w-bold) 16px/1.4 var(--font);color:var(--ink)}
.prod .brand{font:var(--w-regular) 14px/1.5 var(--font);color:var(--fg-2);margin-top:6px}
.prod .spec{font:var(--w-regular) 12px/1.5 var(--font);color:var(--fg-3)}
.prod .prices{display:flex;gap:8px;align-items:baseline;margin-top:12px}
.prod .sale{font:var(--w-bold) 18px/1 var(--font);color:var(--orange)}
.prod .plain{font:var(--w-bold) 18px/1 var(--font);color:var(--ink)}
.prod .strike{font:var(--w-regular) 16px/1 var(--font);color:var(--fg-muted);text-decoration:line-through}

/* ---------- promo banners ---------- */
.promo{border-radius:var(--r-xl);overflow:hidden;display:flex;align-items:center;position:relative;min-height:230px}
.promo--teal{background:var(--teal)}
.promo--orange{background:linear-gradient(90deg,#FF7415 0%,#FF8A2B 55%,#FDB257 100%)}
.promo .device{width:300px;flex:none;display:flex;align-items:center;justify-content:center;align-self:stretch}
.promo .device img{max-height:230px}
.promo .txt{padding:0 48px}
.promo h3{font:var(--w-medium) 32px/1.25 var(--font);color:#fff;margin:0 0 12px}
.promo p{font:var(--w-regular) 16px/1.5 var(--font);color:rgba(255,255,255,.92);margin:0;max-width:430px}
.promo .act{margin-left:auto;padding-right:48px}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:relative}
.rev .q{position:absolute;right:24px;top:18px;font:var(--w-bold) 40px/1 var(--font);letter-spacing:-3px}
.rev .name{font:var(--w-bold) 16px/1.4 var(--font);color:var(--ink);margin-bottom:10px}
.rev p{font:var(--w-regular) 14px/1.6 var(--font);color:var(--fg-2);margin:0}

/* ---------- footer ---------- */
.footer{background:var(--bg-soft);padding:56px 0 28px;margin-top:72px}
.footer .cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:24px;padding-bottom:40px}
.footer .brand{margin-bottom:26px}
.footer h4{font:var(--w-medium) 18px/1.5 var(--font);color:var(--ink);margin:0 0 18px}
.footer .li{display:flex;align-items:center;gap:8px;font:var(--w-regular) 16px/1 var(--font);color:var(--fg-1);margin-bottom:12px}
.footer .li .material-symbols-rounded{font-size:18px;color:var(--fg-3)}
.footer a.li:hover{color:var(--teal)}
.footer .award{width:120px;height:120px;border-radius:var(--r-lg);object-fit:cover}
.footer .bar{border-top:1px solid var(--line-2);padding-top:24px;display:flex;align-items:center;justify-content:space-between}
.footer .social{display:flex;gap:16px}
.footer .social .material-symbols-rounded{color:var(--fg-1);font-size:20px}
.footer .legal{font:var(--w-regular) 16px/1 var(--font);color:var(--ink)}

/* ---------- login popup ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,23,35,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{width:420px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-float);padding:32px}
.modal h3{font:var(--w-medium) 30px/1.2 var(--font);margin:0 0 6px;color:var(--ink)}
.modal .sub{font:var(--w-regular) 14px/1.5 var(--font);color:var(--fg-2);margin:0 0 24px}
.modal .close{position:absolute;color:var(--fg-3);font-size:24px}
.field{height:48px;border:1px solid var(--line-2);border-radius:var(--input-border-radius,var(--r-sm));padding:0 14px;display:flex;align-items:center;width:100%;margin-bottom:14px;font:var(--w-regular) 16px/1 var(--font);color:var(--ink)}
.field:focus{outline:none;border-color:var(--teal)}
.field::placeholder{color:var(--fg-muted)}
.modal .row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px}
.modal .row a{font:var(--w-medium) 14px/1 var(--font);color:var(--teal)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:var(--r-sm);font:var(--w-medium) 15px/1 var(--font);z-index:60;box-shadow:var(--shadow-float)}