/* ============================================================
   SOUQ — tint cards (TINT 2026-09-18)
   The closing "Best sellers" rail on short category pages, rebuilt after the
   "Luxury Automotive App - UI Cards" shot: tall portrait cards, each painted
   in a pastel sampled from its own product photo, a small letter-spaced
   category caption under the cut-out, nothing else at rest (owner round 2,
   2026-09-18: the big wordmark behind the photo "is not clear with the
   photos"; B "caption" chosen from four cleaner options). Hover (or
   focus) grows the card over its neighbours and reveals the name + price at
   the top and one full-width black button at the bottom; a touch device shows
   those all the time.

   Own sheet + no module, the fan.css / bag.css precedent: partials/product-rail.php
   links it only when $rail_tint is set, rail.js drives the arrows exactly as
   it does for every other [data-rail], qadd.js / wishlist.js / bagfly.js work
   through the .pcard__* hooks the card keeps. Loads mid-body, so every rule
   that has to beat components.css (body end) carries a higher specificity on
   purpose.
   ============================================================ */

/* ------------------------------------------------ the rail ---- */
.rail-section--tint { --tc-w: 236px; --tc-gap: 14px; }

/* components.css turns the .lclose rail into a 4-column grid from 1024px.
   These cards are a carousel at every width (owner, 2026-09-18): cards peek
   past the edge, rail.js reveals the arrows when the row overflows. */
.lclose .rail-section--tint .rail,
.rail-section--tint .rail {
  display: flex;
  grid-template-columns: none;
  gap: var(--tc-gap);
  overflow-x: auto;
  /* Headroom: overflow-x:auto clips vertically at the padding box, and the
     hovered card grows 6% plus its shadow. The top margin gives that space
     back under the head (the .rail rule's own pattern). NOT at the bottom:
     a negative bottom margin collapses through .rail-wrap and the edge fades
     (inset-block: 0 on the wrap) then paint over whatever follows - measured
     12 px into the footer on the live phone page (mobile audit 2026-09-18).
     The rail is the last thing before the footer, so the padding simply
     becomes the section's breathing room. */
  padding-block: 40px 36px;
  margin-block-start: -40px;
  /* ...and sideways: the first/last card grows into the page gutter, which
     the scroller would otherwise clip. scroll-padding keeps the snap points
     where the cards start. */
  padding-inline: 10px;
  margin-inline: -10px;
  scroll-padding-inline: 10px;
}
.lclose .rail-section--tint .rail > *,
.rail-section--tint .rail > * {
  flex: 0 0 var(--tc-w);
  max-inline-size: var(--tc-w);
  scroll-snap-align: start;
}
@media (max-width: 767px) {
  /* One card and a quarter of the next: the peek is the swipe affordance, and
     a phone card has to hold two lines of name, a price and a 44px button.
     Same two selectors as above, so this wins by order, not by luck. */
  .lclose .rail-section--tint .rail > *,
  .rail-section--tint .rail > * { flex-basis: 74%; max-inline-size: 300px; }
}

/* ---------------------------------------- arrows beside the cards ---- */
/* TINT r3 (owner, 2026-09-18): product-rail.php prints this rail's .rail-nav
   inside .rail-wrap instead of the head, so the two buttons can sit over the
   first and last visible card, vertically centred, and the section carries
   data-rail-loop (rail.js wraps around and never greys them). Under 768px
   they are hidden: the peeking next card is the swipe cue. */
.rail-section--tint .rail-wrap > .rail-nav:not([hidden]) {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.rail-section--tint .rail-wrap > .rail-nav .rail-nav__btn {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  box-shadow: var(--sq-shadow-2);
}
/* BUGFIX 0.5.159 (#49): tint.css is linked in the body, before components.css,
   so components' .rail-nav__btn:hover:not(...):not(...) - the same (0,4,0) as
   the rule above - won the tie and swapped this floating shadow for
   --sq-shadow-1 on hover. Out-ranked, not re-ordered (see bag.css #49). */
@media (hover: hover) {
  .rail-section--tint .rail-wrap > .rail-nav .rail-nav__btn:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--sq-shadow-2); }
}
.rail-section--tint .rail-wrap > .rail-nav [data-rail-prev] { inset-inline-start: 4px; }
.rail-section--tint .rail-wrap > .rail-nav [data-rail-next] { inset-inline-end: 4px; }
/* components.css sets transform: scale(.92) on :active, which would drop the
   centring translate for the press frame. */
.rail-section--tint .rail-wrap > .rail-nav .rail-nav__btn:active:not([aria-disabled="true"]) { transform: translateY(-50%) scale(.92); }
@media (max-width: 767px) {
  /* same specificity as the display:block rule above, later in the sheet */
  .rail-section--tint .rail-wrap > .rail-nav:not([hidden]) { display: none; }
}

/* ------------------------------------------------ the card ---- */
.tcard {
  position: relative;
  aspect-ratio: 4 / 5;
  /* cqw for the wordmark: --tc-fit is in hundredths of the card's width. */
  container-type: inline-size;
  background: var(--tc-bg, var(--sq-surface-warm));
  border-radius: var(--sq-r-lg);
  overflow: hidden;
  /* The photo blends with `darken`; isolate keeps that blend inside the card
     instead of against the page. */
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(20, 45, 55, .04);
  transition: transform var(--sq-t-med) var(--sq-ease), box-shadow var(--sq-t-med) var(--sq-ease);
}
.tcard__link {
  position: relative;
  display: block;
  block-size: 100%;
  color: var(--sq-ink);
  text-decoration: none;
}
@media (hover: hover) { .tcard__link:hover { color: var(--sq-ink); } }

/* The category caption: one quiet line under the product. souq_tint_mark_fit()
   still emits --tc-fit on the card (the big-wordmark round); it is unused
   here on purpose, so the template did not need a second deploy. Long names
   ("HERBAL TEAS & INFUSIONS") stay on one line and ellipse. */
.tcard__mark {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 7%;
  z-index: 0;
  padding-inline: 12px;
  font-family: var(--sq-font-display);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* ink at .7, not ink-soft at .85: composited that is ~5.3:1 on the palest
     tint measured live (the lilac rings), ink-soft was 3.7:1. */
  color: var(--sq-ink);
  opacity: .7;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity var(--sq-t-med) var(--sq-ease);
}
/* Arabic joins and CJK have no letter-spacing to give back, and their glyphs
   need a point more than Latin capitals at this size. */
:lang(ar) .tcard__mark, :lang(ja) .tcard__mark, :lang(ko) .tcard__mark, :lang(zh) .tcard__mark, :lang(hi) .tcard__mark { letter-spacing: 0; font-size: .75rem; }

/* Head and button OVERLAY the card, so the photo can use most of the card at
   rest and settles into the band between them when they appear (the
   reference's car does the same). The head starts under the chip row - the
   BEST SELLER pill and the 44px heart keep their corners in both states. */
.tcard__head {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 2;
  padding: 58px 14px 0;
  text-align: center;
}
.tcard__name {
  margin: 0;
  font-family: var(--sq-font-display);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--sq-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* BUGFIX 0.5.159 (#27): a long word ("Perlmutt-Schmuckschatulle",
     "smaragdcsiszolással") was cut mid-word by the clamp. It now breaks or
     hyphenates, and the clamp still ends in an ellipsis. The .cat-tile__name
     pattern; same four lines in every copy of this rule. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.tcard__price {
  justify-content: center;
  margin-block-start: 3px;
  gap: 5px;
}
.tcard__price .price__now { font-size: .9375rem; font-weight: 600; color: var(--sq-ink); }   /* ink-soft measured 3.96:1 on the lilac tints */
.tcard__price .price__was { font-size: .8125rem; }
/* --sq-sale (#C42440) is 5.5:1 on white but 3.96:1 on the lilac tints; this
   darker member of the same hue is >= 5.3:1 on every tint measured live. The
   struck list price gets ink-soft for the same reason (ink-mute was 4.4:1). */
.tcard__price .price__now--sale { color: #9c1d33; }
.tcard__price .price__was { color: var(--sq-ink-soft); }

/* The product: contained, centred, blended into the tint. `darken` keeps every
   pixel darker than the tint exactly as photographed (a silver ring stays
   silver) and turns the photo's white ground into the card, so the wordmark
   and the contact shadow show through around the object.

   Layering, and why it looks the way it does: the card (isolation: isolate)
   is the stacking context the blend is computed against, so NOTHING between
   the card and the <img> may open another one - no z-index on .tcard__media,
   no transform, no opacity. The first cut had z-index:1 here and the photo
   blended against an empty context: white stayed white. The <img> is
   absolutely positioned with auto margins: that is the one layout in which
   a replaced element with both max sizes set keeps its ratio, fits the box
   and centres, whatever the master's aspect (masters run 670x390 to
   1024x1536 on this rail alone). */
.tcard__media {
  position: absolute;
  inset: 0;
}
.tcard__media::after {
  content: '';
  position: absolute;
  inset-inline: 24%;
  inset-block-end: calc(var(--tc-band-bottom, 14%) - 4%);
  block-size: 9%;
  border-radius: 50%;
  transition: inset-block-end var(--sq-t-med) var(--sq-ease);
  background: radial-gradient(ellipse at center, rgba(var(--tc-shade, 120, 90, 70), .34), rgba(var(--tc-shade, 120, 90, 70), 0) 68%);
}
/* --tc-band-*: the box the photo is fitted into, as % of the card. Rest = a
   tall band under the wordmark; open = the band between the head and the
   button (touch devices live there). Animating inset is a layout change on
   ONE card for 240 ms; nothing else on the page depends on it. */
.tcard {
  --tc-band-top: 19%;
  --tc-band-bottom: 19%;
  --tc-band-side: 9%;
}
.tcard__img {
  position: absolute;
  inset: var(--tc-band-top) var(--tc-band-side) var(--tc-band-bottom);
  margin: auto;
  inline-size: auto;
  block-size: auto;
  max-inline-size: calc(100% - 2 * var(--tc-band-side));
  max-block-size: calc(100% - var(--tc-band-top) - var(--tc-band-bottom));
  object-fit: contain;
  mix-blend-mode: darken;
  transition: inset var(--sq-t-med) var(--sq-ease), max-block-size var(--sq-t-med) var(--sq-ease);
}
.tcard.is-open, .tcard:focus-within { --tc-band-top: 41%; --tc-band-bottom: 21%; --tc-band-side: 12%; }
.tcard__noimg { color: var(--tc-mark, var(--sq-ink-mute)); }
.tcard__soldout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}
.tcard--soldout .tcard__img { filter: grayscale(1); opacity: .7; }
.tcard__foot { display: none; }

/* Corner chips: the BEST SELLER / −n% pill and the wishlist heart keep the
   shop's look (badge + .pcard__wish from components.css), only placed. */
.tcard__badges {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}
.tcard .tcard__wish { inset-block-start: 10px; inset-inline-end: 10px; z-index: 5; }

/* ------------------------------------------------ the button ---- */
/* .pcard__qwrap is a square photo overlay in components.css; here it is the
   bottom bar. Higher specificity on every rule: that sheet loads after this
   one. */
.tcard .pcard__qwrap {
  position: absolute;
  inset: auto 14px 14px;
  aspect-ratio: auto;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  block-size: 44px;
  padding: 0;
  pointer-events: auto;
}
.tcard .pcard__qwrap > * { margin: 0; }
.tcard .pcard__qadd,
.tcard .pcard__stepper,
.tcard .pcard__qbadge {
  flex: 1 1 auto;
  max-inline-size: none;
  inline-size: 100%;
  block-size: 44px;
  border-radius: 10px;
  color: #fff;
  background: var(--sq-ink);
  box-shadow: none;
}
.tcard .pcard__qadd {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 12px;
  font-family: var(--sq-font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  transition: background var(--sq-t-fast) var(--sq-ease), transform var(--sq-t-fast) var(--sq-ease);
}
.tcard .pcard__qadd[hidden] { display: none; }
.tcard__btn-label { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .tcard .pcard__qadd:hover, .tcard .pcard__qbadge:hover { background: #1f353e; }
}
/* qadd.js's two other states, restyled as the same black bar. [hidden] must
   still win, so the display rules are guarded. */
.tcard .pcard__stepper:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2px;
}
.tcard .pcard__step { color: #fff; inline-size: 44px; block-size: 40px; border-radius: 8px; }
.tcard .pcard__qnum { color: #fff; font-size: 1rem; }
.tcard .pcard__qbadge:not([hidden]) { display: grid; place-items: center; font-size: 0; }
/* "2 in cart", translated: qadd.js writes that sentence to the badge's
   aria-label and only the bare number to its text. */
.tcard .pcard__qbadge::after { content: attr(aria-label); font-size: .9375rem; font-weight: 600; }

/* ------------------------------------------------ states ---- */
/* Hover-capable: rest = tint, wordmark, product. */
@media (hover: hover) {
  .tcard__head, .tcard .pcard__qwrap {
    opacity: 0;
    transition: opacity var(--sq-t-med) var(--sq-ease), transform var(--sq-t-med) var(--sq-ease);
  }
  .tcard__head { transform: translateY(-6px); }
  .tcard .pcard__qwrap { transform: translateY(8px); pointer-events: none; }
  .tcard:hover, .tcard:focus-within {
    --tc-band-top: 41%;
    --tc-band-bottom: 21%;
    --tc-band-side: 12%;
    transform: scale(1.06);
    box-shadow: var(--sq-shadow-3);
    z-index: 3;
  }
  .tcard:hover .tcard__head, .tcard:focus-within .tcard__head,
  .tcard:hover .pcard__qwrap, .tcard:focus-within .pcard__qwrap {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* the caption sits where the button lands: it yields to the name on top */
  .tcard:hover .tcard__mark, .tcard:focus-within .tcard__mark, .tcard:has(.pcard__qwrap.is-active) .tcard__mark { opacity: 0; }
  /* A card whose stepper is open or that already holds a quantity stays
     revealed, so the [− n +] never vanishes under the cursor. */
  .tcard .pcard__qwrap.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .tcard:has(.pcard__qwrap.is-active) .tcard__head { opacity: 1; transform: none; }
}
/* Touch: no hover to reveal with, so the card is always in its open state. */
@media (hover: none) {
  .tcard { --tc-band-top: 41%; --tc-band-bottom: 21%; --tc-band-side: 12%; }
  .tcard__head, .tcard .pcard__qwrap { opacity: 1; }
  .tcard__mark { display: none; }   /* the button covers its line; the name is always on */
}
@media (prefers-reduced-motion: reduce) {
  .tcard, .tcard__head, .tcard .pcard__qwrap, .tcard__img, .tcard__mark, .tcard__media::after { transition: none; }
  @media (hover: hover) {
    .tcard:hover, .tcard:focus-within { transform: none; }
  }
}
.tcard:focus-within { outline: none; }
.tcard__link:focus-visible {
  outline: 2px solid var(--sq-focus);
  outline-offset: -4px;
  border-radius: var(--sq-r-lg);
}

/* RTL: the layout is symmetric; only the "View product" arrow turns. */
[dir="rtl"] .tcard__btn-label + svg { transform: scaleX(-1); }