/** Shopify CDN: Minification failed

Line 415:0 Unexpected "}"

**/
/* ============================================================================
 * custom.css — Stravian Labs design system, layered onto the Wonder theme.
 *
 * The Wonder theme already loads this file on every page (layout/theme.liquid).
 * It has three parts:
 *   1. TOKENS   — the real design system distilled from the Figma file
 *   2. MOTION    — the CSS half of the motion layer (JS half: stravian-motion.js)
 *   3. COMPONENTS — styles for the stravian-* custom sections
 *
 * Tokens derived from the "Nayan" page of the Stravian Labs Figma file. The file
 * carries ~149 colours / 191 text styles from copy-paste drift; the system
 * underneath is small and is written out below. Regenerate the raw report with
 * `node tools/token-report.mjs`.
 * ========================================================================= */

/* ========================================================================== *
 * 1. TOKENS
 * ========================================================================== */

:root {

  /* ---- brand ----
   * #ff5f00 is the accent (264 uses). #f57f20 / #f97316 / #ff5c00 / #ea6418 /
   * #fd6825 / #ff6b2c in the file are the same colour drifting — all snap here.
   * Bridged to the theme's own --color-brand so the theme editor stays in sync. */
  --sl-accent:          #ff5f00;
  --sl-accent-hover:    #e65600;
  --sl-accent-pressed:  #cc4d00;
  --sl-accent-subtle:   #fff7ed;   /* active nav, savings banner, active chips  */
  --sl-accent-contrast: #ffffff;

  /* ---- neutrals ---- (the Tailwind grey ramp, kept verbatim to match Figma) */
  --sl-grey-0:    #ffffff;
  --sl-grey-50:   #f9fafb;
  --sl-grey-100:  #f3f4f6;
  --sl-grey-200:  #e5e7eb;
  --sl-grey-300:  #d1d5db;
  --sl-grey-400:  #9ca3af;
  --sl-grey-500:  #6b7280;
  --sl-grey-600:  #4b5563;
  --sl-grey-700:  #374151;
  --sl-grey-800:  #1f2937;
  --sl-grey-900:  #111827;
  --sl-grey-1000: #000000;

  /* ---- category palette ---- (from the "Find Your Fit" cards; per-block editable) */
  --sl-cat-minerals: #2c5e7a;
  --sl-cat-vitamins: #a66c33;
  --sl-cat-gut:      #8c3446;
  --sl-hero-sand:    #eae6df;

  /* ---- semantic ---- (reference these in components, never a raw grey) */
  --sl-bg:            var(--sl-grey-0);
  --sl-bg-subtle:     var(--sl-grey-50);
  --sl-bg-muted:      var(--sl-grey-100);
  --sl-surface:       var(--sl-grey-0);

  --sl-ink:           var(--sl-grey-900);
  --sl-ink-body:      var(--sl-grey-700);
  --sl-ink-muted:     var(--sl-grey-500);
  --sl-ink-faint:     var(--sl-grey-400);
  --sl-ink-inverse:   var(--sl-grey-0);

  --sl-border:        var(--sl-grey-200);
  --sl-border-strong: var(--sl-grey-300);

  /* ---- commerce + status ---- (real values from the frames, not invented)
   *   #008a00  "You save Rs. 600" / "Applied" / "Product Discount (5%)"
   *   #16a34a  "(5% OFF)" / "(25% OFF)" badges
   *   #2563eb  review counts "(70)" / "View all" links */
  --sl-savings:        #008a00;
  --sl-savings-badge:  #16a34a;
  --sl-savings-subtle: #f0fdf4;
  --sl-link:           #2563eb;
  --sl-success:        var(--sl-savings);
  --sl-warning:        #b45309;
  --sl-warning-subtle: #fffbeb;
  --sl-danger:         #b91c1c;
  --sl-danger-subtle:  #fef2f2;

  /* ---- type ----
   * RESOLVED: Archivo, taken from the theme's own settings.
   *
   * The Figma file looks mid-migration across Inter (972 uses), Manrope (645)
   * and Archivo (198). On Figma structure alone Inter+Manrope looked right —
   * the Archivo frames carry no auto-layout, so they read as pasted artwork.
   * But the store is already configured for Archivo end to end
   * (type_body_font archivo_n4, headings archivo_n7, nav/buttons archivo_n5,
   * price archivo_n7) and Shopify's font CDN ships only that family. The
   * Archivo frames were the designer matching the real storefront.
   *
   * So these point AT the theme's variables instead of overriding them: one
   * family, no extra webfont payload, and the theme editor's font picker keeps
   * working. Weight carries the display/UI distinction.
   *
   * To move to Manrope/Inter later, change the font picker in the theme
   * editor — not these tokens.
   */
  --sl-font-display: var(--font-headline, "Archivo"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sl-font-ui:      var(--font-base, "Archivo"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sl-font-num:     var(--font-price, var(--sl-font-ui));

  /* Size ramp — in PX on purpose.
   *
   * The Wonder theme sets `html { font-size: 10px }`. Every rem is therefore
   * 10px, not 16px, so a rem-based ramp silently rendered ~37% smaller than
   * intended (1.125rem came out as 11px where 18px was meant). That was the
   * real cause of the type looking tiny. px is immune to that, so the ramp is
   * stated in px and stays correct whatever the theme does to the root size.
   *
   * Values sit a step above the Figma frames: those are drawn at 390px wide
   * where 14px body reads fine, but on a real storefront it reads small, and
   * the theme itself uses 15px body on mobile / 16px on desktop. clamp() lets
   * the larger sizes breathe on wide screens without overflowing a phone.
   * Figma equivalents noted for reference. */
  --sl-size-3xs: 13px;                                  /* Figma 10 */
  --sl-size-2xs: 15px;                                  /* Figma 12 */
  --sl-size-xs:  clamp(16px, 15px + 0.4vw, 18px);       /* Figma 14 — body      */
  --sl-size-sm:  clamp(18px, 16px + 0.5vw, 20px);       /* Figma 16             */
  --sl-size-md:  clamp(22px, 19px + 0.9vw, 28px);       /* Figma 18 — headings  */
  --sl-size-lg:  clamp(24px, 20px + 1.2vw, 32px);       /* Figma 20             */
  --sl-size-xl:  clamp(28px, 22px + 2vw, 40px);         /* Figma 24             */
  --sl-size-2xl: clamp(34px, 26px + 3vw, 54px);         /* Figma 30 — hero      */

  --sl-line-tight:   1.15;
  --sl-line-snug:    1.30;
  --sl-line-body:    1.43;   /* 20/14 — the most common pairing */
  --sl-line-relaxed: 1.60;

  --sl-weight-regular:  400;
  --sl-weight-medium:   500;
  --sl-weight-semibold: 600;
  --sl-weight-bold:     700;

  /* ---- radius ---- (strays 2,5,6,13,17,20,24,27 snap to nearest) */
  --sl-radius-xs:   4px;
  --sl-radius-sm:   8px;
  --sl-radius-md:   12px;   /* cards — 236 uses */
  --sl-radius-lg:   16px;
  --sl-radius-pill: 9999px; /* 443 uses — pills/chips/buttons dominate */

  /* ---- spacing ---- (4px grid; auto-layout gaps resolve to this) */
  --sl-space-1:  4px;
  --sl-space-2:  8px;
  --sl-space-3:  12px;
  --sl-space-4:  16px;   /* standard gutter on the 390px frames */
  --sl-space-5:  20px;
  --sl-space-6:  24px;
  --sl-space-8:  32px;
  --sl-space-10: 40px;
  --sl-space-12: 48px;
  --sl-space-16: 64px;

  --sl-gutter:      var(--sl-space-4);
  --sl-content-max: var(--page-width, 1200px);

  /* ---- elevation ---- */
  --sl-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
  --sl-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
  --sl-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.12);
  --sl-shadow-sticky: 0 -2px 12px rgba(0, 0, 0, 0.08);

  /* ---- motion ---- (no timing in static frames; these are the house defaults) */
  --sl-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --sl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sl-dur-fast: 140ms;
  --sl-dur-base: 240ms;
  --sl-dur-slow: 420ms;
  --sl-reveal-y: 16px;
  --sl-stagger:  60ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-dur-fast: 1ms;
    --sl-dur-base: 1ms;
    --sl-dur-slow: 1ms;
    --sl-reveal-y: 0px;
    --sl-stagger:  0ms;
  }
}

/* ========================================================================== *
 * 2. MOTION
 *
 * Section ENTRANCE animation is the Wonder theme's own system — put
 * `scroll-trigger animate--slide-in` on content elements and `data-cascade`
 * on their parent. Do not reinvent it here.
 *
 * This layer adds only what the theme lacks:
 *   data-sl-press        tactile scale-down on pointer press   (CSS, below)
 *   data-sl-count="4.7"  number counts up when scrolled in     (stravian-motion.js)
 *   data-sl-collapse     height-animated <details>             (stravian-motion.js)
 * ========================================================================== */

[data-sl-press] {
  transition:
    transform  var(--sl-dur-fast, 140ms) var(--sl-ease-out),
    box-shadow var(--sl-dur-fast, 140ms) var(--sl-ease-out);
  touch-action: manipulation;
}

@media (hover: hover) {
  [data-sl-press]:hover { transform: translate3d(0, -1px, 0); }
}

[data-sl-press]:active { transform: scale(0.97); }

[data-sl-press]:focus-visible {
  outline: 2px solid var(--sl-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [data-sl-press] { transition: none; }
  [data-sl-press]:hover,
  [data-sl-press]:active { transform: none; }
}

/* ========================================================================== *
 * 3. COMPONENTS
 * ========================================================================== */

/* The theme sets headings to uppercase with +0.5 letter-spacing
   (type_headings_font_uppercase). The Figma is sentence case throughout, so
   Stravian components opt out explicitly rather than inheriting it. Change the
   theme's own setting if you want uppercase back globally. */
.sl-section__title,
.sl-hero__heading,
.sl-hero__eyebrow,
.sl-card__name,
.sl-empty__title {
  text-transform: none;
  letter-spacing: normal;
}

/* ---- shared section rhythm ---------------------------------------------- */

.sl-section {
  padding-block: var(--sl-space-8);
  background: var(--sl-bg);
}

.sl-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sl-space-4);
  padding-inline: var(--sl-gutter);
  margin-block-end: var(--sl-space-4);
}

.sl-section__title {
  margin: 0;
  font-family: var(--sl-font-display);
  font-size: var(--sl-size-md);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-snug);
  color: var(--sl-ink);
}

.sl-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-1);
  flex: none;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-accent);
  text-decoration: none;
  white-space: nowrap;
}

.sl-section__link svg { flex: none; }

/* ---- category rail ("Find Your Fit") ---------------------------------------
 * Figma "Section - Find Your Fit" (576:1529). Three 140x192 cards in a 342px
 * frame do not fit (3*140 + 2*16 = 452), so the design implies a scroll rail.
 * ------------------------------------------------------------------------- */

.sl-rail {
  --rail-card-w: 140px;
  --rail-card-h: 192px;
}

/* Three across, always on screen. The Figma frame draws fixed 140x192 cards
   that overflow a 390px viewport; here they divide the row evenly and keep the
   designed 140:192 proportion, so nothing is cut off and nothing scrolls. */
.sl-rail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rail-gap, 10px);
  padding-inline: var(--sl-gutter);
  margin: 0;
  list-style: none;
}

.sl-card {
  position: relative;
  aspect-ratio: 140 / 192;
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--card-bg, var(--sl-grey-800));
  color: var(--sl-ink-inverse);
  list-style: none;
}

.sl-card__link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(var(--sl-space-2), 2.5vw, var(--sl-space-4));
  color: inherit;
  text-decoration: none;
}

.sl-card__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  transition: transform var(--sl-dur-slow) var(--sl-ease-out);
}

.sl-card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 45%), rgb(0 0 0 / 12%) 45%, transparent 75%);
}

@media (hover: hover) {
  .sl-card__link:hover .sl-card__media { transform: scale(1.06); }
}

.sl-card__icon { width: clamp(20px, 6vw, 32px); height: clamp(20px, 6vw, 32px); }
.sl-card__icon :is(img, svg) { width: 100%; height: 100%; object-fit: contain; }

.sl-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sl-space-1);
}

/* Three narrow cards leave no room for both copy and the chevron disc. */
@media (max-width: 480px) {
  .sl-card__go { display: none; }
}

.sl-card__text { display: flex; flex-direction: column; gap: var(--sl-space-1); min-width: 0; }

/* Card text is sized against the CARD, not the page: three cards on a 390px
   screen are ~114px wide, so the section-title scale would not fit. */
.sl-card__name {
  margin: 0;
  font-family: var(--sl-font-display);
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: var(--sl-weight-bold);
  line-height: 1.2;
  text-wrap: balance;
}

.sl-card__desc {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.3;
}

/* On the narrowest phones the description would push the title off the card. */
@media (max-width: 380px) {
  .sl-card__desc { display: none; }
}

/* Figma draws a white chevron on a white disc — invisible. Chevron takes the card colour. */
.sl-card__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-grey-0);
  color: var(--card-bg, var(--sl-grey-800));
  transition: transform var(--sl-dur-base) var(--sl-ease-out);
}

@media (hover: hover) {
  .sl-card__link:hover .sl-card__go { transform: translateX(2px); }
}

.sl-card__link:focus-visible { outline: 2px solid var(--sl-accent); outline-offset: 2px; }

@media (min-width: 750px) {
  .sl-rail__grid {
    max-width: var(--sl-content-max);
    margin-inline: auto;
    gap: var(--sl-space-4);
  }
}
}

/* ---- hero -------------------------------------------------------------------
 * Figma "Section - Hero Banner" (576:1333). A sand panel with the product photo
 * bleeding to the edge, warm scrim, copy stacked bottom-left. Multi-slide =
 * scroll-snap carousel; no library, so it swipes natively and works without JS.
 * -------------------------------------------------------------------------- */

.sl-hero {
  --hero-h: 570px;
  --hero-ground: var(--sl-hero-sand);
  position: relative;
  padding-inline: var(--sl-gutter);
}

.sl-hero__track {
  display: flex;
  gap: var(--sl-space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--sl-radius-lg);
}

.sl-hero__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sl-hero__track { scroll-behavior: auto; }
}

.sl-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: var(--hero-h);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sl-space-6);
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--hero-ground);
}

.sl-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Warm wash from the panel colour so copy stays readable over any photo. */
.sl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--hero-ground) 0%, rgb(255 255 255 / 0%) 58%),
    linear-gradient(to right, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 62%);
}

.sl-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-2);
  max-width: 22ch;
}

.sl-hero__eyebrow {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  line-height: var(--sl-line-body);
  color: var(--sl-accent);
}

.sl-hero__heading {
  margin: 0;
  font-family: var(--sl-font-display);
  font-size: var(--sl-size-2xl);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  color: var(--sl-ink);
  text-wrap: balance;
}

.sl-hero__body {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  line-height: var(--sl-line-body);
  color: var(--sl-ink-body);
}

.sl-hero__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  margin-block-start: var(--sl-space-2);
  padding: var(--sl-space-2) var(--sl-space-4);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-grey-0);
  box-shadow: var(--sl-shadow-md);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  line-height: var(--sl-line-body);
  color: var(--sl-ink);
  text-decoration: none;
}

.sl-hero__cta svg { color: var(--sl-accent); flex: none; }

.sl-hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--sl-space-2);
  margin-block-start: var(--sl-space-4);
}

.sl-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-grey-300);
  cursor: pointer;
  transition: background var(--sl-dur-base) var(--sl-ease-out),
              width var(--sl-dur-base) var(--sl-ease-out);
}

.sl-hero__dot[aria-selected='true'] {
  width: 20px;
  background: var(--sl-accent);
}

.sl-hero__dot:focus-visible {
  outline: 2px solid var(--sl-accent);
  outline-offset: 3px;
}

@media (min-width: 750px) {
  .sl-hero { max-width: var(--sl-content-max); margin-inline: auto; }
  .sl-hero__slide { padding: var(--sl-space-12); }
  .sl-hero__copy { max-width: 34ch; gap: var(--sl-space-3); }
  /* The size ramp is fluid now, so it already grows on wide screens — an extra
     desktop multiplier here was compounding it to ~72px. */
  .sl-hero__body { font-size: var(--sl-size-sm); }
}

/* ---- category pills ---------------------------------------------------------
 * Figma "Nav - Product Categories" (1020:7796). Scrolls horizontally on mobile
 * because the four labels exceed 358px.
 * -------------------------------------------------------------------------- */

.sl-pills {
  display: flex;
  gap: var(--sl-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: var(--sl-gutter);
  padding-block-end: var(--sl-space-1);
  margin-block-end: var(--sl-space-4);
  scroll-padding-inline: var(--sl-gutter);
}

.sl-pills::-webkit-scrollbar { display: none; }

.sl-pill {
  flex: none;
  padding: var(--sl-space-2) var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-medium);
  line-height: var(--sl-line-body);
  color: var(--sl-ink-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sl-dur-fast) var(--sl-ease-out),
              border-color var(--sl-dur-fast) var(--sl-ease-out),
              color var(--sl-dur-fast) var(--sl-ease-out);
}

.sl-pill--active {
  background: var(--sl-accent-subtle);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}

@media (hover: hover) {
  .sl-pill:hover { border-color: var(--sl-border-strong); }
  .sl-pill--active:hover { border-color: var(--sl-accent); }
}

@media (min-width: 750px) {
  .sl-pills { max-width: var(--sl-content-max); margin-inline: auto; flex-wrap: wrap; overflow: visible; }
}

/* ---- pagination ---- */

.sl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-space-4);
  padding: var(--sl-space-8) var(--sl-gutter) 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
}

.sl-pagination__link {
  padding: var(--sl-space-2) var(--sl-space-4);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  color: var(--sl-ink);
  text-decoration: none;
  font-weight: var(--sl-weight-medium);
}

.sl-pagination__status { color: var(--sl-ink-muted); }

/* ---- empty state ------------------------------------------------------------
 * Shared by Empty Cart State, Search - No Results and Error Page — the three
 * Figma frames use one layout.
 * -------------------------------------------------------------------------- */

.sl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-12) var(--sl-space-6);
  max-width: 420px;
  margin-inline: auto;
}

.sl-empty__art {
  width: 96px;
  height: 96px;
  margin-block-end: var(--sl-space-2);
  color: var(--sl-grey-300);
}

.sl-empty__art svg { width: 100%; height: 100%; }

.sl-empty__title {
  margin: 0;
  font-family: var(--sl-font-display);
  font-size: var(--sl-size-lg);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-snug);
  color: var(--sl-ink);
}

.sl-empty__body {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  line-height: var(--sl-line-relaxed);
  color: var(--sl-ink-muted);
  text-wrap: pretty;
}

.sl-empty__cta {
  margin-block-start: var(--sl-space-2);
  padding: var(--sl-space-3) var(--sl-space-6);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-accent);
  color: var(--sl-accent-contrast);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  text-decoration: none;
}

.sl-empty__cta:hover { background: var(--sl-accent-hover); }

.sl-empty__secondary {
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  color: var(--sl-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- bottom nav -------------------------------------------------------------
 * Figma "Nav Bar" (610:1914). Pinned bar carrying menu / search / account /
 * cart. It forwards clicks to the theme's own header triggers, so the top
 * header keeps those controls in the DOM — they are just hidden from view.
 * -------------------------------------------------------------------------- */

.sl-bottomnav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--sl-z-header);
  background: var(--sl-surface);
  border-block-start: 1px solid var(--sl-border);
  box-shadow: var(--sl-shadow-sticky);
  /* clear the iOS home indicator */
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

.sl-bottomnav__inner {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  height: var(--sl-bottomnav-h, 62px);
  padding-inline: 13px;
}

.sl-bottomnav__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sl-grey-600);
  cursor: pointer;
  border-radius: var(--sl-radius-pill);
  transition: color var(--sl-dur-fast) var(--sl-ease-out),
              background var(--sl-dur-fast) var(--sl-ease-out),
              transform var(--sl-dur-fast) var(--sl-ease-out);
  text-decoration: none;
  position: relative;
}

.sl-bottomnav__icon svg { width: 26px; height: 26px; }

@media (hover: hover) {
  .sl-bottomnav__icon:hover { color: var(--sl-accent); background: var(--sl-accent-subtle); }
}

.sl-bottomnav__icon:active { transform: scale(0.9); }

.sl-bottomnav__icon:focus-visible {
  outline: 2px solid var(--sl-accent);
  outline-offset: 2px;
}

/* ---- search field ---- */

.sl-bottomnav__search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  height: 35px;
  padding-inline: 16px 12px;
  border: 1px solid var(--sl-border-strong);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface);
  margin: 0;
  transition: border-color var(--sl-dur-fast) var(--sl-ease-out),
              box-shadow var(--sl-dur-fast) var(--sl-ease-out);
}

.sl-bottomnav__search:focus-within {
  border-color: var(--sl-accent);
  box-shadow: 0 0 0 3px var(--sl-accent-subtle);
}

.sl-bottomnav__field {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  line-height: 1.2;
  color: var(--sl-ink);
}

.sl-bottomnav__field::placeholder { color: var(--sl-ink-faint); }

/* Safari puts its own clear affordance on type=search. */
.sl-bottomnav__field::-webkit-search-decoration,
.sl-bottomnav__field::-webkit-search-cancel-button { -webkit-appearance: none; }

.sl-bottomnav__search-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sl-ink-faint);
  cursor: pointer;
}

.sl-bottomnav__search-btn svg { width: 20px; height: 20px; }
.sl-bottomnav__search-btn:hover { color: var(--sl-accent); }

/* ---- cart count ---- */

.sl-bottomnav__count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-accent);
  color: var(--sl-accent-contrast);
  font-family: var(--sl-font-num);
  font-size: var(--sl-size-3xs);
  font-weight: var(--sl-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sl-bottomnav__count[hidden] { display: none; }

/* ---- page clearance ----
 * Without this the bar covers the footer and any sticky add-to-cart. */

body { padding-block-end: calc(var(--sl-bottomnav-space, 62px) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 990px) {
  body { padding-block-end: 0; }
}

/* ---- top header: hide the controls the bottom bar now owns ----
 * They stay in the DOM on purpose. The bottom bar clicks them to open the
 * theme's drawers, so removing them would break the drawers. This replaces the
 * `display:none !important` block that was pasted into the theme's `fontfaces`
 * setting, which hid them without providing anywhere else to click. */

@media (max-width: 989px) {
  .sl-has-bottomnav .wt-header__menu-trigger,
  .sl-has-bottomnav .wt-header__sticky-menu-trigger,
  .sl-has-bottomnav .wt-header__body--search,
  .sl-has-bottomnav .wt-header__search-trigger {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
  }
}

/* ---- science hub ------------------------------------------------------------
 * Figma "Science Library - All" (896:3915) + "Article - Video Card 1"
 * (946:4435). Styling only: the section's metaobject queries, data-* hooks and
 * filter script belong to the backend and were not touched.
 * -------------------------------------------------------------------------- */

.sl-sci {
  padding: var(--sl-space-6) var(--sl-gutter) var(--sl-space-12);
  max-width: var(--sl-content-max);
  margin-inline: auto;
}

.sl-sci__head { margin-block-end: var(--sl-space-5); }

.sl-sci__title {
  margin: 0 0 var(--sl-space-2);
  font-family: var(--sl-font-display);
  font-size: var(--sl-size-xl);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  color: var(--sl-ink);
  text-transform: none;
  letter-spacing: normal;
}

.sl-sci__intro {
  margin: 0;
  max-width: 62ch;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  line-height: var(--sl-line-relaxed);
  color: var(--sl-ink-muted);
  text-wrap: pretty;
}

/* ---- type pills: real radios, Figma styling ---- */

.sl-sci__pills {
  display: flex;
  gap: var(--sl-space-3);
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
  margin: 0 0 var(--sl-space-3);
  padding: 0 0 var(--sl-space-1);
}

.sl-sci__pills::-webkit-scrollbar { display: none; }

.sl-pill--radio {
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
}

.sl-pill--radio input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.sl-pill--radio > span {
  display: block;
  padding: var(--sl-space-2) var(--sl-space-5);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-medium);
  line-height: var(--sl-line-body);
  color: var(--sl-ink-body);
  white-space: nowrap;
  transition: background var(--sl-dur-fast) var(--sl-ease-out),
              border-color var(--sl-dur-fast) var(--sl-ease-out),
              color var(--sl-dur-fast) var(--sl-ease-out);
}

.sl-pill--radio input:checked + span {
  background: var(--sl-accent-subtle);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}

.sl-pill--radio input:focus-visible + span {
  outline: 2px solid var(--sl-accent);
  outline-offset: 2px;
}

/* ---- search + sort bar ---- */

.sl-sci__bar {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  min-height: 48px;
  padding-inline: var(--sl-space-3);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  background: var(--sl-surface);
  box-shadow: var(--sl-shadow-sm);
  margin-block-end: var(--sl-space-3);
}

.sl-sci__bar-icon { flex: none; width: 16px; height: 16px; color: var(--sl-ink-faint); }
.sl-sci__bar-icon svg { width: 100%; height: 100%; }

.sl-sci__search {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: var(--sl-space-2) var(--sl-space-1);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  color: var(--sl-ink);
}

.sl-sci__search::placeholder { color: var(--sl-ink-faint); }
.sl-sci__search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* On a phone the search field and the sort control fight for one row and the
   placeholder gets clipped. Below 600px the sort drops onto its own line. */
@media (max-width: 599px) {
  .sl-sci__bar { flex-wrap: wrap; padding-block: 8px; }
  .sl-sci__bar-icon { order: 0; }
  .sl-sci__search { flex: 1 1 auto; order: 1; }
  .sl-sci__sort {
    flex: 1 1 100%;
    order: 2;
    border-top: 1px solid var(--sl-border);
    padding-top: 8px;
    margin-top: 4px;
  }
  .sl-sci__sort select { max-width: 100%; width: 100%; }
}

.sl-sci__sort select {
  border: 0;
  background: none;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-2xs);
  color: var(--sl-ink-muted);
  cursor: pointer;
  max-width: 132px;
}

/* ---- facets ---- */

.sl-sci__facets { margin-block-end: var(--sl-space-4); }

.sl-sci__facets > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-1);
  cursor: pointer;
  list-style: none;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-ink-body);
}

.sl-sci__facets > summary::-webkit-details-marker { display: none; }
.sl-sci__facets [data-sl-collapse-icon] { transition: transform var(--sl-dur-base) var(--sl-ease-out); }
.sl-sci__facets[open] > summary [data-sl-collapse-icon] { transform: rotate(180deg); }

.sl-sci__facet { padding-block-start: var(--sl-space-3); }

.sl-sci__facet-label {
  margin: 0 0 var(--sl-space-2);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-2xs);
  font-weight: var(--sl-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sl-ink-muted);
}

.sl-sci__chips { display: flex; flex-wrap: wrap; gap: var(--sl-space-2); }

.sl-chip { position: relative; cursor: pointer; }

.sl-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.sl-chip > span {
  display: block;
  padding: var(--sl-space-1) var(--sl-space-3);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-surface);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-2xs);
  color: var(--sl-ink-body);
  white-space: nowrap;
  transition: background var(--sl-dur-fast) var(--sl-ease-out),
              border-color var(--sl-dur-fast) var(--sl-ease-out);
}

.sl-chip input:checked + span {
  background: var(--sl-accent-subtle);
  border-color: var(--sl-accent);
  color: var(--sl-accent);
}

.sl-chip input:focus-visible + span { outline: 2px solid var(--sl-accent); outline-offset: 2px; }

/* ---- results ---- */

.sl-sci__count {
  margin: 0 0 var(--sl-space-4);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-2xs);
  color: var(--sl-ink-muted);
}

.sl-sci__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sl-space-5) var(--sl-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 750px) {
  .sl-sci__grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sl-space-6) var(--sl-space-4);
  }
}

.sl-sci__card { display: flex; flex-direction: column; gap: var(--sl-space-2); }

.sl-sci__card-link {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-2);
  text-decoration: none;
  color: inherit;
}

.sl-sci__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 172 / 97;
  border-radius: var(--sl-radius-sm);
  background: var(--sl-grey-100);
  overflow: hidden;
}

.sl-sci__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sl-dur-slow) var(--sl-ease-out);
}

@media (hover: hover) {
  .sl-sci__card-link:hover .sl-sci__img { transform: scale(1.05); }
}

.sl-sci__play {
  position: absolute;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-grey-0);
  box-shadow: var(--sl-shadow-md);
  color: var(--sl-accent);
  transition: transform var(--sl-dur-base) var(--sl-ease-spring);
}

.sl-sci__play svg { width: 14px; height: 16px; margin-inline-start: 2px; }

@media (hover: hover) {
  .sl-sci__card-link:hover .sl-sci__play { transform: scale(1.1); }
}

.sl-sci__dur,
.sl-sci__kind {
  position: absolute;
  inset-block-end: var(--sl-space-2);
  inset-inline-end: var(--sl-space-2);
  padding: 2px 6px;
  border-radius: var(--sl-radius-xs);
  background: rgb(0 0 0 / 72%);
  color: var(--sl-grey-0);
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-3xs);
  font-weight: var(--sl-weight-medium);
  line-height: 1.5;
}

.sl-sci__kind {
  inset-block-end: auto;
  inset-inline-end: auto;
  inset-block-start: var(--sl-space-2);
  inset-inline-start: var(--sl-space-2);
  background: var(--sl-accent);
}

.sl-sci__card-title {
  font-family: var(--sl-font-display);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-bold);
  line-height: 1.28;
  color: var(--sl-grey-800);
  text-transform: none;
  letter-spacing: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sl-sci__card-link:focus-visible .sl-sci__card-title {
  outline: 2px solid var(--sl-accent);
  outline-offset: 2px;
}

.sl-sci__meta {
  margin: 0;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-2xs);
  line-height: 1.33;
  color: var(--sl-grey-500);
}

.sl-sci__meta:empty { display: none; }

.sl-sci__empty { grid-column: 1 / -1; }

/* ---- bottom-bar search results ----------------------------------------------
 * Opens upward, above the bar, because the bar is pinned to the bottom. This is
 * why the field does not reuse the theme's search drawer: that drawer focuses
 * the header input and scrolls the page to the top.
 * -------------------------------------------------------------------------- */

.sl-search-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% + var(--sl-space-2));
  z-index: var(--sl-z-drawer);
  max-height: min(60vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: var(--sl-surface);
  box-shadow: var(--sl-shadow-lg);
}

.sl-search-panel[hidden] { display: none; }

.sl-search-panel__row {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding: var(--sl-space-2);
  border-radius: var(--sl-radius-sm);
  text-decoration: none;
  color: inherit;
}

.sl-search-panel__row:hover,
.sl-search-panel__row:focus-visible {
  background: var(--sl-bg-muted);
  outline: none;
}

.sl-search-panel__img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--sl-radius-sm);
  background: var(--sl-bg-subtle);
}

.sl-search-panel__img--none { display: block; }

.sl-search-panel__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sl-search-panel__name {
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-medium);
  line-height: 1.3;
  color: var(--sl-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sl-search-panel__price {
  font-family: var(--sl-font-num);
  font-size: var(--sl-size-2xs);
  color: var(--sl-ink-muted);
  font-variant-numeric: tabular-nums;
}

.sl-search-panel__empty {
  margin: 0;
  padding: var(--sl-space-4);
  text-align: center;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  color: var(--sl-ink-muted);
}

.sl-search-panel__all {
  display: block;
  width: 100%;
  margin-block-start: var(--sl-space-1);
  padding: var(--sl-space-3);
  border: 0;
  border-block-start: 1px solid var(--sl-border);
  background: none;
  cursor: pointer;
  font-family: var(--sl-font-ui);
  font-size: var(--sl-size-xs);
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-accent);
  text-align: center;
}

.sl-search-panel__all:hover { background: var(--sl-accent-subtle); }

/* The search form is the panel's positioning context. */
.sl-bottomnav__search { position: relative; }

/* ---- A+ content ----------------------------------------------------------- *
 * sections/stravian-aplus.liquid — a stack of pre-composed brand panels.
 * Adds no type of its own; the panels carry their own text.
 * ------------------------------------------------------------------------- */

.slaplus {
  max-width: var(--slaplus-max, 960px);
  margin-inline: auto;
  padding-inline: 16px;
}

.slaplus__heading {
  text-align: center;
  margin: 0 0 20px;
}

.slaplus__stack {
  display: flex;
  flex-direction: column;
  gap: var(--slaplus-gap, 16px);
}

.slaplus__panel {
  margin: 0;
  border-radius: var(--slaplus-radius, 16px);
  overflow: hidden;
  background: var(--sl-bg-subtle, #f6f7f9);
}

.slaplus__panel img {
  display: block;
  width: 100%;
  height: auto;
}

.slaplus__link {
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

.slaplus__link:focus-visible {
  outline: 2px solid var(--sl-accent, #ff5f00);
  outline-offset: 3px;
}

.slaplus__caption {
  padding: 10px 4px 0;
  font-family: var(--font-base, inherit);
  font-size: 13px;
  line-height: 1.4;
  color: var(--sl-ink-muted, #6b7280);
  text-align: center;
}

.slaplus__hint {
  padding: 24px;
  text-align: center;
  color: var(--sl-ink-muted, #6b7280);
  border: 1px dashed var(--sl-border, #e5e7eb);
  border-radius: var(--slaplus-radius, 16px);
}

@media (min-width: 750px) {
  .slaplus { padding-inline: 24px; }
}

/* ---- product cards without a photo -------------------------------------- *
 * The theme fills an empty product image with solid black (.card__img--empty),
 * which reads as broken on a storefront that is still adding photography.
 * Until real images are uploaded, show a soft branded placeholder instead.
 * ------------------------------------------------------------------------- */

.card__img--empty,
.card__picture .card__img--empty,
.media--empty,
.wt-card__image--empty {
  background: linear-gradient(155deg, var(--sl-grey-50, #f9fafb) 0%, var(--sl-grey-200, #e5e7eb) 100%) !important;
  position: relative;
}

.card__img--empty::after,
.media--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 38% at 50% 42%, rgba(255, 95, 0, 0.10), rgba(255, 95, 0, 0) 70%);
}

.card__img--empty svg,
.media--empty svg {
  opacity: 0.28;
  filter: grayscale(1);
}

/* ---- PDP: stand-in image slider until real product media is uploaded ------
 * snippets/sl-listing.liquid renders twice: --inline (mobile, under the <h1>)
 * and --gallery (desktop, in the product's gallery column). custom.css shows
 * one per breakpoint. The empty native gallery is hidden. Once real media is
 * uploaded the slider is skipped and the theme's gallery returns.
 * ------------------------------------------------------------------------- */
.wt-product--sl-no-media > gallery-section,
.wt-product--sl-no-media .wt-slider__nav-btn { display: none !important; }

.sl-listing { position: relative; }

.sl-listing__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px;
}
.sl-listing__track::-webkit-scrollbar { display: none; }

.sl-listing__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.sl-listing__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: var(--sl-bg-subtle, #f6f7f9);
}

.sl-listing__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.sl-listing__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--sl-grey-300, #d1d5db);
  cursor: pointer;
  transition: width 0.24s ease, background 0.24s ease;
}
.sl-listing__dot[aria-selected='true'] {
  width: 20px;
  background: var(--sl-accent, #ff5f00);
}
.sl-listing__dot:focus-visible {
  outline: 2px solid var(--sl-accent, #ff5f00);
  outline-offset: 3px;
}

/* mobile: show the inline copy under the title, hide the gallery copy */
.sl-listing--gallery { display: none; }
.sl-listing--inline { margin: 12px 0 4px; }

/* pack-size switcher (e.g. Magnesium 60/120 tablets): explicit override so
   [hidden] always wins over the display:block/none rules above */
.sl-listing[hidden] { display: none !important; }

/* desktop: two real columns — image slider left (sticky), buy panel right */
@media (min-width: 900px) {
  .sl-listing--inline { display: none; }
  .sl-listing--gallery { display: block; }

  .wt-product.wt-product--sl-no-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 36%, 480px);
    column-gap: clamp(32px, 4vw, 80px);
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
  }
  .wt-product--sl-no-media > .sl-listing--gallery {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--gap, 8px) * 2);
    align-self: start;
  }
  .wt-product--sl-no-media > .wt-product__main {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin-top: 0;
  }
  .wt-product--sl-no-media > .wt-product__sticky-buy,
  .wt-product--sl-no-media > sticky-buy-button { grid-column: 1 / -1; }

  .sl-listing--gallery .sl-listing__track,
  .sl-listing--gallery .sl-listing__img { border-radius: 18px; }
  .sl-listing--gallery .sl-listing__dots { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-listing__track { scroll-behavior: auto; }
  .sl-listing__dot { transition: none; }
}

/* ---- Judge.me reviews widget: collapse to a single "Product reviews" panel
 * (no Store reviews tab — Stravian has one store-wide, per-product reviews
 * are what matters here) and make the section read bigger/more prominent. */
#judgeme_product_reviews { padding-block: clamp(24px, 4vw, 48px); }
#judgeme_product_reviews .jm-review-widget-minimal-header__tabs { display: none !important; }
#judgeme_product_reviews .jm-review-widget-minimal-header__title {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 700 !important;
}
#judgeme_product_reviews .jm-action-buttons__button {
  font-size: 15px !important;
  padding: 14px 30px !important;
  border-radius: var(--sl-radius-pill, 9999px) !important;
}

/* ---- Article body: hand-authored HTML (h2/p/ul/em) from the metaobject --- */
.stravian-article-body h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin: 32px 0 12px;
  color: var(--sl-ink, #111827);
}
.stravian-article-body h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin: 24px 0 10px;
}
.stravian-article-body p { margin: 0 0 16px; }
.stravian-article-body ul,
.stravian-article-body ol { margin: 0 0 16px; padding-left: 22px; }
.stravian-article-body li { margin-bottom: 6px; }
.stravian-article-body strong { font-weight: 700; }
.stravian-article-body em { font-style: italic; }
.stravian-article-body a { color: var(--sl-accent, #ff5f00); text-decoration: underline; }

/* ---- Footer: rich content in the 3 lower footer blocks -------------------
 * custom_liquid blocks render native <details class="slfoot-sec"> accordions
 * (the theme's own .wt-collapse__target--v2 grid target will not expand inside
 * the footer's flex column, so we don't use it). Collapsed on mobile, forced
 * open as columns on desktop.
 * ------------------------------------------------------------------------- */
.wt-footer__block--custom_liquid { flex: 1 1 28%; padding-top: 0; padding-bottom: 0; }
.wt-footer__block--text { padding-top: 0; }

.slfoot-sec {
  border-top: 1px solid rgba(var(--color-footer-text-rgb, 255, 255, 255), 0.18);
}
.slfoot-sec > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.slfoot-sec > summary::-webkit-details-marker { display: none; }
.slfoot-sec > summary::marker { content: ""; }
.slfoot-ico { flex: none; font-size: 1.15rem; line-height: 1; opacity: 0.7; font-weight: 400; }
.slfoot-ico::after { content: "+"; }
.slfoot-sec[open] > summary .slfoot-ico::after { content: "\2212"; }

.slfoot-sec:not([open]) > .slfoot { display: none; }
.slfoot { font-size: 0.9rem; line-height: 1.55; padding: 0 0 18px; }
.slfoot > * + * { margin-top: 12px; }
.slfoot p { margin: 0; opacity: 0.82; }
.slfoot strong { font-weight: 600; opacity: 1; }
.slfoot a { text-decoration: none; }
.slfoot a:hover { text-decoration: underline; }
.slfoot__links { list-style: none; margin: 0; padding: 0; }
.slfoot__links li + li { margin-top: 8px; }
.slfoot__pillar { display: block; }
.slfoot__pillar strong { display: block; margin-bottom: 2px; }
.slfoot__pillar span { opacity: 0.72; font-size: 0.85em; }
.slfoot__faq { margin-top: 14px; }
.slfoot__faq details {
  border-top: 1px solid rgba(var(--color-footer-text-rgb, 255,255,255), 0.16);
  padding: 9px 0;
}
.slfoot__faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.slfoot__faq summary::-webkit-details-marker { display: none; }
.slfoot__faq summary::after { content: "+"; opacity: 0.6; }
.slfoot__faq details[open] summary::after { content: "\2212"; }
.slfoot__faq details p { margin-top: 7px; }

/* desktop: always-open columns, no toggle (mirrors the theme's data-mobile-only) */
@media (min-width: 900px) {
  .slfoot-sec { border-top: 0; }
  .slfoot-sec > summary { pointer-events: none; padding: 0 0 12px; }
  .slfoot-ico { display: none; }
  .slfoot-sec:not([open]) > .slfoot,
  .slfoot-sec[open] > .slfoot { display: block; padding-bottom: 0; }
}