/* ===== Qtap — тема в стилі qtap.in.ua: Lato + Poppins, мідь #CD7F32, синій #389CC4, білий фон ===== */
:root {
  --porcelain: #fff; --white: #fff; --stone: #f5f5f5; --stone-2: #eee; --line: #e5e5e5;
  --slate: #2d2a2a; --slate-2: #555; --muted: #777;
  --copper: #CD7F32; --copper-d: #b56d27; --blue: #389CC4; --blue-d: #2c85aa;
  --brass: #CD7F32; --brass-soft: #fbf1e6; --ok: #2e8b57;
  --r: 3px; --r-lg: 4px;
  --font: "Lato", "Segoe UI", system-ui, sans-serif;
  --head: "Poppins", "Lato", system-ui, sans-serif;
}
body { font: 400 14px/1.65 var(--font); color: #777; background: #fff; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; color: #2d2a2a; letter-spacing: 0; }
h1 { font-size: clamp(26px, 3.2vw, 38px); } h2 { font-size: clamp(22px, 2.4vw, 28px); } h3 { font-size: 16px; }
.center { text-align: center; }

/* кнопки */
.btn { border-radius: 3px; font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 13px; }
.btn-dark { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn-dark:hover { background: var(--copper-d); border-color: var(--copper-d); }
.btn-line { background: #fff; border: 2px solid #e5e5e5; color: #2d2a2a; }
.btn-line:hover { border-color: var(--copper); color: var(--copper); }
.card .add { background: var(--blue); color: #fff; border-radius: 3px; }
.card .add:hover { background: var(--blue-d); }

/* верхня смуга й шапка */
.topline { background: #f5f5f5; color: #777; font-size: 12px; border-bottom: 1px solid #eee; }
.topline a { color: #555; } .topline a:hover { color: var(--copper); }
.hdr { background: #fff; border-bottom: 0; box-shadow: none; }
.hdr-row { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; flex-direction: column; line-height: 1; }
.logo-q { font-family: var(--head); font-weight: 700; font-size: 34px; color: var(--copper); letter-spacing: -.5px; text-transform: none; }
.logo-sub { font-size: 10px; color: #999; letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.hdr-search { flex: 1; position: relative; display: flex; max-width: 640px; border: 2px solid #e5e5e5; border-radius: 3px; background: #fff; }
.hdr-search > .ic { display: none; }
.hdr-search input { flex: 1; border: 0; background: transparent; padding: 11px 14px; outline: 0; min-width: 0; }
.hdr-search-go { border: 0; background: var(--copper); color: #fff; width: 48px; cursor: pointer; display: grid; place-items: center; }
.hdr-search-go .ic { width: 18px; height: 18px; }
.hdr-search kbd { display: none; }
.hdr-phone { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-weight: 600; color: #2d2a2a; font-size: 14px; line-height: 1.3; }
.hdr-phone .ic { width: 22px; height: 22px; color: var(--copper); }
.hdr-phone a { color: #2d2a2a; } .hdr-phone a:hover { color: var(--copper); }
.navbar { border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fff; }
.navbar-row { display: flex; align-items: stretch; gap: 8px; min-height: 48px; }
.mainnav-all { display: flex; align-items: center; gap: 10px; background: var(--copper); color: #fff; border: 0; padding: 0 22px; font-family: var(--head); font-weight: 600; font-size: 13px; letter-spacing: .02em; cursor: pointer; }
.mainnav-all:hover { background: var(--copper-d); }
.mainnav { display: flex; flex: 1; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mainnav a { padding: 0 12px; line-height: 48px; white-space: nowrap; font-family: var(--head); font-weight: 500; font-size: 13px; color: #2d2a2a; text-transform: uppercase; }
.mainnav a:hover { color: var(--copper); }
.mainnav a.nav-sale { color: #c0392b; }
.navbar-link { align-self: center; color: #2d2a2a; font-family: var(--head); font-weight: 500; font-size: 13px; text-transform: uppercase; white-space: nowrap; }
.navbar-link:hover { color: var(--copper); }
.mega { border-top: 3px solid var(--copper); background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.mega-root { color: var(--copper); font-family: var(--head); }
@media (max-width: 900px) {
  .hdr-row { gap: 10px; } .logo-q { font-size: 28px; }
  .hdr-search { display: none; } .hdr-search.open { display: flex; position: absolute; left: 12px; right: 12px; top: 100%; z-index: 20; max-width: none; }
  .navbar { display: none; }
}

/* слайдер */
.home-slider { position: relative; background: linear-gradient(100deg, #fbf1e6 0%, #f4f8fa 100%); overflow: hidden; }
.slides { position: relative; min-height: 400px; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s; }
.slide.on { opacity: 1; visibility: visible; position: relative; }
.slide-in { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px; min-height: 400px; padding-top: 28px; padding-bottom: 40px; }
.slide-eyebrow { color: var(--copper); font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin: 0 0 10px; }
.slide-text h1, .slide-text h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin-bottom: 14px; }
.slide-lead { font-size: 16px; max-width: 520px; margin-bottom: 22px; color: #555; }
.slide-img { display: grid; place-items: center; }
.slide-img img { max-height: 340px; width: auto; max-width: 100%; mix-blend-mode: multiply; object-fit: contain; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: #d8cbbd; cursor: pointer; padding: 0; }
.dot.on { background: var(--copper); }
@media (max-width: 760px) { .slide-in { grid-template-columns: 1fr; text-align: left; } .slide-img img { max-height: 200px; } .slides { min-height: 460px; } .slide-in { min-height: 460px; } }

/* плитки категорій */
.home-intro { padding-top: 44px; }
.home-intro .center { margin-bottom: 8px; }
.cats-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.cats-tiles .cat { display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 3px; background: #fff; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.cats-tiles .cat:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); border-color: var(--copper); }
.cats-tiles .cat-img { aspect-ratio: 1 / .8; display: grid; place-items: center; background: #fff; padding: 12px; }
.cats-tiles .cat-img img { max-height: 100%; width: auto; object-fit: contain; }
.cats-tiles .cat-text { text-align: center; padding: 10px 8px 16px; }
.cats-tiles .cat-name { display: block; font-family: var(--head); font-weight: 600; color: #2d2a2a; text-transform: uppercase; font-size: 13px; }
.cats-tiles .cat-cnt { font-size: 12px; color: #999; }
@media (max-width: 900px) { .cats-tiles { grid-template-columns: repeat(2, 1fr); } }

/* популярні товари */
.popular { padding-top: 24px; }
.tab-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 26px; margin: 14px 0 26px; border-bottom: 1px solid #eee; }
.tab { background: none; border: 0; padding: 10px 2px; font-family: var(--head); font-weight: 600; font-size: 14px; color: #777; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on, .tab:hover { color: #2d2a2a; border-bottom-color: var(--copper); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
.tab-pane .center { margin-top: 24px; }

/* картка товару */
.card { border: 1px solid #eee; border-radius: 3px; background: #fff; box-shadow: none; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.card-img { background: #fff; }
.card-title { font: 500 14px/1.4 var(--head); color: #333; }
.card-title a:hover { color: var(--copper); }
.card-brand { color: #999; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; }
.price-now { font-family: var(--head); font-weight: 700; font-size: 20px; color: var(--copper); }
.price-now.sale { color: var(--copper); }
.price s { color: #aaa; }
.flag { background: #e74c3c; color: #fff; border-radius: 3px; font-family: var(--head); font-weight: 600; }
.stock.st-ok { color: var(--ok); } .stock.st-later { color: var(--blue-d); } .stock.st-no { color: #aaa; }

/* підвал */
.ftr { background: #2d2a2a; color: #bbb; }
.ftr h3 { color: #fff; font-family: var(--head); text-transform: uppercase; font-size: 14px; }
.ftr a { color: #bbb; } .ftr a:hover { color: var(--copper); }
.ftr .logo-q { color: var(--copper); }
.ftr-bottom { border-top: 1px solid #444; color: #888; }

/* плаваючі месенджери */
.float-msg { position: fixed; left: 16px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.fm { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.fm .ic { width: 22px; height: 22px; stroke: #fff; fill: none; }
.fm-tg { background: #29a9eb; } .fm-viber { background: #7360f2; }
.assist-fab { background: var(--copper); border-radius: 30px; }
.eyebrow, .block-head .more { color: var(--copper); }
.block-head h2 { font-size: 24px; }
.promo-ic { color: var(--copper); }
.topline .phones, .topline .phones a { color: #2d2a2a; }
.topline .phones a:hover { color: var(--copper); text-decoration: none; }
.topline-row { justify-content: center; gap: 28px; }
.card-img img, .slide-img img, .cat-img img { color: transparent; font-size: 0; }
.seg-head h1, .wrap h1 { font-family: var(--head); font-weight: 600; letter-spacing: 0; }
.card-body { padding: 12px 14px 14px; }
.card-img { border-radius: 0; }
.card-img img { padding: 8%; }
.float-msg { bottom: 84px; }
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; background: #2d2a2a; color: #eee; padding: 14px 16px; border-radius: 4px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.cookie-bar p { margin: 0; flex: 1 1 260px; font-size: 13px; }
.cookie-bar div { display: flex; gap: 8px; }