/* icomoon — Journal3 icon font, reuse the same codepoints as v1 modules.
   Same-origin via our v2 listener's URL rewrite; no CORS issues on dev. */
@font-face {
    font-family: 'j3icomoon';
    src: url('../../icons/fonts/icomoon.woff2') format('woff2'),
         url('../../icons/fonts/icomoon.woff') format('woff'),
         url('../../icons/fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.j3i {
    font-family: 'j3icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}
/* Journal3 icomoon codepoints used on .com home */
.j3i-award::before   { content: "\e97e"; }  /* iconmonstr-award-23-badge */
.j3i-natural::before { content: "\eb51"; }  /* np_natural (leaf + drops) */
.j3i-eye::before     { content: "\eb54"; }  /* eye2 */
.j3i-leaf::before    { content: "\ea53"; }  /* np_fresh (leaf divider) */

/* Codepoints used on product page (matching v1 button-group icons) */
.j3i-cart::before    { content: "\e9f8"; }  /* shopping-bag (v1 .btn-cart in product-info) */
.j3i-flash::before   { content: "\eb31"; }  /* lightning bolt (v1 Buy Now / btn-extra-46) */
.j3i-heart::before   { content: "\ea93"; }  /* heart outline (v1 .btn-wishlist) */
.j3i-minus::before   { content: "\eb85"; }  /* stepper down (v1 .stepper .fa-angle-down) */
.j3i-plus::before    { content: "\eba0"; }  /* stepper up (v1 .stepper .fa-angle-up) */
.j3i-chat::before    { content: "\eaf9"; }  /* np_help-chat — Personal Support & Guidance */

/* v2 design tokens — real-logo palette v2 (23.05.2026, see docs/brand/PALETTE.md). */
:root {
    /* — Real-logo brand references (use only inside actual logo asset, не UI) — */
    --primary-500: #2C975F;        /* logo green (rgb 44,151,95) — точно из EPS */
    --secondary-500: #2F9999;      /* logo teal (rgb 47,153,153) */
    --accent-purple-logo: #734FA0; /* logo purple (U top) */
    --accent-magenta-logo: #8B216A;/* logo magenta (U bottom) */
    --accent-orange-logo: #E87A30; /* logo orange dot */

    /* — UI-stable shades, WCAG AA, для интерактивных элементов — */
    --primary-600: #1E6B3F;        /* Add to Cart, Sign Up, ::after underline, In Stock */
    --primary-700: #155032;        /* hover/focus */

    --secondary-600: #1F6D6E;      /* links, Read Our Story, Buy Now, header bar */
    --secondary-700: #155356;      /* hover/focus */

    --accent-purple: #734FA0;      /* hero CTA "Explore Our Range" */
    --accent-purple-700: #553877;  /* hover */
    --accent-magenta: #8B216A;     /* Sale / "Save X%" badges */
    --accent-orange: #E87A30;      /* NEW pill, "Only N left" */

    --warning: #B86E14;            /* warm bronze (NOT orange — that's NEW badge) */
    --error:   #B22A2A;            /* deep red, calm not alarming */

    /* — Decor-only shades, не из лого (для тёмных bg-блоков, не интерактив) — */
    --marquee-fg:      #5A7280;    /* marquee text — приглушённый сине-серый */
    --decor-teal-deep: #365F6E;    /* wholesale dark band bg, newsletter top stop — приглушён, не насыщен */
    --forest-teal:     #2D5F4A;    /* newsletter gradient companion (teal+green analogous) */

    --ink: #1C2021;                /* rgb(28,32,33) — primary text */
    --ink-secondary: #5A5E60;      /* rgb(90,94,96) — body copy */
    --ink-muted: #6E7275;          /* rgb(110,114,117) — captions, meta */

    --bg-page: #FAFAF7;            /* rgb(250,250,247) — global bg */
    --bg-white: #FFFFFF;
    --bg-section: #F5F3EE;
    --bg-footer-dark: #232829;

    --border: #E5E2D9;
    --radius: 4px;                 /* v1 uses 4px radii, not 10px */
    --container: 1440px;
    --content-pad: 5%;             /* v1 container uses 90% of viewport */

    --ff-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ff-head: "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 72px;
}

.v2-scope {
    color: var(--ink-secondary);
    background: var(--bg-page);
    font-family: var(--ff-body);
    font-size: 15px;
    line-height: 1.7;
}

.v2-scope .v2-container {
    max-width: var(--container);
    width: 90%;
    margin: 0 auto;
}

.v2-scope h1,
.v2-scope h2,
.v2-scope h3 {
    font-family: var(--ff-head);
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
}

.v2-scope a:not(.v2-btn) {
    color: var(--secondary-600);
    text-decoration: none;
}
.v2-scope a:not(.v2-btn):hover {
    color: var(--secondary-700);
    text-decoration: underline;
}

/* Button — used across sections, must override Journal3 link color */
.v2-btn,
a.v2-btn,
button.v2-btn {
    display: inline-block;
    padding: 16px 32px;
    background: var(--secondary-600);
    color: #fff !important;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--ff-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.v2-btn:hover,
a.v2-btn:hover,
button.v2-btn:hover {
    background: var(--secondary-700);
    color: #fff !important;
    text-decoration: none;
}

/* "Pink" CTA modifier — promo/sale only, max one per page (hero).
   Имя класса сохранено для обратной совместимости — фактический цвет теперь accent-purple. */
.v2-btn--pink,
a.v2-btn--pink,
button.v2-btn--pink {
    background: var(--accent-purple);
}
.v2-btn--pink:hover,
a.v2-btn--pink:hover,
button.v2-btn--pink:hover {
    background: var(--accent-purple-700);
}

/* Hide Journal3 footer newsletter module — we render our own on v2 pages */
.module.module-newsletter { display: none !important; }

/* Count badge (header cart/wishlist counter) — Journal3 SCSS считает foreground = чёрный
   на нашем тёмно-зелёном primary. Принудительно белая цифра на v2 страницах. */
body:has(.v2-home-com)    .count-badge.count-badge,
body:has(.v2-cat-com)     .count-badge.count-badge,
body:has(.v2-product-com) .count-badge.count-badge { color: #fff !important; }

/* ---------- Journal3 Recently Viewed (module-side_products) — v2 brand polish ----------
   Twig модуля под Journal3; правки только cosmetic через CSS overrides на v2 scope. */
body:has(.v2-product-com) .module.module-side_products,
body:has(.v2-cat-com)     .module.module-side_products,
body:has(.v2-home-com)    .module.module-side_products {
    background: var(--bg-section);
    padding: 40px 24px;
    border-radius: 12px;
    margin: 0 auto;
}
body:has(.v2-product-com) .module-side_products .side-products-tabs::before,
body:has(.v2-cat-com)     .module-side_products .side-products-tabs::before,
body:has(.v2-home-com)    .module-side_products .side-products-tabs::before {
    content: "Explore More";
    display: block;
    text-align: center;
    font-family: var(--ff-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary-500);
    margin: 0 0 14px;
}

/* Tabs — active green underline, inactive muted */
body:has(.v2-product-com) .module-side_products .nav-tabs > li > a,
body:has(.v2-cat-com)     .module-side_products .nav-tabs > li > a,
body:has(.v2-home-com)    .module-side_products .nav-tabs > li > a {
    font-family: var(--ff-head);
    font-size: 16px;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 12px;
}
body:has(.v2-product-com) .module-side_products .nav-tabs > li.active > a,
body:has(.v2-cat-com)     .module-side_products .nav-tabs > li.active > a,
body:has(.v2-home-com)    .module-side_products .nav-tabs > li.active > a {
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

/* side-products grid — поджать gap */
body:has(.v2-product-com) .module-side_products .side-products.auto-grid,
body:has(.v2-cat-com)     .module-side_products .side-products.auto-grid,
body:has(.v2-home-com)    .module-side_products .side-products.auto-grid {
    gap: 16px;
}

/* Product name + price типографика. Journal3 рендерит .caption > .name / .price
   (не .side-product .product-name). !important — модуль приходит с inline-весом
   через Journal3 CSS-vars system. */
body:has(.v2-product-com) .module-side_products .caption .name,
body:has(.v2-cat-com)     .module-side_products .caption .name,
body:has(.v2-home-com)    .module-side_products .caption .name,
body:has(.v2-product-com) .module-side_products .caption .name a,
body:has(.v2-cat-com)     .module-side_products .caption .name a,
body:has(.v2-home-com)    .module-side_products .caption .name a {
    font-family: var(--ff-head) !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}
body:has(.v2-product-com) .module-side_products .caption .price,
body:has(.v2-cat-com)     .module-side_products .caption .price,
body:has(.v2-home-com)    .module-side_products .caption .price {
    color: var(--primary-600) !important;
    font-weight: 600 !important;
}
body:has(.v2-product-com) .module-side_products .caption .price *,
body:has(.v2-cat-com)     .module-side_products .caption .price *,
body:has(.v2-home-com)    .module-side_products .caption .price * {
    color: var(--primary-600) !important;
}
body:has(.v2-product-com) .module-side_products .side-product img,
body:has(.v2-cat-com)     .module-side_products .side-product img,
body:has(.v2-home-com)    .module-side_products .side-product img {
    border-radius: 4px;
}

/* Inline branded "U" glyph — replaces the letter U in "Healthier U" to match the header wordmark. */
.brand-u { display: inline-block; height: 1.5em; width: auto; vertical-align: -0.45em; margin: 0 .02em; }
.v2-section__title .brand-u,
.v2-wholesale__title .brand-u { vertical-align: -0.4em; }
/* brand-U on the dark wholesale banner — white halo for contrast against teal bg. */
.v2-wholesale__sub .brand-u { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }

/* Phase 7.7 IA links — intentionally secondary to the page conversion CTA. */
.v2-ia-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 13px;
}
.v2-ia-links a {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.v2-ia-links a:hover { color: var(--primary-700); }
.v2-ia-links--product {
    margin: 12px 0 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
    .v2-ia-links { gap: 8px 14px; }
}