/* =====================================================================
   Site Style "shop" (runviet-wp 4.39.0, v2 layout 4.40.0) -- an official-store product
   page. Loaded after main.css on every page when site_style = shop; everything is scoped
   under body.rv-style-shop.

   Colour discipline: the accent family comes ONLY from the site's colour options
   (inc/site-style.php maps them to --st-*): primary -> the price band, badges, store card
   and icons; CTA -> the buy button. Everything else is neutral. Fixed on purpose: price
   red, star gold, neutral greys, review avatar pastels.
   Type scale: title 17-18/600, price 30-34/800, body 16-17/400 near-black, meta 13-14
   grey (>= 4.5:1 on white and on the grey card).
   Motion: nothing starts hidden or off-screen. Only press states, the sheet slide, tab
   underline and chevron turns -- all off under prefers-reduced-motion.
   ===================================================================== */

body.rv-style-shop {
  --sp-brand: var(--st-brand);
  --sp-band-a: color-mix(in srgb, var(--st-brand) 58%, #000);
  --sp-band-m: color-mix(in srgb, var(--st-brand) 82%, #000);
  --sp-band: linear-gradient(105deg, var(--sp-band-a) 0%, var(--sp-band-m) 52%, var(--sp-brand) 100%);
  --sp-brand-ink: color-mix(in srgb, var(--st-brand) 82%, #000);
  --sp-brand-tint: color-mix(in srgb, var(--st-brand) 10%, #fff);
  --sp-brand-soft: color-mix(in srgb, var(--st-brand) 5%, #fff);
  --sp-brand-line: color-mix(in srgb, var(--st-brand) 30%, #fff);
  --sp-tint: color-mix(in srgb, var(--st-brand) 6%, #fff);
  --sp-cta: var(--st-cta);
  --sp-cta-dark: color-mix(in srgb, var(--st-cta) 70%, #000);
  --sp-on-cta: var(--st-on-cta);
  /* Text is neutral near-black on purpose: a site whose text / heading colour is its brand
     green would turn every line of copy into an accent. The brand stays on the accents. */
  --sp-heading: #17191C;
  --sp-ink: #1F2124;
  --sp-ink-2: #3E4246;
  --sp-ink-3: #62666B;
  --sp-price: #D0021B;
  --sp-price-tint: #FDEEEF;
  --sp-gold: #F5A623;
  --sp-star-off: #DCDFE3;
  --sp-line: #E6E8EB;
  --sp-page: #EFF0F2;
  --sp-card: #F5F6F7;
  --sp-r: 8px;
  --sp-r-sm: 6px;
  --sp-col: 480px;
  --sp-head: 52px;
  --sp-tabs: 44px;
  --rv-illo-fill: var(--sp-brand-tint);
  --rv-illo-paper: #fff;
  font-family: var(--st-font) !important;
}
body.rv-style-shop.single-health_product {
  background: var(--sp-page) !important;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- page shell */
.st-page {
  max-width: var(--sp-col);
  margin: 0 auto;
  background: var(--sp-page);
  color: var(--sp-ink);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
}
.st-page h1, .st-page h2, .st-page h3, .st-page h4 {
  font-family: inherit;
  letter-spacing: normal;
  color: var(--sp-heading);
}
.st-page p { margin: 0; }
.st-page em { font-style: normal; color: var(--sp-brand-ink); }
.st-page img { max-width: 100%; }
.st-page button { font: inherit; color: inherit; cursor: pointer; }
.st-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-page .rv-illo, .st-page .rv-icon { width: 24px; height: 24px; flex: none; }
.st-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-anchor { display: block; height: 0; }
.st-page [id] { scroll-margin-top: calc(var(--sp-head) + var(--sp-tabs) + 8px); }

/* One white section per block, separated by 8px of the grey page. */
.st-sec { background: #fff; padding: 16px; margin-top: 8px; }
.st-page .st-sec-h { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--sp-heading); }
.st-sh-count { color: var(--sp-ink-3); font-weight: 400; }

/* Section header pattern: title left, "see all ›" right. */
.st-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; min-height: 28px; }
.st-sh-more { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 10px 0; margin: -10px 0; font-size: 14px; font-weight: 500; color: var(--sp-ink-3); text-decoration: none; }
.st-sh-more .st-ic { width: 16px; height: 16px; }

/* Motion rule: images are visible on first paint -- no lazy fade-in from opacity 0. */
body.rv-style-shop img[loading="lazy"] { opacity: 1; transition: none; }
body.rv-style-shop.single-health_product .rv-progress { display: none; }

/* Phones: the gallery IS the first screen. The site header and announcement bar step
   aside on product pages; the solid shop bar (section tabs) takes over after the gallery. */
@media (max-width: 1023px) {
  body.rv-style-shop.single-health_product .rv-announce,
  body.rv-style-shop.single-health_product .rv-header { display: none !important; }
}
body.rv-style-shop.single-health_product .rv-header { position: relative; top: auto; }

/* ---------------------------------------------------------------- 1. sticky shop bar */
.st-topbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--sp-col)); z-index: 70;
  background: #fff; box-shadow: 0 1px 0 var(--sp-line), 0 2px 10px rgba(0,0,0,.06);
  visibility: hidden; opacity: 0;
  transition: opacity .2s, visibility 0s linear .2s;
}
.st-topbar.solid { visibility: visible; opacity: 1; transition: opacity .2s; }
@media (min-width: 601px) { .admin-bar .st-topbar { top: 46px; } }
@media (min-width: 783px) { .admin-bar .st-topbar { top: 32px; } }
.st-topbar-row { height: var(--sp-head); display: flex; align-items: center; gap: 2px; padding: 0 4px; }
.st-tb-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: var(--sp-ink); display: grid; place-items: center; padding: 0;
  text-decoration: none;
}
.st-tb-btn .st-ic { width: 22px; height: 22px; }
.st-tb-title { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sp-heading); padding-left: 2px; }
.st-tabs { display: flex; height: var(--sp-tabs); border-top: 1px solid var(--sp-line); }
.st-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--sp-ink-3); text-decoration: none; position: relative; white-space: nowrap; padding: 0 4px; }
.st-tabs a::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--sp-brand); transform: scaleX(0); transition: transform .2s; }
.st-tabs a.on { color: var(--sp-brand-ink); font-weight: 700; }
.st-tabs a.on::after { transform: scaleX(1); }
html:not(.st-js) .st-topbar { display: none; }
html:not(.st-js) [data-st-share], html:not(.st-js) [data-st-open-sheet]:not(a), html:not(.st-js) [data-st-info] .st-go { display: none; }

/* ---------------------------------------------------------------- 2. gallery */
.st-gallery-wrap { position: relative; background: #fff; }
.st-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.st-gallery::-webkit-scrollbar { display: none; }
/* v4.43.4: the image is taken out of flow so a non-square file (a tall packshot) can never
   stretch the square slide -- aspect-ratio is only a preferred size and grew to fit the
   image's own height (780px slide at 390px wide). Contain, not cover: a tall jar is shown
   whole instead of cropped. */
.st-gallery figure { position: relative; margin: 0; flex: 0 0 100%; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; background: #f6f6f6; display: grid; place-items: center; }
.st-gallery figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.st-gallery-ph { width: 64px; height: 64px; color: var(--sp-ink-3); }
.st-gallery-scrim { position: absolute; left: 0; right: 0; top: 0; height: 96px; background: linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,0)); pointer-events: none; }
.st-gallery-tools { position: absolute; top: calc(4px + env(safe-area-inset-top)); left: 4px; right: 4px; display: flex; gap: 0; pointer-events: none; }
.admin-bar .st-gallery-tools { top: 4px; }
.st-gallery-tools > * { pointer-events: auto; }
.st-gallery-tools-gap { flex: 1; }
.st-ov-btn { width: 48px; height: 48px; border: 0; padding: 0; background: none; display: grid; place-items: center; color: #fff; text-decoration: none; }
.st-ov-btn > span { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.34); display: grid; place-items: center; }
.st-ov-btn .st-ic { width: 20px; height: 20px; }
.st-ov-btn:active > span { background: rgba(0,0,0,.5); }
.st-gallery-count { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; letter-spacing: .02em; line-height: 1.6; }
.st-thumbs { display: none; }

/* ---------------------------------------------------------------- 3. official price band */
.st-band-price {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 68px; padding: 10px 16px; background: var(--sp-band); color: #fff;
  --st-shield-tick: var(--sp-band-m);
}
.st-bp-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-bp-now { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.st-bp-now small { font-size: 18px; font-weight: 800; margin-right: 1px; }
.st-bp-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.st-bp-was { font-size: 14px; line-height: 1.2; color: rgba(255,255,255,.78); text-decoration: line-through; }
.st-bp-off { display: inline-block; background: #fff; color: var(--sp-price); font-size: 12.5px; font-weight: 800; line-height: 1.4; padding: 0 5px; border-radius: 3px; }
.st-bp-off[hidden] { display: none; }
.st-bp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex: 0 1 auto; min-width: 0; }
.st-bp-mark { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.st-bp-mark .st-ic { width: 16px; height: 16px; color: #fff; }
.st-bp-sold { font-size: 13px; line-height: 1.2; color: rgba(255,255,255,.88); }

/* ---------------------------------------------------------------- 4. buy box: title + trust row */
.st-buybox { margin-top: 0; padding-top: 14px; }
.st-page .st-title-h { margin: 0; font-size: 18px; line-height: 1.42; font-weight: 600; color: var(--sp-heading); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.st-badge-official { display: inline-block; vertical-align: 2px; margin-right: 2px; padding: 1px 5px; border-radius: 3px; background: var(--sp-band-m); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.st-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 17px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--sp-ink-3); text-decoration: none; overflow: hidden; }
.st-tr-item { position: relative; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* The divider sits in the gap left of each item; at the start of a wrapped line it falls
   outside the row and is clipped, so a wrap never opens a line with a stray bar. */
.st-tr-item + .st-tr-item::before { content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 13px; margin-top: -6.5px; background: #D5D8DC; }
.st-tr-item b { color: var(--sp-ink); font-weight: 700; }
.st-tr-dim { color: var(--sp-ink-3); }
.st-tr-star { width: 15px; height: 15px; fill: var(--sp-gold); stroke: none; }
.st-tr-orig { color: var(--sp-brand-ink); font-weight: 600; }
.st-tr-orig .st-ic { width: 16px; height: 16px; }
.st-short-desc { margin: 10px 0 0; color: var(--sp-ink-2); font-size: 15.5px; line-height: 1.5; }
.st-js .st-short-desc .st-short-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.st-js .st-short-desc.open .st-short-txt { display: block; }
.st-more-link { border: 0; background: none; padding: 4px 0; color: var(--sp-brand-ink); font-weight: 600; font-size: 14.5px; min-height: 32px; }

.st-stars { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.st-stars-row { display: inline-flex; gap: 1px; }
.st-stars-row svg { display: block; flex: none; width: var(--s, 17px); height: var(--s, 17px); fill: currentColor; stroke: none; }
.st-stars-bg { color: var(--sp-star-off); }
.st-stars-fg { position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; color: var(--sp-gold); white-space: nowrap; }

/* ---------------------------------------------------------------- 5. discount ticket */
.st-ticket { display: flex; align-items: stretch; margin-top: 12px; min-height: 40px; color: var(--sp-price); font-size: 14px; line-height: 1.3; }
.st-ticket > span { display: flex; align-items: center; gap: 6px; }
.st-ticket-main {
  flex: 1; min-width: 0; padding: 8px 12px;
  background:
    radial-gradient(circle at 100% 0, transparent 6px, var(--sp-price-tint) 6.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 6px, var(--sp-price-tint) 6.5px) bottom / 100% 51% no-repeat;
  border-radius: 6px 0 0 6px;
}
.st-ticket-main b { font-weight: 800; font-size: 15px; }
.st-ticket-main .st-ic { width: 17px; height: 17px; }
.st-ticket-stub {
  flex: none; padding: 8px 12px; font-weight: 600; font-size: 13px;
  border-left: 1.5px dashed color-mix(in srgb, var(--sp-price) 45%, #fff);
  background:
    radial-gradient(circle at 0 0, transparent 6px, var(--sp-price-tint) 6.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent 6px, var(--sp-price-tint) 6.5px) bottom / 100% 51% no-repeat;
  border-radius: 0 6px 6px 0;
}
.st-ticket-stub .st-ic { width: 15px; height: 15px; stroke-width: 2.8; }

/* ---------------------------------------------------------------- 6. guarantee card */
.st-guarantee { margin-top: 12px; background: var(--sp-card); border-radius: var(--sp-r); padding: 0 12px; }
.st-grow { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 11px 0; min-height: 54px; border: 0; border-bottom: 1px solid var(--sp-line); background: none; text-align: left; color: var(--sp-ink); }
.st-grow:last-child { border-bottom: 0; }
.st-grow-ic { width: 22px; height: 22px; color: var(--sp-brand-ink); }
.st-grow-main { display: block; min-width: 0; }
.st-grow-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.st-grow-pr { color: var(--sp-price); font-weight: 700; }
.st-grow-v { display: block; font-size: 13.5px; line-height: 1.4; color: var(--sp-ink-3); margin-top: 1px; }
.st-grow .st-go { width: 18px; height: 18px; color: var(--sp-ink-3); }

/* ---------------------------------------------------------------- 7. key facts grid */
.st-kf { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border: 1px solid var(--sp-line); border-radius: var(--sp-r); }
.st-kf-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 4px 9px; min-width: 0; }
.st-kf-cell + .st-kf-cell { border-left: 1px solid var(--sp-line); }
.st-kf-ic { display: grid; place-items: center; width: 32px; height: 32px; color: var(--sp-brand-ink); }
.st-kf-ic .rv-illo, .st-kf-ic .rv-icon { width: 30px; height: 30px; }
.st-kf-cell b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--sp-ink); overflow-wrap: anywhere; }
.st-kf-cell small { font-size: 12.5px; line-height: 1.25; color: var(--sp-ink-3); }

/* desktop-only buy button in the buy box */
.st-buybox-cta { display: none; }

/* ---------------------------------------------------------------- 8. official store card + rail */
.st-store-card { border: 1.5px solid var(--sp-band-m); border-radius: var(--sp-r); overflow: hidden; background: #fff; }
.st-store-strip { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--sp-band); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; --st-shield-tick: var(--sp-band-m); }
.st-store-strip .st-ic { width: 15px; height: 15px; }
.st-store { display: flex; align-items: center; gap: 12px; padding: 12px; }
.st-store-logo { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--sp-line); background: #fff; object-fit: contain; padding: 5px; flex: none; }
/* A real logo keeps its shape (wordmarks are often 3:1): a white tile, not a tiny circle. */
img.st-store-logo { width: auto; min-width: 56px; max-width: 120px; height: 52px; border-radius: var(--sp-r-sm); padding: 6px 8px; }
.st-store-mono { display: grid; place-items: center; padding: 0; background: var(--sp-brand-tint); color: var(--sp-brand-ink); font-weight: 700; font-size: 24px; border-color: var(--sp-brand-line); }
.st-store-main { flex: 1; min-width: 0; }
.st-store-name { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--sp-heading); }
.st-store-tick { width: 18px; height: 18px; color: var(--sp-brand); }
.st-store-sub { color: var(--sp-ink-3); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.st-store-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 12px; border-top: 1px solid var(--sp-line); padding: 10px 0; }
.st-store-stats div { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 4px; text-align: center; line-height: 1.3; }
.st-store-stats div + div { border-left: 1px solid var(--sp-line); }
.st-store-stats .st-ic { width: 15px; height: 15px; color: var(--sp-brand-ink); }
.st-store-stats .st-ss-star { fill: var(--sp-gold); stroke: none; color: var(--sp-gold); }
.st-store-stats b { font-size: 15px; font-weight: 700; color: var(--sp-ink); }
.st-store-stats span { grid-column: 1 / -1; font-size: 12.5px; color: var(--sp-ink-3); }
.st-btn-solid { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 12px 12px; min-height: 44px; border-radius: var(--sp-r-sm); background: var(--sp-brand); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.st-btn-solid .st-ic { width: 18px; height: 18px; }
.st-btn-solid:active { background: var(--sp-band-m); }

.st-rail-wrap { margin-top: 18px; }
.st-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3.25); gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; }
.st-rail::-webkit-scrollbar { display: none; }
.st-rail-card { display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; text-decoration: none; color: var(--sp-ink); min-width: 0; }
.st-tint-im { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--sp-tint); border-radius: var(--sp-r-sm); overflow: hidden; }
.st-tint-im img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.st-rail-nm { font-size: 13px; line-height: 1.3; color: var(--sp-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.st-rail-pr { font-size: 15px; font-weight: 800; color: var(--sp-price); line-height: 1.2; }

/* ---------------------------------------------------------------- 9. spec table */
.st-spec { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sp-line); border-radius: var(--sp-r); overflow: hidden; font-size: 15px; line-height: 1.45; }
.st-spec th, .st-spec td { padding: 10px 12px; vertical-align: top; text-align: left; }
.st-spec tr + tr th, .st-spec tr + tr td { border-top: 1px solid var(--sp-line); }
.st-spec th { width: 36%; background: var(--sp-card); color: var(--sp-ink-3); font-weight: 400; font-size: 14px; border-right: 1px solid var(--sp-line); }
.st-spec td { color: var(--sp-ink); font-weight: 600; }

/* ---------------------------------------------------------------- 10. description */
.st-desc-body { position: relative; }
.st-js .st-desc-body.is-collapsed { max-height: 820px; overflow: hidden; }
.st-js .st-desc-body.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); pointer-events: none; }
.st-js .st-desc-body.is-collapsed:has(:target) { max-height: none; }
.st-js .st-desc-body.is-collapsed:has(:target)::after { display: none; }
.st-desc-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 46px; margin-top: 4px; border: 0; border-top: 1px solid var(--sp-line); background: #fff; color: var(--sp-brand-ink); font-weight: 600; font-size: 15px; }
.st-desc-more .st-ic { width: 18px; height: 18px; transition: transform .2s; }
.st-desc-more[aria-expanded="true"] .st-ic { transform: rotate(180deg); }
.st-desc-img { margin: 18px 0; }
.st-desc-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sp-r); background: #f4f4f4; }
.st-page .st-desc-body h3 { font-size: 17px; line-height: 1.4; margin: 24px 0 10px; font-weight: 700; }
.st-page .st-desc-body > :first-child { margin-top: 0; }
.st-page .st-desc-body p { margin: 0 0 12px; }
.st-checks { list-style: none; margin: 0 0 6px; padding: 0; }
.st-checks li { display: flex; gap: 10px; padding: 5px 0; align-items: flex-start; }
.st-li-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--sp-brand-ink); }
.st-li-ic .st-ic { width: 21px; height: 21px; }
.st-li-ic .rv-illo, .st-li-ic .rv-icon { width: 26px; height: 26px; }
.st-audience .st-li-ic { width: 24px; height: 26px; }
.st-checks li.st-neg .st-li-ic { color: var(--sp-price); }

.st-usp { border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 14px; margin-bottom: 10px; }
.st-page .st-usp h4 { margin: 0 0 6px; font-size: 16px; line-height: 1.4; font-weight: 700; }
.st-page .st-usp p { margin: 0; color: var(--sp-ink-2); font-size: 15.5px; }
.st-ing-dots { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 12px; }
.st-ing-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; text-align: center; font-size: 12.5px; line-height: 1.2; color: var(--sp-ink-3); }
.st-ing-dot img, .st-ing-dot-ph { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sp-brand-tint); background: #f3f3f3; }
.st-ing-dot-ph { display: grid; place-items: center; color: var(--sp-brand-ink); }

.st-recog { background: var(--sp-card); border-radius: var(--sp-r); padding: 16px; margin-top: 22px; }
.st-recog-lbl { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-ink-2); background: #fff; border: 1px solid var(--sp-line); padding: 2px 8px; border-radius: 3px; }
.st-page .st-recog h3 { margin: 10px 0 8px; }
.st-recog ul { list-style: none; margin: 6px 0 12px; padding: 0; }
.st-recog li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #DADDE1; align-items: flex-start; }
.st-recog li:last-child { border-bottom: 0; }
.st-recog .st-li-ic { color: var(--sp-ink-2); --rv-illo-fill: #E8EAED; }
.st-page .st-reframe { margin: 0; padding: 12px 14px; background: #fff; border-left: 3px solid var(--sp-brand); border-radius: 0 var(--sp-r-sm) var(--sp-r-sm) 0; color: var(--sp-ink-2); font-size: 15.5px; }

.st-ing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-ing { border: 1px solid var(--sp-line); border-radius: var(--sp-r); overflow: hidden; background: #fff; }
.st-ing img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #f3f3f3; display: block; }
.st-ing-b { padding: 9px 10px 11px; }
.st-ing-t { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--sp-heading); }
.st-ing-l { font-style: italic; color: var(--sp-ink-3); font-size: 13.5px; line-height: 1.3; margin-top: 3px; }
.st-ing-r { display: inline-block; margin-top: 7px; font-size: 12.5px; font-weight: 700; color: var(--sp-brand-ink); background: var(--sp-brand-tint); padding: 2px 7px; border-radius: 3px; line-height: 1.4; }

.st-dose { display: flex; gap: 8px; margin: 0 0 12px; }
.st-dose-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px 10px; border-radius: var(--sp-r); background: var(--sp-brand-soft); border: 1px solid var(--sp-brand-tint); line-height: 1.3; }
.st-dose-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; min-height: 30px; color: var(--sp-brand-ink); margin-bottom: 4px; }
.st-dose-icons .rv-illo, .st-dose-icons .rv-icon { width: 30px; height: 30px; }
.st-dose-cell b { font-size: 15.5px; color: var(--sp-ink); }
.st-dose-cell small { font-size: 13px; color: var(--sp-ink-3); }
.st-steps { list-style: none; margin: 0 0 8px; padding: 0; }
.st-steps li { display: flex; gap: 12px; padding: 8px 0; }
.st-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.st-steps b { display: block; }
.st-steps span:not(.st-n) { color: var(--sp-ink-2); font-size: 15.5px; }
.st-warn { display: flex; gap: 10px; background: #FFF6F3; border: 1px solid #F4D5CB; border-radius: var(--sp-r); padding: 12px 14px; font-size: 15px; line-height: 1.55; color: #5A2A1E; margin-top: 14px; }
.st-warn .st-ic { color: var(--sp-price); width: 20px; height: 20px; margin-top: 2px; }
.st-warn b { display: block; color: var(--sp-price); margin-bottom: 2px; }
.st-page .st-formula-lead { font-weight: 600; }

/* ---------------------------------------------------------------- 11. reviews */
.st-rv-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.st-rv-score { font-size: 34px; font-weight: 800; line-height: 1; color: var(--sp-ink); }
.st-rv-score small { font-size: 15px; color: var(--sp-ink-3); font-weight: 400; margin-left: 1px; }
.st-rv-count { color: var(--sp-ink-3); font-size: 13.5px; margin-top: 4px; }
.st-ugc-h { margin: 2px 0 6px; font-size: 13.5px; color: var(--sp-ink-3); }
.st-ugc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 4px; padding: 0 16px 8px; }
.st-ugc::-webkit-scrollbar { display: none; }
.st-ugc img { flex: 0 0 88px; width: 88px; height: 88px; object-fit: cover; border-radius: var(--sp-r-sm); background: #f4f4f4; }
.st-rv-filters { display: flex; gap: 8px; padding: 4px 0 6px; overflow-x: auto; scrollbar-width: none; }
.st-rv-filters::-webkit-scrollbar { display: none; }
html:not(.st-js) .st-rv-filters, html:not(.st-js) .st-desc-more, html:not(.st-js) .st-rel-more, html:not(.st-js) .st-rv-more, html:not(.st-js) [data-st-rv-all] { display: none; }
.st-fchip { flex: none; min-height: 38px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--sp-line); background: var(--sp-card); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; color: var(--sp-ink); }
.st-fchip .st-ic { width: 14px; height: 14px; fill: var(--sp-gold); stroke: none; }
.st-fchip.on { border-color: var(--sp-brand); color: var(--sp-brand-ink); background: var(--sp-brand-soft); font-weight: 600; }
.st-rv { padding: 14px 0; border-top: 1px solid var(--sp-line); }
.st-rv[hidden] { display: none; }
.st-js .st-rv-list.is-capped .st-rv-extra { display: none; }
.st-rv-top { display: flex; gap: 10px; align-items: flex-start; }
.st-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.st-rv-who { flex: 1; min-width: 0; }
.st-rv-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; margin-bottom: 3px; }
.st-rv-loc { flex: none; font-size: 13px; color: var(--sp-ink-3); line-height: 1.3; }
.st-page .st-rv-q { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--sp-ink); }
.st-rv-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--sp-ink-3); }
.st-rv-tag .st-ic { width: 14px; height: 14px; color: var(--sp-brand-ink); }
.st-rv-empty { color: var(--sp-ink-3); padding: 20px 0; }
.st-rv-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; margin-top: 4px; border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm); background: #fff; color: var(--sp-ink-2); font-size: 15px; font-weight: 500; }
.st-rv-more .st-ic { width: 18px; height: 18px; }
.st-rv-more[hidden] { display: none; }

/* ---------------------------------------------------------------- 12. COD stepper */
.st-stepper { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); position: relative; margin: 4px -4px 0; }
.st-stepper::before { content: ""; position: absolute; top: 23px; left: calc(50% / var(--cols, 4)); right: calc(50% / var(--cols, 4)); height: 2px; background: var(--sp-brand-line); }
.st-stp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 3px 8px; border: 0; background: none; text-align: center; font-size: 13.5px; line-height: 1.3; color: var(--sp-ink-2); min-height: 44px; }
.st-dot { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--sp-brand-line); display: grid; place-items: center; color: var(--sp-brand-ink); position: relative; transition: background .2s, color .2s; }
.st-dot .rv-illo, .st-dot .rv-icon { width: 26px; height: 26px; }
.st-num { position: absolute; top: -4px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--sp-band-m); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.st-js .st-stp.on .st-dot { background: var(--sp-brand); color: #fff; border-color: var(--sp-brand); --rv-illo-fill: rgba(255,255,255,.28); }
.st-js .st-stp.on { color: var(--sp-ink); font-weight: 700; }
.st-step-details { margin-top: 8px; }
.st-page .st-step-detail { background: var(--sp-card); border-radius: var(--sp-r); padding: 12px 14px; font-size: 15.5px; color: var(--sp-ink); margin: 0 0 8px; }
.st-step-detail b { color: var(--sp-brand-ink); }
.st-js .st-step-detail { display: none; margin: 0; }
.st-js .st-step-detail.on { display: block; }

/* ---------------------------------------------------------------- 13. FAQ */
.st-faq details { border-top: 1px solid var(--sp-line); }
.st-faq summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; padding: 13px 0; cursor: pointer; font-weight: 600; font-size: 15.5px; min-height: 48px; color: var(--sp-ink); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary span { flex: 1; }
.st-faq summary .st-ic { width: 20px; height: 20px; color: var(--sp-ink-3); margin-top: 1px; transition: transform .2s; }
.st-faq details[open] summary .st-ic { transform: rotate(180deg); }
.st-page .st-faq .st-ans { margin: 0 0 14px; color: var(--sp-ink-2); font-size: 15.5px; padding-right: 8px; }

/* ---------------------------------------------------------------- 14. order card */
.st-order-card { border: 1px solid var(--sp-line); border-radius: var(--sp-r); padding: 12px; }
.st-ow-summary { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--sp-r); background: var(--sp-band); color: #fff; }
.st-ow-shot { width: 76px; height: 76px; border-radius: var(--sp-r-sm); border: 2px solid rgba(255,255,255,.7); object-fit: cover; flex: none; background: #fff; }
.st-ow-price { flex: 1; min-width: 0; }
.st-ow-name { font-size: 14px; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.92); }
.st-ow-line1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.st-ow-now { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.st-ow-now small { font-size: 17px; font-weight: 800; }
.st-ow-was { font-size: 14px; color: rgba(255,255,255,.78); }
.st-ow-was[hidden] { display: none; }
.st-ow-line3 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13px; color: rgba(255,255,255,.9); margin-top: 3px; line-height: 1.35; }
.st-ow-line3 span { display: inline-flex; align-items: center; gap: 4px; }
.st-ow-line3 .st-ic { width: 15px; height: 15px; }
.st-pkg-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.st-page .st-ow-label, .st-sheet .st-ow-label { display: block; float: left; width: 100%; padding: 0; font-weight: 700; margin: 14px 0 10px; font-size: 16px; color: var(--sp-heading); }
.st-pkg-grid { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-pkg { position: relative; text-align: left; border: 1.5px solid var(--sp-line); background: #fff; border-radius: var(--sp-r); padding: 12px 12px 11px; min-height: 44px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; transition: border-color .15s; }
.st-pkg-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.st-pkg:focus-within { outline: 3px solid var(--sp-brand-line); outline-offset: 2px; }
.st-pkg-q { font-weight: 700; font-size: 17px; line-height: 1.25; }
.st-pkg-t { color: var(--sp-price); font-weight: 800; font-size: 19px; line-height: 1.3; margin-top: 2px; }
.st-pkg-s { color: var(--sp-ink-3); font-size: 13.5px; line-height: 1.3; }
.st-pkg-u { color: var(--sp-ink-2); font-size: 13.5px; line-height: 1.35; }
.st-pkg-j, .st-pkg-g { align-self: flex-start; margin-top: 6px; background: var(--sp-price-tint); color: var(--sp-price); font-size: 12.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.st-pkg-g { background: var(--sp-brand-tint); color: var(--sp-brand-ink); margin-top: 4px; }
.st-pkg-pop { position: absolute; top: -1px; right: -1px; background: var(--sp-price); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 0 var(--sp-r) 0 var(--sp-r-sm); }
.st-pkg-tick { position: absolute; right: -1px; bottom: -1px; width: 26px; height: 22px; background: var(--sp-brand); border-radius: var(--sp-r-sm) 0 var(--sp-r) 0; display: grid; place-items: center; color: #fff; opacity: 0; }
.st-pkg-tick .st-ic { width: 15px; height: 15px; stroke-width: 3; }
.st-pkg.is-selected, .st-pkg:has(.st-pkg-input:checked) { border-color: var(--sp-brand); background: var(--sp-brand-soft); }
.st-pkg.is-selected .st-pkg-tick, .st-pkg:has(.st-pkg-input:checked) .st-pkg-tick { opacity: 1; }

/* The shared order form (sections/order-form-fields.php), reshaped to the shop look:
   labels above boxed inputs, no floating label, no field icons. */
.st-ow .rv-order-form { margin-top: 14px; }
.st-ow .rv-single-product { display: none; }
.st-ow .rv-single-fieldshead { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 700; font-size: 16px; color: var(--sp-heading); }
.st-ow .rv-single-fieldshead svg { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; color: var(--sp-brand-ink); }
.st-ow .rv-field { margin-bottom: 12px; }
.st-ow .rv-field__wrap,
.st-ow .rv-field__wrap--textarea { display: flex; flex-direction: column; align-items: stretch; height: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.st-ow .rv-field__wrap:focus-within { box-shadow: none; border: 0; }
.st-ow .rv-field__icon { display: none; }
.st-ow .rv-field__label,
.st-ow .rv-field__input:focus + .rv-field__label,
.st-ow .rv-field__input:not(:placeholder-shown) + .rv-field__label,
.st-ow .rv-field__wrap--textarea .rv-field__label,
.st-ow .rv-field__wrap--textarea .rv-field__input:focus + .rv-field__label,
.st-ow .rv-field__wrap--textarea .rv-field__input:not(:placeholder-shown) + .rv-field__label {
  order: -1; position: static; transform: none; top: auto; left: auto;
  display: block; background: none; padding: 0; margin: 0 0 5px;
  font: 500 15px/1.4 var(--st-font); color: var(--sp-ink); pointer-events: auto;
}
.st-ow .rv-field__input,
.st-ow .rv-field__wrap--textarea .rv-field__input,
.st-ow .rv-field__wrap--textarea .rv-field__input[data-rv-autogrow] {
  width: 100%; height: auto; min-height: 50px; padding: 11px 12px;
  font: 400 17px/1.45 var(--st-font); color: var(--sp-ink);
  background: #fff; border: 1.5px solid #CDD2D6; border-radius: var(--sp-r-sm);
}
.st-ow .rv-field__wrap--textarea .rv-field__input[data-rv-autogrow] { min-height: 84px; max-height: 190px; }
.st-ow .rv-field__input::placeholder { color: #8C9297; }
.st-ow .rv-field__input:focus { outline: none; border-color: var(--sp-brand); box-shadow: 0 0 0 3px var(--sp-brand-tint); }
.st-ow .rv-field--error .rv-field__input { border-color: var(--sp-price); }
.st-ow .rv-field--error .rv-field__wrap { border: 0; }
.st-ow .rv-field__error { margin: 4px 0 0; color: var(--sp-price); font-size: 14px; font-weight: 500; }
.st-ow .rv-field__hint { font-size: 13.5px; color: var(--sp-ink-3); opacity: 1; }
.st-ow .rv-btn-primary.rv-single-cta {
  width: 100%; min-height: 54px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: var(--sp-r-sm);
  background: var(--sp-cta) !important; color: var(--sp-on-cta); text-shadow: none;
  font: 700 18px/1.2 var(--st-font); box-shadow: none !important; filter: none;
  text-transform: none; letter-spacing: 0;
}
.st-ow .rv-btn-primary.rv-single-cta::before, .st-ow .rv-btn-primary.rv-single-cta::after { display: none; }
.st-ow .rv-btn-primary.rv-single-cta:hover { transform: none; background: var(--sp-cta) !important; box-shadow: none !important; }
.st-ow .rv-btn-primary.rv-single-cta:active { transform: translateY(1px); background: var(--sp-cta-dark) !important; }
.st-ow .rv-btn-primary.rv-single-cta, .st-ow .rv-single-cta .rv-btn-primary__label { animation: none; }
.st-ow .rv-single-cta .rv-btn-primary__label { font-size: 18px !important; text-transform: none; letter-spacing: 0; }
.st-ow .rv-btn-primary__icon-trailing { display: none; }
.st-ow .rv-single-notes { list-style: none; margin: 12px 0 0; padding: 12px; display: grid; gap: 8px; background: var(--sp-card); border-radius: var(--sp-r); }
.st-ow .rv-single-notes__item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sp-ink-2); }
.st-ow .rv-single-notes__item svg { width: 18px; height: 18px; flex: none; color: var(--sp-brand-ink); margin-top: 1px; }
.st-ow .rv-single-notes__link { color: var(--sp-brand-ink); text-decoration: underline; }

/* ---------------------------------------------------------------- sheets (order + info) */
.st-sheet-root { position: fixed; inset: 0; z-index: 100; }
.st-sheet-root[hidden] { display: none; }
.st-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; cursor: pointer; }
.st-sheet {
  position: absolute; left: 50%; bottom: 0; width: min(100%, var(--sp-col));
  max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 12px 12px 0 0;
  padding: 44px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); outline: none;
  color: var(--sp-ink); font-size: 16px; line-height: 1.55;
  font-family: var(--st-font);
}
.st-sheet-root.show .st-sheet-backdrop { opacity: 1; }
.st-sheet-root.show .st-sheet { transform: translate(-50%, 0); }
.st-sheet-handle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: #D5D8DB; }
.st-sheet-close { position: absolute; top: 2px; right: 4px; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; color: var(--sp-ink-3); z-index: 5; }
.st-sheet .rv-btn-primary.rv-single-cta, .st-sheet .rv-btn-primary.rv-single-cta:hover { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -12px 0 8px #fff !important; }
html.st-sheet-open, html.st-sheet-open body { overflow: hidden; }

.st-info-sheet { padding-top: 40px; }
.st-sheet h2, .st-sheet h3 { font-family: var(--st-font); letter-spacing: normal; }
.st-page .st-info-h, .st-info-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--sp-heading); }
.st-info-h .st-ic { width: 22px; height: 22px; color: var(--sp-brand-ink); }
.st-info-lead { margin: 0 0 4px; font-size: 16px; }
.st-info-note { margin: 0 0 12px; font-size: 13.5px; color: var(--sp-ink-3); }
.st-info-list { list-style: none; margin: 0; padding: 0; }
.st-info-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--sp-line); font-size: 15.5px; line-height: 1.5; }
.st-info-list li .st-ic { width: 20px; height: 20px; color: var(--sp-brand-ink); margin-top: 2px; }
.st-info-why b { display: block; margin-bottom: 2px; }
.st-info-steps { list-style: none; margin: 0; padding: 0; }
.st-info-steps li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sp-line); }
.st-info-steps b { display: block; }
.st-info-steps span:not(.st-n) { display: block; color: var(--sp-ink-2); font-size: 15.5px; }
.st-info-panel[hidden] { display: none; }

/* ---------------------------------------------------------------- 15. related grid */
.st-related { margin-top: 8px; padding: 0 0 12px; }
.st-page .st-rel-h { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 16px 10px; font-size: 16px; font-weight: 700; text-align: center; color: var(--sp-heading); }
.st-rel-h::before, .st-rel-h::after { content: ""; flex: 1; height: 8px; background: repeating-linear-gradient(135deg, var(--sp-brand-line) 0 2px, transparent 2px 6px); border-radius: 2px; }
.st-rel-h span { flex: none; max-width: 70%; }
.st-rel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 0 8px; }
.st-pcard { display: flex; flex-direction: column; background: #fff; border-radius: var(--sp-r); overflow: hidden; text-decoration: none; color: var(--sp-ink); }
.st-js .st-pcard.st-more-item:not(.st-shown) { display: none; }
.st-pcard-im { border-radius: 0; }
.st-off { position: absolute; top: 0; left: 0; background: var(--sp-price); color: #fff; font-weight: 800; font-size: 12.5px; line-height: 1.5; padding: 1px 6px; border-radius: 0 0 var(--sp-r-sm) 0; }
.st-pcard-bd { padding: 8px 10px 10px; display: flex; flex-direction: column; flex: 1; }
.st-pcard-nm { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.8em; color: var(--sp-ink-2); }
.st-pcard-nm b { font-weight: 700; color: var(--sp-ink); }
.st-pcard-chips { display: flex; margin-top: 6px; }
.st-cod-chip { display: inline-block; padding: 0 4px; border: 1px solid var(--sp-brand-ink); border-radius: 2px; color: var(--sp-brand-ink); font-size: 11px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; }
.st-pcard-pr { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.st-now { color: var(--sp-price); font-weight: 800; font-size: 17px; }
.st-was { color: var(--sp-ink-3); font-size: 13px; }
.st-pcard-ft { margin-top: 4px; font-size: 13px; color: var(--sp-ink-3); display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.st-pcard-rt { display: inline-flex; align-items: center; gap: 2px; color: var(--sp-ink-2); }
.st-pcard-rt .st-ic { width: 13px; height: 13px; fill: var(--sp-gold); stroke: none; }
.st-rel-more { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 28px; border: 1px solid #CDD2D6; background: #fff; border-radius: var(--sp-r-sm); font-size: 15px; color: var(--sp-ink-2); }
.st-rel-more[hidden], .st-desc-more[hidden] { display: none; }

/* ---------------------------------------------------------------- 16. split buy bar */
.st-buybar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--sp-col)); z-index: 65;
  display: flex; align-items: stretch; background: #fff; box-shadow: 0 -1px 0 var(--sp-line), 0 -4px 12px rgba(0,0,0,.05);
  padding-bottom: env(safe-area-inset-bottom);
}
html:not(.st-js) .st-buybar { display: none; }
.st-bb-ic { flex: 0 0 60px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12.5px; line-height: 1.2; color: var(--sp-ink-3); text-decoration: none; }
.st-bb-ic + .st-bb-ic { border-left: 1px solid var(--sp-line); }
.st-bb-ic .st-ic { width: 22px; height: 22px; color: var(--sp-ink-2); }
.st-page .st-split.rv-btn-primary {
  flex: 1; display: flex; align-items: stretch; min-height: 56px; padding: 0; margin: 0; min-width: 0;
  border: 0; border-radius: 0; background: var(--sp-cta) !important; color: var(--sp-on-cta);
  font: 700 17px/1.2 var(--st-font); text-shadow: none; box-shadow: none !important; filter: none; transform: none;
  text-transform: none; letter-spacing: 0; overflow: hidden;
}
.st-page .st-split.rv-btn-primary::before, .st-page .st-split.rv-btn-primary::after { display: none; }
.st-split-price { flex: none; display: flex; align-items: center; padding: 0 14px; background: var(--sp-cta-dark); font-weight: 800; font-size: 18px; white-space: nowrap; }
.st-split-cta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; white-space: nowrap; }
.st-page .st-split.rv-btn-primary:hover { background: var(--sp-cta) !important; transform: none; }
.st-page .st-split.rv-btn-primary:active .st-split-cta { background: color-mix(in srgb, var(--sp-cta) 88%, #000); }

/* ---------------------------------------------------------------- press states */
.st-grow[data-st-info]:active, .st-grow[data-st-open-sheet]:active, .st-pkg:active, .st-fchip:active, .st-stp:active { background: rgba(0,0,0,.04); }
.st-rel-more:active, .st-rv-more:active { background: var(--sp-card); }
@media (prefers-reduced-motion: reduce) {
  .st-sheet, .st-sheet-backdrop, .st-topbar, .st-tabs a::after, .st-dot, .st-desc-more .st-ic, .st-faq summary .st-ic { transition: none; }
}

/* Desktop-only pieces: the sidebar buy card and the order card's promise column. */
.st-aside, .st-ow-promise { display: none; }

/* ---------------------------------------------------------------- tablet / desktop */
@media (min-width: 768px) {
  .st-page { box-shadow: 0 0 0 1px var(--sp-line); }
}
/* Tablet: one centred column, 720px, bottom buy bar kept. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.rv-style-shop { --sp-col: 720px; }
  .st-gallery figure { aspect-ratio: 4 / 3; }
  .st-gallery img { object-fit: contain; }
  .st-rail { grid-auto-columns: calc((100% - 24px) / 4.25); }
  .st-rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-desc-img img { max-width: 420px; margin: 0 auto; }
  .st-order-card { max-width: 560px; margin: 0 auto; }
}

/* Desktop (LazMall / Amazon PDP): 1200px container, hero in two columns, then a main
   column with every section at full width next to a sticky sidebar buy card. The
   sidebar replaces the bottom buy bar; the shop bar runs the full viewport width. */
@media (min-width: 1024px) {
  body.rv-style-shop { --sp-col: 1200px; --sp-aside: 300px; --sp-bar: 60px; --sp-gut: 16px; }
  body.rv-style-shop.single-health_product { padding-bottom: 0; }
  .st-page { width: calc(100% - 2 * var(--sp-gut)); margin-top: 16px; margin-bottom: 24px; box-shadow: none; }
  .st-page [id] { scroll-margin-top: calc(var(--sp-bar) + 12px); }

  /* hero */
  .st-hero { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 28px; background: #fff; padding: 24px; align-items: start; border-radius: var(--sp-r); }
  .st-hero-media { position: sticky; top: calc(var(--sp-bar) + 16px); }
  .admin-bar .st-hero-media { top: calc(var(--sp-bar) + 48px); }
  .st-hero-media .st-gallery-wrap { border-radius: var(--sp-r); overflow: hidden; }
  .st-gallery-tools, .st-gallery-scrim { display: none; }
  .st-thumbs { display: flex; gap: 8px; padding: 10px 0 0; overflow-x: auto; scrollbar-width: none; }
  .st-thumbs button { flex: 0 0 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: var(--sp-r-sm); overflow: hidden; background: #f4f4f4; }
  .st-thumbs button.on { border-color: var(--sp-brand); }
  .st-thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .st-band-price { border-radius: var(--sp-r); padding: 14px 18px; min-height: 76px; }
  .st-bp-now { font-size: 34px; }
  .st-buybox { padding: 18px 0 0; margin: 0; }
  .st-page .st-title-h { font-size: 22px; -webkit-line-clamp: 3; }
  .st-buybox-cta { display: block; margin-top: 16px; }
  .st-buybox-cta .st-split.rv-btn-primary { width: 100%; min-height: 54px; border-radius: var(--sp-r-sm); }

  /* body grid: main column + sticky sidebar */
  .st-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--sp-aside); gap: 16px; align-items: start; margin-top: 16px; }
  .st-body-main { min-width: 0; }
  .st-body-main .st-sec, .st-body-main .st-related { margin-top: 12px; border-radius: var(--sp-r); }
  .st-body-main > .st-sec:first-child { margin-top: 0; }
  .st-body-main .st-sec, .st-body-main .st-related { padding: 20px 24px; }
  .st-page .st-sec-h { font-size: 19px; }
  .st-sh { margin-bottom: 14px; }

  /* store card + rail side by side */
  .st-store-sec { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .st-store-sec .st-rail-wrap { margin-top: 0; }
  .st-rail { grid-auto-columns: calc((100% - 24px) / 4); margin: 0; padding: 0; }

  /* full-width sections */
  .st-spec th { width: 28%; }
  .st-desc-body { font-size: 16.5px; }
  .st-js .st-desc-body.is-collapsed { max-height: 900px; }
  .st-desc-img { margin: 22px 0; }
  .st-desc-img img { max-width: 420px; margin: 0 auto; }
  .st-ing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .st-ugc img { flex-basis: 120px; width: 120px; height: 120px; }
  .st-ugc { margin: 0 -24px 4px; padding: 0 24px 8px; }
  body.rv-style-shop .rv-sugc { margin-left: -24px; margin-right: -24px; }
  .st-stepper { margin: 8px 0 0; }
  .st-dot { width: 52px; height: 52px; }
  .st-stepper::before { top: 26px; }
  .st-stp { font-size: 14.5px; }
  .st-faq summary { font-size: 16px; padding: 14px 0; }
  .st-page .st-faq .st-ans { font-size: 16px; max-width: 72ch; }

  /* order card: summary + promises left, the form right */
  .st-order-card { padding: 20px; }
  .st-order-card .st-ow { display: block; }
  .st-order-card .st-ow > form { margin-top: 16px; }
}
/* Small desktop (1024-1279): the main column is ~630px, so a 340px store card left the rail
   ~260px -- four 60px tiles with clipped names. Narrower card, three tiles. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .st-store-sec { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 20px; }
  .st-rail { grid-auto-columns: calc((100% - 16px) / 3); }
}
@media (min-width: 1280px) {
  .st-order-card .st-ow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 28px; align-items: start; }
  .st-order-card .st-ow > * { grid-column: 1; }
  .st-order-card .st-ow > form { grid-column: 2; grid-row: 1 / span 20; margin-top: 0; }
  .st-order-card .st-ow-summary { flex-direction: column; align-items: flex-start; padding: 16px; }
  .st-order-card .st-ow-shot { width: 120px; height: 120px; }
  .st-order-card .st-ow-promise { display: block; }
}
@media (min-width: 1024px) {
  .st-order-card .st-ow-promise { list-style: none; margin: 12px 0 0; padding: 4px 14px; background: var(--sp-card); border-radius: var(--sp-r); }
  .st-ow-promise li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 14.5px; line-height: 1.4; }
  .st-ow-promise li + li { border-top: 1px solid var(--sp-line); }
  .st-ow-promise .st-ic { width: 20px; height: 20px; color: var(--sp-brand-ink); margin-top: 1px; }
  .st-ow-promise b { display: block; font-weight: 600; color: var(--sp-ink); }
  .st-ow-promise small { display: block; font-size: 13.5px; color: var(--sp-ink-3); }
  .st-order-card .st-pkg-set { margin-top: 2px; }

  /* related: 5 per row inside the main column */
  .st-related { background: #fff; }
  .st-page .st-rel-h { padding: 0 0 14px; }
  .st-rel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; }
  .st-pcard { border: 1px solid var(--sp-line); }

  /* sidebar buy card */
  .st-aside { display: block; position: sticky; top: calc(var(--sp-bar) + 16px); }
  .admin-bar .st-aside { top: calc(var(--sp-bar) + 48px); }
  .st-aside-card { background: #fff; border-radius: var(--sp-r); padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .st-as-head { display: flex; gap: 12px; align-items: center; }
  .st-as-shot { width: 64px; height: 64px; flex: none; border-radius: var(--sp-r-sm); border: 1px solid var(--sp-line); object-fit: cover; background: #f6f6f6; }
  .st-as-name { min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--sp-heading); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .st-as-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; padding: 10px 12px; border-radius: var(--sp-r); background: var(--sp-band); color: #fff; --st-shield-tick: var(--sp-band-m); }
  .st-as-now { font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
  .st-as-now small { font-size: 16px; font-weight: 800; }
  .st-as-band .st-bp-mark { flex-basis: 100%; font-size: 12.5px; }
  .st-as-band .st-bp-mark .st-ic { width: 15px; height: 15px; color: #fff; }
  .st-page .st-as-buy.rv-btn-primary {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 12px 0 0; padding: 0 16px;
    border: 0; border-radius: var(--sp-r-sm); background: var(--sp-cta) !important; color: var(--sp-on-cta);
    font: 700 17px/1.2 var(--st-font); text-shadow: none; box-shadow: none !important; filter: none; transform: none;
    text-transform: none; letter-spacing: 0;
  }
  .st-page .st-as-buy.rv-btn-primary::before, .st-page .st-as-buy.rv-btn-primary::after { display: none; }
  .st-page .st-as-buy.rv-btn-primary:hover { background: var(--sp-cta-dark) !important; transform: none; }
  .st-as-list { list-style: none; margin: 12px 0 0; padding: 0; }
  .st-as-list li + li { border-top: 1px solid var(--sp-line); }
  .st-as-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; gap: 10px; align-items: center; width: 100%; padding: 9px 0; border: 0; background: none; text-align: left; color: var(--sp-ink); }
  .st-as-ic { width: 20px; height: 20px; color: var(--sp-brand-ink); }
  .st-as-t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
  .st-as-t small { display: block; font-size: 13px; line-height: 1.35; color: var(--sp-ink-3); }
  .st-as-row .st-go { width: 16px; height: 16px; color: var(--sp-ink-3); }
  button.st-as-row:hover b { color: var(--sp-brand-ink); }

  /* shop bar: full viewport width, one row (back · name · tabs · share · cart), inner
     content on the 1200px container; it covers the sticky announcement bar. */
  .st-topbar {
    left: 0; right: 0; width: auto; transform: none; z-index: 90;
    display: flex; align-items: center; height: var(--sp-bar); gap: 8px;
    padding: 0 max(var(--sp-gut), calc((100% - var(--sp-col)) / 2));
  }
  .st-topbar-row { display: contents; }
  .st-topbar-row [data-st-back] { order: 0; }
  .st-tb-title { order: 1; flex: 0 1 auto; max-width: 280px; font-size: 18px; padding-right: 8px; }
  .st-tabs { order: 2; flex: 1; height: var(--sp-bar); border-top: 0; justify-content: flex-start; gap: 4px; }
  .st-tabs a { flex: 0 0 auto; padding: 0 16px; }
  .st-tabs a::after { left: 16px; right: 16px; }
  .st-topbar-row [data-st-share] { order: 3; }
  .st-topbar-row [data-st-open-sheet] { order: 4; }
  body.rv-style-shop.single-health_product .rv-footer { width: calc(100% - 2 * var(--sp-gut)); }

  .st-sheet { width: min(100%, 560px); }
  /* The sidebar buy card replaces the floating bottom bar on desktop. */
  .st-buybar { display: none !important; }
}
@media (min-width: 1280px) {
  body.rv-style-shop { --sp-aside: 340px; }
  .st-rel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   Site skin -- header, announcement bar, footer and product cards (home + search) so
   the whole site reads as the same store. Markup is the theme's; CSS only.
   ===================================================================== */
body.rv-style-shop:not(.single-health_product) { background: var(--sp-page) !important; }

/* announcement bar: the band gradient, white text */
body.rv-style-shop .rv-announce { background: var(--sp-band); color: #fff; }
body.rv-style-shop .rv-marquee__item { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.rv-style-shop .rv-marquee__item svg { color: #fff; opacity: .9; }

/* header: plain white bar with a hairline, square-ish CTA in the site CTA colour */
body.rv-style-shop .rv-header,
body.rv-style-shop .rv-header.is-scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--sp-line); box-shadow: none; }
body.rv-style-shop .rv-logo__word { font-family: var(--st-font); color: var(--sp-brand); font-weight: 700; letter-spacing: 0; }
body.rv-style-shop .rv-logo__mark { color: var(--sp-brand); }
body.rv-style-shop .rv-nav__link { font-family: var(--st-font); color: var(--sp-ink-2); font-weight: 500; }
body.rv-style-shop .rv-nav__link:hover { color: var(--sp-brand-ink); }
body.rv-style-shop .rv-header__cta.rv-btn-primary,
body.rv-style-shop .rv-nav__drawer-cta.rv-btn-primary,
body.rv-style-shop .rv-shell-page .rv-btn-primary {
  background: var(--sp-cta) !important; color: var(--sp-on-cta); border-radius: var(--sp-r-sm);
  text-shadow: none; box-shadow: none !important; font-family: var(--st-font);
}
body.rv-style-shop .rv-header__cta.rv-btn-primary::before, body.rv-style-shop .rv-header__cta.rv-btn-primary::after,
body.rv-style-shop .rv-nav__drawer-cta.rv-btn-primary::before, body.rv-style-shop .rv-nav__drawer-cta.rv-btn-primary::after,
body.rv-style-shop .rv-shell-page .rv-btn-primary::before, body.rv-style-shop .rv-shell-page .rv-btn-primary::after { display: none; }
body.rv-style-shop .rv-header__cta .rv-btn-primary__icon-trailing,
body.rv-style-shop .rv-shell-page .rv-btn-primary__icon-trailing { background: rgba(255,255,255,.2); color: inherit; }
body.rv-style-shop .rv-search-btn { color: var(--sp-ink-2); }
body.rv-style-shop .rv-nav__burger span { background: var(--sp-ink); }

/* home / search headings and sections in the store voice */
body.rv-style-shop .rv-shell-page h1, body.rv-style-shop .rv-shell-page h2, body.rv-style-shop .rv-shell-page h3 { font-family: var(--st-font); letter-spacing: 0; }
body.rv-style-shop .rv-shell-page em { color: var(--sp-brand-ink); }

/* product cards: store tiles -- image on a soft tinted panel, corner discount badge,
   2-line name, red price, 2 per row */
body.rv-style-shop .rv-shell-ai-product-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (min-width: 760px) { body.rv-style-shop .rv-shell-ai-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
body.rv-style-shop .rv-shell-ai-product {
  padding: 0; border: 0; border-radius: var(--sp-r); background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: none;
}
body.rv-style-shop .rv-shell-ai-product:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--sp-brand-line); }
body.rv-style-shop .rv-shell-ai-product__media { margin: 0; border-radius: 0; background: var(--sp-tint); }
body.rv-style-shop .rv-shell-ai-product__media img { padding: 0; object-fit: contain; mix-blend-mode: multiply; }
body.rv-style-shop .rv-shell-ai-product__flag { top: 0; left: 0; right: auto; border-radius: 0 0 var(--sp-r-sm) 0; background: var(--sp-price); color: #fff; font-size: 12.5px; font-weight: 800; padding: 2px 7px; }
body.rv-style-shop .rv-shell-ai-product__body { padding: 8px 10px 10px; }
body.rv-style-shop .rv-shell-ai-product h3 { margin: 0; font: 600 15px/1.38 var(--st-font); color: var(--sp-ink); }
body.rv-style-shop .rv-shell-ai-product__sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.38; color: var(--sp-ink-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body.rv-style-shop .rv-shell-ai-product__foot { gap: 8px; padding-top: 8px; }
body.rv-style-shop .rv-shell-ai-product__price { font: 800 18px/1.2 var(--st-font); color: var(--sp-price); gap: 6px; }
body.rv-style-shop .rv-shell-ai-product__was { font-size: 13px; font-weight: 400; color: var(--sp-ink-3); }
body.rv-style-shop .rv-shell-ai-product__save { background: var(--sp-price-tint); color: var(--sp-price); border-radius: 3px; padding: 1px 6px; font-size: 12px; }
body.rv-style-shop .rv-shell-ai-product__cta.rv-btn-primary,
body.rv-style-shop .rv-shell-ai-product__cta.rv-btn-primary:hover { min-height: 40px; padding: 8px 10px; font-size: 15px; box-shadow: none !important; background: #fff !important; color: var(--sp-brand-ink); border: 1.5px solid var(--sp-brand); transform: none; }
body.rv-style-shop .rv-shell-ai-product__cta.rv-btn-primary:active { background: var(--sp-brand-tint) !important; }
body.rv-style-shop .rv-shell-ai-product__cta .rv-btn-primary__label { font-size: 15px !important; }

/* footer: light store footer instead of the dark band */
body.rv-style-shop .rv-footer { background: #fff; color: var(--sp-ink-2); border-top: 1px solid var(--sp-line); font-family: var(--st-font); }
body.rv-style-shop.single-health_product .rv-footer { max-width: var(--sp-col); margin: 0 auto; }
body.rv-style-shop .rv-footer::before { display: none; }
body.rv-style-shop .rv-footer__top { border-bottom-color: var(--sp-line); }
body.rv-style-shop .rv-footer__brand-logo, body.rv-style-shop .rv-footer__brand-logo span { color: var(--sp-brand); }
body.rv-style-shop .rv-footer__tagline { color: var(--sp-heading); }
body.rv-style-shop .rv-footer__brand-statement, body.rv-style-shop .rv-footer__contact-label { color: var(--sp-ink-3); }
body.rv-style-shop .rv-footer__contact-val, body.rv-style-shop .rv-footer__copy { color: var(--sp-ink-2); }
body.rv-style-shop .rv-footer__contact-icon { background: var(--sp-brand-tint); color: var(--sp-brand-ink); }
body.rv-style-shop .rv-footer__contact-icon svg { color: var(--sp-brand-ink); }
body.rv-style-shop .rv-footer__seal { background: var(--sp-card); border: 1px solid var(--sp-line); box-shadow: none; color: var(--sp-ink); padding: 10px 12px; min-height: 0; }
body.rv-style-shop .rv-footer__seal-icon { background: #fff; }
body.rv-style-shop .rv-footer__trust { gap: 8px; }
body.rv-style-shop .rv-footer__seal-icon, body.rv-style-shop .rv-footer__seal-icon svg { color: var(--sp-brand-ink); }
body.rv-style-shop .rv-footer__seal-text { color: var(--sp-ink); }
body.rv-style-shop .rv-footer__links a, body.rv-style-shop .rv-footer__legal-list a { color: var(--sp-ink-2); }
body.rv-style-shop .rv-footer__links a:hover, body.rv-style-shop .rv-footer__legal-list a:hover { color: var(--sp-brand-ink); }
body.rv-style-shop .rv-footer__disclaimer { color: var(--sp-ink-3); border-color: var(--sp-line); }
body.rv-style-shop .rv-footer__bottom { border-top-color: var(--sp-line); }

/* UGC photo strip (template-parts/styles/_shared/ugc-strip.php) -- the classic reviews band:
   looping row of customer-style photos, bleeds to the section edge, pauses on hover, a plain
   swipe row under prefers-reduced-motion. Tiles carry their gutter as margin so the -50%
   loop never jumps. */
body.rv-style-shop .rv-sugc {
  overflow: hidden;
  margin: 4px calc(-1 * 16px) 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.rv-style-shop .rv-sugc__track {
  display: flex;
  width: max-content;
  padding-left: 6px;
  animation: rv-sugc-scroll var(--rv-sugc-dur, 40s) linear infinite;
  will-change: transform;
}
body.rv-style-shop .rv-sugc:hover .rv-sugc__track { animation-play-state: paused; }
body.rv-style-shop .rv-sugc__tile { display: block; background-repeat: no-repeat; }
body.rv-style-shop .rv-sugc__img {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  margin-right: 8px;
  object-fit: cover;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .05);
}
@keyframes rv-sugc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  body.rv-style-shop .rv-sugc__img { width: 200px; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  body.rv-style-shop .rv-sugc { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; }
  body.rv-style-shop .rv-sugc__track { animation: none; will-change: auto; }
  body.rv-style-shop .rv-sugc__img { scroll-snap-align: start; }
}