/* ------------------------------------------------ 0. every blue becomes black
   SuperHi's blue scale and POUCH's pulse blue both collapse onto a black and
   grey scale, so the banner, the logo pill, the shipping tab, focus states and
   the footer band all lose the blue. Nothing else about them changes. */
html:root,
.animado-shell {
  --color-blue-20: #ececec;
  --color-blue-30: #cfcfcf;
  --color-blue-40: #8a8a8a;
  --color-blue-45: #1f1f1f;
  --color-blue-50: #141414;
  --color-blue-55: #0e0e0e;
  --color-blue-60: #000000;
  --color-blue: #141414;
  --color-pale-blue-30: #f4f2ec;
  --color-pale-blue-40: #eeece6;
  --color-pale-blue-50: #e4e1d9;
  --color-pale-blue-60: #d9d5cb;
  --color-pale-blue-70: #cbc6ba;
  --color-warm-blue-30: #e6e6e6;
  --color-warm-blue-40: #d6d6d6;
  --color-warm-blue-50: #c4c4c4;
  --color-warm-blue-60: #b3b3b3;
  --color-warm-blue-80: #8c8c8c;
  --color-warm-blue: #c4c4c4;
  --elevation-medium: 0 0.2rem 0.25rem #00000022;
}
.SiteBanner_siteBanner__XcmVh {
  --background-color: #141414;
  --background-hover: #000000;
}
.SiteHeader_logo__VCFyr {
  --theme-logo-background: #141414;
}
.local-shipping-tab {
  background: #141414 !important;
}

/* one page colour: the chalk the product sections already use runs under the
   hero and the rest of the homepage too, so the hero gradient goes */
body,
.ThemeWrapper_wrapper__gfzYK,
.PageModules_main__XSM9N,
.Hero_default__HBxIb {
  background-color: #eeece6;
}
.Hero_default__HBxIb {
  background-image: none;
}

/* Animado overrides. Loaded after pouch.css on the homepage and after the
   theme stylesheet on the storefront pages, so these win without touching
   either file. Two jobs: POUCH's electric blue becomes black, and the
   Shop by solution hover is retuned. */

/* ------------------------------------------------ 1. blue becomes black */
#mix-pouch-host,
html:root {
  --color-pulse-blue: #141414;
  --color-pulse-blue-darken-15: #000000;
}

/* the one place the blue is hardcoded rather than a variable */
#mix-pouch-host .cart-progress__bar::before,
body .cart-progress__bar::before {
  background: linear-gradient(90deg, #edebe4 -62.08%, #141414 120.34%);
}

/* ---------------------------------------- 2. product card hover, premium */

/* the card lifts, slowly, with a soft distant shadow */
#mix-pouch-host .product-card-element .product-card,
.product-card-element .product-card {
  transition:
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.45s ease-out;
  will-change: transform;
}
#mix-pouch-host .product-card-element:hover .product-card,
.product-card-element:hover .product-card {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.38);
}

/* the pattern eases in and settles from a slight zoom, instead of snapping */
#mix-pouch-host .product-card__background,
.product-card__background {
  transform: scale(1.08);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
#mix-pouch-host .product-card-element:hover .product-card__background,
.product-card-element:hover .product-card__background {
  transform: scale(1);
}

/* the black wash over the pattern goes from 20% to almost nothing,
   so the brand colour stays clean under white text */
#mix-pouch-host .product-card:has(.product-card__background)::before,
.product-card:has(.product-card__background)::before {
  background-color: rgba(0, 0, 0, 0.06);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the product lifts a touch and gains a shadow so it sits on the pattern */
#mix-pouch-host .product-card .image-container img,
.product-card .image-container img {
  transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
#mix-pouch-host .product-card-element:hover .image-container img,
.product-card-element:hover .image-container img {
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 28px 26px rgba(0, 0, 0, 0.26));
}

/* the flavour badge stays a solid chip; the overlay chips go glassy */
#mix-pouch-host .product-card-element:hover .badge--overlay,
.product-card-element:hover .badge--overlay {
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* the add to cart bar, now black, with a soft edge instead of a hard one */
#mix-pouch-host .product-card-quick-add__button,
.product-card-quick-add__button {
  letter-spacing: 0.08em;
  transition: background-color 0.3s ease-out;
}
#mix-pouch-host .product-card-quick-add__button:hover,
.product-card-quick-add__button:hover {
  background-color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  #mix-pouch-host .product-card-element .product-card,
  .product-card-element .product-card,
  #mix-pouch-host .product-card__background,
  .product-card__background,
  #mix-pouch-host .product-card .image-container img,
  .product-card .image-container img {
    transition: none;
    transform: none;
  }
}

/* ------------------------------------------ 3. storefront pages: homepage shell
   The SuperHi banner, header and footer sit on the storefront pages too. The
   POUCH header stays in the DOM because its cart and search overlays live
   inside it, but everything visible in it is switched off. */

body.animado-shelled .shopify-section-header .announcement-bar,
body.animado-shelled .shopify-section-header .site-header__left,
body.animado-shelled .shopify-section-header .site-header__middle,
body.animado-shelled .shopify-section-header .site-header__misc > .header-list,
body.animado-shelled .shopify-section-header .site-header__logo {
  display: none !important;
}
body.animado-shelled .shopify-section-header .site-header {
  position: sticky;
  top: 5rem;                       /* overlays open just under the floating pill */
}
body.animado-shelled .shopify-section-header .site-header__masthead {
  padding-block: 0;
}
body.animado-shelled .shopify-section-header .site-header__masthead::before,
body.animado-shelled .shopify-section-header .site-header__masthead::after {
  display: none;
}
body.animado-shelled .shopify-section-header .site-header__misc {
  position: static;
}

/* the pill floats over the page on the homepage; here the page needs room for it */
body.animado-shelled .animado-shell--header {
  position: relative;
  z-index: 20;
}
body.animado-shelled .animado-shell--header::after {
  content: '';
  display: block;
  height: 5rem;
}

/* the moving strip inside the SuperHi banner, POUCH's swiper */
.animado-shell .SiteBanner_container__moGWm > a {
  display: block;
  height: 2rem;
  overflow: hidden;
}
.animado-shell .SiteBanner_container__moGWm swiper-container {
  display: block;
  height: 100%;
  width: 100%;
}
.animado-shell .SiteBanner_container__moGWm swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.animado-shell .SiteBanner_container__moGWm swiper-slide p {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* the cart count sits inside the SuperHi Cart label */
.animado-shell .site-header__cart-count {
  font-variant-numeric: tabular-nums;
}

/* the footer band on the storefront pages is the same height as the homepage
   one, now that the falling leaves fill it (animado-footer-leaves.js) */
body.animado-shelled .SiteFooter_expander__tgYR0 {
  height: 100%;
}

/* the mobile panel is closed until the burger opens it */
.animado-shell [data-animado-mobile][hidden] {
  display: none !important;
}
/* before Swiper upgrades the strip, only the first line shows */
.animado-shell swiper-container:not(:defined) swiper-slide + swiper-slide {
  display: none;
}
.animado-shell swiper-container:not(:defined) {
  display: block;
  height: 2rem;
  overflow: hidden;
}
.animado-shell swiper-container:not(:defined) swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
}

/* ------------------------------------------------ 4. the logo pill is Animado's
   SuperHi's round mark becomes a black pill holding the Animado wordmark. The
   hover widening and the letter slide are switched off, there is nothing to
   reveal any more. */
.SiteHeader_logo__VCFyr {
  width: auto !important;
  border-radius: 50rem;
}
.SiteHeader_logo__VCFyr:hover {
  width: auto !important;
}
.SiteHeader_logo__VCFyr a.animado-logo {
  display: flex !important;
  align-items: center;
  height: 100%;
  padding: 0 0.9rem 0 0.85rem !important;
  overflow: visible !important;
}
.SiteHeader_logo__VCFyr a.animado-logo img {
  display: block;
  height: 1.05rem;
  width: auto;
  max-width: none;
  transform: none;
}

/* footer logo is the Animado wordmark, black on the white pill */
.SiteFooter_logoSizer__zKYF7 img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
/* the shipping tab and the footer's old SuperHi footer links do not navigate; nothing else to style */

/* the reviews wall: no tweet metrics, no View button, no mascot in the hero */
.TweetCard_engagement__1Awon,
.TweetCard_button__CpESH,
.Hero_wilson__3o_px {
  display: none !important;
}

/* cookie notice: same black as the rest, decline button keeps an outline so it stays visible */
.CookieConsent { background: #141414 !important; }
.CookieConsent #rcc-decline-button { background: #141414 !important; outline: 1px solid #ffffff; outline-offset: -1px; }

/* hero shapes drawn from the client's pattern. Each shape is three nested
   groups: the outer one leans with the cursor, the middle one grows in and
   sways in the breeze, the inner path reacts to hover. The scroll parallax
   SuperHi already runs on the parent group is left alone. */
.animado-motif,
.animado-motif__grow,
.animado-motif__wave,
.animado-motif__shape {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.animado-motif { will-change: transform; }

/* 1. entrance: a small spring, one shape after another */
@keyframes animadoGrow {
  from { opacity: 0; transform: scale(0.3) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
.animado-motif__grow {
  animation: animadoGrow 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(220ms + var(--i, 0) * 75ms);
}

/* 2. breeze: one sway, triggered by the script every few seconds and on hover */
@keyframes animadoSway {
  0%   { transform: rotate(0deg) translateY(0); }
  30%  { transform: rotate(-3.5deg) translateY(-7px); }
  60%  { transform: rotate(2.5deg) translateY(2px); }
  85%  { transform: rotate(-1deg) translateY(-2px); }
  100% { transform: rotate(0deg) translateY(0); }
}
.animado-motif__wave.is-swaying {
  animation: animadoSway 1.7s cubic-bezier(0.45, 0, 0.35, 1) both;
}

/* 3. hover: the shape wakes up; the hero text no longer blocks the pointer */
.animado-motif__shape {
  pointer-events: visiblePainted;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
}
.animado-motif:hover .animado-motif__shape {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.14));
}
.Hero_group__bANwX { pointer-events: none; }
.Hero_group__bANwX a,
.Hero_group__bANwX button { pointer-events: auto; }

.animado-motif-pill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.5rem 0.65rem;
  border-radius: 999px;
  background: #141414;
  color: #ffffff;
  font: 500 0.8125rem/1 var(--font-family-text, Helvetica, Arial, sans-serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.animado-motif-pill.is-visible { opacity: 1; }
.animado-motif-pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ffffff;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .animado-motif__grow { animation: none; }
  .animado-motif__wave.is-swaying { animation: none; }
  .animado-motif__shape { transition: none; }
}

/* footer: the brand's leaves fall behind the footer card instead of SuperHi's balls */
.SiteFooter_ballPool__GP_w7 { overflow: hidden; }
.SiteFooter_ballPool__GP_w7 canvas:not(.animado-leaves) { display: none !important; }
.SiteFooter_ballPool__GP_w7 .animado-leaves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* "where to start": the client's product clips replace the SuperHi videos, the
   mascot goes, and the three panels take three brand colours */
.WhereToStart_default__ssOmK .Wilson_default__Czhfm { display: none !important; }
.WhereToStart_default__ssOmK .Video_video___FC6f { position: relative; overflow: hidden; }
.WhereToStart_default__ssOmK .Video_videoPlayerWrapper__R_hM_ { visibility: hidden; }
.WhereToStart_default__ssOmK .animado-panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.WhereToStart_panel1__kQJle { --panel-background: #F5DDBC; }
.WhereToStart_panel2__wtRus { --panel-background: #D28278; }
.WhereToStart_panel3__cxDFm { --panel-background: #B4C850; }
.WhereToStart_tab1__wPBP_ { --tab-color: #E6AA5A; }
.WhereToStart_tab2__DVcRS { --tab-color: #D28278; }
.WhereToStart_tab3__ljcxl { --tab-color: #B4C850; }
.WhereToStart_default__ssOmK .Panel_default__RXZEL { color: #141414; }
.animado-form-note { margin-top: 0.75rem; font-size: 0.875rem; }

/* footer socials: black, like every other former blue */
.SiteFooter_socials__TI9kV a,
.SiteFooter_socials__TI9kV svg { color: #141414 !important; }
.SiteFooter_socials__TI9kV svg path[fill="#2727E6"],
.SiteFooter_socials__TI9kV svg path[fill="#2727e6"] { fill: #141414 !important; }