/** Shopify CDN: Minification failed

Line 656:1 Expected "}" to go with "{"

**/
/* ==========================================================
   BRANDING OVERRIDES — VOLERO
   Store-specific CSS variable overrides loaded globally.
   Values derived from the Volero brand Figma (Helvetica Neue
   type scale + button typography). Colors live in color
   schemes (config/settings_data.json), not here.
   ========================================================== */

html {
  /* ---- TYPOGRAPHY ---- */
  /* Helvetica Neue throughout (role mapping in snippets/fonts.liquid). */
  /* All headings clamp() from mobile floor (375px) up to desktop max (1024px). */

  /* H1 — 66px desktop / 40px mobile, Medium */
  --text-h1: clamp(2.5rem, 1.561rem + 4.006vw, 4.125rem);
  --text-h1--font-weight: 500;
  --text-h1--line-height: 0.93;
  --text-h1--letter-spacing: -0.02em;
  --text-h1--text-transform: none;

  /* H2 — 60px desktop / 36px mobile, Medium */
  --text-h2: clamp(2.25rem, 1.383rem + 3.698vw, 3.75rem);
  --text-h2--font-weight: 500;
  --text-h2--line-height: 1;
  --text-h2--letter-spacing: -0.02em;
  --text-h2--text-transform: none;

  /* H3 — 46px desktop / 30px mobile, Medium */
  --text-h3: clamp(1.875rem, 1.2972rem + 2.4653vw, 2.875rem);
  --text-h3--font-weight: 500;
  --text-h3--line-height: 0.9;
  --text-h3--letter-spacing: -0.02em;
  --text-h3--text-transform: none;

  /* H4 — 32px desktop / 24px mobile, Medium */
  --text-h4: clamp(1.5rem, 1.2111rem + 1.2327vw, 2rem);
  --text-h4--font-weight: 500;
  --text-h4--line-height: 1;
  --text-h4--letter-spacing: -0.01em;
  --text-h4--text-transform: none;

  /* H5 — 24px desktop / 20px mobile, Medium */
  --text-h5: clamp(1.25rem, 1.1056rem + 0.6163vw, 1.5rem);
  --text-h5--font-weight: 500;
  --text-h5--line-height: 0.95;
  --text-h5--letter-spacing: -0.01em;
  --text-h5--text-transform: none;

  /* H6 — 20px desktop / 16px mobile, Bold */
  --text-h6: clamp(1rem, 0.8556rem + 0.6163vw, 1.25rem);
  --text-h6--font-weight: 700;
  --text-h6--line-height: 1;
  --text-h6--letter-spacing: 0em;
  --text-h6--text-transform: none;

  /* Subheading — 14px, Medium, no transform */
  --text-subheading: 0.875rem;
  --text-subheading--font-weight: 500;
  --text-subheading--line-height: 1;
  --text-subheading--letter-spacing: -0.02em;
  --text-subheading--text-transform: none;

  /* Paragraph — 16px, Regular */
  --text-paragraph: 1rem;
  --text-paragraph--font-weight: 400;
  --text-paragraph--line-height: 1.2;
  --text-paragraph--letter-spacing: 0em;
  --text-paragraph--text-transform: none;

  /* Paragraph Small — 12px, Regular */
  --text-paragraph-s: 0.75rem;
  --text-paragraph-s--font-weight: 400;
  --text-paragraph-s--line-height: 1.1;
  --text-paragraph-s--letter-spacing: 0em;
  --text-paragraph-s--text-transform: none;

  /* ---- BUTTONS ---- */
  /* Pills (100px radius), Medium weight, -0.02em tracking, */
  /* 1.75rem inline padding (--padding-3xl), heights tuned for ~14px top/bottom. */
  --button-s--font-weight: 500;
  --button-s--letter-spacing: -0.02em;
  --button-s--border-radius: 100px;
  --button-s--padding-inline: var(--padding-3xl);
  --button-s: 2.5rem; /* 40px = 12px text + 14px top/bottom */

  --button-m--font-weight: 500;
  --button-m--letter-spacing: -0.02em;
  --button-m--border-radius: 100px;
  --button-m--padding-inline: var(--padding-3xl);
  --button-m: 2.625rem; /* 42px = 14px text + 14px top/bottom */

  --button-l--font-weight: 500;
  --button-l--letter-spacing: -0.02em;
  --button-l--border-radius: 100px;
  --button-l--padding-inline: var(--padding-3xl);
  --button-l: 3rem; /* 48px = 20px text + 14px top/bottom */

  --button-variant--font-weight: 500;
  --button-variant--letter-spacing: -0.02em;
  --button-variant--border-radius: 100px;
  --button-variant--padding-inline: var(--padding-3xl);

  --style-border-radius-xs: 0.125rem; /* 2px */
  --style-border-radius-sm: 0.375rem; /* 6px */
  --style-border-radius-md: 0.5rem; /* 8px */
  --style-border-radius-lg: 0.75rem; /* 12px */
  --style-border-radius-xl: 1rem; /* 16px */

  --style-border-radius-inputs: 0.5rem; /* 8px */

  /* ---- COLORS (Figma tokens used outside color schemes) ---- */
  --white: #ffffff;

  --white-warm-100: #fdfcfb;
  --white-warm-200: #f7f5f2;
  --white-warm-300: #ede9e4;
  --white-warm-400: #ddd8d0;

  --grey-warm-100: #eeebe7;
  --grey-warm-200: #e2ddd6;
  --grey-warm-300: #c8c2b9;
  --grey-warm-400: #aba49a;

  --black-near-100: #686864;
  --black-near-200: #484844;
  --black-near-300: #2b2b28;
  --black-near-400: #191917;

  --green-sage-100: #a8c4bb;
  --green-sage-200: #7fa99c;
  --green-sage-300: #5d8e7b;
  --green-sage-400: #3d6b58;
}
/* ---- HOMEPAGE ---- */
/* Set max height */
.hero__3-card-section {
  max-height: 768px;
}

/* ---- FEATURED BLOG POSTS ---- */
/* No peek on the homepage blog slider — disabled for this store only. */
.shopify-section--featured-blog-posts {
  --peek-next-slide-size: 0px;
}

/* ---- SLIDESHOW CONTROLS ---- */
/* PDP mobile media gallery progress bar only — scoped past product-card-media-carousel, which also uses [controls-on-media]. */
slideshow-controls.media-gallery__mobile-controls[controls-on-media][pagination-position='center'] {
  bottom: -1.25rem;
  width: calc(100vw - (var(--spacing-content) * 2));
  left: 50%;
  transform: translateX(-50%);
}

/* ---- SLIDESHOW NAVIGATION ARROWS ---- */
.slideshow-arrows--style-primary {
  --color-button-primary-border: #d4cece;
}

.slideshow-arrows--style-secondary {
  --color-button-secondary-border: #d4cece;
}

/* Chevron-icon slideshow controls ship a hardcoded width/height="14" on the
   inline SVG; brand spec is 18px. CSS beats the presentation attributes, so
   sizing the svg is enough — no snippet edit needed.

   Targets the svg ONLY, deliberately not `.svg-wrapper, svg` (the pattern
   .slideshow-control--large uses). The smaller in-header arrows have no fixed
   button size and shrink-wrap the wrapper, so sizing the wrapper too dragged
   those buttons from 20px down to 18px. Leaving the wrapper alone keeps every
   button box as-is (20px in-header, 44px on the sliders) and grows just the
   glyph. */
.slideshow-control.slideshow-control--style-chevron svg {
  width: 18px;
  height: 18px;
}

/* ---- BUTTONS ---- */
.button-m {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 0.875rem */
  letter-spacing: -0.0175rem;
}

/* ---- INPUTS ---- */
.field__input,
.contact-form-block__input,
.contact-form-block__textarea {
  border-radius: var(--style-border-radius-inputs);
  background-color: var(--color-input-background);
  color: #686864;
  padding-inline: var(--padding-xl);
}

.field__input,
.variant-option__select-wrapper {
  border-radius: var(--style-border-radius-sm);
}

.cart-drawer__content .cart-items__media-container {
  aspect-ratio: 1 / 1;
}

@media screen and (width >= 64rem) {
  .cart-drawer__content .cart-items__media-container,
  .cross-sale-card__media {
    border-radius: var(--style-border-radius-sm);
  }
}

/* ---- WISHLIST BUTTON ---- */
wishlist-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: var(--layer-raised);
}

.wishlist-button__trigger {
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: var(--button-s);
  height: var(--button-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground);
  transition:
    transform var(--animation-speed) ease,
    background var(--animation-speed-slow) ease;
}

.wishlist-button__trigger:hover {
  background: var(--color-background);
}

.wishlist-button__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wishlist-button__icon svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  transition:
    fill var(--animation-speed) ease,
    stroke var(--animation-speed) ease;
}

.wishlist-button__icon[data-active='true'] svg {
  fill: var(--wishlist-active-color, #e74c3c);
  stroke: var(--wishlist-active-color, #e74c3c);
}

@media (prefers-reduced-motion) {
  .wishlist-button__trigger {
    transition: none;
  }

  .wishlist-button__icon svg {
    transition: none;
  }
}

/* Context: overlay inside product card (top-right, aligned with arrows & quick-add) */
product-card wishlist-button {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  z-index: var(--layer-raised);
}

/* ---- MOBILE TYPOGRAPHY (< 64rem / 1024px) ---- */
/* Discrete mobile spec from the Volero brand Figma. Below the 64rem
   breakpoint headings use flat mobile sizes + line-heights instead of
   the fluid clamp() desktop scale. Subheading + Paragraph are already
   flat and identical on mobile, so they need no override here. */
@media screen and (width < 64rem) {
  html {
    /* H1 — 40px, Medium */
    --text-h1: 2.5rem;
    --text-h1--line-height: 0.93;
    --text-h1--letter-spacing: -0.02em;

    /* H2 — 32px, Medium */
    --text-h2: 2rem;
    --text-h2--line-height: 1;
    --text-h2--letter-spacing: -0.02em;

    /* H3 — 28px, Medium */
    --text-h3: 1.75rem;
    --text-h3--line-height: 1;
    --text-h3--letter-spacing: -0.02em;

    /* H4 — 24px, Medium */
    --text-h4: 1.5rem;
    --text-h4--line-height: 1.1;
    --text-h4--letter-spacing: -0.01em;

    /* H5 — 20px, Medium */
    --text-h5: 1.25rem;
    --text-h5--line-height: 0.95;
    --text-h5--letter-spacing: -0.01em;

    /* H6 — 16px, Bold */
    --text-h6: 1rem;
    --text-h6--line-height: 1.2;
    --text-h6--letter-spacing: 0em;
  }
}

/* ---- BUTTONS ---- */
html .button-secondary[disabled],
html [class*='color-scheme'] .button-secondary[disabled] {
  border-color: transparent;
}

/* ---- FOOTER ---- */
@media screen and (width >= 64rem) {
  footer .menu__item {
    font-size: var(--text-paragraph-s);
    font-weight: var(--text-paragraph-s--font-weight);
    line-height: var(--text-paragraph-s--line-height);
    letter-spacing: var(--text-paragraph-s--letter-spacing);
    text-transform: var(--text-paragraph-s--text-transform);
  }
}

/* Base .menu__heading sets font-* from unset --heading-* vars, clobbering the
   heading_preset (h6) class. Restate h6 here so the preset shows through —
   store-owned, survives base sync. ponytail: only the 3 props base overrides. */
footer .menu__heading {
  font-size: var(--text-h6);
  font-weight: var(--text-h6--font-weight);
  text-transform: var(--text-h6--text-transform);
}

.copyright-block__text {
  white-space: nowrap;
  opacity: 1;
}

/* ---- PDP MEDIA GALLERY ARROWS ---- */
/* [position='right'] added for specificity — beats slideshow-arrows[position='right'] padding-inline in base/extracted css. */
.media-gallery--carousel slideshow-arrows[position='right'] {
  padding: 1.5rem;
  gap: var(--gap-xs);
}

/* Default arrows to bottom-right instead of base's space-between; on_media mode still flips this via [position='right']/[position='left']. */
.media-gallery--carousel slideshow-arrows[position='center'] {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1.5rem;
  gap: var(--gap-xs);
}

.media-gallery--carousel slideshow-arrows .slideshow-control.slideshow-control--shape-circle {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.media-gallery--carousel slideshow-arrows .slideshow-control.slideshow-control--shape-circle:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* ---- PDP MEDIA GALLERY THUMBNAILS ---- */
/* Class repeated for specificity — beats the unconditional .slideshow-controls__thumbnails padding-inline rule, which is also present in product-media-gallery-extracted.css (loaded after branding.css). Store's thumbnail_position setting is 'left', so the pagination-position='right'/'left' rules only ever touch padding-inline-start here. */
.slideshow-controls__thumbnails.slideshow-controls__thumbnails {
  position: relative;
  padding-inline-end: var(--padding-4xl);
}

.slideshow-controls__thumbnails::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--padding-4xl) / 2);
  width: 1px;
  background: #d9d9d9;
}

/* ---- BREADCRUMBS ---- */
.breadcrumbs-block__item {
  font-size: var(--text-paragraph-s);
  font-weight: var(--text-paragraph-s--font-weight);
  line-height: var(--text-paragraph-s--line-height);
  letter-spacing: var(--text-paragraph-s--letter-spacing);
  text-transform: var(--text-paragraph-s--text-transform);
  color: var(--grey-warm-400);
}

/* ---- BUY BUTTONS ---- */
.product-information .buy-buttons__group {
  flex-direction: row-reverse;
}

.wishlist-button__trigger {
  color: var(--grey-warm-400);
  border: 1px solid var(--grey-warm-200);
}

/* ---- POPUP LAUNCHER DRAWER PADDING ---- */
.popup-launcher-modal__content {
  padding-inline: 1.25rem;
}

.popup-launcher-modal__footer {
  padding-inline: 1.25rem;
  padding-block-end: 1.25rem;
}

@media screen and (width >= 64rem) {
  .popup-launcher-modal__content,
  .popup-launcher-modal__footer {
    padding-inline: 1.5rem;
  }
}

/* ---- BORDER OVERRIDE ---- */
.border-color-light {
  --color-border: #ebebeb;
}

.overflow-visible {
  overflow: visible;
}

/* ---- CART PAGE ---- */
@media screen and (width >= 64rem) {
  .cross-sale,
  .cart-page__content,
  .cart__summary-container {
    border-radius: var(--style-border-radius-sm);
  }
}

.cart__summary-inner {
  --color-border: var(--grey-warm-100);
}

/* ---- CART REWARD TIERS (cart page card) ----
   The block puts its color-scheme class on .cart-reward-tiers-wrapper, so the
   card chrome has to live there too — on the outer .cart-page__progress-bar a
   picked scheme would only colour the inner box inside a hardcoded card. */
.cart-page__progress-bar .cart-reward-tiers-wrapper {
  background-color: var(--color-background);
  color: var(--color-text);
  padding: var(--padding-4xl);
}

@media screen and (width >= 64rem) {
  .cart-page__progress-bar .cart-reward-tiers-wrapper {
    border-radius: var(--style-border-radius-md);
  }
}

.cart-page__progress-bar .cart-reward-tiers {
  --color-border: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
}

/* Design keeps the divider under the last tier row on the cart page card */
.cart-page__progress-bar .cart-reward-tiers__tier:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cart-page__progress-bar .cart-reward-tiers__message,
.cart-page__progress-bar .cart-reward-tiers__tier {
  font-weight: 500;
  letter-spacing: -0.0175rem;
}

.cart-page__progress-bar .cart-reward-tiers__message {
  line-height: 1;
}

/* Base already paints markers from the scheme (--color-background / fill colour);
   only the muted icon on unearned markers needs adding. */
.cart-page__progress-bar .cart-reward-tiers__marker:not(.cart-reward-tiers__marker--earned) {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
}

@media screen and (width <= 768px) {
  .cart-page__progress-bar .cart-reward-tiers-wrapper {
    padding-inline: var(--spacing-s);
  }
}

/* ==========================================================
   LAYOUT FIXES
   ========================================================== */

/* Carousel sections set to "Container" content width render full-bleed anyway:
   the section grid gives the carousel a force-full-width track, so the row of
   cards runs edge-to-edge with the true viewport instead of stopping at the
   theme's container edge. slideshow-slides fakes centring with a large
   padding-inline, which lines the FIRST card up with the container but leaves
   the carousel's own box (and every card past the last full column) spilling
   out to the viewport edge. At 2174px the box measured 2091px wide vs the
   1280px container.

   Fix: clamp the carousel box to --page-container, clip at that edge, zero the
   peek reserve, and drop the faked centring padding, so exactly `columns` cards
   fill the container and align with every other section on the page. Only the
   box edge is clipped: overflow-x:scroll on the descendant slideshow-slides
   still scrolls, so cards beyond `columns` stay reachable via arrows/drag.

   Desktop-only (>= 64rem) on purpose. Below that these sections are meant to be
   full-bleed (full_width_on_mobile) and slideshow-slides' 16px padding is the
   intended mobile edge gutter; applying the above there pulled cards flush
   against the screen edge. max-width alone would be inert under 1280px, but
   padding-inline:0 and the peek reset are not, hence the media query. */
@media screen and (width >= 64rem) {
  [data-carousel-layout][data-carousel-width='container'] .resource-list__carousel {
    max-width: var(--page-container);
    margin-inline: auto;
    --peek-next-slide-size: 0px;
  }

  [data-carousel-layout][data-carousel-width='container'] slideshow-container {
    overflow: clip;
  }

  [data-carousel-layout][data-carousel-width='container'] slideshow-slides {
    padding-inline: 0;
  }

  /* base.css gives .resource-list__header the same
     padding-inline: var(--gutter-slide-width) as the slides, so the heading and
     the "next" arrow line up with the first/last card rather than the carousel
     box. Once the padding above is dropped that gutter (40px here, from
     max(2.5rem, ...)) is left stranded and indents the heading past the cards.
     Zero it in the same scope to keep heading, arrows and cards on one edge. */
  [data-carousel-layout][data-carousel-width='container'] .resource-list__header {
    padding-inline: 0;
  }
}

/* Product highlight slider is a deliberately full-bleed 50/50 grid: text on the
   left, image bleeding off the right edge. The image half is meant to bleed, but
   the text half has no container alignment, so its copy and arrows sit at the
   section's own pl-m (36px) from the screen edge and drift further from the
   page container the wider the viewport gets. At 2174px the heading started at
   36px vs the container's 442px.

   Pad the text column (and the absolutely-positioned controls bar, which is
   scoped to that same column) in from its own leading edge to where the
   container starts. The column is exactly 50% of the section, so `100%` here is
   half the section width and `100% - (--page-container / 2)` is precisely the
   container's left gutter. Deliberately NOT 100vw: that includes the scrollbar
   and lands ~5px off.

   Gated at 90rem (--page-container 80rem + 2x --page-margin 2.5rem), the width
   at which the container stops filling the viewport and this gutter first
   exists. Below it the calc would be negative and the section's own pl-m is
   already correct, so narrow layouts are left byte-identical. */
@media screen and (width >= 90rem) {
  .apc-product-highlight-slider .apc-product-highlight-slide__content,
  .apc-product-highlight-slider .apc-product-highlight-slider__controls {
    padding-inline-start: calc(100% - (var(--page-container) / 2));
  }
}

/* Carousel sections set to "Container" width wrap their end-blocks in
   .resource-list__end.force-full-width, which pins that track to the full-bleed
   grid column. The container block inside cannot opt back out: group.liquid never
   renders settings.content_width, so the editor's Container/Full width toggle is
   dead code. Clamp the end-block's own group-block (the direct child, which does
   stretch to the track) to --page-container so it lands on the same edge as the
   carousel at every viewport, and drop the pl-content gutter that offset it.

   Targets `> .group-block` deliberately: the end-block has exactly one, whereas a
   bare `.group-block` would also hit every card's inner group-block (article cards
   nest one each) and clamp those too. Desktop-only to match the carousel rules
   above; below 64rem these sections are intentionally full-bleed. */
@media screen and (width >= 64rem) {
  [data-carousel-layout][data-carousel-width='container'] .resource-list__end > .group-block {
    max-width: var(--page-container);
    margin-inline: auto;
    padding-inline-start: 0;
  }
}

/*
.resource-list__header {
  padding: 0;
}
  */

/* Flowbox: remove the left/right gutter from the flow wrapper so the carousel
   sits flush with the section edges. The padding comes from the block's own
   {% stylesheet %} in blocks/apc-flowbox.liquid, which applies
   padding-inline: var(--page-margin) below 64rem; overridden here instead of
   in the block so base-theme updates don't clobber it. Doubled class raises
   specificity above the block's single-class rule -- block {% stylesheet %}
   blocks are concatenated into a separate bundle with no guaranteed load
   order relative to branding.css, so equal specificity would be a coin flip.
   Note: everything inside .flbx-* is in Flowbox's shadow DOM and is NOT
   reachable from theme CSS -- inner spacing must be set in the Flowbox Flow
   editor. */
.apc-flowbox.apc-flowbox {
  padding-inline: 0;
}

.cart-page__cross-sale {
  border-radius: 0;
  padding-block: var(--padding-2xl);
  padding-inline: var(--padding-xl) 0;
}

@media screen and (width >= 64rem) {
  .cart-page__cross-sale {
  border-radius: var(--style-border-radius-md);
}

.cart-page__cross-sale.cart-page__cross-sale .cross-sale__carousel slideshow-slides {
  padding-inline-end: var(--padding-xl);
  scroll-padding-inline-end: var(--padding-xl);
}

.cart-page__cross-sale.cart-page__cross-sale .cross-sale__carousel .resource-list__header {
  padding-inline-end: var(--padding-xl);
}

.cart-reward-modals:empty {
  display: none;
}

@media (hover: none) {
  .cross-sale.cross-sale .resource-list__slideshow-arrows {
    opacity: 1;
  }
}

.article-body-content {
  max-width: none;
}

.page-content--container {
  padding-right: 0px;
  padding-left: 0px;
}