/* ==========================================================================
   KATEGOORIARIBA — top categories, open, under the header
   Replaces the strip the trust bar used to hold. Dropdowns are pure CSS: hover
   and focus-within, no script, so the rail survives a keyboard, a screen reader
   and blocked JS. Every top-level item is a real link, so even the hover layer
   failing entirely leaves a working navigation.
   Tokens carry literal fallbacks throughout — deploys here are a hand-built zip
   uploaded by hand, and a custom property that cannot resolve does not fall back
   to its old value, it becomes the guaranteed-invalid value and takes every
   consumer with it.
   ========================================================================== */

.og-catrail {
  position: relative;
  z-index: 60; /* above page content, below the drawer and the sticky bars */
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.og-catrail__inner { position: relative; }

/* ALIGNMENT — why this list hangs 12px into the gutter on purpose.
   .og-catrail__inner IS .container, so its content box starts at the page
   gutter (main.css:151 = 24px, main.css:480 = 18px below 768px). Every other
   left edge on the page starts there: the logo, the H1, the product grid, the
   footer's first column.
   .og-catrail__link then adds its own 12px of horizontal padding, so the first
   thing the eye actually sees in the rail — the category icon — used to start
   at 24+12 = 36px while everything above and below it started at 24px. A 12px
   step in the one row that spans the full width of every page.
   Pulling the LIST back by exactly the link's padding puts the icon on the
   gutter and leaves the link's hover/focus background bleeding 12px into the
   gutter, which is what a padded row is supposed to do.
   Below 600px the link padding drops to 10px (see the bottom of this file), so
   the pull drops to 10px there in the same breath.
   Safe inside the <1024px scroll strip: the strip's own left padding is 18px
   and the pull is 10-12px, so the first item still starts 6-8px INSIDE the
   scroller's border box — nothing lands in the unreachable inline-start
   overflow region. */
.og-catrail__list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 -12px;
  padding: 0;
  list-style: none;
}
.og-catrail__item { position: relative; display: flex; }

.og-catrail__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8, 8px);
  padding: 11px 12px;
  min-height: 44px; /* WCAG 2.5.5 — this is navigation, it gets a real target */
  color: var(--slate, #334155);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-8, 8px);
  transition: background .18s ease, color .18s ease;
}
.og-catrail__icon { flex: 0 0 auto; color: var(--green, #047857); transition: transform .18s ease; }
.og-catrail__chev { display: inline-flex; opacity: .55; transition: transform .18s ease, opacity .18s ease; }

.og-catrail__link:hover,
.og-catrail__link:focus-visible {
  background: var(--muted, #f1f5f9);
  color: var(--slate-dark, #1e293b);
}
.og-catrail__item:hover .og-catrail__icon,
.og-catrail__item:focus-within .og-catrail__icon { transform: translateY(-1px); }
.og-catrail__item:hover .og-catrail__chev,
.og-catrail__item:focus-within .og-catrail__chev { transform: rotate(180deg); opacity: 1; }

/* ---- The dropdown ------------------------------------------------------- */
/* Hidden with visibility, not display: a display:none panel cannot transition,
   and hiding it with opacity ALONE would leave every link inside it in the tab
   order — a keyboard user would tab into an invisible menu. Both properties move
   together, with visibility switching only after the fade so the panel does not
   vanish mid-animation. */
.og-catrail__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  max-width: 340px;
  padding: var(--space-8, 8px);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  /* 16, not 12. surfaces-d4-d12.css:207 already supersedes this corner with
     --radius-16 and states the reason (tokens.css:230-231: 12px is the button
     and field step, 16px is "tootekaart, paneel"; this is a panel). That file
     is an owner-switchable module, so with it off the rail flyout was the only
     one of the header's three overlays with a 12px corner while .og-mega__panel
     and .mini-cart__panel both carry --radius-lg = --radius-16. Two dropdowns
     opening from the same 45px strip at two different radii is visible. This is
     the base value agreeing with the override, not a second answer. */
  border-radius: var(--radius-16, 16px);
  box-shadow: var(--shadow-card-hover, 0 14px 32px -14px rgba(15,23,42,.22), 0 6px 12px -8px rgba(15,23,42,.10));
  /* OVERFLOW GUARD. Aiakaubad renders 12 children + the "Kõik: Aiakaubad" row
     = 13 rows. Arithmetic at the rows' own numbers (min-height 40px each, 8px
     panel padding twice, 4+4px on the __all divider): 13*40 + 16 + 8 = 544px.
     The panel's top edge sits below the announcement bar (38px), the header
     row (72px + 1px border) and the rail (44px + 1px) = 156px, so its bottom
     lands at ~700px — past the fold of a 1280x800 browser, whose viewport is
     roughly 700px tall. And the sticky header is z-index 200 against the rail's
     60, so scrolling to reach the bottom rows slides them UNDER the header.
     Capping the panel and letting it scroll itself keeps every child reachable
     without moving anything on a tall screen (544 < 66% of 800 = 528... 544 is
     16px over, so on exactly 800px the longest panel gains a short scroll and
     nothing else changes). overscroll-behavior stops the page scrolling on
     behalf of the panel once it bottoms out. */
  max-height: 66vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.og-catrail__item:hover > .og-catrail__panel,
.og-catrail__item:focus-within > .og-catrail__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
/* The last two items open leftwards so a wide panel cannot push the page into a
   horizontal scrollbar. */
.og-catrail__item:nth-last-child(-n+2) > .og-catrail__panel { left: auto; right: 0; }

.og-catrail__sub { margin: 0; padding: 0; list-style: none; }
.og-catrail__sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12, 12px);
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-8, 8px);
  color: var(--slate, #334155);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.og-catrail__sub a:hover,
.og-catrail__sub a:focus-visible { background: var(--muted, #f1f5f9); color: var(--green, #047857); }
.og-catrail__sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-catrail__sub-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--slate-500, #64748b);
}
.og-catrail__all { margin-top: var(--space-4, 4px); border-top: 1px solid var(--border, #e2e8f0); padding-top: var(--space-4, 4px); }
.og-catrail__all a { font-weight: 600; color: var(--green, #047857); }

/* Someone who has asked the OS to reduce motion gets the panel without the
   slide — but still gets the panel. */
@media (prefers-reduced-motion: reduce) {
  .og-catrail__panel,
  .og-catrail__link,
  .og-catrail__icon,
  .og-catrail__chev { transition-duration: .01ms; }
  .og-catrail__panel { transform: none; }
  .og-catrail__item:hover .og-catrail__chev,
  .og-catrail__item:focus-within .og-catrail__chev { transform: none; }
}

/* ---- 1024px and up: eight items, one row, no sideways scrollbar ---------- */
/* Measured in a browser at 1280px on 2026-08-15, on the live database's real
   category names — not assumed:

     container content box   1217px   (1265 wide, 24px padding each side)
     eight items             1260px   (103 127 127 138 177 281 167 140)
     seven 2px gaps            14px
     needed                  1274px   ->  57px too wide

   The whole PAGE inherited that: documentElement.scrollWidth was 1298 against a
   1280 viewport, so every page on the site had a horizontal scrollbar, because
   the rail sits in the header. The rail is the feature the owner asked for by
   name; shipping it with a sideways scrollbar was not an option.

   Why it could not shrink on its own: .og-catrail__link carries
   white-space:nowrap, so each item's min-content width IS its full label, and
   flex-shrink cannot go below min-content unless min-width is released. The
   release has to happen on every box between the flex line and the text —
   item, link and name — or the innermost one still pins the chain.

   Shrinking is proportional to flex-basis, which is the behaviour we want here:
   the 281px outlier gives up most of the 57px and the short labels are left
   alone. Only the longest name ends up clipped, and it keeps its title text.

   Scoped to >=1024px on purpose. Below that the rail is a scroll-snap strip
   (see the block underneath) where labels SHOULD keep their full width and
   overflow the container — that is the point of a scrollable strip. */
@media (min-width: 1024px) {
  /* FIRST ATTEMPT, AND WHY IT WAS WRONG — worth keeping, because the reasoning
     looks right until you measure it. Releasing min-width on the item and
     letting flex-shrink do the work does stop the overflow, but flex-shrink is
     PROPORTIONAL TO FLEX-BASIS: every item gives up a share, not just the big
     one. Measured at 1280px: all eight labels clipped, 8-26px each. "Garaaž" —
     six letters — rendered as "Garaa…". The rail is the site's main navigation
     and it read as broken.

     What actually fits, measured at 1280px on 2026-08-15:

       items as rendered            1227px
       clipped away across the 8    + 113px
       natural width               = 1340px
       available in the list         1241px
       over by                          99px

     So 99px has to come from somewhere, and it should come from the ONE label
     that is genuinely too long ("Tööriistad, remont, sanitaartehnika", 221px)
     rather than from all eight. Two moves, no proportional shrink anywhere:

       - items keep their natural width (flex 0 0 auto), so a short name can
         never be clipped no matter how tight the row gets;
       - the name takes a hard 140px ceiling, which only a label longer than
         about twenty characters can reach. The 221px outlier gives up 81px and
         truncates; "Populaarsed tooted" at 125px stays whole, with room to spare.

     The remaining 18px comes off the link padding (12px -> 10px each side, 8
     items = 32px), which also buys headroom for a future ninth category or a
     longer name, and is invisible next to a 44px row.

       1340 - 81 - 32 = 1227 against 1241 available. 14px spare.

     Below 1024px none of this applies: the rail is a scroll-snap strip there,
     where labels SHOULD keep their full width and run off the edge. */
  .og-catrail__item { flex: 0 0 auto; min-width: 0; }
  .og-catrail__link { min-width: 0; padding-inline: 10px; }

  .og-catrail__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space:nowrap is inherited from .og-catrail__link — spelled out here
       so this rule survives someone relaxing that one later. */
    white-space: nowrap;
  }

  /* The glyph is a fixed-size affordance, not text; letting it shrink would
     turn an 18px icon into a smear before a single letter was saved. */
  .og-catrail__icon { flex: 0 0 auto; }
}

/* ---- Below 1024px: a scrollable strip, and NO dropdowns ------------------ */
/* A hover menu on a touch screen is a trap: the first tap opens something the
   finger is already covering, the second tap goes somewhere the shopper did not
   aim at. Here a tap simply goes to the category, which is what a tap on a
   category name should do. */
@media (max-width: 1023px) {
  .og-catrail__inner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .og-catrail__inner::-webkit-scrollbar { display: none; }
  .og-catrail__list { gap: 0; }
  .og-catrail__item { scroll-snap-align: start; }
  .og-catrail__link { padding: 10px 12px; font-size: 13.5px; }
  .og-catrail__chev { display: none; }
  .og-catrail__panel { display: none; }

  /* FOCUS RING vs THE SCROLL STRIP.
     .og-catrail__inner is `overflow-x: auto; overflow-y: hidden` here — the
     hidden is spelled out four lines above, so the strip clips vertically by
     explicit instruction, not by the CSS Overflow 3 side effect. And the
     scrollport is exactly as tall as the 44px link row: the container carries
     no block padding.
     a11y.css:42-46 paints the keyboard ring as `outline 3px` at
     `outline-offset: 2px` PLUS a box-shadow that reaches 6px beyond the
     border box. Every one of those pixels is outside the scrollport, so on a
     phone or a narrow window the ring around a category was clipped to
     nothing top and bottom.
     Drawn inside instead: -3px offset puts the whole 3px ring on the link's
     own edge, and the shadow pair is dropped because it has nowhere to go.
     Contrast is unaffected — same --green (#047857) on the same white/muted
     link background, 5.48:1 by arithmetic (L=0.1415: 1.05/0.1915).
     (0,3,1) — .a11y-ready + .og-catrail__link + :focus-visible — against
     a11y.css:33-46 `.a11y-ready a:focus-visible` (0,2,1). Won on specificity,
     not on the order the two files happen to be enqueued in. */
  .a11y-ready .og-catrail__link:focus-visible {
    outline-offset: -3px;
    box-shadow: none;
  }
}

/* Phones: keep the icons, drop nothing else. The strip is the only place on a
   small screen where the catalogue is visible without opening a drawer. */
@media (max-width: 600px) {
  .og-catrail__link { gap: 6px; padding: 9px 10px; font-size: 13px; }
  /* The gutter pull follows the link padding down — see the note on
     .og-catrail__list. 18px container padding - 10px pull + 10px link padding
     = 18px, the same left edge as the page. */
  .og-catrail__list { margin-inline: -10px; }
}