/** Shopify CDN: Minification failed

Line 3439:0 Expected "*/" to terminate multi-line comment

**/
/* build 2026-06-06T06:15Z card-alignment */
/* ============================================
   PURLI BRAND KIT — global styles
   File: assets/purli-brand.css
   Loaded by every Purli section
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* Fix: remove white bleed-through behind nav pill rounded corners.
   The header pill has border-radius: 0 0 32px 32px on its bottom
   corners — without this, the page's default white body color
   shows through the curve area between the announcement bar and
   the hero, looking like two white wedges. Buttermilk body fills
   those wedges so the curve reads cleanly. */
body,
html {
  background-color: var(--purli-buttermilk) !important;
}

/* Force the announcement bar back to Purli Blue with white text.
   The site-wide buttermilk body change above can bleed through the
   Dwell color-scheme cascade in some cases; this nails it. */
.announcement-bar,
.section--full .announcement-bar,
.shopify-section [class*="announcement"] {
  background: var(--purli-blue) !important;
  color: #FFFFFF !important;
}
.announcement-bar .section-background,
.shopify-section [class*="announcement"] .section-background {
  background: var(--purli-blue) !important;
}
/* Per-text-element override — Dwell wraps the announcement copy in
   .announcement-bar__text which carries its own color from the
   color-scheme cascade. Force it to white here too. */
.announcement-bar *,
.announcement-bar__text,
.announcement-bar__text *,
.announcement-bar a,
.announcement-bar a:visited,
.announcement-bar a:hover {
  color: #FFFFFF !important;
}

/* The hero is pulled up to margin-top: -134px so it bleeds behind
   both the pill and the announcement bar. Give the announcement
   bar a z-index higher than the header pill's sticky z-index: 100
   so it renders above the hero photo instead of being buried. */
.shopify-section:has(.announcement-bar),
[id*="announcement"] {
  position: relative;
  z-index: 101;
}
.announcement-bar {
  position: relative;
  z-index: 101;
}

/* Kill the cross-fade between announcement slides. The default 0.5s
   opacity/visibility transition leaves a moment where both the outgoing
   and incoming slide sit at partial opacity, which reads as an empty
   bar mid-rotation. Snap the swap so there's always one fully visible
   message on screen. */
.announcement-bar__slide {
  transition: none !important;
}
.announcement-bar__slide[aria-hidden='true'] {
  opacity: 0 !important;
  visibility: hidden !important;
}
.announcement-bar__slide[aria-hidden='false'] {
  opacity: 1 !important;
  visibility: visible !important;
}

:root {
  /* --- CORE BRAND (use these everywhere) --- */
  --purli-blue:        #0341F1;  /* PRIMARY — buttons, links, logo, key accents */
  --purli-midnight:    #0341F1;  /* ALIASED to brighter blue per user direction —
                                    previously #021E8A. Token kept so every
                                    drop-shadow / divider / hover that already
                                    references --purli-midnight resolves to the
                                    logo blue. */
  /* Legacy tokens — aliased to brand colors so any straggler reference
     across sections/snippets resolves to buttermilk or blue. */
  --purli-cream:       #FBE8D4;  /* aliased to buttermilk */
  --purli-ink:         #0341F1;  /* aliased to blue */
  --purli-sky:         #FBE8D4;  /* aliased to buttermilk */
  --purli-buttermilk:  #FBE8D4;  /* warm surface */
  --purli-white:       #FBE8D4;  /* aliased to buttermilk */

  /* --- Reserved category accents — all aliased to brand blue --- */
  --purli-bubblegum:   #0341F1;
  --purli-sunshine:    #0341F1;
  --purli-catnip:      #0341F1;
  --purli-lavender:    #0341F1;

  /* --- PRODUCT ILLUSTRATION --- */
  --purli-kraft:       #D9A876;  /* cardboard product illustrations */

  /* --- ON-ACCENT TEXT (dark variants for text-on-light-accent contrast) --- */
  --purli-catnip-text: #1F4D2A;  /* dark green for text on --purli-catnip */

  /* --- SEMANTIC ALIASES (point app/UI roles at the brand colors) --- */
  --purli-bg:          var(--purli-buttermilk);
  --purli-surface:     var(--purli-white);
  --purli-surface-alt: var(--purli-buttermilk);
  --purli-text:        var(--purli-blue);
  --purli-text-invert: var(--purli-buttermilk);
  --purli-accent:      var(--purli-blue);
  --purli-accent-hover:var(--purli-blue);
  --purli-border:      rgba(3, 65, 241, 0.15);

  /* --- TYPOGRAPHY & RADII (preserved) --- */
  --purli-display: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --purli-body: 'Inter', system-ui, -apple-system, sans-serif;
  --purli-radius-sm: 12px;
  --purli-radius-md: 20px;
  --purli-radius-lg: 32px;
}

/* ============================================================
   PURLI — SECTION COLOR BLOCKS (poppi-style color-blocked rhythm)
   ------------------------------------------------------------
   Wrap any section in <section class="purli-section purli-section--blue">
   to paint it a full-bleed brand color. Each modifier sets a background +
   a default foreground that has acceptable contrast on that background.
   For wave dividers, the parent .purli-section already has the required
   `position: relative; overflow: hidden`.
   ============================================================ */
.purli-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
  padding-left: 24px;
  padding-right: 24px;
  font-family: var(--purli-body);
  color: var(--purli-blue);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background: var(--purli-buttermilk);
}
/* Specificity bump: double the class selector so these modifiers always
   beat the later duplicate `.purli-section` rule (line ~112) that sets
   `background: var(--purli-buttermilk)`. Without this, equal specificity +
   source-order makes cream win and blue bands render invisible. */
.purli-section.purli-section--blue       { background: var(--purli-blue)       !important; color: var(--purli-buttermilk);   }
.purli-section.purli-section--midnight   { background: var(--purli-blue)   !important; color: var(--purli-buttermilk);   }
.purli-section.purli-section--cream      { background: var(--purli-buttermilk);                 color: var(--purli-blue);     }
.purli-section.purli-section--sky        { background: rgba(3, 65, 241, 0.18)        !important; color: var(--purli-blue);}
.purli-section.purli-section--buttermilk { background: var(--purli-buttermilk) !important; color: var(--purli-blue);     }
.purli-section.purli-section--white      { background: var(--purli-white)      !important; color: var(--purli-blue);     }
.purli-section.purli-section--ink        { background: var(--purli-blue)        !important; color: var(--purli-buttermilk);   }

/* ============================================================
   PURLI — WAVE DIVIDER POSITIONING
   ------------------------------------------------------------
   Used by snippets/purli-wave.liquid. The snippet renders the SVG; this
   block positions it flush to the top or bottom of its parent section.
   ============================================================ */
.purli-wave {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  line-height: 0;
  pointer-events: none;
}
.purli-wave--bottom { bottom: -1px; }
.purli-wave--top    { top: -1px; transform: scaleY(-1); }
.purli-wave svg     { display: block; width: 100%; height: auto; }
.purli-wave--gentle svg { height: 80px; }
.purli-wave--deeper svg { height: 140px; }
.purli-wave--bumpy  svg { height: 80px; }
@media (max-width: 700px) {
  .purli-wave--gentle svg { height: 50px; }
  .purli-wave--deeper svg { height: 80px; }
  .purli-wave--bumpy  svg { height: 50px; }
}

/* THEME-AGNOSTIC CREAM BACKGROUND (works in Dwell, Dawn, or any OS 2.0 theme)
   ---------------------------------------------------------------------------
   We do NOT rely on any theme-specific body class for the homepage, because
   different themes name that class differently. Instead, each Purli section
   paints its own cream background, and we extend it edge-to-edge so adjacent
   Purli sections read as one continuous canvas.

   If you'd rather paint the whole <body> cream, inspect your theme's homepage
   <body class="..."> to find its real homepage class, then add a single rule
   in the theme editor (Theme settings) or here targeting that class. We leave
   no such rule active so nothing silently fails to match on Dwell. */

/* (Duplicate .purli-section rule removed — its font/color/bg props were
   merged into the canonical rule at the top of this file so the padding
   from Fix 5 isn't clobbered by source-order.) */

.purli-container {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  width: 100%;
}

/* Shared button styles */
.purli-btn {
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--purli-body);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s, color 0.2s;
  cursor: pointer;
  border: none;
}
.purli-btn--primary {
  background: var(--purli-blue);
  color: var(--purli-white);
}
.purli-btn--primary:hover {
  background: var(--purli-blue);
  transform: translateY(-2px);
  color: var(--purli-white);
}
.purli-btn--secondary {
  background: transparent;
  color: var(--purli-blue);
  border: 1.5px solid var(--purli-blue);
}
.purli-btn--secondary:hover {
  background: var(--purli-blue);
  color: var(--purli-white);
}

/* Reset some theme defaults inside Purli sections */
.purli-section * { box-sizing: border-box; }
.purli-section h1,
.purli-section h2,
.purli-section h3,
.purli-section h4 {
  font-family: var(--purli-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.purli-section p { margin: 0; }
.purli-section ul { list-style: none; padding: 0; margin: 0; }
.purli-section img { max-width: 100%; height: auto; display: block; }

/* SEAM HANDLING (Dwell + any theme)
   ---------------------------------------------------------------------------
   Themes often wrap each section in a <div class="shopify-section"> that can
   carry its own margin/padding/background. If you see gaps or color bands
   between stacked Purli sections, target the wrapper of the Purli section.
   Each Purli section sets a `class` in its schema (e.g. `section-purli-hero`),
   which Shopify applies to the wrapping .shopify-section element, so: */
.shopify-section.section-purli-hero,
.shopify-section.section-purli-icon-strip,
.shopify-section.section-purli-showcase,
.shopify-section.section-purli-benefits,
.shopify-section.section-purli-how {
  background: var(--purli-buttermilk);
  margin: 0;
}

/* Blue band sections MUST defer to the inner .purli-section--blue
   modifier for their background — otherwise the wrapper's cream wins
   on specificity and the band renders cream-on-cream (invisible text). */
.shopify-section.section-purli-band {
  margin: 0;
  background: transparent;
}

/* Collapse the doubled vertical padding where two Purli sections stack
   (each section already pads 40px top & bottom = 80px between them). */
.shopify-section[class*="section-purli-"] + .shopify-section[class*="section-purli-"] .purli-section {
  padding-top: 0;
}

/* Hero video slot. Lives here (not in the section file) so the box
   sizing survives any section-scoped rebuild. The inner <video> rule
   sits in sections/purli-hero.liquid to keep video-specific styling
   co-located with the markup. */
/* overflow visible + transparent background so the inner <video>'s
   cream border + midnight drop-shadow can extend past the hold's
   bounds — same pop-art frame language as the product gallery and
   lifestyle photo. */
.purli-hero__media-hold {
  min-height: 620px;
  overflow: visible;
  background: transparent;
}
@media (max-width: 768px) {
  .purli-hero__media-hold { min-height: 380px; }
}

/* ============================================================
   SHOWCASE GALLERY (main image + 6 thumbnail strip)
   Section markup + JS lives in sections/purli-product-showcase.liquid.
   These rules override the section's older
   `.purli-showcase__image img { object-fit: contain }` rule because
   the gallery wraps the main image in `.purli-showcase__main-img-wrap`.
   ============================================================ */
.purli-showcase__image {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Wrap is the positioning context for arrows; overflow visible so the
   midnight drop-shadow on the img + arrows can extend past the bounds.
   Visual frame (cream border + radius) lives on the <img> itself. */
.purli-showcase__main-img-wrap {
  position: relative;
  overflow: visible;
  background: transparent;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.purli-showcase__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 5px solid var(--purli-buttermilk);
  border-radius: var(--purli-radius-md);
  background: var(--purli-buttermilk);
  filter: drop-shadow(8px 8px 0 var(--purli-blue));
  transition: opacity 200ms ease;
}

/* Prev / next arrows — same comic-strip language as the PDP gallery. */
.purli-showcase__arrow {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--purli-buttermilk);
  color: var(--purli-blue);
  border: 4px solid var(--purli-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  padding: 0;
  filter: drop-shadow(4px 4px 0 var(--purli-blue));
  transition: transform 160ms ease, background 160ms ease;
  transform: translateY(-50%);
}
.purli-showcase__arrow:hover {
  background: var(--purli-sunshine);
  transform: translateY(-50%) scale(1.08);
}
.purli-showcase__arrow:focus-visible {
  outline: 3px solid rgba(3, 65, 241, 0.18);
  outline-offset: 4px;
}
.purli-showcase__arrow svg { width: 22px; height: 22px; display: block; }
.purli-showcase__arrow--prev { left: -26px; }
.purli-showcase__arrow--next { right: -26px; }

@media (prefers-reduced-motion: reduce) {
  .purli-showcase__arrow { transition: none; }
  .purli-showcase__arrow:hover { transform: translateY(-50%); }
}
@media (max-width: 600px) {
  .purli-showcase__arrow { width: 44px; height: 44px; border-width: 3px; }
  .purli-showcase__arrow--prev { left: -16px; }
  .purli-showcase__arrow--next { right: -16px; }
}
.purli-showcase__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.purli-showcase__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--purli-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  flex-shrink: 0;
  transition: border-color 150ms ease;
}
.purli-showcase__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.purli-showcase__thumb:hover,
.purli-showcase__thumb:focus-visible { border-color: rgba(3, 65, 241, 0.18); outline: none; }
.purli-showcase__thumb--active { border-color: var(--purli-blue) !important; }

@media (max-width: 768px) {
  .purli-showcase__thumbs { gap: 6px; }
  .purli-showcase__thumb { width: 56px; height: 56px; }
}

/* ============================================================
   HOW-IT-WORKS STEP VIDEOS
   Step-card image/video slot — square, contained, with bottom margin
   to separate from the step heading below.
   ============================================================ */
.purli-how__step-img {
  border-radius: var(--purli-radius-sm);
  overflow: hidden;
  background: var(--purli-buttermilk);
  aspect-ratio: 1 / 1;
  width: 100%;
  margin-bottom: 14px;
}
.purli-how__step-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--purli-radius-sm);
}

/* ============================================================
   HERO / WAVE SEAM (Fix 2)
   The hero's bottom wave is positioned absolutely; the hero itself
   no longer pads for it. Pull the wave -2px to kill subpixel seams
   and force the next section flush against the hero edge.
   ============================================================ */
.purli-hero .purli-wave--bottom {
  margin-bottom: -2px;
}
.shopify-section.section-purli-icon-strip {
  margin-top: 0;
  padding-top: 0;
}

/* ============================================================
   HERO DECORATIVE BLOB (Fix 3)
   Pin the sky blob inside the hero so it can't bleed into the
   icon strip section below it.
   ============================================================ */
.shopify-section.section-purli-hero {
  overflow: hidden;
  position: relative;
}
.purli-hero__blob {
  pointer-events: none;
  z-index: 0;
  max-height: 100%;
  overflow: hidden;
}

/* ============================================================
   HERO TRUST ROW (Fix 4)
   Flow items naturally so they wrap without orphaning. Removes the
   prior 2-per-row lock at <768px which created a 2+1 orphan layout.
   ============================================================ */
.purli-hero__trust,
.purli-hero__trust-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 24px;
  align-items: flex-start;
}
.purli-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-family: var(--purli-body);
  font-size: 14px;
  color: var(--purli-blue);
  line-height: 1.3;
}
.purli-hero__trust-item strong,
.purli-hero__trust-label {
  display: block;
  font-weight: 600;
}
.purli-hero__trust-sub {
  opacity: 0.6;
  font-size: 12px;
}
@media (max-width: 640px) {
  .purli-hero__trust,
  .purli-hero__trust-items { gap: 12px 16px; }
  /* Override the older lock so items wrap naturally on mobile too. */
  .purli-hero__trust-item { flex: 0 0 auto; }
}

/* ============================================================
   SECTION RHYTHM (Fix 5)
   Per-section overrides to keep vertical pacing consistent.
   ============================================================ */
.purli-icon-strip-wrap,
.purli-how-wrap {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
/* Showcase has its own intro heading above — tighten the top. */
.purli-showcase {
  padding-top: 0;
  padding-bottom: clamp(56px, 7vw, 88px);
}

/* ============================================================
   HERO TRUST TEXT (Fix 2)
   Strong = label, span = sub. Parent flex column stacks them
   inside each trust item next to the SVG icon.
   ============================================================ */
.purli-hero__trust-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.purli-hero__trust-text strong {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--purli-body);
  color: var(--purli-blue);
  line-height: 1.3;
}
.purli-hero__trust-text span {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--purli-body);
  color: var(--purli-blue);
  opacity: 0.65;
  line-height: 1.3;
}

/* ============================================================
   ICON STRIP WRAP — restore symmetric vertical padding so the
   heading isn't cramped against the section above.
   ============================================================ */
/* Heading pulled up further: top padding trimmed to a thin sliver
   so the heading hugs the section above. Bottom padding stays full
   so the comic-sticker card grid has room to breathe. */
.purli-icon-strip-wrap {
  padding-top: clamp(8px, 1.5vw, 24px) !important;
  padding-bottom: clamp(64px, 8vw, 100px) !important;
}

/* ============================================================
   PURLI FOOTER — full rebuild (4-col Mau-style, Purli colors)
   The hardcoded markup lives in sections/footer.liquid. This
   block owns all the styling. Replaces the old Dwell-scoped
   FOOTER REBRAND v2 overrides since the new footer has its own
   classes (.purli-footer__*) — Dwell block class names are gone.
   ============================================================ */

.purli-footer {
  background: var(--purli-buttermilk);
  padding: 0 5%;
}

.purli-footer__cols {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.8fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 0 60px 0;
}

.purli-footer__col-heading {
  font-family: var(--purli-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 700;
  color: var(--purli-blue);
  margin: 0 0 22px 0;
}

.purli-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.purli-footer__col ul a {
  font-family: var(--purli-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--purli-blue);
  text-decoration: none;
  line-height: 2.4;
  display: inline-block;
  opacity: 0.85;
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.purli-footer__col ul a,
.purli-footer__col ul a:visited {
  color: var(--purli-blue);
}
.purli-footer__col ul a:hover {
  transform: scale(1.05);
  color: var(--purli-blue);
  opacity: 1;
}

.purli-footer__contact-line {
  font-family: var(--purli-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--purli-blue);
  opacity: 0.85;
  margin: 0 0 6px 0;
  line-height: 1.6;
}
.purli-footer__contact-link,
.purli-footer__contact-link:visited {
  color: var(--purli-blue);
  text-decoration: none;
  display: inline-block;
  transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.purli-footer__contact-link:hover {
  transform: scale(1.05);
  color: var(--purli-blue);
}

.purli-footer__newsletter-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(3,65,241,0.25);
  background: rgba(3,65,241,0.05);
  color: var(--purli-blue);
  padding: 14px 16px;
  border-radius: var(--purli-radius-sm);
  font-family: var(--purli-body);
  font-size: 14px;
  outline: none;
  display: block;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}

.purli-footer__newsletter-input::placeholder {
  color: rgba(3,65,241,0.35);
}

.purli-footer__newsletter-input:focus {
  border-color: var(--purli-blue);
}

.purli-footer__subscribe-btn {
  width: 100%;
  background: var(--purli-blue);
  color: #ffffff;
  border: none;
  padding: 14px;
  border-radius: var(--purli-radius-sm);
  font-family: var(--purli-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
  display: block;
}

.purli-footer__subscribe-btn:hover {
  filter: brightness(0.85);
}

.purli-footer__divider {
  border: none;
  border-top: 1px solid rgba(3,65,241,0.12);
  margin: 0 auto;
  max-width: 1200px;
}

.purli-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 0 36px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.purli-footer__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wrapper for the inline SVG logo. The SVG inside has class
   .purli-logo which is sized large in the header (44–64px height);
   we constrain it here to the footer scale. */
.purli-footer__logo {
  display: inline-block;
  line-height: 0;
}
.purli-footer__logo .purli-logo {
  height: 44px !important;
  max-width: 200px !important;
  width: auto !important;
  display: block;
}

.purli-footer__copyright {
  font-family: var(--purli-body);
  font-size: 12px;
  color: var(--purli-blue);
  opacity: 0.85;
  margin: 0;
}

.purli-footer__bottom-right {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.purli-footer__legal-link {
  font-family: var(--purli-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--purli-blue);
  text-decoration: none;
  opacity: 1;
  display: inline-block;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.purli-footer__legal-link,
.purli-footer__legal-link:visited {
  color: var(--purli-blue);
}
.purli-footer__legal-link:hover {
  transform: scale(1.05);
  color: var(--purli-blue);
}

.purli-footer__success-msg {
  font-family: var(--purli-body);
  font-size: 13px;
  color: var(--purli-blue);
  opacity: 0.8;
}

@media (max-width: 1024px) {
  .purli-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .purli-footer__cols {
    grid-template-columns: 1fr;
    padding: 48px 0 40px 0;
  }
  .purli-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .purli-footer__bottom-right {
    gap: 14px;
  }
}

/* ============================================================
   BLUE BAND PADDING + SUBSCRIBE BUTTON + SECTION RHYTHM v3
   Late additions to close out the deep-spacing audit.
   ============================================================ */

/* Fix 2 — blue bands always need their own top padding.
   The earlier `.shopify-section[class*="section-purli-"] +
   .shopify-section[class*="section-purli-"] .purli-section { padding-top: 0 }`
   sibling rule was zeroing the band's clamp() top padding when stacked
   between other Purli sections. Three-class selector beats it on
   specificity; !important is belt-and-suspenders against future
   wrapper rules. */
.purli-section.purli-section--blue.purli-band-wrap {
  padding-top: clamp(64px, 8vw, 100px) !important;
  padding-bottom: clamp(64px, 8vw, 100px) !important;
}

/* Fix 3 — band children spacing. The `.purli-section h2 / p / ul` reset
   rules earlier in this file have specificity (0,1,1) which beats the
   section file's class-only `.purli-band__heading { margin: ... }`
   (0,1,0). Prefix with .purli-band-wrap to bump specificity to (0,2,0)
   so margins land. */
.purli-band-wrap .purli-band__heading {
  font-family: var(--purli-display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--purli-buttermilk);
  margin: 0 0 20px;
}
.purli-band-wrap .purli-band__body {
  font-family: var(--purli-body);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  color: rgba(255, 248, 236, 0.85);
  margin: 0 auto 24px;
  max-width: 600px;
}
.purli-band-wrap .purli-band__bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto 28px;
  text-align: left;
  display: inline-block;
}
.purli-band-wrap .purli-band__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--purli-body);
  font-size: 15px;
  color: rgba(255, 248, 236, 0.9);
  margin-bottom: 10px;
  line-height: 1.5;
}
.purli-band-wrap .purli-band__quote {
  margin: 8px auto 0;
  max-width: 520px;
}

/* Fix 6 — per-section padding overrides so the sibling-zero rule
   doesn't squash sections that need their own breathing room. */
.purli-showcase {
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(64px, 8vw, 96px) !important;
}
.purli-how {
  padding-top: clamp(56px, 7vw, 88px) !important;
  padding-bottom: clamp(56px, 7vw, 88px) !important;
}
.purli-faq-wrap {
  padding-top: clamp(56px, 7vw, 88px) !important;
  padding-bottom: clamp(56px, 7vw, 88px) !important;
}

/* ============================================================
   SHOWCASE SECTION — POP-ART BACKGROUND TREATMENT
   Comic-strip rainbow strip at the top + buttermilk halftone
   polka-dot background. Mirrors the PDP details band so the
   homepage product moment rhymes with the PDP details moment.
   ============================================================ */
.section-purli-showcase {
  /* Polka dots moved from the card to the section bg per user
     direction. Section base is cream so the dots sit on a lighter
     surface; the card on top of this is plain white inside a blue
     pop-art frame. Tile matches the card's previous 22px / .15 / .08
     spec so the dot density doesn't visibly change. */
  background-color: var(--purli-buttermilk) !important;
  background-image:
    radial-gradient(circle, rgba(3, 65, 241, 0.15) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(2, 30, 138, 0.08) 1.5px, transparent 1.6px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}
.section-purli-showcase::before,
.section-purli-showcase::after {
  content: '';
  display: block;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--purli-blue)     0   24px,
    var(--purli-sunshine) 24px 48px,
    var(--purli-blue) 48px 72px,
    var(--purli-catnip)   72px 96px,
    rgba(3, 65, 241, 0.18)      96px 120px
  );
}

/* ============================================================
   HOMEPAGE SECTION DIVIDERS — fun visual breaks between sections
   Each ::before paints an 8-32px tall strip at the top of the
   wrapping .shopify-section. Three distinct treatments so the
   page reads with rhythm rather than repetition:
     - Icon strip : rainbow comic stripe (matches showcase + PDP)
     - How-it-works : row of multicolor polka dots
     - FAQ : single-color blue squiggle wave
   ============================================================ */

/* Icon-strip rainbow removed per user request — page no longer has
   the 5-color stripe above or below the "Why your cat destroys..."
   section. The rainbow is now scoped to the showcase section, which
   has both ::before and ::after so the white/grey product card area
   sits inside a colorful frame. */

/* How-it-works divider: 5 brand-color dots arranged on a sine curve so
   the row mirrors / echoes the cream wave that flows down from the
   blue band section above. Heights alternate cy=14 / cy=26 across a
   40px-tall band; cleanly tiles every 300px. */
.section-purli-how::before {
  content: '';
  display: block;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 40"><circle cx="30" cy="14" r="9" fill="%230341F1"/><circle cx="90" cy="26" r="9" fill="%23FFC93C"/><circle cx="150" cy="14" r="9" fill="%23FF6B9D"/><circle cx="210" cy="26" r="9" fill="%236BCB77"/><circle cx="270" cy="14" r="9" fill="%23D4E0FF"/></svg>');
  background-repeat: repeat-x;
  background-size: 300px 40px;
  background-position: center;
}

/* FAQ squiggle divider removed per user request — section now flows
   straight in from how-it-works above it with no horizontal pattern.
   The original rule is preserved as a comment so the treatment can
   be restored quickly later if wanted.
   .section-purli-faq::before {
     content: ''; display: block; height: 24px;
     background-image: url('data:image/svg+xml;utf8,...blue squiggle...');
     background-repeat: repeat-x; background-size: 120px 24px;
     background-position: center;
   }
*/

/* ============================================================
   HOMEPAGE -> PDP AESTHETIC MATCH
   Halftone polka-dot backgrounds + comic-style sticker treatment
   on the icon strip items and step cards, mirroring the pop-art
   language of the PDP details band.
   ============================================================ */

/* ---- Icon strip section: halftone + sticker items ---- */
.section-purli-icon-strip {
  background-color: var(--purli-buttermilk) !important;
  background-image:
    radial-gradient(circle, rgba(3, 65, 241, 0.12) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(2, 30, 138, 0.08) 1.5px, transparent 1.6px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Strip the inner white card so items float on the halftone */
.purli-icon-strip-wrap .purli-icon-strip {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 24px;
}

/* Each item becomes its own comic-strip sticker */
.purli-icon-strip-wrap .purli-icon-strip__item {
  background: transparent;
  border: 4px solid var(--purli-blue);
  border-radius: 18px;
  padding: 28px 18px;
  filter: drop-shadow(5px 5px 0 var(--purli-blue));
  text-align: center;
  transition: transform 200ms ease;
}
.purli-icon-strip-wrap .purli-icon-strip__item:hover {
  transform: translate(-2px, -2px) rotate(0deg) !important;
}

/* Rotating brand-accent backgrounds + slight alternating tilts */
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(1) {
  background: rgba(3, 65, 241, 0.18);
  transform: rotate(-1.5deg);
}
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(2) {
  background: var(--purli-sunshine);
  transform: rotate(1deg);
}
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(3) {
  background: var(--purli-blue);
  transform: rotate(-0.5deg);
}
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(4) {
  background: var(--purli-catnip);
  transform: rotate(1.5deg);
}
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(5) {
  background: var(--purli-lavender);
  transform: rotate(-1deg);
}

/* Per-item text + icon colors for contrast on each background */
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(1) .purli-icon-strip__icon,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(1) h4,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(1) p { color: var(--purli-blue); }
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(2) .purli-icon-strip__icon,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(2) h4,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(2) p { color: var(--purli-blue); }
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(3) .purli-icon-strip__icon,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(3) h4,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(3) p { color: var(--purli-buttermilk); }
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(4) .purli-icon-strip__icon,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(4) h4,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(4) p { color: var(--purli-catnip-text); }
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(5) .purli-icon-strip__icon,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(5) h4,
.purli-icon-strip-wrap .purli-icon-strip__item:nth-child(5) p { color: var(--purli-buttermilk); }

/* Heading reads cleaner over halftone background */
.purli-icon-strip__heading { color: var(--purli-blue) !important; }

@media (prefers-reduced-motion: reduce) {
  .purli-icon-strip-wrap .purli-icon-strip__item { transition: none; }
}

/* ---- How-it-works section: halftone + sticker step cards ---- */
.section-purli-how {
  background-color: var(--purli-buttermilk) !important;
  background-image:
    radial-gradient(circle, rgba(3, 65, 241, 0.12) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(2, 30, 138, 0.08) 1.5px, transparent 1.6px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

.purli-how__steps .purli-how__step {
  border: 4px solid var(--purli-blue);
  filter: drop-shadow(5px 5px 0 var(--purli-blue));
  transition: transform 200ms ease;
}
.purli-how__steps .purli-how__step:hover {
  transform: translate(-2px, -2px) rotate(0deg) !important;
}
.purli-how__steps .purli-how__step:nth-child(1) { transform: rotate(-1deg); }
.purli-how__steps .purli-how__step:nth-child(2) { transform: rotate(0.5deg); }
.purli-how__steps .purli-how__step:nth-child(3) { transform: rotate(-0.5deg); }

@media (prefers-reduced-motion: reduce) {
  .purli-how__steps .purli-how__step { transition: none; }
}

/* ============================================================
   CART PAGE — match the PDP aesthetic
   White surface, Fredoka blue headings, pop-art framed sections,
   comic-strip divider at top, blue pill Checkout button. Scoped
   to .cart-page so nothing leaks elsewhere.
   ============================================================ */

/* Page background — match PDP hero white */
.cart-page,
#shopify-section-cart-section,
[id^="shopify-section-cart"] { background-color: var(--purli-white) !important; }

/* Comic-strip rainbow divider at top of cart page */
.cart-page::before {
  content: '';
  display: block;
  height: 8px;
  margin-bottom: 32px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--purli-blue)      0   24px,
    var(--purli-sunshine)  24px 48px,
    var(--purli-blue) 48px 72px,
    var(--purli-catnip)    72px 96px,
    rgba(3, 65, 241, 0.18)       96px 120px
  );
}

/* Cart page heading: Fredoka 700 blue */
.cart-page__title,
.cart-page h1,
.cart-page h2,
.cart-page [class*="title"] {
  font-family: var(--purli-display) !important;
  font-weight: 700 !important;
  color: var(--purli-blue) !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}

/* Body text */
.cart-page,
.cart-page p,
.cart-page li,
.cart-page span,
.cart-page a {
  font-family: var(--purli-body);
  color: var(--purli-blue);
}

/* Cart items wrapper — plain white surface, no pop-art frame.
   (Heavy borders + shadows removed per user direction: "way too
   many edges".) Just a soft top divider to separate the section. */
.cart-page__items,
.cart-items__wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
}

/* Product titles in cart items — Purli Blue, same as the logo.
   Title is wrapped in <a href="{{ item.url }}"> by Dwell's
   cart-products snippet, so the link works; we just style it as a
   blue display label with a hover underline so the affordance is
   visible. */
.cart-items__table .product-title,
.cart-items__table a[href*="/products/"],
.cart-items a[href*="/products/"],
.cart-items__title,
.cart-items [class*="product-name"],
.cart-items [class*="product-title"],
.cart-items .product__title,
.cart-page__items a[href*="/products/"] {
  font-family: var(--purli-display) !important;
  font-weight: 600 !important;
  color: var(--purli-blue) !important;
  font-size: 16px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.cart-items__table a[href*="/products/"]:hover,
.cart-items a[href*="/products/"]:hover,
.cart-items__title:hover,
.cart-page__items a[href*="/products/"]:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Cart product prices — Purli Blue. Broader selector net so it
   catches Dwell's actual markup (price__amount, price-item, money,
   etc.) since exact class names vary by theme version. */
.cart-items__table [class*="price"],
.cart-page__items [class*="price"],
.cart-page__items [class*="money"],
.cart-items [class*="price"],
.cart-items [class*="money"],
.cart-page [class*="price__amount"],
.cart-page [class*="price-item"] {
  font-family: var(--purli-display) !important;
  color: var(--purli-blue) !important;
  font-weight: 600 !important;
}

/* Quantity selector — match PDP qty stepper */
.cart-items__table input[type="number"],
.cart-items__table input[name*="quantity"],
.cart-page input[type="number"] {
  font-family: var(--purli-body) !important;
  font-weight: 600 !important;
  color: var(--purli-blue) !important;
  border: 2px solid rgba(3, 65, 241, 0.25) !important;
  border-radius: 10px !important;
  background: var(--purli-white) !important;
}

/* Remove / minus buttons */
.cart-items__table button,
.cart-page [class*="remove"] {
  font-family: var(--purli-body) !important;
  color: var(--purli-blue) !important;
}

/* Summary panel — quieter treatment: cream fill, no border, no
   offset shadow. Subtle top border separator keeps it visually
   distinct without screaming. */
.cart-page__summary,
[class*="cart-summary"] {
  background: var(--purli-buttermilk) !important;
  border: none !important;
  border-radius: var(--purli-radius-sm) !important;
  box-shadow: none !important;
  padding: clamp(20px, 3vw, 32px) !important;
}

.cart-page__summary [class*="total"],
.cart-page__summary [class*="subtotal"] {
  font-family: var(--purli-display) !important;
  color: var(--purli-blue) !important;
  font-weight: 700 !important;
}

/* Checkout button: Purli Blue pill with cream text — bg + text mirror
   the header pill logo lockup (blue logo on cream/buttermilk field).
   Dwell wraps the label in <span class="button-text">, which has its
   own color rule — must override the span too. */
.cart-page button[name="checkout"],
.cart-page button[type="submit"],
.cart-page [class*="checkout-button"],
.cart-page .cart__checkout-button,
.cart-page__summary button {
  background: var(--purli-blue) !important;
  color: var(--purli-buttermilk) !important;
  font-family: var(--purli-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 16px 28px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 160ms ease !important;
}
.cart-page button[name="checkout"] .button-text,
.cart-page .cart__checkout-button .button-text,
.cart-page [class*="checkout-button"] span,
.cart-page__summary button span {
  color: var(--purli-buttermilk) !important;
  font-family: var(--purli-display) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.cart-page button[name="checkout"]:hover,
.cart-page__summary button:hover {
  background: var(--purli-blue) !important;
}
.cart-page button[name="checkout"]:hover .button-text,
.cart-page .cart__checkout-button:hover .button-text {
  color: var(--purli-buttermilk) !important;
}

/* Empty cart "Continue shopping" button — same pill treatment as
   Checkout so the cart's two buttons read as one family. */
.cart-items__empty-button,
.cart-page--empty .button {
  display: inline-block !important;
  background: var(--purli-blue) !important;
  color: var(--purli-buttermilk) !important;
  font-family: var(--purli-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 14px 32px !important;
  text-decoration: none !important;
}

/* Cart item images — soft rounded corners only, no border. */
.cart-items__media img,
.cart-items img {
  border-radius: var(--purli-radius-sm);
}

/* Empty cart message */
.cart-page--empty p,
.cart-page--empty [class*="empty"] {
  font-family: var(--purli-display) !important;
  color: var(--purli-blue) !important;
  font-size: 1.25rem !important;
}

/* ============================================================
   ANNOUNCEMENT BAR — slide height + white text (2026-06-05)
   Slides were collapsing to ~12px inside the 42px bar because the
   text-block markup that Dwell/Horizon emits doesn't natively set a
   min-height or vertical centering on .announcement-bar__slide. Force
   each slide to fill the bar with centered text, and force pure white
   text on every slide regardless of per-block typography settings.
   ============================================================ */
.announcement-bar__slider {
  min-height: 1.4em !important;
  align-items: center !important;
}
.announcement-bar__slides {
  align-items: center !important;
  align-self: center !important;
}
.announcement-bar__slide {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.4 !important;
  min-height: 1.4em !important;
  padding-block: 2px !important;
}
.announcement-bar__slide .announcement-bar__text,
.announcement-bar__slide p {
  margin: 0 !important;
  line-height: 1.4 !important;
}
.announcement-bar,
.announcement-bar__slide,
.announcement-bar__slide *,
.announcement-bar__text,
.announcement-bar__text * {
  color: #FFFFFF !important;
}

/* ============================================================
   HERO CTA — "Shop Everything" button (homepage)
   The button's base styles live inline on the anchor in
   sections/purli-home.liquid; this rule adds the hover color
   swap that inline styles can't express on their own.
   ============================================================ */
.purli-hero-cta:hover,
.purli-hero-cta:focus-visible {
  color: var(--purli-buttermilk) !important;
}

/* ============================================================
   BRAND STORY — Maupets-style two-column, stack on mobile
   ============================================================ */
@media (max-width: 1024px) {
  .purli-brand-story__inner {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .purli-brand-story__title,
  .purli-brand-story__body {
    width: 100% !important;
  }
  .purli-brand-story__title h2 {
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  .purli-brand-story {
    padding-block: 64px !important;
  }
}

/* ============================================================
   PURLI HOMEPAGE — DESIGN SYSTEM TOKENS
   ============================================================ */
:root {
  --purli-section-pad-y: clamp(64px, 9vw, 128px);
  --purli-section-pad-x: clamp(20px, 5vw, 64px);
  --purli-container: 1280px;
  --purli-container-narrow: 960px;
  --purli-container-text: 640px;
  --purli-radius-card: 32px;
  --purli-radius-card-lg: 40px;
  --purli-radius-pill: 999px;
  --purli-divider: rgba(3, 65, 241, 0.08);
}

/* Section base */
.purli-section {
  padding-block: var(--purli-section-pad-y);
  padding-inline: var(--purli-section-pad-x);
}
.purli-section--white { background: #FFFFFF; }
.purli-section--cream { background: var(--purli-buttermilk); }
.purli-section--buttermilk { background: var(--purli-buttermilk); }

.purli-container       { max-width: var(--purli-container);        margin-inline: auto; }
.purli-container-narrow{ max-width: var(--purli-container-narrow); margin-inline: auto; }
.purli-container-text  { max-width: var(--purli-container-text);   margin-inline: auto; }

/* Typography utilities */
.purli-eyebrow {
  font-family: var(--purli-body);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--purli-blue);
  margin: 0 0 14px 0;
}
.purli-h2 {
  font-family: var(--purli-display);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 600;
  color: var(--purli-blue);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.purli-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.purli-body-copy {
  font-family: var(--purli-body);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
  color: var(--purli-blue);
  font-weight: 400;
  max-width: var(--purli-container-text);
  margin: 0;
}

/* Pill button */
.purli-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--purli-blue);
  color: #FFFFFF;
  font-family: var(--purli-body);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 16px 34px;
  border-radius: var(--purli-radius-pill);
  text-decoration: none;
  border: 1.5px solid var(--purli-blue);
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.purli-pill:hover, .purli-pill:focus-visible {
  color: var(--purli-buttermilk);
}
.purli-pill--ghost {
  background: transparent;
  color: var(--purli-blue);
}
.purli-pill--ghost:hover, .purli-pill--ghost:focus-visible {
  background: var(--purli-blue);
  color: #FFFFFF;
}
.purli-pill--sm {
  font-size: 11px;
  padding: 12px 24px;
  letter-spacing: 1.6px;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.purli-faq__item summary::-webkit-details-marker { display: none; }
.purli-faq__item[open] .purli-faq__icon { transform: rotate(45deg); }
.purli-faq__item .purli-faq__icon {
  display: inline-block;
  transition: transform .2s ease;
}

/* ============================================================
   PURLI HOMEPAGE — MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width: 900px) {
  .purli-newsletter__card {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .purli-bestsellers__grid {
    grid-template-columns: 1fr !important;
  }
  .purli-ugc__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .purli-ugc__card[style*="margin-top"] {
    margin-top: 0 !important;
  }
}
@media (max-width: 640px) {
  .purli-newsletter__form {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 24px !important;
    padding: 8px !important;
  }
  .purli-newsletter__form input[type="email"] {
    text-align: center !important;
  }
  .purli-cat__card {
    flex: 0 0 80% !important;
    min-width: 0 !important;
  }
}



/* ============================================================
   FAQ — repeating buttermilk paw+sparkle pattern on blue
   ============================================================ */
.purli-faq-bg,
.purli-paw-bg {
  background-color: var(--purli-blue) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%23FBE8D4' fill-opacity='0.11'><circle cx='32' cy='50' r='5.5'/><ellipse cx='21' cy='39' rx='3' ry='4'/><ellipse cx='32' cy='33' rx='3' ry='4'/><ellipse cx='43' cy='39' rx='3' ry='4'/><path d='M135 75 l3 8 l8 2 l-8 2 l-3 8 l-3 -8 l-8 -2 l8 -2 z'/><circle cx='160' cy='38' r='3'/><ellipse cx='154' cy='31' rx='1.8' ry='2.4'/><ellipse cx='160' cy='27' rx='1.8' ry='2.4'/><ellipse cx='166' cy='31' rx='1.8' ry='2.4'/><circle cx='48' cy='160' r='2.5'/><path d='M90 165 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 l5 -2 z'/><circle cx='170' cy='145' r='3.5'/><circle cx='110' cy='30' r='2'/></g></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ============================================================
   FAQ — premium dividers with diamond ornaments
   ============================================================ */
.purli-faq__item {
  position: relative;
  border-color: rgba(3, 65, 241, 0.18) !important;
  padding-block: clamp(20px, 2vw, 28px) !important;
}
.purli-faq__item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--purli-buttermilk);
  border: 1.5px solid rgba(3, 65, 241, 0.45);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.purli-faq__item:last-of-type::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--purli-buttermilk);
  border: 1.5px solid rgba(3, 65, 241, 0.45);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

/* ============================================================
   UGC — auto-scrolling marquee gallery (no arrows)
   ============================================================ */
.purli-ugc__marquee {
  position: relative;
  overflow: visible;
  padding-block-start: 18px;
  padding-block-end: 60px;
  /* Horizontal clip via clip-path so the wider-than-viewport track is
     contained sideways, while top/bottom stay unclipped so hover halos
     can extend into the section padding. CSS computes
     `overflow-x: hidden; overflow-y: visible` to `auto` on the visible
     axis, which still clips — clip-path avoids that quirk. */
  clip-path: inset(-200px 0px -200px 0px);
}
/* Side-fade overlays replace the old mask-image. mask-image confines
   rendering to the element's box and was clipping the hover halo
   vertically; pseudo-element gradients sit on top of the marquee, give
   the same edge-fade look, and let halos extend up/down freely. */
.purli-ugc__marquee::before,
.purli-ugc__marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6%;
  pointer-events: none;
  z-index: 3;
}
.purli-ugc__marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--purli-buttermilk), rgba(251, 232, 212, 0));
}
.purli-ugc__marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--purli-buttermilk), rgba(251, 232, 212, 0));
}
.purli-ugc__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-block: 12px;
  animation: purli-ugc-scroll 90s linear infinite;
}
.purli-ugc__card {
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.purli-ugc__card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 0 50px 10px rgba(3, 65, 241, 0.55),
    0 0 26px 5px rgba(3, 65, 241, 0.48),
    0 -10px 24px 3px rgba(3, 65, 241, 0.32),
    0 26px 48px -6px rgba(3, 65, 241, 0.52),
    0 4px 10px rgba(0, 0, 0, 0.12);
  z-index: 2;
  position: relative;
}
@keyframes purli-ugc-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 8px), 0, 0); }
}

/* Review card — buttermilk surface, blue border + glow, image on top */
.purli-ugc__card {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background: var(--purli-buttermilk);
  border-radius: 22px;
  overflow: hidden;
  border: 2.5px solid var(--purli-blue);
  box-shadow:
    0 0 24px 2px rgba(3, 65, 241, 0.22),
    0 0 14px 1px rgba(3, 65, 241, 0.18),
    0 -4px 12px 0 rgba(3, 65, 241, 0.10),
    0 14px 28px -6px rgba(3, 65, 241, 0.25),
    0 6px 14px -3px rgba(3, 65, 241, 0.18),
    0 2px 5px rgba(0, 0, 0, 0.07);
}
.purli-ugc__img-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--purli-buttermilk);
}
.purli-ugc__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.purli-ugc__body {
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--purli-buttermilk);
  flex: 1;
}
.purli-ugc__quote {
  font-family: var(--purli-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--purli-blue);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
}
.purli-ugc__meta {
  font-family: var(--purli-body);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--purli-buttermilk);
  background: var(--purli-blue);
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  opacity: 1;
  white-space: nowrap;
}
.purli-ugc__meta strong {
  font-weight: 800;
  opacity: 1;
}

@media (max-width: 640px) {
  .purli-ugc__card { flex: 0 0 220px; }
  /* Slower scroll on phones — desktop is 90s, was 65s on mobile (faster
     because cards were narrower). User requested a calmer feel on mobile. */
  .purli-ugc__track { animation-duration: 130s; }
}
@media (prefers-reduced-motion: reduce) {
  .purli-ugc__track { animation: none; transform: none; }
  .purli-ugc__marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .purli-ugc__card { scroll-snap-align: start; }
}

/* ============================================================
   COLLECTION CAROUSEL — arrow hover invert (matches UGC arrows)
   ============================================================ */
.purli-cat__prev:hover,
.purli-cat__next:hover {
  background: var(--purli-buttermilk) !important;
  color: var(--purli-blue) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

/* ============================================================
   FAQ — PREMIUM REBUILD (badge icons, circular toggle, hover/open tint, height animation)
   ============================================================ */
/* Kill prior diamond ornaments + spacing */
.purli-faq__item::before,
.purli-faq__item:last-of-type::after { display: none !important; }
.purli-faq__item {
  border-color: rgba(3, 65, 241, 0.10) !important;
  border-radius: 14px;
  padding-block: 0 !important;
  margin: 0;
  transition: background .2s ease;
}
.purli-faq__item + .purli-faq__item { margin-top: 0; }
.purli-faq__item summary {
  padding: 12px 12px !important;
  border-radius: 12px;
}
.purli-faq__item:hover { background: rgba(3, 65, 241, 0.10); }
.purli-faq__item[open] { background: rgba(3, 65, 241, 0.14); }

/* Left icon — circular badge */
.purli-faq__row-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(3, 65, 241, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--purli-blue);
  transition: background .2s ease, color .2s ease;
}
.purli-faq__item[open] .purli-faq__row-icon {
  background: var(--purli-blue);
  color: var(--purli-buttermilk);
}

/* Right toggle — circular outlined + that rotates to × */
.purli-faq__toggle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(3, 65, 241, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--purli-blue);
  background: transparent;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background .2s ease, border-color .2s ease, color .2s ease;
}
.purli-faq__item:hover .purli-faq__toggle { border-color: var(--purli-blue); }
.purli-faq__item[open] .purli-faq__toggle {
  background: var(--purli-blue);
  border-color: var(--purli-blue);
  color: var(--purli-buttermilk);
  transform: rotate(45deg);
}

/* Smooth height animation (Chrome 134+ / Firefox-with-flag; older browsers fall back to instant) */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
}
.purli-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .35s cubic-bezier(.4, 0, .2, 1);
}
.purli-faq__item[open]::details-content { block-size: auto; }

/* Indent the answer body so it aligns with question text */
.purli-faq__item > p {
  padding: 0 16px 18px 72px !important;
  margin: 0 !important;
}

/* ============================================================
   WHY PURLI — premium card-button tabs (parallel to FAQ rebuild)
   ============================================================ */
.purli-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.purli-tab__btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: clamp(20px, 2.2vw, 28px) 14px !important;
  background: transparent !important;
  border: 1.5px solid rgba(3, 65, 241, 0.18) !important;
  border-radius: 20px !important;
  color: var(--purli-blue) !important;
  cursor: pointer !important;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease !important;
  font-family: var(--purli-body) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  text-align: center !important;
  max-width: none !important;
  margin: 0 !important;
}
.purli-tab__btn:hover {
  border-color: var(--purli-blue) !important;
  transform: translateY(-2px) !important;
}
.purli-tab__btn--active {
  background: var(--purli-blue) !important;
  border-color: var(--purli-blue) !important;
  color: var(--purli-buttermilk) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px -10px rgba(3, 65, 241, 0.4);
}

.purli-tab__btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(3, 65, 241, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purli-blue);
  transition: background .25s ease, color .25s ease;
  flex-shrink: 0;
}
.purli-tab__btn--active .purli-tab__btn-icon {
  background: rgba(255, 248, 236, 0.16);
  color: var(--purli-buttermilk);
}

.purli-tab__btn-label {
  display: inline-block;
  line-height: 1;
}

/* Fade-in animation on the visible tab panel */
.purli-tab__panel {
  animation: purli-tab-fade .4s ease both;
}
@keyframes purli-tab-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .purli-tabs-nav { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY PURLI — three pillar cards
   (all info visible, no tab toggle; contrasts FAQ's single-card accordion)
   ============================================================ */
.purli-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.purli-pillar {
  background: var(--purli-buttermilk);
  border-radius: var(--purli-radius-card-lg);
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}
.purli-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.22);
}

.purli-pillar__badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(3, 65, 241, 0.10);
  color: var(--purli-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.purli-pillar__heading {
  font-family: var(--purli-display);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 600;
  color: var(--purli-blue);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.purli-pillar__body {
  font-family: var(--purli-body);
  font-size: clamp(15px, 1vw, 17px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--purli-blue);
  margin: 0;
}

@media (max-width: 900px) {
  .purli-pillars { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   BRAND STORY — repeating buttermilk cat-icon pattern on blue
   ============================================================ */
.purli-cat-icons-bg {
  background-color: var(--purli-blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'><g fill='%23FBE8D4' fill-opacity='0.13'><g transform='translate(60 75) rotate(-12)'><circle cx='0' cy='8' r='7'/><ellipse cx='-9' cy='-5' rx='2.8' ry='3.8'/><ellipse cx='0' cy='-9' rx='2.8' ry='3.8'/><ellipse cx='9' cy='-5' rx='2.8' ry='3.8'/></g><g transform='translate(230 55) rotate(14)'><path d='M0 18 C-10 11, -12 3, -7 -1 C-4 -4, 0 -2, 0 1 C0 -2, 4 -4, 7 -1 C12 3, 10 11, 0 18 Z'/></g><g transform='translate(370 115)'><path d='M-12 4 L-14 -4 L-7 0 Z'/><path d='M12 4 L14 -4 L7 0 Z'/><circle cx='0' cy='8' r='9'/><circle cx='-3' cy='6' r='1'/><circle cx='3' cy='6' r='1'/></g><g transform='translate(115 205) rotate(-8)'><path d='M-18 0 Q0 -12, 18 0 Q0 12, -18 0 Z M15 -3 L24 0 L15 3 Z'/></g><g transform='translate(300 225) rotate(20)'><path d='M0 -12 L3 -4 L11 0 L3 4 L0 12 L-3 4 L-11 0 L-3 -4 Z'/></g><g transform='translate(405 320) rotate(25)'><circle cx='0' cy='5' r='4.5'/><ellipse cx='-6' cy='-3' rx='1.8' ry='2.5'/><ellipse cx='0' cy='-6' rx='1.8' ry='2.5'/><ellipse cx='6' cy='-3' rx='1.8' ry='2.5'/></g><g transform='translate(170 345) rotate(-15)'><path d='M-8 4 L-10 -3 L-4 0 Z'/><path d='M8 4 L10 -3 L4 0 Z'/><circle cx='0' cy='6' r='6.5'/></g><g transform='translate(65 380)'><path d='M0 9 C-7 5, -8 0, -4 -2 C-2 -3, 0 -2, 0 -1 C0 -2, 2 -3, 4 -2 C8 0, 7 5, 0 9 Z'/></g><g transform='translate(320 400) rotate(45)'><path d='M0 -8 L2 -3 L7 0 L2 3 L0 8 L-2 3 L-7 0 L-2 -3 Z'/></g><circle cx='250' cy='150' r='2.2'/><circle cx='85' cy='150' r='1.6'/><circle cx='425' cy='195' r='2'/><circle cx='205' cy='285' r='1.8'/><circle cx='30' cy='265' r='2.4'/><circle cx='390' cy='440' r='1.5'/><circle cx='135' cy='450' r='2'/></g></svg>");
  background-repeat: repeat;
  background-size: 460px 460px;
}

/* ============================================================
   BRAND STORY — split layout (text | video) mobile stack
   ============================================================ */
@media (max-width: 900px) {
  .purli-brand-story__split {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .purli-brand-story__video-side {
    aspect-ratio: 16/9;
    min-height: 280px;
  }
}

/* ============================================================
   WHY PURLI — vertical numbered manifesto (editorial magazine spread)
   ============================================================ */
.purli-manifesto {
  display: flex;
  flex-direction: column;
}
.purli-manifesto__item {
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 180px) 1fr;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
  padding: clamp(36px, 4vw, 52px) 0;
  border-top: 1px solid rgba(251, 232, 212, 0.18);
}
.purli-manifesto__item:last-child {
  border-bottom: 1px solid rgba(251, 232, 212, 0.18);
}
.purli-manifesto__num {
  font-family: var(--purli-display);
  font-size: clamp(56px, 8vw, 116px);
  font-weight: 500;
  font-style: italic;
  color: var(--purli-buttermilk);
  line-height: 0.85;
  letter-spacing: -0.05em;
  display: inline-block;
}
.purli-manifesto__title {
  font-family: var(--purli-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  color: var(--purli-buttermilk);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px 0;
}
.purli-manifesto__body {
  font-family: var(--purli-body);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--purli-buttermilk);
  opacity: 0.88;
  margin: 0;
  max-width: 560px;
}

@media (max-width: 640px) {
  .purli-manifesto__item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .purli-manifesto__num { font-size: 56px; }
}

/* ============================================================
   WHY PURLI — newspaper-feature columns with hairline dividers
   ============================================================ */
.purli-why-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.purli-why-col {
  padding: 0 clamp(20px, 3vw, 48px);
  border-left: 1px solid rgba(3, 65, 241, 0.18);
}
.purli-why-col:first-child {
  padding-left: 0;
  border-left: none;
}
.purli-why-col:last-child {
  padding-right: 0;
}
.purli-why-col__label {
  font-family: var(--purli-body);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--purli-blue);
  opacity: 0.7;
  margin: 0 0 20px 0;
}
.purli-why-col__lead {
  font-family: var(--purli-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--purli-blue);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 18px 0;
}
.purli-why-col__body {
  font-family: var(--purli-body);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--purli-blue);
  opacity: 0.82;
  margin: 0;
}

@media (max-width: 900px) {
  .purli-why-columns {
    grid-template-columns: 1fr;
  }
  .purli-why-col {
    padding: 28px 0;
    border-left: none;
    border-top: 1px solid rgba(3, 65, 241, 0.18);
  }
  .purli-why-col:first-child {
    border-top: none;
    padding-top: 0;
  }
  .purli-why-col:last-child {
    padding-bottom: 0;
  }
}

/* ============================================================
   PROMISE — trio of stamps (circle / hexagon / squircle)
   ============================================================ */
.purli-promise-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
}
.purli-promise-stamp {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.purli-promise-stamp__shape {
  width: 100px;
  height: 100px;
  color: var(--purli-buttermilk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.purli-promise-stamp__shape svg { display: block; }

.purli-promise-stamp:nth-child(1):hover .purli-promise-stamp__shape { transform: rotate(-8deg) scale(1.06); }
.purli-promise-stamp:nth-child(2):hover .purli-promise-stamp__shape { transform: rotate(-4deg) scale(1.06); }
.purli-promise-stamp:nth-child(3):hover .purli-promise-stamp__shape { transform: rotate(8deg) scale(1.06); }

.purli-promise-stamp__label {
  font-family: var(--purli-body);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--purli-buttermilk);
  margin: 0;
}
.purli-promise-stamp__body {
  font-family: var(--purli-body);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--purli-buttermilk);
  opacity: 0.88;
  margin: 0;
  max-width: 280px;
}

@media (max-width: 768px) {
  .purli-promise-trio { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   PROMISE — compact trust strip background (paws + ears + whiskers)
   ============================================================ */
.purli-cat-bg-mini {
  background-color: var(--purli-blue);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'><g opacity='0.13' fill='%23FBE8D4' stroke='%23FBE8D4' stroke-linecap='round' stroke-linejoin='round'><path transform='translate(60 18)' d='M0 -5 L1.2 -1.5 L5 0 L1.2 1.5 L0 5 L-1.2 1.5 L-5 0 L-1.2 -1.5 Z' stroke='none'/><path transform='translate(180 8) rotate(-8)' d='M0 7 C-5 3 -7 0 -5 -3 C-3 -5 0 -3 0 -1 C0 -3 3 -5 5 -3 C7 0 5 3 0 7 Z' stroke='none'/><path transform='translate(310 28)' d='M-7 0 Q0 -3.2 7 0 Q0 3.2 -7 0 Z' stroke='none'/><g transform='translate(425 6) rotate(15)' stroke='none'><circle cx='0' cy='3' r='2.5'/><ellipse cx='-4' cy='-2' rx='1.2' ry='1.6'/><ellipse cx='0' cy='-4' rx='1.2' ry='1.6'/><ellipse cx='4' cy='-2' rx='1.2' ry='1.6'/></g><g transform='translate(110 95) rotate(-15)' stroke='none'><circle cx='0' cy='6' r='5'/><ellipse cx='-7' cy='-4' rx='2.2' ry='3'/><ellipse cx='0' cy='-7' rx='2.2' ry='3'/><ellipse cx='7' cy='-4' rx='2.2' ry='3'/></g><g transform='translate(245 110) rotate(5)' stroke='none'><rect x='0' y='0' width='18' height='1.5' rx='0.7'/><rect x='0' y='4' width='22' height='1.5' rx='0.7'/><rect x='0' y='8' width='18' height='1.5' rx='0.7'/></g><g transform='translate(375 95) rotate(-8)'><circle cx='0' cy='0' r='5' stroke='none'/><circle cx='-4' cy='-3' r='2' stroke='none'/><circle cx='4' cy='-3' r='2' stroke='none'/><path d='M4 3 Q9 5 10 1' fill='none' stroke-width='1.4'/></g><path transform='translate(50 140)' d='M-5 0 Q0 -2.2 5 0 Q0 2.2 -5 0 Z' stroke='none'/><g transform='translate(180 200) rotate(10)' stroke='none'><path d='M-5 -3 Q-5 -8 0 -8 Q5 -8 5 -3 L5 3 L-5 3 Z'/><circle cx='0' cy='6' r='1.5'/></g><g transform='translate(320 220) rotate(25)' stroke='none'><circle cx='0' cy='3' r='2.8'/><ellipse cx='-4' cy='-2' rx='1.3' ry='1.8'/><ellipse cx='0' cy='-4' rx='1.3' ry='1.8'/><ellipse cx='4' cy='-2' rx='1.3' ry='1.8'/></g><g transform='translate(60 240) rotate(-12)' stroke='none'><rect x='0' y='0' width='14' height='1.2' rx='0.6'/><rect x='0' y='3' width='18' height='1.2' rx='0.6'/><rect x='0' y='6' width='14' height='1.2' rx='0.6'/></g><path transform='translate(410 200) rotate(8)' d='M0 5 C-3.5 2 -5 0 -3.5 -2 C-2 -3.5 0 -2 0 -0.5 C0 -2 2 -3.5 3.5 -2 C5 0 3.5 2 0 5 Z' stroke='none'/><g transform='translate(130 290) rotate(15)'><circle cx='0' cy='0' r='4.5' stroke='none'/><circle cx='-3.5' cy='-2.5' r='1.7' stroke='none'/><circle cx='3.5' cy='-2.5' r='1.7' stroke='none'/><path d='M3.5 2.5 Q8 4 9 1' fill='none' stroke-width='1.2'/></g><path transform='translate(260 300)' d='M-7 0 Q0 -3.2 7 0 Q0 3.2 -7 0 Z' stroke='none'/><path transform='translate(395 320) rotate(20)' d='M0 -6 L1.5 -1.8 L6 0 L1.5 1.8 L0 6 L-1.5 1.8 L-6 0 L-1.5 -1.8 Z' stroke='none'/><g transform='translate(40 345) rotate(-10)' stroke='none'><path d='M-4 -2.5 Q-4 -6.5 0 -6.5 Q4 -6.5 4 -2.5 L4 2 L-4 2 Z'/><circle cx='0' cy='4.5' r='1.2'/></g><g transform='translate(215 355) rotate(5)' stroke='none'><circle cx='0' cy='5' r='4'/><ellipse cx='-5' cy='-2.5' rx='1.7' ry='2.3'/><ellipse cx='0' cy='-5' rx='1.7' ry='2.3'/><ellipse cx='5' cy='-2.5' rx='1.7' ry='2.3'/></g><g transform='translate(90 415) rotate(8)' stroke='none'><rect x='0' y='0' width='16' height='1.4' rx='0.7'/><rect x='0' y='4' width='20' height='1.4' rx='0.7'/><rect x='0' y='8' width='16' height='1.4' rx='0.7'/></g><path transform='translate(245 430) rotate(-10)' d='M0 6 C-5 2 -7 -1 -5 -3 C-3 -5 0 -3 0 -1 C0 -3 3 -5 5 -3 C7 -1 5 2 0 6 Z' stroke='none'/><g transform='translate(345 405) rotate(-20)' stroke='none'><circle cx='0' cy='6' r='5'/><ellipse cx='-7' cy='-4' rx='2.2' ry='3'/><ellipse cx='0' cy='-7' rx='2.2' ry='3'/><ellipse cx='7' cy='-4' rx='2.2' ry='3'/></g><path transform='translate(432 422) rotate(30)' d='M0 -5 L1.2 -1.5 L5 0 L1.2 1.5 L0 5 L-1.2 1.5 L-5 0 L-1.2 -1.5 Z' stroke='none'/><circle cx='420' cy='100' r='1.5' stroke='none'/><circle cx='15' cy='200' r='1.6' stroke='none'/><circle cx='350' cy='150' r='1.4' stroke='none'/><circle cx='275' cy='75' r='1.6' stroke='none'/><circle cx='190' cy='430' r='1.5' stroke='none'/></g></svg>");
  background-repeat: repeat;
  background-size: 440px 440px;
}

.purli-promise-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.purli-promise-mini__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--purli-buttermilk);
  font-family: var(--purli-body);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
.purli-promise-mini__item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--purli-buttermilk);
}
.purli-promise-mini__divider {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purli-buttermilk);
  opacity: 0.5;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .purli-promise-mini { flex-direction: column; gap: 18px; }
  .purli-promise-mini__divider { display: none; }
}

/* ============================================================
   SHOP THE COLLECTION — blue cat motifs on buttermilk (mirror of mini bg)
   ============================================================ */
.purli-cat-bg-buttermilk {
  background-color: var(--purli-buttermilk);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='%230341F1' fill-opacity='0.07'><circle cx='45' cy='72' r='5.5'/><ellipse cx='36' cy='60' rx='2.2' ry='3'/><ellipse cx='45' cy='55' rx='2.2' ry='3'/><ellipse cx='54' cy='60' rx='2.2' ry='3'/><path d='M150 52 L156 38 L162 52 Z'/><path d='M170 52 L176 38 L182 52 Z'/><rect x='245' y='135' width='18' height='1.6' rx='0.8'/><rect x='245' y='142' width='22' height='1.6' rx='0.8'/><rect x='245' y='149' width='18' height='1.6' rx='0.8'/><circle cx='225' cy='235' r='3.8'/><ellipse cx='219' cy='226' rx='1.5' ry='2.1'/><ellipse cx='225' cy='222' rx='1.5' ry='2.1'/><ellipse cx='231' cy='226' rx='1.5' ry='2.1'/><path d='M70 215 L75 202 L80 215 Z'/><path d='M88 215 L93 202 L98 215 Z'/><rect x='128' y='240' width='14' height='1.4' rx='0.7'/><rect x='128' y='246' width='18' height='1.4' rx='0.7'/><rect x='128' y='252' width='14' height='1.4' rx='0.7'/><path d='M195 110 L199 102 L203 110 Z'/><path d='M209 110 L213 102 L217 110 Z'/><circle cx='105' cy='170' r='2'/><circle cx='270' cy='80' r='1.6'/><circle cx='30' cy='250' r='1.8'/><circle cx='285' cy='285' r='1.6'/><circle cx='160' cy='180' r='1.4'/><circle cx='70' cy='130' r='1.6'/></g></svg>");
  background-repeat: repeat;
  background-size: 300px 300px;
}

/* ============================================================
   COLLECTION CARDS — floating buttermilk content panel + blue glow shadow
   ============================================================ */
.purli-cat__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 3vw, 48px);
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 0;
}
.purli-cat__grid > .purli-cat__card {
  flex: 0 1 calc(33.333% - 16px);
  min-width: 280px;
  max-width: calc(33.333% - 16px);
}
@media (max-width: 900px) {
  .purli-cat__grid > .purli-cat__card {
    flex-basis: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}
@media (max-width: 600px) {
  .purli-cat__grid > .purli-cat__card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.purli-cat__card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  background: var(--purli-blue);
  isolation: isolate;
  box-shadow:
    0 0 38px 6px rgba(3, 65, 241, 0.38),
    0 0 20px 2px rgba(3, 65, 241, 0.32),
    0 -6px 18px 0 rgba(3, 65, 241, 0.16),
    0 26px 48px -8px rgba(3, 65, 241, 0.42),
    0 10px 20px -4px rgba(3, 65, 241, 0.30),
    0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s ease;
}
.purli-cat__card:hover {
  /* Card stays in place — only the blue shadow intensifies on hover */
  box-shadow:
    0 0 72px 14px rgba(3, 65, 241, 0.62),
    0 0 36px 6px rgba(3, 65, 241, 0.55),
    0 -14px 32px 4px rgba(3, 65, 241, 0.38),
    0 36px 64px -8px rgba(3, 65, 241, 0.60),
    0 4px 10px rgba(0, 0, 0, 0.14);
}

.purli-cat__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.purli-cat__card:hover .purli-cat__card-img { transform: scale(1.08); }

/* Beds card — shift image up so the title/CTA sit on the dead space below the bed */
.purli-cat__card[data-card-handle="couches-beds"] .purli-cat__card-img {
  object-position: center 100%;
}

/* Scratchers card — gentle zoom anchored at the top so the cat tree's peak stays visible */
.purli-cat__card[data-card-handle="scratchers"] .purli-cat__card-img {
  transform: scale(1.08);
  transform-origin: center top;
}
.purli-cat__card[data-card-handle="scratchers"]:hover .purli-cat__card-img {
  transform: scale(1.16);
}

.purli-cat__card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.05) 28%, transparent 50%);
  pointer-events: none;
}

.purli-cat__card-content {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  bottom: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.purli-cat__card-title {
  font-family: var(--purli-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  color: var(--purli-buttermilk);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.purli-cat__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--purli-blue);
  color: var(--purli-buttermilk);
  padding: 13px 23px;
  border-radius: 999px;
  border: none;
  font-family: var(--purli-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
/* Button color flip only when the button itself is hovered, not the
   whole card. Arrow nudge also tied to the button's own hover state. */
.purli-cat__card-cta:hover {
  background: var(--purli-buttermilk);
  color: var(--purli-blue);
}
.purli-cat__card-cta svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.purli-cat__card-cta:hover svg { transform: translateX(3px); }

/* Text inside the View Products pill pops up a touch on hover, same
   feel as the newsletter Subscribe button */
.purli-cat__card-cta-text {
  display: inline-block;
  transition: transform .25s ease;
}
.purli-cat__card-cta:hover .purli-cat__card-cta-text {
  transform: translateY(-1.5px);
}


/* ============================================================
   BEST SELLERS — product cards (matches Our Collections vibe)
   ============================================================ */
.purli-product__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 0;
}

.purli-product__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease;
  border-radius: 32px;
  overflow: hidden;
  background: var(--purli-blue);
  isolation: isolate;
  box-shadow:
    0 0 32px 4px rgba(3, 65, 241, 0.26),
    0 0 18px 1px rgba(3, 65, 241, 0.22),
    0 -5px 16px 0 rgba(3, 65, 241, 0.10),
    0 22px 42px -8px rgba(3, 65, 241, 0.30),
    0 8px 16px -4px rgba(3, 65, 241, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.purli-product__card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 0 72px 14px rgba(3, 65, 241, 0.62),
    0 0 36px 6px rgba(3, 65, 241, 0.55),
    0 -14px 32px 4px rgba(3, 65, 241, 0.38),
    0 36px 64px -8px rgba(3, 65, 241, 0.60),
    0 4px 10px rgba(0, 0, 0, 0.14);
}

.purli-product__imagewrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--purli-blue);
  border: 1px solid var(--purli-blue);
}
.purli-product__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.purli-product__card:hover .purli-product__img { transform: scale(1.06); }

.purli-product__info {
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background: var(--purli-blue);
  flex: 1;
}

.purli-product__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

.purli-product__swatches {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.purli-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(251, 232, 212, 0.4);
  box-shadow: inset 0 0 0 1.5px rgba(3, 65, 241, 0.55);
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.purli-swatch:hover {
  transform: scale(1.18);
  border-color: var(--purli-buttermilk);
  box-shadow: inset 0 0 0 1.5px rgba(3, 65, 241, 0.65), 0 4px 10px -2px rgba(0, 0, 0, 0.35);
}

.purli-product__title {
  font-family: var(--purli-display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--purli-buttermilk);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1;
}

.purli-product__price {
  font-family: var(--purli-display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--purli-buttermilk);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}

.purli-product__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--purli-buttermilk);
  color: var(--purli-blue);
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--purli-buttermilk);
  font-family: var(--purli-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.purli-product__card:hover .purli-product__cta {
  background: var(--purli-buttermilk);
  color: var(--purli-blue);
  border-color: var(--purli-buttermilk);
}
.purli-product__cta svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.purli-product__card:hover .purli-product__cta svg { transform: translateX(3px); }

@media (max-width: 900px) {
  .purli-product__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .purli-product__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BEST SELLERS — master "Shop All Products" CTA below grid
   ============================================================ */
.purli-product__master-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--purli-blue);
  color: var(--purli-buttermilk);
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  font-family: var(--purli-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(3, 65, 241, 0.55), 0 4px 10px -2px rgba(0, 0, 0, 0.15);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}
.purli-product__master-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -12px rgba(3, 65, 241, 0.65), 0 6px 14px -3px rgba(0, 0, 0, 0.18);
}
.purli-product__master-cta svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.purli-product__master-cta:hover svg { transform: translateX(4px); }

/* ============================================================
   WHY PURLI — compact blue card with 3-pillar grid
   ============================================================ */
.purli-why__card {
  background: var(--purli-blue);
  border-radius: 32px;
  padding: clamp(28px, 3.5vw, 52px) clamp(22px, 3vw, 52px);
  max-width: 1080px;
  margin: 0 auto;
}

.purli-why__header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.purli-why__eyebrow {
  font-family: var(--purli-body);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--purli-buttermilk);
  opacity: 1;
  margin: 0 0 10px 0;
}
.purli-why__heading {
  font-family: var(--purli-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--purli-buttermilk);
  margin: 0 auto;
  max-width: 600px;
}

.purli-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.purli-why__pillar {
  padding: 0 clamp(14px, 2.4vw, 32px);
  border-left: 1px solid rgba(251, 232, 212, 0.22);
}
.purli-why__pillar:first-child {
  padding-left: 0;
  border-left: none;
}
.purli-why__pillar:last-child {
  padding-right: 0;
}
.purli-why__pillar-label {
  font-family: var(--purli-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--purli-buttermilk);
  opacity: 1;
  margin: 0 0 10px 0;
}
.purli-why__pillar-body {
  font-family: var(--purli-body);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--purli-buttermilk);
  margin: 0;
}

@media (max-width: 768px) {
  .purli-why__grid { grid-template-columns: 1fr; }
  .purli-why__pillar {
    padding: 16px 0;
    border-left: none;
    border-top: 1px solid rgba(251, 232, 212, 0.22);
  }
  .purli-why__pillar:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ============================================================
   Announcement bar — kill Horizon's bottom border so it meets
   the next element with no gap or line
   ============================================================ */
.announcement-bar {
  border-block-end: 0 !important;
  margin-block-end: 0 !important;
}

/* ============================================================
   Announcement bar — force white text on EVERY slide
   Each block sets --color via typography-style snippet; this
   wins over those inline custom property assignments.
   ============================================================ */
.announcement-bar,
.announcement-bar *,
.announcement-bar__slide,
.announcement-bar__slide *,
slideshow-slide,
slideshow-slide * {
  --color: #FFFFFF !important;
  --color-text: #FFFFFF !important;
  --color-foreground: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ============================================================
   Announcement bar — soft dark drop shadow below
   ============================================================ */
.announcement-bar {
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   COLLECTION-STYLE CARD VARIANT
   Modifier class .purli-product__card--collection turns a card into
   the new format: swatches above title, title + price stacked left,
   buttermilk Add-to-Cart + ghost View Details buttons in the action
   row. Used on homepage Best Sellers + every collection page.
   ============================================================ */

.purli-product__card--collection .purli-product__title,
.purli-product__card--collection .purli-product__title a {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif !important;
  font-size: clamp(14px, 1.1vw, 17px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.purli-product__card--collection .purli-product__price {
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  font-weight: 700 !important;
}
.purli-product__card--collection .purli-product__info {
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 16px) clamp(12px, 1.3vw, 16px) !important;
  gap: 8px !important;
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
/* Reserve consistent space for the swatch row whether or not the
   product has color variants — so cards with and without swatches
   align at the same height. ~14px swatch + a couple px breathing room. */
.purli-product__card--collection .purli-product__swatches--top {
  min-height: 18px !important;
}
/* Push the action row (ATC + View Details) to the bottom of the card
   so buttons line up across the row regardless of whether the card
   has a swatches strip above the title. */
.purli-product__card--collection .purli-product__actions {
  margin-top: auto !important;
}
/* The card itself must be a flex column so .purli-product__info can
   grow and the actions can stick to the bottom. */
.purli-product__card--collection {
  display: flex !important;
  flex-direction: column !important;
}
.purli-product__card--collection .purli-product__atc-btn,
.purli-product__card--collection .purli-product__view-btn {
  height: 34px !important;
  font-size: clamp(10.5px, 0.8vw, 12px) !important;
  padding: 0 10px !important;
}

.purli-product__card--collection .purli-product__header--stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}
.purli-product__card--collection .purli-product__header--stack .purli-product__title {
  text-align: left !important;
  margin: 0 !important;
}
.purli-product__card--collection .purli-product__header--stack .purli-product__title a {
  color: inherit !important;
  text-decoration: none !important;
}
.purli-product__card--collection .purli-product__header--stack .purli-product__title a:hover {
  text-decoration: underline !important;
}
.purli-product__card--collection .purli-product__header--stack .purli-product__price {
  text-align: left !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.purli-product__card--collection .purli-product__swatches--top {
  display: inline-flex !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.purli-product__card--collection .purli-product__swatches--top .purli-swatch {
  width: 14px !important;
  height: 14px !important;
}

/* Grid layout forces two exact 50% columns no matter what the form
   wrapper or any inherited Horizon styles do to its children. */
.purli-product__card--collection .purli-product__actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 4px !important;
}
.purli-product__card--collection .purli-product__actions > * {
  width: 100% !important;
  min-width: 0 !important;
}
.purli-product__card--collection .purli-product__actions .purli-product__atc-form > button {
  width: 100% !important;
  display: flex !important;
}
/* Form wrapping the ATC button is itself a flex item — flex: 1 makes it
   take 50% of the action row regardless of whether `display: contents`
   is honored (Horizon's color-scheme classes can sometimes override). */
.purli-product__card--collection .purli-product__atc-form {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.purli-product__card--collection .purli-product__atc-form .purli-product__atc-btn {
  width: 100% !important;
}
.purli-product__card--collection .purli-product__atc-btn,
.purli-product__card--collection .purli-product__view-btn {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: 'Fredoka', ui-rounded, system-ui, sans-serif;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.purli-product__card--collection .purli-product__atc-btn {
  background: var(--purli-buttermilk);
  color: var(--purli-blue);
  border: 1.5px solid var(--purli-buttermilk);
}
.purli-product__card--collection .purli-product__atc-btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--purli-buttermilk);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.18);
}
.purli-product__card--collection .purli-product__atc-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.purli-product__card--collection .purli-product__view-btn {
  background: transparent;
  color: var(--purli-buttermilk);
  border: 1.5px solid var(--purli-buttermilk);
}
.purli-product__card--collection .purli-product__view-btn:hover {
  transform: translateY(-1px);
  background: rgba(251, 232, 212, 0.15);
}

/* ============================================================
   SITE-WIDE MOBILE OPTIMIZATIONS
   Phones-first polish for header, about page, contact, footer.
   ============================================================ */

/* Header pill mobile styles now live in sections/purli-header.liquid
   (more complete + correct grid template areas including search). */

/* ── About page splits — stack on mobile ── */
@media (max-width: 900px) {
  .purli-about__split {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 36px) !important;
  }
  .purli-about__pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .purli-about__cats-grid {
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  .purli-about__cats-grid {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  .purli-about__pillar {
    padding: clamp(20px, 5vw, 28px) clamp(18px, 4.5vw, 26px) !important;
  }
}

/* ── Contact page — narrow padding + form stack ── */
@media (max-width: 600px) {
  .purli-contact__form {
    padding: 20px 16px !important;
  }
  .purli-contact__field-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Master CTA buttons (Shop All Products, etc.) — fit narrow screens ── */
@media (max-width: 600px) {
  .purli-product__master-cta {
    padding: 13px 22px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ── Section dividers — cap height on mobile so they don't dominate ── */
@media (max-width: 600px) {
  .purli-divider svg {
    height: clamp(24px, 6vw, 40px) !important;
  }
}

/* ── No more overflow-x: hidden on body/main ──
   Setting overflow-x: hidden on these elements implicitly clipped
   the y-axis on mobile WebKit (well-known bug), choking every
   card box-shadow on collection / homepage / PDP pages. The rails
   that used to bleed past their section now keep their bleed
   contained internally, so we no longer need this safety net. */

/* ── Image-anchor links on collection cards — keep image flush ── */
@media (max-width: 600px) {
  .purli-product__card--collection .purli-product__imagewrap {
    aspect-ratio: 1 / 1 !important;
  }
}

/* ── PDP mission section padding on phones ── */
@media (max-width: 600px) {
  .section-purli-pdp-mission {
    padding: clamp(40px, 10vw, 64px) clamp(16px, 5vw, 24px) !important;
  }
  .section-purli-pdp-mission h2 {
    font-size: clamp(22px, 7vw, 32px) !important;
  }
  .section-purli-pdp-mission p {
    font-size: 14px !important;
  }
}

/* ── PDP details + reviews — narrow padding ── */
@media (max-width: 600px) {
  .section-purli-pdp-details,
  .section-purli-pdp-reviews,
  .section-purli-pdp-more-collection {
    padding: clamp(28px, 8vw, 48px) clamp(14px, 4vw, 22px) !important;
  }
  /* Tighter top + bottom padding around More From This Collection —
     halves the space the section reserves on mobile. */
  section.purli-pdp-more-collection {
    padding-top: clamp(20px, 4vw, 32px) !important;
    padding-bottom: clamp(20px, 4vw, 32px) !important;
  }
}

/* ── More From This Collection — flex wrap with centered cards so a
   row of 1–3 (or any partial row) is horizontally centered instead
   of left-aligned with empty space on the right. */
.purli-pdp-more-collection .purli-product__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.purli-pdp-more-collection .purli-product__card {
  flex: 0 1 calc((100% - clamp(12px, 1.4vw, 18px) * 3) / 4);
  max-width: 300px;
  min-width: 0;
}
@media (max-width: 900px) {
  .purli-pdp-more-collection .purli-product__card {
    flex: 0 1 calc((100% - clamp(12px, 1.4vw, 18px) * 2) / 3);
  }
}
@media (max-width: 600px) {
  /* Fixed-width cards on the mobile horizontal-scroll rail (mirrors
     Best Sellers). Without this, the desktop flex-basis calc still
     applies and the cards stretch to weird widths that make snap-
     scroll land mid-card. */
  .purli-pdp-more-collection .purli-product__card {
    flex: 0 0 auto !important;
    width: 68vw !important;
    max-width: 280px !important;
    min-width: 0 !important;
  }
  /* Switch from a 2-up grid to a horizontal-scroll rail so the section
     takes a fraction of the vertical space. Cards become fixed-width
     so they fit side-by-side; the user swipes to see more.

     scroll-snap REMOVED — it was the source of the "rail starts
     mid-scroll" bug. Without snap, the rail honors scrollLeft = 0
     and the first card sits flush at the leftmost padding edge.

     padding-inline + matching negative margin-inline REMOVED for
     the same reason — the asymmetry of a padded scroll origin was
     letting the browser place the first card past the visible
     left edge. Cards now start at the section's natural inner
     padding (the section already pads 16px+). */
  .purli-pdp-more-collection .purli-product__grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
    margin-inline: 0 !important;
    /* Padding on all sides so the card's blue-glow box-shadow has
       room to render past the card border — without it the shadow
       on the left of the first card and below every card is
       clipped by the overflow box. */
    padding-inline: 16px !important;
    /* Defensive — kill any inherited centering / RTL / smooth-scroll
       that could land the first card mid-rail. */
    direction: ltr !important;
    text-align: left !important;
    justify-content: flex-start !important;
    scroll-behavior: auto !important;
    scroll-padding-inline-start: 0 !important;
    scroll-snap-type: none !important;
    /* Vertical room for the blue glow shadow above/below cards —
     `overflow-x: auto` clips the y-axis on most browsers even with
     overflow-y:visible, so we pad inside the rail and offset with
     a matching negative margin so the layout doesn't grow. */
    /* overflow-x: auto implicitly clips overflow-y on mobile WebKit
       even with overflow-y: visible. Bigger padding + transparent
       cards painted with extra spread gives us better odds, but the
       real fix is to NOT use overflow-x on the rail's clip box —
       instead, push the cards down INSIDE the rail and rely on the
       section's own overflow being visible. */
    padding-top: 60px !important;
    padding-bottom: 70px !important;
    margin-top: -10px !important;
    margin-bottom: -20px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  /* Section above the rail must let shadows from the rail bleed
     past its bottom edge — kill any overflow clip on the section
     and on the cards' immediate parent. */
  .purli-pdp-more-collection,
  section.purli-pdp-more-collection {
    overflow: visible !important;
  }
  /* Halve the heading → cards gap (same treatment as Best Sellers
     on the homepage). Was section-head margin-bottom ~44 + rail
     padding-top 60 − rail margin-top −10 ≈ 84px. Now ~40px. */
  .purli-pdp-more-collection .purli-section-head {
    margin-bottom: 8px !important;
  }
  .purli-pdp-more-collection .purli-product__grid {
    padding-top: 32px !important;
    margin-top: 0 !important;
  }
  .purli-pdp-more-collection .purli-product__grid::-webkit-scrollbar {
    display: none;
  }
  .purli-pdp-more-collection .purli-product__grid {
    scrollbar-width: none;
  }
  .purli-pdp-more-collection .purli-product__card {
    flex: 0 0 auto;
    width: 68vw;
    max-width: 280px;
    scroll-snap-align: start;
    /* Lighter glow with all the perimeter weight at the top and
       bottom only (no thick rim, no concentration along the
       sides — keeps the middle of the card clean). */
    box-shadow:
      0 0 32px 0 rgba(3, 65, 241, 0.38),
      0 16px 38px -4px rgba(3, 65, 241, 0.40),
      0 -10px 28px -6px rgba(3, 65, 241, 0.30) !important;
  }
  .purli-pdp-more-collection .purli-product__card:hover {
    box-shadow:
      0 0 38px 0 rgba(3, 65, 241, 0.48),
      0 20px 44px -4px rgba(3, 65, 241, 0.50),
      0 -12px 32px -6px rgba(3, 65, 241, 0.38) !important;
  }
}

/* ============================================================
   MOBILE: HERO MEETS ANNOUNCEMENT BAR
   On phones the header pill is much narrower than the viewport so
   the body's buttermilk shows around its left/right edges, leaving
   a gap before the first section's background starts. Pull the first
   section (homepage hero + Our Story hero) up under the pill so its
   background extends edge-to-edge, touching the announcement bar.
   ============================================================ */

@media (max-width: 800px) {
  /* Make the entire header-group wrapper transparent so the section
     below can show through where the pill doesn't cover. The pill
     itself still has its own buttermilk fill. */
  .shopify-section-group-header-group {
    background: transparent !important;
  }
  .purli-header {
    background: transparent !important;
  }

  /* NOTE: .purli-hero is intentionally NOT in this rule. The
     homepage hero already self-pulls via inline margin-top in
     sections/purli-home.liquid — re-applying it here double-stacks
     and breaks the layout (cat image flies off-screen, downstream
     sections jump). Use the .purli-tuck-under-header opt-in
     (defined below at ≤749px) for other templates' topmost
     sections. */

  /* Same treatment for collection + product page hero areas with
     buttermilk fill, so they connect to the announcement bar cleanly */
  .template-collection main,
  .template-product main {
    background: var(--purli-buttermilk) !important;
  }

}

/* ============================================================
   PHONE: TUCK-UNDER-HEADER OPT-IN
   Apply class="purli-tuck-under-header" to the TOPMOST section
   of a template (PDP hero, collection heading, page hero, etc.)
   to pull its background up behind the transparent floating
   pill + announcement bar.

   Do NOT add this class to .purli-hero — the homepage hero
   already self-pulls via inline margin-top (sections/purli-home.liquid)
   and JS-set CSS vars. Double-pulling overlaps it off-screen.

   Offset references --header-height and --header-group-height
   set by the inline script in layout/theme.liquid. If those vars
   are unset on a template (JS hasn't run yet, or template skips
   the header script), the var() fallbacks (92px + 42px = 134px)
   take over — confirm that ~134px matches the actual pill +
   announcement height on the templates you opt in.
   ============================================================ */
@media (max-width: 749px) {
  .purli-tuck-under-header {
    margin-top: calc(-1 * (var(--header-height, 92px) + var(--header-group-height, 42px))) !important;
    padding-top: calc(var(--header-height, 92px) + var(--header-group-height, 42px) + 24px) !important;
  }
}

/* ============================================================
   MOBILE: SOFTER CARD SHADOW + SINGLE-LINE ACTION BUTTONS
   On phones the multi-layer blue glow looked over-blown; cap it
   to one tight layer. Also tighten button padding/font so
   "View Details" fits on one line in a 2-up grid at 375px.
   ============================================================ */

@media (max-width: 780px) {
  /* Mobile card glow — visible all around the card (not just
     below). The previous values used negative spread which shrank
     the shadow smaller than the card, leaving nothing visible on
     buttermilk backgrounds. */
  .purli-product__card {
    box-shadow:
      0 0 0 1.5px rgba(3, 65, 241, 0.30),
      0 6px 20px 0 rgba(3, 65, 241, 0.35),
      0 14px 36px -4px rgba(3, 65, 241, 0.25) !important;
  }
  .purli-product__card:hover {
    box-shadow:
      0 0 0 1.5px rgba(3, 65, 241, 0.42),
      0 8px 26px 0 rgba(3, 65, 241, 0.45),
      0 18px 44px -4px rgba(3, 65, 241, 0.32) !important;
  }

  /* Best Sellers Purli Blue glow on mobile — only the outer halo
     and the top/bottom lift remain. No thick rim or near-edge
     concentration that bleeds into the card's perimeter. */
  .purli-bestsellers .purli-product__card {
    box-shadow:
      0 0 32px 0 rgba(3, 65, 241, 0.38),
      0 16px 38px -4px rgba(3, 65, 241, 0.40),
      0 -10px 28px -6px rgba(3, 65, 241, 0.30) !important;
  }
  .purli-bestsellers .purli-product__card:hover {
    box-shadow:
      0 0 38px 0 rgba(3, 65, 241, 0.48),
      0 20px 44px -4px rgba(3, 65, 241, 0.50),
      0 -12px 32px -6px rgba(3, 65, 241, 0.38) !important;
  }

  /* Action buttons — guarantee single line at 2-up mobile widths */
  .purli-product__card--collection .purli-product__atc-btn,
  .purli-product__card--collection .purli-product__view-btn {
    font-size: 10.5px !important;
    height: 34px !important;
    padding: 0 6px !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* Extra narrow phones — drop button label characters further if needed */
@media (max-width: 400px) {
  .purli-product__card--collection .purli-product__atc-btn,
  .purli-product__card--collection .purli-product__view-btn {
    font-size: 10px !important;
    letter-spacing: 0 !important;
    padding: 0 4px !important;
  }
}

/* ============================================================
   COLLECTION CARD BUTTON LABEL SWAP
   "View Details" is too long for the 70px button slot at 2-up
   mobile widths — swap to "Details" at ≤600px so the text sits
   well inside the pill edge with proper padding.
   ============================================================ */
.purli-product__btn-short { display: none; }
.purli-product__btn-full { display: inline; }
@media (max-width: 600px) {
  .purli-product__btn-short { display: inline; }
  .purli-product__btn-full { display: none; }
  /* Bump padding on mobile now that the label is shorter */
  .purli-product__card--collection .purli-product__atc-btn,
  .purli-product__card--collection .purli-product__view-btn {
    padding: 0 10px !important;
  }
}

/* ============================================================
   NEWSLETTER "STAY CURIOUS" — integrated email + Subscribe pill.
   Used on the homepage and on every PDP. Single outer pill with the
   mail icon, input, and Subscribe button all inside.
   ============================================================ */
.purli-newsletter__field {
  display: flex;
  align-items: center;
  background: var(--purli-buttermilk);
  border: 1.5px solid var(--purli-blue);
  border-radius: 999px;
  padding: 5px 5px 5px 18px;
  gap: 8px;
  box-shadow: 0 4px 12px -4px rgba(3, 65, 241, 0.20);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.purli-newsletter__field:focus-within {
  border-color: var(--purli-blue);
  box-shadow: 0 8px 22px -6px rgba(3, 65, 241, 0.35);
}
.purli-newsletter__mail-icon {
  width: 18px;
  height: 18px;
  color: var(--purli-blue);
  flex-shrink: 0;
  opacity: 0.7;
}
.purli-newsletter__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 4px;
  font-family: var(--purli-body);
  font-size: 14px;
  color: var(--purli-blue);
  outline: none;
}
.purli-newsletter__input::placeholder {
  color: rgba(3, 65, 241, 0.45);
}
.purli-newsletter__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purli-blue);
  color: var(--purli-buttermilk);
  font-family: var(--purli-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease;
}
.purli-newsletter__submit svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.purli-newsletter__submit:hover {
  background: var(--purli-blue);
  transform: translateY(-1px);
}
.purli-newsletter__submit:hover svg {
  transform: translateX(3px);
}
.purli-newsletter__submit:active {
  transform: translateY(0);
}
@media (max-width: 600px) {
  .purli-newsletter__submit span { display: none; }
  .purli-newsletter__submit { padding: 11px 14px; }
}

/* ============================================================
   NEWSLETTER "STAY CURIOUS" v3 — full redesign
   Full-bleed blue band with dot pattern, buttermilk rounded card
   centered carrying every piece of content. Single source of truth
   for homepage + every PDP.
   ============================================================ */
.purli-newsletter-v2 {
  position: relative;
  overflow: hidden;
  background: var(--purli-blue);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 40px);
}
.purli-newsletter-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Paw prints + sparkles pattern (buttermilk on blue) — matches the
     homepage FAQ band aesthetic. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='%23FBE8D4' fill-opacity='0.12'><circle cx='32' cy='50' r='5.5'/><ellipse cx='21' cy='39' rx='3' ry='4'/><ellipse cx='32' cy='33' rx='3' ry='4'/><ellipse cx='43' cy='39' rx='3' ry='4'/><path d='M135 75 l3 8 l8 2 l-8 2 l-3 8 l-3 -8 l-8 -2 l8 -2 z'/><circle cx='160' cy='38' r='3'/><ellipse cx='154' cy='31' rx='1.8' ry='2.4'/><ellipse cx='160' cy='27' rx='1.8' ry='2.4'/><ellipse cx='166' cy='31' rx='1.8' ry='2.4'/><circle cx='48' cy='160' r='2.5'/><path d='M90 165 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 l5 -2 z'/><circle cx='170' cy='145' r='3.5'/><circle cx='110' cy='30' r='2'/></g></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
}
.purli-newsletter-v2__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  background: var(--purli-buttermilk);
  border-radius: 28px;
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  /* 2-column: copy left, email form right */
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  text-align: left;
  box-shadow:
    0 22px 44px -16px rgba(0, 0, 0, 0.22),
    0 0 0 1.5px rgba(3, 65, 241, 0.20);
}
.purli-newsletter-v2__copy {
  text-align: left;
}
.purli-newsletter-v2__eyebrow {
  font-family: var(--purli-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purli-blue);
  opacity: 0.60;
  margin: 0 0 14px;
}
.purli-newsletter-v2__heading {
  font-family: var(--purli-display);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--purli-blue);
  margin: 0 0 10px;
}
.purli-newsletter-v2__heading em {
  font-style: italic;
  font-weight: 400;
}
.purli-newsletter-v2__body {
  font-family: var(--purli-body);
  font-size: clamp(13px, 0.9vw, 14.5px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--purli-blue);
  opacity: 0.85;
  margin: 0;
  max-width: 360px;
}
.purli-newsletter-v2__form {
  width: 100%;
}
.purli-newsletter-v2__field {
  display: flex;
  align-items: stretch;
  background: rgba(3, 65, 241, 0.06);
  border: 2px solid var(--purli-blue);
  border-radius: 999px;
  /* No right/top/bottom padding — Subscribe button stretches to the
     field's outer edges via negative margin below. */
  padding: 0 0 0 20px;
  gap: 8px;
  transition: box-shadow .25s ease;
}
.purli-newsletter-v2__field:focus-within {
  box-shadow: 0 0 0 3px rgba(3, 65, 241, 0.18);
}
.purli-newsletter-v2__icon {
  width: 18px;
  height: 18px;
  color: var(--purli-blue);
  flex-shrink: 0;
  opacity: 1;
  align-self: center;
}
.purli-newsletter-v2__input,
.purli-newsletter-v2 .purli-newsletter-v2__input {
  flex: 1 !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  font-family: var(--purli-body) !important;
  font-size: 14px !important;
  color: var(--purli-blue) !important;
  outline: none !important;
  height: 44px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.purli-newsletter-v2__input::placeholder {
  color: rgba(3, 65, 241, 0.45) !important;
}
/* Kill autofill yellow / blue background that browsers paint over inputs */
.purli-newsletter-v2__input:-webkit-autofill,
.purli-newsletter-v2__input:-webkit-autofill:hover,
.purli-newsletter-v2__input:-webkit-autofill:focus,
.purli-newsletter-v2__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--purli-blue) !important;
  transition: background-color 9999s ease-in-out 0s;
}
.purli-newsletter-v2__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purli-blue);
  color: var(--purli-buttermilk);
  font-family: var(--purli-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 0;
  /* Square left edge so it sits flush against the input; pill curve
     stays on the right matching the outer field pill. */
  border-radius: 0 999px 999px 0;
  padding: 0 26px;
  align-self: stretch;
  margin: -2px -2px -2px 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 12px -4px rgba(3, 65, 241, 0.35);
}
.purli-newsletter-v2__submit svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.purli-newsletter-v2__submit span {
  display: inline-block;
  transition: transform .25s ease;
}
.purli-newsletter-v2__submit:hover {
  background: var(--purli-blue);
  box-shadow: 0 6px 14px -4px rgba(3, 65, 241, 0.45);
}
.purli-newsletter-v2__submit:hover svg { transform: translateX(3px); }
.purli-newsletter-v2__submit:hover span { transform: translateY(-1.5px); }
.purli-newsletter-v2__note {
  font-family: var(--purli-body);
  font-size: 11px;
  color: var(--purli-blue);
  opacity: 0.50;
  margin: 16px 0 0;
  letter-spacing: 0.2px;
}
/* Stack to single column on tablets + phones */
@media (max-width: 760px) {
  .purli-newsletter-v2__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
  }
  .purli-newsletter-v2__copy { text-align: center; }
  .purli-newsletter-v2__body { margin: 0 auto; }
}
@media (max-width: 600px) {
  .purli-newsletter-v2 { padding: clamp(28px, 9vw, 44px) 14px; }
  .purli-newsletter-v2__inner {
    padding: 26px 18px;
    border-radius: 22px;
  }
  .purli-newsletter-v2__heading { font-size: clamp(24px, 6.5vw, 30px); }
  .purli-newsletter-v2__submit { padding: 0 14px; }
  .purli-newsletter-v2__submit span { display: none; }
  .purli-newsletter-v2__field { padding: 4px 4px 4px 16px; }
}

/* ============================================================
   v2 (kept below for reference; overridden by v3 above)