/* ==========================================================================
   My tato — catalog.css
   Owner: CATALOG agent (product/category, search, special, manufacturer, compare, module/category).
   Use only var(--mt-…) tokens from base.css; no hex codes here (DESIGN.md §2.2).
   The product card (.mt-card), pagination, breadcrumbs, chips, rails and .mt-empty live in base.css (foundation).
   ========================================================================== */

/* ---------- Page head: H1 + count + help link ---------- */
.mt-pagehead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 20px; }
.mt-pagehead__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.mt-pagehead h1 { margin: 0; font-size: var(--mt-fs-h1); overflow-wrap: anywhere; }
.mt-pagehead__count { font: 600 var(--mt-fs-ui)/1.3 var(--mt-font-body); color: var(--mt-muted); white-space: nowrap; }
.mt-pagehead__sub { flex-basis: 100%; margin: 4px 0 0; color: var(--mt-text-2); font-size: var(--mt-fs-ui); }
.mt-pagehead__help { padding-block: 6px; font-size: var(--mt-fs-ui); }
.mt-pagehead__help .mt-svg { width: 16px; height: 16px; }
@media (max-width: 991.98px) {
  .mt-pagehead { margin: 4px 0 16px; }
  .mt-pagehead__help { display: none; }
  .mt-pagehead__main { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- Subcategory chips (DESIGN §4.19 p.3) ---------- */
.mt-subcats { margin: 0 0 24px; }
.mt-subcats__list { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mt-subcats__list > li { display: flex; flex: 0 1 auto; min-width: 0; max-width: 280px; }
.mt-subcat {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 16px 8px 8px;
  background: var(--mt-surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--mt-border);
  color: var(--mt-text); text-decoration: none; transition: var(--mt-transition);
}
.mt-subcat:hover { color: var(--mt-on-tint); box-shadow: inset 0 0 0 1px var(--mt-brand-300), var(--mt-sh-1); }
.mt-subcat.is-active { background: var(--mt-tint); box-shadow: inset 0 0 0 2px var(--mt-brand-500); color: var(--mt-on-tint); }
.mt-subcat__ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden;
  background: var(--mt-tint); color: var(--mt-brand-600); font-size: 17px;
}
.mt-subcat.is-active .mt-subcat__ico { background: var(--mt-surface); }
.mt-subcat__ico img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mt-subcat__text { display: flex; flex-direction: column; min-width: 0; }
.mt-subcat__name { font: 800 var(--mt-fs-small)/1.25 var(--mt-font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-subcat__meta { margin-top: 2px; font: 600 var(--mt-fs-xs)/1.25 var(--mt-font-body); color: var(--mt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-subcat--up .mt-subcat__ico { background: var(--mt-bg); color: var(--mt-text-2); }
.mt-subcats.has-more:not(.is-expanded) .is-extra { display: none; }
.mt-subcats__more { margin-top: 12px; min-height: 36px; font-size: var(--mt-fs-small); }
.mt-subcats__more i { transition: transform var(--mt-dur) var(--mt-ease); }
.mt-subcats.is-expanded .mt-subcats__more i { transform: rotate(180deg); }
@media (max-width: 991.98px) {
  .mt-subcats { margin-bottom: 16px; }
  .mt-subcats__list {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--mt-gutter)); padding: 2px var(--mt-gutter); scroll-padding-inline: var(--mt-gutter);
  }
  .mt-subcats__list::-webkit-scrollbar { display: none; }
  .mt-subcats__list > li { flex: none; max-width: 220px; scroll-snap-align: start; }
  .mt-subcats.has-more:not(.is-expanded) .is-extra { display: flex; }
  .mt-subcats__more { display: none; }
  .mt-subcat { min-height: 52px; padding-right: 14px; }
  .mt-subcat__name { white-space: nowrap; display: block; text-overflow: ellipsis; }
}

/* ---------- Layout: sidebar + content (core .row / #column-left) ---------- */
.mt-listing__row { --bs-gutter-x: 0; --bs-gutter-y: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; }
.mt-listing__row > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
.mt-listing #column-left, .mt-listing #column-right { display: none !important; }
@media (min-width: 992px) {
  .mt-listing #column-left, .mt-listing #column-right { display: block !important; }
  .mt-listing__row.has-left { grid-template-columns: 260px minmax(0, 1fr); }
  .mt-listing__row.has-right { grid-template-columns: minmax(0, 1fr) 260px; }
  .mt-listing__row.has-left.has-right { grid-template-columns: 240px minmax(0, 1fr) 240px; }
}
@media (min-width: 1200px) { .mt-listing__row.has-left { grid-template-columns: var(--mt-sidebar) minmax(0, 1fr); } }
.mt-listing #content { min-width: 0; }

/* ---------- Toolbar ---------- */
.mt-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
  margin: 0 0 16px; padding: 10px 12px 10px 20px; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg);
}
.mt-toolbar__found { margin: 0; font: 600 var(--mt-fs-ui)/1.3 var(--mt-font-body); color: var(--mt-text-2); }
.mt-toolbar__found b { color: var(--mt-text); font-weight: 800; }
.mt-toolbar__controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-left: auto; }
.mt-toolbar__field { display: flex; align-items: center; gap: 8px; margin: 0; }
.mt-toolbar__label { font: 600 var(--mt-fs-small)/1 var(--mt-font-body); color: var(--mt-muted); white-space: nowrap; }
.mt-toolbar .form-select {
  width: auto; min-height: 40px; height: 40px; padding: 0 36px 0 14px; border-radius: var(--mt-r-sm);
  font: 700 var(--mt-fs-small)/1.2 var(--mt-font-body); background-position: right 12px center; cursor: pointer;
}
.mt-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--mt-r-sm); background: var(--mt-bg); }
.mt-viewtoggle__btn {
  display: grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--mt-muted); font-size: 15px; cursor: pointer; transition: var(--mt-transition);
}
.mt-viewtoggle__btn:hover { color: var(--mt-text); }
.mt-viewtoggle__btn.active { background: var(--mt-surface); color: var(--mt-on-tint); box-shadow: var(--mt-sh-1); }
@media (max-width: 767.98px) {
  .mt-toolbar { padding: 0; border: 0; background: none; margin-bottom: 12px; }
  .mt-toolbar__found, .mt-toolbar__limit, .mt-viewtoggle { display: none; }
  .mt-toolbar__controls { flex: 1 1 100%; margin: 0; }
  .mt-toolbar__field { flex: 1 1 auto; }
  .mt-toolbar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mt-toolbar .form-select { width: 100%; min-height: 44px; height: 44px; }
}

/* ---------- Product grid (#product-list: common.js rewrites its classes) ---------- */
.mt-listing { --mt-cols: 4; }
#product-list.row {
  --bs-gutter-x: 0; --bs-gutter-y: 0;
  display: grid; grid-template-columns: repeat(var(--mt-cols), minmax(0, 1fr)); gap: var(--mt-gap); margin: 0;
}
#product-list.row > * { width: auto; max-width: none; flex: none; padding: 0; margin: 0; min-width: 0; }
#product-list.product-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1399.98px) { .mt-listing__row.has-left { --mt-cols: 3; } }
@media (max-width: 1199.98px) { .mt-listing { --mt-cols: 3; } }
@media (max-width: 767.98px) {
  .mt-listing, .mt-listing__row.has-left { --mt-cols: 2; }
  #product-list.row { gap: var(--mt-gap-sm); }
}

.mt-listing__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.mt-listing__foot:not(:has(.pagination)) { margin-top: 20px; }
.mt-listing__results { margin: 0; font: 600 var(--mt-fs-small)/1.3 var(--mt-font-body); color: var(--mt-muted); }
.mt-listing__note {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--mt-r);
  background: var(--mt-tint); border: 1px solid var(--mt-tint-border); color: var(--mt-on-tint); font-weight: 600; font-size: var(--mt-fs-small);
}
.mt-listing__note i { margin-top: 3px; }
.mt-listing__note p { margin: 0; }

/* ---------- Empty state card + fallback rail ---------- */
.mt-empty-card { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); }
.mt-empty-card .mt-empty { padding-block: 40px 44px; }
.mt-empty__img { height: auto; }
.mt-empty-card .mt-empty__icon { margin-inline: auto; } /* FA 7 gives icons a fixed width: centre the block */
.mt-empty__tips { margin: -6px auto 20px; padding: 0; list-style: none; color: var(--mt-text-2); font-size: var(--mt-fs-small); }
.mt-empty__tips li { margin: 2px 0; }
.mt-empty__chips-title { margin: 28px 0 10px; font: 800 var(--mt-fs-h6)/1.3 var(--mt-font-body); text-transform: uppercase; letter-spacing: var(--mt-ls-caps); color: var(--mt-muted); }
.mt-empty-card .mt-empty__chips { margin-top: 0; }
.mt-empty-card .mt-svg { width: 18px; height: 18px; }
.mt-fallback { margin-top: 32px; }
.mt-fallback__title { font-size: var(--mt-fs-h3); }
.mt-listing__row.has-left .mt-fallback .mt-rail { --mt-rail-cols: 4; }
@media (max-width: 1399.98px) { .mt-listing__row.has-left .mt-fallback .mt-rail { --mt-rail-cols: 3; } }
@media (max-width: 575.98px) {
  .mt-empty-card .mt-empty { padding: 32px 16px; }
  .mt-empty__actions .mt-btn { flex: 1 1 100%; }
  .mt-fallback .mt-sec-head__aside { margin-left: 0; }
}

/* ---------- SEO description ---------- */
.mt-seo { margin-top: 32px; padding: 24px 28px; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); }
.mt-seo__body { max-width: 900px; color: var(--mt-text-2); line-height: var(--mt-lh-loose); }
.mt-seo__body.is-clamped { max-height: calc(6 * 1.7em); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, var(--mt-text) 60%, transparent); mask-image: linear-gradient(180deg, var(--mt-text) 60%, transparent); }
.mt-seo__more { margin-top: 10px; }
.mt-seo__body h2, .mt-seo__body h3 { margin-top: 20px; }
.mt-seo__body img { border-radius: var(--mt-r-md); }

/* ---------- Sidebar: category module (column_left) ---------- */
.mt-side { padding: 8px; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); }
.mt-side__head {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: var(--mt-r);
  color: var(--mt-text); font: 800 1rem/1.25 var(--mt-font-body); text-decoration: none; transition: var(--mt-transition);
}
.mt-side__head:hover { color: var(--mt-on-tint); background: var(--mt-bg); }
.mt-side__head.is-active { background: var(--mt-tint-strong); color: var(--mt-on-tint); }
.mt-side__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--mt-tint); color: var(--mt-brand-600); font-size: 16px; }
.mt-side__head.is-active .mt-side__ico { background: var(--mt-surface); }
.mt-side__title { margin: 6px 10px 8px; font: 800 var(--mt-fs-h6)/1.3 var(--mt-font-body); text-transform: uppercase; letter-spacing: var(--mt-ls-caps); color: var(--mt-muted); }
.mt-side__list, .mt-side__sub, .mt-side__others { margin: 0; padding: 0; list-style: none; }
.mt-side__list { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--mt-border); }
.mt-side__link, .mt-side__sublink {
  display: flex; align-items: center; min-height: 40px; padding: 7px 12px; border-radius: 10px;
  color: var(--mt-text-2); font: 600 .90625rem/1.3 var(--mt-font-body); text-decoration: none; transition: var(--mt-transition);
}
.mt-side__link:hover, .mt-side__sublink:hover { background: var(--mt-bg); color: var(--mt-text); }
.mt-side__link.is-open { color: var(--mt-text); font-weight: 800; }
.mt-side__link.is-active, .mt-side__sublink.is-active { background: var(--mt-tint-strong); color: var(--mt-on-tint); font-weight: 800; }
.mt-side__sub { margin: 2px 0 6px 14px; padding-left: 8px; border-left: 2px solid var(--mt-tint-border); }
.mt-side__sublink { min-height: 36px; padding: 6px 10px; font-size: var(--mt-fs-small); font-weight: 500; }
.mt-side__more { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mt-border); }
.mt-side__more summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  color: var(--mt-text); font: 800 var(--mt-fs-small)/1.2 var(--mt-font-body); cursor: pointer; list-style: none;
}
.mt-side__more summary::-webkit-details-marker { display: none; }
.mt-side__more summary:hover { background: var(--mt-bg); }
.mt-side__more summary i { color: var(--mt-muted); font-size: 12px; transition: transform var(--mt-dur) var(--mt-ease); }
.mt-side__more[open] summary i { transform: rotate(180deg); }
.mt-side__others a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px;
  color: var(--mt-text-2); font: 600 var(--mt-fs-small)/1.3 var(--mt-font-body); text-decoration: none;
}
.mt-side__others a:hover { background: var(--mt-bg); color: var(--mt-text); }
.mt-side__others i { width: 18px; text-align: center; color: var(--mt-brand-600); font-size: 14px; flex: none; }
.mt-side__foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--mt-border); }
.mt-side__special {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  background: var(--mt-tint); color: var(--mt-on-tint); font: 800 var(--mt-fs-small)/1.2 var(--mt-font-body); text-decoration: none;
}
.mt-side__special:hover { background: var(--mt-tint-strong); color: var(--mt-on-tint); }
.mt-side__special i { width: 18px; text-align: center; color: var(--mt-brand-600); }

/* ---------- Search page: refine form ---------- */
.mt-searchform { margin: 0 0 24px; padding: 16px; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); }
.mt-searchform__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.mt-searchform__field { position: relative; min-width: 0; }
.mt-searchform__field > i { position: absolute; left: 16px; top: 16px; color: var(--mt-muted); pointer-events: none; }
.mt-searchform #input-search { padding-left: 44px; }
.mt-searchform .form-control, .mt-searchform .form-select { min-height: 48px; }
.mt-searchform #button-search { min-height: 48px; padding-inline: 24px; }
.mt-searchform__checks { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 12px; }
.mt-searchform .form-check { margin: 0; display: flex; align-items: center; gap: 8px; min-height: 32px; padding-left: 0; }
.mt-searchform .form-check .form-check-input { margin: 0; flex: none; }
.mt-searchform .form-check-label { font-size: var(--mt-fs-small); font-weight: 600; color: var(--mt-text-2); }
.mt-searchform .form-check-input:disabled ~ .form-check-label { color: var(--mt-muted); opacity: 1; }
@media (max-width: 767.98px) {
  .mt-searchform { padding: 12px; border-radius: var(--mt-r-md); }
  .mt-searchform__row { grid-template-columns: minmax(0, 1fr); }
  .mt-searchform #button-search { width: 100%; }
  .mt-searchform .form-check { min-height: 44px; }
}

/* ---------- Manufacturers ---------- */
.mt-brands__index { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
.mt-brands__index a { min-width: 40px; justify-content: center; padding: 0 12px; }
.mt-brands__group { margin: 0 0 24px; padding: 20px 24px; background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); scroll-margin-top: 140px; }
.mt-brands__letter { margin: 0 0 12px; font-size: var(--mt-fs-h3); color: var(--mt-brand-600); }
.mt-brands__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mt-brands__list a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--mt-r-sm); background: var(--mt-surface-2);
  color: var(--mt-text); font-weight: 700; text-decoration: none; transition: var(--mt-transition);
}
.mt-brands__list a:hover { background: var(--mt-tint-strong); color: var(--mt-on-tint); }
.mt-brand-desc { margin: -8px 0 24px; max-width: 900px; color: var(--mt-text-2); }

/* ---------- Compare (minimal) ---------- */
.mt-compare { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: var(--mt-r-lg); overflow: hidden; }
.mt-compare__scroll { overflow-x: auto; }
.mt-compare table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; font-size: var(--mt-fs-small); }
.mt-compare th, .mt-compare td { padding: 12px 16px; border-bottom: 1px solid var(--mt-border); vertical-align: top; text-align: left; }
.mt-compare tbody tr:nth-child(even) td, .mt-compare tbody tr:nth-child(even) th { background: var(--mt-surface-2); }
.mt-compare th[scope="row"] { width: 200px; color: var(--mt-muted); font-weight: 600; position: sticky; left: 0; background: var(--mt-surface); z-index: 1; }
.mt-compare__group th { background: var(--mt-bg) !important; color: var(--mt-text); font: 800 var(--mt-fs-h6)/1.3 var(--mt-font-body); text-transform: uppercase; letter-spacing: var(--mt-ls-caps); }
.mt-compare__product { min-width: 200px; }
.mt-compare__media { display: block; width: 140px; aspect-ratio: 1 / 1; margin-bottom: 10px; border-radius: var(--mt-r); background: var(--mt-media); overflow: hidden; }
.mt-compare__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mt-compare__name { display: block; margin-bottom: 8px; color: var(--mt-text); font: 700 var(--mt-fs-ui)/1.35 var(--mt-font-body); text-decoration: none; }
.mt-compare__name:hover { color: var(--mt-link); }
.mt-compare .mt-price { min-height: 0; margin-bottom: 12px; }
.mt-compare__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-compare__actions .mt-btn { min-height: 40px; }
.mt-compare .mt-stars i { font-size: 12px; }
.mt-compare .mt-stars .fa-regular { color: var(--mt-border-strong); }
@media (max-width: 575.98px) { .mt-compare th[scope="row"] { width: 120px; } }

/* Bootstrap's .btn:focus-visible sets outline: 0 (box-shadow ring only); keep the 3 px theme outline on these pages */
.mt-listing .btn:focus-visible { outline: 3px solid var(--mt-focus); outline-offset: 2px; }