/** Shopify CDN: Minification failed

Line 192:50 Unexpected "*"

**/
/* =========================================================================
   Wagbase — Unique Design Layer
   A self-contained visual uplift on top of the Horizon base theme.
   Loaded AFTER base.css, fonts, theme-styles-variables and color-schemes,
   so these rules win the cascade for shared CSS custom properties without
   needing !important or fighting inline styles.
   Brand palette preserved: coral #F5734A, cream #FBEEDA, olive #B4B542.
   ========================================================================= */

:root {
  /* ---- Brand palette (utility handles for decorative use) ---- */
  --wb-coral: #f5734a;
  --wb-coral-deep: #d4581a;
  --wb-cream: #fbeeda;
  --wb-olive: #b4b542;
  --wb-olive-deep: #8b9b2a;
  --wb-ink: #2c1a0e;

  /* ---- Type system: bold rounded display paired with a clean modern sans ---- */
  --font-heading--family: 'Fredoka', 'Poetsen One', sans-serif;
  --font-heading--weight: 600;
  --font-subheading--family: 'Fredoka', sans-serif;
  --font-subheading--weight: 600;
  --font-accent--family: 'Fredoka', sans-serif;
  --font-accent--weight: 600;
  --font-body--family: 'Plus Jakarta Sans', sans-serif;
  --font-body--weight: 400;

  /* A more confident, awwwards-leaning display scale */
  --font-size--h1: clamp(2.75rem, 1.8rem + 4.2vw, 6.5rem);
  --font-size--h2: clamp(2.1rem, 1.5rem + 2.6vw, 3.75rem);
  --font-size--h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.35rem);
  --font-size--h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --font-size--h5: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --font-size--h6: clamp(0.75rem, 0.72rem + 0.1vw, 0.85rem);

  --line-height--display-tight: 0.98;
  --line-height--heading-tight: 1.08;
  --letter-spacing--display-tight: -0.02em;
  --letter-spacing--heading-tight: -0.01em;

  /* ---- Bubbly, logo-echoing roundness ---- */
  --style-border-radius-buttons-primary: 999px;
  --style-border-radius-buttons-secondary: 999px;
  --style-border-radius-inputs: 18px;
  --style-border-radius-pills: 999px;
  --wb-card-radius: 1.75rem;
  --wb-radius-lg: 2rem;

  /* ---- Motion ---- */
  --wb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wb-reveal-distance: 28px;
  --wb-reveal-duration: 0.7s;

  /* ---- Pointer-tilt (set live by wagbase-interactions.js) ---- */
  --wb-tilt-x: 0deg;
  --wb-tilt-y: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wb-reveal-duration: 0s;
  }
}

/* =========================================================================
   Global polish
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

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

::selection {
  background-color: var(--wb-coral);
  color: var(--wb-cream);
}

/* Faint paper-grain texture for warmth/depth — pure CSS, no image request */
body {
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a,
button,
.button,
.button-secondary,
.product-card,
input,
select,
textarea {
  transition:
    transform 0.25s var(--wb-ease-bounce),
    box-shadow 0.25s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

:focus-visible {
  outline: 2px solid var(--wb-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   Buttons — pill-shaped, playful hover lift
   ========================================================================= */

.button,
.button-secondary,
a.button,
a.button-secondary,
button[type='submit'] {
  will-change: transform;
}

.button:hover,
.button-secondary:hover,
a.button:hover,
a.button-secondary:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 28px -12px rgb(var(--color-shadow-rgb, 0 0 0) / 0.35);
}

.button:active,
.button-secondary:active,
a.button:active,
a.button-secondary:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 14px -8px rgb(var(--color-shadow-rgb, 0 0 0) / 0.3);
}

/* =========================================================================
   Product cards — rounded surface, lift + shadow on hover
   NOTE: the card content wrapper (.product-card__content) holds BOTH the
   image and the text (title/price) blocks as flex children, so it must
   NEVER get overflow:hidden — that would clip price/title text that wraps
   to more lines than expected. Rounding is applied to the image itself
   instead, which already crops via aspect-ratio + object-fit.
   ========================================================================= */

.product-card__content {
  border-radius: var(--wb-card-radius);
}

.product-card {
  display: block;
}

.product-card__content {
  will-change: transform;
}

.product-card:hover .product-card__content,
.product-card:focus-within .product-card__content {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px -20px rgb(44 26 14 / 0.28);
}

.product-card__content .image-block__image,
.product-card__content .placeholder-image {
  border-radius: var(--wb-card-radius);
  overflow: hidden;
}

/* Zoom-on-hover fallback for when JS/GSAP hasn't taken over the image
   (e.g. GSAP failed to load). Once product-card.liquid's tilt script
   initializes, --pc-scale/--pc-tilt-*/--pc-shift-* drive the transform
   instead, so this is skipped via the [data-tilt-initialized] guard. */
.product-card:not([data-tilt-initialized]):hover img {
  transition: transform 0.6s var(--wb-ease-out);
  transform: scale(1.04);
}

.product-card {
  --pc-tilt-x: 0deg;
  --pc-tilt-y: 0deg;
  --pc-shift-x: 0px;
  --pc-shift-y: 0px;
  --pc-scale: 1;
}

.product-card[data-tilt-initialized] .product-media__image {
  transform:
    translate3d(var(--pc-shift-x), var(--pc-shift-y), 0)
    rotateX(var(--pc-tilt-y)) rotateY(var(--pc-tilt-x))
    scale(var(--pc-scale));
}

/* Little paw-print mark that appears on card hover — playful, on-brand,
   purely decorative so it's safe if a card's markup varies. */
.product-card__content {
  position: relative;
}

.product-card__content::after {
  content: '\1F43E';
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.5) rotate(-15deg);
  transition:
    opacity 0.25s var(--wb-ease-out),
    transform 0.25s var(--wb-ease-bounce);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.25));
}

.product-card:hover .product-card__content::after,
.product-card:focus-within .product-card__content::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* =========================================================================
   Collection links — rounded image treatment matching product cards
   ========================================================================= */

.collection-links__image .image-block__image,
.collection-links__image .placeholder-image {
  border-radius: var(--wb-card-radius);
  overflow: hidden;
  transition: transform 0.6s var(--wb-ease-out);
}

.collection-links__link:hover .image-block__image {
  transform: scale(1.03);
}

/* =========================================================================
   Hero — organic blob accents echoing the logo's swoosh, gentle float motion
   ========================================================================= */

.hero__container {
  position: relative;
  isolation: isolate;
}

.hero__container::before,
.hero__container::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  clip-path: var(--shape--blob);
  filter: blur(0.5px);
}

.hero__container::before {
  width: min(48vw, 620px);
  aspect-ratio: 1;
  top: -12%;
  right: -8%;
  background: var(--wb-olive);
  opacity: 0.22;
  animation: wb-blob-float-a 14s ease-in-out infinite;
}

.hero__container::after {
  width: min(30vw, 380px);
  aspect-ratio: 1;
  bottom: -10%;
  left: -6%;
  background: var(--wb-coral);
  opacity: 0.16;
  animation: wb-blob-float-b 11s ease-in-out infinite;
}

@keyframes wb-blob-float-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-3%, 4%) rotate(8deg) scale(1.05);
  }
}

@keyframes wb-blob-float-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(4%, -5%) rotate(-6deg) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__container::before,
  .hero__container::after {
    animation: none;
  }
}

@media screen and (max-width: 749px) {
  .hero__container::before,
  .hero__container::after {
    opacity: 0.12;
  }
}

/* =========================================================================
   Dividers — slightly warmer, softer default line
   ========================================================================= */

.divider__line {
  border-color: rgb(var(--color-border-rgb) / 0.7);
}

/* =========================================================================
   Scroll-reveal support (paired with wagbase-interactions.js)
   Only applied to sections inside <main>, so header/footer stay put.
   ========================================================================= */

main#MainContent .shopify-section.wb-reveal {
  opacity: 0;
  transform: translateY(var(--wb-reveal-distance));
  transition:
    opacity var(--wb-reveal-duration) var(--wb-ease-out),
    transform var(--wb-reveal-duration) var(--wb-ease-out);
}

main#MainContent .shopify-section.wb-reveal.wb-in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  main#MainContent .shopify-section.wb-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Product cards within a revealed grid stagger in slightly */
main#MainContent .shopify-section.wb-reveal.wb-in-view .product-card {
  animation: wb-card-settle 0.5s var(--wb-ease-out) both;
}

@keyframes wb-card-settle {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  main#MainContent .shopify-section.wb-reveal.wb-in-view .product-card {
    animation: none;
  }
}

/* =========================================================================
   NEW — Marquee ticker strip
   Bold, uppercase, olive-scheme ribbon. The section's own component
   handles the infinite scroll animation; we just push the type treatment.
   ========================================================================= */

marquee-component {
  border-block: 1px solid rgb(0 0 0 / 0.06);
}

marquee-component .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* =========================================================================
   NEW — Accordion (FAQ + product shipping/returns) polish
   Smooth chevron rotation and a touch more breathing room.
   ========================================================================= */

details.accordion > summary,
.accordion-row > summary {
  cursor: pointer;
  transition: color 0.2s ease;
}

details.accordion > summary:hover,
.accordion-row > summary:hover {
  color: var(--wb-coral);
}

details[open] summary .svg-wrapper,
details[open] summary svg {
  transform: rotate(180deg);
}

summary svg,
summary .svg-wrapper {
  transition: transform 0.3s var(--wb-ease-out);
}

/* =========================================================================
   NEW — Product page: trust row + shipping/returns accordion
   Keeps icons aligned and gives the row a little breathing space above
   the divider that already sits between it and the description.
   ========================================================================= */

.product-details .icon-block {
  color: var(--wb-coral-deep);
  flex-shrink: 0;
}

/* =========================================================================
   NEW — Collection filter bar: pill-shaped to match buttons/badges
   ========================================================================= */

.facets,
.filters {
  --style-border-radius-pills: 999px;
}

.facets [class*='pill'],
.facets button,
.facets summary {
  border-radius: 999px;
}

/* =========================================================================
   NEW — Sticky add-to-cart bar: recolored to brand instead of default glass
   ========================================================================= */

.sticky-add-to-cart__bar {
  background: var(--wb-ink);
  color: var(--wb-cream);
}

.sticky-add-to-cart__bar .sticky-add-to-cart__title,
.sticky-add-to-cart__bar .sticky-add-to-cart__price {
  color: var(--wb-cream);
}

.sticky-add-to-cart__bar .sticky-add-to-cart__variant {
  color: rgb(251 238 218 / 0.7);
}

/* =========================================================================
   NEW — Subtle pointer-tilt on the lifestyle feature section
   Degrees are set live by wagbase-interactions.js via CSS custom
   properties; this rule just applies them with a smooth spring-back.
   Disabled automatically on touch devices and reduced-motion (see JS).
   ========================================================================= */

#shopify-section-section_Ea3hn6 .image-block__image {
  transform: perspective(1200px) rotateX(var(--wb-tilt-y)) rotateY(var(--wb-tilt-x));
  transition: transform 0.4s var(--wb-ease-out);
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  #shopify-section-section_Ea3hn6 .image-block__image {
    transform: none !important;
    transition: none;
  }
}

/* =========================================================================
   NEW — Mobile legibility safeguard for the homepage's stacked top section
   (ticker + hero + slideshow). The brand pairs a bold/rounded display face
   for headings with a plain sans for body copy; on a phone screen that
   combination can end up smaller and tighter than is comfortable to read.
   This only raises the floor on narrow viewports — nothing changes above
   480px, so desktop and tablet layouts are untouched.
   ========================================================================= */

@media screen and (max-width: 480px) {
  main :is(p, .rte, li) {
    font-size: max(1rem, 1em);
    line-height: 1.55;
  }
}

/* =========================================================================
   NEW — Narrower mobile drawer width
   Horizon's default --drawer-width (95vw, set in theme-styles-variables)
   covers nearly the entire phone screen for the mobile menu drawer, cart
   drawer, and any other drawer that shares this variable. An 84vw first
   pass was still reading as "most of the screen" on real phones, so this
   uses a fixed-peek formula instead of a raw percentage: viewport width
   minus a constant 110px margin, capped at 300px. That guarantees a
   consistent visible strip of the underlying page regardless of phone
   size, rather than the covered fraction creeping up on smaller screens.
   Scoped to phone widths only (750px+ keeps Horizon's fixed 25rem drawer
   width from header-drawer's own CSS untouched).
   ========================================================================= */

@media screen and (max-width: 749px) {
  :root {
    --drawer-width: min(calc(100vw - 110px), 300px);
    --drawer-max-width: 300px;
  }
}