/** Shopify CDN: Minification failed

Line 148:0 Unexpected "}"

**/
/* =========================================================
   Little Palm — production stylesheet for Shopify Refresh
   Drop into theme/assets/ and include via:
     {{ 'little-palm.css' | asset_url | stylesheet_tag }}
   Load AFTER base.css so it overrides Refresh tokens.
   ========================================================= */

@font-face {
  font-family: "Hey Gotcha";
  /* Hosted in Shopify Files as a WOFF2 (despite the .ttf extension — the CDN
     correctly serves it as font/woff2 based on content sniffing). 9.9 KB. */
  src: url("/cdn/shop/files/Hey_Gotcha_Regular.ttf?v=1741552264") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body companion — served via theme settings (Inter/DM Sans fallback) */
:root,
.shopify-section,
body {
  /* ---------- Core palette ---------- */
  --lp-teal-500: #69C7B4;
  --lp-teal-600: #4FB29C;
  --lp-teal-700: #3A8A78;
  --lp-teal-300: #9BDBCC;
  --lp-teal-100: #E4F4EF;

  --lp-brown-900: #3E2410;
  --lp-brown-700: #5A3414;
  --lp-brown-500: #6B3A1E;
  --lp-brown-300: #A87B58;

  --lp-cream-50:  #FDFBF4;
  --lp-cream-100: #FAF5E7;
  --lp-cream-200: #F1E7CF;
  --lp-gold-500:  #C89966;
  --lp-gold-300:  #E3C897;

  /* ---------- Refresh overrides ---------- */
  --color-background: 250 245 231;              /* cream-100 */
  --color-foreground: 90 52 20;                 /* brown-700 */
  --color-accent-1:   105 199 180;              /* teal-500 */
  --color-accent-2:   200 153 102;              /* gold-500 */
  --color-button:     90 52 20;
  --color-button-text: 250 245 231;

  /* ---------- Type ---------- */
  --font-display: "Hey Gotcha", "Big Shoulders Display", "Archivo Black", sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Override Refresh's heading font variable so every section title uses Hey Gotcha.
     !important is required because Refresh declares --font-heading-family inline on body.color-scheme-* (higher specificity). */
  --font-heading-family: "Hey Gotcha", "Big Shoulders Display", "Archivo Black", sans-serif !important;
  --font-heading-weight: 400 !important;
  --font-heading-style:  normal !important;
  --font-heading-scale:  1 !important;

  /* ---------- Motion ---------- */
  --lp-ease: cubic-bezier(.22,1,.36,1);
}

/* Global defaults */
body {
  background: var(--lp-cream-100);
  color: var(--lp-brown-700);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Refresh's h1–h3 use its heading font; we want Hey Gotcha display */
h1, h2, h3, h4,
.h0, .h1, .h2, .h3, .h4,
.title, .title-wrapper__title, .section-header__title,
.collection__title, .rich-text__heading, .banner__heading,
.inline-richtext,
.lp-display {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  color: var(--lp-brown-700);
  font-weight: 400;
}

/* Eyebrow utility */
.lp-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--lp-gold-500);
  display: inline-block;
  margin-bottom: 10px;
}

/* Buttons — override Refresh button shell */
.button, .shopify-payment-button__button--unbranded {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  border-radius: 12px !important;
  padding: 15px 24px !important;
  transition: all 140ms var(--lp-ease) !important;
}
.button--primary {
  background: var(--lp-brown-700) !important;
  color: var(--lp-cream-100) !important;
}
.button--primary:hover { background: var(--lp-brown-900) !important; }

/* Product-card quick-add buttons ("ADD TO CART" in The Lineup etc.) — always single-line. */
.quick-add__submit,
.quick-add .button {
  white-space: nowrap !important;
  min-width: 0 !important;
}
/* Tighter padding/font only on mobile where card widths shrink. Desktop keeps full button sizing. */
@media (max-width: 900px) {
  .quick-add__submit,
  .quick-add .button {
    padding: 12px 14px !important;
    letter-spacing: 0.08em !important;
    font-size: 13px !important;
  }
}

/* PDP "Add to cart" and any other product-form submit button: force pure white text
   and suppress Refresh's teal outline pseudo-element.
   Covers nested spans/icons too. Scoped to .product-form__submit so it doesn't bleach other buttons. */
.product-form__submit,
.product-form__submit *,
.product-form__submit:hover,
.product-form__submit:focus {
  color: #FFFFFF !important;
}
.product-form__submit::after,
.product-form__submit:hover::after,
.product-form__submit:focus::after {
  box-shadow: none !important;
}
}
.button--secondary {
  background: var(--lp-teal-500) !important;
  color: var(--lp-cream-50) !important;
}
.button--tertiary {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--lp-brown-700) !important;
  color: var(--lp-brown-700) !important;
}

/* Claim chip */
.lp-chip {
  display: inline-flex;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.2px var(--lp-brown-700);
  color: var(--lp-brown-700);
  line-height: 1;
}
.lp-chip--teal  { background: var(--lp-teal-500);  color: var(--lp-cream-50); box-shadow: none; }
.lp-chip--gold  { background: var(--lp-gold-500);  color: var(--lp-cream-50); box-shadow: none; }
.lp-chip--brown { background: var(--lp-brown-700); color: var(--lp-cream-100); box-shadow: none; }

/* Wave divider */
.lp-wave {
  display: block;
  width: 100%;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'><path d='M0 7 Q 15 0 30 7 T 60 7 T 90 7 T 120 7' stroke='%234FB29C' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 120px 14px;
}

/* Hero */
.lp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    var(--lp-cream-100) 0%,
    var(--lp-cream-100) 38%,
    var(--lp-teal-300) 78%,
    var(--lp-teal-500) 100%);
  padding: 72px 32px 0;
}
/* More breathing room under the hero eyebrow (matches LP Story's visual gap). */
.lp-hero .lp-eyebrow {
  margin-bottom: 14px;
}
.lp-hero__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px;
  align-items: center; position: relative; z-index: 2;
}
.lp-hero h1 {
  font-size: clamp(56px, 8vw, 104px);
  margin: 0 0 24px;
  line-height: 0.95;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  text-wrap: balance;
  width: 100%;
  max-width: 100%;
}
.lp-hero__lede {
  font-size: 19px; line-height: 1.45;
  color: var(--lp-brown-700); max-width: 480px; margin: 0 0 32px;
}
.lp-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-hero__bottle { display: flex; justify-content: center; align-items: flex-end; }
.lp-hero__bottle img { height: min(640px, 70vh); filter: drop-shadow(0 30px 40px rgba(62,36,16,.18)); }
.lp-hero__palms {
  position: absolute; right: -40px; bottom: 0; width: 360px;
  opacity: .14; pointer-events: none; z-index: 1;
}

/* Claim marquee */
.lp-strip {
  background: var(--lp-brown-700) !important;
  color: #FFFFFF !important;
  padding: 18px 0; overflow: hidden;
}
.lp-strip__track {
  display: flex; gap: 44px; animation: lp-marquee 28s linear infinite;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.2em; white-space: nowrap;
  color: #FFFFFF !important;
}
.lp-strip__track span { display: inline-flex; align-items: center; gap: 14px; color: #FFFFFF !important; }
.lp-strip__track .dot { color: #FFFFFF !important; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }

/* Story block */
.lp-story {
  background: var(--lp-cream-50);
  border-radius: 24px;
  padding: 72px 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center; position: relative; overflow: hidden;
  max-width: 1280px; margin: 96px auto;
}
.lp-story__fact { padding-top: 20px; margin-top: 12px; border-top: 1.5px solid var(--lp-gold-500); display: flex; gap: 40px; }
.lp-story .fact__n { font-family: var(--font-display); color: var(--lp-teal-700); font-size: 44px; line-height: 1; display: block; }
.lp-story .fact__l { font-family: var(--font-display); color: var(--lp-brown-300); font-size: 11px; letter-spacing: .14em; margin-top: 4px; text-transform: uppercase; }
/* Story image: lock aspect ratio + cover-crop so different source dimensions don't distort */
.lp-story img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
/* Refresh product card titles (e.g. in "The Lineup" / featured-collection).
   Overrides Refresh's .h5 size scale so brand product names read at display scale. */
.card__heading,
.card__heading a,
.card__heading .full-unstyled-link {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
}

/* Announcement bar message — Refresh defaults to .h5 (tiny). Bump to mid-body so it reads. */
.announcement-bar__message {
  font-size: clamp(14px, 1.4vw, 17px) !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
}

/* PDP "The DEETs" collapsible row titles — Refresh defaults to .h4. Bump for presence. */
.accordion__title {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
}

/* Product grid cards */
.lp-card {
  background: var(--lp-cream-50);
  border-radius: 20px; padding: 24px 20px 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  box-shadow: 0 6px 18px -6px rgba(62,36,16,.14), 0 2px 4px rgba(62,36,16,.06);
  transition: all 200ms var(--lp-ease);
}
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -18px rgba(62,36,16,.22), 0 6px 12px -4px rgba(62,36,16,.08); }

/* PDP */
.lp-pdp__media {
  background: linear-gradient(180deg, var(--lp-cream-100) 30%, var(--lp-teal-300) 100%);
  border-radius: 24px; min-height: 560px;
  display: flex; align-items: flex-end; justify-content: center; padding: 40px;
}
.lp-pdp__media img { max-height: 520px; filter: drop-shadow(0 20px 30px rgba(62,36,16,.18)); }

/* Responsive */
@media (max-width: 900px) {
  .lp-hero__inner, .lp-story { grid-template-columns: 1fr !important; }
  .lp-hero { padding: 48px 20px 0; }
  /* Mobile-specific headline sizing — smaller max so the full headline wraps cleanly on narrow screens. */
  .lp-hero h1 {
    font-size: clamp(44px, 11vw, 64px);
  }
  /* Palm sits at the bottom (same horizontal as the bottle) but pulled to the left so it doesn't overlap. */
  .lp-hero__palms {
    width: 220px;
    right: auto;
    left: -60px;
    bottom: 0;
    top: auto;
    opacity: 0.10;
  }
}
/* =========================================================
   Page-specific styles (ported from design-system mocks)
   Retailer, Contact, Store Locator sections require these.
   ========================================================= */

/* ---------- Retailer page (lp-retailer.liquid) ---------- */
.r-hero {
  background: linear-gradient(180deg, var(--lp-cream-100) 0%, var(--lp-cream-100) 50%, var(--lp-teal-300) 100%);
  padding: 80px 32px 48px;
  overflow: hidden;
  position: relative;
}
.r-hero__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  align-items: center; position: relative; z-index: 2;
}
.r-hero h1 { font-size: clamp(56px, 8vw, 88px); margin: 0 0 24px; }
.r-hero p {
  font-size: 19px; line-height: 1.45;
  color: var(--lp-brown-700); max-width: 520px; margin: 0 0 32px;
}
.r-hero__palms {
  position: absolute; right: -60px; bottom: 0;
  width: 420px; opacity: .12; pointer-events: none;
}
.r-hero__stack img {
  width: 100%;
  filter: drop-shadow(0 20px 30px rgba(62,36,16,.18));
}

.stats {
  max-width: 1280px; margin: -40px auto 0; padding: 0 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  position: relative; z-index: 3;
}
.stat {
  background: var(--lp-cream-50); border-radius: 18px; padding: 24px;
  box-shadow: 0 14px 28px -10px rgba(62,36,16,.18);
  border-top: 2px solid var(--lp-gold-500);
}
.stat__n { font-family: var(--font-display); font-size: 42px; color: var(--lp-teal-700); line-height: 1; }
.stat__l { font-family: var(--font-display); text-transform: uppercase; font-size: 11px; letter-spacing: .16em; color: var(--lp-brown-500); margin-top: 6px; }

.why { padding: 96px 32px; }
.why__grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
}
.why__item h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; margin: 16px 0 10px; line-height: 1; }
.why__item p { color: var(--lp-brown-500); line-height: 1.55; margin: 0; }
.why__icon {
  width: 56px; height: 56px; background: var(--lp-teal-100);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--lp-teal-700); font-family: var(--font-display);
  font-size: 22px; letter-spacing: .04em;
}

.specs {
  background: var(--lp-brown-700); color: var(--lp-cream-100);
  padding: 96px 32px;
}
.specs__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
.specs h2 { color: var(--lp-cream-100); font-size: 56px; margin: 0 0 24px; }
.specs table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.specs th, .specs td { text-align: left; padding: 14px 0; border-bottom: 1px solid rgba(250,245,231,.15); font-size: 14px; }
.specs th { font-family: var(--font-display); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; color: var(--lp-gold-300); }

.cta-band {
  background: var(--lp-teal-500); padding: 72px 32px;
  text-align: center; color: var(--lp-cream-50);
}
.cta-band h2 { color: var(--lp-cream-50); font-size: 56px; margin: 0 0 16px; }
.cta-band p { font-size: 17px; max-width: 560px; margin: 0 auto 28px; opacity: .95; }

/* ---------- Contact page (lp-contact.liquid) ---------- */
.contact-hero {
  background: var(--lp-cream-100);
  padding: 80px 32px 40px;
  max-width: 1280px; margin: 0 auto;
}
.contact-hero .lp-eyebrow { color: var(--lp-gold-500); }
.contact-hero h1 { font-size: 72px; margin: 0 0 20px; }
.contact-hero p { font-size: 17px; color: var(--lp-brown-500); max-width: 560px; }
.contact-grid {
  max-width: 1280px; margin: 0 auto 96px; padding: 0 32px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  align-items: flex-start;
}
.form-card {
  background: var(--lp-cream-50); border-radius: 24px;
  padding: 40px; box-shadow: 0 14px 28px -10px rgba(62,36,16,.14);
}
/* Override Refresh's .field { display: flex } — force label above input.
   Without this, labels sit to the left of inputs and fields start at
   different x-positions depending on label length. */
.form-card .field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
  margin-bottom: 18px;
}
.form-card label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--lp-gold-500);
}
.form-card input,
.form-card select,
.form-card textarea {
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--lp-brown-700);
  background: var(--lp-cream-100);
  border: 1.5px solid rgba(90, 52, 20, 0.18);
  border-radius: 12px;
  outline: none;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus { border-color: var(--lp-teal-500); }
.form-card textarea { min-height: 140px; resize: vertical; }

/* Paired fields row (Name/Email, Phone/Inquiry Type). */
.form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.form-card .form-row .field { margin-bottom: 0; }

@media (max-width: 600px) {
  .form-card .form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form-card .form-row .field { margin-bottom: 18px; }
}
.aside { padding-top: 20px; }
.aside h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 12px; letter-spacing: .18em; color: var(--lp-gold-500); margin: 0 0 8px; }
.aside p, .aside .rte { color: var(--lp-brown-500); line-height: 1.55; margin: 0 0 24px; font-size: 14.5px; }
.aside a { color: var(--lp-brown-700); text-decoration: underline; text-decoration-color: var(--lp-teal-500); text-underline-offset: 3px; }

/* ---------- Store locator (lp-store-locator.liquid) ---------- */
.locator-hero {
  background: linear-gradient(180deg, var(--lp-cream-100) 0%, var(--lp-teal-300) 100%);
  padding: 80px 32px 48px;
  text-align: center;
}
.locator-hero h1 { font-size: 72px; margin: 0 0 16px; }
.locator-hero p { font-size: 18px; color: var(--lp-brown-700); max-width: 520px; margin: 0 auto; }
.stockist-wrap { max-width: 1100px; margin: -20px auto 96px; padding: 0 32px; }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 900px) {
  .r-hero__inner, .specs__inner, .contact-grid { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: 1fr; }
  .contact-hero h1, .locator-hero h1 { font-size: 48px; }
  .cta-band h2, .specs h2 { font-size: 40px; }
}

/* ---------- PDP cross-sell (lp-cross-sell.liquid) ---------- */
.cross-sell {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 56px 32px 0;
  border-top: 1px solid rgba(90, 52, 20, 0.1);
  margin-top: 32px;
}
.cross-sell h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
  color: var(--lp-brown-700);
}
.cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.xs-card {
  background: var(--lp-cream-50);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: center;
  box-shadow: 0 6px 18px -6px rgba(62,36,16,.12);
  text-decoration: none;
  color: inherit;
  transition: all 200ms var(--lp-ease);
}
.xs-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -14px rgba(62,36,16,.20);
}
.xs-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.xs-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 18px;
  color: var(--lp-brown-700);
  margin: 0;
  line-height: 1;
}
.xs-size {
  font-size: 12.5px;
  color: var(--lp-brown-300);
  margin-top: 6px;
}
.xs-price {
  font-family: var(--font-display);
  color: var(--lp-teal-700);
  font-size: 20px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .cross-grid { grid-template-columns: 1fr; }
  .xs-card { grid-template-columns: 100px 1fr auto; }
  .xs-card img { width: 100px; height: 100px; }
}