/*
 * kosmetika.ge global styles. Loads after tokens.css.
 *
 * Layout:
 *  1. @font-face for Noto Sans (subsetted to RU/EN/KA at build time).
 *  2. Reset + base typography.
 *  3. Container + layout primitives.
 *  4. Atoms ported from the design handoff (`.k-btn`, `.k-pill`, `.k-price`,
 *     `.k-card`, `.k-input`, `.k-pharma`, `.k-savings`, `.k-product-img`).
 *  5. Site chrome (header, footer, lang switcher, wordmark).
 *  6. Page-specific blocks (hero, categories, search results, product
 *     detail, comparison table, comparison cards, breadcrumb, 404, etc.).
 *
 * Mobile-first per ADR-011: media queries are min-width only. Comparison
 * renders as cards <768px, table ≥768px.
 */

/* ─── @font-face ────────────────────────────────────────────────────────── */
/*
 * Tri-script Noto Sans (per ADR-011 + design brief §3).
 * Real subset files are produced by scripts/subset-fonts.sh and dropped into
 * /wwwroot/fonts/. Until that script runs, the @font-face urls 404 silently
 * and the system-ui fallback in --font-sans takes over.
 */
@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/noto-sans-subset.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Georgian';
    src: url('/fonts/noto-sans-georgian-subset.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ─── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--ink-1);
    background-color: var(--surface-page);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* B-7: safety net against any escaped overflow (long unbreakable
       Georgian product names, comparison-table grid leaking on tight
       viewports). The page never wants a horizontal scrollbar at any
       breakpoint — content should wrap or shrink. */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    line-height: 1.2;
    margin-block: 0 var(--s-3);
    font-weight: 700;
}

/*
 * B-1: <FocusOnNavigate Selector="h1"> in Routes.razor sets `tabindex="-1"`
 * on every H1 after enhanced-nav and programmatically focuses it for screen
 * reader announcements. The browser default :focus outline then frames the
 * H1 visually. We strip the visible outline on programmatically-focused
 * non-interactive elements (tabindex="-1") so the SR announce path keeps
 * working without the visual artifact.
 */
:where(h1, .k-h1, .hero__headline, .product-hero__title, .not-found__headline,
       .empty-state__title, .search-page__count):focus {
    outline: none;
}
[tabindex="-1"]:focus {
    outline: none;
}

p { margin-block: 0 var(--s-3); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

mark { background: var(--accent-soft); color: var(--ink-1); padding: 0 2px; border-radius: 3px; }

/* ─── Container ─────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--s-4);
}

@media (min-width: 768px)  { .container { padding-inline: var(--s-6); } }
@media (min-width: 1200px) { .container { padding-inline: var(--s-9); } }

/* ─── Typography helpers (ported from handoff) ──────────────────────────── */
.k-h1 { font-size: var(--t-32); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.k-h2 { font-size: var(--t-24); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.k-h3 { font-size: var(--t-18); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.k-meta { font-size: var(--t-13); color: var(--ink-3); }

@media (min-width: 768px) {
    .k-h1 { font-size: var(--t-48); }
    .k-h2 { font-size: var(--t-28); }
    .k-h3 { font-size: var(--t-20); }
}

/* ─── Wordmark ──────────────────────────────────────────────────────────── */
.k-wordmark {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-1);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}
.k-wordmark .dot { color: var(--accent); }
.k-wordmark .tld { font-weight: 500; color: var(--ink-2); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.k-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-8);
    border: 1px solid var(--line-1);
    font-weight: 600;
    font-size: var(--t-14);
    cursor: pointer;
    background: var(--surface-card);
    color: var(--ink-1);
    transition: background .15s, border-color .15s, transform .05s;
    text-decoration: none;
}
.k-btn:hover { background: var(--surface-sunken); text-decoration: none; }
.k-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.k-btn svg { flex-shrink: 0; }
/*
 * Mobile tap-target modifier — only applied on buttons that are the
 * primary touch CTA on a mobile card (e.g. comparison-card click-out,
 * category tile tap zone). Desktop tabular CTAs respect the design's
 * 36px height and skip this.
 */
.k-btn--touch { min-height: var(--touch-target-min); }
.k-btn-accent {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.k-btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.k-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.k-btn-ghost:hover { background: var(--surface-sunken); color: var(--ink-1); }

/* ─── Pills (freshness etc.) ────────────────────────────────────────────── */
.k-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: var(--t-12); font-weight: 500;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--ink-2);
    border: 1px solid var(--line-1);
    white-space: nowrap;
}
.k-pill .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
    display: inline-block;
}
.k-pill.is-fresh  { background: var(--fresh-soft); color: #3a5d49; border-color: transparent; }
.k-pill.is-fresh  .dot { background: var(--fresh); }
.k-pill.is-normal .dot { background: var(--ink-3); }
.k-pill.is-stale  { background: var(--stale-soft); color: #6e4a25; border-color: transparent; }
.k-pill.is-stale  .dot { background: var(--stale); }
.k-pill.is-error  { background: var(--error-soft); color: #6f3a3a; border-color: transparent; }
.k-pill.is-error  .dot { background: var(--error); }

/* ─── Price ─────────────────────────────────────────────────────────────── */
.k-price {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.k-price .cur { color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.k-price.is-best { color: var(--accent-strong); }
.k-price.is-old  { color: var(--ink-3); text-decoration: line-through; font-weight: 500; }

/* ─── Pharmacy logo ─────────────────────────────────────────────────────── */
.k-pharma {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: var(--t-13);
    color: var(--ink-1);
}
/*
 * B-6: chip is the 28×28 rounded-square wrapper; either an <img> (real logo
 * SVG) or a fallback monogram <span> renders inside. The fallback monogram
 * starts hidden when an image is present (display:none on
 * --fallback) and is revealed by the inline `onerror` handler on the <img>.
 */
.k-pharma__chip {
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    background: var(--surface-sunken);
    border: 1px solid var(--line-1);
    position: relative;
}
.k-pharma__img { width: 100%; height: 100%; display: block; object-fit: cover; }
.k-pharma__glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-weight: 700; letter-spacing: .04em;
    color: var(--ink-1);
    font-feature-settings: "tnum";
}
.k-pharma__glyph--fallback { display: none; }
/* Legacy `.glyph` selector kept for any callers that might still emit the
   old DOM shape during a transition. Safe to remove once all renders are on
   the new structure. */
.k-pharma .glyph {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--surface-sunken);
    border: 1px solid var(--line-1);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px; letter-spacing: .04em;
    color: var(--ink-1);
    font-feature-settings: "tnum";
    flex: 0 0 auto;
}

/* ─── Savings pill ──────────────────────────────────────────────────────── */
.k-savings {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600; font-size: var(--t-12);
    white-space: nowrap;
}

/* ─── Input ─────────────────────────────────────────────────────────────── */
.k-input {
    width: 100%;
    height: 56px;
    padding: 0 18px 0 48px;
    border-radius: var(--r-12);
    border: 1px solid var(--line-1);
    background: var(--surface-card);
    font-size: var(--t-16);
    color: var(--ink-1);
    outline: none;
    box-shadow: var(--sh-1);
    font-family: inherit;
}
.k-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.k-input::placeholder { color: var(--ink-4); }

/* ─── Card ──────────────────────────────────────────────────────────────── */
.k-card {
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    box-shadow: var(--sh-1);
}

/* ─── Product image placeholder ─────────────────────────────────────────── */
.k-product-img {
    background:
        repeating-linear-gradient(135deg, #f3ede3 0 6px, #ece5d6 6px 12px);
    border-radius: var(--r-8);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    border: 1px solid var(--line-1);
    text-align: center;
    padding: 4px;
    overflow: hidden;
}
.k-product-img img {
    width: 100%; height: 100%; object-fit: contain;
}
/* When there's a real image inside, drop the placeholder pattern + border
   so the product photo isn't framed by a cream diagonal stripe (visible
   around portrait product bottles due to object-fit: contain whitespace).
   The frame is meant for the "no photo" fallback state only. */
.k-product-img:has(img) {
    background: transparent;
    border: none;
    padding: 0;
}
/* Same fix for the card-row thumb: when an image is present, drop the
   surface-page background tint so portrait bottles don't render against
   a beige square. */
.result-row__thumb:has(img) {
    background: transparent;
}

/* ─── Skeleton ──────────────────────────────────────────────────────────── */
@keyframes k-pulse {
    0%, 100% { background-color: var(--surface-sunken); }
    50%      { background-color: var(--line-1); }
}
.k-skeleton {
    background-color: var(--surface-sunken);
    border-radius: var(--r-8);
    animation: k-pulse 1.4s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Site chrome                                                              */
/* ═════════════════════════════════════════════════════════════════════════ */

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--surface-page);
    color: var(--ink-1);
}

.site-header {
    background-color: var(--surface-page);
    border-bottom: 1px solid transparent;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: inherit;
}

/* Right-side cluster — keeps the heart anchored next to the language
   switcher even when the search field is absent (homepage, /favorites,
   etc.). Without this wrap, justify-content: space-between would push
   the heart to the middle on no-search pages. */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}
.site-header__logo:hover { text-decoration: none; }

.site-main {
    flex: 1 0 auto;
    padding-block: 0;
}

.site-footer {
    border-top: 1px solid var(--line-1);
    background-color: var(--surface-page);
    color: var(--ink-3);
    font-size: var(--t-13);
}

.site-footer__inner {
    padding-block: var(--s-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.site-footer__line { margin: 0; }
.site-footer__contact a { color: var(--ink-2); }
.site-footer__contact a:hover { color: var(--ink-1); }

/* ─── Logo ──────────────────────────────────────────────────────────────── */
.logo { font-size: var(--t-18); }
@media (min-width: 768px) { .logo { font-size: var(--t-20); } }

/* ─── Language switcher ─────────────────────────────────────────────────── */

/* Mobile: custom <details> dropdown */
.lang-switcher-drop {
    position: relative;
    display: inline-block;
}
.lang-switcher-drop__trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 10px;
    font-size: var(--t-13);
    font-weight: 500;
    border: 1px solid var(--line-1);
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--ink-1);
    cursor: pointer;
    user-select: none;
}
.lang-switcher-drop__trigger::-webkit-details-marker { display: none; }
.lang-switcher-drop__caret { font-size: 10px; color: var(--ink-3); }
.lang-switcher-drop__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    box-shadow: 0 4px 12px rgba(41,38,27,.12);
    min-width: 80px;
    z-index: 100;
}
.lang-switcher-drop__item {
    display: block;
    padding: 8px 16px;
    font-size: var(--t-13);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.lang-switcher-drop__item:hover { background: var(--surface-sunken); color: var(--ink-1); text-decoration: none; }
.lang-switcher-drop__item--active { color: var(--ink-1); font-weight: 600; }

/* Desktop: segmented pill */
.lang-switcher { display: none; }

@media (min-width: 768px) {
    .lang-switcher-drop { display: none; }
    .lang-switcher {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 3px;
        background: var(--surface-sunken);
        border-radius: var(--r-pill);
        border: 1px solid var(--line-1);
    }
}

.lang-switcher__option {
    appearance: none;
    text-decoration: none;
    background: transparent;
    color: var(--ink-3);
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-weight: 500;
    font-size: var(--t-13);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: background .15s, color .15s, box-shadow .15s;
    border: 0;
    cursor: pointer;
}

.lang-switcher__option:hover { color: var(--ink-1); text-decoration: none; }

.lang-switcher__option--active {
    background: var(--surface-card);
    color: var(--ink-1);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(41, 38, 27, .08);
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Hero (homepage)                                                          */
/* ═════════════════════════════════════════════════════════════════════════ */

.hero { padding-block: var(--s-6) var(--s-5); background-color: var(--surface-page); }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__headline {
    font-size: var(--t-28);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--s-3);
    max-width: 24ch;
    /* B-7: Georgian headline can blow past viewport without wrap hint. */
    overflow-wrap: anywhere;
}
.hero__sub {
    font-size: var(--t-15);
    color: var(--ink-2);
    margin-bottom: var(--s-5);
    max-width: 56ch;
    line-height: 1.5;
}
.hero__search { width: 100%; max-width: 680px; position: relative; }
.hero__search-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
}

@media (min-width: 768px) {
    .hero { padding-block: var(--s-6) var(--s-6); }
    .hero__headline { font-size: var(--t-48); max-width: 22ch; }
    .hero__sub { font-size: var(--t-17); margin-bottom: var(--s-6); }
}

@media (min-width: 1024px) {
    .hero__headline { font-size: var(--t-48); max-width: 24ch; }
}

/* ─── Live demo (Gillette card) ─────────────────────────────────────────── */
.demo {
    padding-block: var(--s-5);
    max-width: 820px;
    margin-inline: auto;
    display: none; /* mobile hides per design (§10) */
}
@media (min-width: 768px) { .demo { display: block; } }

.demo__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    font-size: var(--t-13);
    color: var(--ink-3);
}
.demo__eyebrow-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: var(--t-12);
}
.demo__eyebrow-pill::before {
    content: "●"; font-size: 10px;
}

.demo__card {
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    box-shadow: var(--sh-1);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
@media (min-width: 768px) {
    .demo__card { flex-direction: row; padding: var(--s-4) var(--s-5); align-items: stretch; }
}

.demo__side {
    flex: 1;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-8);
    border: 1px solid var(--line-1);
    background: var(--surface-sunken);
}
.demo__side--best {
    background: var(--accent-soft);
    border-color: rgba(224, 122, 95, .18);
}
.demo__side-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--s-2);
}
.demo__side-tag {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3);
}
.demo__side--best .demo__side-tag { color: var(--accent-strong); }

.demo__center {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-2);
    padding-block: var(--s-2);
}
@media (min-width: 768px) { .demo__center { flex: 0 0 180px; padding: 0; } }

.demo__product-name { font-size: var(--t-13); color: var(--ink-2); font-weight: 500; line-height: 1.35; text-align: center; }
.demo__product-meta { font-size: var(--t-12); color: var(--ink-3); text-align: center; }

/* ═════════════════════════════════════════════════════════════════════════ */
/* Categories grid                                                          */
/* ═════════════════════════════════════════════════════════════════════════ */

.categories { padding-block: var(--s-5) var(--s-7); }
.categories__heading {
    font-size: var(--t-18);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 var(--s-4);
}

@media (min-width: 768px) {
    .categories { padding-block: var(--s-6) var(--s-9); }
    .categories__heading { font-size: var(--t-24); margin-bottom: var(--s-5); }
}

.categories__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--s-3);
}

@media (min-width: 480px) {
    .categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .categories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
}

/* ─── Category tile ─────────────────────────────────────────────────────── */
/* B-12 sub-issue 3: tiles previously used `flex` + `align-items: center`
   without a fixed height, so a 2-line Georgian label («პირის ღრუს ჰიგიენა»)
   pushed its row taller than its short-label neighbour, breaking the grid
   alignment. Lock the card to a `min-height` and use a 3-row grid (icon /
   body / spacer-bottom) so 1-line and 2-line labels align identically.
   The outer `.categories__grid` already locks tile width via
   `grid-template-columns: repeat(2|4, minmax(0,1fr))` so width parity is
   already covered — this rule fixes height only. */
.category-tile {
    background-color: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    box-shadow: var(--sh-1);
    padding: var(--s-4);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "icon body"
        ".    body";
    column-gap: var(--s-4);
    row-gap: 0;
    align-items: center;
    color: var(--ink-1);
    transition: border-color .15s, background .15s;
    cursor: pointer;
    text-decoration: none;
}
@media (min-width: 480px) {
    .category-tile { min-height: 116px; align-items: start; }
}
.category-tile:hover {
    border-color: var(--line-2);
    background: #fefdfb;
    text-decoration: none;
}
.category-tile__icon {
    grid-area: icon;
    width: 56px; height: 56px;
    flex: 0 0 56px;
    border-radius: 12px;
    background: var(--surface-sunken);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-1);
}
.category-tile__icon svg { width: 32px; height: 32px; }
@media (min-width: 480px) {
    .category-tile__icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; }
    .category-tile__icon svg { width: 24px; height: 24px; }
}
.category-tile__body {
    grid-area: body;
    min-width: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
}
.category-tile__name {
    /* B-8: long Georgian labels («სხეულის მოვლა», «პირის ღრუს ჰიგიენა»,
       «ბავშვის პროდუქტები») used to truncate with ellipsis. Switch to a
       2-line clamp so the full word is readable, capping at 2 lines so a
       runaway translation can't balloon the tile. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 600;
    font-size: var(--t-15);
    line-height: 1.3;
    color: var(--ink-1);
}
@media (min-width: 480px) {
    .category-tile__name { font-size: var(--t-14); }
}
.category-tile__count {
    display: block;
    font-size: var(--t-12);
    color: var(--ink-3);
    margin-top: 2px;
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Pharmacy trust strip (homepage, desktop only)                            */
/* ═════════════════════════════════════════════════════════════════════════ */
.trust-strip {
    display: none;
    padding-block: var(--s-3) var(--s-5);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: center;
    color: var(--ink-3);
    font-size: var(--t-13);
}
@media (min-width: 768px) { .trust-strip { display: flex; } }
.trust-strip__pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.trust-strip__pill {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    font-size: var(--t-12);
    font-weight: 600;
    color: var(--ink-2);
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Search results                                                           */
/* ═════════════════════════════════════════════════════════════════════════ */

.search-page { padding-block: var(--s-5) var(--s-7); }
/* Pagination ←/→ targets #results-top; offset the scroll-anchor so the
   page header isn't flush against the viewport edge. */
#results-top { scroll-margin-top: var(--s-4); }
.search-page__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.search-page__count {
    font-size: var(--t-15);
    font-weight: 600;
    color: var(--ink-1);
    margin: 0;
}
.search-page__sort {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-13);
    color: var(--ink-3);
    flex-wrap: wrap;
}
.search-page__sort-label { color: var(--ink-3); }
.search-page__sort-chip {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--t-13);
    border-radius: var(--r-pill);
}
.search-page__sort-chip[aria-current="page"] {
    background: var(--surface-card);
    color: var(--ink-1);
    border-color: var(--line-1);
    box-shadow: 0 1px 2px rgba(41, 38, 27, .08);
}

/*
 * B-11: chips wrap awkwardly on narrow viewports. We render BOTH the chip
 * row and a native <select>, then swap visibility by breakpoint. Chips win
 * at ≥768px (matches the desktop design); <select> takes over below.
 */
.sort-chips { display: none; }
.sort-select-wrap { display: inline-flex; align-items: center; gap: var(--s-2); }
.sort-select {
    width: 100%;
    max-width: 240px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-8);
    border: 1px solid var(--line-1);
    background: var(--surface-card);
    color: var(--ink-1);
    font-family: inherit;
    font-size: var(--t-14);
    font-weight: 500;
}
@media (min-width: 768px) {
    .sort-chips { display: inline-flex; flex-wrap: wrap; }
    .sort-select-wrap { display: none; }
}

.search-page__layout { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 1024px) {
    .search-page__layout { grid-template-columns: 240px 1fr; gap: var(--s-7); }
}

.search-page__sidebar { display: none; }
@media (min-width: 1024px) {
    .search-page__sidebar { display: block; }
    .search-page__sidebar h3 {
        font-size: var(--t-13);
        font-weight: 600;
        color: var(--ink-3);
        text-transform: uppercase;
        letter-spacing: .06em;
        margin: 0 0 var(--s-3);
    }
}
.filter-card { padding: var(--s-5); margin-bottom: var(--s-3); }
.filter-card__title { font-size: var(--t-13); font-weight: 600; margin-bottom: var(--s-3); color: var(--ink-1); }
.filter-card__list { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.filter-card__item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); color: var(--ink-2); cursor: pointer; }
.filter-card__range { display: flex; align-items: center; gap: var(--s-2); }
.filter-card__range input {
    width: 100%; height: 32px; padding: 0 8px;
    border-radius: 6px; border: 1px solid var(--line-1);
    font-size: var(--t-13); font-family: inherit;
}

.search-page__results,
.favorites-grid { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

/* ─── Result row (card) ─────────────────────────────────────────────────── */
.result-row {
    padding: var(--s-3);
    display: flex;
    gap: var(--s-3);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
    min-width: 0;
    overflow: hidden;
}
.result-row:hover { border-color: var(--line-2); text-decoration: none; }

.result-row__thumb {
    width: 80px; height: 80px;
    flex: 0 0 80px;
    overflow: hidden;
    border-radius: var(--r-2);
    background: var(--surface-page);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* B-16 (2026-05-08): constrain the inner <img> so portrait product
   photos (e.g. Titania hairbrush) don't render at intrinsic height
   and break the row card. `object-fit: contain` keeps the full image
   visible inside the square without distortion. */
.result-row__thumb img,
.result-row__thumb picture > img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.result-row__body { min-width: 0; flex: 1; }
.result-row__name {
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.result-row__meta { font-size: var(--t-12); color: var(--ink-3); margin-bottom: var(--s-2); }
.result-row__price-line {
    display: flex; align-items: baseline; gap: 6px;
}
.result-row__price-prefix { font-size: var(--t-12); color: var(--ink-3); }
.result-row__footer {
    margin-top: var(--s-2);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.result-row__pharm-count { font-size: var(--t-12); color: var(--ink-3); }
.result-row__pharm-glyphs {
    display: none;
    align-items: center;
    gap: 6px;
}
@media (min-width: 768px) {
    .result-row__pharm-glyphs { display: inline-flex; }
}
.result-row__price-line--to {
    font-size: var(--t-12);
    color: var(--ink-3);
}

/* Desktop variant: grid layout */
@media (min-width: 768px) {
    .result-row {
        padding: var(--s-5) var(--s-5);
        display: grid;
        grid-template-columns: 80px 1fr auto;
        gap: var(--s-5);
        align-items: center;
    }
    .result-row__thumb { width: 80px; height: 80px; flex: none; }
    .result-row__name { font-size: var(--t-15); margin-bottom: 4px; -webkit-line-clamp: 2; }
    .result-row__meta { font-size: var(--t-13); margin-bottom: var(--s-3); }
    .result-row__footer { margin-top: 0; align-items: center; justify-content: flex-start; gap: var(--s-4); flex-wrap: nowrap; }
    .result-row__price-block {
        text-align: right;
        display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    }
    .result-row__price-line { gap: 8px; }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Category landing (B-9)                                                   */
/* ═════════════════════════════════════════════════════════════════════════ */
.category-hero { padding-block: var(--s-5) var(--s-3); background-color: var(--surface-page); }
.category-hero__title {
    font-size: var(--t-24);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}
.category-hero__count { color: var(--ink-3); font-size: var(--t-14); margin: 0; }
@media (min-width: 768px) {
    .category-hero { padding-block: var(--s-6) var(--s-4); }
    .category-hero__title { font-size: var(--t-32); }
}

/* Category intro paragraph — substantive original copy under the hero,
   above the result grid. Helps reviewers/Google see content per category
   beyond just an H1 + filter UI. */
.category-intro {
    padding-block: 0 var(--s-5);
    background-color: var(--surface-page);
}
.category-intro p {
    color: var(--ink-2);
    font-size: var(--t-14);
    line-height: 1.6;
    max-width: 760px;
    margin: var(--s-3) 0 0;
}
@media (min-width: 768px) {
    .category-intro p { font-size: var(--t-15); }
}

/* Collapsible intro (native <details>). Closed by default. The summary
   row reads as a quiet link; the disclosure triangle is replaced by a
   small chevron so the affordance matches our other expandable surfaces.
   No JS — works under pure Blazor SSR. */
.category-intro__details {
    max-width: 760px;
}
.category-intro__summary {
    cursor: pointer;
    color: var(--ink-3);
    font-size: var(--t-13);
    line-height: 1.4;
    user-select: none;
    list-style: none;             /* hide default disclosure triangle (FF) */
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) 0;
}
.category-intro__summary::-webkit-details-marker { display: none; }
.category-intro__summary::after {
    content: "›";
    display: inline-block;
    transform: rotate(90deg);
    transition: transform .15s ease;
    font-size: var(--t-14);
    line-height: 1;
}
.category-intro__details[open] > .category-intro__summary::after {
    transform: rotate(-90deg);
}
.category-intro__summary:hover { color: var(--ink-1); }

.category-page { padding-block: var(--s-3) var(--s-7); }

.category-brands-mobile {
    display: flex; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-5);
}
.category-brands__select {
    flex: 1;
    height: 36px;
    padding: 0 var(--s-3);
    font-size: var(--t-14);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    background: var(--surface-card);
    color: var(--ink-1);
    cursor: pointer;
}
.category-brands__label {
    font-size: var(--t-13);
    color: var(--ink-3);
    white-space: nowrap;
}
.filter-card__brand-select {
    width: 100%;
    margin-top: var(--s-2);
}
@media (min-width: 768px) {
    .category-brands-mobile { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Empty state                                                              */
/* ═════════════════════════════════════════════════════════════════════════ */
.empty-state {
    padding-block: var(--s-9);
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
}
.empty-state__title { font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em; margin: var(--s-4) 0 var(--s-2); }
.empty-state__body { color: var(--ink-2); font-size: var(--t-14); margin-bottom: var(--s-5); }
.empty-state__suggestions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.empty-state__suggestion {
    padding: 7px 12px;
    border-radius: var(--r-pill);
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    font-size: var(--t-13);
    font-weight: 500;
    color: var(--ink-1);
}
.empty-state__suggestion:hover { text-decoration: none; border-color: var(--line-2); }

@media (min-width: 768px) {
    .empty-state__title { font-size: var(--t-28); }
    .empty-state__body  { font-size: var(--t-15); }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Product detail                                                           */
/* ═════════════════════════════════════════════════════════════════════════ */

.product-page { padding-block: var(--s-3) var(--s-9); }

.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--t-13);
    color: var(--ink-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-4);
    /* B-7: breadcrumb tail (the truncated product name) needs to wrap
       cleanly on Georgian viewports rather than pushing the row past the
       viewport edge. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:last-child { color: var(--ink-2); font-weight: 500; }
.breadcrumb__sep { color: var(--ink-4); font-size: 11px; }

.product-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}
@media (min-width: 768px) {
    .product-hero { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-7); }
}

.product-hero__image {
    width: 100%;
    aspect-ratio: 1.4;
}
@media (min-width: 768px) {
    .product-hero__image { aspect-ratio: 1; height: 320px; }
}

.product-hero__pills { display: flex; gap: var(--s-2); margin-bottom: var(--s-2); flex-wrap: wrap; }
.product-hero__pill {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    font-size: var(--t-12);
    font-weight: 600;
    color: var(--ink-2);
}
.product-hero__pill--meta { font-weight: 500; }

.product-hero__title {
    font-size: var(--t-18);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 4px 0 var(--s-3);
    /* B-7: long Georgian product names («ვიში ლიფტაქტივ სუპრემ 50მლ») don't
       wrap with the default `overflow-wrap: normal`, pushing the page wider
       than the viewport on iPhone-sized screens. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (min-width: 768px) {
    .product-hero__title { font-size: var(--t-24); line-height: 1.25; margin-bottom: var(--s-4); }
}

.product-hero__summary {
    display: flex; align-items: center; gap: var(--s-3);
    margin-bottom: var(--s-4);
    flex-wrap: wrap;
    font-size: var(--t-13);
    color: var(--ink-3);
}

/* ─── Comparison table (desktop ≥768px) ─────────────────────────────────── */
.comparison-table {
    border-radius: var(--r-12);
    overflow-x: auto;
    border: 1px solid var(--line-1);
    background: var(--surface-card);
    display: none;
}
@media (min-width: 768px) { .comparison-table { display: block; } }

.comparison-table__head {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) minmax(110px, 1fr) minmax(90px, 1fr) 140px;
    gap: var(--s-3);
    padding: 10px var(--s-5);
    background: var(--surface-sunken);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: min-content;
}
.comparison-table__row {
    display: grid;
    grid-template-columns: minmax(140px, 1.5fr) minmax(110px, 1fr) minmax(90px, 1fr) 140px;
    align-items: center;
    gap: var(--s-3);
    padding: 14px var(--s-5);
    border-top: 1px solid var(--line-1);
    min-width: min-content;
}
.comparison-table__row--best {
    background: var(--surface-tint);
    border-top: 1px solid rgba(224,122,95,.25);
    border-bottom: 1px solid rgba(224,122,95,.25);
}
.comparison-table__row--out { opacity: 0.55; }
/*
 * B-2 / B-3: pharmacy column now stacks logo+name above the "best" pill,
 * so the pill has the full column width (~200px) and never overflows into
 * the price column on Georgian / long-locale strings. white-space:nowrap
 * + max-width:100% are belt-and-braces against very narrow viewports.
 */
.comparison-table__pharm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.comparison-table__best-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    max-width: 100%;
    align-self: flex-start;
}
.comparison-table__stock { font-size: var(--t-13); color: var(--ink-2); font-weight: 500; }
.comparison-table__stock--out { color: var(--error); }
.comparison-table__cta { width: 100%; min-height: 36px; font-size: var(--t-13); padding-block: 0; }

/* ─── Comparison cards (mobile <768px) ──────────────────────────────────── */
.comparison-cards {
    display: flex; flex-direction: column;
    gap: var(--s-2);
}
@media (min-width: 768px) { .comparison-cards { display: none; } }

.comparison-card {
    padding: var(--s-3);
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    box-shadow: var(--sh-1);
}
.comparison-card--best {
    background: var(--surface-tint);
    border-color: rgba(224,122,95,.25);
}
.comparison-card--out { opacity: 0.6; }
.comparison-card__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.comparison-card__price-line {
    display: flex; align-items: baseline; gap: var(--s-2);
    margin-bottom: 6px;
}
.comparison-card__meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: var(--s-3);
    font-size: var(--t-12);
    color: var(--ink-3);
}
.comparison-card__meta--out { color: var(--error); }
.comparison-card__cta {
    width: 100%;
    min-height: 42px;
}

.product-toolbar {
    margin-top: var(--s-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.product-toolbar__stale-toggle .chevron {
    transition: transform .15s ease;
}
.product-toolbar__stale-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}
.product-toolbar__report {
    display: none;
    font-size: var(--t-12);
    color: var(--ink-3);
    text-decoration: underline;
    text-decoration-color: var(--line-2);
    text-underline-offset: 3px;
}
@media (min-width: 768px) { .product-toolbar__report { display: inline; } }

.product-attrs {
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
}
@media (min-width: 768px) {
    .product-attrs { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.product-attrs h3 { margin-bottom: var(--s-3); }
.product-attrs dl {
    margin: 0;
    display: grid;
    grid-template-columns: 110px 1fr;
    row-gap: 6px;
    column-gap: var(--s-3);
    font-size: var(--t-13);
}
@media (min-width: 768px) {
    .product-attrs dl { grid-template-columns: 140px 1fr; row-gap: 8px; column-gap: var(--s-4); font-size: var(--t-14); }
}
.product-attrs dt { color: var(--ink-3); margin: 0; }
.product-attrs dd { color: var(--ink-1); margin: 0; }

.product-desc { color: var(--ink-2); font-size: var(--t-13); line-height: 1.55; margin: 0; }
@media (min-width: 768px) { .product-desc { font-size: var(--t-14); } }

/* ─── Freshness badge tooltip ───────────────────────────────────────────── */
.freshness-badge { position: relative; display: inline-flex; }
.freshness-badge__tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink-1);
    color: var(--surface-card);
    font-size: var(--t-12);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--r-6);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 10;
}
.freshness-badge:hover .freshness-badge__tip,
.freshness-badge:focus-within .freshness-badge__tip { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════════════ */
/* 404                                                                      */
/* ═════════════════════════════════════════════════════════════════════════ */

.not-found { padding-block: var(--s-7) var(--s-9); }
.not-found__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.not-found__illustration { display: inline-block; margin: 0 auto; }
.not-found__code {
    font-size: 48px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: -0.02em;
    margin: var(--s-3) 0 var(--s-2);
    font-feature-settings: "tnum";
}
@media (min-width: 768px) { .not-found__code { font-size: 64px; } }
.not-found__headline { font-size: var(--t-24); margin-bottom: var(--s-3); }
@media (min-width: 768px) { .not-found__headline { font-size: var(--t-28); } }
.not-found__sub { color: var(--ink-2); font-size: var(--t-15); margin-bottom: var(--s-6); line-height: 1.55; }
.not-found__search { width: 100%; max-width: 480px; margin-inline: auto; position: relative; }
.not-found__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.not-found__categories { margin-top: var(--s-6); }
.not-found__categories-heading {
    font-size: var(--t-13);
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--s-3);
}
.not-found__categories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    flex-wrap: wrap;
}
.not-found__categories-list a {
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    font-size: var(--t-13);
    font-weight: 500;
    color: var(--ink-1);
}

/* ─── Search input wrapper (icon prefix) ────────────────────────────────── */
.search-input { position: relative; }
.search-input__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
    display: inline-flex;
}
.search-input--big .k-input { height: 64px; font-size: var(--t-18); padding-left: 52px; }

@media (min-width: 768px) {
    .hero__search .k-input { height: 64px; font-size: var(--t-18); padding-left: 52px; }
}

/*
 * Compact header search field (search + product detail pages, ≥768px).
 * Pill-shaped, 42px tall — design `DesktopHeader showSearch`.
 */
.search-input--header { width: 100%; max-width: 420px; }
.search-input--header .k-input {
    height: 42px;
    border-radius: var(--r-pill);
    font-size: var(--t-14);
    padding-left: 42px;
    box-shadow: none;
}
.search-input--header .search-input__icon { left: 14px; }

/* B-15 autocomplete dropdown. Anchors to the .search-input form (relative). */
.search-input__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--surface-card);
    border: 1px solid var(--surface-sunken);
    border-radius: var(--r-12);
    box-shadow: 0 12px 32px rgba(41, 38, 27, 0.12);
    max-height: 60vh;
    overflow-y: auto;
}
.search-input__suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--ink-1);
}
.search-input__suggestion.is-active {
    background: var(--surface-sunken);
}
.search-input__suggestion-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 36px;
    background: var(--surface-card);
    border-radius: var(--r-6);
}
.search-input__suggestion-img--empty {
    background: var(--surface-sunken);
    display: inline-block;
}
.search-input__suggestion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.search-input__suggestion-brand {
    font-size: var(--t-12);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.search-input__suggestion-name {
    font-size: var(--t-14);
    color: var(--ink-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__search {
    display: none;
    flex: 1;
    justify-content: center;
}
.site-header--with-search .site-header__search { display: flex; }

/* ═════════════════════════════════════════════════════════════════════════ */
/* Footer extras (legal links)                                              */
/* ═════════════════════════════════════════════════════════════════════════ */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-size: var(--t-13);
}
.site-footer__links a {
    color: var(--ink-2);
    text-decoration: none;
}
.site-footer__links a:hover { color: var(--ink-1); text-decoration: underline; }
.site-footer__sep { color: var(--ink-4); }

@media (min-width: 768px) {
    .site-footer__links { gap: var(--s-3); }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Legal / About pages                                                      */
/* ═════════════════════════════════════════════════════════════════════════ */
.legal-page {
    padding-block: var(--s-6) var(--s-9);
    max-width: 760px;
}
.legal-page__title {
    font-size: var(--t-28);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-3);
}
@media (min-width: 768px) {
    .legal-page__title { font-size: var(--t-40); margin-bottom: var(--s-4); }
}
.legal-page__updated {
    color: var(--ink-3);
    font-size: var(--t-13);
    margin-bottom: var(--s-6);
}
.legal-page__section { margin-bottom: var(--s-6); }
.legal-page__h2 {
    font-size: var(--t-20);
    margin-bottom: var(--s-3);
}
.legal-page p {
    color: var(--ink-2);
    line-height: 1.6;
    font-size: var(--t-15);
}
.legal-page a { color: var(--accent-strong); text-decoration: underline; }
.legal-page a:hover { color: var(--accent); }
.legal-page__contact-line strong { color: var(--ink-1); margin-right: 4px; }

/* ═════════════════════════════════════════════════════════════════════════ */
/* Ad slot                                                                  */
/* ═════════════════════════════════════════════════════════════════════════ */
.partner-card { display: block; }

/* Adsterra wrapper — minimal chrome since Adsterra's invoke.js renders
   its own creative styling inside the container div. We just provide the
   "Ad" label + a card border so the slot reads as sponsored at a glance. */
.partner-card--ext {
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    box-shadow: var(--sh-1);
    padding: var(--s-3);
    margin-block: var(--s-2);
}
.partner-card--ext .partner-card__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-sunken);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    margin-bottom: var(--s-2);
}
.partner-card--ext { text-align: center; overflow: hidden; }
.partner-card--ext iframe { display: inline-block; max-width: 100%; }
.partner-card__card {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3);
    align-items: center;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .15s, transform .05s;
    position: relative;
}
.partner-card__card:hover {
    border-color: var(--line-2);
    text-decoration: none;
}
.partner-card__image {
    width: 80px; height: 80px;
    flex: 0 0 80px;
    background: var(--surface-page);
    border-radius: var(--r-8);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.partner-card__image img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.partner-card__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.partner-card__label {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-sunken);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}
.partner-card__headline {
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--ink-1);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.partner-card__copy {
    font-size: var(--t-13);
    color: var(--ink-2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.partner-card__cta {
    margin-top: 4px;
    font-size: var(--t-13);
    font-weight: 600;
    color: var(--accent-strong);
}

.partner-card--inline { margin-block: var(--s-2); }

/* Inline cards that opt into dismissal need their own positioning context
   so the absolutely-positioned `.partner-card__dismiss` lands inside the
   card instead of against the page. Top-right corner placement matches
   common "close this banner" affordances and keeps the hit target away
   from the card's CTA. */
.partner-card--inline.partner-card--dismissible { position: relative; }
.partner-card--inline.partner-card--dismissible .partner-card__dismiss {
    top: 4px;
    right: 4px;
    transform: none;
}
@media (min-width: 768px) {
    .partner-card--inline .partner-card__card {
        padding: var(--s-4) var(--s-5);
        gap: var(--s-5);
    }
    .partner-card--inline .partner-card__headline { font-size: var(--t-15); }
    .partner-card--inline .partner-card__copy { font-size: var(--t-14); }
}

.partner-card--banner { margin-block: var(--s-5); }
.partner-card--banner .partner-card__card { padding: var(--s-3); gap: var(--s-3); }
@media (min-width: 768px) {
    .partner-card--banner .partner-card__card {
        padding: var(--s-4) var(--s-5);
        gap: var(--s-5);
    }
    .partner-card--banner .partner-card__headline { font-size: var(--t-15); }
    .partner-card--banner .partner-card__copy { font-size: var(--t-14); }
}

/* Visibility utilities. partner-cards.js skips impressions for elements with
   display:none, so the off-viewport variant doesn't over-count. */
.partner-card--hide-desktop { /* visible on mobile, hidden on desktop */ }
.partner-card--hide-mobile  { display: none; }
@media (min-width: 768px) {
    .partner-card--hide-desktop { display: none; }
    .partner-card--hide-mobile  { display: block; }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Local admin (/admin/ads)                                                 */
/* ═════════════════════════════════════════════════════════════════════════ */
.admin-page { padding-block: var(--s-5) var(--s-9); max-width: 920px; }
.admin-page h1, .admin-page h2 { letter-spacing: -0.01em; }
.admin-page code {
    font-family: var(--font-mono);
    font-size: var(--t-13);
    background: var(--surface-sunken);
    padding: 1px 6px;
    border-radius: var(--r-4);
}
.admin-status {
    margin-block: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-8);
    font-size: var(--t-14);
    font-weight: 500;
}
.admin-status--ok  { background: var(--fresh-soft); color: #3a5d49; }
.admin-status--err { background: var(--error-soft); color: #6f3a3a; }

.admin-ads-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    overflow: hidden;
    font-size: var(--t-13);
}
.admin-ads-table th, .admin-ads-table td {
    padding: 10px var(--s-3);
    text-align: left;
    border-bottom: 1px solid var(--line-1);
    vertical-align: top;
}
.admin-ads-table tbody tr:last-child td { border-bottom: 0; }
.admin-ads-table th {
    background: var(--surface-sunken);
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .06em;
}
.admin-pc-thumb {
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: var(--r-6);
    background: var(--surface-sunken);
    border: 1px solid var(--line-1);
}
.admin-ads-row--editing {
    background: var(--accent-soft);
}
.admin-ads-row--editing td:first-child code {
    background: var(--surface-card);
}
.admin-form__field input[readonly] {
    background: var(--surface-sunken);
    color: var(--ink-2);
    cursor: not-allowed;
}

.admin-ad-form {
    background: var(--surface-card);
    border: 1px solid var(--line-1);
    border-radius: var(--r-12);
    padding: var(--s-5);
    box-shadow: var(--sh-1);
}
.admin-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
}
.admin-form__field { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-13); }
.admin-form__field--full { grid-column: 1 / -1; }
.admin-form__field span { color: var(--ink-2); font-weight: 500; }
.admin-form__field input,
.admin-form__field select {
    height: 36px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line-1);
    border-radius: var(--r-6);
    background: var(--surface-card);
    color: var(--ink-1);
    font-family: inherit;
    font-size: var(--t-14);
}
.admin-form__field input:focus,
.admin-form__field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-form__fieldset {
    margin-top: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--line-1);
    border-radius: var(--r-8);
}
.admin-form__fieldset legend {
    padding-inline: var(--s-2);
    font-weight: 600;
    color: var(--ink-1);
}
.admin-form__placements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.admin-form__check {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--t-13);
    color: var(--ink-1);
    cursor: pointer;
}

@media (max-width: 767px) {
    .admin-form__grid { grid-template-columns: 1fr; }
    .admin-ads-table { font-size: var(--t-12); }
    .admin-ads-table th:nth-child(3),
    .admin-ads-table td:nth-child(3) { display: none; }
}


/* Anchor (mobile sticky bottom). Hidden on desktop. The <aside> wraps the
   <a> card and the dismiss <button> as siblings — keeping the dismiss
   outside the link is required for valid HTML and assistive-tech focus
   order. The wrapper itself is the positioning context for the dismiss. */
.partner-card--anchor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 8px 56px 8px 8px; /* right inset reserves space for dismiss */
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--line-1);
    box-shadow: 0 -4px 16px rgba(41, 38, 27, .06);
}
.partner-card--anchor .partner-card__card {
    padding: var(--s-2) var(--s-3);
    gap: var(--s-3);
    box-shadow: none;
    border-color: var(--line-1);
}
.partner-card--anchor .partner-card__image {
    width: 44px; height: 44px; flex-basis: 44px;
    border-radius: var(--r-6);
}
/* The "Ad" label is hidden visually in the anchor variant for space; the
   <aside> still carries aria-label="Sponsored" so screen readers announce
   the slot for what it is. */
.partner-card--anchor .partner-card__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}
.partner-card--anchor .partner-card__headline {
    font-size: var(--t-13);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.partner-card--anchor .partner-card__copy { display: none; }
.partner-card--anchor .partner-card__cta {
    margin-top: 0;
    font-size: var(--t-12);
}
/* Dismiss: 44×44 hit target per --touch-target-min, with a smaller visual
   circle. Positioned against the .partner-card--anchor wrapper, NOT inside the
   <a>. */
.partner-card__dismiss {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.partner-card__dismiss > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-sunken);
}
.partner-card__dismiss:hover > span { background: var(--line-1); color: var(--ink-1); }
.partner-card__dismiss:focus-visible > span {
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

@media (min-width: 768px) {
    /* Anchor is mobile-only by design — desktop has plenty of in-page slots.
       partner-cards.js skips impression firing for elements with display:none, so
       we don't over-count desktop "views". */
    .partner-card--anchor { display: none; }
}

@media (max-width: 767px) {
    /* Reserve bottom padding so the anchor doesn't cover the footer's last
       line on mobile. ~76px = anchor card height + padding. The
       `.kosmetika-anchor-dismissed` class is set by partner-cards.js after the
       user dismisses; we drop the gutter so there's no dead space. */
    .page { padding-bottom: 76px; }
    html.kosmetika-anchor-dismissed .page { padding-bottom: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════ */
/* Favorites (heart button + header counter + page)                          */
/* ═════════════════════════════════════════════════════════════════════════ */

/* Theming tokens — referenced everywhere a filled heart appears so a future
   prefers-color-scheme: dark pass can override one place. */
:root {
    --heart-active: var(--accent);
    --heart-inactive: var(--ink-3);
}

/* Card overlay variant — top-right corner of .result-row__thumb. The card
   markup wraps content in an absolutely-positioned <a> ("stretched link")
   while the heart sits on top with z-index. 44x44 tap target with a 24x24
   visible glyph. */
.result-row { position: relative; }
.result-row__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.result-row__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--r-3);
}
/* Children stay positioned-but-non-stacking so the heart (z-index: 2) can
   render above the stretched link without being trapped in a nested
   stacking context. */
.result-row > *:not(.result-row__link) { position: relative; }

.heart-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line-1);
    border-radius: 999px;
    cursor: pointer;
    color: var(--heart-inactive);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s, transform .1s;
}
.heart-btn:hover { background: #fff; color: var(--heart-active); }
.heart-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.heart-btn[aria-pressed="true"] { color: var(--heart-active); }
.heart-btn svg { width: 100%; height: 100%; pointer-events: none; }

/* Card variant — overlay on the thumb. */
.heart-btn--card {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    z-index: 2;
}
.heart-btn--card svg { width: 18px; height: 18px; }

/* Detail-page variant — inline next to the H1, larger. */
.heart-btn--detail {
    width: 44px;
    height: 44px;
    margin-left: var(--s-3);
    vertical-align: middle;
    background: var(--surface-card);
}
.heart-btn--detail svg { width: 22px; height: 22px; }

/* Header variant — inside .site-header, left of the lang switcher. */
.heart-btn--header {
    position: relative;
    width: 36px;
    height: 36px;
    background: transparent;
    border-color: transparent;
    color: var(--ink-2);
}
.heart-btn--header:hover { color: var(--heart-active); background: var(--surface-sunken); }
.heart-btn--header[aria-pressed="true"],
.heart-btn--header[data-count]:not([data-count="0"]) { color: var(--heart-active); }
.heart-btn--header svg { width: 22px; height: 22px; }
.heart-btn--header__count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.heart-btn--header[data-count="0"] .heart-btn--header__count { display: none; }

/* Heart click animation — pulse on toggle; respect reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .heart-btn[data-pulsing="true"] { transform: scale(1.18); }
}

/* Favorites page card removal animation — slide+fade. */
.favorites-grid .result-row {
    transition: opacity .2s, transform .2s, max-height .2s;
}
@media (prefers-reduced-motion: no-preference) {
    .favorites-grid .result-row[data-removing="true"] {
        opacity: 0;
        transform: translateX(20px);
        pointer-events: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .favorites-grid .result-row[data-removing="true"] { display: none; }
}

/* Cap-reached / cookies-disabled inline notice. */
.favorites-notice {
    background: var(--accent-soft);
    color: var(--ink-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    font-size: var(--t-13);
}

/* Favorites page intro / share-misunderstanding mitigation. */
.favorites-intro {
    color: var(--ink-3);
    font-size: var(--t-13);
    margin-block: 0 var(--s-4);
}

.favorites-empty__search {
    max-width: 480px;
    margin-inline: auto;
    margin-top: var(--s-4);
}

/* PR-4: sub-category chip row.
   Horizontal-scroll on mobile with snap. Hidden scrollbar.
   Active chip filled with brand-primary; inactive outlined.
   ``nowrap`` enforced on chips so Russian/Georgian labels don't break.
   The ``-wrap`` outer element controls the container padding; the inner
   ``.subcat-chip-row`` is the actual scroll surface. */
.subcat-chip-row-wrap {
    background: var(--bg-1);
    border-bottom: 1px solid var(--line-1);
    padding-block: var(--s-3);
}
.subcat-chip-row {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Right-edge fade hint that the row is horizontally scrollable.
       CSS mask is applied to the scrolling element itself, so the fade
       sits on the chip row's visible right edge regardless of the parent
       container's padding. ~36px fade is enough to clip the last chip
       at the seam, making "more chips →" visually obvious. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    padding-right: var(--s-5);
}
.subcat-chip-row::-webkit-scrollbar { display: none; }
.subcat-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-1);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-1);
    font-size: var(--t-13);
    scroll-snap-align: start;
    background: var(--bg-0);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.subcat-chip:hover {
    border-color: var(--ink-3);
}
.subcat-chip.is-active {
    background: var(--brand-1, #0b6efd);
    color: #fff;
    border-color: var(--brand-1, #0b6efd);
}

/* PR-6: sort toggle on sub-cat pages. Two link-options, active one filled
   with brand-primary. Sits between the chip row and the product list. */
.subcat-sort-row {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    margin-bottom: var(--s-3);
    flex-wrap: wrap;
}
.subcat-sort-row__label {
    color: var(--ink-3);
    font-size: var(--t-13);
}
.subcat-sort-row__opt {
    display: inline-flex;
    align-items: center;
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line-1);
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-1);
    font-size: var(--t-13);
    background: var(--bg-0);
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.subcat-sort-row__opt:hover { border-color: var(--ink-3); }
.subcat-sort-row__opt.is-active {
    background: var(--brand-1, #0b6efd);
    color: #fff;
    border-color: var(--brand-1, #0b6efd);
}
/* Mobile: keep all three sort elements (label + 2 pills) on a single
   row by shrinking padding + font; below 360px the "Сортировка:" label
   hides so the two pills always fit. */
@media (max-width: 480px) {
    .subcat-sort-row { flex-wrap: nowrap; gap: var(--s-1); }
    .subcat-sort-row__label { font-size: var(--t-12); }
    .subcat-sort-row__opt {
        padding: var(--s-1) var(--s-2);
        font-size: var(--t-12);
        white-space: nowrap;
    }
}
@media (max-width: 360px) {
    .subcat-sort-row__label { display: none; }
}

/* Sub-cat breadcrumb above H1: small, muted, links to the parent. */
.category-hero__crumbs {
    font-size: var(--t-13);
    color: var(--ink-3);
    margin-bottom: var(--s-1);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    flex-wrap: wrap;
}
.category-hero__crumbs a {
    color: var(--ink-3);
    text-decoration: none;
}
.category-hero__crumbs a:hover {
    color: var(--ink-1);
    text-decoration: underline;
}
.category-hero__crumbs-sep {
    color: var(--ink-3);
    opacity: .7;
}