/* ===========================================================================
   W2RAILGEO_260808 — the rails read one value; the header shares its width.
   ---------------------------------------------------------------------------
   --w2hr-top is written by w2railgeo.js as the pixel centre of the garment.
   Until it exists the old percentages apply, so a layout the script cannot
   measure still looks like it did.

   translateY(-50%) is what makes --w2hr-top a CENTRE rather than a top edge:
   one number, the same meaning on both products.
   =========================================================================== */

#w2hr-host[style*="--w2hr-top"] .w2hr-rail {
  top: var(--w2hr-top) !important;
  transform: translateY(-50%) !important;
  /* the arrow sits above the hearts and must not shift the centre */
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   The header, with two products instead of five.
   Equal halves: two switches that split the row exactly, on the phone and on
   the web. They used to be flex:0 0 auto with a 25% minimum — sized for five
   items, so with two the pill sat lopsided and the labels of different length
   made it worse.
   --------------------------------------------------------------------------- */
/* The `body` prefix is not decoration. w2cat.js injects its own stylesheet at
   RUNTIME, so on equal specificity its rules land later in the cascade and win
   — which is why the phone header did not change on the first attempt. One
   extra element in the selector settles it without another !important war. */
body .type-sw.w2cat-nav > .type-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  body .type-sw.w2cat-nav > .type-btn {
    min-width: 0 !important;        /* the 25% was written for five tabs */
    flex: 1 1 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body .type-sw.w2cat-nav {
    overflow-x: visible !important; /* two tabs never need to scroll */
    justify-content: stretch !important;
  }
}