/* ==========================================================================
   Zagros — public catalog surface (index, listing, product page)
   Loaded after tokens/style/landing, only on catalog templates.
   Rules are mobile-first and use logical properties so /ar/ and /en/ mirror
   without a separate stylesheet.
   ========================================================================== */

/* ---------------------------------------------------------------- shell */
.catalog-page main { min-inline-size: 0; }
.catalog-page h1, .catalog-page h2, .catalog-page h3 { text-wrap: balance; }
.catalog-page p { overflow-wrap: anywhere; }
/* عنوان/کد کالا ممکن است یک رشتهٔ بلند بی‌فاصله باشد (SKU یا نام محصول وارداتی)؛
   بدون این قاعده فهرست/کارت روی موبایل افقی سرریز می‌کرد. */
.catalog-page :is(h1, h2, h3, dt, dd, li, a, span, strong, small, code) { overflow-wrap: anywhere; }
.catalog-page :is(.zgc-card, .zgc-tile, .zgc-layout, .zgc-results, .zgc-buy, .zgc-panel, .zgc-specs, .zgc-grid) { min-inline-size: 0; }

.zgc-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding-block: clamp(1.6rem, 4vw, 2.75rem) clamp(1.4rem, 3vw, 2.25rem);
    background:
        radial-gradient(circle at 88% 8%, rgba(154, 120, 54, .22), transparent 30rem),
        linear-gradient(135deg, #0B1524 0%, #16233A 62%, #1E293B 100%);
    border-block-end: 3px solid var(--zg-accent);
}
.zgc-hero .zg-container { position: relative; z-index: 1; }
.zgc-hero__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem; }
.zgc-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: 0 0 1rem; font-size: .82rem; color: #A9B8CC;
}
.zgc-crumbs a { color: #D5DEEC; text-decoration: none; }
.zgc-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.zgc-crumbs [aria-current="page"] { color: #fff; }
/* eyebrow روی سطح روشن: طلایی #D4A83F فقط ۲٬۲۲:۱ کنتراست دارد و در WCAG
   شکست می‌خورد. نسخهٔ تیرهٔ همان طلایی (accent-dark) ۵٬۳۶:۱ می‌دهد. */
.zgc-eyebrow { margin: 0 0 .4rem; color: var(--zg-accent-dark); font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.zgc-hero h1 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.35rem); line-height: 1.28; letter-spacing: -.01em; }
.zgc-lead { margin: .55rem 0 0; max-inline-size: 62ch; color: #C9D5E4; font-size: .95rem; }
.zgc-stats { display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.zgc-stats strong { display: block; font-size: 1.3rem; line-height: 1.2; color: #fff; }
.zgc-stats span { font-size: .76rem; color: #9FB0C6; }

/* --------------------------------------------------------------- search */
.zgc-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-block-start: 1.15rem; max-inline-size: 720px; }
.zgc-search input[type="search"] {
    inline-size: 100%;
    min-block-size: 50px;
    padding-inline: 1rem;
    border-radius: var(--zg-radius);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: .95rem;
}
.zgc-search input[type="search"]::placeholder { color: #94A3B8; }
.zgc-search button {
    min-block-size: 50px;
    padding-inline: 1.35rem;
    border: 0;
    border-radius: var(--zg-radius);
    background: var(--zg-accent);
    color: #0F172A;
    font-weight: 700;
    cursor: pointer;
}
.zgc-search button:hover { background: #B48C3F; }
.zgc-hint { margin-block-start: .6rem; font-size: .78rem; color: #93A4BA; }
.zgc-hint a { color: #DCE3EE; }

/* ------------------------------------------------------------- sections */
.zgc-section { padding-block: clamp(1.5rem, 3.5vw, 2.75rem); }
.zgc-section__head {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
    gap: 1rem; margin-block-end: 1.25rem;
}
.zgc-section__head h2 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--zg-primary); }
.zgc-section__head p { margin: .25rem 0 0; color: var(--zg-muted); font-size: .88rem; }
.zgc-ghost-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    min-block-size: 42px; padding-inline: 1rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm);
    background: #fff; color: var(--zg-primary); text-decoration: none;
    font-size: .86rem; font-weight: 700;
}
.zgc-ghost-btn:hover { border-color: var(--zg-accent); background: var(--zg-accent-soft); }

/* ---------------------------------------------------- category showcase */
.zgc-tiles { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .zgc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zgc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zgc-tile {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 16 / 10;
    border-radius: var(--zg-radius-lg);
    border: 1px solid var(--zg-border);
    background: #0F172A;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (min-width: 1000px) { .zgc-tile { aspect-ratio: 4 / 3; } }
.zgc-tile img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s ease; }
.zgc-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9, 19, 31, 0) 30%, rgba(9, 19, 31, .58) 66%, rgba(9, 19, 31, .93) 100%);
}
.zgc-tile:hover, .zgc-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--zg-shadow-heavy); border-color: #C5AA66; }
.zgc-tile:hover img { transform: scale(1.05); }
.zgc-tile__body { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 1.1rem 1.15rem; color: #fff; }
.zgc-tile__count {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-block-end: .45rem; padding: .2rem .55rem;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .14);
    font-size: .72rem; font-weight: 700; color: #F3F6FA;
}
.zgc-tile__body h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.zgc-tile__desc {
    margin: .35rem 0 0; font-size: .82rem; color: #C6D2E1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zgc-tile__go { margin-block-start: .6rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: #E3C98A; }
.zgc-tile__placeholder {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: rgba(255, 255, 255, .35); background: linear-gradient(145deg, #16233A, #0B1524);
}

/* ---------------------------------------------------------------- chips */
.zgc-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: 1rem; }
.zgc-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .6rem; border-radius: 999px;
    border: 1px solid #E3D3AE; background: var(--zg-accent-soft);
    color: #6B5220; font-size: .78rem; font-weight: 700;
}
.zgc-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.zgc-chip--clear { background: #fff; border-color: var(--zg-border); color: var(--zg-muted); text-decoration: none; }
.zgc-chip--clear:hover { border-color: var(--zg-accent); color: var(--zg-primary); }

/* --------------------------------------------------------------- layout */
.zgc-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .zgc-layout { grid-template-columns: 272px minmax(0, 1fr); gap: 2rem; } }

/* -------------------------------------------------------------- filters */
.zgc-filters {
    display: grid; gap: 1.1rem;
    padding: 1.15rem;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-lg);
    background: #fff;
}
@media (min-width: 1000px) { .zgc-filters { position: sticky; inset-block-start: 92px; } }
.zgc-filters__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.zgc-filters__head h2 { margin: 0; font-size: 1rem; }
.zgc-filters__head a { font-size: .78rem; font-weight: 700; color: var(--zg-accent-dark); }
.zgc-facet { display: grid; gap: .45rem; padding-block-start: .9rem; border-block-start: 1px solid var(--zg-border-subtle); }
.zgc-facet:first-of-type { padding-block-start: 0; border-block-start: 0; }
.zgc-facet h3 { margin: 0; font-size: .82rem; font-weight: 700; color: var(--zg-muted); }
.zgc-check { display: flex; align-items: center; gap: .55rem; min-block-size: 44px; font-size: .88rem; cursor: pointer; }
.zgc-check input { inline-size: 17px; block-size: 17px; accent-color: var(--zg-accent-dark); flex: 0 0 auto; }
.zgc-check small { margin-inline-start: auto; color: var(--zg-muted-light); font-size: .76rem; }
.zgc-price { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.zgc-price input {
    inline-size: 100%; min-block-size: 40px; padding-inline: .6rem;
    border: 1px solid #CBD5E1; border-radius: var(--zg-radius-sm);
    background: #fff; color: var(--zg-text); font-size: .85rem;
}
.zgc-note { margin: 0; font-size: .74rem; line-height: 1.65; color: var(--zg-muted); }
.zgc-filters__apply { min-block-size: 44px; border: 0; border-radius: var(--zg-radius-sm); background: var(--zg-primary); color: #fff; font-weight: 700; cursor: pointer; }
.zgc-filters__apply:hover { background: var(--zg-primary-light); }

/* کشوی فیلتر: به‌صورت پیش‌فرض بسته است (وگرنه روی دسکتاپ فرم تکراری دیده می‌شد) */
.zgc-filter-drawer { display: none; }

/* mobile drawer for filters */
.zgc-filter-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    min-block-size: 40px; padding-inline: .8rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm);
    background: #fff; color: var(--zg-primary); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
@media (min-width: 1000px) { .zgc-filter-toggle { display: none; } }
@media (max-width: 999px) {
    .zgc-filters { display: none; }
    .zgc-filter-drawer { position: fixed; inset: 0; z-index: 120; display: none; }
    .zgc-filter-drawer.is-open { display: block; }
    .zgc-filter-drawer__scrim { position: absolute; inset: 0; background: rgba(9, 19, 31, .55); border: 0; inline-size: 100%; }
    .zgc-filter-drawer__panel {
        position: absolute; inset-inline: 0; inset-block-end: 0;
        max-block-size: 85vh; overflow-y: auto;
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        background: #fff; border-start-start-radius: var(--zg-radius-xl); border-start-end-radius: var(--zg-radius-xl);
        box-shadow: 0 -12px 40px rgba(9, 19, 31, .22);
    }
    .zgc-filter-drawer__panel .zgc-filters { display: grid; border: 0; padding: 0; position: static; }
    .zgc-filter-drawer__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .75rem; }
    .zgc-filter-drawer__close { min-block-size: 40px; padding-inline: .8rem; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm); background: #fff; cursor: pointer; }
}

/* -------------------------------------------------------------- toolbar */
.zgc-results { min-inline-size: 0; }
.zgc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .7rem .9rem; margin-block-end: 1rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius); background: #fff;
}
.zgc-toolbar__count { margin: 0; font-size: .88rem; color: var(--zg-muted); }
.zgc-toolbar__count strong { font-size: 1rem; color: var(--zg-primary); }
.zgc-toolbar__right { display: flex; align-items: center; gap: .6rem; }
.zgc-sort { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--zg-muted); }
.zgc-sort select {
    min-block-size: 40px; padding-inline: .65rem; border: 1px solid #CBD5E1;
    border-radius: var(--zg-radius-sm); background: #fff; color: var(--zg-text);
    font: inherit; font-size: .82rem;
}

/* ---------------------------------------------------------------- cards */
.zgc-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .zgc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .zgc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zgc-card {
    position: relative;
    display: flex; flex-direction: column; min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--zg-border);
    border-radius: var(--zg-radius-lg);
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zgc-card:hover, .zgc-card:focus-within { transform: translateY(-3px); box-shadow: var(--zg-shadow-raised); border-color: #C9B583; }
.zgc-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EEF1F5; }
.zgc-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s ease; }
.zgc-card:hover .zgc-card__media img { transform: scale(1.04); }
.zgc-card__badge {
    position: absolute; inset-block-start: .7rem; inset-inline-start: .7rem; z-index: 2;
    padding: .22rem .55rem; border-radius: 999px;
    background: rgba(255, 255, 255, .95); box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
    font-size: .72rem; font-weight: 700; color: #18563A;
}
.zgc-card__badge[data-stock="out_of_stock"] { color: #8B2C28; }
.zgc-card__badge[data-stock="on_request"] { color: #7A5E25; }
.zgc-card__body { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1rem 1.05rem 1.05rem; }
.zgc-card__sku { font-size: .72rem; color: var(--zg-muted-light); }
.zgc-card__title { margin: 0; font-size: 1rem; line-height: 1.5; }
.zgc-card__title a { color: var(--zg-primary); text-decoration: none; }
/* یک لینک برای کل کارت: هم کلیک‌پذیر، هم یک توقف کیبورد */
.zgc-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.zgc-card__meta {
    margin: 0; font-size: .8rem; color: var(--zg-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zgc-card__foot {
    display: flex; align-items: end; justify-content: space-between; gap: .6rem;
    margin-block-start: auto; padding-block-start: .8rem; border-block-start: 1px solid var(--zg-border-subtle);
}
.zgc-price-tag { display: grid; line-height: 1.35; }
.zgc-price-tag small { font-size: .7rem; color: var(--zg-muted-light); }
.zgc-price-tag strong { font-size: .98rem; color: var(--zg-primary); }
.zgc-price-tag span { font-size: .72rem; color: var(--zg-muted); }
.zgc-inquire {
    position: relative; z-index: 4;
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    min-block-size: 38px; padding-inline: .75rem;
    border: 1px solid var(--zg-accent); border-radius: var(--zg-radius-sm);
    background: var(--zg-accent-soft); color: #6B5220;
    font-size: .8rem; font-weight: 700; text-decoration: none;
}
.zgc-inquire:hover { background: var(--zg-accent); color: #0F172A; }
.zgc-media-placeholder {
    display: grid; place-items: center; inline-size: 100%; block-size: 100%;
    min-block-size: 150px; color: #8190A4; background: linear-gradient(145deg, #EEF1F4, #DFE5EC);
}
.zgc-media-placeholder--large { min-block-size: 320px; color: var(--zg-muted); gap: .5rem; text-align: center; font-size: .88rem; }

/* ----------------------------------------------------------- pagination */
.zgc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin-block: 2rem 0; }
.zgc-pager a, .zgc-pager span[aria-current] {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 44px; min-block-size: 44px; padding-inline: .8rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm);
    background: #fff; color: var(--zg-primary); text-decoration: none;
    font-size: .88rem; font-weight: 700;
}
.zgc-pager a:hover { border-color: var(--zg-accent); background: var(--zg-accent-soft); }
.zgc-pager [aria-current="page"] { background: var(--zg-primary); border-color: var(--zg-primary); color: #fff; }
.zgc-pager__gap { border: 0; background: none; color: var(--zg-muted-light); min-inline-size: auto; }

/* ---------------------------------------------------------- empty state */
.zgc-empty {
    padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
    text-align: center;
    border: 1px dashed #C3CCD9;
    border-radius: var(--zg-radius-lg);
    background: #fff;
}
.zgc-empty h2, .zgc-empty h3 { margin: 0 0 .5rem; color: var(--zg-primary); font-size: 1.1rem; }
.zgc-empty p { margin: 0 auto 1rem; max-inline-size: 46ch; color: var(--zg-muted); font-size: .9rem; }
.zgc-empty .zg-button, .zgc-empty .zgc-ghost-btn { margin: .25rem; }

/* --------------------------------------------------------- product page */
.zgc-product { display: grid; gap: 1.75rem; grid-template-columns: 1fr; padding-block: 1.5rem 2rem; }
@media (min-width: 940px) { .zgc-product { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 2.25rem; } }
.zgc-gallery { min-inline-size: 0; }
.zgc-gallery__main { position: relative; overflow: hidden; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-lg); background: #fff; }
.zgc-gallery__main img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zgc-gallery__thumbs { display: flex; gap: .55rem; margin-block-start: .7rem; overflow-x: auto; padding-block: .2rem; }
.zgc-gallery__thumbs button {
    flex: 0 0 auto; inline-size: 84px; block-size: 68px; padding: 0; cursor: pointer;
    overflow: hidden; border: 2px solid transparent; border-radius: var(--zg-radius-sm); background: #fff;
}
.zgc-gallery__thumbs button[aria-pressed="true"] { border-color: var(--zg-accent-dark); }
.zgc-gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.zgc-buy {
    display: grid; gap: .9rem; padding: 1.25rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-lg); background: #fff;
}
@media (min-width: 940px) { .zgc-buy { position: sticky; inset-block-start: 92px; } }
.zgc-buy h1 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.4; }
.zgc-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.zgc-buy__price strong { font-size: 1.45rem; color: var(--zg-primary); }
.zgc-buy__price span { font-size: .8rem; color: var(--zg-muted); }
.zgc-buy__rows { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; }
.zgc-buy__rows li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .35rem; border-block-end: 1px dashed var(--zg-border); }
.zgc-buy__rows dt { margin: 0; color: var(--zg-muted); }
.zgc-buy__rows dd { margin: 0; font-weight: 700; color: var(--zg-primary); }
.zgc-buy__actions { display: grid; gap: .55rem; }
.zgc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-block-size: 48px; padding-inline: 1.1rem;
    border: 1px solid transparent; border-radius: var(--zg-radius-sm);
    font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.zgc-btn--primary { background: var(--zg-accent); color: #0F172A; }
.zgc-btn--primary:hover { background: #B48C3F; }
.zgc-btn--secondary { background: #fff; border-color: var(--zg-border); color: var(--zg-primary); }
.zgc-btn--secondary:hover { border-color: var(--zg-accent); background: var(--zg-accent-soft); }

.zgc-panel { margin-block-start: 1.5rem; padding: 1.25rem; border: 1px solid var(--zg-border); border-radius: var(--zg-radius-lg); background: #fff; }
.zgc-panel h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.zgc-specs { display: grid; margin: 0; }
.zgc-specs > div {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem;
    padding-block: .55rem; border-block-end: 1px solid var(--zg-border-subtle); font-size: .87rem;
}
.zgc-specs > div:last-child { border-block-end: 0; }
.zgc-specs dt { margin: 0; color: var(--zg-muted); }
.zgc-specs dd { margin: 0; color: var(--zg-primary); font-weight: 700; }
.zgc-prose { font-size: .92rem; line-height: 1.9; color: var(--zg-text); }
.zgc-prose p { margin: 0 0 .8rem; }
.zgc-langs { display: flex; flex-wrap: wrap; gap: .5rem; }
.zgc-langs a {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 44px; min-block-size: 44px; padding-inline: .8rem;
    border: 1px solid var(--zg-border); border-radius: var(--zg-radius-sm);
    background: #fff; color: var(--zg-primary); text-decoration: none; font-weight: 700; font-size: .85rem;
}
.zgc-langs a:hover { border-color: var(--zg-accent); background: var(--zg-accent-soft); }

/* sticky purchase bar on small screens */
.zgc-mobilebar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-block-start: 1px solid var(--zg-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
}
.zgc-mobilebar .zgc-buy__price { flex: 1; }
.zgc-mobilebar .zgc-btn { min-block-size: 44px; }
@media (min-width: 940px) { .zgc-mobilebar { display: none; } }

/* --------------------------------------------------------------- states */
.catalog-page :is(input, select, button, a):focus-visible { outline: 3px solid var(--zg-focus); outline-offset: 2px; }
.catalog-page :is(input, select, textarea, button) { font: inherit; max-inline-size: 100%; min-inline-size: 0; }
@media (max-width: 767px) {
    .catalog-page :is(input, select, textarea) { font-size: 16px; } /* جلوگیری از زوم iOS */
    .zgc-specs > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
    .zgc-toolbar { position: sticky; inset-block-start: 76px; z-index: 5; }
}

/* خط مسیر (breadcrumb) نسخهٔ کم‌رنگ: پیش از این با style اینلاین رنگ می‌گرفت
   که هم CSP را شل می‌کرد و هم بین دو صفحه ناهمگون بود. */
.zgc-crumbs--muted { color: var(--zg-muted); margin-block-start: 1rem; }
.zgc-eyebrow--flat { color: var(--zg-accent-dark); margin: 0; }
.zgc-variant__sku { color: var(--zg-muted); }

/* --------------------------------------------------------------------------
   RTL typography guard
   حروف فارسی/عربی متصل‌اند؛ فاصله‌گذاری منفی (tracking) و فاصلهٔ حروف
   لاتین روی آن‌ها فقط خوانایی را خراب می‌کند. هر قاعده‌ای که tracking می‌دهد
   باید در RTL خنثی شود — یک‌جا و نه پراکنده در هر بخش.
   -------------------------------------------------------------------------- */
[dir="rtl"] .zgc-eyebrow,
[dir="rtl"] .zgc-hero h1,
[dir="rtl"] .zgc-tile__title,
[dir="rtl"] .zgc-card__title { letter-spacing: 0; }

/* فلش‌ها در RTL باید آینه شوند. پیکان متن (←/›) با CSS آینه می‌شود تا معنای
   «بعدی» در هر جهت درست بماند؛ بدون آن، در فارسی فلش به عقب اشاره می‌کرد. */
[dir="rtl"] .zgc-tile__chevron { display: inline-block; transform: scaleX(-1); }

/* نوار اقدام ثابت موبایل روی محتوای پابرگ می‌نشیند؛ بدون این فاصله، آخرین خط
   پابرگ زیر نوار پنهان می‌شد (در صفحهٔ محصول). */
@media (max-width: 939px) {
    .catalog-page .zg-foot { padding-block-end: 5.5rem; }
}

/* Visual continuity with the editorial and landing pages. */
.zgc-hero { background: var(--zg-navy-mesh), var(--zg-navy-gradient); }
.zgc-tile, .zgc-card, .zgc-filters, .zgc-gallery__main, .zgc-empty { border-radius: var(--zg-radius-lg); }
.zgc-card { box-shadow: var(--zg-shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; }
.zgc-card:hover, .zgc-card:focus-within { box-shadow: var(--zg-shadow-raised); border-color: var(--zg-line-strong); }
.zgc-filters { box-shadow: var(--zg-shadow-sm); }
.zgc-filter-toggle, .zgc-filters__apply { min-block-size: 44px; }