/* ---------------------------------------------------------------------------
   Product recommendations - single source of truth for the styling.
   Loaded by journal3/recommendation_row.twig; the controller only decides the
   layout ('row' vs 'rail') and the data. Two layouts share one card design:

     row  - horizontal scroll-snap strip (product page, full width).
     rail - vertical sticky column dropped into the empty space beside the
            centered wishlist / compare cards on desktop, where each card is
            laid out as a mini row (photo | details); on narrow screens it
            unsticks and becomes a full-width strip of ordinary cards.
   --------------------------------------------------------------------------- */

/* Flex wrapper the host page puts around [ items | rail ]. */
.reco-layout { display: flex; gap: 26px; align-items: flex-start; justify-content: center; }
.reco-layout-main { flex: 1 1 auto; min-width: 0; }

.reco-section { padding: 0 8px; }
/* width:100% because the auto side margins switch off stretching when the host is a
   flex column (the empty category page): the section then took the strip's full
   min-content width (capped at 1140px), overflowed a 402px phone and the scroller
   inside it could only move by the few pixels left over. */
.reco-section--row { width: 100%; max-width: 1140px; margin: 34px auto 10px; }
.reco-section--rail { flex: 0 0 300px; position: sticky; top: 20px; margin-top: 6px; }

/* Heading row. The rule under it belongs to the row rather than to the text, so it
   spans the block's full width whatever the title's length. */
.reco-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e6e8eb;
}
.reco-title { font-size: 20px; font-weight: 700; margin: 0; }
.reco-section--rail .reco-title { font-size: 17px; }

/* row layout: horizontal snap strip */
.reco-section--row .reco-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 16px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  padding: 4px 2px 14px; -webkit-overflow-scrolling: touch;
}
.reco-section--row .reco-card { scroll-snap-align: start; }

/* No native scrollbar: it drew a stray half-width line under the cards, sat at a
   different length on every product, and said nothing about which way to go. The
   arrows below are the affordance instead (design decision, 2026-09-18). */
.reco-row { scrollbar-width: none; -ms-overflow-style: none; }
.reco-row::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Arrow navigation: one arrow on each side of the strip (design decision, the block
   is advanced with arrows rather than a scrollbar).

   They are flex SIBLINGS of the scroller, not an overlay on top of it. Floating them
   over the cards was tried and abandoned: centred on the strip's height an arrow lands
   squarely on a product name, and clearing the cards needs a page gutter that narrow
   screens do not have. Their own columns cost 76px of strip on desktop - one fewer
   card peeking at the edge - and nothing at all once they are hidden. */
.reco-viewport { display: flex; align-items: center; gap: 8px; }
/* min-width:0 or the scroller refuses to shrink below its cards and pushes the right
   arrow off the block. */
.reco-viewport .reco-row { flex: 1 1 auto; min-width: 0; }
.reco-nav {
  display: none; flex: 0 0 auto;
  align-items: center; justify-content: center;
  width: 30px; height: 30px; min-width: 0; padding: 0;
  /* The theme resets `button` to no border and no padding, and a UA stylesheet would
     otherwise paint it grey; state every box property rather than inherit one. */
  -webkit-appearance: none; appearance: none; font: inherit;
  background: #fff; color: #195C5B;
  border: 1px solid #dfe3e6; border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Only once there is something to scroll to -- set by the script in the partial. */
.reco-section.has-overflow .reco-nav { display: flex; }
.reco-nav:hover:not(:disabled) { border-color: #195C5B; background: #f2f7f6; }
.reco-nav:disabled { opacity: 0.3; cursor: default; }
.reco-nav svg { display: block; }
/* Touch: swiping is the gesture, and the buttons only take up room. */
@media (hover: none) and (pointer: coarse) {
  .reco-section.has-overflow .reco-nav { display: none; }
}

/* rail layout: vertical stack */
.reco-section--rail .reco-row { display: flex; flex-direction: column; gap: 14px; }

.reco-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6e8eb; border-radius: 14px;
  padding: 14px 14px 16px; min-width: 0;
}
/* Fixed 3:4 portrait frame, photo CONTAINED on white. Seller photos on S3 come back
   un-resized in their own shape (see model/tool/image.php); on the old grey frame
   each one showed a different-sized grey margin, so the strip read as a mix of
   portrait and landscape cards. Cover fixed that but cut wide photos (a console lost
   its controller). On white, a white-background product photo - most of them - has
   no visible edge, so every frame looks the same and nothing is cropped. The lasting
   fix is normalising photos to 3:4 on upload. */
.reco-thumb {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff; border-radius: 10px; margin-bottom: 12px;
  aspect-ratio: 3 / 4;
}
.reco-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reco-name {
  color: inherit; font-size: 14px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 39px; margin-bottom: 8px;
  /* The skin underlines every link (dotted) and exempts the theme's own card
     names (.name a); this is our card's name, so it opts out here. */
  text-decoration: none;
}
.reco-name:hover { color: #195C5B; }

/* Rating row. Sizes come from rating-stars.css, never from here -- see the ONE SIZE
   PER SURFACE note in that file. The price used to live on this line as a separate
   "Starting from" caption; it is inside the offer button now, beside the logo it
   belongs to, so the card does not print the same number twice. */
.reco-rating { display: inline-flex; align-items: center; gap: 4px; line-height: 1; margin-bottom: 10px; }

/* Market button, compact variant.

   The shared .market-link-card is built for a logo+price row plus a pill row, and
   its 999px radius assumes a box far wider than it is tall. This card has no price,
   so the two-column grid collapsed to one, the box came out almost as tall as it was
   wide, and 999px drew it as a giant ellipse with "CLICK TO BUY" broken over two
   lines. Here the box is a single full-width column with a card-like radius, and the
   type is scaled to the ~190px card so the label stays on one line. */
/* Offer button: logo and price share the first row, the teal pill spans the second -
   the same two-row block the listing cards use, at the sizes a narrower card allows.

   The logo column has a FIXED width and the price is pushed to the far edge. Letting
   the column size itself made the button look different on every card: our widest
   logo is 4.2:1 against 2.5:1 for the narrowest, so a shared max-width shrank the wide
   ones to about half the height of the square ones, and a row of cards read as a row
   of mistakes. A fixed column also starts every price at the same x.

   It does NOT inherit the shared 999px radius: that is written for the product page's
   single-row pill, and on a box this tall the radius clamps to half the short side and
   rounds the whole button into an ellipse (which is how this card looked before
   2026-09-18).

   Every size below is set against a known card width, because the row only fits if the
   box is wide enough: 190px row, ~166px right column of a desktop rail row, 170px rail strip, 158px phone
   row. Change a card width above and re-check the tier that owns it. */
.reco-card .market-link-card {
  margin-top: auto; width: 100%;
  grid-template-columns: 70px 1fr; justify-content: stretch;
  border-radius: 14px; padding: 8px 8px 9px; gap: 5px 6px;
  /* Cards in one row stretch to the tallest of them; pinning the rows apart keeps
     every "Click to Buy" on the same baseline. */
  align-content: space-between;
}
.reco-card .market-link-card .mkl-logo { width: 70px; }
.reco-card .market-link-card .mkl-logo img { height: 19px; width: auto; max-width: 100%; object-position: left center; }
.reco-card .market-link-card .mkl-price { justify-self: end; }
.reco-card .market-link-card .mkl-cur { font-size: 9px; }
.reco-card .market-link-card .mkl-int { font-size: 14px; }
.reco-card .market-link-card .mkl-dec { font-size: 8px; }
.reco-card .market-link-card .mkl-cta { margin-top: 7px; padding: 5px 8px; gap: 5px; }
.reco-card .market-link-card .mkl-cta-text { font-size: 10px; white-space: nowrap; }
.reco-card .market-link-card .mkl-cta-arrow { width: 17px; height: 17px; }
.reco-card .market-link-card .mkl-cta-arrow svg { width: 9px; height: 9px; }

/* The sticky rail: one mini ROW per product - photo on the left, name, rating and
   offer button on the right (2026-10-15). As a full card the 300px rail drew a
   400px photo and one product filled the screen next to the compare table. The
   right column is ~166px (300 - 16 section padding - 22 card border+padding - 84
   photo - 12 gap), the same width the 190px row card gives its button, so the
   button keeps the base sizes above. The markup is unchanged; only the grid moves.
   Rows are pinned (name 1, rating 2, button 3) so a product without a rating keeps
   its button at the bottom instead of sliding up into row 2. */
@media (min-width: 992px) {
  .reco-section--rail .reco-row { gap: 10px; }
  .reco-section--rail .reco-card {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 12px; padding: 10px; border-radius: 12px;
  }
  .reco-section--rail .reco-thumb { grid-column: 1; grid-row: 1 / 4; align-self: start; margin-bottom: 0; border-radius: 8px; }
  .reco-section--rail .reco-name { grid-column: 2; grid-row: 1; font-size: 13px; min-height: 0; margin-bottom: 4px; }
  .reco-section--rail .reco-rating { grid-column: 2; grid-row: 2; margin-bottom: 8px; }
  .reco-section--rail .reco-card .market-link-card { grid-column: 2; grid-row: 3; align-self: end; }
  /* An 84px photo: the mini card's pill size, or "Sponsored" covers most of it. */
  .reco-section--rail .reco-thumb > .product-sponsored { left: 4px; bottom: 4px; padding: 2px 6px; font-size: 9px; letter-spacing: 0.02em; }
}

/* When there is no side room, the rail unsticks and becomes a strip under the items. */
@media (max-width: 991px) {
  .reco-layout { flex-direction: column; }
  .reco-section--rail { position: static; flex-basis: auto; width: 100%; max-width: 1140px; margin: 24px auto 0; }
  .reco-section--rail .reco-row {
    flex-direction: row; grid-auto-flow: column; grid-auto-columns: 170px;
    overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px;
  }
  .reco-section--rail .reco-card { scroll-snap-align: start; min-width: 170px; }
  /* 170px cards: the base 10px label would overflow its pill here. */
  .reco-section--rail .market-link-card { grid-template-columns: 52px 1fr; padding: 7px 7px 8px; gap: 4px 6px; border-radius: 12px; }
  .reco-section--rail .market-link-card .mkl-logo { width: 52px; }
  .reco-section--rail .market-link-card .mkl-logo img { height: 14px; }
  .reco-section--rail .market-link-card .mkl-cur { font-size: 8px; }
  .reco-section--rail .market-link-card .mkl-int { font-size: 13px; }
  .reco-section--rail .market-link-card .mkl-dec { font-size: 7px; }
  .reco-section--rail .market-link-card .mkl-cta { margin-top: 6px; padding: 4px 5px; gap: 4px; }
  .reco-section--rail .market-link-card .mkl-cta-text { font-size: 9px; }
  .reco-section--rail .market-link-card .mkl-cta-arrow { width: 15px; height: 15px; }
  .reco-section--rail .market-link-card .mkl-cta-arrow svg { width: 8px; height: 8px; }
}

@media (max-width: 480px) {
  .reco-section--row { margin-top: 24px; }
  .reco-title { font-size: 17px; }
  /* Touch hides the arrows entirely; this is for a narrow window with a mouse, where
     every pixel the arrows take is a pixel of card. */
  .reco-viewport { gap: 6px; }
  .reco-nav { width: 26px; height: 26px; }
  .reco-section--row .reco-row { grid-auto-columns: 158px; gap: 12px; }
  .reco-card { padding: 11px 11px 13px; border-radius: 12px; }
  .reco-name { font-size: 13px; }
  /* 158px cards: same step down as the rail strip. */
  .reco-card .market-link-card { grid-template-columns: 50px 1fr; padding: 7px 7px 8px; gap: 4px 6px; border-radius: 12px; }
  .reco-card .market-link-card .mkl-logo { width: 50px; }
  .reco-card .market-link-card .mkl-logo img { height: 14px; }
  .reco-card .market-link-card .mkl-cur { font-size: 8px; }
  .reco-card .market-link-card .mkl-int { font-size: 13px; }
  .reco-card .market-link-card .mkl-dec { font-size: 7px; }
  .reco-card .market-link-card .mkl-cta { margin-top: 6px; padding: 4px 5px; gap: 4px; }
  .reco-card .market-link-card .mkl-cta-text { font-size: 9px; }
  .reco-card .market-link-card .mkl-cta-arrow { width: 15px; height: 15px; }
  .reco-card .market-link-card .mkl-cta-arrow svg { width: 8px; height: 8px; }
}

/* "See all" link at the right of the heading (optional, only where the host passes
   one). The theme underlines links on hover site-wide; this one only darkens. */
.reco-head .reco-more {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto;
  font-size: 15px; font-weight: 600; color: #1f2326 !important; text-decoration: none !important;
  white-space: nowrap;
}
.reco-head .reco-more:hover { color: #195C5B !important; }
.reco-head .reco-more svg { display: block; }

/* ---------------------------------------------------------------------------
   'home' variant: the strip at the top of the home page (extension/module/
   home_cards). A grey rounded panel the width of the page row, heading without
   the rule, white cards on the grey, and the arrows sitting ON the panel's edge
   (half outside it) at the height of the photos - so they take no strip width
   and never land on a product name.
   --------------------------------------------------------------------------- */
.reco-section--home.reco-section--row {
  max-width: none; margin: 0;
  padding: 18px 22px 16px;
  background: #f3f4f5; border: 1px solid #e8eaec; border-radius: 16px;
}
.reco-section--home .reco-head { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
.reco-section--home .reco-title { font-size: 22px; }
.reco-section--home .reco-row { padding-bottom: 4px; }
.reco-section--home .reco-card { border-color: #e6e8eb; }

.reco-section--home .reco-viewport { position: relative; display: block; }
/* Vertically centred on the cards (the viewport is exactly the strip's height), so
   it follows any change to the card or photo size. It sits on the panel border, in
   the gap beside the cards, so the centre line never puts it on a product name. */
.reco-section--home .reco-nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-color: #e6e8eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* Centre on the panel's border: the viewport starts 22px (panel padding) + 1px
   (border) in, and the button is 40px wide. */
.reco-section--home .reco-nav--prev { left: -43px; }
.reco-section--home .reco-nav--next { right: -43px; }
/* Nothing to go back to at the start, nothing further at the end: hide the dead
   arrow rather than grey it out. */
.reco-section--home .reco-nav:disabled { display: none; }

@media (max-width: 600px) {
  .reco-section--home.reco-section--row { padding: 14px 12px 12px; border-radius: 12px; }
  .reco-section--home .reco-title { font-size: 18px; }
  .reco-section--home .reco-head .reco-more { font-size: 14px; }
}