/* ==========================================================================
   BAKKAR PRINTING — THEME "MOMENTUM"
   pages/categories.css — categories.html only.
   --------------------------------------------------------------------------
   OWNED BY: the categories page agent. Nothing here leaks outside this page.

   THE IDEA
   The category index is not a wall of equal tiles. Each root line gets a
   substantial, alternating PANEL — a real product photograph on one side, and
   on the other the name, the description, the product count and the CHILD
   categories rendered as real links. The parent_id hierarchy is the page.

   Direction is handled with logical properties throughout; the only mirrored
   declarations are the directional glyphs (scaleX(-1)) and gradient sweeps
   that tokens.css already flips.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HEAD
   --------------------------------------------------------------------------
   There is no hero on this page. It uses the shared `.page-head--slim` band
   (base.css) verbatim: breadcrumb + a modest H1 + one line. Nothing to add
   here — if you find yourself wanting to, you are rebuilding the hero.
   ========================================================================== */

/* ==========================================================================
   2. STICKY JUMP NAV — pill chips, one per line
   Sits directly under the condensed glass header (z below it, always), and is
   the first thing after the slim head, so the page opens on real navigation.
   ========================================================================== */
.cats-nav {
  position: sticky;
  inset-block-start: var(--header-h-condensed);
  z-index: var(--z-sticky);
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-block: 1px solid var(--line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cats-nav { background: var(--surface); }
}
.cats-nav__in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: 56px;
  padding-block: var(--sp-2);
  min-inline-size: 0;
}
.cats-nav__label {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .cats-nav__label { text-transform: none; font-size: var(--fs-xs); }
@media (max-width: 767px) { .cats-nav__label { display: none; } }

/* A flex item will not shrink below its content unless told to — without this
   the chip row overflows the bar instead of scrolling inside it. */
.cats-nav__in > .chip-row {
  flex: 1 1 auto;
  min-inline-size: 0;
}
/* .chip already carries the pill geometry + the gradient .is-active state. */
.cats-nav__chip { text-decoration: none; }

/* The escape hatch to the full grid, parked at the end of the bar. It is the
   only thing the old section header contributed, so it lives here now. The
   same link is in the main nav, the drawer and the footer, so below 900px —
   where the chips need every pixel of the bar — it stands down. */
.cats-nav__all { flex: none; }
@media (max-width: 899px) { .cats-nav__all { display: none; } }

/* ==========================================================================
   2b. LINES SECTION — starts immediately under the bar
   ========================================================================== */
.cats-lines { padding-block-start: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }

/* ==========================================================================
   3. THE LINE PANELS
   ========================================================================== */
.cats-lines {
  position: relative;
  background:
    radial-gradient(52rem 30rem at 96% 0%, rgba(249, 115, 22, .07), transparent 62%),
    radial-gradient(40rem 26rem at 0% 40%, rgba(237, 28, 36, .05), transparent 60%),
    var(--bg);
}
.cats-lines > .container { position: relative; z-index: var(--z-raised); }

.cats-lines__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 0.9rem + 2.4vw, 3rem);
}

.cat-panel {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
  padding: clamp(0.875rem, 0.6rem + 1vw, 1.375rem);
  border-radius: var(--r-3xl);
  background: var(--surface);
  box-shadow: var(--sh-3), var(--sh-ring);
  /* Land clear of BOTH the condensed header and the sticky chip bar. */
  scroll-margin-block-start: calc(var(--header-h-condensed) + 5.5rem);
  transition: box-shadow var(--d-slow) var(--e-out);
}
.cat-panel:hover { box-shadow: var(--sh-4), var(--sh-ring); }

@media (min-width: 900px) {
  .cat-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: center;
  }
  /* Alternating rhythm. `order` follows the writing direction, so this is
     correct in RTL without a single mirrored rule. */
  .cat-panel--flip .cat-panel__media { order: 2; }
}

/* ---- media ---- */
.cat-panel__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2xl);
  background: var(--media-bed);
  overflow: hidden;
  isolation: isolate;
}
.cat-panel__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-slower) var(--e-out);
}
.cat-panel:hover .cat-panel__img { transform: scale(1.045); }

/* Keeps the white pills legible over a bright pack shot. */
.cat-panel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-b);
  opacity: .5;
  pointer-events: none;
  transition: opacity var(--d-base) var(--e-soft);
}
.cat-panel:hover .cat-panel__media::after { opacity: .62; }

/* The transparent category PNGs in the asset set are effectively blank, so
   the line is marked with a real glyph instead — it always renders. */
.cat-panel__glyph {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  display: grid;
  place-items: center;
  inline-size: 54px;
  block-size: 54px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
  color: #fff;
  transition: transform var(--d-base) var(--e-spring), background var(--d-base) var(--e-soft);
}
.cat-panel__glyph svg { inline-size: 26px; block-size: 26px; }
.cat-panel:hover .cat-panel__glyph {
  transform: rotate(-6deg) scale(1.06);
  background: rgba(255, 255, 255, .28);
}

.cat-panel__count {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--sh-2);
  color: var(--ink-900);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
}
.cat-panel__count--empty {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--glow-brand);
}
.cat-panel__count svg { inline-size: 13px; block-size: 13px; flex: none; }

/* The honest empty line: real photo, dialled back, never a blank tile. */
.cat-panel--empty .cat-panel__img { filter: grayscale(.3); opacity: .92; }
.cat-panel--empty .cat-panel__media::after { opacity: .68; }

/* ---- body ---- */
.cat-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
  padding: var(--sp-3) clamp(0.25rem, 0.1rem + 0.9vw, 1.25rem) var(--sp-4);
}
.cat-panel__flag { align-self: flex-start; }

.cat-panel__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tighter);
  line-height: var(--lh-snug);
  color: var(--text);
}
.cat-panel__title a { transition: color var(--d-fast) var(--e-soft); }
.cat-panel__title a:hover { color: var(--brand-ink); }

.cat-panel__desc {
  max-inline-size: 62ch;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

/* Small label above the children / product picks. */
.cat-panel__sub-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-faint);
}
[dir="rtl"] .cat-panel__sub-title { text-transform: none; font-size: var(--fs-xs); }
.cat-panel__sub-n {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* ---- child categories (the parent_id hierarchy, made clickable) ---- */
.kid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
}
.kid-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  block-size: 100%;
  padding: var(--sp-2);
  padding-inline-end: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    transform var(--d-quick) var(--e-spring),
    background var(--d-quick) var(--e-soft),
    box-shadow var(--d-base) var(--e-out);
}
.kid-card:hover {
  transform: translateY(-3px);
  background: var(--surface);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--brand-soft-line);
}
.kid-card__media {
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-md);
  background: var(--media-bed);
  overflow: hidden;
  flex: none;
}
.kid-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.kid-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.kid-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--text);
}
.kid-card__n {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
}
[dir="rtl"] .kid-card__n { font-size: var(--fs-xs); }
.kid-card__go {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  margin-inline-start: auto;
  border-radius: var(--r-circle);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-2);
  flex: none;
  transition:
    transform var(--d-quick) var(--e-spring),
    background var(--d-quick) var(--e-soft),
    color var(--d-quick) var(--e-soft),
    box-shadow var(--d-base) var(--e-out);
}
.kid-card__go svg { inline-size: 12px; block-size: 12px; }
[dir="rtl"] .kid-card__go svg { transform: scaleX(-1); }
.kid-card:hover .kid-card__go {
  background: var(--grad-cta);
  box-shadow: var(--glow-brand);
  color: #fff;
  transform: scale(1.08);
}

/* ---- product picks (a line with no children still shows real work) ---- */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}
.pick-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  block-size: 100%;
}
.pick-card__img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--media-bed);
  box-shadow: var(--sh-1), var(--sh-ring);
  transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out);
}
.pick-card:hover .pick-card__img { transform: translateY(-4px); box-shadow: var(--sh-3); }
.pick-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--text-2);
  transition: color var(--d-fast) var(--e-soft);
}
.pick-card:hover .pick-card__name { color: var(--brand-ink); }

/* ---- the made-to-order note (labels-sleeves: zero photographed samples) --- */
.cat-panel__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--grad-hot-soft);
  box-shadow: inset 0 0 0 1px var(--brand-soft-line);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-2);
}
.cat-panel__note svg {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  color: var(--brand);
  flex: none;
}

/* ---- actions ---- */
.cat-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-1);
}

/* ==========================================================================
   4. THE LEGACY (MACHINERY) LINE — present, but deliberately quieter
   ========================================================================== */
.cats-legacy { background: var(--bg-warm); }
.cats-legacy .sec-head { margin-block-end: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); }

.cat-panel--legacy { box-shadow: var(--sh-2), var(--sh-ring); }
.cat-panel--legacy:hover { box-shadow: var(--sh-3), var(--sh-ring); }
.cat-panel--legacy .cat-panel__title { font-size: var(--fs-xl); }
.cat-panel--legacy .cat-panel__media { aspect-ratio: 3 / 2; }
.cat-panel--legacy .cat-panel__glyph {
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
/* The flag on the legacy panel is steel, not brand red — it is not the
   headline business any more, and it should not look like it is. */
.cat-panel--legacy .cat-panel__flag { color: var(--text-3); }
.cat-panel--legacy .cat-panel__flag::before { background: var(--ink-300); }

@media (min-width: 900px) {
  .cat-panel--legacy { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
}

/* ==========================================================================
   5. CLOSING CTA
   ========================================================================== */
.cats-cta { padding-block: var(--sp-section) 0; }

/* ==========================================================================
   6. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cat-panel:hover .cat-panel__img,
  .cat-panel:hover .cat-panel__glyph,
  .kid-card:hover,
  .kid-card:hover .kid-card__go,
  .pick-card:hover .pick-card__img { transform: none !important; }
}