(moved out of the filter aside so it shows on mobile). Aligned 8px in to match the breadcrumb / column content. / / page heading — its own header card (same panel language as the sortbar) with a teal accent, so it reads as intentional and consistent on desktop and mobile. A visible

/* ============================================================
   Part 10 / P1 — product catalogue
   A calm clinical catalogue: filters read as an instrument tray,
   while products stay the visual focus. Scoped to the category page.
   ============================================================ */
/* Missing brand tints — products10.css referenced these shades but only 050/100/400/600
   were defined (front.css). Define the in-between steps so checkbox borders, labels and
   the mobile filter drawer (which lives outside .sd10-products-page) resolve correctly. */
:root{--sd-teal-200:#a7d9cd;--sd-teal-300:#6ec9b3;--sd-teal-500:#14a386;--sd-teal-700:#0a6e5a;}
.sd10-products-page{
  --sd10-panel:rgba(255,255,255,.78);
  --sd10-border:rgba(18,86,74,.12);
  --sd10-shadow:0 18px 42px -32px rgba(26,62,55,.42);
}
@media(min-width:1400px){.body.sd10-products-page{width:min(1600px,calc(100vw - 40px));}}
/* breadcrumb — inset 8px each side so it lines up with the columns (right_col/left_col
   carry padding:8px, so the grid content sits 8px in from the full-width row). */
.sd10-products-page .addressbar_page{margin:10px 8px 12px;padding:7px 13px;border-radius:10px;}
.sd10-products-page .addressbar_page>a{font-size:12px;}
.sd10-products-layout{align-items:flex-start;}
.sd10-products-page .sd10-filter-column{padding-top:0!important;}
/* Desktop: the filter panel travels with the page. Sticky must sit on the column (the
   grid cell is tall enough to scroll within); the form's own height leaves it no room. */
@media(min-width:960px){
  .sd10-products-page .sd10-filter-column[data-sd10-filter-source]{position:sticky;top:96px;align-self:flex-start;max-height:calc(100vh - 112px);overflow-y:auto;overflow-x:hidden;}
  .sd10-products-page .sd10-filter-column[data-sd10-filter-source] .sd10-filter-form{position:static!important;}
}
.sd10-products-page .right_col,.sd10-products-page .left_col{padding:8px;}
/* page heading — now a page-level <h1> (moved out of the filter aside so it shows on
   mobile). Aligned 8px in to match the breadcrumb / column content. */
/* page heading — its own header card (same panel language as the sortbar) with a teal
   accent, so it reads as intentional and consistent on desktop and mobile. A visible
   <h1> in a styled box is fully SEO-safe; only display:none would hurt. */
.sd10-products-page .sd10-catalogue-title{display:flex;align-items:center;gap:11px;margin:0 8px 12px;padding:13px 17px;border:1px solid var(--sd10-border);border-radius:14px;background:var(--sd10-panel);box-shadow:var(--sd10-shadow);color:var(--sd-ink);font-size:17px;font-weight:900;line-height:1.6;text-align:right;}
.sd10-products-page .sd10-catalogue-title::before{content:"";flex:0 0 auto;width:4px;height:19px;border-radius:3px;background:var(--sd-teal-600);}
@media(max-width:640px){.sd10-products-page .sd10-catalogue-title{margin-bottom:10px;padding:11px 14px;font-size:15px;}}
.sd10-filter-form{padding:8px;border:1px solid var(--sd10-border);border-radius:20px;background:var(--sd10-panel);box-shadow:var(--sd10-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.sd10-products-page .filters{margin:0 0 8px;border:1px solid rgba(18,86,74,.08);border-radius:14px;background:rgba(255,255,255,.73);box-shadow:none;overflow:hidden;}
.sd10-products-page .filters:last-child{margin-bottom:0;}
.sd10-products-page .header_filters{padding:10px 12px;background:transparent;border:0;}
.sd10-products-page .header_filters>p{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 0 7px;border:0;border-bottom:1px solid rgba(18,86,74,.12);color:var(--sd-ink);font-size:12px;font-weight:800;}
.sd10-products-page .header_filters>p:before{content:"";width:5px;height:5px;margin-left:7px;border-radius:50%;background:var(--sd-teal-500);box-shadow:0 0 0 4px rgba(26,188,156,.1);}
.sd10-products-page .filtering{padding:0 12px 10px;color:var(--sd-muted);font-size:12px;}
.sd10-products-page .filtering_brand{max-height:190px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--sd-teal-200) transparent;}
.sd10-products-page .filtering p{display:flex;align-items:center;gap:7px;margin:7px 0;line-height:1.5;}
.sd10-products-page .sd10-filter-form .uk-accordion-title{position:relative;display:block;padding:10px 12px 10px 30px;border-bottom:0!important;color:var(--sd-ink);direction:rtl;text-align:right!important;}
.sd10-products-page .sd10-filter-form .uk-accordion-title::before{position:absolute;top:50%;left:11px;width:8px;height:8px;margin:0;border:0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;background:none!important;float:none;transform:translateY(-65%) rotate(-45deg);transition:transform .18s ease;}
.sd10-products-page .sd10-filter-form .uk-open>.uk-accordion-title::before{transform:translateY(-35%) rotate(135deg);}
.sd10-products-page .sd10-desktop-filter-title{position:relative;display:block;width:100%;min-height:43px;padding:10px 32px 10px 12px;border:0;background:transparent;color:var(--sd-ink);font-family:inherit;font-size:12px;font-weight:800;text-align:right;cursor:pointer;}
.sd10-products-page .sd10-desktop-filter-title::before{position:absolute;top:50%;right:12px;width:7px;height:7px;border-bottom:2px solid currentColor;border-left:2px solid currentColor;content:"";transform:translateY(-65%) rotate(-45deg);transition:transform .18s ease;}
.sd10-products-page .filters.is-open>.sd10-desktop-filter-title::before{transform:translateY(-35%) rotate(135deg);}
.sd10-products-page .filtering .uk-checkbox{width:15px;height:15px;border-color:var(--sd-teal-200);}
.sd10-products-page .filtering .uk-checkbox:checked{background-color:var(--sd-teal-600);}
.sd10-products-page .uk-label{display:inline-flex;align-items:center;gap:5px;margin:0 0 5px;padding:5px 8px;border-radius:9px;background:var(--sd-teal-050);color:var(--sd-teal-700);font-size:11px;}
.sd10-products-page .btn_price{width:100%;border:0;border-radius:10px;padding:10px 8px;background:var(--sd-teal-600);box-shadow:0 8px 16px -12px rgba(10,120,99,.8);color:#fff;font-family:inherit;font-size:12px;font-weight:800;transition:background .2s ease,transform .2s ease;}
.sd10-products-page .btn_price:hover{background:var(--sd-teal-hover);transform:translateY(-1px);}
.sd10-products-main{min-width:0;}
.sd10-legacy-mobile-filter{display:none!important;}
.sd10-products-page .sd10-sortbar{align-items:center;margin:0;padding:12px 16px;border:1px solid var(--sd10-border);border-radius:18px;background:var(--sd10-panel);box-shadow:var(--sd10-shadow);}
.sd10-products-page .filter{display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.sd10-products-page .filter>span{margin-left:5px;color:var(--sd-muted);font-size:12px;font-weight:700;}
.sd10-products-page .btn_filter{margin:0;padding:7px 10px;border:1px solid transparent;border-radius:10px;color:var(--sd-ink);font-size:12px;font-weight:700;transition:.2s;}
.sd10-products-page .btn_filter:hover{border-color:var(--sd-teal-100);background:#fff;color:var(--sd-teal-700);}
.sd10-products-page .active_btn_filter{border-color:var(--sd-teal-600);background:var(--sd-teal-600);box-shadow:0 8px 15px -12px rgba(10,120,99,.9);color:#fff;}
.sd10-products-page .active_btn_filter:hover,.sd10-products-page .active_btn_filter:focus{border-color:var(--sd-teal-hover);background:var(--sd-teal-hover);color:#fff!important;}
.sd10-advanced-filter{display:none;}
.sd10-products-page .count p{margin:0;color:var(--sd-muted);font-size:12px;white-space:nowrap;}
.sd10-products-page .sd10-product-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px 16px;margin:10px 0 0;padding:12px;border:1px solid rgba(18,86,74,.08);border-radius:22px;background:rgba(255,255,255,.52);}
.sd10-products-page .sd10-product-grid>div{margin:0!important;padding:0;}
.sd10-products-page .sd10-product-grid>.sd10-product-cell{box-sizing:border-box;width:auto!important;min-width:0;max-width:none;}
.sd10-products-page .sd-card{box-shadow:0 14px 28px -24px rgba(35,49,45,.45);}
.sd10-products-page .sd-card:hover{box-shadow:0 24px 46px -25px rgba(18,93,76,.38);}
@media(max-width:1599px) and (min-width:1250px){.sd10-products-page .sd10-product-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1249px) and (min-width:960px){.sd10-products-page .sd10-product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:959px){
  .sd10-products-page .sd10-products-main{width:100%!important;max-width:none;}
  .sd10-catalogue-intro{padding:18px 20px;}
  .sd10-products-page .sd10-sortbar{padding:10px 12px;}
  .sd10-products-page .filter{gap:3px;}
  .sd10-products-page .btn_filter{padding:6px 8px;}
}
@media(max-width:959px){
  .sd10-products-page .addressbar_page{margin:8px 0 10px;}
  .sd10-products-page [data-sd10-filter-source]{display:none!important;}
  .sd10-products-page .sd10-sortbar{display:block;padding:11px;border-radius:16px;}
  .sd10-products-page .filter{gap:3px;margin-bottom:8px;}
  .sd10-products-page .filter>span.uk-visible\@m{display:none!important;}
  .sd10-products-page .sd10-catalogue-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;text-align:right!important;}
  .sd10-products-page .sd10-catalogue-summary .sd10-advanced-filter{order:1;}
  .sd10-products-page .sd10-catalogue-summary p{order:2;}
  .sd10-advanced-filter{display:inline-flex;align-items:center;gap:5px;margin:0;padding:7px 9px;border:0;border-radius:9px;background:var(--sd-teal-050);color:var(--sd-teal-700);font:inherit;font-size:11px;font-weight:900;white-space:nowrap;cursor:pointer;}
  .sd10-products-page .btn_filter{padding:6px 7px;font-size:11px;}
  .sd10-products-page .count p{font-size:11px;}
  .sd10-products-page .sd10-product-grid{grid-template-columns:repeat(2,1fr);gap:14px 16px;margin-top:8px;padding:10px;border-radius:17px;}
  .sd10-products-page .sd10-product-grid>.sd10-product-cell{width:auto!important;min-width:0;max-width:none;}
}
@media(max-width:640px){
  .sd10-products-page .sd10-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:8px;padding:5px;}
  .sd10-products-page .sd10-product-grid>.sd10-product-cell{width:auto!important;min-width:0;max-width:none;}
}
.sd10-filter-offcanvas{position:fixed;z-index:10000;inset:0;background:rgba(20,35,31,.36);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;}
.sd10-filter-offcanvas.is-visible{opacity:1;visibility:visible;transition:opacity .2s ease;}
.sd10-filter-drawer{position:absolute;top:0;right:0;width:min(355px,92vw);height:100%;overflow-y:auto;padding:20px 16px;background:#fff;color:var(--sd-ink);direction:rtl;text-align:right;box-sizing:border-box;transform:translateX(105%);transition:transform .24s ease;}
.sd10-filter-offcanvas.is-visible .sd10-filter-drawer{transform:translateX(0);}
/* P12: circle removed — bare glyph, matching every other close/action icon. */
.sd10-filter-close{position:absolute;top:10px;left:13px;width:32px;height:32px;padding:0;border:0;background:none;color:var(--sd-ic-quiet,var(--sd-muted));font-size:28px;line-height:1;cursor:pointer;transition:color .2s ease;}
.sd10-filter-close:hover{color:var(--sd-ic,var(--sd-teal-600));}
.sd10-filter-drawer .sd10-filter-form{padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;direction:rtl;text-align:right;}
.sd10-filter-drawer .sd10-drawer-title{margin:2px 0 14px;padding:0 0 13px;border-bottom:1px solid rgba(18,86,74,.1);color:var(--sd-ink);font-size:16px;font-weight:900;line-height:1.6;text-align:right;}
.sd10-filter-drawer .filters{margin:0;border:0;border-radius:0;background:transparent;overflow:visible;}
.sd10-filter-drawer .sd10-filter-section{margin:0 0 2px;border:0;border-bottom:1px solid rgba(18,86,74,.09);border-radius:12px;transition:background .18s ease;}
.sd10-filter-drawer .sd10-filter-section:last-of-type{border-bottom:0;}
.sd10-filter-drawer .sd10-filter-section.is-open{background:rgba(231,246,242,.5);border-bottom-color:transparent;padding-bottom:4px;}
.sd10-filter-drawer .sd10-filter-section.is-open>.sd10-filter-title{color:var(--sd-teal-700)!important;}
.sd10-filter-drawer .sd10-filter-title{position:relative;display:block;width:100%;min-height:51px;margin:0;padding:15px 28px 15px 0;border:0!important;background:transparent;color:var(--sd-ink)!important;direction:rtl;font-family:inherit;font-size:14px;font-weight:800;line-height:1.5;text-align:right!important;cursor:pointer;}
.sd10-filter-drawer .sd10-filter-title::before{position:absolute;top:50%;left:13px;width:8px;height:8px;margin:0;border:0;border-bottom:2px solid currentColor;border-left:2px solid currentColor;background:none!important;content:"";transform:translateY(-65%) rotate(-45deg);transition:transform .18s ease;}
.sd10-filter-drawer .sd10-filter-section.is-open>.sd10-filter-title::before{transform:translateY(-35%) rotate(135deg);}
.sd10-filter-drawer .header_filters{padding:13px 0 8px;}
.sd10-filter-drawer .header_filters>p{border:0;padding:0;font-size:13px;}
.sd10-filter-drawer .filtering{margin:0 10px 12px;padding:11px 13px 13px;border:1px solid rgba(18,86,74,.1);border-radius:12px;background:#fff;font-size:12px;text-align:right;}
.sd10-filter-drawer .sd10-filter-accordion{margin:0;padding:0;list-style:none;}
.sd10-filter-drawer .sd10-filter-accordion>li{margin:0;border:0;}
.sd10-filter-drawer .uk-accordion-title{display:block;min-height:51px;margin:0;padding:15px 0 15px 28px!important;border:0!important;color:var(--sd-ink)!important;direction:rtl;font-size:14px;font-weight:800;line-height:1.5;text-align:right!important;}
.sd10-filter-drawer .uk-accordion-title::before{top:50%;right:auto;left:13px;}
.sd10-filter-drawer .is-open>.uk-accordion-title::before{transform:translateY(-35%) rotate(135deg);}
.sd10-filter-drawer .uk-accordion-content{margin-top:0;text-align:right;}
.sd10-filter-drawer .filtering_brand{max-height:250px;overflow-y:auto;}
/* mobile: each option is a full-width tappable pill. The native checkbox square is hidden
   (kept for state/submit) and selection is shown by filling the pill + a ✓. A tap anywhere
   on the pill is forwarded to the checkbox by JS. Plain <p> (e.g. "برندی یافت نشد") stays text. */
.sd10-filter-drawer .filtering p{margin:0 0 8px;font-size:13px;line-height:1.6;text-align:right;color:var(--sd-muted);}
.sd10-filter-drawer .filtering p:last-child{margin-bottom:0;}
.sd10-filter-drawer .filtering p:has(.uk-checkbox){display:flex;align-items:center;gap:8px;min-height:50px;padding:13px 15px;border:1px solid rgba(18,86,74,.16);border-radius:12px;background:#fff;color:var(--sd-ink);font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.sd10-filter-drawer .filtering p .uk-checkbox{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none;}
.sd10-filter-drawer .filtering p:has(.uk-checkbox:checked){border-color:var(--sd-teal-600);background:var(--sd-teal-600);color:#fff;box-shadow:0 8px 16px -12px rgba(10,120,99,.8);}
.sd10-filter-drawer .filtering p:has(.uk-checkbox:checked)::after{content:"✓";margin-inline-start:auto;padding-inline-start:8px;font-size:14px;font-weight:900;line-height:1;}
.sd10-filter-drawer .wrapper{padding:0!important;}
.sd10-filter-drawer .wrapper>hr{display:none;}
.sd10-products-page .range-slider,.sd10-filter-drawer .range-slider{position:relative;padding:21px 8px 6px;border-radius:12px;background:linear-gradient(135deg,rgba(228,247,241,.8),rgba(255,255,255,.9));}
.sd10-filter-drawer .range-slider{padding:23px 10px 6px;border:1px solid rgba(18,86,74,.08);background:#f6faf9;}
/* RTL captions: minimum on the right, maximum on the left, above the two handles. */
.sd10-products-page .range-slider::before,.sd10-filter-drawer .range-slider::before{content:"حداقل";position:absolute;top:7px;right:13px;font-size:10px;font-weight:800;color:var(--sd-muted);pointer-events:none;}
.sd10-products-page .range-slider::after,.sd10-filter-drawer .range-slider::after{content:"حداکثر";position:absolute;top:7px;left:13px;font-size:10px;font-weight:800;color:var(--sd-muted);pointer-events:none;}
.sd10-products-page .irs,.sd10-filter-drawer .irs{height:24px!important;}
.sd10-products-page .irs-line,.sd10-filter-drawer .irs-line{height:6px!important;top:9px!important;border-radius:10px;background:#d7e9e4;}
.sd10-products-page .irs-bar,.sd10-filter-drawer .irs-bar{height:6px!important;top:9px!important;border-radius:10px;background:var(--sd-teal-600);}
.sd10-products-page .irs-slider,.sd10-filter-drawer .irs-slider{top:3px!important;width:17px!important;height:17px!important;border:3px solid #fff!important;border-radius:50%!important;background:var(--sd-teal-600)!important;box-shadow:0 2px 8px rgba(10,120,99,.35)!important;}
.sd10-products-page .irs-min,.sd10-products-page .irs-max,.sd10-products-page .irs-from,.sd10-products-page .irs-to,.sd10-products-page .irs-single,.sd10-filter-drawer .irs-min,.sd10-filter-drawer .irs-max,.sd10-filter-drawer .irs-from,.sd10-filter-drawer .irs-to,.sd10-filter-drawer .irs-single{display:none!important;}
/* price readout — one calm bordered box showing the selected range (from – to تومان). */
.sd10-price-readout{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:5px 8px;margin-top:8px;padding:11px 16px;border:1px solid rgba(18,86,74,.14);border-radius:14px;background:#fff;box-shadow:0 12px 26px -18px rgba(26,62,55,.32);direction:rtl;text-align:center;}
.sd10-price-readout>i{display:none;}
.sd10-price-readout output{font-family:iransans2,inherit;font-size:15px;font-weight:800;line-height:1.4;color:var(--sd-ink);direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sd10-price-readout .sd10-price-sep{color:var(--sd-muted);font-size:12px;font-weight:700;}
.sd10-price-readout .sd10-price-unit{color:var(--sd-muted);font-size:12px;font-weight:700;}
.sd10-filter-drawer .uk-checkbox{width:23px;height:23px;flex:0 0 23px;border:1px solid var(--sd-teal-200);border-radius:7px;background-color:#fff;}
.sd10-filter-drawer .uk-checkbox:checked{border-color:var(--sd-teal-600);background-color:var(--sd-teal-600);}

/* applied-filters chips inside the drawer — the storefront's teal look is scoped to
   .sd10-products-page, so out here UIkit's default (blue, desktop-sized) .uk-label showed
   through. Restyle for the drawer and give the remove control a finger-sized hit area. */
.sd10-filter-drawer .filtering .uk-label{display:inline-flex;align-items:center;gap:7px;margin:0 0 8px;padding:9px 13px;border-radius:11px;background:var(--sd-teal-050);color:var(--sd-teal-700);font-size:13px;font-weight:700;line-height:1.4;text-transform:none;}
.sd10-filter-drawer .filtering .uk-label a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-6px -7px -6px 0;border-radius:50%;background:rgba(10,120,99,.12);color:inherit;cursor:pointer;}
.sd10-filter-drawer .filtering .uk-label a:hover{background:rgba(10,120,99,.22);}
/* pagination — centered & modern, overriding the app's Bootstrap-4 paginator theme.
   The paginator wrapper sits INSIDE the product grid, so span the full row first. */
.sd10-products-page .sd10-product-grid>.uk-width-1-1{grid-column:1/-1;width:auto;margin:0;}
.sd10-products-page .sd10-products-main .uk-align-center{display:block;float:none;width:100%;margin:0;}
.sd10-products-page .pagination{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;width:100%;margin:22px 0 8px;padding:0;list-style:none;}
.sd10-products-page .pagination li{margin:0;}
.sd10-products-page .pagination .page-link,.sd10-products-page .pagination span,.sd10-products-page .pagination a{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 11px;border:1px solid var(--sd10-border);border-radius:11px;background:#fff;color:var(--sd-ink);font-size:13px;font-weight:700;line-height:1;box-shadow:none;transition:.18s ease;}
.sd10-products-page .pagination .page-link:hover,.sd10-products-page .pagination a:hover{border-color:var(--sd-teal-400);background:var(--sd-teal-050);color:var(--sd-teal-700);}
.sd10-products-page .pagination .active .page-link,.sd10-products-page .pagination .active span{border-color:var(--sd-teal-600);background:var(--sd-teal-600);color:#fff;box-shadow:0 8px 15px -12px rgba(10,120,99,.9);}
.sd10-products-page .pagination .disabled .page-link,.sd10-products-page .pagination .disabled span{opacity:.4;pointer-events:none;}

@media(prefers-reduced-motion:reduce){
  .sd10-products-page .btn_filter,.sd10-products-page .btn_price{transition:none;}
  .sd10-products-page .btn_price:hover{transform:none;}
}