/* Taste & Rate — Discover. Complete replacement. Revision 2026-09-11-r2. */

/* Theme and layout tokens are local to the scene, including its optional portal. */
.tr-discover,
.tr-discover__layout {
  --tr-discover-build: 202609112;
  --tr-red: #df4f50;
  --tr-ink: #111214;
  --tr-muted: #77736f;
  --tr-bg: #ffffff;
  --tr-pin-gap: 8px;
  --tr-entry-space: 92px;
  --tr-bottom-space: 70px;
  --tr-fade-height: 360px;
  color: var(--tr-ink);
}
.tr-discover,
.tr-discover__layout,
.tr-discover__layout *,
.tr-discover__layout *::before,
.tr-discover__layout *::after { box-sizing: border-box; }

/* These are the two verified, dedicated Elementor shortcode containers.
   Their 10px paddings created the white seam. Card/section motion is untouched. */
.elementor .elementor-element.elementor-element-b5dc355 {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
}
.elementor .elementor-element.elementor-element-5b0b1e7 {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}
@supports selector(:has(*)) {
  .elementor .e-con:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .tr-discover) {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0;
  }
  .elementor .e-con:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > .tr-gateway) {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
}

/* Default: real, readable cards in normal flow, including when JS is delayed. */
.tr-discover {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: var(--tr-entry-space) 0 var(--tr-bottom-space);
  background-color: #fff;
  background-image: linear-gradient(180deg, #f1eee8 0%, #f3f0eb 24%, #f7f5f1 48%, #fbfaf8 72%, #fff 100%);
  background-size: 100% var(--tr-fade-height);
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: visible;
}
.tr-discover__layout {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(205px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(42px, 5vw, 84px);
  width: min(1420px, calc(100% - 64px));
  height: auto;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
}
.tr-discover__stage {
  position: relative;
  display: grid;
  gap: 24px;
  width: 100%;
  height: auto;
  min-width: 0;
  overflow: visible;
}
.tr-discover__panel {
  position: relative;
  z-index: var(--tr-layer, 1);
  width: 100%;
  height: clamp(480px, 68vh, 630px);
  margin: 0 !important;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Existing visual rules. */
.tr-discover__rail {
  position:relative;
  z-index:100;
  align-self:center;
  min-width:0}
.tr-discover__rail-inner {
  position:relative;
  padding:0}
.tr-discover__section-label {
  max-width:190px;
  margin:0 0 52px;
  color:#706c67;
  font-size:10px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:.12em;
  text-transform:uppercase}
.tr-discover__counter {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin:0 0 14px;
  font-variant-numeric:tabular-nums}
.tr-discover__counter-current {
  color:var(--tr-red);
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em}
.tr-discover__counter-divider,.tr-discover__counter-total {
  color:#9b9690;
  font-size:10px;
  font-weight:650;
  line-height:1}
.tr-discover__active-title {
  max-width:280px;
  margin:0;
  color:var(--tr-ink);
  font-size:clamp(39px,3.7vw,62px);
  font-weight:720;
  line-height:.92;
  letter-spacing:-.055em;
  text-wrap:balance;
  transition:opacity 140ms ease,transform 180ms ease,filter 180ms ease}
.tr-discover__rail.is-changing .tr-discover__active-title {
  opacity:0;
  transform:translateY(6px);
  filter:blur(3px)}
.tr-discover__progress {
  position:relative;
  width:min(210px, 100%);
  height:2px;
  margin:28px 0 21px;
  overflow:hidden;
  background:rgb(17 18 20 / .13)}
.tr-discover__progress-bar {
  position:absolute;
  inset:0 auto 0 0;
  width:16.666%;
  background:var(--tr-red);
  transition:width 360ms cubic-bezier(.22,1,.36,1)}
.tr-discover__rail-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-bottom:7px;
  border-bottom:1px solid rgb(17 18 20 / .7);
  color:var(--tr-ink);
  text-decoration:none!important;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.025em;
  transition:color 180ms ease,border-color 180ms ease}
.tr-discover__rail-link svg {
  width:13px;
  height:13px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 280ms cubic-bezier(.22,1,.36,1)}
.tr-discover__rail-link:hover {
  color:var(--tr-red);
  border-color:var(--tr-red)}
.tr-discover__rail-link:hover svg {
  transform:translate(3px,-3px)}
.tr-discover-card {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:18px;
  background:#aaa49b;
  color:#fff;
  text-decoration:none!important;
  isolation:isolate;
  box-shadow:0 22px 58px rgb(23 20 17 / .13),0 5px 18px rgb(23 20 17 / .06);
  transition:box-shadow 400ms cubic-bezier(.22,1,.36,1)}
.tr-discover-card::after {
  content:"";
  position:absolute;
  z-index:20;
  inset:0;
  border:1px solid rgb(255 255 255 / .18);
  border-radius:inherit;
  pointer-events:none}
.tr-discover-card__backdrop {
  position:absolute;
  z-index:0;
  inset:-44px;
  overflow:hidden;
  background:#aaa49b}
.tr-discover-card__backdrop img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(26px) saturate(.9) brightness(.77);
  transform:scale(1.14);
  transition:transform 1s cubic-bezier(.22,1,.36,1)}
.tr-discover-card__wash {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgb(10 10 11 / .03) 0%,rgb(10 10 11 / .01) 42%,rgb(10 10 11 / .57) 100%)}
.tr-discover-card__inset {
  position:absolute;
  z-index:3;
  left:50%;
  top:44%;
  width:min(84%,900px);
  height:75%;
  overflow:hidden;
  border-radius:12px;
  background:rgb(237 233 226 / .5);
  box-shadow:0 28px 72px rgb(13 11 9 / .22),0 5px 18px rgb(13 11 9 / .09);
  transform:translate(-50%,-50%)}
.tr-discover-card__inset img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform 850ms cubic-bezier(.22,1,.36,1)}
.tr-discover-card__empty {
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#bdb7ae,#77716b)}
.tr-discover-card__index {
  position:absolute;
  z-index:8;
  top:25px;
  left:27px;
  color:rgb(255 255 255 / .9);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.13em;
  text-shadow:0 2px 12px rgb(0 0 0 / .24)}
.tr-discover-card__category {
  position:absolute;
  z-index:8;
  left:27px;
  right:27px;
  bottom:24px;
  display:flex;
  align-items:flex-end;
  gap:14px;
  color:#fff}
.tr-discover-card__category-line {
  width:36px;
  height:3px;
  flex:0 0 auto;
  margin-bottom:8px;
  background:var(--tr-red)}
.tr-discover-card__category span:last-child {
  max-width:84%;
  color:#fff;
  font-size:clamp(34px,4vw,62px);
  font-weight:720;
  line-height:.88;
  letter-spacing:-.055em;
  text-shadow:0 3px 25px rgb(0 0 0 / .3)}
@media (hover:hover) {
  .tr-discover-card:hover {
  box-shadow:0 35px 92px rgb(20 17 14 / .2),0 9px 28px rgb(20 17 14 / .1)}
.tr-discover-card:hover .tr-discover-card__backdrop img {
  transform:scale(1.17)}
.tr-discover-card:hover .tr-discover-card__inset img {
  transform:scale(1.035)}
}

/* Keep the original card artwork, typography, blur, radius and shadow. */
.tr-discover__rail { align-self: start; }
.tr-discover-card__backdrop img,
.tr-discover-card__inset img { position: absolute; inset: 0; }
.tr-discover-card:focus-visible,
.tr-discover__rail-link:focus-visible {
  outline: 3px solid var(--tr-red);
  outline-offset: 5px;
}
.tr-discover__focus-bridge {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One pin system; activated only after successful JS measurement.
   Height is explicit in pixels, avoiding percentage-height/portal inheritance bugs. */
.tr-discover.tr-discover--enhanced {
  height: var(--tr-root-height);
  padding: 0;
}
.tr-discover__layout.tr-discover__layout--enhanced {
  position: absolute;
  top: var(--tr-entry-space);
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--tr-layout-width);
  height: var(--tr-layout-height);
  min-height: 0;
  max-height: none;
  margin: 0;
  align-items: center;
  transform: translateX(-50%);
}
.tr-discover__layout--enhanced .tr-discover__rail { align-self: center; }
.tr-discover__layout--enhanced .tr-discover__stage {
  display: block;
  height: var(--tr-layout-height);
}
.tr-discover__layout--enhanced .tr-discover__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tr-panel-height);
  opacity: var(--tr-opacity, 1);
  transform: translate3d(0, var(--tr-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
  transition: none;
}
.tr-discover__layout--enhanced .tr-discover__panel.is-active { pointer-events: auto; }
.tr-discover__layout--enhanced[data-tr-mode="pinned"] {
  position: fixed;
  top: var(--tr-pin-top);
  left: var(--tr-fixed-left);
  bottom: auto;
  z-index: 900; /* Below the verified Lestin sticky header at z-index 999. */
  transform: none;
}
.tr-discover__layout--enhanced[data-tr-mode="ended"] {
  top: auto;
  bottom: var(--tr-bottom-space);
}

@media (max-width: 900px) {
  .tr-discover {
    padding: 70px 0 82px;
    /* Gateway has no warm scroll phase on mobile: its default background is white. */
    background-image: none;
  }
  .tr-discover__layout { display: block; width: min(calc(100% - 36px), 760px); }
  .tr-discover__rail { margin-bottom: 36px; }
  .tr-discover__section-label { margin-bottom: 22px; }
  .tr-discover__active-title { max-width: 520px; font-size: clamp(38px, 9vw, 58px); }
  .tr-discover__progress { max-width: 280px; }
  .tr-discover__stage { display: block; }
  .tr-discover__panel { height: 590px; }
  .tr-discover__panel + .tr-discover__panel { margin-top: -18px !important; }
  .tr-discover-card__inset { width: 84%; height: 74%; }
}
@media (max-width: 600px) {
  .tr-discover { padding: 58px 0 70px; }
  .tr-discover__layout { width: calc(100% - 28px); }
  .tr-discover__rail { margin-bottom: 29px; }
  .tr-discover__section-label { font-size: 10px; }
  .tr-discover__active-title { font-size: clamp(35px, 11vw, 50px); }
  .tr-discover__panel { height: 68vh; min-height: 460px; max-height: 550px; }
  @supports (height: 100svh) {
    .tr-discover__panel { height: clamp(460px, 67svh, 550px); }
  }
  .tr-discover__panel + .tr-discover__panel { margin-top: -13px !important; }
  .tr-discover-card { border-radius: 15px; }
  .tr-discover-card__backdrop { inset: -28px; }
  .tr-discover-card__inset { top: 43%; width: 87%; height: 71%; border-radius: 9px; }
  .tr-discover-card__index { top: 19px; left: 20px; }
  .tr-discover-card__category { left: 20px; right: 20px; bottom: 20px; gap: 10px; }
  .tr-discover-card__category-line { width: 24px; height: 2px; margin-bottom: 6px; }
  .tr-discover-card__category span:last-child { max-width: 86%; font-size: clamp(28px, 9vw, 41px); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-discover-card,
  .tr-discover-card__backdrop img,
  .tr-discover-card__inset img,
  .tr-discover__active-title,
  .tr-discover__progress-bar,
  .tr-discover__rail-link svg { transition: none !important; }
}
@media print {
  .tr-discover { height: auto !important; padding: 24px 0; }
  .tr-discover__layout.tr-discover__layout--enhanced {
    position: relative; inset: auto; transform: none; width: 100%; height: auto;
  }
  .tr-discover__layout--enhanced .tr-discover__stage { height: auto; }
  .tr-discover__layout--enhanced .tr-discover__panel {
    position: relative; height: 420px; opacity: 1; transform: none;
    break-inside: avoid;
  }
}