/** Shopify CDN: Minification failed

Line 644:55 Unexpected "*"
Line 647:77 Unterminated string token

**/
/* Caldera — Horizon overrides.
   Loaded after {{ content_for_header }} so single-class selectors win the
   cascade vs. section/block {% stylesheet %}. Selectors here target upstream
   class names; re-verify each one survives `git pull upstream main`. */

/* Button font size + weight — the theme editor exposes button font family/case
   but neither size nor weight. Buttons otherwise inherit --font-paragraph--weight
   (400), which reads too thin for a CTA; Beausite ships a real 500 so there's no
   faux-bold. */
.button,
.button-secondary {
  font-size: var(--font-size--sm);
  font-weight: var(--caldera-font-weight-medium);
  letter-spacing: 0.28px;
}

@media screen and (min-width: 750px) {
  .button,
  .button-secondary {
    font-size: var(--font-size--md);
  }
}


/* Promo bar: message size is set per-slide in the theme editor; this only frees
   the width the slides container reserves for both arrows
   (calc(100% - var(--button-size) * 2)), which left ~255px on a phone and forced
   the messages onto two lines. The arrows are an absolute overlay, so the text
   can span the bar (as it does on live). Clamp to one line as a backstop. */
@media screen and (max-width: 749px) {
  .announcement-bar .announcement-bar__slides {
    width: 100%;
  }
}

.announcement-bar .announcement-bar__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.header-menu .menu-list__link-title {
  padding-inline: calc(var(--gap-2xl) / 1.5);
  font-weight: var(--caldera-font-weight-medium);
}

.header-menu li:first-child .menu-list__link-title {
  padding-inline-start: var(--gap-md);
}

/* Plus icon on top-level links that open a mega menu (aria-haspopup), swapping
   to minus on hover / when open. Rendered as a currentColor mask so it follows
   the link color; no markup change to the upstream menu. */
.header-menu {
  --caldera-menu-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M0.5 10H20.5M10.5 0L10.5 20' stroke='black'/%3E%3C/svg%3E");
  --caldera-menu-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 2' fill='none'%3E%3Cpath d='M0.5 1H20.5' stroke='black'/%3E%3C/svg%3E");
}

.header-menu .menu-list__link[aria-haspopup='true'] .menu-list__link-title::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 6px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--caldera-menu-plus) no-repeat center / contain;
  mask: var(--caldera-menu-plus) no-repeat center / contain;
  position: relative;
  top: -2px;
}

.header-menu .menu-list__list-item:hover .menu-list__link[aria-haspopup='true'] .menu-list__link-title::after,
.header-menu .menu-list__link[aria-haspopup='true'][aria-expanded='true'] .menu-list__link-title::after {
  -webkit-mask-image: var(--caldera-menu-minus);
  mask-image: var(--caldera-menu-minus);
}

.header-menu .menu-list--mobile.menu-list{
  display: none;
}

/* Mobile drawer: hide the first-level (top) menu items so the child links
   become the visible nav, styled like the desktop mega-menu links (h3 = 20px
   on mobile/tablet) with the caldera arrow shown on the trailing edge. */
.menu-drawer__menu-item.menu-drawer__menu-item--mainlist {
  display: none;
}

.menu-drawer__menu-item {
  --caldera-drawer-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none'%3E%3Cpath d='M11.9994 0.5L20.5 9M20.5 9L11.9994 17.5M20.5 9H0.499999' stroke='black'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-h3--family);
  font-size: var(--font-h3--size);
  font-weight: var(--font-h3--weight);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
}

.menu-drawer__menu-item::after {
  content: '';
  flex: 0 0 auto;
  margin-inline-start: auto;
  width: 20px;
  aspect-ratio: 22 / 18;
  background-color: currentColor;
  -webkit-mask: var(--caldera-drawer-arrow) no-repeat center / contain;
  mask: var(--caldera-drawer-arrow) no-repeat center / contain;
}

/* Drawer close button is a bare X (live parity). The top-level button carries
   .button (not .button-unstyled), so it picks up the inset box-shadow ring that
   .close-button's border-radius renders as a circle — drop it. Line the glyph up
   with the callout content edge beneath it: icon-close.svg insets its X ~2/14 of
   the box, so pull the start padding in by that much so the visible X sits at
   --padding-md like the "Featured Products" heading. */
.menu-drawer__close-button {
  box-shadow: none;
  padding-inline-start: calc(var(--padding-md) - 3px);
}

.menu-drawer__close-button svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

@media screen and (min-width: 990px) {
  .header-actions--text,
  .header__column--right {
    gap: var(--gap-2xl);
  }
}

.header-actions__text-style {
  font-weight: var(--caldera-font-weight-medium);
}

/* Header cart badge shows the count at all times, including 0 (live-site
   parity). The "0" is already rendered; Horizon hides it via .visually-hidden
   on the bubble and .hidden on the count (server-side and re-toggled by
   cart-icon.js on updates), so re-show both, scoped to the header badge. */
.header-actions__cart-icon .cart-bubble.visually-hidden:not(:focus, :active) {
  width: var(--cart-bubble-size, 20px);
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.header-actions__cart-icon .cart-bubble__text-count.hidden {
  display: inline !important;
}

/* Count sits inside the open bag icon: drop Horizon's donut mask and badge
   background, and center the number over the icon in the header foreground
   color (base .cart-bubble colors it for a filled badge). */
.header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
  mask: none;
  -webkit-mask: none;
}

.header-actions__cart-icon .cart-bubble__background {
  display: none;
}

.header-actions__cart-icon .cart-bubble {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -64%);
  color: inherit;
}

.cart-bubble__text {
  font-size: var(--font-size--2xs);
}

/* Solid header background on mobile/tablet, gated by the header's "Solid
   background on mobile/tablet" setting. Transparent-header pages collapse the
   underlay (--closed-underlay-height: 0px), hiding the bar; restoring it on
   small screens repaints the color-scheme background. */
@media screen and (max-width: 989px) {
  .header[data-caldera-solid-mobile] {
    --closed-underlay-height: 100%;
  }
}

/* Transparent-header desktop: hold a top-down scrim on the header so the nav
   stays legible over the hero. Excludes the scrolled (data-sticky-state=active)
   state so Horizon's scroll-to-solid still works — once stuck, this override
   drops out and the underlay repaints its solid color-scheme background. Mobile
   keeps its solid bar from the rule above. */
@media screen and (min-width: 990px) {
  .header[transparent]:not([data-sticky-state='active']) .header__underlay-closed {
    --closed-underlay-height: 100%;
    background: linear-gradient(var(--caldera-colors-black-80) 0%, transparent 100%);
  }
}

/* Keep the transparent header from covering the hero. Upstream pulls the first
   section up by --header-group-height (announcement bar + header, per the
   inline script in theme.liquid) so it sits under the floating header; drop
   that pull so the hero starts below the whole header group instead. */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: 0;
}

/* Mobile: the transparent header reads solid (promo bar + menu), so keep it out
   of the hero rather than floating over it — push the first section down by the
   header height. Desktop keeps the overlay (rule above). */
@media screen and (max-width: 989px) {
  body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: var(--header-height, 0px);
  }
}

/* 84px desktop header. Height comes from the nav links being full-bar height,
   NOT from --header-padding: column padding sits below the centered links as a
   non-hoverable strip (the menu list clips it via overflow-y), so crossing it
   toward the mega menu drops :hover and the submenu flickers. Tall links keep
   their whole hover area flush with the mega-menu edge. Compact mode and the
   bottom-row layout keep upstream values via more specific selectors. */
@media screen and (min-width: 990px) {
  .header:not(.header--compact) {
    --header-padding: 0px;
  }

  .header:not(.header--compact) .header-menu .menu-list__link {
    display: flex;
    align-items: center;
    min-height: 84px;
  }
}

/* Reads `--caldera-overlay-opacity` emitted by the `caldera_overlay_opacity`
   schema setting in blocks/_slide.liquid. */
.slide__image-container .overlay {
  opacity: var(--caldera-overlay-opacity, 1);
}

.rating {
  --star-fill-color: var(--caldera-colors-tan);
  --star-fill-color-rgb: var(--caldera-colors-tan-rgb);
}

/* Direct override — `--star-size` is set inline on `.rating` by the block, so
   we set the consumed property on `.stars` to bypass inheritance. */
.stars {
  height: 12px;
}

.rating-count.paragraph {
  font-size: var(--font-size--2xs);
}

/* Caldera doesn't use Horizon's floating quick-add pill anywhere — quick-add is
   handled by the inline caldera-add-to-cart button. The underlying
   <product-form-component> stays in the DOM, so product-form.js's main-scoped
   query still guards it from being morphed into the PDP/modal add-to-cart button. */
.quick-add {
  display: none;
}

/* Caldera carousel arrows — single source shared by every upstream-slideshow
   Caldera section so they look identical. `--caldera-arrow-icon` is supplied
   inline per section (needs Liquid asset_url). `opacity: 1` defeats upstream's
   show-on-hover fade. */
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control,
.caldera-product-testimonials slideshow-arrows .slideshow-control,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control,
.caldera-featured-tabs slideshow-arrows .slideshow-control {
  color: var(--color-secondary-button-text);
  opacity: 1;
}

.caldera-reviewed-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-circle,
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-square,
.caldera-product-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-circle,
.caldera-product-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-square,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control.slideshow-control--shape-circle,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control.slideshow-control--shape-square,
.caldera-featured-tabs slideshow-arrows .slideshow-control.slideshow-control--shape-circle,
.caldera-featured-tabs slideshow-arrows .slideshow-control.slideshow-control--shape-square {
  background-color: var(--color-secondary-button-background);
  color: var(--color-secondary-button-text);
  box-shadow: inset 0 0 0 var(--style-border-width-secondary, 1px) var(--color-secondary-button-border);
}

.caldera-reviewed-testimonials slideshow-arrows .slideshow-control:hover,
.caldera-product-testimonials slideshow-arrows .slideshow-control:hover,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control:hover,
.caldera-featured-tabs slideshow-arrows .slideshow-control:hover {
  color: var(--color-secondary-button-hover-text);
}

.caldera-reviewed-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-circle:hover,
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-square:hover,
.caldera-product-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-circle:hover,
.caldera-product-testimonials slideshow-arrows .slideshow-control.slideshow-control--shape-square:hover,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control.slideshow-control--shape-circle:hover,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control.slideshow-control--shape-square:hover,
.caldera-featured-tabs slideshow-arrows .slideshow-control.slideshow-control--shape-circle:hover,
.caldera-featured-tabs slideshow-arrows .slideshow-control.slideshow-control--shape-square:hover {
  background-color: var(--color-secondary-button-hover-background);
  color: var(--color-secondary-button-hover-text);
  box-shadow: inset 0 0 0 var(--style-border-width-secondary, 1px) var(--color-secondary-button-hover-border);
}

/* Swap upstream icon-arrow.svg for the live-site arrow without editing the
   shared slideshow-arrow snippet: hide the inline svg's path, paint the glyph
   as a currentColor mask. `rotate: 0deg` cancels the upstream `.icon-caret`
   -90deg spin (applied when icons_style = chevron) so our horizontal arrow
   never points up; the prev button's `flip-x` still mirrors it to point left. */
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control .svg-wrapper,
.caldera-product-testimonials slideshow-arrows .slideshow-control .svg-wrapper,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control .svg-wrapper,
.caldera-featured-tabs slideshow-arrows .slideshow-control .svg-wrapper {
  rotate: 0deg;
}

.caldera-reviewed-testimonials slideshow-arrows .slideshow-control .svg-wrapper svg path,
.caldera-product-testimonials slideshow-arrows .slideshow-control .svg-wrapper svg path,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control .svg-wrapper svg path,
.caldera-featured-tabs slideshow-arrows .slideshow-control .svg-wrapper svg path {
  display: none;
}

.caldera-reviewed-testimonials slideshow-arrows .slideshow-control .svg-wrapper svg,
.caldera-product-testimonials slideshow-arrows .slideshow-control .svg-wrapper svg,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control .svg-wrapper svg,
.caldera-featured-tabs slideshow-arrows .slideshow-control .svg-wrapper svg {
  background-color: currentColor;
  -webkit-mask-image: var(--caldera-arrow-icon);
  mask-image: var(--caldera-arrow-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Hide an arrow once it hits a boundary (prev at the first slide, next at the
   last) on the non-infinite testimonials carousel — when all cards fit (e.g. 4
   on desktop) both ends are disabled, so no arrows show. Horizon already does
   this inside `.resource-list__carousel`; the testimonials slideshow isn't in
   that wrapper, so it needs the rule explicitly. */
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control[disabled],
.caldera-product-testimonials slideshow-arrows .slideshow-control[disabled],
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control[disabled] {
  display: none;
}

/* Drop the resource-list page-margin inset so featured-tabs arrows sit at the
   page-width edges like the testimonials carousel (its `force-full-width` is
   inert — the carousel isn't a direct child of `.section`). */
.caldera-featured-tabs .resource-list__carousel slideshow-arrows {
  padding-inline: 0;
}

/* When the prev arrow is hidden at the first slide, keep the lone next arrow
   pinned right — `justify-content: space-between` otherwise drops a single
   child at the start. Mirrors the resource-list rule the testimonials
   slideshow doesn't inherit. */
.caldera-reviewed-testimonials slideshow-arrows .slideshow-control--next,
.caldera-product-testimonials slideshow-arrows .slideshow-control--next,
.caldera-ingredient-spotlight slideshow-arrows .slideshow-control--next {
  margin-inline-start: auto;
}

/* Testimonials fits exactly 4 cards across on desktop, so with <=4 cards the
   carousel can't scroll there — hide the arrows. Mobile/tablet still overflow,
   so they remain. Flagged by --fits-desktop, which the section adds when
   card_count <= 4. */
@media screen and (min-width: 990px) {
  .caldera-reviewed-testimonials__carousel--fits-desktop slideshow-arrows,
  .caldera-product-testimonials__carousel--fits-desktop slideshow-arrows {
    display: none;
  }
}

/* Footer top row: wide newsletter + 4 link columns on desktop; full-width
   newsletter above a 2-up menu grid on mobile/tablet. Upstream auto-grids
   equal columns (capped at 4) and stacks to one column below 990px, and adds
   "isolated last item" spans we neutralize here. Order depends on the footer
   block order: newsletter group first, then the four menu/social columns. */
@media screen and (max-width: 989px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }

  .footer-content > :first-child {
    grid-column: 1 / -1;
  }

  .footer-content--isolated-grid-item-tablet > :last-child {
    grid-column: auto;
  }
}

@media screen and (min-width: 990px) {
  .footer-content {
    /* Newsletter/Klaviyo column floored at 25vw so the embedded form stays large. */
    grid-template-columns: minmax(30vw, 1.6fr) repeat(4, 1fr);
    align-items: start;
  }

  .footer-content--isolated-grid-item-desktop > :last-child {
    grid-column: auto;
  }
}

.footer-content .menu__heading {
  padding-block-start: 0;
}

.footer-content .menu:not(:has(.menu__heading--empty)) .details-content {
  margin-block-start: 0;
}

/* Let the Klaviyo app embed fill its footer column. */
.footer-content .shopify-block,
.footer-content .shopify-app-block {
  width: 100%;
}

.footer-content button.klaviyo-form-button{
  padding-left: 15px !important;
  padding-right: 15px !important;
}



@media screen and (min-width: 990px) {
  .footer-content .group-block-content.layout-panel-flex {
    padding-right: 15% !important;
  }
  .footer-content button.klaviyo-form-button{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Widen the PDP buy box on desktop via a single knob. Upstream sizes the
   product-details column as min(50vw, var(--sidebar-width)); we bump the token,
   scoped to the grid so the cart/menu drawer (which also reads --sidebar-width)
   stays untouched. At 1200px+ upstream swaps to a fixed 2fr/1fr ratio that
   ignores the token and narrows the buy box, so restore the token-based columns
   there too — keeping one lever across the whole desktop range. */
@media screen and (min-width: 1200px) {
  .product-information__grid:not(.product-information__grid--half, .product-information--media-none) {
    --sidebar-width: 38rem;
  }
}

@media screen and (min-width: 1200px) {
  .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-left {
    grid-template-columns: 1fr min(50vw, var(--sidebar-width));
  }

  .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-right {
    grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;
  }
}

/* Gallery thumbnails follow the thumbnail_width setting on both breakpoints.
   Upstream sizes each thumbnail as clamp(44px, 7vw, --thumbnail-width): on
   mobile 7vw floors it at 44px and on narrower desktops it dips below the
   setting, so the setting never fully applies. Override the width to consume
   --thumbnail-width directly (0,3,0 beats the upstream 0,2,0 rules). On mobile
   upstream also resets --thumbnail-width to 44px, so re-inherit the setting
   value there. */
.media-gallery--carousel .slideshow-controls__thumbnails .slideshow-control {
  width: var(--thumbnail-width);
}

@media screen and (max-width: 749px) {
  .media-gallery--carousel .media-gallery__mobile-controls[thumbnails] {
    --thumbnail-width: inherit;
  }
}

/* Video play affordance: the deferred-media poster icon was a bare
   drop-shadowed triangle (the wrapper has border-radius:50% but no fill), so it
   read as an arrow rather than a video. Give it a filled translucent circle
   with the triangle centered inside — the recognizable play button from live. */
.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  width: 3.25rem;
  height: 3.25rem;
  background-color: rgb(var(--color-foreground-rgb) / 0.55);
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: 42%;
  height: 42%;
  filter: none;
}

@media screen and (min-width: 750px) {
  .deferred-media__poster-icon,
  .video-placeholder-wrapper__poster-icon {
    width: 4.25rem;
    height: 4.25rem;
  }

  .deferred-media__poster-icon svg,
  .video-placeholder-wrapper__poster-icon svg {
    width: 42%;
    height: 42%;
  }
}

/* A touch more room between the quantity selector and the add-to-cart button on
   both breakpoints. Mirrors upstream's :not(:has(.quantity-rules)) compound so
   it overrides at equal specificity by load order (upstream uses gap-sm/2 on
   mobile, gap-sm on desktop). */
.product-form-buttons:not(:has(.quantity-rules)) {
  gap: var(--gap-sm);
}

@media screen and (min-width: 750px) {
  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: var(--gap-md);
  }
}

/* Honor a group block's "Vertical on mobile = off" inside product-grid cards;
   base.css forces every card group to stack on mobile (.product-grid__card
   .group-block > *), overriding the row direction the merchant chose. */
@media screen and (max-width: 749px) {
  .product-grid__card .layout-panel-flex--row:not(.mobile-column) {
    flex-direction: row;
  }
}

/* Full-bleed media on mobile: the page-width grid otherwise pins media to the
   central column (margin | media | margin). Span the media row across the
   margin columns so the image reaches the screen edges; the content row keeps
   its central-column padding. */
@media screen and (max-width: 749px) {
  .section--page-width.media-with-content {
    grid-template-areas: 'media media media' 'margin-left content margin-right';
  }

  /* Media-right content carries a desktop-only inset toward the media (upstream
     sets padding-inline-end at every breakpoint). On mobile the content already
     sits in the central column, so drop it to avoid a lopsided right gap.
     Selector mirrors upstream's compound so specificity matches and load order wins. */
  .media-with-content.section--page-width.media-with-content--media-right
    .media-with-content__content
    > .group-block-content {
    padding-inline-end: 0;
  }
}

/* Top-level image blocks in a page-width Custom section bleed to the screen edges
   on mobile (e.g. the Brand Mission editorial image on page.about-us), matching the
   full-bleed media in media-with-content. Direct child of .section-content-wrapper
   (unique to the generic section render) keeps this off nested images in cards,
   groups, and carousels, and off media-with-content's own media. */
@media screen and (max-width: 749px) {
  .section--page-width .section-content-wrapper > .image-block {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}



/* FAQ accordion (page.faq.json). Question summary uses brand spec the
   type presets don't cover; plus glyph swapped for the Caldera plus/minus
   (matches the mega-menu mask) instead of Horizon's rounded icon. */
.accordion .details__header {
  gap: var(--gap-md);
  padding: var(--padding-2xl) 0;
  font-family: var(--font-body--family);
  font-size: var(--font-size--xl);
  font-weight: var(--caldera-font-weight-medium);
  letter-spacing: 0.025rem;
  line-height: 1.2;
  text-transform: none;
}

.accordion--dividers accordion-custom:first-child .details {
  border-block-start: none;
}

.accordion .icon-plus {
  --caldera-faq-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M0.5 10H20.5M10.5 0L10.5 20' stroke='black'/%3E%3C/svg%3E");
  --caldera-faq-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 2' fill='none'%3E%3Cpath d='M0.5 1H20.5' stroke='black'/%3E%3C/svg%3E");
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.accordion .icon-plus svg {
  display: none;
}

.accordion .icon-plus::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--caldera-faq-plus) no-repeat center / contain;
  mask: var(--caldera-faq-plus) no-repeat center / contain;
}

.accordion details[open] > summary .icon-plus::after {
  -webkit-mask-image: var(--caldera-faq-minus);
  mask-image: var(--caldera-faq-minus);
}

/* Default page content (main-page.liquid, the only consumer of
   .page-width-content) defaults to the narrow reading measure; widen it to the
   body page width so content pages match FAQ sections. */
.page-width-content {
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.checkbox__label-text {
  text-transform: capitalize;
}

.checkbox .icon-checkmark {
  border-radius: 0;
}

/* Smart Apps Store Locator widget skin (scasl-*/bh-sl-* markup). The app embed
   injects its own DOM (with its own CSS) at the body level, so this lives here
   sitewide rather than in a section stylesheet — the IDs only exist on the
   locator page, so the rules are inert elsewhere. !important beats the app's
   own late-loading CSS; :root brand tokens give the dark canvas. */
#scasl-app-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--narrow-page-width) !important;
  margin-inline: auto !important;
  padding-block: var(--padding-lg);
  /* 16/40px = Horizon's --page-margin, only exposed inside .page-width-* classes. */
  padding-inline: 16px;
  color: var(--caldera-colors-natural-white);
  background-color: var(--caldera-colors-black);
}

#scasl-app-container #page-header .bh-sl-title {
  font-family: var(--font-h1--family) !important;
  font-style: var(--font-h1--style) !important;
  font-weight: var(--font-h1--weight) !important;
  font-size: var(--font-h1--size) !important;
  line-height: var(--font-h1--line-height) !important;
  letter-spacing: var(--font-h1--letter-spacing) !important;
  text-transform: var(--font-h1--case) !important;
  color: var(--caldera-colors-natural-white);
}

#scasl-app-container .direction-share-link {
  display: none !important;
}

#scasl-tab-radius {
  padding: 0 !important;
  border: none !important;
}

.bh-sl-container #bh-sl-user-location label {
  margin-block-end: var(--gap-xs);
  font-size: var(--font-paragraph--size);
  font-family: var(--font-body--family) !important;
  font-weight: var(--caldera-font-weight-light);
  color: var(--caldera-colors-natural-white);
}

.bh-sl-container #bh-sl-user-location input,
.bh-sl-container #bh-sl-user-location select,
.bh-sl-container #bh-sl-user-location textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-block: var(--padding-xs) !important;
  padding-inline: var(--padding-lg) !important;
  border: var(--style-border-width-inputs) solid var(--caldera-colors-natural-white) !important;
  border-radius: 0 !important;
  font-family: var(--font-body--family) !important;
  font-weight: var(--caldera-font-weight-light) !important;
  color: var(--caldera-colors-natural-white) !important;
  background-color: transparent !important;
}

/* The location field is a Google <gmp-place-autocomplete> web component; its
   real input sits in shadow DOM. We can style the element box and feed the
   few theming hooks Google exposes — the inner input inherits font/color. */
.bh-sl-container #bh-sl-user-location gmp-place-autocomplete {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-block: var(--padding-xs) !important;
  padding-inline: var(--padding-lg) !important;
  display: block !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-body--family) !important;
  font-weight: var(--caldera-font-weight-light) !important;
}

.bh-sl-container #bh-sl-user-location input::placeholder,
.bh-sl-container #bh-sl-user-location textarea::placeholder {
  color: var(--caldera-colors-natural-white);
  font-weight: var(--caldera-font-weight-light);
  opacity: 1;
}

.bh-sl-container #scapl-geocode-btn{
  float: left !important;
  margin-block-start: 10px !important;
}

.new-for-mobile a#scapl-geocode-btn img {
  display: none !important;
}

.bh-sl-container #bh-sl-user-location input,
.bh-sl-container #bh-sl-user-location select {
  height: 56px !important;
}

.bh-sl-container #bh-sl-user-location select {
  appearance: none !important;
  padding-inline-end: 40px !important;
  color: var(--caldera-colors-natural-white) !important;
  background-color: var(--caldera-colors-black) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5H5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 18px !important;
}

/* Mirror Horizon's primary .button (size-style + button + .cta modifier): same
   padding/shape/border-shadow tokens and this file's 14/16px font-size override.
   Scheme button vars resolve since the widget sits inside the scheme-1 section;
   brand palette is the fallback. */
.bh-sl-container #bh-sl-user-location button {
  display: grid !important;
  align-content: center !important;
  box-sizing: border-box !important;
  width: fit-content !important;
  /* App sets a fixed height on .scasl-search-btn button / #scapl-geocode-btn;
     Horizon's .button is padding-driven, so reset to auto to match it. */
  height: auto !important;
  padding-block: var(--button-padding-block) !important;
  padding-inline: var(--button-padding-inline) !important;
  border: none !important;
  border-radius: var(--style-border-radius-buttons-primary) !important;
  box-shadow: inset 0 0 0 var(--style-border-width-primary, 0)
    var(--color-primary-button-border, var(--caldera-colors-rust)) !important;
  font-family: var(--button-font-family-primary) !important;
  font-size: var(--font-size--sm) !important;
  font-weight: var(--font-paragraph--weight) !important;
  line-height: var(--font-paragraph--line-height) !important;
  letter-spacing: 0.28px !important;
  text-align: center !important;
  text-transform: var(--button-text-case-primary) !important;
  color: var(--color-primary-button-text, var(--caldera-colors-natural-white)) !important;
  background-color: var(--color-primary-button-background, var(--caldera-colors-rust)) !important;
  cursor: pointer !important;
  transition: background-color var(--animation-values-slow);
}

.bh-sl-container #bh-sl-user-location button:hover {
  color: var(--color-primary-button-hover-text, var(--caldera-colors-pure-white)) !important;
  background-color: var(--color-primary-button-hover-background, var(--caldera-colors-black)) !important;
}

@media screen and (min-width: 750px) {
  .bh-sl-container #bh-sl-user-location button {
    font-size: var(--font-size--md) !important;
  }
}

.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-title,
.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-desc {
  margin: 0 !important;
}

/* Address icon reads white in the list, rust inside the map info window. */
.bh-sl-container .scasl-list-details .scasl-info-location #scasl-address svg {
  fill: var(--caldera-colors-natural-white) !important;
}

.bh-sl-container .scasl-info-window .scasl-info-location #scasl-address svg,
.bh-sl-container #scasl-phone svg,
.bh-sl-container #scasl-email svg,
.bh-sl-container #scasl-web svg {
  fill: var(--caldera-colors-rust) !important;
}

#bh-sl-map-container.bh-sl-map-container img {
  border-radius: 0 !important;
}

#bh-sl-map-container .bh-sl-loc-list #scasl-list-container,
#bh-sl-map-container .bh-sl-loc-list li {
  padding: var(--padding-sm) !important;
  border: var(--style-border-width) solid var(--caldera-colors-natural-white) !important;
  border-radius: 0 !important;
  font-weight: var(--caldera-font-weight-light);
  color: var(--caldera-colors-natural-white) !important;
  background: transparent !important;
}

#bh-sl-map-container .bh-sl-loc-list div,
#bh-sl-map-container .bh-sl-loc-list span,
#bh-sl-map-container .bh-sl-loc-list p,
#bh-sl-map-container .bh-sl-loc-list a {
  color: var(--caldera-colors-natural-white) !important;
}

#bh-sl-map-container .bh-sl-loc-list a {
  text-decoration: underline !important;
}

#bh-sl-map-container .bh-sl-loc-list a:hover {
  text-decoration: none !important;
}

#bh-sl-map-container .scasl-list-details div {
  gap: 0 !important;
}

#bh-sl-map-container .scasl-list-details .image-title-group {
  gap: var(--gap-xs) !important;
}

@media screen and (max-width: 749px) {
  #scasl-app-container {
    padding-block: var(--padding-sm);
  }

  .new-for-mobile ul#scasl-tabs {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--gap-sm) !important;
  }

  .new-for-mobile .scasl-see-more {
    font-family: var(--font-body--family) !important;
    color: var(--caldera-colors-natural-white) !important;
  }

  .new-for-mobile .scasl-see-more-content {
    width: 100%;
  }
}


/* Yotpo reviews + Q&A widget skin, ported from the old site's
   _sass/_yotpo-widget.scss. Colors resolve from the active color scheme
   (--color-foreground, --color-background, --color-border, --color-primary and
   the --color-primary-button-* set) so the widget follows whatever scheme the
   merchant picks for its section; buttons fall back to brand tokens if it ever
   renders outside a scheme. Star ratings stay brand tan. Yotpo injects its own
   high-specificity, late-loading CSS, so these overrides keep !important to win
   (same reason the Store Locator block above does); the selectors only match
   Yotpo's markup, so they're inert without the widget. */

.yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title{
  width: 100%;
}

.yotpo-display-l .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-star-rating, .yotpo-display-m .yotpo-review:not(.yotpo-media-modal-review) .yotpo-review-center-panel .yotpo-review-rating-title .yotpo-review-star-rating{
  flex-basis: initial;
}

.shopify-block.shopify-app-block{
  width: 100%;
}   

/* Modals + popups: scheme canvas + foreground, square corners. */
.yotpo-questions-and-answers .yotpo-qna-modal-backdrop .yotpo-qna-modal,
.yotpo-reviews-main-widget .yotpo-mobile-filters-popup-overlay-container,
.yotpo-reviews-main-widget.yotpo-device-mobile .modal-backdrop.yotpo-review-media-modal,
.yotpo-reviews-main-widget.yotpo-device-mobile .modal-backdrop.yotpo-review-media-modal .yotpo-modal,
.yotpo-reviews-main-widget.yotpo-device-desktop .yotpo-modal,
.modal-backdrop.yotpo-review-form-modal .yotpo-modal {
  box-sizing: border-box !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  color: var(--color-foreground) !important;
  background-color: var(--color-background) !important;
}

.yotpo-questions-and-answers .yotpo-qna-modal-backdrop,
.yotpo-reviews-main-widget .yotpo-mobile-filters-popup-overlay-container .yotpo-mobile-filters-popup-header {
  background: none !important;
}

.modal-backdrop.yotpo-review-form-modal .btn-close,
.yotpo-qna-modal-backdrop.yotpo-question-form-modal .btn-close {
  color: var(--color-foreground) !important;
}

.modal-backdrop.yotpo-review-form-modal .yotpo-star-rating-icons-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Modal + mobile-filter headers (old medium-secondary mixin). */
.yotpo-qna-modal-backdrop.yotpo-question-form-modal header.yotpo-qna-modal-header,
.modal-backdrop.yotpo-review-form-modal h2.yotpo-modal-header,
.yotpo-reviews-main-widget .yotpo-mobile-filters-popup-overlay-container .yotpo-mobile-filters-popup-header .yotpo-mobile-filters-popup-title {
  margin: 0 0 20px !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-family: var(--font-subheading--family) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: var(--color-foreground) !important;
  background-color: var(--color-background) !important;
}

.yotpo-qna-modal-backdrop.yotpo-question-form-modal header.yotpo-qna-modal-header .yotpo-qna-modal-header {
  margin: 0 !important;
  padding: 0 !important;
}

.yotpo-qna-modal-backdrop.yotpo-question-form-modal .yotpo-qna-modal-header-font {
  font-family: var(--font-subheading--family) !important;
  font-size: 1.25rem !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  color: var(--color-foreground) !important;
}

/* Field labels (old small-secondary mixin, uppercase reset off). */
.yotpo-reviews-main-widget .yotpo-file-upload .yotpo-file-input-headline,
.yotpo-questions-and-answers .yotpo-input-wrapper .yotpo-form-label,
.modal-backdrop.yotpo-review-form-modal label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-family: var(--font-subheading--family) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: var(--color-foreground) !important;
}

/* Inputs / textareas / selects: transparent field, scheme border, scheme-primary focus. */
.yotpo-questions-and-answers .yotpo-input-wrapper input,
.yotpo-questions-and-answers .yotpo-input-wrapper textarea,
.yotpo-questions-and-answers .yotpo-input-wrapper select,
.yotpo-questions-and-answers .yotpo-input-wrapper option,
.yotpo-reviews-main-widget input[type='text'],
.yotpo-reviews-main-widget input[type='email'],
.yotpo-reviews-main-widget input[type='number'],
.yotpo-reviews-main-widget input[type='tel'],
.yotpo-reviews-main-widget input[type='url'],
.yotpo-reviews-main-widget input[type='search'],
.yotpo-reviews-main-widget input[type='password'],
.yotpo-reviews-main-widget input[type='date'],
.yotpo-reviews-main-widget input[type='time'],
.yotpo-reviews-main-widget input[type='datetime-local'],
.yotpo-reviews-main-widget input[type='month'],
.yotpo-reviews-main-widget input[type='week'],
.yotpo-reviews-main-widget option,
.yotpo-reviews-main-widget select,
.yotpo-reviews-main-widget textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.28px !important;
  text-transform: none !important;
  color: var(--color-foreground) !important;
  background-color: transparent !important;
  transition: border-color 0.2s !important;
}

.yotpo-questions-and-answers .yotpo-input-wrapper input:focus,
.yotpo-questions-and-answers .yotpo-input-wrapper textarea:focus,
.yotpo-questions-and-answers .yotpo-input-wrapper select:focus,
.yotpo-reviews-main-widget input:focus,
.yotpo-reviews-main-widget select:focus,
.yotpo-reviews-main-widget textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
}

.yotpo-reviews-main-widget input::placeholder,
.yotpo-reviews-main-widget textarea::placeholder {
  color: var(--color-foreground-muted) !important;
}

.yotpo-reviews-main-widget .yotpo-input-wrapper input,
.yotpo-reviews-main-widget .yotpo-input-wrapper textarea,
.yotpo-reviews-main-widget .yotpo-file-upload .yotpo-file-input-headline,
.yotpo-reviews-main-widget .yotpo-review-form .form-footer h6,
.yotpo-reviews-main-widget input,
.yotpo-reviews-main-widget label,
.yotpo-reviews-main-widget select,
.yotpo-reviews-main-widget textarea,
.yotpo-input-wrapper input,
.yotpo-input-wrapper textarea,
.yotpo-file-upload .yotpo-file-input-headline,
.yotpo-input-wrapper .yotpo-new-input-message,
.yotpo-new-input-message {
  color: var(--color-foreground) !important;
}

.yotpo-reviews-main-widget .yotpo-input-wrapper .yotpo-new-input-message,
.yotpo-reviews-main-widget .yotpo-new-input-message {
  color: var(--color-foreground-muted) !important;
}

.yotpo-reviews-main-widget .yotpo-upload-label {
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
}

.yotpo-reviews-main-widget .yotpo-upload-label svg path {
  fill: var(--color-foreground) !important;
}

/* Filter dropdown. */
.yotpo-reviews-main-widget .yotpo-filter-select {
  box-sizing: border-box !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.28px !important;
  color: var(--color-foreground) !important;
  background-color: transparent !important;
}

.yotpo-reviews-main-widget .yotpo-selected-value {
  color: var(--color-foreground) !important;
}

.yotpo-reviews-main-widget .yotpo-dropdown-arrow-icon path {
  stroke: var(--color-foreground) !important;
}

/* Star ratings — tan. */
.yotpo-reviews-main-widget .yotpo-sr-star-full path {
  stroke: var(--caldera-colors-tan) !important;
  fill: var(--caldera-colors-tan) !important;
}

.yotpo-reviews-main-widget .yotpo-sr-star-empty path {
  stroke: var(--caldera-colors-tan) !important;
}

.yotpo-reviews-main-widget svg.yotpo-star-rating-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Submit / CTA buttons — scheme primary button (brand rust fallback), uppercase. */
.yotpo-questions-and-answers .yotpo-question-form .form-footer .yotpo-question-submit,
.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper #yotpo-widget-btn,
.yotpo-reviews-main-widget #yotpo-main-widget-btn,
.yotpo-reviews-main-widget .yotpo-new-review-submit {
  padding: 5px 15px !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: var(--color-primary-button-text, var(--caldera-colors-natural-white)) !important;
  background-color: var(--color-primary-button-background, var(--caldera-colors-rust)) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease;
}

.yotpo-questions-and-answers .yotpo-question-form .form-footer .yotpo-question-submit:hover,
.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper #yotpo-widget-btn:hover,
.yotpo-reviews-main-widget #yotpo-main-widget-btn:hover,
.yotpo-reviews-main-widget .yotpo-new-review-submit:hover {
  background-color: var(--color-primary-button-hover-background, var(--caldera-colors-rust-dark)) !important;
}

.yotpo-questions-and-answers .yotpo-question-form .form-footer .yotpo-question-submit:focus,
.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper #yotpo-widget-btn:focus,
.yotpo-reviews-main-widget #yotpo-main-widget-btn:focus,
.yotpo-reviews-main-widget .yotpo-new-review-submit:focus {
  outline: none !important;
}

.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper #yotpo-widget-btn {
  width: auto !important;
  height: auto !important;
  padding: 15px 20px !important;
}

.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper #yotpo-widget-btn span {
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: var(--color-primary-button-text, var(--caldera-colors-natural-white)) !important;
  cursor: pointer !important;
}

.yotpo-reviews-main-widget .yotpo-review-form .form-footer {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-background) !important;
}

.yotpo-reviews-main-widget .yotpo-slider-wrapper .yotpo-slider-media-preview,
.yotpo-reviews-main-widget.yotpo-device-desktop .yotpo-slider-wrapper .yotpo-slider-media-preview,
.yotpo-reviews-main-widget.yotpo-device-laptop .yotpo-slider-wrapper .yotpo-slider-media-preview,
.yotpo-reviews-main-widget.yotpo-display-l .yotpo-slider-wrapper .yotpo-slider-media-preview,
.yotpo-reviews-main-widget.yotpo-display-m .yotpo-slider-wrapper .yotpo-slider-media-preview {
  background: none !important;
}

.yotpo-questions-and-answers .yotpo-ask-question-btn-wrapper.yotpo-header-form-button {
  justify-content: center !important;
  margin-top: 15px !important;
}


/* Rebuy Smart Cart flyout skin, ported from the old site's
   _sass/_rebuy-mini-cart.scss. Rebuy injects the cart markup client-side at the
   body level (with its own late-loading, high-specificity CSS), so this lives
   here sitewide rather than in a section stylesheet — the .rebuy-* selectors
   only match Rebuy's DOM, so they're inert without the widget, and !important
   is needed to win (same reason the Store Locator + Yotpo skins above do).
   The whole flyout follows the color scheme the merchant assigns in
   Theme settings → Caldera Rebuy Smart Cart: caldera-design-system.liquid scopes
   that scheme's --color-* vars onto .rebuy-cart, and the rules below consume them
   (background, text, borders, meter, inputs, buttons). Error text stays brand. */

.rebuy-cart__flyout {
  margin: 0 !important;
  width: 100% !important;
  max-width: 30.9375rem !important;
  border-radius: 0 !important;
  background: var(--color-background) !important;
  gap: 0 !important;
}

/* Header */
.rebuy-cart__flyout [data-rebuy-cart-anchor='header'] {
  gap: var(--padding-2xl);
  padding-top: var(--padding-2xl) !important;
  background-color: transparent;
}

.rebuy-cart__flyout [data-rebuy-cart-anchor='header'] [data-rebuy-cart-header-top] {
  padding-inline: var(--padding-lg);
}

.rebuy-cart__flyout .rebuy-cart__title {
  font-family: var(--font-subheading--family);
  font-size: 2rem;
  font-weight: var(--caldera-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-foreground);
}

/* Announcement bar */
.rebuy-cart__flyout [data-rebuy-component='announcement-bar'] .message {
  min-height: 1.5rem;
  box-sizing: border-box;
  padding: var(--padding-xs) var(--padding-lg);
  font-family: var(--font-body--family);
  font-size: 0.8125rem;
  font-weight: var(--caldera-font-weight-regular);
  line-height: 1.2;
  background-color: var(--color-foreground);
  color: var(--color-background);
  border-radius: 0;
}

/* Progress bar */
.rebuy-cart__flyout [data-rebuy-component='progress-bar'] {
  padding-inline: var(--padding-2xl);
}

.rebuy-cart__flyout .rebuy-cart__progress-bar-wrapper {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--padding-xs);
  box-sizing: border-box;
  padding: var(--padding-lg) var(--padding-md);
  border: 1px solid var(--color-border);
}

.rebuy-cart__flyout .rebuy-cart__progress-bar-prompt {
  margin: 0 !important;
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-regular);
  line-height: 1.2;
  color: var(--color-foreground);
  text-align: start !important;
}

.rebuy-cart__flyout .rebuy-cart__progress-bar-meter {
  height: 0.375rem !important;
  background: var(--color-border) !important;
  border-radius: 0 !important;
}

.rebuy-cart__flyout .rebuy-cart__progress-bar-meter-fill {
  height: 0.375rem !important;
  background-color: var(--color-foreground) !important;
  border-radius: 0 !important;
}

/* Footer */
.rebuy-cart__flyout [data-rebuy-cart-anchor='footer'] {
  gap: var(--padding-lg);
  background-color: transparent;
}

.rebuy-cart__flyout [data-rebuy-component='cart-subtotal'],
.rebuy-cart__flyout [data-rebuy-component='checkout-area'] {
  padding: 0;
}

.rebuy-cart__flyout .rebuy-cart__flyout-subtotal-label {
  font-family: var(--font-subheading--family);
  font-size: 1.25rem;
  font-weight: var(--caldera-font-weight-medium);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.rebuy-cart__flyout .rebuy-cart__flyout-subtotal-amount {
  font-family: var(--font-body--family);
  font-size: 1rem;
  font-weight: var(--caldera-font-weight-regular);
  line-height: 1.2;
  color: var(--color-foreground);
}

.rebuy-cart__flyout .rebuy-cart__discount-container {
  margin: 0;
  padding: 0;
}

.rebuy-cart__flyout .rebuy-cart__discount-form {
  display: flex;
  gap: var(--padding-xs);
}

/* Buttons — checkout, discount apply, and upsell/recommended add — follow the
   primary-button tokens (brand rust fallback) so the sitewide brand button toggle
   applies. Scoped to .rebuy-cart (not .rebuy-cart__flyout) because Rebuy renders
   recommendation blocks in the outer container; !important beats Rebuy's own
   equal-specificity .rebuy-button styles. The subscription-upgrade .rebuy-button
   is intentionally not matched so it keeps Rebuy's outline style (white fill, rust
   border) to match live. */
.rebuy-cart .rebuy-cart__checkout-button,
.rebuy-cart .rebuy-cart__discount-form .rebuy-button,
.rebuy-cart [data-rebuy-component='cross-sell-widget'] .rebuy-button {
  display: flex !important;
  box-sizing: border-box;
  height: 2.75rem !important;
  padding-inline: var(--padding-2xl) !important;
  justify-content: center;
  align-items: center;
  gap: var(--gap-xs);
  font-family: var(--font-body--family) !important;
  font-size: 0.875rem !important;
  font-weight: var(--caldera-font-weight-regular) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: var(--color-primary-button-background, var(--caldera-colors-rust)) !important;
  color: var(--color-primary-button-text, var(--caldera-colors-natural-white)) !important;
  border: 1px solid var(--color-primary-button-border, var(--caldera-colors-rust)) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: color var(--animation-values-slow), background-color var(--animation-values-slow);
}

.rebuy-cart .rebuy-cart__checkout-button:hover,
.rebuy-cart .rebuy-cart__discount-form .rebuy-button:hover,
.rebuy-cart [data-rebuy-component='cross-sell-widget'] .rebuy-button:hover {
  background: var(--color-primary-button-hover-background, var(--caldera-colors-black)) !important;
  color: var(--color-primary-button-hover-text, var(--caldera-colors-natural-white)) !important;
  border-color: var(--color-primary-button-hover-border, var(--caldera-colors-black)) !important;
}

.rebuy-cart .rebuy-cart__checkout-button svg,
.rebuy-cart .rebuy-cart__discount-form .rebuy-button svg,
.rebuy-cart [data-rebuy-component='cross-sell-widget'] .rebuy-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.rebuy-cart .rebuy-cart__checkout-button:disabled,
.rebuy-cart .rebuy-cart__discount-form .rebuy-button:disabled,
.rebuy-cart [data-rebuy-component='cross-sell-widget'] .rebuy-button:disabled {
  cursor: not-allowed;
  background: color-mix(in oklab, var(--color-primary-button-background, var(--caldera-colors-rust)) 30%, transparent) !important;
  color: color-mix(in oklab, var(--color-primary-button-text, var(--caldera-colors-natural-white)) 50%, transparent) !important;
  border-color: var(--color-primary-button-background, var(--caldera-colors-rust)) !important;
}

/* Rebuy wraps the button label in a <span>; keep it transparent to the button's
   color/casing so Rebuy's own span color doesn't override it. */
.rebuy-cart .rebuy-cart__discount-form .rebuy-button span,
.rebuy-cart [data-rebuy-component='cross-sell-widget'] .rebuy-button span {
  color: inherit !important;
  font: inherit !important;
  text-transform: inherit !important;
}

/* Discount input follows the color-scheme input treatment. */
.rebuy-cart__flyout .rebuy-cart__discount-form .rebuy-input {
  margin: 0 !important;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0 var(--padding-md);
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-light);
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: 1px solid var(--color-input-border);
  border-radius: 0;
}

.rebuy-cart__flyout [data-rebuy-component='discount-input'] .rebuy-cart__discount-error-message {
  width: 100%;
  margin-top: var(--padding-xs);
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-regular);
  line-height: 1.5;
  color: var(--caldera-feedback-error);
  word-break: break-word;
}

.rebuy-cart__flyout .rebuy-cart__discount-code-label,
.rebuy-cart__flyout .rebuy-cart__applied-discount,
.rebuy-cart__flyout [data-rebuy-component='discount-code'],
.rebuy-cart__flyout .rebuy-cart__discount-tag-text,
.rebuy-cart__flyout .rebuy-cart__discount-amount {
  font-family: var(--font-body--family);
}

.rebuy-cart.has-items [data-rebuy-cart-anchor='footer'] {
  padding: var(--padding-lg) var(--padding-2xl);
  border-top: 1px solid var(--color-border);
}

/* Upsell / cross-sell */
.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] {
  box-sizing: border-box;
  padding: var(--padding-4xl) var(--padding-2xl);
  border-top: 1px solid var(--color-border);
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .primary-title {
  margin-bottom: var(--padding-2xl) !important;
  padding: 0 !important;
  font-family: var(--font-subheading--family);
  font-size: 1.25rem !important;
  font-weight: var(--caldera-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  text-align: start !important;
  color: var(--color-foreground);
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-grid {
  display: flex !important;
  flex-direction: column;
  gap: var(--padding-lg);
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-block {
  padding: 0 var(--padding-md) 0 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0;
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-info {
  padding: 0 var(--padding-md) !important;
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-media {
  width: 6rem !important;
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-media img {
  aspect-ratio: 1;
  object-fit: cover !important;
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-title {
  margin: 0 !important;
  font-family: var(--font-subheading--family);
  font-size: 1rem;
  font-weight: var(--caldera-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-foreground);
}

.rebuy-cart__flyout [data-rebuy-component='cross-sell-widget'] .rebuy-product-price {
  margin-top: var(--padding-2xs);
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-regular);
  color: var(--color-foreground);
}

/* Body / line items */
.rebuy-cart__flyout [data-rebuy-cart-anchor='body'] {
  background-color: transparent !important;
}

.rebuy-cart__flyout [data-rebuy-cart-anchor='body'] ul {
  margin: 0;
  gap: var(--padding-2xl);
}

.rebuy-cart__flyout [data-rebuy-cart-anchor='body'] .rebuy-cart__flyout-item-media,
.rebuy-cart__flyout [data-rebuy-cart-anchor='body'] .rebuy-cart__flyout-item-media img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
}

.rebuy-cart__flyout [data-rebuy-component='cart-items'] {
  padding: var(--padding-4xl) var(--padding-2xl);
}

.rebuy-cart__flyout .rebuy-cart__flyout-item {
  /* gap MUST equal the value subtracted in the info width calc (desktop rule
     below), or the row overflows 100% and the info wraps under the image. Both
     read the same --rb-cart-item-gap (Rebuy sets it at runtime; 0.75rem fallback
     matches the old site) so they always agree. */
  gap: var(--rb-cart-item-gap, 0.75rem);
  border: 1px solid var(--color-border) !important;
}

.rebuy-cart__flyout .rebuy-cart__flyout-item .rebuy-money {
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-regular);
  color: var(--color-foreground);
}

.rebuy-cart__flyout .rebuy-cart__flyout-item .rebuy-cart__flyout-item-info {
  padding: 0 var(--padding-md) 0 0;
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-product-title {
  font-family: var(--font-subheading--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-foreground);
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-variant-title,
.rebuy-cart__flyout .rebuy-cart__flyout-item-property {
  font-family: var(--font-body--family);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-foreground);
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-quantity {
  margin:5px 0 0 0 !important;
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-remove {
  top: 1rem !important;
  right: var(--padding-md) !important;
  color: var(--color-foreground) !important;
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-quantity-widget {
  width: 6.875rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-quantity-widget-button {
  box-sizing: border-box;
  height: 2.25rem !important;
  color: var(--color-foreground);
  background: transparent !important;
}

.rebuy-cart__flyout .rebuy-cart__flyout-item-quantity-widget-label {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 2.25rem !important;
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: var(--caldera-font-weight-regular);
  color: var(--color-foreground);
}

/* Empty cart */
.rebuy-cart__flyout .rebuy-cart__flyout-empty-cart {
  font-family: var(--font-body--family);
  font-size: 1rem;
  color: var(--color-foreground);
}

@media screen and (min-width: 990px) {
  .rebuy-cart__flyout [data-rebuy-cart-anchor='body'] .rebuy-cart__flyout-item-media,
  .rebuy-cart__flyout [data-rebuy-cart-anchor='body'] .rebuy-cart__flyout-item-media img {
    width: 6rem;
    height: 6rem;
  }

  .rebuy-cart__flyout .rebuy-cart__flyout-item .rebuy-cart__flyout-item-info {
    width: calc(100% - 6rem - var(--rb-cart-item-gap, 0.75rem)) !important;
  }
}

/* Rebuy renders this embedded widget with its own default padding; the wrapper
   already sits inside a padded section, so zero it out. Scoped to the one widget
   by its Rebuy id so other embeds keep their own padding. */
#rebuy-widget-292243 {
  padding: 0 !important;
}

/* Hide the floating OneTrust cookie-settings icon (green pill). OneTrust injects
   it sitewide; live has kept it hidden for years, consent is handled via the
   footer link instead. */
#ot-sdk-btn-floating {
  display: none;
}