/* ==========================================================================
   Doctor National - Category & Catalog Page Stylesheet
   Strict implementation of user prototype
   ========================================================================== */

:root {
  --brand: #ef011c;
  --brand-ink: #ffffff;
  --brand-soft: #fee6e9;
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #231f20;
  --muted: #6b7280;
  --line: #e9e9e9;
  --util-bg: #231f20;
  --logo-ring: transparent;
  --scrim: rgba(10, 11, 14, .55);
  --shadow: 0 10px 30px rgba(35, 31, 32, .12);
}

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Reset any theme column wrappers on category page so .wrap controls the width */
.html-category-page .master-wrapper-content,
.html-category-page .master-column-wrapper,
.html-category-page .page-container,
.html-category-page .center-1,
.html-category-page .center-2,
.html-category-page .side-2 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
}

/* Hide legacy sidebar in _ColumnsTwo if present */
.html-category-page .page-container > .side-2 {
  display: none !important;
}

/* =====================================================
   CATEGORY PAGE
   ===================================================== */
.page { padding-bottom: 64px; }
.crumbs { padding: 18px 0 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline: 10px; opacity: .55; }
.crumbs a { color: inherit; text-decoration: none; transition: color .15s; }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }

.shop { display: grid; gap: 20px; }

/* --- categories: clean list on desktop, scrolling tabs on mobile --- */
.html-category-page .side { display: none; }
.side-title { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
html[lang="ar"] .side-title, [dir="rtl"] .side-title { letter-spacing: 0; font-size: 16px; }
.side-title::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 12px; background: var(--brand); }
.tree { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tree > li { border-bottom: 1px solid var(--line); border-inline-start: 3px solid transparent; padding-inline-start: 14px; list-style: none; }
.tree > li.on { border-inline-start-color: var(--brand); }
.tree-row { display: flex; align-items: center; justify-content: space-between; }
.tree-row a { flex: 1; display: flex; align-items: center; min-height: 50px; font-size: 15px; color: var(--text); text-decoration: none; transition: color .15s; }
.tree-row a:hover { color: var(--brand); }
.tree > li.on > .tree-row a { color: var(--brand); font-weight: 600; }
.tog { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); border-radius: 0; background: none; border: 0; cursor: pointer; }
.tog:hover { color: var(--brand); }
.tog .chev { width: 18px; height: 18px; transition: transform .25s ease; }
.has-sub.open .tog .chev { transform: rotate(180deg); }
.tree-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.tree-acc > div { overflow: hidden; }
.has-sub.open .tree-acc { grid-template-rows: 1fr; }
.tree-sub { list-style: none; margin: 0; padding: 0 0 12px; }
.tree-sub li { list-style: none; }
.tree-sub a { display: flex; align-items: center; min-height: 38px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color .15s; }
.tree-sub a::before { content: ""; width: 10px; height: 1px; background: currentColor; margin-inline-end: 10px; flex: none; }
.tree-sub a:hover, .tree-sub li.on a { color: var(--brand); }

/* --- list header --- */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.list-title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--text); }
.per { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 0; }
.selbox { position: relative; display: inline-block; }
.selbox select { appearance: none; -webkit-appearance: none; height: 38px; min-width: 64px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; outline: none; }
[dir="rtl"] .selbox select, html[lang="ar"] .selbox select { padding: 0 14px 0 34px; }
.selbox select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.selbox svg, .selbox .sel-arrow { position: absolute; inset-inline-end: 10px; top: 11px; width: 16px; height: 16px; pointer-events: none; color: var(--text); }

/* --- product card --- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 0; position: relative; }
.media { position: relative; aspect-ratio: 4 / 5; display: block; background: var(--surface); color: var(--muted); font-size: 11px; letter-spacing: .04em; border-radius: 0; overflow: hidden; }
.media .media-link { display: block; width: 100%; height: 100%; }
.media .prod-img, .media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; padding: 0 !important; margin: 0 !important; }
.flag { position: absolute; top: 0; inset-inline-start: 0; padding: 4px 10px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; z-index: 2; }
html[lang="ar"] .flag, [dir="rtl"] .flag { letter-spacing: 0; font-size: 12px; }
.card .info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px 12px; }
.card .cat { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 3px 8px; line-height: 1.2; }
html[lang="ar"] .card .cat, [dir="rtl"] .card .cat { letter-spacing: 0; }
.card .code { font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.card .stars { display: flex; gap: 1px; color: var(--muted); }
.card .stars svg { width: 14px; height: 14px; fill: currentColor; }
.card .price { margin-top: auto; padding-top: 2px; color: var(--brand); font-size: 15px; font-weight: 600; }
.card .add { display: block; width: 100%; height: 40px; border-radius: 0; border: 0; background: var(--brand); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .15s ease; }
.card .add:active { opacity: .85; }
.card .add.done { background: var(--text); color: var(--bg); }
html[lang="ar"] .card .add, [dir="rtl"] .card .add { letter-spacing: 0; font-size: 14px; }

/* --- pagination --- */
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; direction: ltr !important; }
.pager li { display: inline-block; }
.pager li a, .pager li span, .pg { min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 500; transition: border-color .15s; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pager li a:hover, .pg:hover { border-color: var(--text); color: var(--text); }
.pager li.current-page span, .pg[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .list-title { font-size: 30px; }
}
@media (min-width: 992px) {
  .shop { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
  .html-category-page .side { display: block; position: sticky; top: 108px; }
}