/* Store trial page (try.html). Builds on styles.css: same tokens, buttons, search box, panels and closing block. */

[hidden] { display: none !important; }

.trial-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px; align-items: start; padding-top: 28px; padding-bottom: 40px; }
.trial-title { font-size: clamp(40px, 4.6vw, 64px); overflow-wrap: anywhere; }
.trial-language { font-weight: 500; }

.trial-start { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.trial-fields { display: flex; flex-direction: column; gap: 14px; }

/* Compact top: once a trial runs, the intro folds away so the search sits high on the page (trial-page.js setCompact).
   The start form becomes a slim bar; the Turnstile widget stays in the page, clipped to nothing rather than display:none,
   so its next check keeps running; it shows again when the form opens. */
.trial-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; min-height: 44px; }
.trial-bar .text-button { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.trial-bar-store { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.trial-hero.is-compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 16px; padding-bottom: 20px; }
.trial-hero.is-compact .section-head { gap: 0; max-width: none; flex: 1 1 auto; min-width: 0; }
.trial-hero.is-compact .trial-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; }
.trial-hero.is-compact .lead, .trial-hero.is-compact .trial-language, .trial-hero.is-compact .trial-fields { display: none; }
.trial-hero.is-compact .trial-start { flex: 0 1 auto; padding: 4px 18px; gap: 0; border-radius: 14px; }
.trial-hero.is-compact .trial-turnstile { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.trial-privacy-slot { padding-bottom: 40px; }
.trial-privacy-slot:empty { display: none; }
.trial-privacy { font-size: 14px; }
.trial-label { font-weight: 600; }
.trial-row { display: flex; gap: 12px; flex-wrap: wrap; }
.trial-input {
  flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 12px 16px;
  border: 1.5px solid var(--green); border-radius: 14px; background: var(--white);
  font: 500 18px var(--body); color: var(--ink);
}
.trial-input:focus-visible { outline-offset: 1px; }
/* The human check keeps its room while it loads (is-reserved in try.html; trial-page.js drops it when no widget comes):
   Cloudflare's normal widget is 65 px tall, the compact one try.js uses up to 400 px wide is 140 px. line-height 0
   removes the gap under the widget's inline frame. */
.trial-turnstile:empty:not(.is-reserved) { display: none; }
.trial-turnstile { min-height: 65px; max-width: 100%; overflow: hidden; line-height: 0; }
@media (max-width: 400px) { .trial-turnstile.is-reserved { min-height: 140px; } }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
button.button { border: 0; cursor: pointer; font-family: var(--body); }
.text-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--green); text-decoration: underline; cursor: pointer; }
.text-button:hover { color: var(--green-deep); }

.trial-notice { background: var(--wrong-pale); color: var(--ink); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.trial-notice-warn { background: #FBEFD5; }
.trial-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.trial-band { padding: 0 24px 40px; }
.trial-loading { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.trial-progress-text { font-weight: 600; font-variant-numeric: tabular-nums; }
.trial-progress { width: 100%; height: 10px; border-radius: 999px; background: var(--green-wash); overflow: hidden; }
.trial-progress span { display: block; height: 100%; width: 0; background: var(--green); border-radius: inherit; transition: width 0.4s ease; }

.trial-results { display: flex; flex-direction: column; gap: 20px; }
.trial-found { font-size: 17px; color: var(--muted); overflow-wrap: anywhere; }
.trial-found:empty { display: none; }
.trial-coverage { font-size: 16px; font-weight: 600; color: var(--green-deep); overflow-wrap: anywhere; }
.trial-coverage:empty { display: none; }

/* A store too big to load: pick categories, or leave an email for a full catalog report. */
.trial-big { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.trial-big-lead { font-family: var(--display); font-size: clamp(22px, 2vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.trial-filter { flex: none; width: 100%; min-height: 48px; font-size: 17px; }
.trial-categories { display: flex; flex-direction: column; gap: 4px; }
.trial-category { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.trial-category:hover { background: var(--green-wash); }
.trial-category input { width: 22px; height: 22px; flex: none; accent-color: var(--green); }
.trial-category:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.trial-picked { font-weight: 600; }
.trial-report { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.trial-report-status:empty { display: none; }
.trial-report-status { color: var(--wrong); font-weight: 600; }
.trial-report-done { font-weight: 600; color: var(--green-deep); }

.trial-search { display: flex; flex-direction: column; gap: 14px; }
.trial-searchbox { padding: 8px 8px 8px 16px; }
.trial-query { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: 500 19px var(--body); color: var(--ink); padding: 8px 0; }
.trial-query:focus { outline: none; }
.trial-searchbox:focus-within { box-shadow: 0 0 0 3px var(--green-pale); }
/* The example chips are one row. When they do not fit it scrolls sideways with no visible scrollbar, and a soft fade on the
   right edge says there is more; the spacer at the end keeps the last chip clear of the fade. The vertical padding and
   the matching negative margin keep the chips' focus rings from being clipped by the scroll box. */
.trial-examples {
  display: flex; gap: 8px; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; overflow-y: hidden; padding-block: 3px; margin-block: -3px;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.trial-examples::-webkit-scrollbar { display: none; }
.trial-examples::after { content: ''; flex: none; width: 24px; }
.trial-examples > .hint { flex: none; }
.trial-example {
  flex: none; white-space: nowrap;
  border: 1.5px solid #B9C7BD; background: var(--white); color: var(--ink); border-radius: 999px;
  padding: 8px 14px; font: 500 15px var(--body); cursor: pointer; text-align: left;
}
.trial-example:hover { border-color: var(--green); }
.trial-example:disabled { opacity: 0.5; cursor: not-allowed; }
.trial-example[aria-pressed='true'] { background: var(--green); border-color: var(--green); color: var(--white); }

/* The scoreboard: one pale green bar over both columns with each side's count of results that meet every condition
   ("Store search 5/10", "Mezcal 10/10") and the comparison sentence. Before the first search it holds a quiet line, so
   the page does not jump when the numbers arrive. The meta line under it is small and muted. */
.trial-compare-head { display: flex; flex-direction: column; gap: 8px; }
.trial-scoreboard {
  background: var(--green-pale); border-radius: 14px; padding: 10px 18px; min-height: 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; scroll-margin-top: 12px;
}
.trial-scoreboard.is-idle { background: var(--green-wash); }
.trial-score-idle { color: var(--muted); font-size: 16px; }
.trial-score-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 24px; }
.trial-score { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 16px; font-weight: 600; }
.trial-score-number { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.trial-score-label { color: var(--grey-text); }
.trial-score.is-mezcal .trial-score-number, .trial-score.is-mezcal .trial-score-label { color: var(--green-deep); }
.trial-meta { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.trial-meta:not(:has(> .trial-meta-part:not([hidden]))) { display: none; }
/* A dot between the visible parts of a meta line, and between the fetch time and the link at the foot of the store column. */
.trial-meta-part:not([hidden]) ~ .trial-meta-part:not([hidden])::before { content: '\00B7'; display: inline-block; margin-inline: 0.45em; }
.trial-store-foot { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }

.trial-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; align-items: start; }
.trial-column { min-width: 0; }
/* Compact columns: a thin one-line head, then the products straight away. */
.trial-results .trial-column { padding: 14px 18px 18px; gap: 10px; }
.trial-col-head { min-height: 0; flex-wrap: nowrap; gap: 10px; }
.trial-col-head .panel-title { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-col-head .trial-engine { flex: none; }
/* The sentence comparing the two columns after a search, in the scoreboard bar beside the counts. */
.trial-comparison { flex: 1 1 320px; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.trial-engine-note { padding: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.trial-open-store { font-size: 15px; font-weight: 600; color: var(--green); width: fit-content; overflow-wrap: anywhere; }
.trial-engine { font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--muted); }
.trial-chips { min-height: 0; }
.trial-chip { background: var(--green); color: var(--white); padding: 6px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.trial-zero { color: var(--wrong); font-weight: 600; }
/* "3 of 10 match everything you asked for": the column's dominant number, neutral; green when everything matches. The
   raw count follows in small type. */
.trial-quality { font-size: 17px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.trial-quality-number { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.trial-quality.is-all .trial-quality-number { color: var(--green-deep); }
.trial-quality-conditions { color: var(--muted); }
.trial-quality + .count { margin-top: -10px; }
.trial-message { font-size: 16px; color: var(--muted); }
.trial-cards { display: flex; flex-direction: column; gap: 10px; }
.trial-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--white); border-radius: 16px; padding: 10px 14px 10px 10px; }
.trial-thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--mist); object-fit: cover; display: block; }
/* A product without an image: its first letter on a quiet tile, no external image. */
.trial-thumb-placeholder { display: grid; place-items: center; background: var(--green-wash); color: var(--green-deep); font: 600 22px var(--display); }
.trial-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trial-card-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
a.trial-card-title { text-decoration: none; }
a.trial-card-title:hover { text-decoration: underline; }
.trial-card-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.trial-price { font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.trial-currency { color: var(--muted); }
.trial-vendor { overflow-wrap: anywhere; }
/* A result that misses a condition: dimmed, with one quiet grey tag saying what it is versus what was asked. */
.trial-card.is-off-target .trial-thumb, .trial-card.is-off-target .trial-card-title, .trial-card.is-off-target .trial-card-meta { opacity: 0.6; }
.trial-miss, .trial-only { font-size: 13px; border-radius: 999px; padding: 2px 10px; width: fit-content; overflow-wrap: anywhere; }
.trial-miss { font-weight: 500; color: var(--grey-text); background: var(--grey-wash); }
/* A suitable Mezcal result the store's search did not show. */
.trial-only { font-weight: 600; color: var(--green-deep); background: var(--green-pale); }
/* A store result outside the products this trial loaded: shown, labelled, not counted. */
.trial-card.is-outside { background: var(--grey-wash); }
.trial-outside, .trial-unclear { font-size: 13px; font-weight: 600; color: var(--grey-text); background: var(--white); border-radius: 999px; padding: 2px 10px; width: fit-content; box-shadow: inset 0 0 0 1px var(--line); }

/* Empty state of the result columns before the first search: three faint rows in the shape of results, one muted line.
   Static on purpose (no shimmer); the rows are as tall as a one line result so the first search changes little. */
.trial-skeleton { align-items: center; opacity: 0.7; }
.trial-skeleton .trial-card-body { gap: 8px; }
.trial-skeleton-bar { display: block; height: 12px; width: 78%; border-radius: 999px; background: var(--line-soft); }
.trial-skeleton-bar.is-short { width: 40%; }
.trial-empty-hint { font-size: 14px; }

.trial-end { padding-top: 24px; }

@media (max-width: 760px) {
  .trial-hero { padding-top: 12px; padding-bottom: 32px; gap: 16px; }
  .trial-hero .section-head { gap: 12px; }
  .trial-start, .trial-loading, .trial-big { padding: 20px; }
  .trial-start { gap: 12px; }
  .trial-fields { gap: 12px; }
  .trial-hero.is-compact { padding-top: 8px; padding-bottom: 12px; gap: 10px; }
  .trial-bar { font-size: 15px; column-gap: 12px; }
  .trial-hero.is-compact .trial-start { flex: 1 1 100%; padding: 2px 16px; }
  .trial-band { padding: 0 20px 40px; }
  .trial-privacy-slot { padding-bottom: 28px; }
  .trial-row .button { flex: 1 1 100%; }
  .trial-query { font-size: 16px; }
}

/* Phones (trial-page.js PHONE_MAX_PX): Mezcal's column first, since the page scrolls to it after a search; tap targets
   at least 44 px; the "Try" label on its own line above the example chips; card text readable at arm's length. */
@media (max-width: 767px) {
  .trial-columns > .panel-right { order: -1; }
  .text-button { padding-block: 11px; } /* a taller tap area without making its line taller */
  .trial-open-store, .site-footer .footer-line a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header .brand { min-height: 44px; }
  .trial-example, .trial-query { min-height: 44px; }
  .trial-score-line, .trial-comparison { flex: 1 1 100%; }
  .trial-scoreboard { padding: 10px 16px; gap: 4px 0; }
  .trial-score-line { column-gap: 28px; align-items: flex-start; }
  .trial-score { flex-direction: column; align-items: flex-start; gap: 0; font-size: 14px; }
  .trial-score-number { font-size: 26px; }
  .trial-store-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; }
  .trial-card-meta, .trial-engine { font-size: 15px; }
  .trial-miss, .trial-only, .trial-outside, .trial-unclear { font-size: 14px; }
  .trial-big .trial-actions .button, .trial-report .button { flex: 1 1 100%; }
}

/* The Chrome extension offer under the columns (extension-offer.js): after the first comparison, desktop Chrome only.
   Quiet on purpose: a thin line, plain text and one secondary button, so the scoreboard stays the main thing. */
.trial-extension {
  margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.trial-extension[hidden] { display: none; }
.trial-extension-text { margin: 0; flex: 1 1 320px; min-width: 0; font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.trial-extension-text strong { color: var(--ink); font-weight: 600; }
.trial-extension-note { margin: 0; flex: 1 1 100%; font-size: 14px; color: var(--muted); }