/* ══ CLICKABLE AT A GLANCE (2026-10-10, Chad: "how do we let users know these are clickable") ══════════
   One look for everything on the site that can be clicked but used to read as plain text or a plain picture:
   gold › arrow · ember edge glow on hover · 2px lift · press dip + flash · hand cursor · gold keyboard ring.
   Rows: holiday countdowns, recipe rows, Scan choices, quiz answers.  Tiles: "From the jar to the table",
   gift picks, home lineup jars, home photo strip.  Pictures: zoom inside their frame + a corner label.
   The home page header is not touched. Buttons keep their own neon style. */

:root { --tap-gold: #F2B54A; --tap-ember: 255,128,44; --tap-ease: cubic-bezier(.22,1,.36,1); }

/* ── shared ─────────────────────────────────────────────────────────────────────────────────── */
.tap { cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--tap-ease), box-shadow .22s ease, background-color .22s ease, filter .15s ease; }
.tap:focus-visible { outline: 2px solid var(--tap-gold); outline-offset: 4px; border-radius: 6px; }
.tap-arrow { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; margin-left: .5em; border-radius: 50%;
  font: 700 1.05em/1 'Lato', sans-serif; color: var(--tap-gold); border: 1px solid rgba(242,181,74,.45);
  transition: transform .22s var(--tap-ease), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tap:hover .tap-arrow, .tap:focus-visible .tap-arrow { transform: translateX(4px); color: #1A0F06; background: var(--tap-gold); border-color: var(--tap-gold);
  box-shadow: 0 0 12px rgba(var(--tap-ember), .55); }
.tap.tap-flash { filter: brightness(1.18); }
.tap:active { transform: translateY(1px) scale(.995); }

/* ── rows: ember line down the left edge + warm wash, words turn gold ─────────────────────────── */
.tap-row:hover, .tap-row:focus-visible { transform: translateY(-2px); background-color: rgba(var(--tap-ember), .07);
  box-shadow: inset 3px 0 0 rgba(var(--tap-ember), .9), 0 10px 24px -14px rgba(var(--tap-ember), .55); }
.tap-row:hover strong, .tap-row:focus-visible strong { color: var(--tap-gold) !important; }
.tap-row .tap-arrow.is-end { position: absolute; right: .6rem; top: 50%; margin: 0; transform: translateY(-50%); }
.tap-row:hover .tap-arrow.is-end, .tap-row:focus-visible .tap-arrow.is-end { transform: translate(4px, -50%); }

/* holiday countdown rows (Gifts + home): chosen one = gold frame + solid fire bar on the left */
.sc-tab.tap { padding-right: 2.6rem; border-radius: 4px; }
.sc-tab.tap.is-active { box-shadow: inset 0 0 0 1px rgba(242,181,74,.85), inset 4px 0 0 #FF6A1F, 0 0 18px rgba(var(--tap-ember), .22); background-color: rgba(var(--tap-ember), .06); }
.sc-tab.tap.is-active .tap-arrow { color: #1A0F06; background: var(--tap-gold); border-color: var(--tap-gold); }

/* Scan choices already carry an arrow — it gets the same gold disc */
.scan-act.tap { padding-right: .6rem; }
.scan-act .scan-go.tap-arrow { margin-left: auto; }

/* quiz answers */
.quiz-opt.tap { display: inline-flex; align-items: center; justify-content: space-between; gap: .6em; }
.quiz-opt.tap:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(242,181,74,.6), 0 0 16px rgba(var(--tap-ember), .3); }

/* recipe rows */
.recipe-row.tap { border-radius: 6px; padding-inline: .6rem; }
.recipe-row.flip .tap-frame { order: 2; }
.recipe-row .tap-frame { border-radius: var(--r-sm, 2px); box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.recipe-row .tap-frame > img { box-shadow: none; }
.gift-who-item.tap:hover img, .lineup-jar.tap:hover img { filter: drop-shadow(0 0 16px rgba(var(--tap-ember), .45)) drop-shadow(0 16px 22px rgba(0,0,0,.25)); }

/* ── tiles: lift with a shadow and a thin gold edge glow ─────────────────────────────────────── */
.tap-tile:hover, .tap-tile:focus-visible { transform: translateY(-3px); }
.tap-tile .tap-frame { box-shadow: 0 0 0 1px rgba(242,181,74,0); transition: box-shadow .22s ease; }
.tap-tile:hover .tap-frame, .tap-tile:focus-visible .tap-frame { box-shadow: 0 0 0 1px rgba(242,181,74,.75), 0 0 22px rgba(var(--tap-ember), .35), 0 16px 30px -12px rgba(0,0,0,.5); }
.tap-tile:hover :is(h3, strong), .tap-tile:focus-visible :is(h3, strong) { color: var(--tap-gold); }
.gift-who-item.tap .tap-arrow, .lineup-jar.tap .tap-arrow { margin-top: .5rem; margin-left: 0; }

/* ── pictures: zoom inside their own frame + a corner label ───────────────────────────────────── */
.tap-frame { position: relative; display: block; overflow: hidden; border-radius: inherit; }
.tap-frame > img { display: block; transition: transform .45s var(--tap-ease) !important; }
.tap:hover .tap-frame > img, .tap:focus-visible .tap-frame > img { transform: scale(1.04) !important; }
.tap-chip { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; padding: .45em .8em; border-radius: 999px;
  font: 700 .72rem/1 'Lato', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFF4E4;
  background: rgba(26,15,6,.72); border: 1px solid rgba(242,181,74,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .9; transform: translateY(0); transition: background-color .2s ease, color .2s ease, opacity .2s ease; pointer-events: none; }
.tap:hover .tap-chip, .tap:focus-visible .tap-chip { background: linear-gradient(180deg, #FF8C2A, #E2560E); border-color: #FFB060; color: #fff; opacity: 1; }
.tap-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,236,200,.28) 50%, rgba(255,255,255,0) 65%); transform: translateX(-120%); }
.tap-shine .tap-frame::after { animation: tapShine 1.4s ease .2s 1 both; }
@keyframes tapShine { to { transform: translateX(120%); } }

/* videos: the gold play button is always on show */
.show-photo .show-open, .show-photo .show-play { opacity: 1 !important; visibility: visible !important; }

/* ── first time a group scrolls into view: its rows light up one after another, once ─────────── */
.tap-sweep { animation: tapSweep 1.1s ease both; }
@keyframes tapSweep {
  0%   { box-shadow: inset 0 0 0 0 rgba(var(--tap-ember), 0); }
  35%  { box-shadow: inset 3px 0 0 rgba(var(--tap-ember), .95), 0 0 22px rgba(var(--tap-ember), .35); }
  100% { box-shadow: inset 0 0 0 0 rgba(var(--tap-ember), 0); }
}
.tap-tile.tap-sweep { animation-name: tapSweepTile; }
@keyframes tapSweepTile { 0% { filter: none; } 35% { filter: drop-shadow(0 0 14px rgba(var(--tap-ember), .55)) brightness(1.06); } 100% { filter: none; } }
.sc-tab.tap.is-active.tap-sweep { animation: none; }

/* ── words that are links inside paragraphs: gold underline that thickens and glows ─────────── */
:is(section, article, .faq, .recipe-body, .privacy-body) p a:not([class]),
:is(section, article) li a:not([class]), details p a:not([class]) {
  color: var(--tap-gold); text-decoration: underline; text-decoration-color: rgba(242,181,74,.55); text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, text-decoration-thickness .2s ease, text-shadow .2s ease; }
:is(section, article, .faq, .recipe-body, .privacy-body) p a:not([class]):hover,
:is(section, article) li a:not([class]):hover, details p a:not([class]):hover {
  text-decoration-color: var(--tap-gold); text-decoration-thickness: 2px; text-shadow: 0 0 10px rgba(var(--tap-ember), .45); }
.light :is(section, article, .faq) p a:not([class]), .light p a:not([class]) { color: #A8620E; text-decoration-color: rgba(168,98,14,.5); }
.row-recipe, .recipe-more { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(242,181,74,.45); text-underline-offset: 4px; }
.row-recipe:hover, .recipe-more:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* FAQ questions open/close: same hand cursor, gold arrow that turns */
details > summary { cursor: pointer; }
details > summary:hover { color: var(--tap-gold); }
details > summary:focus-visible { outline: 2px solid var(--tap-gold); outline-offset: 4px; }

/* Blends menu: the section you are in = gold frame + fire bar on its left */
.blends-subnav a.active { color: var(--tx); border-color: rgba(242,181,74,.85) !important; box-shadow: inset 3px 0 0 #FF6A1F; }
.blends-subnav a:hover { box-shadow: 0 0 12px rgba(var(--tap-ember), .3); }

/* ── phones (no hover): the arrow and a faint edge glow are always on; taps flash ───────────── */
@media (hover: none) {
  .tap-arrow { color: #1A0F06; background: var(--tap-gold); border-color: var(--tap-gold); }
  .tap-row { box-shadow: inset 2px 0 0 rgba(var(--tap-ember), .45); }
  .sc-tab.tap.is-active { box-shadow: inset 0 0 0 1px rgba(242,181,74,.85), inset 4px 0 0 #FF6A1F; }
  .tap-tile .tap-frame { box-shadow: 0 0 0 1px rgba(242,181,74,.4); }
  .tap-chip { opacity: 1; }
  .tap { min-height: 44px; }
  .tap:active { background-color: rgba(var(--tap-ember), .1); }
}

@media (prefers-reduced-motion: reduce) {
  .tap, .tap-arrow, .tap-frame > img { transition: none !important; }
  .tap-sweep, .tap-shine .tap-frame::after { animation: none !important; }
  .tap:hover, .tap-row:hover, .tap-tile:hover { transform: none; }
}

/* ══ PHONES & TABLETS (2026-10-12, Chad: "mobile version is not formatted for all devices, iPhones etc ... all mobile and iPad").
   Computers are untouched: every rule below only applies on touch screens or under 881px wide. ══ */

/* Shelf + holiday tabs laid out in a row (phones, iPads, phones on their side): the gold › moves under the words
   instead of eating the right side of each tab. Before, it reserved ~44px of a ~63px tab, so the names were broken
   letter by letter ("Th e Cu re All") and the arrow sat on top of the words on iPads. */
@media (max-width: 880px), (hover: none) and (pointer: coarse) and (max-width: 999.98px), (hover: none) and (pointer: coarse) and (max-aspect-ratio: 1399/1000) {
  .sc-tabs { gap: 10px; }
  .sc-tab.tap { padding: var(--s-3) .45rem calc(1.6em + .95rem) .55rem; }
  .sc-tab.tap .tap-arrow.is-end { top: auto; right: auto; bottom: .5rem; left: .55rem; transform: none; }
  .sc-tab.tap:hover .tap-arrow.is-end, .sc-tab.tap:focus-visible .tap-arrow.is-end { transform: translateX(3px); }
  .sc-tab strong { overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .sc-tabs:not(:has(.sc-tab:nth-child(4))) .sc-tab strong { font-size: clamp(.8125rem, 3.5vw, 1.0625rem); }
  .sc-tabs:has(.sc-tab:nth-child(4)) { gap: 6px; }
  .sc-tabs:has(.sc-tab:nth-child(4)) .sc-tab.tap { padding-left: .35rem; padding-right: .2rem; }
  .sc-tabs:has(.sc-tab:nth-child(4)) .sc-tab.tap .tap-arrow.is-end { left: .35rem; }
}
/* narrow phones (under 375px): the five shelf tabs go 3 + 2 so every name fits whole */
@media (max-width: 374.98px) {
  .sc-tabs:has(.sc-tab:nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
}

/* Home "Proof, plated." pictures, every screen (computers added 2026-10-12, Chad: yes): the tap frame around each picture
   is a <span>, so it was caught by the caption rule (.strip-item span = small, invisible label pinned to the corner) and
   the four pictures never showed. */
.strip-item > .tap-frame { position: relative; left: auto; bottom: auto; z-index: auto; opacity: 1; transform: none; }

/* iPads and small windows (600-880px): the footer uses the width — brand across the top, link columns side by side
   (it was one long column with the right half empty) */
@media (min-width: 600px) and (max-width: 880px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ══ PHONES & TABLETS (2026-10-12, Chad: "formatted correctly for all mobile and iPad"). Computers untouched. ══ */
/* Shelf + holiday pictures on a phone held sideways: the picture was sized to leave 340px under it for words, which
   is more than the whole screen, so it shrank to nothing and only the tabs showed. Now it fills the screen height. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .sc-stage, .sc-tabs { width: min(100%, calc((100svh - var(--nav-h) - 1.5rem) * 1.905)); max-width: none; }
}
/* Order page quick picks on narrow phones (under 400px): the three choices stack, one per row, so the names fit whole */
@media (max-width: 399.98px) {
  .rx-bundles { grid-template-columns: minmax(0, 1fr); }
  .rx-bundle { min-width: 0; }
}
/* Gifts holiday tabs on narrow phones (under 375px): "Thanksgiving" fits whole */
@media (max-width: 374.98px) {
  .sc-tabs:not(:has(.sc-tab:nth-child(4))) .sc-tab.tap { padding-left: .35rem; padding-right: .2rem; }
  .sc-tabs:not(:has(.sc-tab:nth-child(4))) .sc-tab.tap .tap-arrow.is-end { left: .35rem; }
  .sc-tabs:not(:has(.sc-tab:nth-child(4))) .sc-tab strong { font-size: .75rem; }
}

/* ── PHONES HELD SIDEWAYS (2026-10-12, Chad: "formatted correctly for all mobile"). Before, the tall phone picture was
   squeezed into a short wide strip and the glass panel slid up over the logo, hiding half of it. Now it reads like the
   computer design: the wide fire picture across the screen, the logo on the left, the same glass panel on the right,
   at phone-size words and 44px buttons. Touch screens only; computers and upright phones are untouched. ── */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .hs-narrow {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; column-gap: clamp(1rem, 3vw, 2rem);
    min-height: 100svh; padding: calc(var(--nav-h, 64px) + .6rem) max(16px, env(safe-area-inset-right)) .9rem max(16px, env(safe-area-inset-left));
    background: #140b05 url(/assets/home/home-bg-1600.jpg?v=1) 50% 55% / cover no-repeat;
  }
  .hn-pic { position: static; height: auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .hn-bg { display: none; }
  .hn-logo { position: static; transform: none; width: min(100%, calc((100svh - var(--nav-h, 64px) - 2rem) * 1.25)); }
  .hn-card { margin: 0; max-width: none; padding: 14px 18px 14px; }
  .hn-title { margin-top: 8px; font-size: clamp(1.8rem, 9svh, 2.6rem); }
  .hn-tag { margin: 6px 0 10px; font-size: clamp(.875rem, 3.9svh, 1.05rem); line-height: 1.3; }
  .hn-card { min-width: 0; }
  .hn-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hn-btn { min-height: 44px; white-space: normal; text-align: center; line-height: 1.15; font-size: clamp(.66rem, 1.45vw, .82rem); }
  .hn-tcopy { min-width: 0; }
  .hn-tcopy small { white-space: normal; }
  .hn-ticket { margin-top: 8px; padding: 6px 14px; }
  .hn-play { width: 40px; height: 40px; }
  .hn-tcopy strong { font-size: 1.15rem; }
}
/* narrow phones (under 375px): the small line on the film button wraps instead of running off the screen */
@media (max-width: 374.98px) { .hn-tcopy small { white-space: normal; } }

/* ══ PHONES HELD SIDEWAYS (2026-10-12, Chad: "formatted correctly for all mobile"). Touch screens only; computers untouched. ══
   Page openings with Chad's warm header art (Blends, Recipes, Pricing, Our Story, Contact, Order, Popcorn recipe): two older
   rules fought, so the picture got squeezed into a small box in the top-right corner. Sideways phones now get the computer
   layout: the panorama whole and edge to edge, the headline in the picture's quiet left part. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .page-hero.has-img.warm {
    --pad: clamp(1rem, 5vw, 3rem);
    --hero-col: calc(var(--q, .34) * 100vw - var(--pad) - 1.5vw);
    display: grid; grid-template-columns: minmax(0, var(--hero-col)) 1fr; align-content: center; align-items: start;
    height: auto; min-height: calc(var(--nav-h) + min(100vw / var(--warm-ar), 100svh - var(--nav-h) - 1rem));
    padding: calc(var(--nav-h) + .75rem) 0 .75rem var(--pad);
  }
  .page-hero.has-img.warm > :not(.hero-grid-lines) { grid-column: 1; grid-row: auto; max-width: var(--hero-col); padding: 0; text-shadow: 0 2px 20px rgba(28,14,6,.55); }
  .page-hero.has-img.warm h1 { font-size: min(clamp(1.75rem, 8svh, 2.6rem), calc(var(--hero-col) / 6.2)); }
  .page-hero.has-img.warm p:not(.page-hero-eyebrow) { margin-top: .5rem; font-size: .875rem; line-height: 1.45; max-width: 40ch; }
  .page-hero.has-img.warm::after {
    position: absolute; display: block; grid-row: auto; grid-column: auto; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    width: auto; height: auto; min-height: 0; max-height: none; aspect-ratio: auto; margin: 0; transform: none !important;
    background:
      linear-gradient(90deg, rgba(30,15,6,.66) 0, rgba(30,15,6,.46) calc(var(--q, .34) * 70%), rgba(30,15,6,0) calc(var(--q, .34) * 100% + 6%)),
      linear-gradient(0deg, rgba(22,12,6,.55) 0, rgba(22,12,6,0) 22%),
      var(--hero-img) 100% 50% / cover no-repeat;
    -webkit-mask-image: none; mask-image: none;
  }
  /* Blends: jar beside its words (it was shrunk to a 140px sliver above them) */
  .product-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1rem, 4vw, 2.5rem); align-items: start; }
  .product-row-media img { max-height: calc(100svh - var(--nav-h) - 3rem); }
}

/* ── PHONES & TABLETS: the market picture and its price list (2026-10-12, Chad: "on mobile this picture is not showing
   up correctly"). Under 881px only; computers are untouched. (Lives here, not in pricing.css, so the fix ships in one file; "body" makes it outrank pricing.css.)
   - The picture runs edge to edge across the screen, whole, at its own 16:9 shape (never cropped), with the dark
     panel straight under it. Before, it sat small inside two cream frames (the page's side margin plus the frame
     every section gets), so on a phone it was a thumbnail in a box.
   - Every price stays on screen. Before, the longest note ("$8 with any other purchase") would not wrap, which
     stretched the price list wider than the panel and pushed all four prices off the right edge, where they were cut. ── */
@media (max-width: 880px) {
  body #counter .market-feature { padding: 0; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; }
  body #counter .mf-panel { padding-inline: var(--gutter); }
  body #counter .mf-prices { grid-template-columns: minmax(0, 1fr); }
  body #counter .mf-prices > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: baseline; }
  body #counter .mf-prices dt { grid-column: 1; grid-row: 1; }
  body #counter .mf-prices dd { display: contents; }
  body #counter .mf-prices dd [data-price] { grid-column: 2; grid-row: 1; text-align: right; }
  body #counter .mf-prices dd small { grid-column: 1 / -1; grid-row: 2; text-align: right; white-space: normal; }
}

/* 2026-10-12 · reviews easier to find: jump button under the Testimony Wall title */
.review-jump { margin: var(--s-4, 1rem) 0 0; }
.review-jump .btn-outline { min-height: 48px; }
#leave-review { scroll-margin-top: calc(var(--nav-h, 64px) + 1rem); }

/* 2026-10-12 · Blends heat meter: Colin's real label close-ups on each tier (whole photo, never cropped) */
.heat-tier-pic { display: block; margin: 0 0 var(--s-3, .75rem); }
.heat-tier-photo { display: block; width: 100%; height: auto; border-radius: var(--r-sm, 6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
@media (max-width: 880px) {
  .heat-tier { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: var(--s-4, 1rem); align-items: center; }
  .heat-tier-pic { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .heat-tier-name, .heat-tier-blend, .heat-tier-note { grid-column: 2; }
}

/* 2026-10-12 · Google reviews: buttons sit beside the site review button */
.review-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.review-jump .review-g { gap: .55rem; }
.review-jump .review-g img { width: 22px; height: 22px; display: block; flex: none; }
.review-g-after { display: inline-block; margin-left: .25rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* 2026-10-12 · Home "Google Reviews" band — high on the page, big title, one obvious button */
.greviews { padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.greviews-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter, 20px); }
.greviews-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45em; }
.greviews-title .greviews-g { width: .95em; height: .95em; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18)); }
.greviews-sub { font-size: var(--fs-lede, 1.125rem); color: var(--tx-muted); margin: var(--s-3, .75rem) auto 0; max-width: 34rem; }
.greviews-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s-4, 1rem); margin-top: var(--s-5, 1.5rem); }
.greviews-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 60px; padding: 0 2.2rem; border: 2px solid var(--ember, #C84B1A); border-radius: var(--r-sm, 6px);
  color: var(--ember, #C84B1A); background: transparent; text-decoration: none;
  font: 700 var(--fs-meta, .9375rem) / 1 'Lato', sans-serif; letter-spacing: var(--track-btn, .14em); text-transform: uppercase;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.greviews-btn img { width: 28px; height: 28px; flex: none; }
.greviews-btn:hover, .greviews-btn:focus-visible { background: var(--ember, #C84B1A); color: #fff; box-shadow: 0 0 22px rgba(224, 96, 28, .45); }
.greviews-btn:focus-visible { outline: 3px solid var(--ember-bright, #FF8A3D); outline-offset: 3px; }
.greviews-alt { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.greviews-label { margin: var(--s-7, 3rem) 0 0; font: 700 var(--fs-meta, .875rem) / 1 'Lato', sans-serif; letter-spacing: var(--track-label, .2em); text-transform: uppercase; color: var(--accent); }
.greviews-list { text-align: left; margin-top: var(--s-4, 1rem); }
@media (max-width: 480px) { .greviews-btn { width: 100%; padding: 0 1rem; } }
.greviews-list:has(> .review-card:only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }