/* ---- Self-hosted Manrope (variable) ---- */
        @font-face {
            font-family: 'Manrope';
            font-style: normal;
            font-weight: 100 900;
            font-display: block;
            src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
            unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }
        @font-face {
            font-family: 'Manrope';
            font-style: normal;
            font-weight: 100 900;
            font-display: block;
            src: url('/fonts/manrope-cyrillic-ext-wght-normal.woff2') format('woff2');
            unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }
        @font-face {
            font-family: 'Manrope';
            font-style: normal;
            font-weight: 100 900;
            font-display: block;
            src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        @font-face {
            font-family: 'Manrope';
            font-style: normal;
            font-weight: 100 900;
            font-display: block;
            src: url('/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
            unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        :root {
            /* Коричневый — основной, медово-янтарный — вторичный акцент.
               Тёплая «натуральная» палитра: дерево, кожа, кофе. */
            --brand: #97603a;       /* кофейно-коричневый — основной */
            --brand-2: #cf9a4f;     /* медово-янтарный — вторичный акцент */
            --brand-dark: #76492b;  /* тёмно-коричневый — ссылки/ховеры */
            --brand-deep: #4f3120;  /* глубокий шоколад — цена/акценты */

            /* Тёплый кремово-бежевый фон, светлые карточки */
            --bg: #f7f2ea;          /* основной тёплый фон страницы */
            --bg-2: #efe5d7;        /* чуть темнее — для чередующихся секций */
            --surface: #fffaf3;     /* светлая кремовая «карточка» */
            --surface-2: #f1e3d0;   /* тёплая бежевая «карточка» для акцентов */
            --surface-3: #e7d4ba;   /* насыщеннее — для CTA */

            --ink: #3a2a1d;         /* тёмно-коричневый — текст */
            --ink-soft: #7c685a;    /* приглушённый серо-коричневый */
            --line: #e6d6c2;        /* тёплый бордер */
            --line-soft: rgba(58, 42, 29, .12);

            --shadow-sm: 0 2px 6px rgba(90, 58, 38, .08);
            --shadow-md: 0 10px 28px rgba(90, 58, 38, .12), 0 2px 6px rgba(90, 58, 38, .06);
            --shadow-lg: 0 22px 52px rgba(90, 58, 38, .18);

            --radius: 20px;
            --radius-sm: 14px;
            --gradient-brand: linear-gradient(135deg, #a86f44 0%, #7a4d2d 100%);
            --gradient-soft: linear-gradient(135deg, #efe0cb 0%, #e7d3b6 50%, #f0dcc2 100%);
            --gradient-warm: linear-gradient(180deg, #f7f2ea 0%, #efe5d7 100%);
            --gradient-dark: linear-gradient(135deg, #2a1d12 0%, #44301c 100%);

            /* Декоративные «лапки» — фоновый SVG-паттерн */
            --paw-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%2376492b' fill-opacity='0.05'%3E%3Cellipse cx='30' cy='42' rx='7' ry='9'/%3E%3Cellipse cx='44' cy='30' rx='5' ry='7'/%3E%3Cellipse cx='58' cy='34' rx='5' ry='7'/%3E%3Cellipse cx='70' cy='44' rx='6' ry='8'/%3E%3Cellipse cx='48' cy='58' rx='12' ry='10'/%3E%3C/g%3E%3C/svg%3E");
        }

        /* ---- Sticky footer skeleton ---- */
        html, body { height: 100%; }
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Manrope', system-ui, sans-serif;
            background: var(--bg);
            background-image: var(--paw-pattern);
            background-attachment: fixed;
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
        }
        main { flex: 1 0 auto; }
        footer.site-footer { flex-shrink: 0; }

        /* ---- Typography ---- */
        h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
        h1, h2, h3, h4, h5, h6, p, a, span, td, li, .card-title { overflow-wrap: break-word; word-break: break-word; }
        .text-ink { color: var(--ink) !important; }
        .text-muted-soft { color: var(--ink-soft) !important; }
        .lead { color: var(--ink-soft); font-weight: 500; }
        a { color: var(--brand-dark); }
        a:hover { color: var(--brand); }

        /* ---- Section helpers ---- */
        .section-cream { background: var(--surface); }
        .section-peach { background: var(--surface-2); }
        .section-warm  { background: var(--gradient-warm); }
        .bg-brand-light { background: var(--surface-2) !important; }
        .bg-gradient-soft { background: var(--gradient-soft) !important; }

        /* ---- Navbar (warm cream tint instead of white) ---- */
        .navbar {
            background: rgba(247, 242, 234, .85) !important;
            backdrop-filter: saturate(160%) blur(14px);
            -webkit-backdrop-filter: saturate(160%) blur(14px);
            border-bottom: 1px solid var(--line);
            box-shadow: none !important;
        }
        .navbar-brand {
            font-weight: 800; font-size: 1.4rem;
            background: var(--gradient-brand);
            -webkit-background-clip: text; background-clip: text;
            color: transparent !important;
            display: inline-flex; align-items: center; gap: .45rem;
        }
        .navbar-brand .brand-mark {
            width: 36px; height: 36px;
            background: var(--gradient-brand);
            color: #fff; border-radius: 11px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.15rem;
            box-shadow: 0 8px 18px rgba(151,96,58,.35);
            -webkit-text-fill-color: #fff;
        }
        /* Логотип-котик внутри значка (навбар и футер) */
        .brand-mark svg { width: 24px; height: 24px; display: block; }
        .site-footer .footer-brand .brand-mark svg { width: 26px; height: 26px; }
        .navbar .nav-link {
            font-weight: 600; color: var(--ink); padding: .6rem .9rem !important;
            border-radius: 11px; transition: background .15s, color .15s;
            text-transform: none; font-variant: normal; /* регистр строго как в разметке */
        }
        .navbar .nav-link:hover { background: var(--surface-2); color: var(--brand-dark); }
        .navbar .nav-link.active { background: var(--surface-2); color: var(--brand-dark); }
        .navbar .dropdown-menu {
            background: var(--surface);
            border: 1px solid var(--line); border-radius: 14px;
            box-shadow: var(--shadow-md); padding: .5rem;
        }
        .navbar .dropdown-item { border-radius: 9px; padding: .55rem .75rem; font-weight: 500; color: var(--ink); }
        .navbar .dropdown-item:hover { background: var(--surface-2); color: var(--brand-dark); }
        .navbar .dropdown-divider { border-color: var(--line); }

        /* ---- Buttons ---- */
        .btn { font-weight: 600; border-radius: 12px; padding: .55rem 1.1rem; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
        .btn-lg { padding: .85rem 1.7rem; font-size: 1rem; border-radius: 14px; }
        .btn-sm { padding: .4rem .8rem; font-size: .85rem; border-radius: 10px; }
        .btn-brand {
            background: var(--gradient-brand); color: #fff; border: none;
            box-shadow: 0 10px 22px rgba(151,96,58,.32);
        }
        .btn-brand:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(151,96,58,.42); }
        .btn-brand:active { transform: translateY(0); }
        .btn-outline-brand {
            color: var(--brand-dark); border: 1.5px solid var(--brand);
            background: transparent;
        }
        .btn-outline-brand:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
        .btn-light { background: var(--surface); border-color: var(--line); color: var(--ink); }
        .btn-light:hover { background: var(--surface-2); color: var(--brand-dark); border-color: var(--line); }
        .text-brand { color: var(--brand) !important; }

        /* ---- Hero ---- */
        .hero {
            position: relative;
            background:
                radial-gradient(1100px 480px at 80% -10%, rgba(168,111,68,.32), transparent 60%),
                radial-gradient(800px 380px at 10% 110%, rgba(207,154,79,.22), transparent 60%),
                var(--surface-2);
            padding: 5rem 0 5.5rem;
            border-radius: 0 0 40px 40px;
            overflow: hidden;
            border-bottom: 1px solid var(--line);
        }
        .hero .display-4, .hero .display-5 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
        /* Баннер с фото-фоном: фото видно, текст читаем за счёт лёгкого градиента слева */
        .hero.hero-banner { background-size: cover; background-repeat: no-repeat; min-height: 360px; }
        .hero.hero-banner::before {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(90deg,
                rgba(30,20,12,.90) 0%,
                rgba(30,20,12,.74) 45%,
                rgba(30,20,12,.58) 75%,
                rgba(30,20,12,.44) 100%);
        }
        .hero.hero-banner > .container { position: relative; z-index: 1; }
        .hero.hero-banner h1,
        .hero.hero-banner .display-5 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
        .hero.hero-banner .lead { color: rgba(255,255,255,.95); text-shadow: 0 1px 8px rgba(0,0,0,.4); }
        .hero.hero-banner .hero-eyebrow {
            background: rgba(0,0,0,.32); color: #fff;
            border-color: rgba(255,255,255,.35); backdrop-filter: blur(4px);
        }
        .hero-eyebrow {
            display: inline-flex; align-items: center; gap: .4rem;
            background: var(--surface);
            padding: .4rem .9rem;
            border-radius: 999px; font-size: .85rem; font-weight: 600;
            color: var(--brand-dark);
            border: 1px solid var(--line);
            margin-bottom: 1.1rem;
        }
        .hero-emoji {
            font-size: 13rem; line-height: 1; position: relative;
            filter: drop-shadow(0 22px 36px rgba(90,58,38,.25));
            animation: bob 4s ease-in-out infinite;
        }
        @keyframes bob {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50% { transform: translateY(-12px) rotate(2deg); }
        }
        .hero-bubble {
            position: absolute; background: var(--surface); border-radius: 18px;
            padding: .7rem 1.05rem; box-shadow: var(--shadow-md);
            font-weight: 600; font-size: .9rem; color: var(--ink);
            display: inline-flex; align-items: center; gap: .5rem;
            border: 1px solid var(--line);
        }
        .hero-bubble.b1 { top: 20%; left: -20px; }
        .hero-bubble.b2 { bottom: 18%; right: -10px; }

        /* ---- Cards (warm cream, not white) ---- */
        .card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--surface);
            color: var(--ink);
        }
        .product-card, .service-card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
            overflow: hidden;
            background: var(--surface);
            position: relative;
        }
        .product-card:hover, .service-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
            border-color: var(--brand);
        }
        .product-card .card-img-top, .service-card .card-img-top,
        .product-card .product-placeholder, .service-card .service-placeholder {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            background: var(--gradient-soft);
        }
        .product-placeholder, .service-placeholder {
            display: flex; align-items: center; justify-content: center;
            font-size: 4rem; color: #fff;
        }
        .card-title a { color: var(--ink); }
        .card-title a:hover { color: var(--brand-dark); }
        .price { color: var(--brand-deep); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
        .badge-soft {
            background: var(--surface-2); color: var(--brand-dark);
            font-weight: 600; padding: .35rem .7rem; border-radius: 9px;
            font-size: .75rem; border: 1px solid var(--line);
        }
        .feature-tile {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.5rem 1.25rem;
            transition: transform .2s, box-shadow .2s, border-color .2s;
            text-align: center;
            height: 100%;
        }
        .feature-tile:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: var(--brand);
        }
        .feature-icon {
            width: 56px; height: 56px;
            background: var(--gradient-brand);
            color: #fff; border-radius: 16px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.5rem; margin-bottom: .85rem;
            box-shadow: 0 8px 18px rgba(151,96,58,.3);
        }

        /* ---- Forms ---- */
        .form-control, .form-select {
            background: var(--surface);
            border: 1.5px solid var(--line); border-radius: 12px;
            padding: .65rem .9rem; font-weight: 500; color: var(--ink);
        }
        .form-control:focus, .form-select:focus {
            background: #fff8eb;
            border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(151,96,58,.18);
            color: var(--ink);
        }
        .form-control::placeholder { color: rgba(122,90,72,.6); }
        .form-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
        .input-group .form-control:focus { z-index: 2; }

        /* ---- Tables ---- */
        .table { color: var(--ink); background: transparent; }
        .table > :not(caption) > * > * { background: transparent; color: var(--ink); border-color: var(--line); }
        .table-light, .table > thead { background: var(--surface-2); }
        .table-light th, .table > thead th { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

        /* ---- Alerts ---- */
        .alert { border-radius: 14px; border: 1px solid transparent; padding: .9rem 1.15rem; font-weight: 500; }
        .alert-success { background: #d8f0d6; color: #2c5e1f; border-color: #b9dfb3; }
        .alert-danger  { background: #f8d8d8; color: #8b2828; border-color: #f0b8b8; }
        .alert-info    { background: #f5e3c4; color: #6b4a18; border-color: #e8cfae; }
        .alert-warning { background: #fce6b3; color: #8b6018; border-color: #f0d28a; }
        .alert-light   { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }

        /* ---- Footer ---- */
        .site-footer {
            background: linear-gradient(180deg, #2a1d12 0%, #1a1009 100%);
            color: #d8c4ad;
            padding: 3.75rem 0 1.5rem;
            margin-top: 5rem;
            position: relative;
        }
        .site-footer::before {
            content: ''; display: block; height: 4px;
            background: var(--gradient-brand);
            position: absolute; top: 0; left: 0; right: 0;
        }
        .site-footer h5, .site-footer h6 { color: #fff8e8; }
        .site-footer a { color: #d8c4ad; text-decoration: none; transition: color .15s; }
        .site-footer a:hover { color: #ffb78a; }
        .site-footer .footer-brand {
            font-weight: 800; font-size: 1.4rem; color: #fff8e8;
            display: inline-flex; align-items: center; gap: .5rem;
        }
        .site-footer .footer-brand .brand-mark {
            width: 38px; height: 38px; background: var(--gradient-brand);
            border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.15rem; color: #fff;
        }
        .site-footer .footer-list { list-style: none; padding: 0; margin: 0; }
        .site-footer .footer-list li { margin-bottom: .55rem; font-size: .92rem; }
        .site-footer .footer-list li i { color: #ffa872; margin-right: .4rem; }
        .site-footer .social {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 11px;
            background: rgba(255,255,255,.06);
            color: #fff8e8; margin-right: .45rem;
            transition: background .15s, transform .15s, color .15s;
            border: 1px solid rgba(255,255,255,.06);
        }
        .site-footer .social:hover { background: var(--gradient-brand); color: #fff; transform: translateY(-2px); border-color: transparent; }
        .site-footer .footer-divider { border-color: rgba(255,200,150,.12); margin: 2rem 0 1rem; }
        .site-footer .copyright { color: #a08770; font-size: .88rem; }

        /* ---- Misc ---- */
        .badge-cart { font-size: .7rem; }
        hr { border-color: var(--line); opacity: 1; }
        img { max-width: 100%; height: auto; }
        .media-placeholder { height: auto; aspect-ratio: 1 / 1; font-size: 7rem; border-radius: var(--radius); color: #fff; background: var(--gradient-soft); }
        .table-responsive { -webkit-overflow-scrolling: touch; }
        ::selection { background: rgba(151,96,58,.25); color: var(--ink); }

        /* ---- Hero search ---- */
        .hero-search {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 6px;
            box-shadow: var(--shadow-md);
            display: flex; align-items: stretch;
            max-width: 520px;
        }
        .hero-search input {
            border: none; background: transparent; flex: 1;
            padding: .8rem 1rem; font-size: 1rem; font-weight: 500;
            color: var(--ink); outline: none;
        }
        .hero-search input::placeholder { color: rgba(122,90,72,.65); }
        .hero-search button {
            background: var(--gradient-brand); color: #fff; border: none;
            padding: .7rem 1.3rem; border-radius: 13px; font-weight: 600;
            box-shadow: 0 6px 14px rgba(151,96,58,.32);
            transition: transform .12s, box-shadow .15s;
        }
        .hero-search button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(151,96,58,.42); }

        /* ---- Pet tiles (shop by pet) ---- */
        .pet-tile {
            display: block; text-decoration: none;
            border-radius: 22px; padding: 1.6rem 1.25rem 1.4rem;
            color: #fff; text-align: center;
            position: relative; overflow: hidden;
            transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
            box-shadow: 0 10px 24px rgba(90,58,38,.18);
            height: 100%;
        }
        .pet-tile:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 20px 40px rgba(90,58,38,.28); }
        .pet-tile .pet-emoji {
            font-size: 3.5rem; line-height: 1;
            filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
            margin-bottom: .5rem;
            transition: transform .25s;
        }
        .pet-tile:hover .pet-emoji { transform: scale(1.15) rotate(-6deg); }
        /* Фото питомца на плитке (вместо эмодзи) */
        .pet-tile .pet-photo {
            height: 92px; width: 100%; object-fit: contain;
            margin-bottom: .5rem;
            filter: drop-shadow(0 8px 14px rgba(0,0,0,.22));
            transition: transform .25s;
        }
        .pet-tile:hover .pet-photo { transform: scale(1.1) rotate(-3deg); }
        .pet-tile h6 { color: #fff; font-weight: 700; margin: 0 0 .15rem; font-size: 1.05rem; letter-spacing: -.01em; }
        .pet-tile small { color: rgba(255,255,255,.85); font-size: .78rem; }
        .pet-tile::after {
            content: ''; position: absolute; inset: auto -20px -30px auto;
            width: 120px; height: 120px; border-radius: 50%;
            background: rgba(255,255,255,.12); pointer-events: none;
        }
        .pet-dog   { background: linear-gradient(135deg,#97603a 0%,#b07c4d 100%); }
        .pet-cat   { background: linear-gradient(135deg,#cf9a4f 0%,#e0b46e 100%); }
        .pet-bird  { background: linear-gradient(135deg,#b07c4d 0%,#c99a6a 100%); }
        .pet-rodent{ background: linear-gradient(135deg,#76492b 0%,#956036 100%); }
        .pet-fish  { background: linear-gradient(135deg,#a9854f 0%,#c4a373 100%); }
        .pet-reptile{ background: linear-gradient(135deg,#827645 0%,#a09462 100%); }

        /* ---- Testimonials ---- */
        .testimonial-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 1.75rem;
            height: 100%;
            position: relative;
            transition: transform .2s, box-shadow .2s;
        }
        .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .testimonial-card .quote-mark {
            position: absolute; top: 14px; right: 18px;
            font-size: 3rem; line-height: 1; color: var(--brand);
            opacity: .25; font-family: Georgia, serif;
        }
        .testimonial-text { color: var(--ink); font-style: italic; line-height: 1.6; }
        .testimonial-author {
            display: flex; align-items: center; gap: .75rem;
            margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--line);
        }
        .testimonial-avatar {
            width: 46px; height: 46px; border-radius: 50%;
            background: var(--gradient-soft);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.5rem; flex-shrink: 0;
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
        }

        /* ---- Image hover zoom for cards ---- */
        .product-card .card-img-top, .service-card .card-img-top,
        .product-card .product-placeholder, .service-card .service-placeholder {
            transition: transform .5s cubic-bezier(.2,.7,.3,1);
        }
        .product-card:hover .card-img-top, .service-card:hover .card-img-top,
        .product-card:hover .product-placeholder, .service-card:hover .service-placeholder {
            transform: scale(1.07);
        }
        /* Кнопка «В корзину»/«Записаться» подсвечивается ярче, когда наводимся на карточку */
        .product-card:hover .btn-brand, .service-card:hover .btn-brand {
            box-shadow: 0 14px 28px rgba(151,96,58,.45);
            transform: translateY(-1px);
        }

        /* ---- Wishlist heart on product card ---- */
        .product-card .wishlist {
            position: absolute; top: 12px; left: 12px; z-index: 2;
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,244,224,.92); backdrop-filter: blur(6px);
            color: var(--brand-dark); border: 1px solid var(--line);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1rem; cursor: pointer;
            transition: background .15s, color .15s, transform .15s;
        }
        .product-card .wishlist:hover { background: var(--brand); color: #fff; transform: scale(1.1); border-color: transparent; }

        /* ---- Wave divider ---- */
        .wave-divider {
            display: block; width: 100%; height: 60px;
            margin: 0; line-height: 0; pointer-events: none;
        }
        .wave-divider svg { display: block; width: 100%; height: 100%; }

        /* ---- Section eyebrow ---- */
        .eyebrow {
            display: inline-flex; align-items: center; gap: .5rem;
            background: var(--surface-2);
            color: var(--brand-dark); padding: .35rem .85rem;
            border-radius: 999px; font-size: .78rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .08em;
            border: 1px solid var(--line);
            margin-bottom: .8rem;
        }

        /* ---- Stat tile ---- */
        .stat-tile {
            background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 1.4rem 1.1rem;
            text-align: center;
        }
        .stat-tile .stat-num {
            font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em;
            background: var(--gradient-brand);
            -webkit-background-clip: text; background-clip: text;
            color: transparent; line-height: 1.1;
        }
        .stat-tile .stat-label { color: var(--ink-soft); font-size: .9rem; margin-top: .2rem; font-weight: 500; }

        /* ============================================================
           EDITORIAL / MAGAZINE COMPONENTS
           ============================================================ */

        /* ---- Display serif для заголовков ---- */
        .display-serif {
            font-family: 'Fraunces', Georgia, serif;
            font-weight: 800; font-style: italic;
            letter-spacing: -0.02em; line-height: 1.05;
            font-variation-settings: "opsz" 144, "SOFT" 50;
        }
        .display-serif em { font-style: normal; font-weight: 900; color: var(--brand-dark); }

        /* ---- Magazine hero (новая версия) ---- */
        .hero-mag {
            position: relative; overflow: hidden;
            background:
                radial-gradient(900px 380px at 90% -10%, rgba(168,111,68,.32), transparent 60%),
                radial-gradient(700px 320px at 10% 100%, rgba(207,154,79,.22), transparent 60%),
                var(--surface-2);
            padding: 5rem 0 6rem;
            border-radius: 0 0 48px 48px;
            border-bottom: 1px solid var(--line);
        }
        .hero-mag .h-mag {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(2.4rem, 5.5vw, 4.5rem);
            font-weight: 800; line-height: 1; letter-spacing: -.025em;
            margin-bottom: 1.25rem;
            font-variation-settings: "opsz" 144;
        }
        .hero-mag .h-mag em { font-style: italic; color: var(--brand-dark); font-weight: 900; }
        .hero-mag .h-mag .accent {
            background: var(--gradient-brand);
            -webkit-background-clip: text; background-clip: text;
            color: transparent;
        }

        /* «Витрина» справа — живая композиция с плавающими карточками */
        .hero-stage { position: relative; min-height: 460px; }
        .hero-stage .pet-orb {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%);
            width: 360px; height: 360px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 70%),
                var(--gradient-brand);
            box-shadow: 0 30px 80px rgba(151,96,58,.35);
            display: flex; align-items: center; justify-content: center;
            font-size: 10rem; line-height: 1;
            filter: drop-shadow(0 18px 30px rgba(0,0,0,.12));
            overflow: hidden;
        }
        .hero-stage .pet-orb img {
            width: 100%; height: 100%; object-fit: contain; display: block;
            padding: 10px;
            filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
        }
        /* Мобильное hero-фото — вырезанный питомец на прозрачном фоне */
        .hero-photo-mobile {
            max-height: 260px; width: auto; margin-top: 1rem;
            filter: drop-shadow(0 12px 20px rgba(90,58,38,.22));
        }
        /* Bento-плитка с фото-фоном (текст белым поверх затемнения) */
        .bento-cell.bento-photo {
            background-size: cover; background-position: center; background-repeat: no-repeat;
            color: #fff; border: none;
        }
        .bento-cell.bento-photo:hover { color: #fff; border: none; }
        .hero-stage .float-card {
            position: absolute;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: .9rem 1.1rem;
            box-shadow: var(--shadow-md);
            font-weight: 600; font-size: .9rem;
            display: flex; align-items: center; gap: .65rem;
            min-width: 180px;
            animation: floaty 5s ease-in-out infinite;
        }
        .hero-stage .float-card .badge-circle {
            width: 38px; height: 38px; border-radius: 12px;
            background: var(--gradient-brand); color: #fff;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.1rem; flex-shrink: 0;
        }
        .hero-stage .float-card .v { font-weight: 800; font-size: 1.1rem; color: var(--ink); line-height: 1; }
        .hero-stage .float-card .l { font-size: .72rem; color: var(--ink-soft); margin-top: 2px; letter-spacing: .04em; text-transform: uppercase; }
        .hero-stage .fc-1 { top: 6%;   left: -10px; animation-delay: 0s; }
        .hero-stage .fc-2 { bottom:14%; right: -15px; animation-delay: 1.3s; }
        .hero-stage .fc-3 { bottom: -10px; left: 10%; animation-delay: 2.5s; }
        @keyframes floaty {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-10px); }
        }

        /* Декоративные «лапки» в углах секций */
        .paw-deco {
            position: absolute; font-size: 4rem; opacity: .12; line-height: 1;
            color: var(--brand); pointer-events: none;
            text-shadow: none;
        }

        /* ---- Marquee trust strip ---- */
        .marquee-wrap {
            background: var(--ink);
            color: #fff8e8;
            padding: .9rem 0;
            overflow: hidden;
            position: relative;
            border-top: 1px solid rgba(255,255,255,.08);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .marquee-track {
            display: flex; gap: 3.5rem;
            white-space: nowrap;
            animation: marquee 32s linear infinite;
            font-weight: 600; font-size: .92rem; letter-spacing: .03em;
        }
        .marquee-track span { display: inline-flex; align-items: center; gap: .5rem; }
        .marquee-track i { color: #ffa872; font-size: 1.05rem; }
        @keyframes marquee {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }

        /* ---- Bento grid ---- */
        .bento {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 160px;
            gap: 1rem;
        }
        .bento-cell {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 22px;
            padding: 1.4rem;
            transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
            position: relative; overflow: hidden;
            text-decoration: none; color: var(--ink);
            display: flex; flex-direction: column; justify-content: space-between;
        }
        .bento-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand); color: var(--ink); }
        .bento-cell h5 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
        .bento-cell .b-icon {
            width: 48px; height: 48px; border-radius: 14px;
            background: var(--surface-2); color: var(--brand-dark);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
        }
        .bento-cell .b-big {
            font-family: 'Fraunces', Georgia, serif;
            font-size: 2.6rem; font-weight: 900; line-height: 1;
            background: var(--gradient-brand);
            -webkit-background-clip: text; background-clip: text;
            color: transparent;
        }
        .bento-2x2 { grid-column: span 2; grid-row: span 2; padding: 1.8rem; background: var(--gradient-brand); color: #fff; border: none; }
        .bento-2x2:hover { color: #fff; border-color: transparent; }
        .bento-2x2 h3 {
            font-family: 'Fraunces', Georgia, serif; font-style: italic;
            color: #fff; font-size: 2.2rem; line-height: 1.1;
        }
        .bento-2x2 .b-icon { background: rgba(255,255,255,.18); color: #fff; }
        .bento-2x1 { grid-column: span 2; }
        .bento-1x2 { grid-row: span 2; }
        .bento-cell .deco-emoji {
            position: absolute; right: -8px; bottom: -16px;
            font-size: 6rem; line-height: 1; opacity: .15;
            pointer-events: none;
        }
        .bento-2x2 .deco-emoji { opacity: .22; font-size: 9rem; right: -10px; bottom: -20px; }

        @media (max-width: 991.98px) {
            .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
            .bento-2x2 { grid-column: span 2; grid-row: span 2; }
            .bento-2x1, .bento-1x2 { grid-column: span 1; grid-row: span 1; }
        }
        @media (max-width: 575.98px) {
            .bento { grid-template-columns: 1fr; }
            .bento-2x2, .bento-2x1, .bento-1x2 { grid-column: span 1; grid-row: span 1; }
        }

        /* ---- Section title (editorial) ---- */
        .sec-head {
            display: flex; justify-content: space-between; align-items: flex-end;
            flex-wrap: wrap; gap: 1rem;
            margin-bottom: 2rem;
        }
        .sec-head h2 {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(1.8rem, 3.4vw, 2.8rem);
            font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
            margin: 0;
        }
        .sec-head h2 em { font-style: italic; color: var(--brand-dark); }

        /* ---- Featured testimonial ---- */
        .testimonial-feature {
            background:
                radial-gradient(circle at 100% 0%, rgba(255,255,255,.2), transparent 60%),
                var(--gradient-brand);
            color: #fff;
            border-radius: 28px;
            padding: 2.5rem 2rem;
            position: relative; overflow: hidden;
            height: 100%;
            display: flex; flex-direction: column; justify-content: space-between;
        }
        .testimonial-feature .quote-mark { color: rgba(255,255,255,.4); font-size: 5rem; opacity: 1; }
        .testimonial-feature .testimonial-text { color: #fff; font-style: italic; font-size: 1.15rem; line-height: 1.5; }
        .testimonial-feature .testimonial-author { border-top: 1px solid rgba(255,255,255,.2); }
        .testimonial-feature .testimonial-avatar { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
        .testimonial-feature .deco-emoji {
            position: absolute; right: -20px; bottom: -30px;
            font-size: 12rem; opacity: .14; line-height: 1; pointer-events: none;
        }

        /* ---- Newsletter ---- */
        .newsletter-card {
            background:
                radial-gradient(800px 320px at 110% -30%, rgba(255,255,255,.18), transparent 60%),
                linear-gradient(135deg, #2a1d12 0%, #4a3120 100%);
            color: #fff8e8;
            border-radius: 32px;
            padding: 3rem 2.5rem;
            position: relative; overflow: hidden;
        }
        .newsletter-card::before {
            content: ''; position: absolute; right: -60px; bottom: -60px;
            width: 280px; height: 280px; border-radius: 50%;
            background: var(--gradient-brand); opacity: .18;
        }
        .newsletter-card h3 {
            font-family: 'Fraunces', Georgia, serif;
            color: #fff8e8; font-size: clamp(1.6rem, 3vw, 2.4rem);
            font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
        }
        .newsletter-card h3 em { font-style: italic; color: #ffa872; }
        .newsletter-form {
            display: flex; gap: .5rem; background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
            padding: 6px; max-width: 500px;
        }
        .newsletter-form input {
            border: none; background: transparent; flex: 1;
            color: #fff8e8; padding: .7rem 1rem; font-size: 1rem; font-weight: 500;
            outline: none;
        }
        .newsletter-form input::placeholder { color: rgba(255, 248, 232, .55); }
        .newsletter-form button {
            background: var(--gradient-brand); color: #fff; border: none;
            padding: .7rem 1.4rem; border-radius: 11px; font-weight: 700;
            box-shadow: 0 8px 18px rgba(151,96,58,.35);
            transition: transform .12s;
        }
        .newsletter-form button:hover { transform: translateY(-1px); }
        .newsletter-perks { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; color: rgba(255, 248, 232, .65); font-size: .85rem; }
        .newsletter-perks span i { color: #ffa872; margin-right: .35rem; }

        /* ---- Promo badges on product cards ---- */
        .promo-badge {
            position: absolute; top: 12px; left: 12px; z-index: 2;
            padding: .35rem .7rem; border-radius: 999px;
            font-size: .72rem; font-weight: 700;
            letter-spacing: .04em; text-transform: uppercase;
            box-shadow: 0 6px 14px rgba(0,0,0,.18);
            color: #fff;
        }
        .promo-bestseller { background: linear-gradient(135deg,#ff7a30,#e15a13); }
        .promo-new       { background: linear-gradient(135deg,#4caf6e,#2e8b4f); }
        .promo-sale      { background: linear-gradient(135deg,#e62782,#b81e68); }

        /* ---- Scroll reveal ---- */
        .reveal {
            opacity: 0; transform: translateY(24px);
            transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
        }
        .reveal.in { opacity: 1; transform: none; }

        /* ---- Sticky cart bar ---- */
        .sticky-cart-bar {
            position: fixed; left: 50%; transform: translateX(-50%) translateY(150%);
            bottom: 20px; z-index: 1040;
            background: var(--ink); color: #fff8e8;
            border-radius: 18px; padding: .85rem 1.1rem;
            box-shadow: 0 16px 36px rgba(0,0,0,.28);
            display: flex; align-items: center; gap: 1rem;
            min-width: 320px; max-width: 92vw;
            transition: transform .35s cubic-bezier(.2,.7,.3,1);
        }
        .sticky-cart-bar.show { transform: translateX(-50%) translateY(0); }
        .sticky-cart-bar .sc-icon {
            width: 40px; height: 40px; border-radius: 12px;
            background: var(--gradient-brand);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1.15rem;
        }
        .sticky-cart-bar .sc-info { flex: 1; line-height: 1.2; }
        .sticky-cart-bar .sc-info .sc-count { font-size: .78rem; color: rgba(255,248,232,.7); }
        .sticky-cart-bar .sc-info .sc-total { font-weight: 800; font-size: 1rem; }
        .sticky-cart-bar .sc-go {
            background: var(--gradient-brand); color: #fff; border: none;
            padding: .55rem 1.05rem; border-radius: 11px; font-weight: 700; font-size: .9rem;
            text-decoration: none; white-space: nowrap;
        }
        .sticky-cart-bar .sc-go:hover { color: #fff; transform: translateY(-1px); }
        @media (max-width: 575.98px) {
            .sticky-cart-bar { min-width: auto; width: 92vw; padding: .7rem; }
            .sticky-cart-bar .sc-info .sc-count { display: none; }
        }

        /* ---- Subtle scroll-snap on pet tiles row ---- */
        .scroll-row {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
        }
        @media (max-width: 991.98px) {
            .scroll-row { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 575.98px) {
            .scroll-row { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
        }

        /* ============================================================
           RESPONSIVE — мобильная адаптация для всех журнальных компонентов
           ============================================================ */

        /* === Планшет (≤ 991px) === */
        @media (max-width: 991.98px) {
            /* Magazine hero */
            .hero-mag { padding: 2.75rem 0 3.25rem; border-radius: 0 0 28px 28px; }
            .hero-mag .h-mag { font-size: clamp(1.9rem, 6vw, 2.6rem); }
            .hero-mag .lead { font-size: 1rem; }
            .hero-stage { display: none; }
            .paw-deco { font-size: 3rem !important; opacity: .08; }

            /* Bento */
            .bento { grid-auto-rows: 140px; gap: .75rem; }
            .bento-cell { padding: 1.1rem; border-radius: 18px; }
            .bento-cell h3 { font-size: 1.4rem !important; }
            .bento-cell h5 { font-size: 1rem; }
            .bento-cell .b-big { font-size: 1.8rem; }
            .bento-cell .b-icon { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 11px; }
            .bento-cell .deco-emoji { font-size: 4rem; }
            .bento-2x2 .deco-emoji { font-size: 6rem; }

            /* Section head — заголовок и кнопка в столбик */
            .sec-head { align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
            .sec-head h2 { font-size: clamp(1.5rem, 4vw, 2rem); }

            /* Marquee медленнее и компактнее */
            .marquee-track { gap: 2rem; font-size: .85rem; animation-duration: 38s; }

            /* Testimonial feature */
            .testimonial-feature { padding: 1.75rem 1.5rem; border-radius: 22px; }
            .testimonial-feature .testimonial-text { font-size: 1rem; }
            .testimonial-feature .quote-mark { font-size: 3.5rem; }
            .testimonial-feature .deco-emoji { font-size: 8rem; right: -10px; bottom: -20px; }

            /* Newsletter */
            .newsletter-card { padding: 2rem 1.5rem; border-radius: 24px; }
            .newsletter-card h3 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
            .newsletter-form { flex-direction: column; padding: 8px; gap: 8px; }
            .newsletter-form input { width: 100%; padding: .8rem 1rem; }
            .newsletter-form button { width: 100%; padding: .75rem; }
            .newsletter-perks { gap: .85rem; font-size: .78rem; }

            /* Hero-search полная ширина */
            .hero-search { max-width: none; }

            /* Display-serif общий */
            .display-serif { font-size: clamp(1.5rem, 4vw, 2rem) !important; }
        }

        /* === Телефоны (≤ 575px) === */
        @media (max-width: 575.98px) {
            /* Magazine hero — компактнее */
            .hero-mag { padding: 2rem 0 2.25rem; border-radius: 0 0 20px 20px; }
            .hero-mag .h-mag { font-size: 1.8rem; line-height: 1.1; }
            .hero-mag .lead { font-size: .95rem; }
            .hero-mag .btn-lg { width: 100%; display: block; margin: .25rem 0 !important; text-align: center; }

            /* Bento — 1 столбик, фикс высота отключается */
            .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .65rem; }
            .bento-cell { min-height: 120px; padding: 1.1rem; }
            .bento-2x2 { padding: 1.5rem; min-height: 200px; }
            .bento-2x2 h3 { font-size: 1.3rem !important; }
            .bento-cell .b-big { font-size: 2rem; }

            /* Hero search */
            .hero-search { border-radius: 14px; padding: 4px; }
            .hero-search input { font-size: .92rem; padding: .65rem .8rem; }
            .hero-search button { padding: .55rem .9rem; }

            /* Pet-tiles — компактнее */
            .pet-tile { padding: 1.1rem .75rem 1rem; border-radius: 18px; }
            .pet-tile .pet-emoji { font-size: 2.4rem; margin-bottom: .3rem; }
            .pet-tile .pet-photo { height: 64px; margin-bottom: .3rem; }
            .pet-tile h6 { font-size: .95rem; }
            .pet-tile small { font-size: .68rem; }
            .pet-tile::after { width: 80px; height: 80px; inset: auto -12px -16px auto; }

            /* Feature tile */
            .feature-tile { padding: 1.1rem 1rem; }
            .feature-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 12px; }

            /* Stat-tile */
            .stat-tile { padding: 1rem .8rem; }
            .stat-tile .stat-num { font-size: 1.6rem; }
            .stat-tile .stat-label { font-size: .78rem; }

            /* Sec-head */
            .sec-head { margin-bottom: 1rem; }
            .sec-head h2 { font-size: 1.4rem; }
            .sec-head .btn { padding: .5rem 1rem; font-size: .85rem; }

            /* Eyebrow */
            .eyebrow { font-size: .68rem; padding: .25rem .65rem; }
            .hero-eyebrow { font-size: .75rem; padding: .3rem .65rem; }

            /* Testimonials */
            .testimonial-card { padding: 1.25rem; }
            .testimonial-card .quote-mark { font-size: 2.5rem; top: 8px; right: 12px; }
            .testimonial-feature { padding: 1.5rem 1.25rem; border-radius: 20px; }
            .testimonial-feature .testimonial-text { font-size: .95rem; }
            .testimonial-feature .quote-mark { font-size: 3rem; }
            .testimonial-feature .testimonial-avatar { width: 40px; height: 40px; font-size: 1.2rem; }

            /* Newsletter */
            .newsletter-card { padding: 1.75rem 1.25rem; border-radius: 20px; }
            .newsletter-card::before { width: 180px; height: 180px; right: -50px; bottom: -50px; }
            .newsletter-perks { flex-direction: column; gap: .35rem; }

            /* Marquee */
            .marquee-wrap { padding: .65rem 0; }
            .marquee-track { gap: 1.5rem; font-size: .78rem; animation-duration: 26s; }
            .marquee-track i { font-size: .9rem; }

            /* Wave divider — меньше высота */
            .wave-divider { height: 40px; }

            /* Sticky cart bar */
            .sticky-cart-bar { bottom: 12px; padding: .6rem .7rem; border-radius: 14px; gap: .65rem; }
            .sticky-cart-bar .sc-icon { width: 36px; height: 36px; font-size: 1rem; }
            .sticky-cart-bar .sc-info .sc-total { font-size: .9rem; }
            .sticky-cart-bar .sc-go { padding: .45rem .8rem; font-size: .82rem; }

            /* Hero-bubble уже скрыт через d-none d-lg-block в HTML */
            /* Float-cards — гарантия что не вылезут */
            .hero-stage, .pet-orb, .float-card { display: none !important; }

            /* Payment grid */
            .pay-grid { gap: 1rem !important; }
            .card-3d-wrap { max-width: 340px; }
            .card-3d .number { font-size: 1.15rem; }
            .card-3d .brand { font-size: 1.1rem; }
            .summary-card { position: static !important; padding: 1.2rem; }

            /* Display-serif */
            .display-serif { font-size: 1.4rem !important; }
        }

        /* === Очень узкие телефоны (≤ 375px) === */
        @media (max-width: 374.98px) {
            .hero-mag .h-mag { font-size: 1.55rem; }
            .container { padding-left: 10px; padding-right: 10px; }
            .scroll-row { grid-template-columns: 1fr 1fr; }
            .navbar-brand { font-size: 1rem; }
            .navbar-brand .brand-mark { width: 30px; height: 30px; font-size: .9rem; }
        }

        /* === Защита от горизонтального скролла === */
        html, body { overflow-x: hidden; }
        /* Единая ширина контента: контейнер тянется по ширине экрана, но не шире 1200px
           и центрирован. Ниже 1200px — адаптивен (width:100% из Bootstrap с боковыми
           отступами). Цветные секции на .container-fluid остаются во всю ширину. */
        .container { max-width: 1200px; }
        .container-fluid { max-width: 100%; }
        img, svg, video { max-width: 100%; }

        /* ---- Responsive ---- */
        @media (max-width: 991.98px) {
            .hero { padding: 3rem 0 3.5rem; }
            .hero .display-4 { font-size: 2rem; }
            .hero .lead { font-size: 1rem; }
            .hero-emoji { font-size: 7rem; margin-top: 1.5rem; }
            .hero-bubble { display: none; }
            .display-4, .display-5, .display-6 { font-size: 1.75rem; }
            .product-placeholder, .service-placeholder { font-size: 3rem; }
            h1 { font-size: 1.6rem; }
            h2 { font-size: 1.4rem; }
            .media-placeholder { font-size: 5rem; }
        }
        @media (max-width: 575.98px) {
            .hero { padding: 2.25rem 0 2.5rem; border-radius: 0 0 24px 24px; }
            .hero .display-4 { font-size: 1.7rem; }
            .hero .btn-lg { display: block; width: 100%; margin: .25rem 0 !important; }
            .price { font-size: 1.1rem; }
            .navbar-brand { font-size: 1.1rem; }
            .site-footer { padding: 2rem 0 1rem; margin-top: 2.5rem; }
            .site-footer .row > * { margin-bottom: 1rem; }
            .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
            main .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
            main .btn-lg { width: 100%; }
            .btn-group, .btn-group-sm { flex-wrap: wrap; }
            .table { font-size: .9rem; }
            .table > :not(caption) > * > * { padding: .5rem .4rem; }
            h1 { font-size: 1.4rem; }
            .display-6 { font-size: 1.4rem; }
            .media-placeholder { font-size: 3.5rem; }
        }