/* ==========================================================================
   Mobile adaptation — shared overrides for all pages.
   Loaded AFTER each page's inline <style>, so unprefixed rules already win.
   !important is used selectively where vw-based inline rules would otherwise
   collapse fonts/spacing on small viewports.
   Breakpoints: <=900px (tablet & phone) and <=480px (small phone refinement).
   ========================================================================== */

/* === GLOBAL — cart icon (replaces "Корзина" text on mobile) === */
.cart-icon-svg { display: none; }            /* hidden on desktop — text is shown */
.nav-right a[href$="cart.html"] { display: inline-flex; align-items: center; }
@media (max-width: 900px) {
    .nav-right a[href$="cart.html"] .cart-text { display: none !important; }
    .cart-icon-svg {
        display: inline-block !important;
        width: 22px; height: 22px;
        color: inherit;
        vertical-align: middle;
    }
}

/* === GLOBAL (all viewports) — footer contact links === */
.footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
}
.footer-contact-links a {
    color: #0B0B0E;
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-contact-links a:hover { color: #29457C; }

@media (max-width: 900px) {

    /* force html/body to fill the visible viewport — some inline page CSS
       (e.g. width:100vw on .hero combined with body overflow-x:hidden) leaves
       leftover empty space on the right when the layout viewport mismatches
       the visual viewport. */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
    }
    /* sections that use 100vw — anchor to body width instead so they never
       end up wider OR narrower than the body. */
    .hero, .navbar, #popular, #protocol, #ingredients, #zones, #faq,
    #brand-statement, .footer-shell, #footer, .ct-map, .v3-hero, .blog-grid,
    .blog-tags, .catalog-categories, .catalog-search, .catalog-filters,
    .catalog-grid, .catalog-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* About-page hero: photo, gradients and the stats grid all sit at
       width: 100vw or inset: -10% — they bleed past body width when the
       visual viewport is wider than layout viewport (emulator/DevTools).
       Clamp the hero and all its descendants. */
    .v3-hero,
    .v3-hero-bg,
    .v3-hero-grid,
    .v3-hero-footer,
    .ab-intro,
    .ab-intro .container {
        max-width: 100% !important;
        width: 100% !important;
        right: auto !important;
    }
    .v3-hero-bg { inset: 0 !important; }   /* desktop uses inset:-10% which overflows */

    /* ---------- NAVBAR ---------- */
    /* keep the original fixed positioning — on real devices layout and
       visual viewports match, so the navbar fills the screen edge-to-edge
       and stays pinned at the top while scrolling through any section.
       Force a visible solid background (with blur) so it's always legible
       regardless of the section below — no relying on the .scrolled class. */
    .navbar {
        /* sticky следует за шириной body (нет visual-viewport-расхождений)
           и работает на iOS Safari без артефактов fixed-позиционирования.
           Mobile.js поднимает навбар в body как first-child, чтобы sticky
           работал на ВСЕХ страницах (включая index, где навбар изначально
           сидит внутри .hero). */
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        padding: 14px 18px !important;
        min-height: 56px;
        background: #FFFFFF !important;
        box-shadow: 0 1px 4px rgba(11, 11, 14, 0.08) !important;
        z-index: 9999 !important;
    }
    /* no need to force z-index on testimonials anymore — navbar lives in the
       root stacking context now and 9999 beats everything. */
    .nav-left a, .nav-right a {
        color: #0B0B0E !important;
    }
    .nav-center { color: #C9A04E !important; }
    /* push first-section content down by the navbar height so the hero
       photo isn't hidden under it on mobile. */
    body > .hero,
    body > .catalog-hero,
    body > .blog-hero,
    body > .ct-hero,
    body > section:first-of-type {
        margin-top: 0 !important;
    }
    .nav-burger {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        background: none; border: none;
        padding: 6px 8px 6px 0; margin-right: 4px;
        cursor: pointer; color: inherit; z-index: 102;
    }
    .nav-burger svg { width: 24px; height: 24px; display: block; }

    /* nav-left becomes a fullscreen drawer */
    .nav-left {
        display: none !important;
    }
    .navbar.nav-menu-open .nav-left {
        display: flex !important;
        position: fixed; inset: 56px 0 0 0;
        flex-direction: column;
        background: #FFFFFF;
        padding: 36px 28px 28px;
        gap: 18px !important;
        z-index: 101;
        overflow-y: auto;
    }
    .navbar.nav-menu-open .nav-left a {
        font-size: 22px !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase;
        color: #0B0B0E !important;
        padding: 6px 0;
        border-bottom: 1px solid rgba(11, 11, 14, 0.08);
    }
    .navbar.nav-menu-open .nav-left a:last-child { border-bottom: none; }
    .nav-center {
        font-size: 14px !important;
        letter-spacing: 0.18em !important;
    }
    .nav-right { display: flex; align-items: center; gap: 14px; }
    .nav-right a {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
    }
    .nav-search-btn { margin-left: 8px !important; }

    /* ---------- TYPOGRAPHY HELPERS ---------- */
    /* page wrappers — narrow left/right gutters so cards are roomy */
    .catalog-hero, .blog-hero, .ct-hero, .ct-wrap, .blog-tags,
    .catalog-search, .catalog-filters, .catalog-categories,
    .catalog-grid, .blog-grid, .pdp, .crumbs, .cart-hero, .cart-wrap,
    .container, .ab-intro .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ---------- CATALOG ---------- */
    .catalog-hero {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
        max-width: 100% !important;
    }
    .catalog-hero h1 { font-size: clamp(34px, 9vw, 56px) !important; }
    .catalog-hero p { font-size: 14px !important; line-height: 1.6 !important; }
    .catalog-hero-cta { margin-top: 28px !important; padding: 13px 26px !important; font-size: 12px !important; }
    /* category bento tiles — single column on mobile */
    .catalog-categories {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    .cat-tile { padding: 22px !important; border-radius: 24px !important; }
    /* В одноколоночной сетке все плашки полной ширины и одинаковой формы */
    .cat-tile,
    .cat-tile:not(.tile-lg),
    .cat-tile.tile-lg {
        grid-column: 1 / -1 !important;
        aspect-ratio: 1 / 1 !important;     /* квадратные крупные карточки */
        width: 100% !important;
    }
    /* МЕЛКИЕ плашки — оставляем компактный размер, отключаем перенос по слогам
       чтобы длинные русские слова типа «ОБЕЗВОЖЕННАЯ» не рвались по буквам. */
    .cat-tile h3 {
        font-size: 15px !important;
        line-height: 1.15 !important;
        hyphens: manual !important;
        -webkit-hyphens: manual !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }
    /* широкие плашки — крупный шрифт остаётся (текст помещается без переносов) */
    .cat-tile.tile-lg h3 {
        font-size: 24px !important;
        max-width: 90% !important;
        word-break: normal !important;
    }
    .cat-tile .tile-sub { font-size: 11px !important; }
    .cat-tile.tile-lg .tile-sub { font-size: 14px !important; line-height: 1.4 !important; }
    .cat-tile .tile-info { max-width: calc(100% - 110px) !important; }
    .cat-tile .tile-foot { right: 18px !important; bottom: 18px !important; }
    .cat-tile .tile-pill { padding: 10px 14px !important; font-size: 12px !important; }
    /* фростед-стрип увеличен только на широких — на мелких остаётся 24%. */
    .cat-tile.tile-lg .cat-tile-blur { height: 36% !important; }
    /* filters + search */
    .catalog-search { padding-top: 12px !important; padding-bottom: 12px !important; }
    .catalog-filters { padding-top: 30px !important; padding-bottom: 40px !important; gap: 8px !important; }
    .catalog-filter { padding: 9px 16px !important; font-size: 11px !important; letter-spacing: 0.08em !important; }
    /* product card grid — match the bestsellers card on the home page */
    .catalog-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .cat-card {
        border-radius: 18px !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* photo grows to fill all available card height (like .p-card on home) */
    .cat-img {
        aspect-ratio: auto !important;
        flex: 1 1 0 !important;
        min-height: 120px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
    .cat-info {
        flex: 0 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .cat-tag {
        font-size: 9px !important;
        letter-spacing: 0.12em !important;
        margin-bottom: 4px !important;
    }
    .cat-name {
        font-size: 12px !important;
        letter-spacing: 0.03em !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    .cat-desc { display: none !important; }    /* hide description on tight cards */
    .cat-bottom {
        margin-top: 6px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    .cat-price {
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .cat-price .vol { display: none !important; }   /* hide volume — not enough room */
    .cat-btn {
        padding: 8px 12px !important;
        font-size: 9px !important;
        letter-spacing: 0.06em !important;
        flex-shrink: 0 !important;
    }

    /* ---------- BLOG ---------- */
    .blog-hero { padding-top: 100px !important; padding-bottom: 36px !important; }
    .blog-hero h1 { font-size: clamp(36px, 10vw, 64px) !important; }
    .blog-hero p { font-size: 14px !important; }
    .blog-eyebrow { margin-bottom: 18px !important; }
    .blog-tags { gap: 8px !important; margin: 12px 0 28px !important; }
    .blog-tag { padding: 10px 16px !important; font-size: 11px !important; }
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding-bottom: 80px !important;
    }
    .blog-card { border-radius: 24px !important; padding: 22px !important; aspect-ratio: 3 / 4 !important; }
    .blog-card.is-feature {
        grid-column: span 1 !important;
        aspect-ratio: 3 / 4 !important;
        height: auto !important;
    }
    .blog-card h3 { font-size: 18px !important; }
    .blog-card.is-feature h3 { max-width: 100% !important; }
    .blog-meta { font-size: 10px !important; }
    .blog-read { padding: 10px 16px !important; font-size: 12px !important; }

    /* ---------- PRODUCT DETAIL ---------- */
    .crumbs { padding-top: 100px !important; font-size: 10px !important; }
    .pdp { padding-top: 18px !important; padding-bottom: 50px !important; }
    .pdp-main {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        margin-bottom: 36px !important;
    }
    .pdp-img { border-radius: 22px !important; padding: 36px !important; }
    .pdp-name { font-size: clamp(30px, 9vw, 48px) !important; margin-bottom: 18px !important; }
    .pdp-short { font-size: 14px !important; }
    .pdp-volume { padding: 10px 16px !important; font-size: 12px !important; }
    .pdp-price { font-size: 26px !important; }
    .pdp-actions { gap: 10px !important; }
    .pdp-btn { padding: 14px 28px !important; font-size: 12px !important; flex: 1 !important; }
    .pdp-meta { grid-template-columns: max-content 1fr !important; gap: 8px 16px !important; }
    .pdp-details { border-radius: 22px !important; padding: 26px !important; }
    .pdp-details summary { font-size: 15px !important; }

    /* ---------- CATEGORY PAGE ---------- */
    /* the cat-header / grid varies per page; rely on generic .container padding above */
    .cat-grid, [class*="category-grid"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* ---------- CART ---------- */
    .cart-hero { padding: 100px 20px 24px !important; flex-wrap: wrap !important; gap: 12px !important; }
    .cart-hero h1 { font-size: clamp(30px, 8vw, 48px) !important; }
    .cart-wrap {
        grid-template-columns: 1fr !important;
        padding-bottom: 60px !important;
        gap: 14px !important;
    }
    .cart-items { padding: 22px 18px !important; border-radius: 20px !important; }
    .cart-item {
        grid-template-columns: 80px 1fr !important;
        gap: 14px !important;
        padding: 18px 0 !important;
    }
    .cart-item-img { border-radius: 14px !important; padding: 10px !important; }
    .cart-item-name { font-size: 15px !important; }
    .cart-item-right {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 8px !important;
    }
    .cart-summary { position: static !important; padding: 24px !important; border-radius: 20px !important; }

    /* ---------- INDEX HOME ---------- */
    /* Hero: photo as full background, text + card overlaid on top in flow.
       Layout: navbar offset → flex spacer → white title/text → white card.
       NOTE: no `isolation: isolate` — would create a stacking context that
       traps the navbar inside hero (it sits in the DOM here), letting other
       sections like #testimonials render on top of the fixed navbar. */
    .hero {
        position: relative !important;
        min-height: 100vh;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 20px 36px !important;
        overflow: hidden !important;
    }
    .hero-bg {
        position: absolute !important;
        inset: 0 !important;
        height: auto !important;
        width: auto !important;
        z-index: 0 !important;
        background-position: 30% center !important;
    }
    /* darken the lower half so white text is readable over the photo */
    .hero::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg,
            rgba(11,11,14,0) 10%,
            rgba(11,11,14,0.35) 28%,
            rgba(11,11,14,0.75) 55%,
            rgba(11,11,14,0.92) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    .left-content {
        position: relative !important;
        z-index: 2 !important;
        left: auto !important; top: auto !important; right: auto !important;
        margin: auto 0 0 !important;     /* push down to the readable gradient area */
        padding: 0 !important;
    }
    .left-content h1 {
        font-size: clamp(30px, 9vw, 46px) !important;
        max-width: none !important;
        color: #FFFFFF !important;
        text-shadow: 0 2px 18px rgba(0,0,0,0.35);
    }
    .left-content .description {
        font-size: 14px !important; max-width: none !important;
        color: rgba(255,255,255,0.86) !important; opacity: 1 !important;
        text-shadow: 0 1px 12px rgba(0,0,0,0.3);
    }
    .left-content .btn-cream {
        background: #FFFFFF !important; color: #0B0B0E !important;
        margin-top: 22px !important; padding: 14px 30px !important; font-size: 12px !important;
    }
    .right-card {
        position: relative !important;
        z-index: 2 !important;
        right: auto !important; bottom: auto !important; left: auto !important;
        width: auto !important;
        margin: 22px 0 0 !important;
        padding: 26px 22px !important;
        border-radius: 22px !important;
    }
    .card-top-text { font-size: 12px !important; max-width: 100% !important; }
    .card-image { width: 90px !important; }
    .card-heading { font-size: 15px !important; }
    .card-body { font-size: 12px !important; max-width: 100% !important; }
    .btn-dark { padding: 14px 30px !important; font-size: 12px !important; }
    /* generic sections — fluid padding & auto height */
    #popular, #protocol, #ingredients, #faq, #brand-statement {
        padding: 60px 14px !important;
        height: auto !important;
        width: 100% !important;
    }
    /* ----- "Lines" sections (Методология, а не косметика / Концентрации...) -----
       Desktop has photo + card side-by-side; on mobile stack vertically and
       drop the text-column constraints so the title doesn't overflow. */
    .dl-lines { padding: 50px 0 !important; }
    .dl-lines-inner { padding: 0 14px !important; }
    .dl-lines-row,
    .dl-lines-row.reverse {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }
    .dl-lines-row > .dl-lines-photo {
        flex: none !important;
        width: 100% !important;
        aspect-ratio: 4 / 5 !important;
        border-radius: 18px !important;
    }
    .dl-lines-row > .dl-lines-card {
        flex: none !important;
        width: 100% !important;
        padding: 28px 24px 30px !important;
        border-radius: 18px !important;
    }
    .dl-lines-card-head {
        position: static !important;
        top: auto !important;
    }
    .dl-lines-cat { margin-bottom: 18px !important; font-size: 10px !important; }
    .dl-lines-title {
        font-size: clamp(28px, 8vw, 44px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.01em !important;
        margin: 0 0 18px !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    .dl-lines-desc {
        font-size: 14px !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        line-height: 1.6 !important;
    }
    .dl-lines-btn {
        padding: 14px 32px !important;
        font-size: 12px !important;
        align-self: flex-start !important;
    }
    /* ----- "Protocol" section (4 шага) -----
       Desktop has 3-column grid (number | verb | body) with 60px gap.
       Stack vertically on mobile and shrink the type. */
    .protocol-header { margin-bottom: 36px !important; }
    .protocol-header h2 {
        font-size: clamp(28px, 9vw, 44px) !important;
    }
    .protocol-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 28px 0 !important;
        align-items: start !important;
    }
    .protocol-row:hover {
        padding-left: 0 !important;
    }
    .protocol-number {
        font-size: 44px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }
    .protocol-row .protocol-verb {
        font-size: 20px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }
    .protocol-row .protocol-body p {
        font-size: 14px !important;
        max-width: 100% !important;
        margin: 0 !important;
        line-height: 1.6 !important;
    }
    /* ----- Zones section card — center it and shrink to fit mobile ----- */
    #zones { padding: 0 !important; min-height: 100vh !important; }
    .zones-card {
        left: 50% !important;
        right: auto !important;
        bottom: 24px !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 28px) !important;     /* matches 14px page gutter */
        max-width: none !important;              /* match other cards' full width */
        padding: 18px !important;
        gap: 16px !important;
        grid-template-columns: 110px 1fr !important;
        border-radius: 14px !important;
    }
    /* drop the beige container fill — the card itself is white, so the
       empty area above the bottom-anchored product photo blends in. */
    .zones-card-img {
        border-radius: 8px !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .zones-card-img img {
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    .zones-card-head { gap: 8px !important; margin-bottom: 8px !important; }
    .zones-card-num { font-size: 11px !important; }
    .zones-card-title { font-size: 15px !important; letter-spacing: 0.08em !important; }
    .zones-card-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }
    .zones-card-treatment-label { font-size: 9px !important; letter-spacing: 0.16em !important; }
    .zones-card-treatment-list { font-size: 11px !important; }
    /* shrink dot markers so they don't overlap the photo on small viewports */
    .zones-dot { width: 36px !important; height: 36px !important; font-size: 13px !important; }
    /* ----- Testimonials section — desktop min-width 440px overflows phone screen ----- */
    .ts-pin { padding: 30px 0 !important; }
    .ts-eyebrow { font-size: 12px !important; margin-bottom: 22px !important; }
    .ts-stack {
        width: calc(100% - 28px) !important;
        max-width: 320px !important;            /* немного меньше, чтобы tail-вращения вписались */
        aspect-ratio: 0.78 / 1 !important;
        margin: 0 auto !important;
    }
    /* транформы НЕ трогаем — JS делает карусель из 3 карточек через
       scale/rotate; их обрезает overflow:hidden у .ts-pin. */
    .ts-front {
        padding: 24px 24px 26px !important;
        border-radius: 24px !important;
    }
    .ts-front .ts-head { gap: 12px !important; margin-bottom: 22px !important; }
    .ts-front .ts-photo { width: 46px !important; height: 46px !important; flex-shrink: 0 !important; }
    .ts-front .ts-name { font-size: 13px !important; }
    .ts-front .ts-role { font-size: 11px !important; line-height: 1.4 !important; }
    .ts-front .ts-stars { font-size: 13px !important; flex-shrink: 0 !important; }
    .ts-front .ts-quote { font-size: 16px !important; line-height: 1.45 !important; }
    .ts-front .ts-product, .ts-front .ts-treatment-label { font-size: 10px !important; letter-spacing: 0.14em !important; }
    /* ----- FAQ header — swap columns so heading is left, FAQ chip is right ----- */
    .faq-container { padding: 0 !important; }
    .faq-left {
        grid-template-columns: 1fr auto !important;
        gap: 14px !important;
        align-items: start !important;
        margin-bottom: 40px !important;
    }
    .faq-left h2 {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: clamp(24px, 6vw, 32px) !important;
        line-height: 1.2 !important;
    }
    .faq-chip {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        margin-top: 6px !important;
    }
    /* per-zone position tweaks — face crops differently on mobile, dots need
       to nudge to land on the right features (override inline styles). */
    .zones-dot[data-zone="01"] { top: 28% !important; left: 58% !important; }
    .zones-dot[data-zone="02"] { top: 40% !important; left: 63% !important; }
    .zones-dot[data-zone="04"] { top: 58% !important; left: 72% !important; }
    /* bestsellers header — stack title + subtitle */
    .popular-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    .popular-header h2 { font-size: clamp(32px, 9vw, 52px) !important; }
    .popular-header span { font-size: 12px !important; line-height: 1.5 !important; }
    /* bento product grid → 2-column on mobile (smaller, denser cards) */
    .popular-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 10px !important;
        flex: none !important;
        min-height: auto !important;
    }
    .p-card,
    .p-card.p-card--lg,
    .p-card.p-card--sm {
        aspect-ratio: auto !important;
        padding: 12px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        /* the lg card spans 2 rows in the desktop bento layout; treat as
           a regular card on mobile so the grid is uniform 2-col */
        grid-row: auto !important;
        grid-column: auto !important;
    }
    /* photo fills all available space — text block at the bottom takes its
       natural height, photo grows so there's no empty middle area. */
    .p-card .p-img-wrap,
    .p-card--lg .p-img-wrap {
        aspect-ratio: auto !important;
        flex: 1 1 0 !important;
        min-height: 120px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
    .p-card.p-card--lg .p-img-wrap img,
    .p-card.p-card--lg:hover .p-img-wrap img {
        transform: none !important;
        animation: none !important;
    }
    /* info: natural size at the bottom of the card */
    .p-card .p-info,
    .p-card--lg .p-info {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    .p-card .p-name,
    .p-card--lg .p-name {
        font-size: 12px !important;
        letter-spacing: 0.03em !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }
    .p-card .p-scent,
    .p-card--lg .p-scent {
        font-size: 10px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    /* bottom row: price (bottom-left) + cart button (bottom-right) */
    .p-card .p-bottom,
    .p-card--lg .p-bottom {
        margin-top: 0 !important;
        padding-top: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    .p-card .p-price,
    .p-card--lg .p-price {
        font-size: 13px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .p-card .btn-cart,
    .p-card--lg .btn-cart {
        padding: 8px 12px !important;
        font-size: 9px !important;
        letter-spacing: 0.06em !important;
        flex-shrink: 0 !important;
    }

    /* ---------- ABOUT ---------- */
    .v3-hero { height: auto !important; min-height: 80vh; }
    .v3-hero-grid { padding: 18vh 20px 6vh !important; }
    .v3-hero-tags { gap: 10px !important; flex-wrap: wrap !important; }
    .v3-hero-title { font-size: clamp(34px, 10vw, 60px) !important; }
    /* "BIOLOGIQUE RECHERCHE" big strip — desktop white-space: nowrap and
       font-size: clamp(40,7.2vw,128) overflow the mobile body. */
    .ab-strip-title {
        font-size: clamp(22px, 7.5vw, 34px) !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 22px !important;
    }
    /* stats grid — 4 columns не помещаются, переключаем на 2 */
    .ab-strip-meta {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px 14px !important;
    }
    .ab-strip-col { font-size: 10px !important; }
    .v3-hero-footer { flex-direction: column !important; align-items: start !important; gap: 18px !important; }
    .v3-hero-footer .lead { text-align: left !important; max-width: 100% !important; }
    .ab-intro { padding: 80px 0 70px !important; }
    .ab-h2 { font-size: clamp(32px, 9vw, 52px) !important; }
    .ab-p { font-size: 15px !important; max-width: 100% !important; }

    /* ---------- CONTACTS ---------- */
    .ct-hero { padding: 100px 20px 30px !important; max-width: 100% !important; }
    .ct-hero h1 { font-size: clamp(30px, 9vw, 52px) !important; }
    .ct-hero p { font-size: 14px !important; }
    .ct-wrap {
        grid-template-columns: 1fr !important;
        padding-bottom: 60px !important;
        gap: 16px !important;
    }
    .ct-card { padding: 26px 24px !important; border-radius: 22px !important; }
    .ct-form-wrap {
        position: static !important;
        padding: 32px 26px !important;
        border-radius: 22px !important;
    }
    .ct-form-row { grid-template-columns: 1fr !important; }

    /* ---------- ARTICLE READER ---------- */
    .breadcrumb { padding: 100px 20px 0 !important; font-size: 10px !important; }
    .article-hero {
        padding: 24px 20px 36px !important;
        max-width: 100% !important;
    }
    .article-hero h1 { font-size: clamp(28px, 8vw, 48px) !important; line-height: 1.05 !important; }
    .article-lead { font-size: 15px !important; }
    .article-image {
        margin: 0 20px 36px !important;
        max-width: calc(100% - 40px) !important;
    }
    .article-body {
        max-width: 100% !important;
        padding: 0 20px 60px !important;
        font-size: 16px !important;
    }
    .article-body h2 { font-size: clamp(22px, 6vw, 32px) !important; }
    .article-body p { font-size: 16px !important; line-height: 1.65 !important; }
    .article-body blockquote { font-size: 18px !important; padding-left: 20px !important; }
    .related-section { padding: 0 20px 80px !important; }
    .related-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .related-card { aspect-ratio: 3 / 4 !important; padding: 22px !important; }
    .article-cta { margin: 0 20px 60px !important; padding: 32px 26px !important; border-radius: 22px !important; }

    /* ---------- FOOTER (Kresna-style across most pages) ---------- */
    #footer { padding: 130px 14px 36px !important; width: 100% !important; }
    .footer-reveal-text {
        font-size: clamp(22px, 7vw, 32px) !important;
        left: 14px !important; right: 14px !important;
        top: 14px !important;
    }
    /* minmax(0, 1fr) lets the column shrink to the container even if children
       (email form, long lines) have larger intrinsic widths. */
    .footer-stage {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .footer-brand-card,
    .footer-content-card {
        min-height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }
    /* брэнд-карточка на десктопе бежевая с золотистым радиальным glow —
       на мобильнике пользователь хочет чисто-белую как content card. */
    .footer-brand-card { background: #FFFFFF !important; }
    .footer-brand-card::after { display: none !important; }
    /* footer-content-card on desktop is a 2D grid `"nav cta" / "copy copy"`.
       On mobile collapse to single column so cta and copy stack below nav. */
    .footer-content-card {
        grid-template-areas: "nav" "cta" "copy" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 16px !important;
    }
    .footer-tagline { font-size: 14px !important; }
    /* nav cols on desktop use display: flex with gap: 160px — bring them
       into a 2-col grid with a sane gap. */
    .footer-nav-cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
        grid-area: nav !important;
    }
    .footer-col-head { font-size: 13px !important; margin-bottom: 16px !important; }
    .footer-col-list a { font-size: 14px !important; }
    /* the .footer-content-bottom element has display: contents on desktop,
       so its children (.footer-copy, .footer-cta) belong to the card grid. */
    .footer-content-bottom { display: contents !important; }
    .footer-cta {
        text-align: left !important;
        grid-area: cta !important;
        align-self: start !important;
    }
    .footer-copy {
        grid-area: copy !important;
        align-self: start !important;
    }
    .footer-cta-head { font-size: 16px !important; }
    .footer-form {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    .footer-form input {
        font-size: 13px !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    .footer-form button {
        padding: 10px 16px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }
    .footer-socials a { width: 34px !important; height: 34px !important; font-size: 11px !important; }

    /* ---------- GLOBAL SEARCH OVERLAY ---------- */
    .global-search-overlay { padding: 80px 14px 24px !important; }
    .global-search-panel { border-radius: 18px !important; }
    .global-search-head { padding: 14px 16px !important; }
    .global-search-input { font-size: 15px !important; }
    .global-search-result { padding: 10px 8px !important; gap: 12px !important; }
    .global-search-result .thumb { width: 46px !important; height: 46px !important; }
    .global-search-result .name { font-size: 13px !important; }
    .global-search-result .meta { font-size: 11px !important; }
    .global-search-result .price { font-size: 12px !important; }
    .global-search-hint { padding: 10px 16px !important; }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width: 480px) {
    /* keep 2-column catalog grid even on tiny phones — user prefers density */
    [class*="category-grid"] .cat-grid {
        grid-template-columns: 1fr !important;
    }
    /* keep bento tiles in 2 cols even on tiny phones — tile-lg уже растянут
       на оба столбца через grid-column: span 2 в верхнем блоке. */
    .pdp-volumes { gap: 6px !important; }
    .pdp-volume { padding: 9px 14px !important; font-size: 11px !important; }
    .cart-item-controls { gap: 10px !important; }
    .footer-nav-cols { grid-template-columns: 1fr !important; }
}

/* hide hamburger on desktop */
@media (min-width: 901px) {
    .nav-burger { display: none !important; }
    .navbar.nav-menu-open .nav-left { position: static !important; padding: 0 !important; background: none !important; }
}