/* RapitwebGreen - base layer for Grand.Web.
   Load order (Shared/Partials/Head.cshtml): Default stylesheets -> tokens.css -> base.css -> header.css -> ...
   Rule: no raw colours here. Tokens only, and Bootstrap components are restyled through their own --bs-* variables. */

/* self-hosted font (drop the file in Content/fonts; falls back to Tahoma if missing) */


@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/vazir/Vazir-Meduim-FD.woff") format("woff");
    font-weight: 100 400;
    font-display: swap;
}


@font-face {
    font-family: 'kalame';
    src: url('../fonts/kalameh/woff2/KalamehWebFaNum-Thin.woff2') format('woff2'), url('../fonts/kalameh/woff/KalamehWebFaNum-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kalame';
    src: url('../fonts/kalameh/woff2/KalamehWebFaNum-Regular.woff2') format('woff2'), url('../fonts/kalameh/woff/KalamehWebFaNum-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kalame';
    src: url('../fonts/kalameh/woff2/KalamehWebFaNum-Bold.woff2') format('woff2'), url('../fonts/kalameh/woff/KalamehWebFaNum-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'kalame';
    src: url('../fonts/kalameh/woff2/KalamehWebFaNum-Black.woff2') format('woff2'), url('../fonts/kalameh/woff/KalamehWebFaNum-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: IRANSans;
    src: url(../fonts/IRANSans/IRANSansWeb.eot);
    src: url(../fonts/IRANSans/IRANSansWeb.eot) format('embedded-opentype'),url('../fonts/IRANSans/IRANSansWeb.woff') format('woff'),url(../fonts/IRANSans/IRANSansWeb.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: vazir;
    src: url(../fonts/vazir/vazir.html);
    src: url(../fonts/vazir/vazir.html) format('embedded-opentype'),url(../fonts/vazir/Vazir-Meduim-FD.woff) format('woff'),url(../fonts/vazir/vazir-2.html) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: vazir-bold;
    src: url(../fonts/vazir/vazir-Bold.html);
    src: url(../fonts/vazir/vazir-Blod.html) format('embedded-opentype'),url(../fonts/vazir/Vazir-Bold-FD.woff) format('woff'),url(../fonts/vazir/vazir-Bold-2.html) format('truetype');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: dana;
    src: url(../fonts/Dana/dana-fanum-medium.eot);
    src: url(../fonts/Dana/dana-fanum-medium.eot) format("embedded-opentype"),url(../fonts/Dana/dana-fanum-medium.woff2) format("woff2"),url(../fonts/Dana/dana-fanum-medium.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Tanha;
    src: url(../fonts/tanha/Tanha.eot);
    src: url(../fonts/tanha/Tanha.eot) format('embedded-opentype'),url(../fonts/tanha/Tanha-FD.woff) format('woff'),url(../fonts/tanha/Tanha.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}


html {
    scroll-padding-top: 5rem;
    font-family: "vazir"
}
/* anchors don't hide under the sticky header */
body {
    background-color: var(--gray);
    color: var(--text);
    font-family: var(--font);
}

h2, .h2 {
    font-size: calc(1.1rem + .9vw);
}

:focus-visible {
    outline: 2px solid var(--main);
    outline-offset: 2px;
}

.text-muted {
    color: var(--muted) !important;
}

/* full-width bars (header, footer): background spans the screen, content stays inside --container */
.rwg-bar {
    inline-size: 100%;
}

.rwg-bar__inner {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* buttons */
.btn {
    --bs-btn-border-radius: 999px;
    box-shadow: none;
}

.btn-primary, .btn-dark {
    --bs-btn-color: var(--gray);
    --bs-btn-bg: var(--dark);
    --bs-btn-border-color: var(--dark);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--dark) 85%, var(--bg));
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--dark);
    --bs-btn-active-border-color: var(--dark);
    --bs-btn-disabled-bg: var(--dark);
    --bs-btn-disabled-border-color: var(--dark);
    box-shadow: 0 6px 16px rgb(22 22 25 / .2);
}

.btn-outline-dark, .btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--gray);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--dark);
    --bs-btn-hover-border-color: var(--dark);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--dark);
}

/* forms */
.form-control, .form-select {
    border-radius: 999px;
    background-color: var(--white);
    border-color: var(--gray);
    color: var(--text);
}

textarea.form-control {
    border-radius: var(--radius);
}

.form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.form-control:focus, .form-select:focus {
    border-color: var(--main);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--main) 25%, transparent);
}

/* components: restyled via Bootstrap's own variables so Default markup keeps working */
.card {
    --bs-card-border-radius: var(--radius);
    --bs-card-bg: var(--white);
    --bs-card-border-color: var(--gray);
    box-shadow: var(--shadow-sm);
}

.badge {
    border-radius: 999px;
    font-weight: 500;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--white);
    --bs-dropdown-border-color: var(--gray);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--gray);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--main);
    --bs-dropdown-link-active-color: var(--white);
}

.modal {
    --bs-modal-bg: var(--white);
    --bs-modal-border-color: var(--gray);
    --bs-modal-border-radius: var(--radius);
    --bs-modal-color: var(--text);
}

.offcanvas {
    --bs-offcanvas-bg: var(--white);
    --bs-offcanvas-color: var(--text);
    --bs-offcanvas-border-color: var(--gray);
}

a {
    color: var(--muted) !important;
    text-decoration: none;
}

    a:hover {
        --bs-link-color-rgb: var(--dark);
    }

.modal-close:hover, .modal-close:focus, .modal-close:not(:disabled):not(.disabled):active {
    color: var(--main) !important
}

.attributes {
    border: unset !important;
}





 /* RapitwebGreen - footer (minimal, merged).
   Load after base.css. Tokens only; Bootstrap list-group is restyled via its own --bs-* variables. */
.rwg-footer {
    margin-block-start: 3rem;
    padding-block-start: 2.5rem;
    background: var(--white) !important;
    border-block-start: 2px solid var(--main);
    color: var(--muted);
    font-size: .875rem;
}

/* ---- columns ---- */
.rwg-footer .row {
    row-gap: 1.5rem;
}

.rwg-footer .footer-block {
    padding-block: 0;
}

.rwg-footer .viewBox + .viewBox {
    margin-block-start: .75rem;
}

.rwg-footer .list-pad {
    padding: 0;
}

/* ---- section titles: flat text (phone accordion headers; shown as column headings on desktop below) ---- */
.rwg-footer .step-title.card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 !important; /* beats .p-3 */
    margin-block-end: .5rem !important; /* beats .mb-1 */
}

.rwg-footer .step-title .h5 {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text);
    text-align: start !important; /* beats .text-center */
}

/* ---- link lists ---- */
.rwg-footer .list-group,
.rwg-footer .list-group.bg-light { /* beats .bg-light / .my-3 */
    --bs-list-group-bg: transparent;
    --bs-list-group-border-width: 0;
    --bs-list-group-border-radius: 0;
    --bs-list-group-item-padding-x: 0;
    --bs-list-group-item-padding-y: .3rem;
    --bs-list-group-action-hover-bg: transparent;
    --bs-list-group-action-active-bg: transparent;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 !important;
    background: transparent !important;
}

.rwg-footer .list-group-item,
.rwg-footer .list-group-item:not(.list-group-item-action),
[dark-theme="true"] .rwg-footer .list-group-item,
[dark-theme="true"] .rwg-footer .list-group-item-action {
    width: auto;
    padding: 5px 0;
    background: transparent;
    border: 0;
    color: var(--rwg-muted-text);
    font-size: 14px;
    text-align: start;
}

.rwg-footer .list-group-item-action {
    transition: color .15s ease;
}

    .rwg-footer .list-group-item-action:hover,
    [dark-theme="true"] .rwg-footer .list-group-item-action:hover {
        background: transparent;
    }

.rwg-footer a:hover,
.rwg-footer a:focus-visible {
    color: var(--text) !important;
}

/* about-us: label above value, no box */
.rwg-footer .about-us .list-group-item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

    .rwg-footer .about-us .list-group-item span:first-child {
        color: var(--rwg-ink);
        font-size: 12px;
        font-weight: 600;
    }

/* ---- social ---- */
.rwg-footer .rwg-social {
    flex-direction: row !important; /* beats the .list-group column above */
    justify-content: center !important; /* beats the .list-group flex-start above */
    gap: .5rem;
    margin-block: 1rem 1.5rem !important;
    background: unset !important;
    box-shadow: unset !important;
}

    .rwg-footer .rwg-social .list-group-item,
    [dark-theme="true"] .rwg-footer .rwg-social .list-group-item {
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        filter: none;
    }

    .rwg-footer .rwg-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.25rem;
        block-size: 2.25rem;
        background: var(--rwg-bg);
        border: 1px solid var(--main);
        border-radius: 50%;
        font-size: 1rem;
        transition: background-color var(--rwg-dur) var(--rwg-ease), border-color var(--rwg-dur) var(--rwg-ease), color var(--rwg-dur) var(--rwg-ease);
    }

        .rwg-footer .rwg-social a:hover,
        .rwg-footer .rwg-social a:focus-visible {
            background: var(--rwg-ink);
            border-color: var(--rwg-ink);
            color: var(--rwg-on-ink) !important;
        }

/* ---- bottom bar ---- */
.rwg-footer .footer-lower {
    margin-block-start: 2rem;
    padding-block: 1.25rem !important;
    border-block-start: 1px solid var(--rwg-line) !important; /* beats .border-top */
    font-size: .8125rem;
    color: var(--rwg-muted-text);
}

    .rwg-footer .footer-lower a.text-success {
        color: var(--rwg-ink) !important;
    }
        /* beats .text-success */
        .rwg-footer .footer-lower a.text-success:hover {
            color: var(--text) !important;
        }

/* ---- desktop: three columns, social + bottom bar full width ---- */
@media (min-width: 992px) {
    .rwg-footer .container > .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 3rem;
        margin-inline: 0;
    }

        .rwg-footer .container > .row > * {
            inline-size: auto;
            max-inline-size: none;
            padding: 1rem;
            background-color: var(--gray);
            border-radius: 2rem;
            box-shadow: var(--shadow-md);
        }

    .rwg-footer .rwg-social {
        grid-column: 1 / -1;
    }

    /* Default shows titles only as the phone accordion headers; on desktop they head the columns */
    .rwg-footer .step-title {
        display: block !important; /* beats .d-lg-none */
        pointer-events: none;
    }

        .rwg-footer .step-title:after {
            content: " ";
            border-bottom: 1px var(--main) solid;
            max-width: 250px;
            width: 70%;
            position: absolute;
            padding-top: 2px;
        }
        }
        .rwg-footer .step-title .h5 {
            display: block;
            color: var(--rwg-ink);
            font-size: 13px;
            font-weight: 600;
        }
    }

/* ---- tablet + phone: compact footer ----
   Tablet: link blocks side by side (2 columns), about-us + social full width.
   Phone: one column of blocks, but each link list flows in 2 columns. */
@media (max-width: 991.98px) {
    .rwg-footer {
        margin-block-start: 2rem;
        padding-block-start: 1.25rem;
    }

        .rwg-footer .container > .row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem 1.5rem;
            margin-inline: 0;
        }

            .rwg-footer .container > .row > * {
                inline-size: auto;
                max-inline-size: none;
                padding-inline: 0;
            }

        .rwg-footer .about-us,
        .rwg-footer .rwg-social {
            grid-column: 1 / -1;
        }

        .rwg-footer .footer-block .step-title.card {
            margin-block-end: .25rem !important;
        }

        .rwg-footer .step-title .h5 {
            font-size: .8125rem;
        }

        .rwg-footer .viewBox + .viewBox {
            margin-block-start: 0;
        }

        .rwg-footer .footer-block .list-group-item {
            padding-block: 3px;
            font-size: 13px;
        }

        /* about-us: items flow in columns instead of one long stack */
        .rwg-footer .about-us .list-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
            gap: .5rem 1.5rem;
        }

        .rwg-footer .about-us .list-group-item {
            gap: .125rem;
        }

        .rwg-footer .rwg-social {
            margin-block: 0 .5rem !important;
        }

            .rwg-footer .rwg-social a {
                inline-size: 2rem;
                block-size: 2rem;
                font-size: .875rem;
            }

        .rwg-footer .footer-lower {
            margin-block-start: .5rem;
            padding-block: .75rem !important;
            text-align: center;
        }

            .rwg-footer .footer-lower .col-12 {
                text-align: center !important;
            }
}

@media (max-width: 575.98px) {
    .rwg-footer .container > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* link lists flow in 2 columns */
    .rwg-footer .footer-block .list-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
    }
    /* but about-us keeps its own auto-fit columns */
    .rwg-footer .about-us .list-group {
        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    }
}


/* RapitwebGreen - category page + two-column catalog layout.
   Load after catalog.css and product.css. Tokens only; Bootstrap components are restyled via --bs-* variables.
   Replaces the old col-lg-3 / col-lg-9 split with a CSS grid (markup of _TwoColumns.cshtml is untouched,
   because the twoColumnsSidebar script depends on its ids and classes). */

/* ================= breadcrumb (global: it renders outside .category-page) ================= */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--muted);
  --bs-breadcrumb-item-active-color: var(--text);
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-padding-y: .25rem;
  font-size: .8125rem;
}
.breadcrumb-item a { transition: color .15s ease; }
.breadcrumb-item a:hover { color: var(--text) !important; }
.breadcrumb .current-item { color: var(--text); font-weight: 600; }
.breadcrumb .b-icon { color: var(--main); }

/* ================= two-column layout: sidebar + content ================= */
@media (min-width: 992px) {
  #TwoColumns {
    --sidebar-width: 16.5rem;
    --sticky-top: 5.5rem;                 /* height of the sticky header + a little air */
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-inline: 0;
  }
  /* undo Bootstrap's .row > * / .col-lg-* sizing */
  #TwoColumns > * {
    inline-size: auto;
    max-inline-size: none;
    margin-top: 0;
    padding-inline: 0;
  }
  #TwoColumns > .generalLeftSide {
    grid-column: 1;                       /* first column = right side in RTL, left in LTR */
    grid-row: 1;
    position: sticky;
    top: var(--sticky-top);
    max-block-size: calc(100vh - var(--sticky-top) - 1rem);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 1rem;
    background: var(--white);
    border: 1px solid var(--gray);
    border-radius: var(--radius);
  }
  #TwoColumns > .generalSideRight { grid-column: 2; grid-row: 1; }
}

/* sidebar blocks (filters, category navigation...) */
.generalLeftSide .block + .block {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--gray);
}

/* phone/tablet: filters button above the content (the sidebar itself lives in the offcanvas) */
#mobile-filters-toggle { margin-block-end: .75rem; }
#sidebar-mobile-button {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--gray);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--gray);
  --bs-btn-hover-bg: var(--dark);
  --bs-btn-hover-border-color: var(--dark);
  --bs-btn-active-color: var(--gray);
  --bs-btn-active-bg: var(--dark);
  --bs-btn-active-border-color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  inline-size: 100%;
}

/* ================= filters ================= */
.product-filter h2 { margin-block-end: .75rem; font-size: .9375rem; font-weight: 700; color: var(--text); }
.product-spec-group { margin: 0 0 1rem; padding: 0; list-style: none; }
.product-spec-group li { list-style: none; }
.product-spec-group .title h6 { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.product-spec-group .btn {
  --bs-btn-padding-x: .75rem;
  --bs-btn-padding-y: .25rem;
  --bs-btn-font-size: .8125rem;
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--gray);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--gray);
  --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--gray);
  --bs-btn-active-border-color: var(--muted);
}
.product-spec-group .color-container .color {
  display: inline-block;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 1px solid var(--gray);
  border-radius: 50%;
  font-size: 0;
  vertical-align: middle;
}

.product-filter .card {
  --bs-card-bg: transparent;
  --bs-card-border-width: 0;
  box-shadow: none;
}
.product-filter .card-header { padding-inline: 0; background: transparent; border: 0; font-weight: 600; color: var(--text); }
.product-filter .card-body { padding-inline: 0; }
.product-filter .filtered-items ul { list-style: none; }
.product-filter .filtered-items .item a {
  padding: .2rem .65rem;
  border: 1px solid var(--gray);
  border-radius: 999px;
  font-size: .8125rem;
  cursor: pointer;
}

/* ================= page head + descriptions ================= */
.category-head { margin-block: .25rem 1rem; }
.category-head .generalTitle {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.category-intro,
.category-bottom {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--muted);
}
.category-intro { margin-block-end: 1.25rem; }
.category-bottom {
  margin-block: 2rem 1rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--radius);
}
.category-intro img,
.category-bottom img { max-inline-size: 100%; block-size: auto; border-radius: var(--radius); }
.category-intro :is(h2, h3, h4),
.category-bottom :is(h2, h3, h4) { margin-block: 1rem .5rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }

/* ================= subcategory strip ================= */
.subcategory-strip { margin-block-end: 1.5rem; }
.subcategory-list {
  display: flex;
  gap: .75rem;
  margin: 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.subcategory-list > li { flex: 0 0 auto; scroll-snap-align: start; }
.subcategory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  inline-size: 5.25rem;
  text-align: center;
}
.subcategory-thumb {
  display: block;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  overflow: hidden;
  background: var(--gray);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gray);
  transition: box-shadow .2s ease;
}
.subcategory-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.subcategory-name { font-size: .8125rem; font-weight: 600; line-height: 1.5; color: var(--text); }
.subcategory-item:hover .subcategory-thumb,
.subcategory-item:focus-visible .subcategory-thumb { box-shadow: 0 0 0 2px var(--main); }

/* ================= featured products (slider) ================= */
.category-featured { margin-block-end: 2rem; }
.category-section-title {
  margin-block-end: 1rem;
  padding-inline-start: .75rem;
  border-inline-start: 3px solid var(--main);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

/* ================= toolbar (Selectors.cshtml) ================= */
.catalog-selectors {
  margin-block-end: 1rem !important;      /* beats .mb-3 */
  background: var(--white);
  border: 1px solid var(--gray);
  border-radius: var(--radius);
}
.catalog-selectors > .d-flex {
  align-items: center;
  gap: .5rem 1rem;
  padding-block: .5rem;
  padding-inline: .75rem !important;      /* beats .px-3 */
}
.catalog-selectors .sort-container { display: flex; align-items: center; gap: .5rem; }
.catalog-selectors .col-form-label { margin: 0; padding: 0; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.catalog-selectors .form-select {
  inline-size: auto;
  min-inline-size: 8rem;
  padding-block: .3rem;
  font-size: .8125rem;
}
.catalog-selectors .item-statistics { gap: .35rem; font-size: .8125rem; color: var(--muted); }
.catalog-selectors .item-statistics .number { font-weight: 600; color: var(--text); }
.catalog-selectors .change-view { gap: .25rem; }
.catalog-selectors .viewmode-icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease;
}
.catalog-selectors .viewmode-icon .b-icon { font-size: 1.25rem !important; }   /* beats the inline font-size:2em */
.catalog-selectors .viewmode-icon.selected { background: var(--dark); color: var(--gray) !important; }   /* beats .text-info */

/* ================= product grid + list ================= */
.category-page .product-grid .row { --bs-gutter-x: .75rem; }
.category-page .product-list .row { row-gap: .75rem; }

.category-page .alert-info {
  --bs-alert-bg: var(--white);
  --bs-alert-border-color: var(--gray);
  --bs-alert-color: var(--muted);
  border-radius: var(--radius);
  text-align: center;
}

/* ================= pagination ================= */
.category-page .pagination {
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--white);
  --bs-pagination-border-color: var(--gray);
  --bs-pagination-border-radius: 999px;
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--gray);
  --bs-pagination-hover-border-color: var(--gray);
  --bs-pagination-focus-color: var(--text);
  --bs-pagination-focus-bg: var(--gray);
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem;
  margin-block: 1.5rem;
}
.category-page .page-link { min-inline-size: 2.25rem; border-radius: 999px !important; text-align: center; cursor: pointer; }
.category-page .page-item.currentpage .page-link {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--gray) !important;          /* beats the global a { color } rule */
}

/* ================= tablet and up ================= */
@media (min-width: 768px) {
  .category-head .generalTitle { font-size: 1.75rem; }
  .category-page .product-grid .row { --bs-gutter-x: 1rem; }
  .subcategory-list { flex-wrap: wrap; overflow: visible; }   /* all subcategories visible, no sideways scrolling */
  .subcategory-thumb { inline-size: 5rem; block-size: 5rem; }
  .subcategory-item { inline-size: 6rem; }
}

/* ================= phone ================= */
@media (max-width: 767.98px) {
  /* breadcrumb stays on one line and scrolls sideways instead of wrapping to 3 rows */
  .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .catalog-selectors .sort-container { flex: 1 1 8rem; }
  .catalog-selectors .form-select { inline-size: 100%; min-inline-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .subcategory-thumb,
  .catalog-selectors .viewmode-icon,
  .breadcrumb-item a { transition: none; }
}