/* Category navigation (owner 2026-11-04): All Categories trigger, mega panel / drill-down drawer,
   Categories landing tiles and taxonomy pages. OneMkan tokens (om-premium.css); logical properties keep RTL. */

/* ---------- Trigger: first item of the strip ---------- */
.om-allcat-trigger {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 10px; border-radius: 4px;
  color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.om-allcat-trigger:hover { outline: 1px solid currentColor; }
.om-allcat-trigger:focus-visible { outline: 2px solid var(--om-accent); outline-offset: 1px; }
.amazon-subnav .om-strip-free-shipping { flex: none; }

/* ---------- Dialog shell ---------- */
html.om-allcat-open, html.om-allcat-open body { overflow: hidden; }
.om-allcat {
  padding: 0; border: 0; color: var(--om-ink); background: #fff;
  box-shadow: 0 12px 40px rgba(15, 17, 17, .25);
}
.om-allcat::backdrop { background: rgba(15, 17, 17, .45); }
.om-allcat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px; border-block-end: 1px solid var(--om-line); background: var(--om-soft);
}
.om-allcat-head h2 { margin: 0; font-size: 1.125rem; }
.om-allcat-status { padding: 24px 16px; color: var(--om-ink-2); }
.om-allcat a { color: var(--om-ink); text-decoration: none; }
.om-allcat a:hover { color: var(--om-link); text-decoration: underline; }
.om-allcat a:focus-visible, .om-allcat button:focus-visible { outline: 2px solid var(--om-select); outline-offset: 2px; border-radius: 4px; }

.om-allcat-rail { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; overscroll-behavior: contain; }
.om-allcat-dept {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  font-size: .9375rem; line-height: 1.2;
}
.om-allcat-dept .om-dept-icon { flex: none; color: var(--om-ink-2); }
.om-allcat-dept span:first-of-type { flex: 1; }
.om-allcat-chev { color: var(--om-ink-2); font-size: 1.25rem; }
[dir="rtl"] .om-allcat-chev { transform: scaleX(-1); }
.om-allcat-dept.is-active { background: #eaf3f5; }
.om-allcat-dept:hover { text-decoration: none !important; }
@media (hover: hover) { .om-allcat-dept:hover { background: #eaf3f5; } }
.om-allcat-dept.is-active { font-weight: 700; box-shadow: inset 3px 0 0 var(--om-select); }
[dir="rtl"] .om-allcat-dept.is-active { box-shadow: inset -3px 0 0 var(--om-select); }
.om-allcat-dept.is-active .om-dept-icon { color: var(--om-select); }

.om-allcat-panel { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 24px; }
.om-allcat-panel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-block-end: 10px; }
.om-allcat-panel-head h2 { margin: 0; font-size: 1.25rem; }
.om-allcat-see-all { color: var(--om-link) !important; font-size: .875rem; }
.om-allcat-back {
  display: none; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--om-link); font: inherit; font-weight: 700; cursor: pointer;
}
.om-allcat-groups { columns: 210px 3; column-gap: 28px; }
.om-allcat-group { break-inside: avoid; margin-block-end: 16px; }
.om-allcat-group h3 { margin: 0 0 4px; font-size: .9375rem; }
.om-allcat-group ul { list-style: none; margin: 0; padding: 0; }
.om-allcat-group li a { display: block; padding: 4px 0; font-size: .875rem; color: var(--om-ink-2); }

/* Desktop: rail + adjacent mega panel, both scrolling inside the viewport. */
@media (min-width: 900px) {
  .om-allcat {
    position: fixed; inset: 64px auto auto 16px; margin: 0;
    width: min(1180px, calc(100vw - 32px)); height: min(640px, calc(100vh - 88px)); max-height: none; max-width: none;
    border-radius: var(--om-radius); display: none; flex-direction: column;
  }
  [dir="rtl"] .om-allcat { inset: 64px 16px auto auto; }
  .om-allcat[open] { display: flex; }
  .om-allcat-slot, .om-allcat-body { flex: 1; min-height: 0; }
  .om-allcat-body { display: grid; grid-template-columns: 270px 1fr; height: 100%; }
  .om-allcat-rail { border-inline-end: 1px solid var(--om-line); background: #fff; }
  .om-allcat-panels { min-height: 0; overflow: hidden; display: flex; }
  .om-allcat-panel { flex: 1; }
}

/* Phones and tablets: full-screen drawer, drill-down. */
@media (max-width: 899.98px) {
  .om-allcat {
    margin: 0; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
    display: none; flex-direction: column;
  }
  .om-allcat[open] { display: flex; }
  .om-allcat-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .om-allcat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .om-allcat-rail { flex: 1; padding-block-end: calc(16px + var(--om-safe-bottom, 0px)); }
  .om-allcat-rail li + li { border-block-start: 1px solid #eef0f0; }
  .om-allcat-dept { min-height: 52px; font-size: 1rem; }
  .om-allcat-dept.is-active { box-shadow: none; font-weight: 400; background: none; }
  .om-allcat-panels { display: none; }
  .om-allcat.is-drilled .om-allcat-rail { display: none; }
  .om-allcat.is-drilled .om-allcat-panels { display: flex; flex: 1; min-height: 0; }
  .om-allcat-panel { flex: 1; padding: 6px 16px calc(24px + var(--om-safe-bottom, 0px)); }
  .om-allcat-back { display: inline-flex; align-items: center; width: 100%; }
  .om-allcat-panel-head { margin-block-end: 6px; }
  .om-allcat-groups { columns: 1; }
  .om-allcat-group { padding-block: 10px; margin: 0; border-block-end: 1px solid #eef0f0; }
  .om-allcat-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
  .om-allcat-group li a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    border: 1px solid var(--om-line); border-radius: 18px; color: var(--om-ink);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .om-allcat[open] { animation: om-allcat-in .14s ease-out; }
  @keyframes om-allcat-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ---------- Categories landing ---------- */
.om-cat-landing { max-width: 1280px; margin: 0 auto; padding: 16px; }
.om-cat-landing-head h1 { margin: 0; font-size: 1.5rem; }
.om-cat-landing-head p { margin: 4px 0 14px; color: var(--om-ink-2); font-size: .875rem; }
.om-cat-tiles {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.om-cat-tile a {
  display: flex; flex-direction: column; height: 100%; border: 1px solid var(--om-line); border-radius: var(--om-radius);
  overflow: hidden; color: var(--om-ink); text-decoration: none; background: #fff;
}
.om-cat-tile a:hover { border-color: #a6b0b0; box-shadow: var(--om-shadow); }
.om-cat-tile a:focus-visible { outline: 2px solid var(--om-select); outline-offset: 2px; }
.om-cat-tile-media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--om-soft); overflow: hidden; }
.om-cat-tile-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.om-cat-tile.is-icon .om-cat-tile-media { aspect-ratio: 2 / 1; }
.om-cat-tile-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--om-select); }
.om-cat-tile-label { display: flex; align-items: center; gap: 6px; padding: 10px 10px 2px; font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.om-cat-tile-icon-inline { display: inline-flex; color: var(--om-ink-2); flex: none; }
.om-cat-tile-note { padding: 0 10px 10px; color: var(--om-ink-2); font-size: .75rem; }
.om-cat-tile-label:last-child { padding-block-end: 10px; }
@media (max-width: 700px) {
  .om-cat-landing { padding: 12px; }
  .om-cat-landing-head h1 { font-size: 1.25rem; }
  .om-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .om-cat-tile-label { font-size: .875rem; }
}

/* ---------- Taxonomy pages: PageNav + SectionHeader (om-premium.css content system) + CategoryTree ---------- */
.om-category-page { max-width: 1500px; margin: 0 auto; padding: var(--om-space-3) var(--om-page-gutter) var(--om-space-5); }
.om-category-page .om-section-head { margin-block-end: var(--om-space-3); }
/* CategoryTree, department level: one panel of groups, each opening onto its leaves. Groups draw their top
   rule and the panel clips the first row's, so the panel never shows a doubled edge. */
.om-category-children.is-department {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 var(--om-space-6);
  margin-block-end: var(--om-space-4); padding: 0 var(--om-space-4); overflow: hidden;
  border: 1px solid var(--om-line-soft); border-radius: var(--om-panel-radius); background: #fff;
}
.om-category-group { margin-block-start: -1px; border-block-start: 1px solid #eaeded; }
.om-category-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--om-space-2); min-height: 48px;
  color: var(--om-ink); font-size: var(--om-fs-body); font-weight: 700; line-height: 1.3; list-style: none; cursor: pointer;
}
.om-category-group summary::-webkit-details-marker { display: none; }
.om-category-group summary::after { /* down chevron; physical borders keep it symmetric in RTL */
  content: ""; flex: none; width: 7px; height: 7px; margin-inline-end: 4px; border-right: 2px solid #6f7373; border-bottom: 2px solid #6f7373;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.om-category-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.om-category-group summary:hover > span { color: var(--om-link); text-decoration: underline; }
.om-category-group summary:focus-visible { outline: 2px solid var(--om-select); outline-offset: 2px; border-radius: 4px; }
.om-category-group ul { margin: 0 0 var(--om-space-3); padding: 0; padding-inline-start: var(--om-space-3); border-inline-start: 2px solid #eaeded; list-style: none; }
.om-category-group li a { display: flex; align-items: center; min-height: 34px; color: var(--om-ink-2); font-size: 14px; line-height: 1.3; text-decoration: none; }
.om-category-group li a:hover { color: var(--om-link); text-decoration: underline; }
.om-category-group li a:focus-visible { outline: 2px solid var(--om-select); outline-offset: 1px; border-radius: 3px; }
.om-category-group-all { font-weight: 700; color: var(--om-link) !important; }
@media (prefers-reduced-motion: reduce) { .om-category-group summary::after { transition: none; } }
/* CategoryTree, group level: its leaves as one scrolling row of links. */
.om-category-chips { display: flex; gap: var(--om-space-2); overflow-x: auto; list-style: none; margin: 0 0 var(--om-space-4); padding: 2px 0 6px; scrollbar-width: thin; }
.om-category-chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--om-line); border-radius: 18px; background: #fff; color: var(--om-ink); text-decoration: none; font-size: 14px;
}
.om-category-chips a.is-listed { border-color: var(--om-select); }
.om-category-chips a:hover { background: var(--om-soft); text-decoration: underline; }
.om-category-chips a:focus-visible { outline: 2px solid var(--om-select); outline-offset: 1px; }
@media (max-width: 700px) {
  .om-category-children.is-department { grid-template-columns: minmax(0, 1fr); padding: 0 var(--om-space-3); }
  .om-category-group li a { min-height: 40px; }
}

/* The department shortcuts scroll inside their row: fade the trailing edge so a partly shown name reads as
   "more to scroll", not as a clipped label. */
.amazon-subnav .amazon-department-nav {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
[dir="rtl"] .amazon-subnav .amazon-department-nav {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}

/* Phones (owner fix 08): the homepage strip is one horizontal scroll row. All Categories, every department
   shortcut and Free Shipping are ordinary items in it, so Free Shipping never pins over the departments.
   No mask here: it would also clip the Menu drawer, a fixed child of the strip. The fade is a sticky last
   item instead, so at the end of the scroll it sits after Free Shipping and covers nothing. */
@media (max-width: 700px) {
  body .amazon-subnav:not(.om-subnav-inner) {
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  body .amazon-subnav:not(.om-subnav-inner)::-webkit-scrollbar { display: none; }
  body .amazon-subnav:not(.om-subnav-inner) .amazon-department-nav {
    flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  body .amazon-subnav:not(.om-subnav-inner) .amazon-department-nav a { display: flex; }
  body .amazon-subnav:not(.om-subnav-inner)::after {
    content: ""; position: sticky; inset-inline-end: 0; flex: 0 0 24px; align-self: stretch;
    pointer-events: none; background: linear-gradient(to right, transparent, var(--om-navy-2));
  }
  [dir="rtl"] body .amazon-subnav:not(.om-subnav-inner)::after {
    background: linear-gradient(to left, transparent, var(--om-navy-2));
  }
}