/* ==========================================================================
   public-ui.css — shared visual language for public pages
   (landing, catalog overview, category, product, search, contact)

   Why a dedicated file: these pages previously mixed Tailwind utilities with
   per-template <style> blocks, so the same "card" or "button" looked different
   on every page and RTL needed duplicated rules. Everything below is one
   component set, written with logical properties so fa/ar/ur and en share it.

   Load order: tokens.css → style.css → public-ui.css → catalog-public.css
   Tokens are consumed with fallbacks, so a theme without tokens.css still works.
   ========================================================================== */

.pub-page {
    --pub-radius: var(--radius, .9rem);
    --pub-radius-sm: var(--radius-sm, .6rem);
    --pub-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
    --pub-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -16px rgba(15, 23, 42, .28);
    --pub-border: var(--border, #e5e7eb);
    --pub-surface: var(--surface, #fff);
    --pub-surface-muted: var(--surface-muted, #f8fafc);
    --pub-text: var(--text-primary, #111827);
    --pub-text-muted: var(--text-muted, #6b7280);
    --pub-primary: var(--color-primary, #3b82f6);
    --pub-primary-dark: var(--color-primary-dark, #2563eb);
    --pub-accent: var(--color-accent, #8b5cf6);
    --pub-ring: 0 0 0 3px rgba(59, 130, 246, .28);
    --pub-gap: clamp(1rem, 2.2vw, 1.75rem);
    color: var(--pub-text);
    line-height: 1.75;
}

.pub-page :is(h1, h2, h3, h4) {
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    text-wrap: balance;
}

.pub-page :is(p, li) { text-wrap: pretty; }
.pub-page img { display: block; }
.pub-page ::selection { background: rgba(59, 130, 246, .18); }

/* ---------- Layout helpers ------------------------------------------------ */
.pub-container { max-width: var(--container-width, 1280px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.pub-container--medium { max-width: var(--container-medium, 72rem); }
.pub-container--narrow { max-width: var(--container-narrow, 56rem); }
.pub-stack { display: grid; gap: var(--pub-gap); }
.pub-section { margin-block: clamp(2rem, 4vw, 3.5rem); }

.pub-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-block-end: 1.25rem;
}
.pub-section__title { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.pub-section__sub { margin: .25rem 0 0; color: var(--pub-text-muted); font-size: .95rem; }
.pub-link {
    color: var(--pub-primary-dark, #1d4ed8);
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding-block: .35rem;
    border-radius: var(--pub-radius-sm);
}
.pub-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pub-link:focus-visible { outline: 2px solid var(--pub-primary-dark, #1d4ed8); outline-offset: 3px; }

/* ---------- Breadcrumb ---------------------------------------------------- */
.pub-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--pub-text-muted);
    margin-block-end: 1.25rem;
}
.pub-breadcrumb a { color: inherit; text-decoration: none; }
.pub-breadcrumb a:hover { color: var(--pub-primary-dark, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
.pub-breadcrumb > :not(:last-child)::after {
    content: "/";
    margin-inline: .45rem;
    color: var(--text-faint, #cbd5e1);
}
.pub-breadcrumb [aria-current="page"] { color: var(--pub-text); font-weight: 600; }

/* ---------- Hero ---------------------------------------------------------- */
.pub-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1.75rem, 4vw, 3rem);
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 246, .55) 0%, transparent 55%),
        radial-gradient(120% 120% at 0% 100%, rgba(14, 165, 233, .45) 0%, transparent 55%),
        linear-gradient(135deg, var(--pub-primary-dark, #2563eb) 0%, var(--pub-primary, #3b82f6) 55%, #1e40af 100%);
    box-shadow: var(--pub-shadow);
}
.pub-hero__grid {
    position: relative;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
}
.pub-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .85rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #f0f9ff;
}
.pub-hero__title { font-size: clamp(1.6rem, 3.6vw, 2.85rem); font-weight: 800; color: #fff; }
.pub-hero__lead { margin: .9rem 0 0; color: rgba(240, 249, 255, .92); font-size: clamp(.95rem, 1.4vw, 1.05rem); max-width: 56ch; }
.pub-hero__media { position: relative; }
.pub-hero__media img {
    width: 100%;
    height: clamp(180px, 26vw, 280px);
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 24px 50px -18px rgba(2, 6, 23, .55);
    border: 1px solid rgba(255, 255, 255, .28);
}
.pub-hero--compact { padding: clamp(1.4rem, 3vw, 2.25rem); }
.pub-hero--compact .pub-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pub-hero--compact .pub-hero__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* ---------- Buttons ------------------------------------------------------- */
.pub-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-block-start: 1.35rem; align-items: center; }
.pub-btn {
    --pub-btn-bg: var(--pub-primary-dark, #1d4ed8);
    --pub-btn-fg: #fff;
    --pub-btn-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    border: 1px solid var(--pub-btn-border);
    background: var(--pub-btn-bg);
    color: var(--pub-btn-fg);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .5);
}
.pub-btn:hover { transform: translateY(-1px); box-shadow: var(--pub-shadow-hover); }
.pub-btn:active { transform: translateY(0); }
.pub-btn:focus-visible { outline: 3px solid var(--pub-primary, #3b82f6); outline-offset: 3px; }
.pub-btn--on-hero { --pub-btn-bg: #fff; --pub-btn-fg: var(--pub-primary-dark, #1d4ed8); }
.pub-btn--ghost { --pub-btn-bg: transparent; --pub-btn-fg: #fff; --pub-btn-border: rgba(255, 255, 255, .55); box-shadow: none; }
.pub-btn--outline { --pub-btn-bg: transparent; --pub-btn-fg: var(--pub-primary-dark, #1d4ed8); --pub-btn-border: var(--pub-border, #cbd5e1); box-shadow: none; }
.pub-btn--soft { --pub-btn-bg: #eff6ff; --pub-btn-fg: var(--pub-primary-dark, #1d4ed8); --pub-btn-border: #dbeafe; box-shadow: none; }
.pub-btn--success { --pub-btn-bg: #15803d; --pub-btn-fg: #fff; }
.pub-btn--block { width: 100%; }
.pub-btn--sm { min-height: 40px; padding: .45rem 1rem; font-size: .9rem; }

/* ---------- Stats --------------------------------------------------------- */
.pub-stats {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.pub-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
}
.pub-stat__icon {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--pub-primary-dark, #1d4ed8);
    font-size: 1.05rem;
}
.pub-stat__value { display: block; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; color: var(--pub-text); }
.pub-stat__label { display: block; font-size: .82rem; color: var(--pub-text-muted); }

/* ---------- Cards --------------------------------------------------------- */
.pub-grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.pub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.pub-card:hover, a.pub-card:focus-visible { transform: translateY(-3px); box-shadow: var(--pub-shadow-hover); border-color: #bfdbfe; }
.pub-card:focus-visible { outline: 3px solid var(--pub-primary, #3b82f6); outline-offset: 3px; }
.pub-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
}
.pub-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.pub-card:hover .pub-card__media img { transform: scale(1.04); }
.pub-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #93a4bd; font-size: 1.6rem; }
.pub-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.pub-card__title { font-size: 1.02rem; font-weight: 800; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-card__text { color: var(--pub-text-muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-block-start: auto;
    padding-block-start: .6rem;
    font-size: .82rem;
    color: var(--pub-text-muted);
}
.pub-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
}
.pub-pill--primary { background: #eff6ff; color: var(--pub-primary-dark, #1d4ed8); }
.pub-price { font-weight: 800; color: var(--pub-primary-dark, #1d4ed8); font-size: .95rem; }
.pub-price--muted { color: var(--pub-text-muted); font-weight: 600; }

/* ---------- Active filter chips ------------------------------------------ */
.pub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .85rem; }
.pub-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .5rem .3rem .8rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: var(--pub-primary-dark, #1d4ed8);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.pub-chip__x {
    display: grid;
    place-items: center;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    border-radius: 50%;
    background: rgba(29, 78, 216, .12);
    font-size: .85rem;
    line-height: 1;
}
.pub-chip:hover { background: #dbeafe; }
.pub-chip:focus-visible { outline: 2px solid var(--pub-primary-dark, #1d4ed8); outline-offset: 2px; }

/* ---------- Forms / filters --------------------------------------------- */
.pub-panel {
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    padding: clamp(1rem, 2vw, 1.35rem);
}
.pub-form { display: grid; gap: 1rem; }
.pub-field { display: grid; gap: .35rem; min-width: 0; }
.pub-field > label { font-size: .86rem; font-weight: 700; color: #334155; }
.pub-field__hint { font-size: .78rem; color: var(--pub-text-muted); }
.pub-input, .pub-select, .pub-page textarea {
    inline-size: 100%;
    min-height: 46px;
    padding: .65rem .85rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--pub-radius-sm);
    background: var(--pub-surface);
    color: var(--pub-text);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pub-page textarea { min-height: 9rem; resize: vertical; line-height: 1.8; }
.pub-input:hover, .pub-select:hover, .pub-page textarea:hover { border-color: #94a3b8; }
.pub-input:focus, .pub-select:focus, .pub-page textarea:focus {
    outline: none;
    border-color: var(--pub-primary, #3b82f6);
    box-shadow: var(--pub-ring);
}
.pub-field--invalid :is(.pub-input, .pub-select, textarea),
.pub-field--invalid :is(input, textarea, select) {
    border-color: #dc2626;
    background: #fef2f2;
}
.pub-field--invalid :is(input, textarea, select):focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }
.pub-field__error {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: #b91c1c;
    font-size: .8rem;
    font-weight: 600;
}
.pub-field__error::before { content: "⚠"; font-size: .9em; }

.pub-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
}
.pub-search .pub-btn { border-radius: var(--pub-radius-sm); }

.pub-filters { padding: 0; overflow: hidden; }
.pub-filters > summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    user-select: none;
}
.pub-filters > summary::-webkit-details-marker { display: none; }
.pub-filters > summary::after {
    content: "▾";
    margin-inline-start: auto;
    color: var(--pub-text-muted);
    transition: transform .18s ease;
}
.pub-filters[open] > summary::after { transform: rotate(180deg); }
.pub-filters > summary:focus-visible { outline: 3px solid var(--pub-primary, #3b82f6); outline-offset: -3px; }
.pub-filters__count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    padding-inline: .35rem;
    border-radius: 999px;
    background: var(--pub-primary-dark, #1d4ed8);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
}
.pub-filters__body { padding: 0 1.15rem 1.15rem; border-block-start: 1px solid var(--pub-border); }
.pub-filters__grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    padding-block: 1rem;
}
.pub-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ---------- Result count / toolbar --------------------------------------- */
.pub-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-block: 1rem;
}
.pub-result-count { margin: 0; font-size: .9rem; color: var(--pub-text-muted); }
.pub-result-count strong { color: var(--pub-text); font-size: 1.05rem; }

/* ---------- Pagination ---------------------------------------------------- */
.pub-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}
.pub-pagination__link {
    display: inline-grid;
    place-items: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: .8rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    background: var(--pub-surface);
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pub-pagination__link:hover { border-color: #bfdbfe; background: #f8fafc; }
.pub-pagination__link:focus-visible { outline: 3px solid var(--pub-primary, #3b82f6); outline-offset: 2px; }
.pub-pagination__link[aria-current="page"] {
    background: var(--pub-primary-dark, #1d4ed8);
    border-color: var(--pub-primary-dark, #1d4ed8);
    color: #fff;
}
.pub-pagination__gap { color: var(--pub-text-muted); padding-inline: .25rem; }

/* ---------- Empty state --------------------------------------------------- */
.pub-empty {
    display: grid;
    justify-items: center;
    gap: .65rem;
    text-align: center;
    padding: clamp(2rem, 5vw, 3.25rem) 1.25rem;
    background: var(--pub-surface);
    border: 1px dashed #cbd5e1;
    border-radius: var(--pub-radius);
}
.pub-empty__icon {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 1.4rem;
}
.pub-empty__title { font-size: 1.05rem; font-weight: 800; }
.pub-empty__text { margin: 0; color: var(--pub-text-muted); font-size: .92rem; max-width: 46ch; }

/* ---------- Contact band -------------------------------------------------- */
.pub-contact {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: clamp(1rem, 2vw, 1.5rem);
    color: #e2e8f0;
    background: radial-gradient(120% 140% at 0% 0%, rgba(37, 99, 235, .5), transparent 60%), #0f172a;
    box-shadow: var(--pub-shadow);
}
.pub-contact :is(h2, h3) { color: #fff; }
.pub-contact p { color: #cbd5e1; margin: .5rem 0 0; }
.pub-contact__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pub-contact__list li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.pub-contact__list i { color: #93c5fd; inline-size: 1.2rem; text-align: center; }
.pub-contact__list a { color: #bfdbfe; text-decoration: none; }
.pub-contact__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pub-contact .pub-btn--on-hero { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8); }

/* ---------- Contact page layout ------------------------------------------ */
.pub-split {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
}
.pub-aside { position: sticky; top: 5.5rem; }
.pub-channel {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding-block: .8rem;
    border-block-start: 1px solid #f1f5f9;
}
.pub-channel:first-of-type { border-block-start: 0; padding-block-start: 0; }
.pub-channel__icon {
    display: grid;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    flex: 0 0 auto;
    border-radius: var(--pub-radius-sm);
    background: #eff6ff;
    color: var(--pub-primary-dark, #1d4ed8);
}
.pub-channel__label { display: block; font-size: .78rem; color: var(--pub-text-muted); }
.pub-channel a { color: var(--pub-primary-dark, #1d4ed8); text-decoration: none; font-weight: 700; }
.pub-channel a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pub-channel address { font-style: normal; color: #334155; font-size: .9rem; }
.pub-socials { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .9rem; }
.pub-socials a {
    padding: .3rem .75rem;
    border: 1px solid var(--pub-border);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none;
}
.pub-socials a:hover { border-color: #bfdbfe; background: #f8fafc; }

/* ---------- Alerts -------------------------------------------------------- */
.pub-alert {
    display: grid;
    gap: .35rem;
    padding: .9rem 1.1rem;
    border-radius: var(--pub-radius-sm);
    border: 1px solid;
    font-size: .92rem;
    margin-block-end: 1.1rem;
}
.pub-alert--success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.pub-alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.pub-alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.pub-alert ul { margin: .15rem 0 0; padding-inline-start: 1.15rem; }
.pub-alert a { color: inherit; font-weight: 700; }

/* ---------- Misc ---------------------------------------------------------- */
.pub-divider { border: 0; border-block-start: 1px solid var(--pub-border); margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.pub-muted { color: var(--pub-text-muted); }
.pub-small { font-size: .85rem; }
.pub-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- Product page -------------------------------------------------- */
.pub-product { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.pub-gallery__main {
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background: var(--pub-surface-muted);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
}
.pub-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.pub-gallery__empty { color: #94a3b8; font-size: 2rem; }
.pub-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .75rem; }
.pub-gallery__thumb {
    padding: 0;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--pub-radius-sm);
    cursor: pointer;
    line-height: 0;
}
.pub-gallery__thumb img { inline-size: 64px; block-size: 64px; object-fit: cover; border-radius: calc(var(--pub-radius-sm) - 2px); }
.pub-gallery__thumb[aria-pressed="true"] { border-color: var(--pub-primary, #3b82f6); }
.pub-gallery__thumb:focus-visible { outline: 3px solid var(--pub-primary, #3b82f6); outline-offset: 3px; }
.pub-buybox {
    display: grid;
    gap: .75rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
}
.pub-buybox__price { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 800; color: var(--pub-primary-dark, #1d4ed8); margin: 0; }
.pub-buybox__price small { font-size: .8rem; font-weight: 600; color: var(--pub-text-muted); }
.pub-buybox__meta { font-size: .85rem; color: var(--pub-text-muted); margin: 0; }
.pub-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; }
.pub-status::before { content: "●"; font-size: .8em; }
.pub-status--in { color: #15803d; }
.pub-status--out { color: #b91c1c; }
.pub-status--on-request { color: #b45309; }
.pub-buybox__actions { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
    .pub-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .pub-hero__media { order: -1; }
    .pub-hero__media img { height: clamp(150px, 40vw, 210px); }
    .pub-contact, .pub-split, .pub-product { grid-template-columns: minmax(0, 1fr); }
    .pub-aside { position: static; }
}
@media (max-width: 640px) {
    .pub-search { grid-template-columns: minmax(0, 1fr); }
    .pub-search .pub-btn { width: 100%; }
    .pub-actions .pub-btn { flex: 1 1 auto; }
    .pub-page :is(input, select, textarea) { font-size: 16px; } /* stop iOS zoom */
    .pub-breadcrumb { font-size: .8rem; }
    .pub-section { margin-block: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-page *, .pub-btn, .pub-card, .pub-card__media img { transition: none !important; animation: none !important; }
    .pub-btn:hover, a.pub-card:hover { transform: none; }
}

/* ---------- Icons (inline SVG from public_icon()) -------------------------- */
.pub-icon { inline-size: 1.15em; block-size: 1.15em; flex: 0 0 auto; vertical-align: -.18em; }
.pub-icon--lg { inline-size: 1.6rem; block-size: 1.6rem; }
.pub-hero__eyebrow .pub-icon { opacity: .9; }
.pub-btn .pub-icon, .pub-link .pub-icon { vertical-align: -.15em; }
.pub-stat__icon .pub-icon { inline-size: 1.35rem; block-size: 1.35rem; }
.pub-channel__icon .pub-icon { inline-size: 1.15rem; block-size: 1.15rem; }
.pub-empty__icon .pub-icon { inline-size: 1.6rem; block-size: 1.6rem; }
.pub-card__footer .pub-icon { opacity: .55; }

/* ---------- Card arrow (shared product/article cards) ---------------------- */
.pub-card__go {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: #eff6ff;
    color: var(--pub-primary-dark, #1d4ed8);
    transition: background-color .15s ease, transform .18s ease;
}
a.pub-card:hover .pub-card__go { background: #dbeafe; transform: translateX(-2px); }
[dir="rtl"] a.pub-card:hover .pub-card__go { transform: translateX(2px); }
a.pub-card:hover .pub-card__title { color: var(--pub-primary-dark, #1d4ed8); }
@media (prefers-reduced-motion: reduce) {
    a.pub-card:hover .pub-card__go { transform: none; }
}

/* ---------- Article card (partials/article-card.php) ---------------------- */
.pub-article {
    display: flex;
    flex-direction: column;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pub-article:hover { transform: translateY(-3px); box-shadow: var(--pub-shadow-hover); border-color: #bfdbfe; }
.pub-article__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #e2e8f0, #eef2ff); }
.pub-article__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .35s ease; }
.pub-article:hover .pub-article__media img { transform: scale(1.04); }
.pub-article__badge {
    position: absolute;
    inset-block-end: .6rem;
    inset-inline-end: .6rem;
    padding: .18rem .65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #f8fafc;
    font-size: .74rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.pub-article__body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
.pub-article__title { font-size: 1rem; font-weight: 800; line-height: 1.55; }
.pub-article__title a { color: inherit; text-decoration: none; }
.pub-article__title a:hover { color: var(--pub-primary-dark, #1d4ed8); }
.pub-article__excerpt { margin: 0; color: var(--pub-text-muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem 1rem;
    margin-block-start: auto;
    padding-block-start: .65rem;
    border-block-start: 1px solid var(--pub-border);
    color: var(--pub-text-muted);
    font-size: .8rem;
}
.pub-article__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.pub-article__placeholder { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: #94a3b8; }

/* ---------- Page scaffolding used by the public templates ------------------ */
.pub-main { padding-block: clamp(1.25rem, 3vw, 2.5rem); }
.pub-lead-block { margin-block-end: clamp(1.25rem, 3vw, 2rem); max-inline-size: 64ch; }
.pub-page-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.pub-product-title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.pub-pill--on-dark { background: rgba(255, 255, 255, .18); color: #fff; }
.pub-stat__value--sm { font-size: 1rem; }
.pub-prose { line-height: 1.9; }
.pub-prose :is(p, ul, ol, blockquote) { margin-block: 0 .9em; }
.pub-prose :is(img, table, pre) { max-inline-size: 100%; }
.pub-note-inline { margin-block: .25rem .85rem; }
.pub-back-row { margin-block-start: 2rem; }
.pub-cta-row { margin-block-start: 1.5rem; }

/* ---------- Scaffolding modifiers (used by the public templates) ----------- */
.pub-stats--spaced { margin-block: clamp(1.25rem, 3vw, 2rem); }
.pub-search--block { margin-block: 1.25rem; }
.pub-stack--tight { gap: 1rem; }
.pub-meta-row { margin-block-start: .45rem; }
.pub-filters__actions--split { justify-content: space-between; }
.pub-aside__title { font-size: 1.05rem; margin-block-end: .75rem; }

/* ---------- Category hero (article category page) -------------------------- */
.category-hero { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.category-langs { margin-block-start: 1rem; }
.pub-chip--on-dark { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); color: #fff; }
.pub-chip--on-dark:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Error page (404) ---------------------------------------------- */
.error-empty { justify-items: center; }
.error-search { grid-template-columns: minmax(0, 1fr) auto; margin-block: .5rem 1rem; inline-size: 100%; max-inline-size: 30rem; }
@media (max-width: 640px) { .error-search { grid-template-columns: minmax(0, 1fr); } }

.pub-tag-title { margin-block-end: 1.75rem; }