/** Shopify CDN: Minification failed

Line 1263:19 Unexpected "*"

**/
/* ============================================
   BIRDIE CUSTOM STYLES
   Drink Real Fruit, Not Weird Stuff

   HOW TO INSTALL:
   1. In your Shopify code editor, go to "assets" folder
   2. Create a new file called: birdie-custom.css
   3. Paste this entire file's contents
   4. Open layout/theme.liquid
   5. Add this line just before </head>:
      {{ 'birdie-custom.css' | asset_url | stylesheet_tag }}
   ============================================ */


/* -----------------------------------------------
   1. FONT DECLARATIONS

   Using Google Fonts "Fredoka" as a web-safe
   match for BN Canteen's bubbly rounded style.

   LATER: To use your actual BN Canteen fonts,
   upload the .otf files to the assets folder and
   uncomment the @font-face blocks below.
   ----------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* UNCOMMENT THESE LATER when you upload .otf font files to assets:
@font-face {
  font-family: 'BN Canteen';
  src: url('BNCanteen-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BN Canteen';
  src: url('BNCanteen-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
Then change 'Fredoka' to 'BN Canteen' everywhere below.
*/


/* -----------------------------------------------
   2. CSS CUSTOM PROPERTIES (Brand Tokens)
   ----------------------------------------------- */
:root {
  /* Primary palette */
  --birdie-teal: #00796B;
  --birdie-teal-dark: #004D40;
  --birdie-teal-light: #4DB6AC;
  --birdie-teal-bg: #E0F2F1;

  /* Accent colors (from flavor palette) */
  --birdie-yellow: #FFD100;
  --birdie-yellow-light: #FFF8DC;
  --birdie-red: #EE3124;
  --birdie-pink: #E94E9B;
  --birdie-green: #7BC043;
  --birdie-orange: #F7941D;

  /* Neutrals */
  --birdie-cream: #FFFAF3;
  --birdie-white: #FFFFFF;
  --birdie-black: #1A1A1A;
  --birdie-gray-light: #F7F7F5;
  --birdie-gray: #E8E8E5;
  --birdie-gray-text: #6B6B6B;

  /* Border radius */
  --birdie-radius-sm: 8px;
  --birdie-radius: 12px;
  --birdie-radius-lg: 20px;
  --birdie-radius-xl: 32px;
  --birdie-radius-pill: 999px;

  /* Shadows */
  --birdie-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --birdie-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --birdie-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --birdie-shadow-color: 0 4px 20px rgba(0, 121, 107, 0.15);

  /* Transitions */
  --birdie-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --birdie-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --birdie-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}


/* -----------------------------------------------
   3. GLOBAL BASE OVERRIDES

   CRITICAL FIX: Dawn theme sets
   html { font-size: calc(var(--font-body-scale) * 62.5%) }
   which results in a root font-size of ~11px.
   All rem-based sizes become microscopic.
   We override this to restore a normal 16px base.
   ----------------------------------------------- */

html {
  font-size: 16px !important;
  scroll-behavior: smooth;
}

/* Override Dawn theme's body background */
body {
  background-color: var(--birdie-white);
  color: var(--birdie-black);
  font-size: 16px;
}

/* Global link color */
a:not(.button):not(.btn) {
  color: var(--birdie-teal);
  transition: var(--birdie-transition-fast);
}

a:not(.button):not(.btn):hover {
  color: var(--birdie-teal-dark);
}

/* Selection highlight */
::selection {
  background-color: var(--birdie-teal-light);
  color: var(--birdie-white);
}


/* -----------------------------------------------
   4. TYPOGRAPHY
   ----------------------------------------------- */

/* Headings get the brand font */
h1, h2, h3,
.h1, .h2, .h3,
.hN {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 700;
  color: var(--birdie-black);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1, .h1 { font-size: clamp(40px, 5vw, 64px); }
h2, .h2 { font-size: clamp(32px, 4vw, 48px); }
h3, .h3 { font-size: clamp(24px, 3vw, 32px); }

/* Body text */
body,
p,
.rte,
.product__description {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--birdie-black);
}


/* -----------------------------------------------
   5. BUTTONS — The Brand's Handshake
   ----------------------------------------------- */

/* Primary button: Teal filled, pill shape */
.button,
.shopify-payment-button button,
button.button,
.btn,
a.button,
.form__submit,
.product-form__submit {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
  border: 2px solid var(--birdie-teal) !important;
  border-radius: var(--birdie-radius-pill) !important;
  padding: 14px 36px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  transition: var(--birdie-transition) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--birdie-shadow-sm);
}

.button:hover,
.shopify-payment-button button:hover,
button.button:hover,
.btn:hover,
a.button:hover,
.form__submit:hover,
.product-form__submit:hover {
  background-color: var(--birdie-teal-dark) !important;
  border-color: var(--birdie-teal-dark) !important;
  color: var(--birdie-white) !important;
  transform: translateY(-2px);
  box-shadow: var(--birdie-shadow-lg) !important;
}

.button:active,
button.button:active {
  transform: translateY(0);
  box-shadow: var(--birdie-shadow-sm) !important;
}

/* Secondary/outline button */
.button--secondary,
.button[class*="secondary"],
a.button--secondary {
  background-color: transparent !important;
  color: var(--birdie-teal) !important;
  border: 2px solid var(--birdie-teal) !important;
}

.button--secondary:hover,
.button[class*="secondary"]:hover,
a.button--secondary:hover {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
}

/* Buy It Now button — make it yellow for contrast */
.shopify-payment-button .shopify-payment-button__button--unbranded {
  background-color: var(--birdie-yellow) !important;
  color: var(--birdie-black) !important;
  border-color: var(--birdie-yellow) !important;
}

.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
  background-color: #E6BC00 !important;
  border-color: #E6BC00 !important;
  transform: translateY(-2px);
}


/* -----------------------------------------------
   6. ANNOUNCEMENT BAR

   Enable this in Theme Editor > Header >
   Announcement bar. This CSS will style it.
   ----------------------------------------------- */
.announcement-bar {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  padding: 10px 0;
}

.announcement-bar a,
.announcement-bar__link {
  color: var(--birdie-yellow) !important;
}

.announcement-bar a:hover {
  color: var(--birdie-white) !important;
}


/* -----------------------------------------------
   7. HEADER / NAVIGATION
   ----------------------------------------------- */
.header {
  border-bottom: 1px solid var(--birdie-gray) !important;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Nav links */
.header__menu-item,
.menu-drawer__menu-item {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--birdie-black);
  transition: var(--birdie-transition-fast);
  position: relative;
}

.header__menu-item:hover,
.header__menu-item:focus {
  color: var(--birdie-teal) !important;
}

/* Underline hover effect on nav items */
.header__menu-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--birdie-teal);
  transition: width 0.3s var(--birdie-ease);
}

.header__menu-item:hover::after {
  width: 100%;
}

/* Cart icon badge */
.cart-count-bubble {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
}


/* -----------------------------------------------
   8. HERO / IMAGE BANNER SECTION
   (Styles for the existing Dawn image-banner,
   or use our custom birdie-hero section)
   ----------------------------------------------- */

/* If using the default image-banner */
.banner {
  border-radius: 0 !important;
}

.banner__heading {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 6vw, 80px) !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner__text {
  font-size: clamp(18px, 2vw, 22px) !important;
  max-width: 600px;
  margin: 0 auto;
}

.banner .button {
  margin-top: 8px;
}


/* -----------------------------------------------
   CUSTOM BIRDIE HERO (birdie-hero section)
   ----------------------------------------------- */
.birdie-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--birdie-teal);
}

.birdie-hero__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.birdie-hero__content {
  color: var(--birdie-white);
}

.birdie-hero__eyebrow {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--birdie-yellow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.birdie-hero__heading {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--birdie-white);
  margin-bottom: 24px;
}

.birdie-hero__heading em {
  color: var(--birdie-yellow);
  font-style: normal;
}

.birdie-hero__subheading {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  max-width: 480px;
}

.birdie-hero__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.birdie-hero__btn--primary {
  background-color: var(--birdie-yellow) !important;
  color: var(--birdie-black) !important;
  border-color: var(--birdie-yellow) !important;
  font-size: 18px !important;
  padding: 16px 40px !important;
}

.birdie-hero__btn--primary:hover {
  background-color: var(--birdie-white) !important;
  color: var(--birdie-teal-dark) !important;
  border-color: var(--birdie-white) !important;
}

/* Hero secondary button — HIGH SPECIFICITY to override .button base */
.birdie-hero .birdie-hero__btn--secondary,
.birdie-hero a.button.birdie-hero__btn--secondary,
a.birdie-hero__btn--secondary {
  background-color: transparent !important;
  color: var(--birdie-white) !important;
  border: 2px solid var(--birdie-white) !important;
  font-size: 18px !important;
  padding: 16px 40px !important;
}

.birdie-hero .birdie-hero__btn--secondary:hover,
.birdie-hero a.button.birdie-hero__btn--secondary:hover,
a.birdie-hero__btn--secondary:hover {
  background-color: var(--birdie-white) !important;
  color: var(--birdie-teal-dark) !important;
  border-color: var(--birdie-white) !important;
}

.birdie-hero__image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.birdie-hero__image img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
  animation: heroFloat 6s ease-in-out infinite;
}

/* Floating decorative circles */
.birdie-hero__circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  z-index: 1;
}

.birdie-hero__circle--1 {
  width: 300px;
  height: 300px;
  background-color: var(--birdie-yellow);
  top: -5%;
  right: 10%;
  animation: circleFloat1 8s ease-in-out infinite;
}

.birdie-hero__circle--2 {
  width: 180px;
  height: 180px;
  background-color: var(--birdie-green);
  bottom: 10%;
  left: 5%;
  animation: circleFloat2 10s ease-in-out infinite;
}

.birdie-hero__circle--3 {
  width: 120px;
  height: 120px;
  background-color: var(--birdie-orange);
  top: 20%;
  left: 40%;
  animation: circleFloat3 7s ease-in-out infinite;
}

.birdie-hero__circle--4 {
  width: 200px;
  height: 200px;
  background-color: var(--birdie-pink);
  bottom: -5%;
  right: 25%;
  opacity: 0.2;
  animation: circleFloat1 9s ease-in-out infinite reverse;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes circleFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}

@keyframes circleFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-15px, 15px); }
}

@keyframes circleFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -25px); }
}

/* Hero mobile */
@media (max-width: 768px) {
  .birdie-hero {
    min-height: auto;
    padding: 32px 0;
  }

  .birdie-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
    padding: 48px 24px;
  }

  .birdie-hero__subheading {
    margin-left: auto;
    margin-right: auto;
  }

  .birdie-hero__buttons {
    justify-content: center;
  }

  .birdie-hero__image {
    order: -1;
  }

  .birdie-hero__image img {
    max-width: 80%;
  }

  .birdie-hero__circle {
    display: none;
  }
}


/* -----------------------------------------------
   9. VALUE PROPS STRIP
   ----------------------------------------------- */
.birdie-value-props {
  background-color: var(--birdie-cream);
  padding: 32px 0;
  border-top: 3px solid var(--birdie-teal);
  border-bottom: 1px solid var(--birdie-gray);
}

.birdie-value-props__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.birdie-value-props__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
  justify-content: center;
}

.birdie-value-props__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--birdie-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--birdie-white);
  font-size: 21px;
}

.birdie-value-props__text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--birdie-teal-dark);
  line-height: 1.3;
}

.birdie-value-props__text small {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--birdie-gray-text);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .birdie-value-props__inner {
    flex-direction: column;
    gap: 20px;
  }

  .birdie-value-props__item {
    flex: 1 1 100%;
    justify-content: flex-start;
    padding-left: 16px;
  }
}


/* -----------------------------------------------
   10. PRODUCT CARDS — Where Personality Meets Commerce
   ----------------------------------------------- */

/* Card container */
.product-card-wrapper,
.card-wrapper {
  transition: var(--birdie-transition);
}

.card {
  border-radius: var(--birdie-radius-lg) !important;
  overflow: hidden;
  border: none !important;
  background-color: var(--birdie-gray-light) !important;
  transition: var(--birdie-transition);
  box-shadow: var(--birdie-shadow-sm);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--birdie-shadow-lg);
}

/* Card image area */
.card__media,
.card .media {
  border-radius: var(--birdie-radius-lg) var(--birdie-radius-lg) 0 0 !important;
  overflow: hidden;
}

.card__media img,
.card .media img {
  transition: transform 0.5s var(--birdie-ease);
}

.card:hover .card__media img,
.card:hover .media img {
  transform: scale(1.05);
}

/* Card content area */
.card__content,
.card-information {
  padding: 20px 20px 24px !important;
}

/* Product title */
.card__heading,
.card-information__text .h5,
.card__heading a {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--birdie-black) !important;
  line-height: 1.3;
}

/* Product price */
.price__regular .price-item,
.price .price-item--regular,
.price-item {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--birdie-teal) !important;
}

/* Sold out badge */
.badge {
  background-color: var(--birdie-gray-text) !important;
  color: var(--birdie-white) !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  border-radius: var(--birdie-radius-pill) !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
}

/* Sale badge */
.badge--sale,
.badge[class*="sale"] {
  background-color: var(--birdie-red) !important;
}

/* Collection heading */
.collection__title,
.title--primary {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  color: var(--birdie-black);
}

/* "Featured products" heading */
.section-header__title,
.section-header h2,
h2.h1 {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  color: var(--birdie-black) !important;
}


/* -----------------------------------------------
   11. BRAND STORY SECTION
   ----------------------------------------------- */
.birdie-brand-story {
  background-color: var(--birdie-teal);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.birdie-brand-story__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.birdie-brand-story__image {
  display: flex;
  justify-content: center;
}

.birdie-brand-story__image img {
  max-width: 380px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.birdie-brand-story__content {
  color: var(--birdie-white);
}

.birdie-brand-story__heading {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(32px, 4vw, 51px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--birdie-white);
}

.birdie-brand-story__heading em {
  color: var(--birdie-yellow);
  font-style: normal;
}

.birdie-brand-story__text {
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

/* Brand story button — HIGH SPECIFICITY to override .button base */
.birdie-brand-story .birdie-brand-story__btn,
.birdie-brand-story a.button.birdie-brand-story__btn,
a.birdie-brand-story__btn {
  background-color: var(--birdie-yellow) !important;
  color: var(--birdie-black) !important;
  border-color: var(--birdie-yellow) !important;
}

.birdie-brand-story .birdie-brand-story__btn:hover,
.birdie-brand-story a.button.birdie-brand-story__btn:hover,
a.birdie-brand-story__btn:hover {
  background-color: var(--birdie-white) !important;
  color: var(--birdie-teal-dark) !important;
  border-color: var(--birdie-white) !important;
}

/* Decorative circles */
.birdie-brand-story__circle {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.birdie-brand-story__circle--1 {
  width: 250px;
  height: 250px;
  background-color: var(--birdie-green);
  opacity: 0.15;
  top: -60px;
  right: -40px;
}

.birdie-brand-story__circle--2 {
  width: 150px;
  height: 150px;
  background-color: var(--birdie-yellow);
  opacity: 0.1;
  bottom: -30px;
  left: 10%;
}

@media (max-width: 768px) {
  .birdie-brand-story {
    padding: 64px 0;
  }

  .birdie-brand-story__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .birdie-brand-story__image {
    order: -1;
  }

  .birdie-brand-story__image img {
    max-width: 280px;
  }
}


/* -----------------------------------------------
   12. STORE LOCATOR CTA SECTION
   ----------------------------------------------- */
.birdie-find-us {
  background-color: var(--birdie-yellow);
  padding: 64px 0;
  text-align: center;
}

.birdie-find-us__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}

.birdie-find-us__heading {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--birdie-black);
  margin-bottom: 12px;
}

.birdie-find-us__text {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 32px;
}

/* Find-us button — ensure teal button is visible on yellow bg */
.birdie-find-us .birdie-find-us__btn,
.birdie-find-us a.button.birdie-find-us__btn,
a.birdie-find-us__btn {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
  border-color: var(--birdie-teal) !important;
  font-size: 18px !important;
  padding: 16px 48px !important;
}

.birdie-find-us .birdie-find-us__btn:hover,
.birdie-find-us a.button.birdie-find-us__btn:hover,
a.birdie-find-us__btn:hover {
  background-color: var(--birdie-teal-dark) !important;
  border-color: var(--birdie-teal-dark) !important;
}


/* -----------------------------------------------
   13. FOOTER
   ----------------------------------------------- */
.footer {
  background-color: var(--birdie-teal-dark) !important;
  color: var(--birdie-white) !important;
  padding: 64px 0 32px !important;
}

.footer h2,
.footer .footer__heading,
.footer .h4 {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  color: var(--birdie-white) !important;
  font-size: 18px !important;
}

.footer a,
.footer .footer__list-item a,
.footer .link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 15px;
  transition: var(--birdie-transition-fast);
}

.footer a:hover,
.footer .footer__list-item a:hover,
.footer .link:hover {
  color: var(--birdie-yellow) !important;
}

.footer p,
.footer .rte {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px;
}

/* Footer bottom bar */
.footer__content-bottom,
.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 32px;
  padding-top: 32px;
  font-size: 13px;
}

.footer__copyright a {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Payment icons in footer */
.footer .payment-icon {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* Newsletter input in footer */
.footer .field__input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--birdie-white) !important;
  border-radius: var(--birdie-radius-pill) !important;
  font-size: 15px;
}

.footer .field__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.footer .newsletter-form__button {
  background-color: var(--birdie-yellow) !important;
  color: var(--birdie-black) !important;
  border-radius: var(--birdie-radius-pill) !important;
}


/* -----------------------------------------------
   14. PRODUCT PAGES
   ----------------------------------------------- */

/* Fix "MY STORE" vendor name — hide it */
.product__text.caption-with-letter-spacing {
  display: none !important;
}

/* Product title on PDP */
.product__title h1 {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 4vw, 45px) !important;
  color: var(--birdie-black);
  line-height: 1.1;
}

/* Product price on PDP */
.product__info-wrapper .price__regular .price-item--regular,
.product__info-wrapper .price-item {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  color: var(--birdie-teal) !important;
  font-weight: 700;
}

/* Product description */
.product__description .rte {
  font-size: 16px;
  line-height: 1.8;
  color: var(--birdie-gray-text);
}

/* Product description bullets */
.product__description ul {
  padding-left: 0;
  list-style: none;
}

.product__description ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 16px;
}

.product__description ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--birdie-teal);
}

/* Quantity selector */
.quantity {
  border-radius: var(--birdie-radius) !important;
  border-color: var(--birdie-gray) !important;
}

/* Product image thumbnails */
.product__media-list .product__media-item {
  border-radius: var(--birdie-radius) !important;
  overflow: hidden;
}

.product__media-toggle {
  border-radius: var(--birdie-radius) !important;
  border-color: var(--birdie-gray) !important;
}

.product__media-toggle[aria-current] {
  border-color: var(--birdie-teal) !important;
}

/* Subscribe & Save styling */
.product-form__input label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 15px;
}


/* -----------------------------------------------
   15. AGE GATE MODAL
   ----------------------------------------------- */

/* Style the age verification popup */
.age-verification-popup,
.age-verifier-overlay,
[data-age-verification],
.age-gate,
#age-gate {
  font-family: 'Fredoka', sans-serif;
}

/* Target common age gate modal structures */
.age-verification-popup .modal__content,
.age-gate__content,
#shopify-section-age-checker .modal__content {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
  border-radius: var(--birdie-radius-xl) !important;
  padding: 48px !important;
  text-align: center;
}

.age-verification-popup h2,
.age-gate h2,
.age-verification-popup .modal__heading {
  font-family: 'Fredoka', sans-serif !important;
  color: var(--birdie-white) !important;
  font-size: 29px !important;
}

.age-verification-popup p,
.age-gate p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 16px;
}

.age-verification-popup .button,
.age-gate .button,
.age-gate__button {
  background-color: var(--birdie-yellow) !important;
  color: var(--birdie-black) !important;
  border-color: var(--birdie-yellow) !important;
  border-radius: var(--birdie-radius-pill) !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 40px !important;
  font-size: 18px !important;
}

.age-verification-popup .button:hover,
.age-gate .button:hover {
  background-color: var(--birdie-white) !important;
  color: var(--birdie-teal-dark) !important;
}


/* -----------------------------------------------
   16. 20% OFF FLOATING BADGE
   ----------------------------------------------- */

/* Restyle the floating discount badge */
.needsclick.klaviyo-badge-custom,
[class*="klaviyo"],
.fixed-badge,
div[style*="position: fixed"][style*="bottom"] {
  border-radius: var(--birdie-radius-pill) !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
}


/* -----------------------------------------------
   17. FORM ELEMENTS
   ----------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select,
.field__input {
  border-radius: var(--birdie-radius) !important;
  border: 2px solid var(--birdie-gray) !important;
  padding: 12px 16px !important;
  font-size: 16px;
  transition: var(--birdie-transition-fast);
}

input:focus,
textarea:focus,
select:focus,
.field__input:focus {
  border-color: var(--birdie-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--birdie-teal-bg) !important;
}


/* -----------------------------------------------
   18. SCROLL ANIMATIONS (Fade-in on scroll)

   Add class "birdie-animate" to any section
   in the Liquid code, and it will fade in
   when scrolled into view.
   ----------------------------------------------- */
.birdie-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--birdie-ease), transform 0.6s var(--birdie-ease);
}

.birdie-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.birdie-animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--birdie-ease), transform 0.5s var(--birdie-ease);
}

.birdie-animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.birdie-animate-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.birdie-animate-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.birdie-animate-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }


/* -----------------------------------------------
   19. MISCELLANEOUS POLISH
   ----------------------------------------------- */

/* Breadcrumbs */
.breadcrumbs a {
  color: var(--birdie-teal) !important;
  font-size: 14px;
}

/* Page width consistency */
.page-width {
  max-width: 1400px;
}

/* Remove default Dawn borders on some elements */
.card--card,
.card--standard {
  border: none !important;
  box-shadow: var(--birdie-shadow-sm);
}

/* Style the "View all" link */
.center a.button--link,
.view-all a {
  color: var(--birdie-teal) !important;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* Loading spinner color */
.loading-overlay__spinner .spinner {
  color: var(--birdie-teal);
}

/* Pagination */
.pagination__item--current {
  background-color: var(--birdie-teal) !important;
  color: var(--birdie-white) !important;
  border-color: var(--birdie-teal) !important;
  border-radius: var(--birdie-radius-pill) !important;
}

/* Ensure images load smoothly */
img {
  transition: opacity 0.3s ease;
}

/* Smooth divider between sections */
.section-template--*:not(:last-child) {
  border-bottom: none !important;
}


/* -----------------------------------------------
   20. PRINT STYLES (just in case)
   ----------------------------------------------- */
@media print {
  .birdie-hero__circle,
  .birdie-brand-story__circle,
  .announcement-bar {
    display: none !important;
  }
}