/*
 * 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;
}

/* ─── 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;
}
.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 (segmented pill) ────────────────────────────────── */
.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(2, minmax(0, 1fr));
    gap: var(--s-3);
}

@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) var(--s-4);
    min-height: 116px;
    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: start;
    color: var(--ink-1);
    transition: border-color .15s, background .15s;
    cursor: pointer;
    text-decoration: none;
}
.category-tile:hover {
    border-color: var(--line-2);
    background: #fefdfb;
    text-decoration: none;
}
.category-tile__icon {
    /* Locked square so different SVG aspect ratios don't reflow neighbours.
       `flex: 0 0 48px` is preserved as a defensive fallback for any caller
       that overrides the grid; under the grid, `width`/`height` win. */
    grid-area: icon;
    width: 48px; height: 48px;
    flex: 0 0 48px;
    border-radius: 10px;
    background: var(--surface-sunken);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-1);
}
.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-14);
    line-height: 1.3;
    color: var(--ink-1);
    overflow-wrap: anywhere;
}
.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); }
.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 { display: flex; flex-direction: column; gap: var(--s-3); }

/* ─── Result row (card) ─────────────────────────────────────────────────── */
.result-row {
    padding: var(--s-3);
    display: flex;
    gap: var(--s-3);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}
.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-page { padding-block: var(--s-3) var(--s-7); }

.category-brands {
    display: flex; align-items: center; gap: var(--s-2);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
}
.category-brands__label {
    font-size: var(--t-13);
    color: var(--ink-3);
    margin-right: var(--s-2);
}
.category-brands__pill {
    height: 32px; min-height: 32px;
    padding: 0 12px;
    font-size: var(--t-13);
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 6px;
}
.category-brands__pill--active {
    background: var(--surface-card);
    color: var(--ink-1);
    border-color: var(--line-1);
    box-shadow: 0 1px 2px rgba(41, 38, 27, .08);
}
.category-brands__count { color: var(--ink-3); font-size: var(--t-12); font-weight: 500; }

/* ═════════════════════════════════════════════════════════════════════════ */
/* 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;
}
@media (min-width: 768px) {
    .site-header--with-search .site-header__search { display: flex; }
}