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

/* 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: 0;
}
@media (min-width: 768px) {
    .category-intro p { font-size: var(--t-15); }
}

.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); }
@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);
}