/* ============================================================================
   SAVA — external CSS bundle
   Hosted: https://cdn.jsdelivr.net/gh/friendincommerce/sava-cdn@main/sava.css
   Loaded from Webflow Site Settings → Head + carried into Shopify theme.liquid
   ============================================================================ */

:root {
	--sava-gradient-soft-white-fade: linear-gradient(180deg, rgba(248,248,248,0) 49.52%, rgba(222,221,215,0.5) 100%);
	--sava-gradient-light-peach-fade: linear-gradient(180deg, #FFFFFF 49.52%, #F6D7B9 100%);
	--sava-gradient-light-peach-fade-transparent: linear-gradient(180deg, rgba(248,248,248,0) 49.52%, #F6D7B9 100%);
	--sava-gradient-lemon-fade: linear-gradient(180deg, #FFFFFF 49.52%, #EDE087 100%);
	--sava-gradient-blueberry-fade: linear-gradient(180deg, #FFFFFF 49.52%, #99BBE1 100%);
	--sava-gradient-sunrise: linear-gradient(90deg, #F2CBCB 0%, #F6D7B9 100%);
	--sava-gradient-dark: linear-gradient(0deg, #262524 0%, #545351 100%);
}

/* ============================================================================
   SAVA HARD WIDTH CAP (site-wide, installed 2026-07-01)
   The Liquify template scales the root font-size fluidly with the viewport
   (html { font-size: calc(0.8125rem + 0.20833vw) } in its global styles), so
   85rem containers grow past 1360px on large monitors (e.g. 1540px @ 2455px).
   This freezes rem at 16px above the 1440px design width → all 85rem
   containers cap at exactly 1360px and type stops scaling up.
   TO REVERT to fluid scaling: delete THIS BLOCK ONLY, commit, swap the hash.
   Nothing else references or depends on it.
   ============================================================================ */
@media (min-width: 1440px) {
	html { font-size: 16px !important; }
}

/* ===== SAVA Link Card ===== */

.sava-link-card:hover .sava-link-card_button {
	background-color: var(--_sava-color-styles---white);
	border-color: var(--_sava-color-styles---white);
}

/* ===== SAVA Shop by Benefit ===== */

.sava-shop-by-benefit_card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sava-gradient-light-peach-fade);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
}
.sava-shop-by-benefit_card:hover::before {
	opacity: 1;
}
.sava-shop-by-benefit_card-content {
	position: relative;
	z-index: 1;
}
.sava-shop-by-benefit_card:hover .sava-shop-by-benefit_card-arrow {
	opacity: 1;
	transform: translateX(0);
	margin-right: 8px;
}

@media (max-width: 991px) {
	.sava-shop-by-benefit_grid {
	  -ms-overflow-style: none;
	  scrollbar-width: none;
	}
	.sava-shop-by-benefit_grid::-webkit-scrollbar {
	  display: none;
	}
}

/* ===== SAVA Ingredients Promise ===== */

.sava-ingredients-callouts_modal-overlay.is-open {
	display: flex;
}

.sava-ingredients-callouts_claims::-webkit-scrollbar,
.sava-ingredients-callouts_ingredients-grid::-webkit-scrollbar {
	display: none;
}
.sava-ingredients-callouts_claims,
.sava-ingredients-callouts_ingredients-grid {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.sava-ingredients-callouts_button:hover,
.sava-product-card_button:hover {
	background-color: var(--_sava-color-styles---soft-black);
	color: var(--_sava-color-styles---white);
}

/* Hide Product Tags toggle (merchant-controlled via section setting) */
[data-sava-hide-tags="true"] .sava-product-card_tags {
	display: none;
}

/* ===== SAVA Footer ===== */

.sava-footer_form-input::placeholder { color: rgba(248, 248, 248, 0.7); }
.sava-footer_form-input::-webkit-input-placeholder { color: rgba(248, 248, 248, 0.7); }

.sava-footer form,
.sava-footer .w-form,
.sava-footer .sava-footer_form,
.sava-footer .sava-footer_form-wrapper {
	position: relative;
}

.sava-footer .sava-footer_form-submit,
.sava-footer input[type="submit"].sava-footer_form-submit {
	position: absolute !important;
	top: 50% !important;
	right: 4px !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: transparent !important;
	background-image: url('https://cdn.prod.website-files.com/69ffc1011bc4b498238115c4/6a001adb40613842167d0f24_sava-arrow-up-right.svg') !important;
	background-size: 22px 22px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.sava-footer .w-form-done,
.sava-footer .w-form-fail {
	background-color: transparent !important;
	padding: 12px 0 !important;
	border: 0 !important;
}

.sava-footer_col-heading::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	display: none;
	margin-left: 8px;
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.sava-footer_col-heading::after { display: inline-block; }
	.sava-footer_col-heading[aria-expanded="true"]::after { transform: rotate(-135deg); }
}

/* ===== SAVA Rewards + Promotional Banner ===== */

@keyframes sava-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.sava-banner_track { animation: none !important; }
}

.sava-banner:hover .sava-banner_track { animation-play-state: paused; }

.sava-rewards_button-primary:hover {
	background-color: var(--_sava-color-styles---white) !important;
	color: var(--_sava-color-styles---soft-black) !important;
}

.sava-rewards_button-secondary:hover {
	background-color: var(--_sava-color-styles---soft-black) !important;
	color: var(--_sava-color-styles---white) !important;
}

.sava-rewards_card:hover,
.sava-rewards a.sava-rewards_card:hover {
	background-color: transparent !important;
	background-image: linear-gradient(180deg, rgba(248, 248, 248, 0) 49.52%, #F8F8F8 100%) !important;
}

/* ===== SAVA Shop by Product ===== */

.sava-shop-by-product_card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #FFFFFF 49.52%, var(--card-hover-end, #EDE087) 100%);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
}
.sava-shop-by-product_card:hover::before {
	opacity: 1;
}

.sava-shop-by-product_card:hover .sava-shop-by-product_logo {
	transform: translateY(-20px);
}

.sava-shop-by-product_card:hover .sava-shop-by-product_category {
	opacity: 1;
	transform: translateY(0);
}
.sava-shop-by-product_card:hover .sava-shop-by-product_category:nth-child(1) { transition-delay: 0.3s; }
.sava-shop-by-product_card:hover .sava-shop-by-product_category:nth-child(2) { transition-delay: 0.6s; }
.sava-shop-by-product_card:hover .sava-shop-by-product_category:nth-child(3) { transition-delay: 0.9s; }
.sava-shop-by-product_card:hover .sava-shop-by-product_category:nth-child(4) { transition-delay: 1.2s; }
.sava-shop-by-product_card:hover .sava-shop-by-product_category:nth-child(5) { transition-delay: 1.5s; }

.sava-shop-by-product_category {
	transition-delay: 0s;
}

/* ===== SAVA Referral Bonus ===== */

.sava-referral-bonus form,
.sava-referral-bonus .w-form,
.sava-referral-bonus .sava-referral-bonus_form-wrapper {
	position: relative;
}

.sava-referral-bonus .sava-referral-bonus_form-submit,
.sava-referral-bonus input[type="submit"].sava-referral-bonus_form-submit {
	position: absolute !important;
	top: 50% !important;
	right: 4px !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--_sava-color-styles---soft-black) !important;
	background-image: url('https://cdn.prod.website-files.com/69ffc1011bc4b498238115c4/6a001adb40613842167d0f24_sava-arrow-up-right.svg') !important;
	background-size: 14px 14px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
}

.sava-referral-bonus_form-input::placeholder { color: rgba(38, 37, 36, 0.6); }
.sava-referral-bonus_form-input::-webkit-input-placeholder { color: rgba(38, 37, 36, 0.6); }

.sava-referral-bonus .w-form-done,
.sava-referral-bonus .w-form-fail {
	background-color: transparent !important;
	padding: 12px 0 !important;
	border: 0 !important;
}

/* ===== SAVA Best Sellers ===== */

/* Card hover lift — scoped so Ingredients Promise modal cards are unaffected */
.sava-best-sellers .sava-product-card {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sava-best-sellers .sava-product-card:hover {
	transform: translateY(-4px);
}

/* Equal-height cards in the carousel + cart button anchored to card bottom.
   Targets Swiper's own .swiper-wrapper / .swiper-slide classes (NOT the
   Webflow _swiper-slide class) — avoids putting display:flex on the slide,
   which breaks native <select> rendering in mobile WebKit. */
.sava-best-sellers_swiper .swiper-wrapper {
	align-items: stretch;
}
.sava-best-sellers_swiper .swiper-slide {
	height: auto;
}
.sava-best-sellers_swiper .swiper-slide > .sava-product-card {
	height: 100%;
	min-height: 100%;
}
/* Push the form (containing variant dropdown + cart button) to the bottom of
   each card so cart buttons align across all cards regardless of content. */
.sava-best-sellers .sava-product-card form {
	margin-top: auto;
}

/* Force carousel arrows visible even when Swiper applies its lock class
   (Swiper miscalculates slide overflow at mobile during init). */
.sava-best-sellers_carousel-btn.swiper-button-lock {
	display: inline-flex !important;
	opacity: 1 !important;
}

/* Cart button — default: "Add to Cart" text on the left + small black "+" circle on the right.
   Hover: a black fill (::before pseudo) expands LEFT from the circle to engulf the text → continuous black pill with white text + white +. */
.sava-best-sellers_card-cart-button {
	position: relative;
	overflow: hidden;
}

/* Expanding fill — constant border-radius (clamps to height/2 = pill always).
   Only width transitions, so the right edge stays nicely rounded the entire animation. */
.sava-best-sellers_card-cart-button::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 1.75rem;
	height: 1.75rem;
	transform: translateY(-50%);
	background-color: var(--_sava-color-styles---soft-black);
	border-radius: 9999px;
	transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 0;
	pointer-events: none;
}
.sava-best-sellers .sava-product-card:hover .sava-best-sellers_card-cart-button::before,
.sava-best-sellers_card-cart-button:hover::before,
.sava-best-sellers_card-cart-button:focus-visible::before {
	width: 100%;
}

/* Label color flips to soft-white when the black fill expands behind it */
.sava-best-sellers_card-cart-label {
	transition: color 0.3s ease;
}
.sava-best-sellers .sava-product-card:hover .sava-best-sellers_card-cart-label,
.sava-best-sellers_card-cart-button:hover .sava-best-sellers_card-cart-label {
	color: var(--_sava-color-styles---soft-white);
}

/* Optical nudge — only the "+" icon needs adjustment in production.
   Gibson positions "+" slightly below cap-letter center within its line box.
   -1px brings it visually flush with the "Add to Cart" cap-letter baseline.
   Label gets no transform (it aligns naturally via matching line-height). */
.sava-best-sellers_card-cart-icon {
	transform: translateY(-1px);
}

/* Mobile: shorten cart button label from "Add to Cart" → "Add" so it fits
   beside the variant dropdown on a single row. Uses inline-flex + align-items
   center for reliable vertical centering of "Add" — doesn't rely on font
   baseline math (which gets unpredictable with font-size: 0 parent). */
@media (max-width: 767px) {
	.sava-best-sellers_card-cart-label {
	  font-size: 0;
	  line-height: 1;
	  display: inline-flex;
	  align-items: center;
	  height: 1.75rem;
	}
	.sava-best-sellers_card-cart-label::before {
	  content: "Add";
	  font-size: 0.875rem;
	  line-height: 1;
	}
}

/* Carousel arrow buttons scale on hover */
.sava-best-sellers_carousel-btn {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sava-best-sellers_carousel-btn:hover {
	transform: scale(1.05);
}

/* Category card hover: image visible by default, dark overlay fades IN on hover */
.sava-best-sellers_category-overlay {
	transition: opacity 0.4s ease;
}
.sava-best-sellers_category:hover .sava-best-sellers_category-overlay {
	opacity: 0.6;
}

/* Variant select — strip browser's native chevron. The custom chevron lives
   on the wrap's ::after (below), not on the select, because SVG data URLs
   get corrupted somewhere between Webflow and Shopify conversion. */
.sava-best-sellers_card-variant-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
}

.sava-best-sellers_card-variant-select::-ms-expand {
	display: none;
}

.sava-best-sellers_card-variant-select:focus {
	outline: 1px solid var(--_sava-color-styles---soft-black);
	outline-offset: 2px;
}

.sava-best-sellers_card-variant-select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 var(--_sava-color-styles---soft-black);
}

/* Custom chevron via pure CSS border-trick — two borders rotated 45deg
   form a "v" shape. No SVG, no data URLs, no font dependency, no Webflow
   parser issues. Wrap has position: relative (set in Webflow Designer). */
.sava-best-sellers_card-variant-wrap::after {
	content: '';
	position: absolute;
	right: 0.85rem;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--_sava-color-styles---soft-black);
	border-bottom: 1.5px solid var(--_sava-color-styles---soft-black);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

/* ====================================================================
   SAVA MEGA MENU
   ==================================================================== */

/* --- DROPDOWN WRAPPER + TOGGLE -------------------------------------- */
.sava-mega-menu_dropdown {
  position: static; /* lets DropdownList span full header width */
}

.sava-mega-menu_dropdown .nav_dropdown-toggle,
.sava-mega-menu_dropdown .nav_dropdown-toggle-2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.sava-mega-menu_dropdown .nav_dropdown-toggle p,
.sava-mega-menu_dropdown .nav_dropdown-toggle-2 p {
  margin: 0;
  font-family: 'Gelica', serif;
  font-weight: 300;
  font-size: 16px;
  color: #000;
}

.sava-mega-menu_dropdown .dropdown-icon {
  display: inline-flex;
  transition: transform 0.3s ease;
}

.sava-mega-menu_dropdown.w--open .dropdown-icon {
  transform: rotate(180deg);
}

/* --- DROPDOWN LIST POSITIONING --------------------------------------
   position: fixed makes the dropdown-list element ITSELF span the full
   viewport — not just the toggle/nav-menu width. This is critical for
   hover detection: Webflow IX2 listens for hover on the dropdown-list,
   so its bounds must match the visible content area or diagonal mouse
   movements (toggle → right-side cards) close the dropdown prematurely.

   --sava-mega-menu-top sets where the dropdown starts vertically.
   sava.js measures the navbar's real bottom edge and overwrites this
   on load/scroll/resize (sections above the navbar in the Header
   Group — Promotional Banner etc. — push the navbar down, so the
   value can't be hardcoded). 78px here is only the no-JS fallback
   (navbar alone at the viewport top).                               */
:root {
  --sava-mega-menu-top: 78px;
}

.sava-mega-menu_dropdown-list {
  position: fixed !important;
  top: var(--sava-mega-menu-top, 78px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  background: var(--_sava-color-styles---soft-white, #F8F8F8) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.06) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  overflow: visible !important;
  z-index: 100;
}

/* Background now lives directly on the dropdown-list — no more ::before
   pseudo trick (which only extended visual but not hover bounds).      */
.sava-mega-menu_dropdown-list::before {
  content: none !important;
}

/* --- INNER (matches padding-global 5 — 2.5rem horizontal padding,
   same as all other SAVA page sections + the updated navbar)
   max-width: 1360px + centered = same content rails as the SAVA logo /
   body content, so the dropdown anchors visually to the page grid on
   wide monitors instead of stretching edge-to-edge. On narrower
   viewports the 2.5rem padding is the floor.                          */
.sava-mega-menu_inner {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  padding: 44px 2.5rem 53px;
  z-index: 1;
}

/* Override container-large's max-width inside the dropdown so it
   doesn't constrain content further — the inner's 2.5rem padding is
   now the single source of horizontal alignment.                       */
.sava-mega-menu_inner .container-large-3 {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* --- GRID PER DROPDOWN ---------------------------------------------- */
.sava-mega-menu_grid {
  display: grid;
  gap: 48px;
  position: relative;
  align-items: start;
}

/* Shop All:  pills (158px) | col | col | col | featured img
   minmax() forces content cols to fit longest link text on one line.  */
.sava-mega-menu_dropdown.is-shop-all .sava-mega-menu_grid,
.sava-mega-menu_grid.is-shop-all {
  grid-template-columns: 158px minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) 293px;
}

/* Shop by Benefit:  intro (220px) | benefits (2 col flex) | featured img */
.sava-mega-menu_dropdown.is-shop-by-benefit .sava-mega-menu_grid,
.sava-mega-menu_grid.is-shop-by-benefit,
.sava-mega-menu_grid.is-benefits {
  grid-template-columns: 220px minmax(280px, 1fr) 293px;
}

/* Learn:  pills (158px) | col | col | featured (293px) | featured (293px)
   Featured card columns are fixed-width to match Shop by Benefit's
   featured image (293×308) — keeps card sizing consistent across
   dropdowns and gives the 1fr content cols their share of the space. */
.sava-mega-menu_dropdown.is-learn .sava-mega-menu_grid,
.sava-mega-menu_grid.is-learn {
  grid-template-columns: 158px minmax(180px, 1fr) minmax(180px, 1fr) 293px 293px;
}

/* --- VERTICAL DIVIDERS BETWEEN COLUMNS ------------------------------ */
.sava-mega-menu_grid > *:not(.sava-mega-menu_img-card-wrap):not(.sava-mega-menu_learn-card-wrap):not(:first-child) {
  position: relative;
}

.sava-mega-menu_grid > *:not(.sava-mega-menu_img-card-wrap):not(.sava-mega-menu_learn-card-wrap):not(:first-child)::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -24px;
  width: 1px;
  background: rgba(38,37,36,0.15);
}

/* --- PILLS COLUMN --------------------------------------------------- */
.sava-mega-menu_pills-col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: stretch;
}

/* --- PILL (base) ---------------------------------------------------- */
.sava-mega-menu_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 30px;
  border: 0.75px solid var(--_sava-color-styles---mid-grey, #DEDDD7);
  background: #FFFFFF;
  color: var(--_sava-color-styles---soft-black, #262524);
  border-radius: 10px;
  font-family: 'Gibson', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sava-mega-menu_pill:hover {
  border-color: var(--_sava-color-styles---soft-black, #262524);
}

/* --- PILL (dark variant) -------------------------------------------- */
.sava-mega-menu_pill.is-dark {
  background: var(--_sava-color-styles---soft-black, #262524);
  color: #FFFFFF;
  border-color: var(--_sava-color-styles---soft-black, #262524);
}

.sava-mega-menu_pill.is-dark:hover {
  background: #000;
}

/* --- INTRO COL (Shop by Benefit) ----------------------------------- */
.sava-mega-menu_intro-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sava-mega-menu_intro-heading {
  font-family: 'Gelica', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: var(--_sava-color-styles---soft-black, #262524);
  margin: 0;
}

.sava-mega-menu_intro-body {
  font-family: 'Gibson', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--_sava-color-styles---soft-black, #262524);
  margin: 0 0 20px 0;
  max-width: 200px;
}

/* --- CONTENT COLUMNS (Shop All & Learn) ----------------------------- */
.sava-mega-menu_column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sava-mega-menu_column-heading {
  font-family: 'Gelica', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: var(--_sava-color-styles---soft-black, #262524);
  margin: 0;
  white-space: nowrap;
}

.sava-mega-menu_column-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- BENEFITS LIST (Shop by Benefit) -------------------------------- */
.sava-mega-menu_benefits-list {
  column-count: 2;
  column-gap: 48px;
}

.sava-mega-menu_benefits-list .sava-mega-menu_link {
  display: block;
  margin-bottom: 6px;
  break-inside: avoid;
}

/* --- LINK ITEMS (shared) --------------------------------------------
   Arrow lives in the negative space (column gap) — appears on hover
   WITHOUT pushing the link or expanding the column.
   CSS escape \2192 used instead of literal → to survive Webflow's
   HTML-entity escaping in the head editor.                              */
.sava-mega-menu_link {
  position: relative;
  display: inline-block;
  font-family: 'Gibson', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--_sava-color-styles---soft-black, #262524);
  text-decoration: none;
  white-space: nowrap;
}

.sava-mega-menu_link::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 50%;
  width: 16px;
  height: 12px;
  transform: translateY(-50%);
  background-image: url("https://cdn.prod.website-files.com/69ffc1011bc4b498238115c4/6a1bb0637682ee1bfcf2da24_link-hover-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sava-mega-menu_link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sava-mega-menu_link:hover::before {
  opacity: 1;
}

/* --- FEATURED IMAGE CARD (Shop All / Shop by Benefit) --------------- */
.sava-mega-menu_img-card-wrap {
  display: block !important;
  min-height: 308px !important;
}

.sava-mega-menu_img-card,
.sava-mega-menu_img-card.w-inline-block,
a.sava-mega-menu_img-card {
  display: block !important;
  width: 293px !important;
  height: 308px !important;
  min-height: 308px !important;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.sava-mega-menu_img-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sava-mega-menu_img-card:hover .sava-mega-menu_img-card-image {
  transform: scale(1.04);
}

/* --- LEARN FEATURED CARD (overlay + heading + arrow) ----------------
   Fixed 293×308 dimensions to match Shop by Benefit's featured image.
   !important overrides Webflow's w-inline-block default that would
   otherwise collapse the card inside the grid cell.                   */
.sava-mega-menu_learn-card-wrap {
  display: block !important;
  width: 293px !important;
  min-height: 308px !important;
}

.sava-mega-menu_learn-card,
.sava-mega-menu_learn-card.w-inline-block,
a.sava-mega-menu_learn-card {
  position: relative;
  display: block !important;
  width: 293px !important;
  height: 308px !important;
  min-height: 308px !important;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--_sava-color-styles---soft-white, #F8F8F8);
}

.sava-mega-menu_learn-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sava-mega-menu_learn-card:hover .sava-mega-menu_learn-card-image {
  transform: scale(1.04);
}

.sava-mega-menu_learn-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.70) 100%);
  pointer-events: none;
}

.sava-mega-menu_learn-card-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--_sava-color-styles---soft-white, #F8F8F8);
}

.sava-mega-menu_learn-card-heading {
  font-family: 'Gelica', serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  color: var(--_sava-color-styles---soft-white, #F8F8F8);
  margin: 0;
}

.sava-mega-menu_learn-card-subtitle {
  font-family: 'Gibson', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--_sava-color-styles---soft-white, #F8F8F8);
  margin: 0;
}

/* Arrow button = single SVG (circle + arrow combined). Rotating the
   whole element on hover keeps perfect centering — no fiddly inner
   positioning. -45° CCW turns the NE arrow ↗ into E →.                 */
.sava-mega-menu_learn-card-arrow {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 46px !important;
  height: 46px !important;
  background-image: url("https://cdn.prod.website-files.com/69ffc1011bc4b498238115c4/6a1bbd8c6d4d91ecdbd173a5_Learn-Menue-Arrow-Button.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: block !important;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Remove the prior inner pseudo (no longer needed with combined SVG) */
.sava-mega-menu_learn-card-arrow::before {
  content: none !important;
}

/* Hover: entire button rotates +45° (CW) so ↗ becomes →, AND the
   background SVG swaps to the filled-white-with-dark-arrow variant.
   Uses uploaded Webflow asset (CDN URL) instead of data URI for
   reliability through the Liquiflow conversion pipeline.               */
.sava-mega-menu_learn-card:hover .sava-mega-menu_learn-card-arrow {
  background-image: url("https://cdn.prod.website-files.com/69ffc1011bc4b498238115c4/6a1cb687b5cdd3b7b555d3f4_Learn-Menue-Arrow-Button-Hover.svg") !important;
  transform: rotate(45deg) !important;
}

/* Hover overlay: significantly lighter so image brightens and the
   white arrow button pops with high contrast (per Figma hover state). */
.sava-mega-menu_learn-card:hover .sava-mega-menu_learn-card-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.20) 100%);
}

/* --- MOBILE PILLS BAR (default hidden on desktop) ------------------ */
.sava-mega-menu_mobile-pills {
  display: none;
}

/* ====================================================================
   SAVA MEGA MENU — NARROW DESKTOP (992px – 1400px)
   Scales pills col + gaps + featured-image down so the last column
   never gets clipped before the tablet breakpoint kicks in.
   Trigger raised from 1200px → 1400px because the Learn grid (5 cols
   incl. two 293px featured cards + 4×48px gaps + 2×40px padding)
   needs ~1376px to render the standard template without clipping.
   Anything below 1400px viewport gets the narrow template,
   which fits comfortably down to the 991px tablet breakpoint.        */
@media (max-width: 1400px) and (min-width: 992px) {
  .sava-mega-menu_inner {
	padding: 32px 2.5rem 40px;
  }

  .sava-mega-menu_grid {
	gap: 28px;
  }

  .sava-mega-menu_dropdown.is-shop-all .sava-mega-menu_grid,
  .sava-mega-menu_grid.is-shop-all {
	grid-template-columns: 140px 1fr 1fr 1fr 240px;
  }

  .sava-mega-menu_dropdown.is-shop-by-benefit .sava-mega-menu_grid,
  .sava-mega-menu_grid.is-shop-by-benefit,
  .sava-mega-menu_grid.is-benefits {
	grid-template-columns: 200px 1fr 240px;
  }

  .sava-mega-menu_dropdown.is-learn .sava-mega-menu_grid,
  .sava-mega-menu_grid.is-learn {
	grid-template-columns: 140px minmax(140px, 1fr) minmax(140px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
  }

  .sava-mega-menu_pill {
	width: 140px;
  }

  /* !important required to override the base width: 293px !important
	 declaration on .sava-mega-menu_img-card. Without it the cards
	 overflow their 240px grid cells at 992-1400px viewport widths.    */
  .sava-mega-menu_img-card,
  .sava-mega-menu_img-card.w-inline-block,
  a.sava-mega-menu_img-card {
	width: 240px !important;
	height: 260px !important;
	min-height: 260px !important;
  }

  .sava-mega-menu_img-card-wrap {
	min-height: 260px !important;
  }

  /* Learn-card height shrinks here too, but width override happens in
	 the Learn-stack block below (≤1441px) which has higher specificity. */
  .sava-mega-menu_learn-card {
	height: 260px !important;
  }

  .sava-mega-menu_learn-card-heading {
	font-size: 22px;
  }

  .sava-mega-menu_benefits-list {
	column-gap: 28px;
  }
}

/* ====================================================================
   SAVA MEGA MENU — LEARN STACK (992px – 1441px)
   At mid-desktop widths the Learn dropdown switches from a 5-column
   layout to a 4-column layout where the two 293px featured cards
   stack vertically in column 4 (each ~175px tall, landscape ratio).
   This reads as an intentional layout shift — not a compression —
   and matches the pattern used by larger commerce mega menus
   (J.Crew, Nordstrom, Sephora) when horizontal space gets tight.
   Placed AFTER the narrow-desktop block so its rules win the cascade
   wherever the two ranges overlap (992-1400px).                       */
@media (max-width: 1441px) and (min-width: 992px) {
  .sava-mega-menu_dropdown.is-learn .sava-mega-menu_grid,
  .sava-mega-menu_grid.is-learn {
	grid-template-columns: 140px minmax(140px, 1fr) minmax(140px, 1fr) 293px;
	grid-template-rows: auto auto;
	column-gap: 32px;
	row-gap: 16px;
  }

  /* Pills col + 2 content cols span both rows so card column has
	 breathing space without the other content jumping rows.           */
  .sava-mega-menu_grid.is-learn > .sava-mega-menu_pills-col,
  .sava-mega-menu_grid.is-learn > .sava-mega-menu_column {
	grid-row: 1 / span 2;
  }

  /* Both featured cards anchor to column 4 → grid auto-flow stacks
	 them on rows 1 and 2 in DOM order.                                */
  .sava-mega-menu_grid.is-learn > .sava-mega-menu_learn-card-wrap {
	grid-column: 4;
  }

  /* Cards shrink to landscape proportion (293×175). !important needed
	 to beat the base width: 293px / height: 308px !important rules
	 AND the narrow-desktop block's height: 260px !important.          */
  .sava-mega-menu_grid.is-learn .sava-mega-menu_learn-card-wrap {
	width: 293px !important;
	min-height: 175px !important;
  }
  .sava-mega-menu_grid.is-learn .sava-mega-menu_learn-card,
  .sava-mega-menu_grid.is-learn a.sava-mega-menu_learn-card,
  .sava-mega-menu_grid.is-learn .sava-mega-menu_learn-card.w-inline-block {
	width: 293px !important;
	height: 175px !important;
	min-height: 175px !important;
  }

  /* Heading scales with the smaller card to keep proportions balanced. */
  .sava-mega-menu_grid.is-learn .sava-mega-menu_learn-card-heading {
	font-size: 22px;
  }
}

/* ====================================================================
   SAVA MEGA MENU — MOBILE RESPONSIVE OVERRIDES
   ==================================================================== */
@media (max-width: 991px) {
  /* NavbarMenu becomes a full drawer — ONLY while Webflow marks it open
	 (data-nav-menu-open). Without that guard the display:flex !important
	 beats Webflow's collapsed display:none and the drawer contents render
	 inline on the page with the menu closed.
	 (Compiled class is nav_menu-2 — the old escaped-space selector never
	 matched, so these rules were dead until 2026-07-05: that's what caused
	 the white drawer + unscrollable fixed height.) */
  .nav_menu.is-page-height-tablet[data-nav-menu-open],
  .nav_menu-2.is-page-height-tablet[data-nav-menu-open] {
	display: flex !important;
	flex-direction: column;
	align-items: stretch; /* compiled base has align-items:center — unsized children
							 (the pills row) shrank to content width */
	height: calc(100vh - 75px); /* fills below the 75px bar */
	overflow-y: auto;
	padding: 0;
	background: var(--_sava-color-styles---soft-white, #F8F8F8);
  }

  /* Accordion row — divider sits under the title (border on toggle, not
	 on the dropdown wrapper). Vertical margin produces Figma's airy
	 ~135px row-to-row spacing.                                       */
  .sava-mega-menu_dropdown {
	width: 100%;
	position: static;
	margin-bottom: 56px;
	flex-shrink: 0; /* drawer is a fixed-height flex column — don't compress rows */
	/* THE overlap fix (measured live 2026-07-05): compiled webflow css keeps
	   .nav_menu-dropdown a flex ROW locked at height:5rem on this element, so
	   the opened list never grew the wrapper — its content just overflowed and
	   painted over the toggles below. Block flow + auto height = real accordion.
	   !important defends against Webflow's runtime open-state classes. */
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
  }

  .sava-mega-menu_dropdown .nav_dropdown-toggle,
  .sava-mega-menu_dropdown .nav_dropdown-toggle-2 {
	width: 100%;
	justify-content: space-between;
	padding: 32px 20px 10px;
	border-bottom: 1px solid rgba(0,0,0,0.15);
  }

  /* Force Gelica Light on accordion titles — explicit family/weight
	 defeats any Designer mobile-breakpoint override; targets both <p>
	 and direct toggle in case text isn't wrapped.                    */
  .sava-mega-menu_dropdown .nav_dropdown-toggle,
  .sava-mega-menu_dropdown .nav_dropdown-toggle-2,
  .sava-mega-menu_dropdown .nav_dropdown-toggle p,
  .sava-mega-menu_dropdown .nav_dropdown-toggle-2 p {
	font-family: 'Gelica', Georgia, serif !important;
	font-weight: 300 !important;
	font-style: normal !important;
	font-size: 24px !important;
	line-height: 30px !important;
	color: var(--_sava-color-styles---soft-black, #262524) !important;
  }

  /* Dropdown list inline-flow on mobile */
  .sava-mega-menu_dropdown-list {
	position: static !important;
	box-shadow: none !important;
	border-top: none !important;
	width: 100% !important;
	background: transparent !important;
  }

  /* Custom mobile accordion — Webflow's dropdowns run in HOVER mode for
	 desktop, and at mobile widths a mouse-hover pre-opens the list so the
	 first click instantly re-closes it (grey flash, second click "works").
	 sava.js toggles .sv-acc-open in a capture-phase handler instead;
	 Webflow's own w--open state is ignored at this breakpoint. */
  .sava-mega-menu_dropdown .sava-mega-menu_dropdown-list{ display: none !important; }
  .sava-mega-menu_dropdown.sv-acc-open .sava-mega-menu_dropdown-list{
	display: block !important;
	/* Webflow's dropdown JS leaves an inline style="height: 0px" on the list
	   (close/init animation) — zero layout height + visible overflow was THE
	   text-overlap bug, hitting whichever lists its JS had touched (why results
	   varied per toggle). Stylesheet !important beats the non-important inline. */
	height: auto !important;
  }
  .sava-mega-menu_dropdown .dropdown-icon{ transform: none !important; }
  .sava-mega-menu_dropdown.sv-acc-open .dropdown-icon{ transform: rotate(180deg) !important; }

  .sava-mega-menu_inner {
	padding: 4px 24px 20px;
  }

  /* Grid collapses to single column. Aggressively null grid-template-*
	 so the hidden pills-col / intro-col / featured cards don't still
	 allocate horizontal space and push visible content right.         */
  .sava-mega-menu_grid,
  .sava-mega-menu_dropdown .sava-mega-menu_grid {
	display: flex !important;
	flex-direction: column !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	grid-template-areas: none !important;
	gap: 20px;
  }
  .sava-mega-menu_grid > * {
	grid-column: auto !important;
	grid-row: auto !important;
  }

  /* Hide left pills col + intro col + featured cards on mobile (per Figma) */
  .sava-mega-menu_dropdown .sava-mega-menu_pills-col,
  .sava-mega-menu_dropdown .sava-mega-menu_intro-col,
  .sava-mega-menu_dropdown .sava-mega-menu_img-card-wrap,
  .sava-mega-menu_dropdown .sava-mega-menu_learn-card-wrap {
	display: none !important;
  }

  /* Hide vertical dividers on mobile */
  .sava-mega-menu_grid > *::before {
	display: none !important;
  }

  /* Benefits list collapses to single column on mobile */
  .sava-mega-menu_benefits-list {
	column-count: 1 !important;
  }

  /* Mobile pill stack — 5 pills (4 from linklist + Shop All-dark).
	 NORMAL FLOW at the end of the drawer: margin-top:auto still
	 bottom-aligns them while the accordions are collapsed, but once
	 a toggle expands they get pushed down with the content (Figma).
	 The old position:sticky pinned them in place over the expanding
	 content and caused the flicker/overlap. */
  .sava-mega-menu_mobile-pills {
	display: flex !important;
	flex-direction: column;
	gap: 13px;
	padding: 20px 20px 40px;
	/* 64px + the Learn dropdown's 56px margin-bottom = ~120px below the
	   closed Learn toggle (user spec). Flows down as toggles expand. */
	margin-top: 64px;
	flex-shrink: 0;
	border-top: none; /* compiled webflow css draws a divider here; Figma has none */
  }

  .sava-mega-menu_mobile-pills .sava-mega-menu_pill {
	width: 100%;
	height: 34px;
  }

  /* DRAWER-OPEN STATE — hide SAVA logo, reflow cart+profile to top-left.
	 Uses .sava-nav-open class set by the tiny JS helper above (more
	 reliable than :has() across older Safari + iOS).                  */
  .w-nav.sava-nav-open .nav_logo-link {
	display: none !important;
  }
  .w-nav.sava-nav-open .nav_shop-icons {
	position: absolute;
	left: 20px;
	top: 0;
	display: flex;
	flex-direction: row-reverse; /* Figma order: bag, then account */
	align-items: center;
	gap: 30px;
	height: 75px;
	z-index: 102;
  }
  /* strip the icon links' internal padding so the glyphs sit at the true
	 20px margin instead of looking pushed in */
  .w-nav.sava-nav-open .nav_shop-icons a,
  .w-nav.sava-nav-open .nav_shop-icons .w-dropdown-toggle {
	padding: 0;
  }

  /* Close button (the transformed hamburger) sits at the RIGHT edge when open */
  .w-nav.sava-nav-open .nav_menu-button {
	position: absolute;
	right: 20px;
	top: 0;
	height: 75px;
	display: flex;
	align-items: center;
	z-index: 102;
  }

  /* Hamburger → ✕ when the drawer is open. The icon is CUSTOM line divs
	 (not Webflow's built-in nav icon), so no swap animation exists natively —
	 absolute-center the outer lines and rotate ±45°, hide the middle. */
  .w-nav .menu-icon_line-top-2,
  .w-nav .menu-icon_line-middle-2,
  .w-nav .menu-icon_line-bottom-2 {
	transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .w-nav.sava-nav-open .menu-icon-2 { position: relative; }
  .w-nav.sava-nav-open .menu-icon_line-top-2,
  .w-nav.sava-nav-open .menu-icon_line-bottom-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	margin: 0;
  }
  .w-nav.sava-nav-open .menu-icon_line-top-2 {
	transform: translate(-50%, -50%) rotate(45deg);
  }
  .w-nav.sava-nav-open .menu-icon_line-bottom-2 {
	transform: translate(-50%, -50%) rotate(-45deg);
  }
  .w-nav.sava-nav-open .menu-icon_line-middle-2 { opacity: 0; }
}

@media (min-width: 992px) {
  .sava-mega-menu_mobile-pills {
	display: none !important;
  }
}

/* ============================================================
   SAVA — About Hero pagination bullets
   `justify-content` intentionally NOT set here — Webflow controls
   alignment per breakpoint (flex-start on desktop, center on mobile)
   ============================================================ */
.about-hero_pagination {
  display: flex;
  gap: 8px;
}
.about-hero_pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: rgba(38, 37, 36, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.about-hero_pagination-bullet.is-active {
  background-color: var(--_sava-color-styles---soft-black, #262524);
  transform: scale(1.2);
}
/* Mobile: bullets on dark grey bg need light color */
@media (max-width: 767px) {
  .about-hero_pagination-bullet {
	background-color: rgba(248, 248, 248, 0.3);
  }
  .about-hero_pagination-bullet.is-active {
	background-color: #F8F8F8;
  }
}

/* ============================================================
   SAVA — Image container loading state (Option A)
   Adds a neutral gray fallback bg to all image containers so
   users see a non-empty rectangle while images load, instead
   of blank white space. The <img> covers the gray once loaded.
   Skeleton shimmer animation is Option B — deferred post-launch.
   ============================================================ */
div[class$="_image-wrap"],
div[class$="_image"],
div[class$="_tile"] {
  background-color: #E5E5E5;
}

/* ===========================================================
   SV Blog image-wrap override
   Section bg is Tea (#F3E8AD). The product images uploaded by
   the merchant have transparent backgrounds, so the image-wrap
   container must be transparent for the Tea section bg to show
   through. Higher specificity (section.sv-blog .sv-blog_image-wrap)
   beats the universal _image-wrap gray fallback above.
   =========================================================== */
section.sv-blog .sv-blog_image-wrap {
  background-color: transparent;
}

/* ===========================================================
   SAVA Product Card price typography (2026-06-07)
   Forces Gibson Book across breakpoints — workaround for the
   Webflow MCP silent-no-op bug that wouldn't accept main-
   breakpoint writes on the .sava-product-card_price style.
   =========================================================== */
.sava-product-card_price,
.sava-product-card_compare-at-price {
  font-family: Gibson, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

@media (max-width: 991px) {
  .sava-product-card_price,
  .sava-product-card_compare-at-price {
	font-size: 14px !important;
  }
}

/* ===========================================================
   SAVA Collections page polish (2026-06-08)
   - Soft-white page bg so white product cards pop
   - Mobile card readability: bigger tag pills + title sizing
   =========================================================== */

/* Page bg: soft-white on collection pages.
   Liquify Pro converted theme.liquid renders <body> with NO template
   class, so we can't use body.template-collection. Instead use :has()
   to detect the section_filter section unique to collection pages.
   :has() is supported in all current browsers (Chrome 105+, Safari
   15.4+, Firefox 121+). */
body:has(section.section_filter),
body:has([id*="collection_products"]) {
  background-color: var(--_sava-color-styles---soft-white, #F8F8F8) !important;
}

/* Belt-and-suspenders: also tint the .main-wrapper since some browser
   versions may treat body bg differently when html/body chain has
   computed white. */
main.main-wrapper:has(section.section_filter) {
  background-color: var(--_sava-color-styles---soft-white, #F8F8F8) !important;
}

/* Mobile (≤991px): enlarge tag pills + tighten container offsets */
@media (max-width: 991px) {
  .sava-product-card_tag {
	font-size: 10px !important;
	padding: 4px 9px !important;
	letter-spacing: 0.5px !important;
	line-height: 1.4 !important;
  }

  .sava-product-card_tags {
	gap: 6px 6px !important;
	top: 14px !important;
	left: 14px !important;
	right: 14px !important;
  }

  /* Title: enlarge for readability + breathing room above price */
  .sava-product-card_name {
	font-size: 15px !important;
	line-height: 1.3 !important;
	margin: 0 0 4px 0 !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;
  }
}

/* Tiny breakpoint (≤479px): pill padding nudges tighter */
@media (max-width: 479px) {
  .sava-product-card_tag {
	font-size: 10px !important;
	padding: 3px 7px !important;
  }
}

/* ===========================================================
   SAVA Collections page — mobile layout defensive patch (2026-06-08)
   Fixes diagnosed from converted CSS inspection:
   1. .sv-collection-product-card_image-wrap has 63px margin-top
	  + 90px padding-top + aspect-ratio: 1 → creates 153px of
	  dead space at top, eating into card height on mobile.
   2. Title (.sava-product-card_name) is rendered but visually
	  missing — .heading-style-h4 has a "backwards" mobile rule
	  from Liquify Pro (font-size: 20px on mobile vs 15px desktop,
	  documented in pattern doc as known oddity), which combined
	  with .product-item_text-link's flex layout may push title
	  out of view.
   3. Price '$' getting clipped on left edge — overflow constraint
	  from parent flex container or padding mismatch.
   Approach: tighten image-wrap proportions at mobile, force
   title visibility + proper sizing, ensure price row has full
   width + visible overflow.
   =========================================================== */
@media (max-width: 991px) {
  /* Image-wrap: shrink dead space at mobile so card isn't all image */
  .sv-collection-product-card_image-wrap {
	margin-top: 24px !important;
	padding: 48px 0 0 0 !important;
  }

  /* Force title visibility — defensive override against Liquify Pro
	 heading-style-h4 mobile rule + any layout shifts from wrappers */
  .sava-product-card_name,
  .heading-style-h4.sava-product-card_name {
	display: block !important;
	visibility: visible !important;
	width: 100% !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 400 !important;
	color: var(--_sava-color-styles---soft-black, #262524) !important;
	margin: 0 0 4px 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	text-overflow: clip !important;
  }

  /* Container fixes — ensure wrapper doesn't constrain content */
  .product-item_left {
	display: block !important;
	width: 100% !important;
	margin-right: 0 !important;
	overflow: visible !important;
  }

  /* Text link must use full width + allow content to flow */
  .product-item_text-link {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	overflow: visible !important;
  }

  /* Margin-xsmall wrapper (user's recent edit) — ensure no
	 left/right margin that would push content out of view */
  .product-item_text-link > .margin-bottom.margin-xsmall {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: visible !important;
  }

  /* Price row must use full width — fix the $ clip */
  .sava-product-card_price-row,
  .product-item_price {
	width: 100% !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	overflow: visible !important;
  }
}

/* Tiny breakpoint (≤479px): smallest cards get smaller top dead space */
@media (max-width: 479px) {
  .sv-collection-product-card_image-wrap {
	margin-top: 16px !important;
	padding: 36px 0 0 0 !important;
  }
}

/* ===========================================================
   SAVA Collections page — 2-column mobile grid (2026-06-08)
   Figma mobile spec shows 2 columns on tiny breakpoint.
   Converted CSS forces 1 column at ≤479px via:
	 @media (max-width: 479px) {
	   .filter_product-list, .product-header_layout {
		 grid-template-columns: 1fr;
	   }
	 }
   Override that one rule — the layout then inherits the
   medium-breakpoint 2-column template, which is exactly what
   Figma wants. Confirmed via inspector live-edit.
   =========================================================== */
@media (max-width: 479px) {
  .filter_product-list {
	grid-template-columns: 1fr 1fr !important;
  }
}

/* ===========================================================
   SAVA SV Collection Quick Filters (2026-06-08)
   Pill row above the Collection Hero. Merchant-editable
   Filter Pill blocks (collection picker + text label).
   - Desktop: centered flex row (no carousel — 5 pills fit)
   - Mobile: horizontal scroll with snap, hidden scrollbar
   - Active state: data-active="true" set by Liquiflow Liquid
	 comparing block's picked collection to current collection.
   - Active styling: sava-gradient-light-peach-fade gradient bg
   - Hover: same gradient (per Figma: "Fill remains once clicked")
   =========================================================== */

/* Hover + active: gradient bg using existing :root variable */
.sv-collection-quick-filters_pill:hover,
.sv-collection-quick-filters_pill[data-active="true"] {
  background-color: transparent;
  background-image: var(--sava-gradient-light-peach-fade);
  border-color: var(--_sava-color-styles---mid-grey, #DEDDD7);
}

/* Balanced section padding (was 2.5rem top / 1rem bottom — Figma intent
   is equal vertical breathing room). */
.sv-collection-quick-filters {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

/* Mobile (≤991px): horizontal scroll with snap, hide scrollbar.
   Track is full-bleed (negate section padding) so the row can
   scroll edge-to-edge while still snapping to the soft padding. */
@media (max-width: 991px) {
  .sv-collection-quick-filters {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
  }

  .sv-collection-quick-filters_track {
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-left: 5%;
	padding-right: 5%;
  }

  .sv-collection-quick-filters_track::-webkit-scrollbar {
	display: none;
  }

  .sv-collection-quick-filters_block {
	scroll-snap-align: start;
  }
}

/* ===========================================================
   SAVA Collections page — Filter sidebar restyle (2026-06-08)
   Phase 1: visual only. No accordion JS yet (filter groups
   stay always-expanded). Phase 2 will add click-to-collapse.
   Matches Figma 234:4773-adjacent frames:
   - Uppercase InterstateMono headings + chevron + underline
   - Circle radio icons + italic Gelica option labels
   - Hide "Products shown" + Search (not in Figma)
   - Subtler CLEAR ALL link, cleaner active chip + sort select
   =========================================================== */

/* Hide elements not in Figma design */
.filter_results-wrapper,
.filter_form-field-wrapper {
  display: none !important;
}

/* Top header row — "Filters" + CLEAR ALL */
.filter_form-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--_sava-color-styles---mid-grey, #DEDDD7) !important;
}

.filter_form-header .filter_heading {
  font-family: Gibson, sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  margin: 0 !important;
}

.filter_form-header .button.is-link {
  font-family: InterstateMono, monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin-left: auto !important;
}

/* Filter group container — bottom border per Figma */
.filter_filter-group {
  border-bottom: 1px solid var(--_sava-color-styles---mid-grey, #DEDDD7);
  padding: 0;
  margin: 0;
}

/* Filter group heading — uppercase InterstateMono with chevron */
.filter_filter-group-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem 0 0.75rem 0 !important;
  margin: 0 !important;
  cursor: pointer;
  position: relative;
}

.filter_filter-group-heading > div {
  font-family: InterstateMono, monospace !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  line-height: 1 !important;
}

/* Chevron icon — pure CSS border-trick V shape.
   OPEN (default) points UP per Figma; collapsing rotates it 180° down. */
.filter_filter-group-heading::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--_sava-color-styles---soft-black, #262524);
  border-bottom: 1.5px solid var(--_sava-color-styles---soft-black, #262524);
  transform: rotate(225deg) translateY(-2px);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.filter_filter-group.is-collapsed .filter_filter-group-heading::after {
  transform: rotate(45deg) translateY(-2px);
}
/* Phase 2 accordion — sava.js toggles .is-collapsed on heading click */
.filter_filter-group.is-collapsed .filter_list {
  display: none !important;
}

/* Figma heading reads "FILTER BY PRODUCT TYPE" etc. — prefix the
   Search & Discovery label. The JS-injected Sort By group opts out. */
.filter_filter-group-heading > div::before {
  content: 'Filter by ';
}
.sv-sort-group .filter_filter-group-heading > div::before {
  content: none;
}

/* Filter options list */
.filter_list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 0 1.25rem 0 !important;
  margin: 0 !important;
}

/* Filter option row — restyle as radio button */
.filter_form_checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
}

/* Replace square checkbox icon with circle radio dot.
   display forced: compiled webflow css hides this element at desktop
   widths — we want the same radio treatment on ALL breakpoints */
.filter_form_checkbox-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid var(--_sava-color-styles---soft-black, #262524) !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
  position: relative;
  transition: background-color 0.2s ease;
}

.filter_form_checkbox-icon.is-checked {
  background-color: var(--_sava-color-styles---soft-black, #262524) !important;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

/* Filter option label — italic Gelica per Figma */
.filter_form_checkbox-label {
  font-family: Gelica, Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Disabled filter (no products match) — muted */
.filter_form_checkbox.is-disabled .filter_form_checkbox-label {
  opacity: 0.4;
}

/* SV Carousel Hero — the CTA label is now an editable <p> inside the
   button link (li-settings:text="CTA Label"); inherit the button's
   typography and kill default paragraph margins */
.about-hero_cta-label {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* SV Carousel Hero — EQUAL-HEIGHT slides. The swiper wrapper sizes to the
   tallest slide's content; slides with less body text were shorter and the
   section bg color showed as a bar under their image. Stretch every slide
   to the wrapper height — the absolutely-positioned image-wrap (height:100%
   of the slide) then fills it automatically, on every slide. */
.about-hero .swiper-wrapper {
  align-items: stretch !important;
}
.about-hero .swiper-slide {
  height: auto !important;
  display: flex !important;
}
.about-hero .swiper-slide .about-hero_slide {
  width: 100%;
  min-height: 100%;
}

/* Mobile: CTA spans the full content column (Figma mobile) */
@media (max-width: 767px) {
  .about-hero_cta {
	display: flex;
	width: 100%;
	justify-content: center;
  }
}

/* Sticky collection title ("Products" bar) shipped at z-index 10 — TYING
   the header section's 10, so DOM order let it paint over the open mega
   menu (the menu's z:100 only counts inside the header's own context).
   9 keeps it above page content but under the header — same fix as the
   blog's sticky Recent bar. */
.sv-collection-hero-section {
  z-index: 9 !important;
}

/* Chips are grouped in one .filter_tags-inner-wrapper PER FILTER GROUP —
   block-level shells that can't share a row, so chips from different
   groups stacked wastefully (one per line on mobile). display:contents
   dissolves the shells: all chips flow as one wrapping stream. */
.filter_tags-inner-wrapper {
  display: contents !important;
}

/* Active filter chip — top of feed (e.g. "In stock ×") */
.filter_tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 8px 5px 16px !important;
  margin: 0 8px 8px 0 !important; /* breathing room when chips wrap (adds to the wrapper's 8px row-gap) */
  border: 1px solid var(--_sava-color-styles---soft-black, #262524) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-family: Gibson, sans-serif !important;
  font-size: 13px !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
}

/* Optical centering: the chip label's box is geometrically centered
   (measured 10.3px above and below), but Gibson's glyphs sit LOW in
   their line box — nudge up so the cap-height reads centered */
.filter_tag > div {
  transform: translateY(-1.5px);
}

/* ===========================================================
   Collections MOBILE (≤991px) — filters modal + card tags (2026-07-06)
   1) Filters modal: compiled css parks .filter_filters-wrapper as a
	  full-screen fixed panel at translate(0,100%), revealed by a Webflow
	  IX2 interaction that never runs on the converted theme (theme.liquid
	  hardcodes the HOME page id in data-wf-page; IX2 configs are per-page).
	  sava.js re-wires it with .sv-filters-open + an injected close ✕.
   2) Product-card tags: .product-item_tag_list is absolute over the
	  image-wrap's reserved top padding; on mobile multi-row tags overflow
	  onto the image. Put tags in FLOW above the image so the card grows.
   =========================================================== */
@media (max-width: 991px) {
  .filter_filters-wrapper {
	transition: transform 0.35s ease;
  }
  .filter_filters-wrapper.sv-filters-open {
	transform: translate(0, 0) !important;
  }
  /* room for the fixed SHOW RESULTS bar */
  .filter_filters-wrapper {
	padding-bottom: 110px !important;
  }
  /* SHOW RESULTS apply bar — injected by sava.js; the wrapper always
	 carries a transform, so position:fixed anchors to the PANEL */
  .sv-filters-apply {
	position: fixed;
	left: 5%;
	right: 5%;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: var(--_sava-color-styles---soft-black, #262524);
	border-radius: 10px;
	color: #fff;
	font-family: Gibson, sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	text-decoration: none;
	z-index: 2;
  }

  /* tags in flow above the image (flex order beats unknown DOM order) */
  .product-item_image-link {
	display: flex !important;
	flex-direction: column !important;
  }
  .product-item_tag_list {
	position: static !important;
	inset: auto !important;
	order: -1;
	margin: 0 0 10px 0 !important;
  }
  /* the image-wrap's top padding existed only to make room for the
	 absolute tags — no longer needed (overrides the 48px/36px patches) */
  .sv-collection-product-card_image-wrap {
	margin-top: 0 !important;
	padding: 0 !important;
  }
}

/* desktop: the apply bar is a mobile-panel concept — never show it there */
@media (min-width: 992px) {
  .sv-filters-apply {
	display: none !important;
  }
}

/* ✕ remove-filter — was a 14px sliver; real 28px hit target + visible icon */
.filter_close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  transition: background-color 0.15s ease;
}
.filter_close:hover {
  background-color: #EEEEED;
}
.filter_close .filter_close-icon {
  width: 18px !important;
  height: 18px !important;
}

/* Sort select — HIDDEN: replaced by the sidebar "Sort By" radio group
   (sava.js builds it from this select's options; Figma 234:4773) */
#sort-by.sort_select,
.sort_select {
  display: none !important;
}

/* Sticky sidebar per Figma annotation — desktop only (the same wrapper
   doubles as the tablet/mobile Filters modal, which must not be sticky) */
@media (min-width: 992px) {
  .filter_form {
	position: sticky;
	top: 100px; /* clears the 78px navbar */
  }
}



/* ===========================================================
   SAVA SV Trust Points (2026-06-08, revised for Figma fidelity)
   Section-static row of 3 merchant-editable trust points
   (icon + Gelica Light label, NOT italic per Figma 212:7142).
   - Desktop: 3-across with vertical dividers between blocks
   - Mobile (max-width 767px): stacked vertically with HORIZONTAL
	 dividers above each non-first block (per mobile Figma)
   =========================================================== */

/* Label font-style override - Webflow native style was italic
   by mistake; Figma calls for Gelica Light upright */
.sv-trust-points_label {
  font-style: normal !important;
}

/* Let wide icons (e.g. NSF Certified Sport) keep their natural aspect ratio
   instead of being squashed into a 56px square — height stays 56, width auto */
.sv-trust-points_icon {
  width: auto !important;
  max-width: 100%;
}

/* Vertical divider between blocks (desktop) */
.sv-trust-points_block + .sv-trust-points_block::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background-color: var(--_sava-color-styles---mid-grey, #DEDDD7);
}

/* Mobile: stack blocks vertically with horizontal dividers */
@media (max-width: 767px) {
  .sv-trust-points {
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
  }

  .sv-trust-points_track {
	flex-direction: column !important;
	gap: 2rem !important;
  }

  .sv-trust-points_block {
	min-width: 0 !important;
	width: 100% !important;
	flex: 0 0 auto !important;
  }

  /* Re-position divider as horizontal line above each non-first block */
  .sv-trust-points_block + .sv-trust-points_block::before {
	top: -1rem !important;
	bottom: auto !important;
	left: 10% !important;
	right: 10% !important;
	width: auto !important;
	height: 1px !important;
  }

  .sv-trust-points_label {
	font-size: 18px !important;
  }
}

/* ===========================================================
   SAVA Product page — soft-white body background (2026-06-08,
   selector broadened 2026-06-10)
   Match Collections page treatment so white cards/sections pop.
   Detect via Product Header (always present on product templates)
   OR Trust Points (was the original trigger but merchants can
   remove that section from the template).
   =========================================================== */
body:has(.section_product-header),
body:has(section.sv-trust-points) {
  background-color: var(--_sava-color-styles---soft-white, #F8F8F8) !important;
}

/* ===========================================================
   SAVA SV Benefits (2026-06-08)
   Per-product benefit icons + labels, row layout.
   Bound to product.metafields.custom.benefits (list of Benefit metaobjects).
   =========================================================== */
.sv-benefits_row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 54px;
}
.sv-benefits_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.sv-benefits_icon {
  width: 65px;
  height: 65px;
  object-fit: contain;
}
.sv-benefits_label {
  font-family: 'Gelica', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.1;
  color: var(--_sava-color-styles---soft-black, #262524);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sv-benefits_row {
	gap: 32px;
	justify-content: center;
  }
  .sv-benefits_label {
	white-space: normal;
	max-width: 80px;
  }
}

/* ===========================================================
   SAVA SV Ingredients & SV How to Use (2026-06-08)
   Per-product richtext fields. Shared typography.
   =========================================================== */
.sv-ingredients_text,
.sv-how-to-use_text {
  font-family: 'Gibson', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--_sava-color-styles---soft-black, #262524);
}
.sv-ingredients_text > *,
.sv-how-to-use_text > * {
  margin: 0 0 0.75em;
}
.sv-ingredients_text > *:last-child,
.sv-how-to-use_text > *:last-child {
  margin-bottom: 0;
}

/* ===========================================================
   SAVA SV Product Tabs (2026-06-09)
   3-tab widget: Benefits / Ingredients / How to Use
   Tabs are static labels; pane content is metafield-driven.
   Tab switching JS embedded inside the section (data-sv-tab + is-active).
   =========================================================== */
.sv-product-tabs {
  display: flex;
  flex-direction: column;
}
.sv-product-tabs_menu {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.sv-product-tabs_tab {
  font-family: 'Gibson', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: var(--_sava-color-styles---soft-black, #262524);
  cursor: pointer;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  user-select: none;
  opacity: 0.55;
}
.sv-product-tabs_tab:hover {
  opacity: 1;
}
.sv-product-tabs_tab.is-active {
  border-bottom-color: var(--_sava-color-styles---soft-black, #262524);
  opacity: 1;
}
.sv-product-tabs_content {
  position: relative;
}
.sv-product-tabs_pane {
  display: none;
}
.sv-product-tabs_pane.is-active {
  display: block;
}

@media (max-width: 767px) {
  .sv-product-tabs_menu {
	gap: 24px;
	margin-bottom: 24px;
  }
  .sv-product-tabs_tab {
	font-size: 18px;
  }
}

/* ===========================================================
   SAVA Product Header — Liquify Pro section restyle (2026-06-10)
   Targets the Section / Product Header component blocks
   (Vendor, Best Seller, Nutritional Function, Product Name,
	Product Price, Availability, Add to Cart, Shipping Info, Description)
   to match Figma node 38:290.
   =========================================================== */

/* ===== New blocks ===== */

/* Best Seller Badge pill — Figma 192:4298 "Product Callout Tag":
   light-grey #EEEEED, full pill (60px radius), InterstateMono Light 14 */
.sv-product-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  background-color: var(--_sava-color-styles---light-grey, #EEEEED);
  border-radius: 60px;
}
.sv-product-badge_label {
  font-family: InterstateMono, monospace;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--_sava-color-styles---soft-black, #262524);
  line-height: 1;
  white-space: nowrap;
}

/* Nutritional Function — Figma 115:1086: square 29px black box,
   InterstateMono Light 14, label soft-white, value plain soft-black */
.sv-nutritional-function {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.sv-nutritional-function_label,
.sv-nutritional-function_value {
  font-family: InterstateMono, monospace;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1;
}
.sv-nutritional-function_label {
  display: inline-flex;
  align-items: center;
  height: 29px;
  padding: 0 8px;
  background-color: var(--_sava-color-styles---soft-black, #262524);
  color: var(--_sava-color-styles---soft-white, #F8F8F8);
  border-radius: 0;
}
.sv-nutritional-function_value {
  color: var(--_sava-color-styles---soft-black, #262524);
}

/* Shipping Info */
.sv-shipping-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-shipping-info_free-shipping,
.sv-shipping-info_hsa-fsa-line {
  font-family: 'Gibson', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--_sava-color-styles---soft-black, #262524);
  margin: 0;
}
.sv-shipping-info_hsa-fsa-label {
  font-weight: 600;
}
.sv-shipping-info_link {
  color: var(--_sava-color-styles---soft-black, #262524);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}
.sv-shipping-info_link:hover {
  opacity: 0.65;
}

/* ===== Existing Liquify Pro block overrides ===== */

/* Vendor — subtle small uppercase */
.section_product-header [li-block="Vendor"] {
  font-family: 'Gibson', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--_sava-color-styles---soft-black, #262524);
  opacity: 0.5;
}

/* Product Name — large Gelica Light Display */
.section_product-header [li-block="Product Name"] h1,
.section_product-header [li-block="Product Name"] .heading-style-h2 {
  font-family: 'Gelica', serif !important;
  font-weight: 300 !important;
  font-size: 60px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  margin: 0 !important;
}

/* Product Price — SAVA typography */
.section_product-header [li-block="Product Price"] .product-header_price-wrapper {
  font-family: 'Gibson', sans-serif;
}
.section_product-header [li-block="Product Price"] .text-size-large {
  font-size: 24px !important;
  font-weight: 600 !important;
}

/* Availability — slim Gibson body */
.section_product-header [li-block="Availability"] .product-header_shipping {
  font-family: 'Gibson', sans-serif;
  font-size: 14px;
  color: var(--_sava-color-styles---soft-black, #262524);
}

/* Description — hide heading, style body */
.section_product-header [li-block="Description"] .heading-style-h3 {
  display: none !important;
}
.section_product-header [li-block="Description"] .text-rich-text {
  font-family: 'Gibson', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--_sava-color-styles---soft-black, #262524);
}
.section_product-header [li-block="Description"] .text-rich-text p {
  margin: 0;
}

/* Add to Cart — yellow/cream ATC button (InterstateMono Regular 21 per Figma) */
.section_product-header [li-block="Add to Cart"] .button {
  background-color: #EDE087 !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  font-family: InterstateMono, monospace !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  text-align: center !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.section_product-header [li-block="Add to Cart"] .button:hover {
  background-color: var(--_sava-color-styles---soft-black, #262524) !important;
  color: var(--_sava-color-styles---white, #FFFFFF) !important;
}

/* Hide Note field by default (the non-quantity form input inside Add to Cart) */
.section_product-header [li-block="Add to Cart"] .form_input:not(.is-quantity) {
  display: none !important;
}

/* Spacing rhythm between blocks in the right column */
.product-header_product-details > [li-block="Vendor"] {
  margin-bottom: 4px;
}
.product-header_product-details > [li-block="Product Badge"] {
  margin-bottom: 12px;
}
.product-header_product-details > [li-block="Product Name"] {
  margin-bottom: 16px;
}
.product-header_product-details > [li-block="Nutritional Function"] {
  margin-bottom: 16px;
}
.product-header_product-details > [li-block="Description"] {
  margin-bottom: 24px;
}
.product-header_product-details > [li-block="Product Price"] {
  margin-bottom: 12px;
}
.product-header_product-details > [li-block="Availability"] {
  margin-bottom: 12px;
}
.product-header_product-details > [li-block="Add to Cart"] {
  margin-top: 16px;
  margin-bottom: 16px;
}
.product-header_product-details > [li-block="Shipping Info"] {
  margin-bottom: 24px;
}

/* Responsive: Product Name scales down on mobile */
@media (max-width: 991px) {
  .section_product-header [li-block="Product Name"] h1,
  .section_product-header [li-block="Product Name"] .heading-style-h2 {
	font-size: 48px !important;
  }
}
@media (max-width: 479px) {
  .section_product-header [li-block="Product Name"] h1,
  .section_product-header [li-block="Product Name"] .heading-style-h2 {
	font-size: 40px !important;
  }
}

/* Product Badges row — SALE (auto) + Badge 1 + Badge 2 side by side (2026-06-10) */
.sv-product-badges_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ===========================================================
   SAVA Product Header — quantity stepper (2026-06-10)
   Wraps Liquify Pro's native number input (li-element=
   add-to-cart-quantity) with −/+ controls per Figma.
   JS handler in sava.js: [data-sv-qty-minus]/[data-sv-qty-plus]
   =========================================================== */
.sv-qty-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  min-width: 120px;
  border: 1px solid var(--_sava-color-styles---soft-black, #262524);
  border-radius: 12px;
  background-color: var(--_sava-color-styles---white, #FFFFFF);
  overflow: hidden;
  flex: 0 0 auto;
}
.sv-qty-stepper_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 100%;
  font-family: 'Gibson', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  color: var(--_sava-color-styles---soft-black, #262524);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease;
}
.sv-qty-stepper_btn:hover {
  opacity: 0.55;
}
/* The native quantity input inside the stepper — strip chrome, center digit */
.sv-qty-stepper input.form_input.is-quantity {
  width: 36px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: 'Gibson', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--_sava-color-styles---soft-black, #262524) !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-shadow: none !important;
}
.sv-qty-stepper input.form_input.is-quantity::-webkit-outer-spin-button,
.sv-qty-stepper input.form_input.is-quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sv-qty-stepper input.form_input.is-quantity:focus {
  outline: none !important;
  border: none !important;
}

/* ===========================================================
   SAVA Product Header — variant option cards (2026-06-10)
   Restyles Liquify Pro's radio loop (.product-header_radio) as
   the Figma 314:3032 "Bag Selection" cards: 10px-radius bordered
   cards, lemon-fade gradient + soft-black border when selected.
   Icons injected by sava.js (label text match: bag/stick).
   =========================================================== */
.section_product-header .product-header_option-list {
  margin-bottom: 8px;
}
/* Option name label ("Size") hidden per Figma — cards stand alone */
.section_product-header [li-element="product-options-name"],
.section_product-header .product-header_option > div:first-child {
  display: none;
}
.section_product-header .product-header_radio-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.section_product-header .product-header_radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 57px;
  padding: 9px 18px;
  background-color: var(--_sava-color-styles---white, #FFFFFF);
  border: 0.75px solid var(--_sava-color-styles---mid-grey, #DEDDD7);
  border-radius: 10px;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* selected card: lemon fade + soft-black border (Figma 314:3033) */
.section_product-header .product-header_radio:has(input:checked) {
  border-color: var(--_sava-color-styles---soft-black, #262524);
  background-image: var(--sava-gradient-lemon-fade, linear-gradient(180deg, #FFFFFF 49.52%, #EDE087 100%));
}
/* hide the native radio dot but keep it clickable/functional */
.section_product-header .product-header_radio input.product-header_radio-button,
.section_product-header .product-header_radio .w-form-formradioinput,
.section_product-header .product-header_radio .w-radio-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}
.section_product-header .product-header_radio [li-element="product-option-name"],
.section_product-header .product-header_radio .w-form-label {
  font-family: 'Gibson', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--_sava-color-styles---soft-black, #262524);
  cursor: pointer;
}
/* icon injected by sava.js */
.sv-variant-card_icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ===========================================================
   SAVA Product Header — breadcrumb (2026-06-10)
   Shop All | {vendor} | {first collection} | {product type}
   Sits above the gallery inside the Product Header section.
   =========================================================== */
.sv-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.sv-breadcrumb_group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sv-breadcrumb_link,
.sv-breadcrumb_sep,
.sv-breadcrumb_current {
  font-family: 'Gibson', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.sv-breadcrumb_link {
  color: var(--_sava-color-styles---soft-black, #262524);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.sv-breadcrumb_link:hover {
  opacity: 1;
}
.sv-breadcrumb_sep {
  color: var(--_sava-color-styles---soft-black, #262524);
  opacity: 0.4;
}
.sv-breadcrumb_current {
  color: var(--_sava-color-styles---soft-black, #262524);
}

@media (max-width: 767px) {
  .sv-breadcrumb {
	margin-bottom: 18px;
  }
}

/* ===========================================================
   SAVA SV Logo Scroller (2026-06-13)
   Full-bleed lemon band, logos marquee right→left (Figma 219:7786).
   Merchant adds Logo blocks via Theme Editor. Reuses @keyframes
   sava-marquee. Seamless loop: sava.js clones _group once per track
   ([data-sava-marquee]). Two identical groups → translateX(-50%) loops.
   =========================================================== */
.sv-logo-scroller {
  background-color: #EDE087;
  overflow: hidden;
  width: 100%;
}
.sv-logo-scroller_track {
  display: flex;
  width: max-content;
  animation: sava-marquee 40s linear infinite;
}
.sv-logo-scroller:hover .sv-logo-scroller_track {
  animation-play-state: paused;
}
.sv-logo-scroller_group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 20px 32px;
  flex: 0 0 auto;
}
.sv-logo-scroller_logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .sv-logo-scroller_track { animation: none !important; }
}
@media (max-width: 767px) {
  .sv-logo-scroller_group { gap: 40px; padding: 16px 24px; }
  .sv-logo-scroller_logo { height: 20px; }
}

/* ===========================================================
   SAVA SV Key Ingredients (2026-06-17)
   Tabbed ingredient section. Tabs (data-sv-tab) swap panes
   (data-sv-pane) via the shared tab handler in sava.js.
   Active pane layout + benefit-list icons + killing the
   leaked tab gradient on the pane all live here.
   =========================================================== */
.sv-keying_pane { display: none; }
.sv-keying .sv-keying_pane.is-active {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  background: transparent !important;
}
@media (max-width: 991px) {
  .sv-keying .sv-keying_pane.is-active {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
}
.sv-keying_tab.is-active {
  background-image: linear-gradient(to bottom, #FFFFFF 49.5%, #EDE087);
}
.sv-keying_image {
  width: 330px;
  height: 330px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .sv-keying .sv-keying_pane.is-active { align-items: stretch; }
  .sv-keying_image { width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; }
}
.sv-keying_benefits ul { list-style: none; margin: 0; padding: 0; }
.sv-keying_benefits li {
  position: relative;
  padding-left: 34px;
  font-family: 'Gelica Light', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 24px;
  color: var(--_sava-color-styles---soft-black, #262524);
  margin: 0 0 9px;
}
.sv-keying_benefits li:last-child { margin-bottom: 0; }
.sv-keying_benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23262524' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5 5-5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===========================================================
   SAVA SV Trusted by Many — mobile order (cards → arrows → button)
   =========================================================== */
@media (max-width: 767px) {
  .sv-trusted_left { display: contents; }
  .sv-trusted_heading { order: 1; }
  .sv-trusted_body { order: 2; }
  .sv-trusted_track { order: 3; }
  .sv-trusted_arrows { order: 4; }
  .sv-trusted_button { order: 5; }
}

/* ===== SV Symptoms — check icon (data-URI lives in sava.css so it survives Liquiflow conversion) ===== */
.sv-symptoms .sv-symptoms_check{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='11'%20stroke='%23262524'%20stroke-width='1'/%3E%3Cpath%20d='M7.5%2012.4l3.1%203.1%206.4-6.9'%20stroke='%23262524'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== SV Why Take SAVA — comparison ✗/✓ icons + mobile reflow (2026-06-18) ===== */
.sv-why_x{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Ccircle%20cx='14'%20cy='14'%20r='13'%20stroke='%23C9C8C1'%20stroke-width='1'/%3E%3Cpath%20d='M10%2010l8%208M18%2010l-8%208'%20stroke='%23A9A8A2'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sv-why_check{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%20fill='none'%3E%3Ccircle%20cx='14'%20cy='14'%20r='13'%20stroke='%23262524'%20stroke-width='1'/%3E%3Cpath%20d='M8.5%2014.6l3.6%203.6%207.4-8'%20stroke='%23262524'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 767px){
  /* product image becomes a centered hero; hide OTHERS + spacer in the header row */
  .sv-why_head{ justify-content: center; padding-bottom: 22px; }
  .sv-why_head .sv-why_cell-x,
  .sv-why_head .sv-why_cell-l{ display: none; }
  .sv-why_head .sv-why_cell-v{ width: 200px; }
  .sv-why_imgwrap{ width: 200px; }
  .sv-why_glow{ display: block; }
  /* desktop gradient column off; lemon lives on the ✓ cells instead */
  .sv-why_highlight{ display: none; }
  /* show OTHERS / SAVA column headers */
  .sv-why_colheads{ display: flex; }
  /* narrow comparison columns; claims wrap */
  .sv-why_cell-x{ width: 52px; }
  .sv-why_cell-v{ width: 52px; }
  .sv-why_claim{ padding-left: 16px; font-size: 15px; line-height: 21px; }
  /* keep OTHERS / SAVA headers inside their columns so they don't overlap */
  .sv-why_colheads .sv-why_others{ font-size: 12px; letter-spacing: 0.3px; }
  /* CONTINUOUS lemon column: stretch the cells so the ✓ cell fills the full row height
     (padding moves to the ✗ + claim cells) — otherwise the lemon breaks into one box per row */
  .sv-why_row{ align-items: stretch; padding-top: 0; padding-bottom: 0; }
  .sv-why_row .sv-why_cell-x,
  .sv-why_row .sv-why_cell-l{ padding-top: 16px; padding-bottom: 16px; }
  .sv-why_colheads{ align-items: stretch; padding-bottom: 0; }
  .sv-why_colheads .sv-why_cell-x,
  .sv-why_colheads .sv-why_cell-v{ align-items: flex-end; padding-top: 6px; padding-bottom: 10px; }
  /* lemon fills the ✓ column continuously (header + rows) */
  .sv-why_colheads .sv-why_cell-v,
  .sv-why_row .sv-why_cell-v{ background-color: #F2E9AE; }
  .sv-why_colheads .sv-why_cell-v{ border-top-left-radius: 9px; border-top-right-radius: 9px; }
  .sv-why_row:last-child .sv-why_cell-v{ border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
}

/* ===== SV Product Header gallery — thumbnails as a LEFT rail + side arrows (desktop >=992) =====
   Reflows the Liquify Pro product gallery (two Swipers). Paired with a swiper.update()
   nudge in sava.js so the main image recomputes its width for the narrower column.
   Desktop only — mobile gallery is left untouched. */
@media (min-width: 992px){
  /* Gallery container: flex row-reverse (thumbnail rail on the left, main image on the right).
     KEEP position:sticky from the Webflow base — overriding it to `relative` made the base
     `top:6rem` act as a 96px downward push (that was the "image sits low" bug; sticky has no
     offset at rest, relative does). Sticky also keeps the image in view while scrolling details. */
  .swiper-container.is-product-gallery{
    display: flex !important;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 18px;
    position: sticky;
  }
  .swiper-container.is-product-gallery > .swiper.is-product-gallery{ flex: 1 1 auto; min-width: 0; }
  /* Left rail. position:static is the key arrows fix — the base sets this wrapper to
     position:relative, which made it the containing block for the absolutely-positioned
     arrows (an 84px-wide box), collapsing them. Static lets the arrows anchor to the
     full-width gallery container above instead. margin-top:0 removes the base 1rem. */
  .product-header_slider-wrapper{
    flex: 0 0 84px; width: 84px;
    margin-top: 0 !important;
    position: static !important;
  }
  /* thumbnail swiper → vertical stack */
  .swiper.is-product-thumbnail{ width: 84px !important; height: auto !important; margin: 0 !important; }
  .swiper-wrapper.is-product-thumbnail{ flex-direction: column !important; transform: none !important; height: auto !important; }
  .swiper-slide.is-product-thumbnail{ width: 84px !important; height: auto !important; margin: 0 0 12px 0 !important; }
  .product-header_thumbnail-image{ width: 100% !important; height: auto !important; display: block; }
  /* Main image: base uses object-fit:cover on a FIXED 640px-tall box, so narrowing the column
     (the rail makes it narrow sooner) turned the box portrait and cropped the pouch's sides.
     Fix: keep `cover` (image fills the box → the grey background-color never shows) but replace
     the fixed height with a SQUARE aspect-ratio that scales with the column. The product images
     are ~square (hero 284×299 ≈ 0.95, others 1600×1600), so a 1:1 box fills them with no crop
     AND no grey letterbox at every width. */
  .product-header_gallery-image{
    object-fit: cover !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Arrows → overlay the main image (starts at 84px rail + 18px gap = 102px from gallery left).
     Anchored to the gallery container now that the rail is static. */
  .swiper-container.is-product-gallery .swiper_button-wrapper.is-product-slider{
    position: absolute !important;
    top: 50% !important; bottom: auto !important;
    left: 102px !important; right: 0 !important;
    transform: translateY(-50%);
    margin: 0 !important; width: auto !important; height: auto !important;
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 0 10px; z-index: 5; pointer-events: none;
  }
}

/* ----- Arrow buttons: visual styling shared across ALL breakpoints (positioning differs:
   desktop overlays the image above; mobile sits in a row below it — see the ≤991 block). ----- */
  /* base nudges prev/next by ∓1.5rem which would hang them outside the gallery — zero them */
  .swiper_button-wrapper.is-product-slider .swiper_button.swiper-prev.pointer-events-on{ left: 0 !important; }
  .swiper_button-wrapper.is-product-slider .swiper_button.swiper-next.pointer-events-on{ right: 0 !important; }
  /* Figma circle-arrow buttons — white circle + arrow + drop shadow are all baked into the SVG.
     Strip Liquify's base circle/border and hide its inline chevron; paint the Figma SVG as the
     button background. The SVG canvas is 57px (a 40px circle plus room for the shadow), so we
     keep the 48px button box for layout and let the 57px artwork sit centred over it. */
  .swiper_button-wrapper.is-product-slider .swiper_button{
    pointer-events: auto;
    flex: 0 0 48px; width: 48px !important; height: 48px !important;
    border: none !important; background-color: transparent !important; box-shadow: none !important;
    background-repeat: no-repeat; background-position: center; background-size: 57px 57px;
  }
  .swiper_button-wrapper.is-product-slider .swiper_button .swiper_button-icon{ display: none !important; }
  .swiper_button-wrapper.is-product-slider .swiper_button.swiper-prev{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8yNjg2XzI4NzUpIj4KPGNpcmNsZSBjeD0iMjguMjg0MyIgY3k9IjI4LjI4NDMiIHI9IjIwIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTM1IDI4LjI4NDMgMjguMjg0MykiIGZpbGw9IiNGOEY4RjgiLz4KPC9nPgo8cGF0aCBkPSJNMjAuNzg3MSAyOC4xMzc1TDM2LjU0NjcgMjguMTExNSIgc3Ryb2tlPSIjMjYyNTI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTI3LjExMjIgMjEuNjMzNkwyMC43NzcxIDI4LjEwOTNMMjcuMjUyOCAzNC40NDQ0IiBzdHJva2U9IiMyNjI1MjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzI2ODZfMjg3NSIgeD0iNi4yODQyNyIgeT0iOC4yODQyMyIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44NzA1ODggMCAwIDAgMCAwLjg2NjY2NyAwIDAgMCAwIDAuODQzMTM3IDAgMCAwIDEgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18yNjg2XzI4NzUiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMjY4Nl8yODc1IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
  }
  .swiper_button-wrapper.is-product-slider .swiper_button.swiper-next{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8yNjg2XzI4ODEpIj4KPGNpcmNsZSBjeD0iMjguMjg0MyIgY3k9IjI4LjI4NDMiIHI9IjIwIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAyOC4yODQzIDI4LjI4NDMpIiBmaWxsPSIjRjhGOEY4Ii8+CjwvZz4KPHBhdGggZD0iTTM1Ljc4MTkgMjguNDMwNkwyMC4wMjIzIDI4LjQ1NjYiIHN0cm9rZT0iIzI2MjUyNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik0yOS40NTYxIDM0LjkzNDhMMzUuNzkxMiAyOC40NTkxTDI5LjMxNTUgMjIuMTI0MSIgc3Ryb2tlPSIjMjYyNTI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF8yNjg2XzI4ODEiIHg9IjYuMjg0MjciIHk9IjguMjg0MyIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44NzA1ODggMCAwIDAgMCAwLjg2NjY2NyAwIDAgMCAwIDAuODQzMTM3IDAgMCAwIDEgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18yNjg2XzI4ODEiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMjY4Nl8yODgxIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
  }

/* ===== SV Product Header gallery — MOBILE (≤991): match Figma — no thumbnail preview;
   the two circle-arrows sit in a row below the main image, right-aligned. (Desktop keeps the
   left thumbnail rail + arrows overlaid on the image.) Button visuals are shared above. ===== */
@media (max-width: 991px){
  .product-header_slider-wrapper .swiper.is-product-thumbnail{ display: none !important; }
  .product-header_slider-wrapper{
    display: flex; justify-content: flex-end;
    margin-top: -24px !important;   /* pull the arrow row up so the circles straddle the image's bottom edge (Figma) */
    position: relative; z-index: 3; /* paint the arrows over the image */
    pointer-events: none;           /* empty part of the row lets image swipes through; buttons re-enable below */
  }
  .swiper_button-wrapper.is-product-slider{
    position: static !important; inset: auto !important;
    display: flex !important;            /* also un-hides the base .hide-mobile-landscape at ≤767 */
    width: auto !important; height: auto !important;
    gap: 12px; justify-content: flex-end;
  }
}

/* ============================================================
   SV Blog — Collection (listing) page
   Restyles the Liquify blog_hero + blog_articles foundation to the SAVA
   Figma (235-6285): peach hero, white rounded article cards with light-grey
   tag pills ABOVE a rounded ~3:2 image, Gelica title, and a circular ↗ arrow.
   CSS-only — no Webflow restructure: tags are moved above the image with
   column-reverse, and the arrow is a ::after pseudo-element.
   ============================================================ */

/* ----- Hero: peach band. Liquiflow strips custom attributes from li-section roots (only the
   tag + class reach the schema). Sections in a JSON template are wrapped by Shopify with the
   LONG id form id="shopify-section-template--<number>__blog_hero" (not #shopify-section-blog_hero),
   so the exact-id selector never matched — match the section key by id SUBSTRING instead. ----- */
[id*="blog_hero"]{ background-color: #F6D7B9; }
[id*="blog_hero"] .heading-style-h1{ color: #262524; }
/* soft-white page background for the blog collection content (white cards pop against it) */
[id*="blog_articles"]{ background-color: var(--_sava-color-styles---soft-white, #f8f8f8); }
/* hero subhead/description — the only <p> in the blog hero (editable li-settings:textarea) */
[id*="blog_hero"] p{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: #262524;
  max-width: 56rem; margin: 0.75rem auto 0;
}

/* ----- Article grid → 2 columns (base 3-col → 2-col) ----- */
.blog_list{
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 42px !important; grid-row-gap: 40px !important;
  align-items: stretch;
}

/* ----- Card: white, rounded, padded; the whole card is the article link.
   .blog_cms-item is the grid cell; making it a column flex + flex:1 on the card lets every
   card stretch to the row's (equal) height regardless of title length or tag count. ----- */
/* .blog_list-item = the same card in the You May Also Like section */
.blog_cms-item, .blog_list-item{ display: flex; flex-direction: column; }
.blog_item-grid{
  flex: 1;
  display: flex !important; flex-direction: column;
  background-color: #fff; border-radius: 10px; padding: 22px;
  position: relative; text-decoration: none; color: inherit;
  transition: box-shadow .25s ease, transform .25s ease;
}
.blog_item-grid:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(38,37,36,.08); }

/* tags ABOVE the image: reverse the wrapper, un-absolute the tag row */
.blog_tags-wrapper{ display: flex; flex-direction: column-reverse; gap: 14px; position: relative; }
/* reserve the pill-row height even when an article has no tags, so every card's image + title
   line up across the grid (a no-tag card no longer shifts up to fill the gap) */
.blog_tag-row{
  position: static !important; inset: auto !important; margin: 0 !important;
  flex-wrap: wrap; gap: 11px; min-height: 27px;
  /* the JS row-equalizer grows this box — keep the wrapped pill lines
	 pinned to the TOP (Figma) instead of distributed down the space */
  align-content: flex-start;
  align-items: flex-start;
}

/* image → rounded ≈3:2 */
.blog_img{
  width: 100% !important; height: auto !important; aspect-ratio: 50 / 34;
  object-fit: cover; border: none !important; border-radius: 10px;
  background-color: #EEEEED;
}

/* tags → light-grey callout pills */
.blog_tag{
  display: inline-block; color: #262524; background-color: #EEEEED;
  margin: 0; padding: 5px 13px; border-radius: 60px;
  font-family: "InterstateMono", monospace; font-weight: 300;
  font-size: 14px; line-height: 1.1; letter-spacing: 0.7px;
  text-transform: uppercase; white-space: nowrap;
}

/* title → Gelica Light 36/40 */
.blog_info-wrapper{ text-align: left; margin-top: 18px; }
.blog_info-wrapper .heading-style-h3{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 36px; line-height: 40px; color: #262524; margin: 0;
}

/* circular ↗ arrow — pure CSS, pinned to the card's bottom-right (card is a flex column) */
.blog_item-grid::after{
  content: ""; align-self: flex-end; margin-top: auto;
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 100vw;
  border: 1px solid #DEDDD7; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23262524'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5,12H19M12,5L19,12L12,19'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px;
  transition: background-color .2s ease, border-color .2s ease;
}
/* hover → inverse: filled black circle, white arrow (Figma hover) */
.blog_item-grid:hover::after{
  background-color: #262524; border-color: #262524;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5,12H19M12,5L19,12L12,19'/%3E%3C/svg%3E");
}

/* mobile → single column */
@media (max-width: 767px){
  .blog_list{ grid-template-columns: 1fr !important; grid-row-gap: 28px !important; }
  .blog_info-wrapper .heading-style-h3{ font-size: 28px; line-height: 32px; }
}

/* ----- Quick-filter bar refinements (Figma 235:6439 "Hero Shop Button" style) ----- */
/* break the pill + title bands out of container-large so they span the full viewport width */
.sv-blog-filterbar, .sv-blog-titlebar{ width: 100vw; margin-left: calc(50% - 50vw); }
.sv-blog-filterbar{ background-color: #fff !important; position: relative; }   /* white band; anchor for the arrows */
/* kill the soft-white gap between the peach hero and the white pill band — the Blog-Articles
   section's own padding-section-small top padding was showing through (Figma: bands sit flush) */
[id*="blog_articles"] .padding-section-small{ padding-top: 0 !important; }
/* sticky title bar must sit BELOW the navbar's stacking context (.section_navbar is z-index:10,
   which caps the whole mega menu inside it) — z:9 keeps the open mega menu painting over the bar,
   while still above the article cards and the pill-row arrows (z:2) */
.sv-blog-titlebar{ z-index: 9 !important; }
/* Figma button: 157×45 rectangle, 10px radius, 0.75px mid-grey border, Gibson Medium 14/2.1 uppercase.
   Long labels (FUNCTIONAL MEDICINE) wrap to 2 lines inside the fixed width, exactly like Figma. */
.sv-blog-pill{
  box-sizing: border-box; width: 157px; min-height: 45px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 10px 8px !important; border-radius: 10px !important;
  border: 0.75px solid #DEDDD7 !important; background-color: #fff;
  font-family: "Gibson", sans-serif !important; font-weight: 500 !important;
  font-size: 14px !important; line-height: 1.2; letter-spacing: 2.1px !important;
  text-transform: uppercase; color: #262524; text-align: center; white-space: normal !important;
  transition: background .2s ease;
}
/* hover + active/selected fill: vertical white→peach fade; border stays (Figma "Button Fill" annotation) */
.sv-blog-pill:hover,
.sv-blog-pill.is-active{
  background: var(--sava-gradient-light-peach-fade, linear-gradient(180deg,#FFFFFF 49.52%,#F6D7B9 100%)) !important;
  border-color: #DEDDD7 !important; box-shadow: none !important; color: #262524;
}
/* hide the pill row's scrollbar (swipe/arrows are the affordance) */
.sv-blog-pills{ scrollbar-width: none; scroll-behavior: smooth; }
.sv-blog-pills::-webkit-scrollbar{ display: none; }
/* Carousel arrows (injected by sava.js) — same Figma circle-arrows as the product gallery,
   pinned ~3.4% from each viewport edge; desktop-only, and only when the row overflows */
.sv-blog-pills-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0; border: none; cursor: pointer;
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 57px 57px;
  display: none; z-index: 2;
}
.sv-blog-pills-arrow.is-prev{
  left: 3.4%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8yNjg2XzI4NzUpIj4KPGNpcmNsZSBjeD0iMjguMjg0MyIgY3k9IjI4LjI4NDMiIHI9IjIwIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTM1IDI4LjI4NDMgMjguMjg0MykiIGZpbGw9IiNGOEY4RjgiLz4KPC9nPgo8cGF0aCBkPSJNMjAuNzg3MSAyOC4xMzc1TDM2LjU0NjcgMjguMTExNSIgc3Ryb2tlPSIjMjYyNTI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTI3LjExMjIgMjEuNjMzNkwyMC43NzcxIDI4LjEwOTNMMjcuMjUyOCAzNC40NDQ0IiBzdHJva2U9IiMyNjI1MjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzI2ODZfMjg3NSIgeD0iNi4yODQyNyIgeT0iOC4yODQyMyIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44NzA1ODggMCAwIDAgMCAwLjg2NjY2NyAwIDAgMCAwIDAuODQzMTM3IDAgMCAwIDEgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18yNjg2XzI4NzUiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMjY4Nl8yODc1IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
}
.sv-blog-pills-arrow.is-next{
  right: 3.4%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZF8yNjg2XzI4ODEpIj4KPGNpcmNsZSBjeD0iMjguMjg0MyIgY3k9IjI4LjI4NDMiIHI9IjIwIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAyOC4yODQzIDI4LjI4NDMpIiBmaWxsPSIjRjhGOEY4Ii8+CjwvZz4KPHBhdGggZD0iTTM1Ljc4MTkgMjguNDMwNkwyMC4wMjIzIDI4LjQ1NjYiIHN0cm9rZT0iIzI2MjUyNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik0yOS40NTYxIDM0LjkzNDhMMzUuNzkxMiAyOC40NTkxTDI5LjMxNTUgMjIuMTI0MSIgc3Ryb2tlPSIjMjYyNTI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF8yNjg2XzI4ODEiIHg9IjYuMjg0MjciIHk9IjguMjg0MyIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+CjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8+CjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPgo8ZmVPZmZzZXQgZHk9IjIiLz4KPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIvPgo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJvdXQiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC44NzA1ODggMCAwIDAgMCAwLjg2NjY2NyAwIDAgMCAwIDAuODQzMTM3IDAgMCAwIDEgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18yNjg2XzI4ODEiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfMjY4Nl8yODgxIiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=");
}
@media (min-width: 992px){
  .sv-blog-filterbar.sv-has-overflow .sv-blog-pills-arrow{ display: block; }
  /* clear the arrows so pills don't slide underneath them (arrow ends ≈ 3.4% + 48px) */
  .sv-blog-filterbar.sv-has-overflow .sv-blog-pills{ padding-left: calc(3.4% + 68px); padding-right: calc(3.4% + 68px); }
}
/* ----- Filter category panel (Figma 235:8355, flat-tag version) — opened by the Filter button;
   built by sava.js by cloning the pill row, so it always mirrors the live tags + active state.
   Child of the sticky titlebar → anchors below it wherever it's stuck; full-width like the bar. ----- */
.sv-blog-filter-panel{
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid #DEDDD7;
  box-shadow: 0 24px 40px rgba(38,37,36,.08);
  padding: 40px 5% 48px; max-height: 70vh; overflow: auto;
}
.sv-blog-filter-panel.is-open{ display: block; }
.sv-blog-filter-panel_inner{
  display: flex; flex-wrap: wrap; gap: 12px;
  max-width: 1360px; margin: 0 auto;
}
.sv-blog-filter-panel_close{
  position: absolute; top: 14px; right: 5%;
  width: 32px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: #262524;
}
.sv-blog-filter-btn{ user-select: none; }
/* breathing room between the sticky Recent bar and the first row of cards */
.blog_cms-wrapper{ padding-top: 40px; }

/* ============================================================
   SV Blog Article — post/detail page (Figma 237-10442)
   Styles the Liquify article_hero + article_content sections.
   Trail/tag visuals live as native Webflow styles; this block adds
   section backgrounds, the 747px content column, and the rich-text
   typography per Figma.
   ============================================================ */
/* ----- Hero: soft-white band, hairline bottom; title centered, capped at Figma's 986px ----- */
[id*="article_hero"]{ background-color: var(--_sava-color-styles---soft-white, #F8F8F8); border-bottom: 1px solid #DEDDD7; }
[id*="article_hero"] .heading-style-h1{ max-width: 986px; margin-left: auto; margin-right: auto; }
/* Figma vertical rhythm: ~44px navbar→trail, ~56px trail→tags, ~104px title→hairline
   (the Liquify default padding-section-large = 8rem top was the big white gap) */
[id*="article_hero"] .padding-section-large{ padding-top: 2.75rem !important; padding-bottom: 6.5rem !important; }
.sv-article-trail{ margin-bottom: 56px !important; }
.sv-article-tags{ margin-bottom: 36px !important; }

/* ----- Content: white bg; body column = 747px centered; featured image rounded ----- */
[id*="article_content"]{ background-color: var(--_sava-color-styles---soft-white, #F8F8F8); }
.article_wrapper{ max-width: 747px; margin-left: auto; margin-right: auto; }
.sv-article-tag{ margin: 0; }   /* hero pill is a <p> — strip the default paragraph margin */
.sv-article-image{ width: 100%; height: auto; border-radius: 10px; display: block; }

/* ----- Rich-text typography (Figma): section heads = Gelica Light 36/40 CENTERED with
   generous space above; body = Gibson Book 16/24 left-aligned ----- */
.article_wrapper .text-rich-text{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: #262524;
}
.article_wrapper .text-rich-text h2{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 36px; line-height: 40px; color: #262524;
  text-align: center; margin: 64px 0 28px;
}
.article_wrapper .text-rich-text h3{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 28px; line-height: 34px; color: #262524;
  text-align: center; margin: 48px 0 20px;
}
/* h4 = the "DO:" / "DON'T:" style bold sub-heads */
.article_wrapper .text-rich-text h4{
  font-family: "Gibson", sans-serif; font-weight: 500;
  font-size: 16px; line-height: 22px; letter-spacing: .5px; text-transform: uppercase;
  margin: 32px 0 12px;
}
.article_wrapper .text-rich-text p{ margin: 0 0 16px; }
.article_wrapper .text-rich-text ul,
.article_wrapper .text-rich-text ol{ margin: 0 0 16px; padding-left: 22px; }
.article_wrapper .text-rich-text li{ margin-bottom: 8px; }
.article_wrapper .text-rich-text blockquote{
  border-left: 3px solid #F6D7B9; margin: 28px 0; padding: 8px 0 8px 20px;
  font-family: "Gelica", serif; font-weight: 300; font-size: 22px; line-height: 32px;
}
.article_wrapper .text-rich-text img{ border-radius: 10px; }
/* tables (e.g. the fasting-timeline): hairline rows, uppercase mono header row */
.article_wrapper .text-rich-text table{ width: 100%; border-collapse: collapse; margin: 28px 0; }
.article_wrapper .text-rich-text th{
  font-family: "InterstateMono", monospace; font-weight: 300;
  font-size: 13px; letter-spacing: .7px; text-transform: uppercase; text-align: left;
  padding: 10px 12px 10px 0; border-bottom: 1px solid #DEDDD7;
}
.article_wrapper .text-rich-text td{
  font-size: 15px; line-height: 22px; padding: 12px 12px 12px 0;
  border-bottom: 1px solid #DEDDD7; vertical-align: top;
}
/* mobile */
@media (max-width: 767px){
  .article_wrapper .text-rich-text h2{ font-size: 28px; line-height: 34px; margin-top: 44px; }
  .article_wrapper .text-rich-text h3{ font-size: 24px; line-height: 30px; }
}

/* ----- SV Deep Dive — universal end-of-article section (Figma 239:10924).
   Soft-white fading to peach; editable Heading/Body/Share Label + Instagram URL
   in the Theme Editor; Pinterest/Facebook/Email links share the current article. ----- */
.sv-deep-dive{
  background: var(--sava-gradient-light-peach-fade-transparent, linear-gradient(180deg, rgba(248,248,248,0) 49.52%, #F6D7B9 100%)),
              var(--_sava-color-styles---soft-white, #F8F8F8);
  border-top: 1px solid #DEDDD7;
}
.sv-deep-dive_content{ max-width: 747px; margin: 0 auto; }
.sv-deep-dive_heading{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 36px; line-height: 40px; color: #262524;
  text-align: center; margin: 0 0 36px;
}
.sv-deep-dive_body{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: #262524;
}
.sv-deep-dive_body p{ margin: 0 0 16px; }
.sv-deep-dive_body ul, .sv-deep-dive_body ol{ margin: 0 0 16px; padding-left: 22px; }
.sv-deep-dive_body li{ margin-bottom: 8px; }
.sv-deep-dive_body a{ color: #262524; text-decoration: underline; }
.sv-deep-dive_share{ margin-top: 72px; text-align: center; }
.sv-deep-dive_share-label{
  font-family: "Gibson", sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: 2.4px; text-transform: uppercase;
  color: #262524; margin: 0 0 20px;
}
.sv-deep-dive_icons{ display: flex; justify-content: center; align-items: center; gap: 19px; }
.sv-deep-dive_icon-link{ display: inline-flex; align-items: center; transition: opacity .2s ease; }
.sv-deep-dive_icon-link:hover{ opacity: .6; }
.sv-deep-dive_icon{ height: 23px; width: auto; display: block; }
@media (max-width: 767px){
  .sv-deep-dive_heading{ font-size: 28px; line-height: 34px; }
  .sv-deep-dive_share{ margin-top: 52px; }
}

/* ============================================================
   SV Contact page (Figma 235-8724) — three sections:
   Contact Hero (left title) / Email Us (full-bleed image band) /
   Newsletter (blueberry band + Shopify customer form).
   All copy is Theme-Editor-editable via li-settings.
   ============================================================ */
/* ----- Hero: light-grey band, centered title (user preference over Figma's left) ----- */
.sv-contact-hero{ background-color: var(--_sava-color-styles---light-grey, #EEEEED); padding: 8.5rem 0; }
.sv-contact-hero_heading{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 52px; line-height: 54px; color: #262524; margin: 0;
  text-align: center;
}
/* ----- Email Us: full-bleed background image + left content stack ----- */
.sv-email-us{ position: relative; overflow: hidden; background-color: var(--_sava-color-styles---soft-white, #F8F8F8); padding: 8rem 0 9rem; }
.sv-email-us_bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sv-email-us .padding-global{ position: relative; z-index: 1; }
.sv-email-us_content{ max-width: 480px; }
.sv-email-us_eyebrow{
  font-family: "InterstateMono", monospace; font-weight: 300;
  font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase;
  color: #262524; margin: 0 0 16px;
}
.sv-email-us_heading{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 52px; line-height: 54px; color: #262524; margin: 0 0 40px;
}
.sv-email-us_pill{
  display: inline-block; background-color: #fff; border-radius: 10px;
  padding: 18px 20px; text-decoration: none;
}
.sv-email-us_pill-text{
  font-family: "Gibson", sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: 2.4px; text-transform: uppercase;
  color: #262524; text-decoration: underline; margin: 0; white-space: nowrap;
}
.sv-email-us_note{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: #262524; margin: 16px 0 0;
}
/* ----- Newsletter: blueberry band, centered, Shopify customer form ----- */
.sv-contact-news{ background-color: #99BBE1; padding: 11rem 0; text-align: center; }
.sv-contact-news_heading{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 36px; line-height: 40px; color: var(--_sava-color-styles---soft-white, #F8F8F8);
  max-width: 460px; margin: 0 auto 40px;
}
.sv-contact-news_body{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: var(--_sava-color-styles---soft-white, #F8F8F8);
  max-width: 576px; margin: 0 auto 48px;
}
.sv-contact-news_form-block{ max-width: 448px; margin: 0 auto; }
.sv-contact-news_form{ position: relative; }
.sv-contact-news_input{
  width: 100%; height: 37px; box-sizing: border-box;
  background-color: transparent; border: 1px solid var(--_sava-color-styles---soft-white, #F8F8F8);
  border-radius: 10px; padding: 0 48px 0 14px; margin: 0;
  font-family: "Gibson", sans-serif; font-weight: 300; font-size: 16px; color: #fff;
}
.sv-contact-news_input::placeholder{ color: #fff; opacity: 1; }
.sv-contact-news_input:focus{ outline: none; border-color: #fff; }
.sv-contact-news_submit{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: none; cursor: pointer;
  color: transparent; font-size: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23F8F8F8'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h17M14%205l7%207-7%207'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
}
/* mobile — Email Us STACKS (Figma mobile): centered content on soft-white, image below, flush bottom */
@media (max-width: 767px){
  .sv-contact-hero{ padding: 4.5rem 0; }
  .sv-contact-hero_heading, .sv-email-us_heading{ font-size: 38px; line-height: 44px; }
  .sv-email-us{ padding: 4.5rem 0 0; display: flex; flex-direction: column; }
  .sv-email-us .padding-global{ order: 1; }
  .sv-email-us_bg{
    position: static; order: 2;              /* out of the overlay, below the content */
    width: 100%; height: 440px; object-fit: cover;
    object-position: right center;           /* the products live on the RIGHT of the wide source image — crop to them (Figma mobile) */
    margin-top: 3.5rem;                      /* content → image gap; image sits flush on the section bottom */
  }
  .sv-email-us_content{ max-width: none; text-align: center; }
  .sv-email-us_pill-text{ white-space: normal; font-size: 14px; letter-spacing: 1.8px; }
  .sv-contact-news{ padding: 7rem 0; }
}

/* ============================================================
   SV Quiz Hero (Figma 46-4809 desktop / 233-2716 mobile)
   Peach-fade hero with centered editable copy + 8 merchant-editable
   collage images at fixed positions (left/right px-anchored so the
   composition holds as the viewport scales; edge images bleed off).
   Desktop: images surround the copy. Mobile: copy on top, collage below.
   ============================================================ */
.sv-quiz-hero{
  position: relative; overflow: hidden;
  min-height: 898px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sava-gradient-light-peach-fade-transparent, linear-gradient(180deg, rgba(248,248,248,0) 49.52%, #F6D7B9 100%)),
              var(--_sava-color-styles---soft-white, #F8F8F8);
}
.sv-quiz-hero_images{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sv-quiz-hero_images img{ position: absolute; object-fit: cover; border-radius: 10px; }
/* desktop collage positions (1440 design; left cluster px-from-left, right cluster px-from-right) */
.sv-quiz-img1{ left: -28px;  top: 64px;  width: 332px; height: 188px; }
.sv-quiz-img2{ left: 51.1%;  top: 16px;  width: 256px; height: 142px; }
.sv-quiz-img3{ right: 73px;  top: 72px;  width: 231px; height: 157px; }
.sv-quiz-img4{ right: -115px; top: 158px; width: 231px; height: 290px; }
.sv-quiz-img5{ left: 46px;   top: 513px; width: 248px; height: 193px; }
.sv-quiz-img6{ left: 202px;  top: 640px; width: 332px; height: 188px; }
.sv-quiz-img7{ left: 48.2%;  top: 740px; width: 244px; height: 244px; }
.sv-quiz-img8{ right: -38px; top: 486px; width: 342px; height: 342px; }
/* content stack */
.sv-quiz-hero_content{ position: relative; z-index: 1; text-align: center; }
.sv-quiz-hero_eyebrow{
  font-family: "InterstateMono", monospace; font-weight: 300;
  font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase;
  color: #262524; margin: 0 0 16px;
}
.sv-quiz-hero_heading{
  font-family: "Gelica", serif; font-weight: 300;
  font-size: 52px; line-height: 54px; color: #262524; margin: 0 0 29px;
}
.sv-quiz-hero_body{
  font-family: "Gibson", sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px; color: #262524;
  max-width: 644px; margin: 0 auto 48px;
}
/* standard SAVA button (white pill, dark fill on hover) */
.sv-quiz-hero_button{
  display: inline-block; background-color: #fff;
  border: 0.75px solid var(--_sava-color-styles---mid-grey, #DEDDD7); border-radius: 10px;
  padding: 13px 31px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.sv-quiz-hero_button p{
  font-family: "Gibson", sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: 2.4px; text-transform: uppercase;
  color: #262524; margin: 0; transition: color .2s ease;
}
.sv-quiz-hero_button:hover{ background-color: #262524; }
.sv-quiz-hero_button:hover p{ color: #fff; }
/* mobile: copy on top, full-width button, collage cascades below (Figma 233-2716) */
@media (max-width: 767px){
  .sv-quiz-hero{
    display: flex; flex-direction: column;   /* content FIRST, collage second — the images div is
                                                first in the DOM, so block flow put it on top */
    min-height: 0; padding: 44px 0 0;
  }
  .sv-quiz-hero .padding-global{ order: 1; width: 100%; }
  .sv-quiz-hero_content{ padding: 0 20px; }
  .sv-quiz-hero_heading{ font-size: 36px; line-height: 40px; margin-bottom: 20px; }
  .sv-quiz-hero_body{ margin-bottom: 44px; }
  .sv-quiz-hero_button{ display: block; text-align: center; margin: 0 20px; }
  .sv-quiz-hero_images{
    order: 2; position: relative; inset: auto; height: 450px; margin-top: 48px;
    width: 100%;   /* the section's align-items:center stops this in-flow div from stretching;
                      with only absolute children it collapses to 0 wide and the imgs'
                      max-width:100% clamps them invisible */
  }
  .sv-quiz-img1{ left: -46px;  top: 36px;  width: 218px; height: 123px; }
  .sv-quiz-img2{ left: auto; right: 20px;  top: 0;     width: 151px; height: 84px; }
  .sv-quiz-img3{ right: -72px; top: 125px; width: 144px; height: 98px; }
  .sv-quiz-img4{ right: -8px;  top: 184px; width: 195px; height: 245px; }
  .sv-quiz-img5{ left: 39px;   top: 254px; width: 133px; height: 104px; }
  /* Figma mobile shows only the first five collage images */
  .sv-quiz-img6, .sv-quiz-img7, .sv-quiz-img8{ display: none; }
}

/* ============================================================
   SV Header Mega — desktop polish (2026-07-04)
   Nav bar + open mega panels on soft-white; primary links Gelica
   Light (base rule higher up was DEAD until the selector fix —
   Webflow publishes the "nav_dropdown-toggle 2" class as
   nav_dropdown-toggle-2, hyphen not space); SAVA REWARDS pill
   (Liquid hides it while the Rewards Link URL is blank) + search
   icon linking to /search.
   ============================================================ */
.section_navbar-mega .nav_component-2,
.section_navbar-mega .nav_dropdown-list-2,
.section_navbar-mega .sava-mega-menu_dropdown-list,
.section_navbar-mega .sava-mega-menu_inner{
  background-color: #F8F8F8;
}
.section_navbar-mega .nav_dropdown-toggle-2 p{
  font-size: 20px;
  line-height: 26px;
  color: #262524;
}
/* chevron is absolutely positioned at the toggle's right edge — the base
   rule's uniform padding left no room for it and it overlapped the text.
   Reserve right padding and pin the icon inside it. */
.section_navbar-mega .nav_dropdown-toggle-2{
  padding: 0.75rem 2.4rem 0.75rem 1rem;
}
.section_navbar-mega .nav_dropdown-toggle-2 .dropdown-icon{
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 16px;
  height: 16px;
}

/* SAVA REWARDS pill */
.sava-nav_rewards-wrap{ display: contents; }
.sava-nav_rewards-pill{
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  border: 0.75px solid #DEDDD7;
  border-radius: 10px;   /* standard SAVA button radius */
  padding: 13px 31px;    /* standard SAVA button padding */
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.sava-nav_rewards-label{
  margin: 0;
  font-family: 'Gibson', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2.1px;
  text-transform: uppercase;
  color: #262524;
  white-space: nowrap;
}
.sava-nav_rewards-pill:hover{ background-color: #262524; }
.sava-nav_rewards-pill:hover .sava-nav_rewards-label{ color: #fff; }

/* Search icon — inherits the account icon footprint via nav_shop-icon-2 */
.sava-nav_search-icon{ color: #262524; }

/* Icon row spacing — uniform gap from pill to cart */
.section_navbar-mega .nav_shop-icons{
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo must never shrink — it was getting crushed when the bar ran out of room */
.section_navbar-mega .nav_logo-link{ flex-shrink: 0; }

/* Narrow-desktop squeeze (992–1150px): the full-size links + pill + icons
   overflow the bar just above the tablet breakpoint and clipped the logo.
   Tighten type and spacing until the collapse point. */
@media (max-width: 1150px) and (min-width: 992px){
  .section_navbar-mega .nav_dropdown-toggle-2 p{ font-size: 17px; }
  .section_navbar-mega .nav_dropdown-toggle-2{ padding: 0.75rem 1.9rem 0.75rem 0.6rem; }
  .section_navbar-mega .nav_dropdown-toggle-2 .dropdown-icon{ right: 0.6rem; }
  .section_navbar-mega .nav_shop-icons{ gap: 14px; }
  .sava-nav_rewards-pill{ padding: 11px 18px; }
  .sava-nav_rewards-label{ font-size: 12px; letter-spacing: 1.8px; }
}

/* SV Nav Search — slide-down bar under the navbar (markup injected by sava.js).
   White rounded field per the Figma mobile search pattern; live-suggestion
   panel drops below it using Liquify's predictive-search classes. */
.sv-nav-search{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #F8F8F8;
  border-bottom: 0.75px solid #DEDDD7;
  padding: 16px 5%;
}
.sv-nav-search.is-open{ display: block; }
.sv-nav-search_inner{
  display: block;
  position: relative;
  max-width: 85rem;
  margin: 0 auto;
}
.sv-nav-search_form{
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  border: 0.75px solid #DEDDD7;
  border-radius: 10px;
  padding: 14px 20px;
}
.sv-nav-search_input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Gibson', sans-serif;
  font-size: 16px;
  color: #262524;
}
.sv-nav-search_input::placeholder{ color: #B3B1AC; }
.sv-nav-search_input::-webkit-search-cancel-button{ -webkit-appearance: none; }
.sv-nav-search_submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: #262524;
  cursor: pointer;
}
.sv-nav-search_results{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background-color: #fff;
  border: 0.75px solid #DEDDD7;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 20px;
}

/* ============================================================
   SV Header Mega — MOBILE bar (Figma: hamburger LEFT, logo CENTER,
   cart RIGHT; always-visible search field under the bar; account
   icon appears only in the open-drawer icon row)
   ============================================================ */
@media (max-width: 991px){
  .sava-nav_rewards-wrap,
  .sava-nav_rewards-pill,
  .sava-nav_search-icon{ display: none; }

  /* nav root is a flex ROW — a static search panel became a flex sibling
	 of the bar and squeezed it to half width. Block flow stacks them.
	 Compiled webflow css also gives this element 2.5rem side padding,
	 which stacked with the rows' own 20px and inset everything ~55px —
	 zero it here; the bar row and search row carry their own 20px. */
  .section_navbar-mega .nav_component-2{
	display: block;
	padding-left: 0;
	padding-right: 0;
  }

  .section_navbar-mega .nav_container{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px; /* 20px side margins per Figma */
  }
  .section_navbar-mega .nav_menu-button{ order: -1; padding: 0; }
  /* hamburger: compiled webflow css paints a white circle (bg + box-shadow)
	 and Webflow-BLUE lines (#146ef5 hardcoded) — bare soft-black lines per Figma */
  .section_navbar-mega .menu-icon-2{
	background-color: transparent;
	box-shadow: none;
  }
  .section_navbar-mega .menu-icon_line-top-2,
  .section_navbar-mega .menu-icon_line-bottom-2,
  .section_navbar-mega .menu-icon_line-middle-2,
  .section_navbar-mega .menu-icon_line-middle-inner{
	background-color: #262524;
  }
  .section_navbar-mega .nav_logo-link{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
  }
  /* account is drawer-only on mobile */
  .section_navbar-mega .nav_account{ display: none; }
  .w-nav.sava-nav-open .nav_account{ display: block; }

  /* Search field: ALWAYS visible below the bar on mobile (not click-toggled);
	 hidden while the drawer is open (Figma shows only the icon row + accordions) */
  .sv-nav-search{
	display: block;
	position: static;
	padding: 20px 20px 24px; /* Figma vertical rhythm around the search row */
	border-bottom: 0.75px solid #DEDDD7;
	max-height: 130px;
	transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
  }
  .w-nav.sava-nav-open .sv-nav-search{ display: none; }

  /* Collapse the search row once the page is scrolled (sava.js toggles
	 sv-search-collapsed on the .w-nav at scrollY > 24; it never collapses
	 while the input is focused). overflow:hidden lives ONLY in this
	 collapsed state — the expanded row must overflow so the absolute
	 predictive-results panel can drop below it unclipped. */
  .w-nav.sv-search-collapsed .sv-nav-search{
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-width: 0;
  }
}

/* ============================================================
   You May Also Like — Related Articles section on blog articles
   (Figma: centered Gelica heading, 3-up reuse of the collection
   cards, centered BACK TO BLOG pill button). The cards are the
   same Snippet / Blog Article item component as the collection —
   only scoped overrides here.
   ============================================================ */
.section_related-articles{ background-color: #F8F8F8; }
.section_related-articles .heading-style-h2{
  text-align: center;
  font-family: 'Gelica', serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 40px;
  color: #262524;
}
/* 3-up grid (collection base rule is 2-up !important) */
.section_related-articles .blog_list{
  grid-template-columns: repeat(3, 1fr) !important;
  grid-column-gap: 32px !important;
}
/* smaller card titles at 3-up width */
.section_related-articles .blog_info-wrapper .heading-style-h3{
  font-size: 28px;
  line-height: 34px;
}
.related-articles_button-wrap{
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.related-articles_button{
  display: inline-block;
  background-color: #fff;
  border: 0.75px solid #DEDDD7;
  border-radius: 10px;
  padding: 13px 31px;
  font-family: 'Gibson', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #262524;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.related-articles_button:hover{
  background-color: #262524;
  color: #fff;
}
@media (max-width: 767px){
  /* scoped 3-up above would beat the collection's generic mobile 1fr rule */
  .section_related-articles .blog_list{
	grid-template-columns: 1fr !important;
	grid-row-gap: 28px !important;
  }
  .related-articles_button-wrap{ margin-top: 36px; }
  .related-articles_button{
	display: block;
	width: 100%;
	text-align: center;
  }
}

/* ===========================================================
   SAVA — Recharge subscription widget (2026-07-14)
   Recharge's "Advanced custom CSS" box wasn't reaching the
   storefront reliably, so the plan-selector label styling
   lives here instead. Uppercase + 2.4px tracking to match
   the SAVA label spec (Gibson 16px).
   =========================================================== */
.rc-purchase-option__selector {
  font-size: 16px !important;
  padding: 3px 0 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  text-transform: uppercase !important;
  letter-spacing: 2.4px !important;
}

/* ============================================================
   Boost cart count bubble — clone of Webflow's .nav_shop-quantity-2
   so the badge stays styled even if that class is purged from the
   compiled CSS after the Liquify mini-cart removal (2026-07-17).
   ============================================================ */
.Boost_CartCount {
  color: #fff;
  background-color: #110d1a;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  font-size: .7rem;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
}