:root {
  --blue: #1c49c2;
  --blue-dark: #12308a;
  --blue-light: #e6edfb;
  --red: #d11f00;
  --orange: #f57c00;
  --yellow: #ffd23f;
  --green-strip: #dff5c0;
  --pink: #c4207a;
  --text: #1a1a1a;
  --muted: #5a5f66;
  --line: #d9dce1;
  --gray-bg: #eef0f3;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, Verdana, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; }
img, svg { display: block; }
h1, h2, h3, h4 { margin: 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
main.container { min-height: 60vh; }
.muted { color: var(--muted); font-size: 12px; }
.center { text-align: center; }

/* ---------- Кнопки ---------- */
.btn-blue, .btn-dark, .btn-pink, .btn-white, .btn-orange, .btn-outline-blue, .btn-white-outline, .btn-outline-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; border-radius: var(--radius); padding: 10px 18px; font-size: 14px; transition: .15s;
}
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-dark { background: #1c2b8f; color: #fff; padding: 8px 14px; font-size: 13px; }
.btn-dark:hover { background: #0f1a66; }
.btn-pink { background: var(--pink); color: #fff; padding: 8px 14px; font-size: 13px; }
.btn-white { background: #fff; color: var(--blue); border: 1px solid #fff; }
.btn-white-outline { background: #fff; border: 1px solid var(--line); padding: 8px 16px; font-size: 13px; }
.btn-white-outline:hover { border-color: var(--text); }
.btn-orange { background: var(--orange); color: #fff; width: 100%; padding: 13px; font-size: 15px; border-radius: 24px; }
.btn-orange:hover { background: #e06c00; }
.btn-outline-blue { border: 2px solid var(--blue); color: var(--blue); width: 100%; padding: 11px; border-radius: 24px; }
.btn-outline-blue:hover { background: var(--blue-light); }
.btn-outline-red { border: 1px solid var(--red); color: var(--red); width: 100%; padding: 7px; font-size: 13px; }
.btn-outline-red:hover { background: #fff2ef; }
.link-btn { color: var(--blue); text-decoration: underline; font-size: 13px; }

/* ---------- Шапка ---------- */
.sticky-header { position: sticky; top: 0; z-index: 50; background: var(--blue); color: #fff; }
.hdr { display: flex; align-items: center; gap: 24px; height: 64px; }
.burger { display: none; color: #fff; }
.logo { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; white-space: nowrap; }
.search { flex: 1; max-width: 440px; display: flex; background: #fff; border-radius: 4px; overflow: hidden; }
.search input { flex: 1; border: 0; padding: 9px 12px; outline: none; min-width: 0; font-size: 14px; }
.search button { color: var(--blue); padding: 0 10px; }
.hdr-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.hdr-item { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; position: relative; cursor: pointer; white-space: nowrap; height: 64px; }
.flag { font-size: 16px; }
.btn-app { border: 2px solid #fff; border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.btn-app:hover { background: rgba(255,255,255,.12); }
.dd-menu {
  display: none; position: absolute; top: 100%; right: 0; min-width: 220px; background: #fff; color: var(--text);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 10px; z-index: 60; font-weight: 500; cursor: default;
}
.dd:hover .dd-menu { display: block; }
.dd-menu a { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 6px; }
.dd-menu a:hover { background: var(--gray-bg); }
.dd-account { padding: 16px; }
.dd-account .btn-blue { width: 100%; }
.dd-account p { font-size: 12px; margin: 10px 0; }
.dd-account p a { display: inline; padding: 0; color: var(--blue); text-decoration: underline; }
.cart-ico { position: relative; }
.cart-badge {
  position: absolute; top: -6px; left: 10px; background: var(--yellow); color: var(--text); font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
}

.main-nav { border-top: 1px solid rgba(255,255,255,.08); }
.nav-row { display: flex; align-items: center; gap: 4px; height: 40px; }
.nav-item { position: static; }
.nav-link { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: #fff; padding: 10px 9px; white-space: nowrap; }
.nav-link:hover, .has-mega.open > .nav-link { text-decoration: underline; text-underline-offset: 4px; }
.nav-special { color: #fff; }
.nav-free { margin-left: auto; color: var(--yellow); font-weight: 700; font-size: 13px; white-space: nowrap; }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--text); box-shadow: 0 12px 24px rgba(0,0,0,.15); border-top: 1px solid var(--line); }
.has-mega:hover .mega, .has-mega.open .mega { display: block; }
.mega-inner { max-width: 1240px; margin: 0 auto; padding: 24px 20px 28px; display: flex; gap: 40px; flex-wrap: wrap; }
.mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.mega-col h4 { font-size: 15px; margin-bottom: 8px; }
.mega-col a { padding: 5px 0; font-size: 14px; }
.mega-col a:hover, .mega-link:hover { color: var(--blue); text-decoration: underline; }
.mega-all { color: var(--blue); font-weight: 700; margin-top: 4px; }
.mega-link { font-weight: 600; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.mega-promo { margin-left: auto; width: 260px; background: var(--blue-light); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.mega-promo span { font-size: 48px; }
.mega-promo b { font-size: 18px; color: var(--blue); }

/* ---------- Главная ---------- */
.promo-strip { display: block; margin: 12px 0; background: var(--green-strip); border-radius: 6px; text-align: center; font-size: 12px; font-weight: 600; padding: 7px; }

.hero { position: relative; border-radius: 10px; overflow: hidden; height: 300px; }
.hero-slide {
  position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: var(--bg); background: radial-gradient(circle at 75% 50%, color-mix(in srgb, var(--bg) 75%, #fff) 0, var(--bg) 55%, color-mix(in srgb, var(--bg) 70%, #000) 100%); color: #fff;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-text { padding-left: 17%; max-width: 60%; z-index: 1; }
.hero-text h1 { font-size: 40px; font-weight: 800; line-height: 1.1; }
.hero-text h2 { font-size: 30px; font-weight: 500; margin: 2px 0 8px; }
.hero-text p { margin: 0 0 14px; font-size: 15px; }
.hero-text small { display: block; margin-top: 12px; font-size: 10px; opacity: .85; }
.hero-art { flex: 1; font-size: 130px; text-align: center; filter: drop-shadow(0 10px 20px rgba(0,0,0,.3)); letter-spacing: -10px; }
.hero-controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 2; }
.hero-pause { color: #fff; font-size: 10px; letter-spacing: -2px; width: 18px; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button { width: 32px; height: 3px; background: rgba(255,255,255,.45); border-radius: 2px; overflow: hidden; padding: 0; }
.hero-dots i { display: block; height: 100%; width: 0; background: #fff; }
.hero-dots button.active i { width: 100%; }
.hero-dots button.run i { animation: dot 6s linear; }
@keyframes dot { from { width: 0; } to { width: 100%; } }

.hello { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 10px; background: var(--gray-bg); border-radius: 10px; padding: 12px; margin: 18px 0 24px; align-items: stretch; }
.hello-left { display: flex; align-items: center; justify-content: center; gap: 16px; }
.hello-left h2 { font-size: 20px; }
.hello-left .btn-blue { padding: 10px 22px; }
.hello-card { background: #fff; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 12px; }
.hello-card b { display: block; font-size: 12px; margin-bottom: 2px; }
.hello-card u { color: var(--blue); text-decoration: none; }
.hello-card:hover u { text-decoration: underline; }
.hello-ico { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--blue-light); border-radius: 50%; flex: none; }

.block { margin: 28px 0; }
.block-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }

.scroller { position: relative; }
.scroller-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.scroller-track::-webkit-scrollbar { display: none; }
.scroller-track > * { scroll-snap-align: start; flex: none; }
.scroller-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.scroller-btn[hidden] { display: none; }
.scroller-btn.prev { left: -14px; transform: translateY(-50%) rotate(180deg); }
.scroller-btn.next { right: -14px; }
.pets-scroller .scroller-btn { top: 38%; }
.products-scroller .scroller-btn { top: 105px; }

.pet { width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-align: center; }
.pet-circle {
  width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 60px;
  background: radial-gradient(circle at 50% 60%, #fff3e8 0, #f6d9c2 70%, #efc6a6 100%); transition: .2s;
}
.pet:hover .pet-circle { transform: scale(1.05); box-shadow: 0 0 0 3px var(--blue); }
.pet:hover span:last-child { text-decoration: underline; }

.banner-member { display: flex; align-items: center; background: linear-gradient(90deg, #f6f4f1, #ece6df); border-radius: 10px; overflow: hidden; min-height: 240px; margin: 28px 0; }
.bm-text { padding: 30px 0 30px 17%; flex: 1; }
.bm-logo { color: var(--blue); font-weight: 800; font-size: 22px; letter-spacing: -1px; }
.bm-logo b { color: var(--pink); }
.bm-text h2 { font-size: 30px; color: #1c2b8f; font-weight: 600; line-height: 1.15; margin: 6px 0; max-width: 360px; }
.bm-text p { margin: 0 0 14px; }
.bm-art { flex: 1; font-size: 110px; text-align: center; letter-spacing: -14px; }

.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; gap: 6px; height: 470px; }
.tile { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #f4f5f7; }
.tile-art { flex: 1; display: grid; place-items: center; font-size: 64px; transition: .3s; }
.tile:hover .tile-art { transform: scale(1.03); }
.tile span { padding: 9px 10px; font-weight: 600; font-size: 12px; background: #f4f5f7; }
.tile:hover span { text-decoration: underline; }
.tile.dark span { background: #f4f0ea; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.big .tile-art { font-size: 120px; }
.tile.wide { grid-column: span 2; }
#popular { grid-template-columns: repeat(9, 1fr); }
#popular .tile.big { grid-column: span 3; }
#popular .tile.wide { grid-column: span 3; }
#popular .tile:nth-child(3) { grid-column: span 3; }
#popular .tile.sm { grid-column: span 2; }
#popular .tile:nth-child(4) { grid-column: 4 / span 2; }
#popular .tile:nth-child(5) { grid-column: 6 / span 2; }
#popular .tile:nth-child(6) { grid-column: 8 / span 2; }
.mosaic-season { grid-template-columns: 1fr 1fr 1fr 1fr; }
.mosaic-season .tile.big { grid-column: 1; grid-row: 1 / span 2; }
.mosaic-season .tile.wide { grid-column: 2 / span 2; }
.mosaic-season .tile.sm { grid-column: auto; }
.mosaic-season .tile.tall { grid-column: 4; grid-row: 1 / span 2; }
.mosaic-season .tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.mosaic-season .tile:nth-child(4) { grid-column: 3; grid-row: 2; }
.tile.tall .tile-art { font-size: 90px; }

.split-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--blue-light); border-radius: 10px; padding: 14px; margin: 28px 0; align-items: center; }
.sp-media { border-radius: 8px; height: 205px; background: linear-gradient(135deg, #3b2a1a, #8a6a3e); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.sp-media span { font-size: 80px; }
.sp-media b { font-size: 24px; line-height: 1.15; text-align: right; }
.sp-text { text-align: center; padding: 0 20px; }
.sp-text h3 { font-size: 16px; margin-bottom: 8px; }
.sp-text p { font-size: 12px; line-height: 1.5; margin: 0 0 14px; }

.easy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.easy-card { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font-weight: 600; font-size: 13px; }
.easy-art { width: 100%; aspect-ratio: 1; background: var(--blue-light); border-radius: 10px; display: grid; place-items: center; font-size: 90px; transition: .2s; }
.easy-card:hover .easy-art { box-shadow: inset 0 0 0 2px var(--blue); }
.easy-card:hover span { text-decoration: underline; }

.wide-banner { display: flex; align-items: center; justify-content: space-between; border-radius: 10px; overflow: hidden; background: linear-gradient(100deg, #1c2b8f 0, var(--blue) 50%, #2f7d32 100%); color: #fff; height: 120px; margin: 28px 0 24px; padding: 0 40px; }
.wb-art { font-size: 64px; }
.wb-text { flex: 1; padding: 0 30px; }
.wb-text h3 { font-size: 20px; font-weight: 600; }
.wb-text p { margin: 2px 0 8px; font-size: 12px; }
.wb-text .btn-white { padding: 5px 10px; font-size: 12px; }

/* ---------- Подвал ---------- */
.ftr-bar { background: var(--blue); color: #fff; margin-top: 20px; }
.ftr-bar-row { display: flex; align-items: center; justify-content: space-around; height: 52px; font-size: 13px; }
.ftr-bar-row a { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ftr-bar .btn-white { padding: 8px 36px; font-size: 12px; }
.ftr-links { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 24px 20px; font-size: 13px; flex-wrap: wrap; }
.ftr-links a:hover { text-decoration: underline; }
.socials { display: flex; gap: 8px; }
.soc { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; }
.ftr-apps { display: flex; justify-content: center; gap: 16px; padding-bottom: 26px; }
.app-badge { background: #000; color: #fff; border-radius: 6px; padding: 5px 16px; font-weight: 700; font-size: 14px; line-height: 1.1; }
.app-badge small { display: block; font-size: 9px; font-weight: 500; }
.ftr-copy { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 14px 20px 30px; font-size: 11px; color: var(--muted); }
.ftr-copy a:hover { text-decoration: underline; }

/* ---------- Карточка товара ---------- */
.p-card { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.products-scroller .p-card { width: 210px; }
.p-card-img { position: relative; background: #f4f5f7; border-radius: 8px; aspect-ratio: 1; display: grid; place-items: center; padding: 14px; }
.p-card-img .p-img { width: 80%; height: 100%; transition: .2s; }
.p-card:hover .p-img { transform: scale(1.04); }
.p-flag { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.p-card-title { line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; }
.p-card-title:hover { text-decoration: underline; }
.p-card-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.p-card-rating a { color: var(--blue); text-decoration: underline; }
.stars { position: relative; display: inline-flex; }
.stars span { display: flex; }
.stars-bg svg { fill: #d5d8dc; }
.stars-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.stars-fg svg { fill: #f7a600; flex: none; }
.p-card-price .price { font-size: 18px; font-weight: 700; }
.price sup, .pdp-price sup { font-size: 10px; margin-left: 2px; }
.old { text-decoration: line-through; color: var(--muted); font-size: 11px; }
.p-card-ton { color: var(--red); font-weight: 700; font-size: 13px; }
.p-card-ton span { font-weight: 500; font-size: 11px; color: var(--text); }
.p-card-note { font-size: 11px; color: var(--muted); }
.p-card-sold { min-height: 20px; font-size: 11px; font-weight: 700; }
.p-card-sold span { border: 2px solid #39b54a; border-radius: 4px; padding: 0 4px; margin-right: 4px; }
.p-card .btn-outline-red { margin-top: auto; }

/* ---------- Каталог ---------- */
.crumbs { font-size: 11px; color: var(--muted); margin: 14px 0 8px; }
.crumbs a { color: var(--blue); text-decoration: underline; }
.page-title { font-size: 26px; font-weight: 700; margin: 6px 0 18px; }
.type-card { width: 190px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 11px; }
.type-card:hover, .type-card.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.type-art { height: 80px; display: grid; place-items: center; font-size: 46px; background: radial-gradient(circle, #f5e7d6, #e0c3a0); }
.type-body { padding: 10px 12px 12px; }
.type-body b { font-size: 13px; }
.type-body p { margin: 4px 0 10px; line-height: 1.4; }
.type-body small { font-weight: 700; font-size: 11px; }
.type-body p:last-child { margin-bottom: 0; }
.brand-box { width: 130px; height: 62px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; font-weight: 800; color: var(--blue); font-size: 14px; }
.brand-box:hover, .brand-box.active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.catalog { display: grid; grid-template-columns: 220px 1fr; gap: 30px; margin-top: 20px; }
.f-group { border-bottom: 1px solid var(--line); padding: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.f-group:first-child { padding-top: 0; }
.f-group h4 { font-size: 14px; margin-bottom: 4px; }
.f-link { color: var(--blue); font-size: 12px; }
.f-link:hover, .f-link.active { text-decoration: underline; font-weight: 700; }
.f-check { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.f-check input { width: 16px; height: 16px; accent-color: var(--blue); }
.f-group input[type=range] { accent-color: var(--blue); width: 100%; }
.results-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sort { position: relative; }
.sort span { position: absolute; top: -7px; left: 8px; background: #fff; padding: 0 4px; font-size: 10px; color: var(--muted); }
.sort select { border: 1px solid #8c9196; border-radius: 4px; padding: 10px 12px; min-width: 200px; background: #fff; }
.btn-filter-toggle { display: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.empty-state div { font-size: 60px; }
.empty-state h3 { margin: 10px 0; font-size: 20px; }
.empty-state a:not(.btn-blue) { color: var(--blue); text-decoration: underline; }

/* ---------- Страница товара ---------- */
.pdp { display: grid; grid-template-columns: 1.3fr 1fr 300px; gap: 30px; margin: 10px 0 30px; align-items: start; }
.pdp-gallery { display: flex; gap: 12px; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 8px; }
.pdp-thumbs button { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: #f4f5f7; }
.pdp-thumbs button.active { border: 2px solid var(--blue); }
.pdp-thumbs .p-img { width: 100%; height: 100%; }
.pdp-main { flex: 1; background: #f4f5f7; border-radius: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.p-img.lg { width: 70%; height: 85%; }
.pdp-brand { color: var(--blue); font-weight: 700; text-decoration: underline; }
.pdp-info h1 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 6px 0 10px; }
.pdp-info hr, .cart-summary hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.pdp-price { font-size: 28px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp-price .old { font-size: 14px; }
.save { color: var(--red); font-size: 13px; }
.pdp-label { font-size: 13px; font-weight: 500; margin: 20px 0 8px; }
.pdp-sizes button { border: 2px solid var(--blue); border-radius: 8px; padding: 8px 18px; font-weight: 700; display: flex; flex-direction: column; align-items: center; }
.pdp-sizes small { font-weight: 500; color: var(--muted); }
.pdp-stock { color: #1e7e34; margin: 18px 0 4px; font-size: 13px; }
.pdp-buy { border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 120px; }
.buy-opt { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; gap: 10px; cursor: pointer; font-size: 13px; }
.buy-opt.active { border: 2px solid var(--blue); background: #f5f8ff; }
.buy-opt input { accent-color: var(--blue); margin-top: 2px; }
.buy-opt > span { display: flex; flex-direction: column; gap: 2px; }
.buy-opt em { font-style: normal; color: var(--red); }
.buy-price { font-size: 16px; font-weight: 700; }
.buy-opt small { color: var(--muted); }
.qty-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
.qty { display: inline-flex; border: 1px solid #8c9196; border-radius: 6px; overflow: hidden; }
.qty button { width: 34px; font-size: 18px; }
.qty button:hover { background: var(--gray-bg); }
.qty input { width: 48px; text-align: center; border: 0; padding: 6px 0; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp-buy a { color: var(--blue); }
.pdp-tabs { border-top: 1px solid var(--line); }
.tab-btns { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.tab-btns button { padding: 14px 0; font-weight: 700; font-size: 15px; border-bottom: 3px solid transparent; }
.tab-btns button.active { border-color: var(--blue); color: var(--blue); }
.tab-body { padding: 18px 0; line-height: 1.6; max-width: 800px; }
.review-sum { display: flex; align-items: center; gap: 10px; }
.review-sum b { font-size: 32px; }

/* ---------- Корзина ---------- */
.cart { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ci-img { background: #f4f5f7; border-radius: 8px; padding: 8px; height: 100px; display: grid; place-items: center; }
.ci-img .p-img { height: 100%; }
.ci-info { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ci-info > a:hover { text-decoration: underline; }
.ci-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ci-total { font-weight: 700; font-size: 16px; white-space: nowrap; }
.cart-summary { border: 1px solid var(--line); border-radius: 10px; padding: 18px; position: sticky; top: 120px; display: flex; flex-direction: column; gap: 10px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13px; gap: 10px; }
.sum-row.big { font-size: 17px; }
.checkout { margin: 40px 0; max-width: 820px; }
.checkout h2 { font-size: 22px; margin-bottom: 16px; }
.checkout h3 { font-size: 16px; margin: 24px 0 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { border: 1px solid #8c9196; border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.form-grid input:focus, .form-grid textarea:focus { outline: 2px solid var(--blue); border-color: transparent; }
.choice-row, .pay-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.choice input { accent-color: var(--blue); }
.pay-btn { border: 1px dashed #8c9196; border-radius: 8px; padding: 14px 18px; font-weight: 600; color: var(--muted); }
.pay-btn:hover { border-color: var(--blue); color: var(--blue); }
.checkout .btn-orange { margin-top: 26px; max-width: 320px; }

/* ---------- Уведомление ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); background: #1a1a1a; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: 13px; opacity: 0; transition: .25s; z-index: 100; max-width: 90vw; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .hide-md { display: none; }
  .nav-free { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .pdp { grid-template-columns: 1fr 1fr; }
  .pdp-buy { grid-column: 1 / -1; position: static; }
}
@media (max-width: 860px) {
  .hide-sm { display: none; }
  .hdr { gap: 12px; }
  .burger { display: block; }
  .logo { font-size: 26px; }
  .hdr-actions { gap: 14px; }
  .main-nav { display: none; }
  body.nav-open .main-nav { display: block; max-height: calc(100vh - 64px); overflow-y: auto; }
  .nav-row { flex-direction: column; align-items: stretch; height: auto; padding: 8px 20px 16px; }
  .nav-link { justify-content: space-between; width: 100%; font-size: 15px; padding: 12px 0; }
  .mega { position: static; box-shadow: none; border-radius: 8px; }
  .has-mega:hover .mega { display: none; }
  .has-mega.open .mega { display: block; }
  .mega-inner { padding: 16px; gap: 20px; }
  .mega-promo { display: none; }

  .hero { height: 260px; }
  .hero-text { padding-left: 24px; max-width: 70%; }
  .hero-text h1 { font-size: 28px; }
  .hero-text h2 { font-size: 20px; }
  .hero-art { font-size: 70px; }
  .hello { grid-template-columns: 1fr; }
  .bm-text { padding-left: 24px; }
  .bm-text h2 { font-size: 22px; }
  .bm-art { font-size: 60px; }
  .mosaic, #popular, .mosaic-season { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .mosaic .tile, #popular .tile, .mosaic-season .tile { grid-column: auto !important; grid-row: auto !important; height: 180px; }
  .split-promo { grid-template-columns: 1fr; }
  .easy { grid-template-columns: 1fr 1fr; }
  .wide-banner { padding: 0 16px; }
  .wb-art { display: none; }
  .wb-art.right { display: none; }

  .catalog { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filters.open { display: block; }
  .btn-filter-toggle { display: block; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .pdp { grid-template-columns: 1fr; }
  .cart { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .ftr-bar-row { flex-wrap: wrap; height: auto; padding: 12px 20px; gap: 10px; }
  .scroller-btn { display: none; }
}

/* ---------- Product photos ---------- */
.price .cur, .pdp-price .cur { font-size: .6em; vertical-align: top; position: relative; top: .25em; margin-right: 1px; }
.price sup, .pdp-price sup { margin-left: 1px; }
.p-card-img { background: #fff; border: 1px solid #eceef1; padding: 10px; }
.p-card-img { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: .2s; }
.p-card:hover .p-card-img img { transform: scale(1.04); }
.p-card-auto { color: var(--red); font-weight: 700; font-size: 13px; }
.p-card-auto span { font-weight: 500; font-size: 11px; color: var(--text); }
.products-scroller .scroller-btn { top: 100px; }

.pet-circle { overflow: hidden; }
.pet-circle img { width: 62%; height: 62%; object-fit: contain; mix-blend-mode: multiply; }

.hero-art { display: flex; justify-content: center; align-items: flex-end; gap: 0; height: 80%; padding-right: 6%; letter-spacing: 0; }
.hero-art img { height: 100%; max-width: 32%; object-fit: contain; background: #fff; border-radius: 12px; padding: 10px; margin-left: -18px; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.hero-art img:nth-child(2) { height: 88%; transform: rotate(4deg); }
.hero-art img:nth-child(3) { height: 76%; transform: rotate(-4deg); }

.bm-art { display: flex; justify-content: center; align-items: center; gap: 12px; letter-spacing: 0; padding: 20px; }
.bm-art img { width: 30%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }

.tile-art { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 14px; background: #fff; overflow: hidden; min-height: 0; }
.tile-art img { max-height: 100%; height: auto; max-width: 48%; object-fit: contain; }
.tile-art img:only-child { max-width: 85%; }
.wide .tile-art img { max-width: 32%; }

.sp-media { justify-content: space-between; gap: 10px; }
.sp-imgs { display: flex; gap: 6px; height: 80%; }
.sp-imgs img { height: 100%; max-width: 110px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; }

.wb-art { display: flex; gap: 8px; height: 90%; align-items: center; }
.wb-art img { height: 100%; max-width: 90px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }

.type-art { background: #fff; border-bottom: 1px solid var(--line); padding: 6px; height: 100px; display: flex; justify-content: center; overflow: hidden; }
.type-art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.brand-box { font-size: 12px; padding: 0 8px; text-align: center; line-height: 1.2; }

.f-search { border: 1px solid #8c9196; border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.f-brands { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.f-check[hidden] { display: none; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 30px 0 10px; }
.pager button { min-width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; }
.pager button.active, .pager button:hover { border-color: var(--blue); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.pdp-main { background: #fff; border: 1px solid #eceef1; }
.pdp-main img { width: 85%; height: 85%; object-fit: contain; }
.buy-opt b { display: flex; align-items: center; gap: 4px; }
.spec { border-collapse: collapse; min-width: 360px; }
.spec th, .spec td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.spec th { background: var(--gray-bg); width: 160px; }

.ci-img { background: #fff; border: 1px solid #eceef1; }
.ci-img img { width: 100%; height: 100%; object-fit: contain; }
.ci-info .muted { display: flex; align-items: center; gap: 4px; }

@media (max-width: 860px) {
  .hero-art img { max-width: 30%; padding: 4px; }
  .bm-art img { width: 28%; }
  .sp-imgs img { max-width: 80px; }
}

/* Product details */
.tab-body h3{font-size:18px;margin:22px 0 10px}
.tab-body h4{font-size:15px;margin:14px 0 6px}
.tab-body p{line-height:1.6;margin:0 0 10px}
.benefits{margin:0;padding-left:20px;line-height:1.6}
.benefits li{margin-bottom:6px}
.nutri{margin-bottom:18px}
.spec.md{width:auto;min-width:320px;margin:8px 0 14px}
.spec.md th{background:#f5f5f5;width:auto;white-space:nowrap}
.spec.md td{min-width:140px}


/* Health condition tiles */
.cond-tile{width:130px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;text-align:center;color:inherit;text-decoration:none}
.cond-art{width:116px;height:116px;border-radius:50%;background:#eef3ff;display:grid;place-items:center;overflow:hidden;transition:.2s}
.cond-art img{width:62%;height:62%;object-fit:contain;mix-blend-mode:multiply}
.cond-tile:hover .cond-art,.cond-tile.active .cond-art{box-shadow:0 0 0 3px var(--blue)}
.cond-tile:hover b{text-decoration:underline}
.cond-scroller .scroller-btn{top:40%}


/* Card payment */
.pay-btn.active{border:2px solid var(--blue);color:var(--blue);background:#f2f6ff}
.card-box{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.card-logos{display:flex;gap:8px;margin-bottom:14px}
.card-logos span{font-size:11px;font-weight:800;padding:5px 9px;border:1px solid var(--line);border-radius:5px;color:#9aa0a6;letter-spacing:.5px}
.card-logos span.on{color:#fff;background:var(--blue);border-color:var(--blue)}
.form-grid .err,.err{color:#c62828;font-size:12px;font-weight:500;min-height:0}
.bill-same{margin:14px 0 6px}
#billing{margin-top:10px}
.card-box .small{font-size:12px;margin-top:12px}
.order-total{max-width:320px;margin-top:22px}

#billing[hidden]{display:none}


/* Sale badge */
.sale-badge{display:inline-block;background:#d11f00;color:#fff;font-size:12px;font-weight:800;line-height:1;padding:6px 9px;border-radius:4px;letter-spacing:.3px;align-self:center}
.p-card-img .sale-badge{position:absolute;top:8px;left:8px;z-index:1}