/** Shopify CDN: Minification failed

Line 95:18 Expected identifier but found whitespace
Line 95:19 Unexpected "1.5rem"
Line 121:0 Unexpected "}"

**/
/*
 * OWN THEME - RESPONSIVE SYSTEM
 * Global responsive rules for homepage sections
 * Breakpoints: Mobile (≤767px), Tablet (768-1023px), Desktop (1024-1439px), Large Desktop (≥1440px)
 * 
 * RULES:
 * - 1440px is source of truth: do not change appearance at ≥1440px
 * - Use clamp() for fluid typography where possible
 * - Standardize section padding: Desktop 80-120px, Tablet 48-64px, Mobile 20-24px
 * - Remove fixed heights, use min-height only when needed
 * - Avoid !important unless absolutely necessary (documented in comments)
 * 
 * IMPLEMENTATION STATUS:
 * ✅ Global padding system
 * ✅ Hero Banner responsive rules
 * ✅ Product Categories (3/2/1 columns)
 * ✅ Best Sellers (touch-friendly controls)
 * ✅ FAQ Section (2→1 column stacking, 44px tap targets)
 * ✅ Image+Text blocks (2→1 column stacking)
 * ✅ Habit Section / Brand Banner
 * ✅ Full-width banner with overlay
 * ✅ Final CTA / Featured Product
 * ✅ Footer responsive
 * ✅ Header/Nav (prevent wrapping)
 * ✅ Announcement Bar (prevent overflow)
 * ✅ Overflow prevention global rules
 */

/* ===== GLOBAL RESPONSIVE VARIABLES ===== */
:root {
  /* Section padding scale */
  --section-padding-desktop: clamp(80px, 8vw, 120px);
  --section-padding-tablet: clamp(48px, 6vw, 64px);
  --section-padding-mobile: clamp(20px, 5vw, 24px);
  
  /* Container max-widths */
  --container-max-desktop: 1440px;
  --container-max-tablet: 1200px;
  
  /* Typography scale (will be overridden per section as needed) */
  --font-size-base: clamp(14px, 1.5vw, 16px);
  --line-height-base: 1.5;
}

/* At 1440px, use fixed padding values (canonical design) */
@media screen and (min-width: 1440px) {
  :root {
    --section-padding-desktop: 80px;
  }
}

/* ===== GLOBAL SECTION PADDING SYSTEM ===== */
/* Large Desktop: 1440px+ - Source of truth, no changes */
/* Note: At 1440px+, all sections preserve their exact design. No responsive rules needed here. */

/* Desktop: 1024px - 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .faq-section,
  .habit-section,
  .final-cta {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faq-section,
  .habit-section,
  .final-cta {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Mobile: ≤767px */
@media screen and (max-width: 767px) {
  .faq-section,
  .habit-section,
  .final-cta {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
}

/* ===== HERO BANNER RESPONSIVE SYSTEM ===== */
/* REMOVED: Hero banner styles moved to assets/homepage-proportional-scaling.css to avoid conflicts */
    margin-bottom: 1.5rem;
  }
  
  .hero-cta {
    font-size: clamp(14px, 3.5vw, 16px);
    width: 100%;
    max-width: 100%;
    min-width: auto;
    padding: 12px 24px;
  }
  
  .hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  .hero-curved-background {
    width: 75% !important;
    height: 100% !important;
    z-index: 1 !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
  
  /* REMOVED: hero-top-banner styles - handled in sections/hero-banner.liquid and homepage-proportional-scaling.css */
}

/* ===== PRODUCT BENEFITS BAR RESPONSIVE SYSTEM ===== */
/* Large Desktop: ≥1440px - Single horizontal row, no changes */
@media screen and (min-width: 1440px) {
  .product-benefits {
    padding: 60px 0;
  }
  
  .product-benefits__icons {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    justify-content: center;
  }
  
  .product-benefits__icon-item {
    flex: 0 0 auto;
  }
}

/* Desktop: 1024px - 1439px - Single row, allow wrap if needed */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .product-benefits {
    padding: clamp(40px, 5vw, 60px) 0;
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .product-benefits__title,
  .product-benefits__subtitle {
    font-size: clamp(36px, 4vw, 48px);
  }
  
  .product-benefits__icons {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 30px);
    justify-content: center;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .product-benefits__icon-item {
    flex: 0 0 auto;
    min-width: 0;
  }
  
  .product-benefits__icon-text {
    font-size: clamp(12px, 1.3vw, 14px);
    max-width: clamp(70px, 8vw, 80px);
  }
}

/* Tablet: 768px - 1023px - Wrap cleanly into multiple rows */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .product-benefits {
    padding: clamp(30px, 4vw, 40px) 0;
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .product-benefits__content {
    gap: clamp(25px, 4vw, 40px);
  }
  
  .product-benefits__title,
  .product-benefits__subtitle {
    font-size: clamp(32px, 4.5vw, 42px);
  }
  
  .product-benefits__icons {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(15px, 2.5vw, 25px);
    justify-content: center;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .product-benefits__icon-item {
    flex: 0 0 auto;
    min-width: 0;
    min-height: clamp(70px, 10vw, 90px);
  }
  
  .product-benefits__icon {
    width: clamp(40px, 5vw, 50px);
    height: clamp(40px, 5vw, 50px);
  }
  
  .product-benefits__icon svg {
    width: clamp(32px, 4vw, 40px);
    height: clamp(32px, 4vw, 40px);
  }
  
  .product-benefits__icon-text {
    font-size: clamp(11px, 1.5vw, 13px);
    max-width: clamp(60px, 8vw, 75px);
  }
}

/* Mobile: ≤767px - Wrap cleanly, prevent overflow */
@media screen and (max-width: 767px) {
  .product-benefits {
    padding: clamp(25px, 5vw, 30px) 0;
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  .product-benefits__content {
    gap: clamp(20px, 5vw, 30px);
  }
  
  .product-benefits__text {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  
  .product-benefits__title,
  .product-benefits__subtitle {
    font-size: clamp(28px, 7vw, 36px);
    text-align: center;
  }
  
  .product-benefits__icons {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 3vw, 20px);
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .product-benefits__icon-item {
    flex: 0 0 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
    min-width: 0;
    min-height: clamp(70px, 15vw, 85px);
    gap: clamp(6px, 1.5vw, 10px);
  }
  
  .product-benefits__icon {
    width: clamp(35px, 8vw, 45px);
    height: clamp(35px, 8vw, 45px);
  }
  
  .product-benefits__icon svg {
    width: clamp(28px, 6.5vw, 36px);
    height: clamp(28px, 6.5vw, 36px);
  }
  
  .product-benefits__icon-text {
    font-size: clamp(10px, 2.5vw, 12px);
    max-width: 100%;
    line-height: 1.2;
  }
}

/* ===== PRODUCT CATEGORIES RESPONSIVE SYSTEM ===== */
/* Large Desktop: ≥1440px - Full width, 3 columns */
@media screen and (min-width: 1440px) {
  /* CRITICAL: Force full-width for product categories section */
  /* Override ALL conflicting rules from base.css and other files */
  section#shopify-section-template--25000926118162__product_categories .product-categories .page-width,
  section .product-categories .page-width,
  .product-categories .page-width,
  div.product-categories .page-width,
  .section-template--25000926118162__product_categories .product-categories .page-width,
  .product-categories__wrapper .page-width,
  section#shopify-section-template--25000926118162__product_categories .product-categories__wrapper .page-width {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure wrapper has correct padding for full-width layout */
  section#shopify-section-template--25000926118162__product_categories .product-categories__wrapper,
  section .product-categories__wrapper,
  .product-categories__wrapper,
  div.product-categories .product-categories__wrapper,
  .section-template--25000926118162__product_categories .product-categories__wrapper {
    padding-left: 48px !important;
    padding-right: 48px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Ensure page-width inside wrapper is 100% width (no max-width limit) */
  .product-categories__wrapper .page-width,
  section#shopify-section-template--25000926118162__product_categories .product-categories__wrapper .page-width,
  .product-categories .product-categories__wrapper .page-width {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Grid layout - 4 columns total, 3 visible at a time */
  .product-categories__grid {
    grid-template-columns: repeat(4, 1fr) !important; /* 4 columns for all cards */
    gap: 12px !important;
    width: calc(100% * 4 / 3) !important; /* Grid is 133.33% wide, so 3 columns = 100% visible */
    max-width: none !important;
    box-sizing: border-box !important;
  }
  
  /* Position right arrow at right edge of 3rd card (aligned with container right edge) */
  
  /* Ensure container is full width */
  .product-categories__container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure cards take full available width */
  .product-category-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Desktop: 1024px - 1439px - REMOVED: Estilos movidos a homepage-proportional-scaling.css */

/* Tablet: 768px - 1023px - REMOVED: Estilos movidos a homepage-proportional-scaling.css */

/* Mobile: ≤767px - REMOVED: Estilos movidos a homepage-proportional-scaling.css */

/* ===== BEST SELLERS RESPONSIVE SYSTEM ===== */
/* Large Desktop: ≥1440px - Full width, 6 columns */
@media screen and (min-width: 1440px) {
  .best-sellers {
    /* !important justified: Must override inline styles */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Override any conflicting rules from base.css */
  section .best-sellers__container,
  .best-sellers__container {
    /* !important justified: Must override base.css conflicting rules */
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  
  .best-sellers__grid {
    grid-template-columns: repeat(6, 1fr) !important; /* 6 columns total */
    gap: 8px !important;
    width: calc(100% * 6 / 3) !important; /* 200% wide so 3 columns = 100% visible */
    max-width: none !important;
  }
}

/* Desktop: 1024px - 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  /* Styles identical to 1440px */
  .best-sellers {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  section .best-sellers__container,
  .best-sellers__container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  
  .best-sellers__grid {
    grid-template-columns: repeat(6, 1fr) !important; /* 6 columns total */
    gap: 8px !important;
    width: calc(100% * 6 / 3) !important; /* 200% wide so 3 columns = 100% visible */
    max-width: none !important;
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Styles identical to 1440px */
  .best-sellers {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  section .best-sellers__container,
  .best-sellers__container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  
  .best-sellers__grid {
    grid-template-columns: repeat(6, 1fr) !important; /* 6 columns total */
    gap: 8px !important;
    width: calc(100% * 6 / 3) !important; /* 200% wide so 3 columns = 100% visible */
    max-width: none !important;
  }
}

/* Mobile: ≤767px - Styles handled by sections/best-sellers.liquid inline styles */

/* ===== FAQ SECTION RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px - 2 columns */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .faq-container {
    flex-direction: row-reverse;
    gap: clamp(40px, 5vw, 60px);
  }
  
  .faq-content {
    flex: 1 1 55%;
  }
  
  .faq-image {
    flex: 0 0 45%;
  }
  
  .faq-content h2 {
    font-size: clamp(36px, 4vw, 48px);
  }
  
  .faq-question {
    font-size: clamp(15px, 1.8vw, 17px);
    padding: clamp(18px, 2.2vw, 20px) 50px clamp(18px, 2.2vw, 20px) clamp(18px, 2.2vw, 20px);
    min-height: 44px;
  }
  
  .faq-answer div {
    font-size: clamp(14px, 1.7vw, 16px);
  }
}

/* Tablet: 768px - 1023px - Stack if cramped, otherwise 2 columns with reduced gap */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .faq-container {
    flex-direction: column;
    gap: clamp(30px, 4vw, 40px);
  }
  
  .faq-content {
    flex: 1 1 100%;
    order: 1;
  }
  
  .faq-image {
    flex: 1 1 100%;
    order: 2;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .faq-content h2 {
    font-size: clamp(28px, 5vw, 36px);
    text-align: center;
  }
  
  .faq-question {
    font-size: clamp(15px, 2vw, 16px);
    padding: clamp(16px, 2.2vw, 18px) 45px clamp(16px, 2.2vw, 18px) clamp(16px, 2.2vw, 18px);
    min-height: 44px;
  }
  
  .faq-answer div {
    font-size: clamp(14px, 1.9vw, 15px);
    padding: 5px clamp(20px, 2.5vw, 25px) clamp(20px, 2.5vw, 25px);
  }
}

/* Mobile: ≤767px - Stack to 1 column, touch-friendly */
@media screen and (max-width: 767px) {
  .faq-container {
    flex-direction: column;
    gap: clamp(24px, 6vw, 32px);
  }
  
  .faq-content {
    flex: 1 1 100%;
    order: 1;
  }
  
  .faq-image {
    flex: 1 1 100%;
    order: 2;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .faq-content h2 {
    font-size: clamp(24px, 6vw, 32px);
    text-align: center;
    margin-bottom: clamp(24px, 6vw, 32px);
  }
  
  .faq-question {
    font-size: clamp(14px, 3.5vw, 16px);
    padding: clamp(14px, 3.5vw, 16px) 40px clamp(14px, 3.5vw, 16px) clamp(14px, 3.5vw, 16px);
    min-height: 44px;
    line-height: 1.4;
  }
  
  .faq-answer div {
    font-size: clamp(13px, 3.2vw, 15px);
    padding: 5px clamp(16px, 4vw, 20px) clamp(16px, 4vw, 20px);
    line-height: 1.6;
  }
  
  .icon-plus {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
}

/* ===== IMAGE + TEXT BLOCKS RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px - Styles identical to 1440px */
/* No padding on section - same as 1440px, padding only on content */

/* Tablet: 768px - 1023px - Styles identical to 1440px */
/* No padding on section - same as 1440px, padding only on content */

/* Mobile: ≤767px - Styles handled by sections/text-image-section-1.liquid inline styles */

/* ===== HABIT SECTION / BRAND BANNER RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .habit-section {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .habit-section__title,
  .habit-section h2 {
    font-size: clamp(36px, 4vw, 48px);
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .habit-section {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .habit-section__title,
  .habit-section h2 {
    font-size: clamp(32px, 5vw, 42px);
  }
}

/* Mobile: ≤767px */
@media screen and (max-width: 767px) {
  .habit-section {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  .habit-section__title,
  .habit-section h2 {
    font-size: clamp(24px, 6vw, 32px);
  }
  
  /* Use clamp for logo/text sizing */
  .habit-section__logo,
  .habit-section img {
    max-width: clamp(200px, 50vw, 300px);
    height: auto;
  }
}

/* ===== FULL-WIDTH IMAGE WITH OVERLAID TITLE RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .banner-image,
  [class*="banner-image"] {
    min-height: clamp(400px, 40vh, 600px);
  }
  
  .banner-image__title,
  .banner-image h2 {
    font-size: clamp(36px, 4vw, 48px);
    padding: 0 clamp(48px, 6vw, 64px);
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .banner-image,
  [class*="banner-image"] {
    min-height: clamp(350px, 45vh, 500px);
  }
  
  .banner-image__title,
  .banner-image h2 {
    font-size: clamp(32px, 5vw, 42px);
    padding: 0 clamp(48px, 6vw, 64px);
  }
}

/* Mobile: ≤767px - Remove fixed heights, ensure safe padding */
@media screen and (max-width: 767px) {
  .banner-image,
  [class*="banner-image"] {
    min-height: clamp(300px, 50vh, 400px);
    height: auto;
  }
  
  .banner-image__title,
  .banner-image h2 {
    font-size: clamp(24px, 6vw, 32px);
    padding: 0 clamp(20px, 5vw, 24px);
    line-height: 1.2;
  }
  
  /* Apply subtle overlay gradient if needed for readability */
  .banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    pointer-events: none;
    z-index: 1;
  }
  
  .banner-image__title,
  .banner-image h2 {
    position: relative;
    z-index: 2;
  }
}

/* ===== FINAL CTA RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .final-cta {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .final-cta__title,
  .final-cta h2 {
    font-size: clamp(36px, 4vw, 48px);
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .final-cta {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .final-cta__title,
  .final-cta h2 {
    font-size: clamp(32px, 5vw, 42px);
  }
}

/* Mobile: ≤767px */
@media screen and (max-width: 767px) {
  .final-cta {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  .final-cta__title,
  .final-cta h2 {
    font-size: clamp(24px, 6vw, 32px);
  }
}

/* ===== FOOTER RESPONSIVE SYSTEM ===== */
/* Mobile: ≤767px - Stacked columns, readable spacing */
@media screen and (max-width: 767px) {
  .footer,
  .custom_footer {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  .footer__content-top,
  .footer__blocks {
    flex-direction: column;
    gap: clamp(24px, 6vw, 32px);
  }
  
  .footer__block {
    width: 100%;
  }
  
  .footer__list-social li,
  .footer__list-link li {
    margin-bottom: 0.75rem;
  }
  
  /* Ensure readable link spacing */
  .footer__list-link a,
  .footer__list-social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== ANNOUNCEMENT BAR + HEADER RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px - Prevent awkward wrapping */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .utility-bar,
  .announcement-marquee-section,
  .announcement-bar-clean {
    padding: clamp(10px, 1.2vw, 12px) clamp(48px, 6vw, 64px);
  }
  
  .announcement-bar__message,
  .announcement-item,
  .announcement-bar-clean__text,
  .announcement-bar-clean__link {
    font-size: clamp(13px, 1.3vw, 14px);
    line-height: 1.5;
  }
  
  .header__menu-item {
    font-size: clamp(12px, 1.2vw, 14px);
    padding: 0 clamp(8px, 1vw, 12px);
  }
  
  .header__heading-link img {
    max-width: clamp(120px, 12vw, 180px);
  }
  
  .header {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
}

/* Tablet: 768px - 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .utility-bar,
  .announcement-marquee-section,
  .announcement-bar-clean {
    padding: clamp(10px, 1.5vw, 12px) clamp(48px, 6vw, 64px);
  }
  
  .announcement-bar__message,
  .announcement-item,
  .announcement-bar-clean__text,
  .announcement-bar-clean__link {
    font-size: clamp(12px, 1.6vw, 13px);
    line-height: 1.5;
  }
  
  .header__menu-item {
    font-size: clamp(11px, 1.5vw, 13px);
    padding: 0 clamp(6px, 1vw, 10px);
  }
  
  .header {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
}

/* Mobile: ≤767px - Prevent text wrapping, stable height */
@media screen and (max-width: 767px) {
  .utility-bar,
  .announcement-marquee-section,
  .announcement-bar-clean {
    padding: clamp(8px, 2vw, 12px) clamp(20px, 5vw, 24px);
    min-height: 40px;
  }
  
  .announcement-bar-clean__container {
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.5;
  }
  
  .announcement-bar__message,
  .announcement-item,
  .announcement-bar-clean__text,
  .announcement-bar-clean__link {
    font-size: clamp(11px, 2.8vw, 13px);
    line-height: 1.5;
    /* Allow wrap but control spacing */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .header__menu-item {
    font-size: clamp(12px, 3vw, 14px);
  }
  
  .header {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  /* Prevent horizontal overflow in marquee */
  .announcement-bar-marquee__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== UTILITY CLASSES ===== */
/* Container max-widths */
.container-responsive {
  max-width: var(--container-max-desktop);
  margin: 0 auto;
  padding-left: var(--section-padding-desktop);
  padding-right: var(--section-padding-desktop);
}

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .container-responsive {
    max-width: var(--container-max-tablet);
    padding-left: var(--section-padding-tablet);
    padding-right: var(--section-padding-tablet);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container-responsive {
    max-width: var(--container-max-tablet);
    padding-left: var(--section-padding-tablet);
    padding-right: var(--section-padding-tablet);
  }
}

@media screen and (max-width: 767px) {
  .container-responsive {
    padding-left: var(--section-padding-mobile);
    padding-right: var(--section-padding-mobile);
  }
}

/* Touch-friendly tap targets */
@media screen and (max-width: 767px) {
  button,
  a.btn,
  .hero-cta,
  .faq-question,
  .best-sellers__nav-arrow,
  .product-categories__nav-arrow {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== GLOBAL OVERFLOW PREVENTION ===== */
/* Prevent horizontal overflow at all breakpoints */
/* CRITICAL: These rules ensure no horizontal scrolling at any breakpoint */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

* {
  box-sizing: border-box;
}

/* Ensure sections don't exceed viewport width */
section,
/* Global rule: Prevent scrollbars on sections unless explicitly needed */
.shopify-section,
section.shopify-section,
.section,
section.section {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  height: auto;
  max-height: none;
}

/* Prevent any child elements from causing scrollbars */
.shopify-section > *,
.section > * {
  overflow-y: visible;
  max-height: none;
}

/* Prevent images from causing overflow */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent marquee/ticker from causing overflow */
.announcement-bar-marquee__track,
.announcement-bar-marquee__wrapper {
  overflow: hidden;
  max-width: 100%;
}

/* Ensure grid containers don't overflow */
[class*="__grid"],
[class*="grid"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent flex containers from causing overflow */
[class*="__container"],
[class*="container"] {
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== FEATURED PRODUCT RESPONSIVE SYSTEM ===== */
/* Large Desktop: ≥1440px - 2 columns, preserve exact layout */
@media screen and (min-width: 1440px) {
  .featured-product .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 7vw, 80px);
  }
}

/* Desktop: 1024px - 1439px - 2 columns */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .featured-product {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .featured-product .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 60px);
  }
  
  .featured-product .product__info-wrapper {
    padding: 0 clamp(2rem, 4vw, 4rem);
  }
  
  .featured-product .product__title {
    font-size: clamp(32px, 4vw, 42px);
  }
  
  .featured-product .price {
    font-size: clamp(20px, 2.5vw, 24px);
  }
  
  .featured-product .product-form__submit {
    font-size: clamp(14px, 1.5vw, 16px);
    padding: clamp(12px, 1.5vw, 14px) clamp(24px, 3vw, 32px);
  }
}

/* Tablet: 768px - 1023px - Maintain 2 columns if readable, otherwise stack */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .featured-product {
    padding-left: clamp(48px, 6vw, 64px);
    padding-right: clamp(48px, 6vw, 64px);
  }
  
  .featured-product .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 40px);
  }
  
  .featured-product .product__info-wrapper {
    padding: 0 clamp(1.5rem, 3vw, 2.5rem);
  }
  
  .featured-product .product__title {
    font-size: clamp(28px, 4.5vw, 36px);
  }
  
  .featured-product .price {
    font-size: clamp(18px, 2.5vw, 22px);
  }
  
  .featured-product .product-form__submit {
    font-size: clamp(14px, 2vw, 16px);
    padding: 12px 24px;
  }
}

/* Mobile: ≤767px - Stack (image first, content second) */
@media screen and (max-width: 767px) {
  .featured-product {
    padding-left: clamp(20px, 5vw, 24px);
    padding-right: clamp(20px, 5vw, 24px);
  }
  
  .featured-product .product {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 6vw, 32px);
  }
  
  .featured-product .product__media-wrapper {
    order: -1;
    width: 100%;
  }
  
  .featured-product .product__info-wrapper {
    order: 2;
    padding: 0;
    width: 100%;
  }
  
  .featured-product .product__title {
    font-size: clamp(24px, 6vw, 32px);
    margin-bottom: 1rem;
  }
  
  .featured-product .price {
    font-size: clamp(20px, 5vw, 24px);
    margin-bottom: 1.5rem;
  }
  
  .featured-product .product-form__submit {
    font-size: clamp(14px, 3.5vw, 16px);
    width: 100%;
    padding: 14px 24px;
    min-height: 44px;
  }
  
  /* Ensure price and CTA remain prominent */
  .featured-product .product__price {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .featured-product .product-form {
    margin-top: 1.5rem;
  }
}

/* ===== FINAL CTA RESPONSIVE SYSTEM ===== */
/* Desktop: 1024px - 1439px - 2 columns */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .final-cta__content-wrapper {
    display: flex;
    flex-direction: row;
    gap: clamp(40px, 5vw, 60px);
  }
  
  .final-cta__image {
    flex: 0 0 45%;
  }
  
  .cta-content {
    flex: 1 1 55%;
  }
  
  .final-cta__desktop-title {
    font-size: clamp(36px, 4vw, 48px);
  }
  
  .final-cta__subtitle {
    font-size: clamp(24px, 3vw, 28px);
  }
}

/* Tablet: 768px - 1023px - 2 columns if readable, otherwise stack */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .final-cta__content-wrapper {
    display: flex;
    flex-direction: row;
    gap: clamp(30px, 4vw, 40px);
  }
  
  .final-cta__image {
    flex: 0 0 40%;
  }
  
  .cta-content {
    flex: 1 1 60%;
  }
  
  .final-cta__desktop-title {
    font-size: clamp(28px, 5vw, 36px);
  }
  
  .final-cta__subtitle {
    font-size: clamp(20px, 3.5vw, 24px);
  }
}

/* Mobile: ≤767px - Stack (image first, then content) */
@media screen and (max-width: 767px) {
  .final-cta__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 6vw, 32px);
  }
  
  .final-cta__image {
    flex: 1 1 100%;
    order: -1;
    width: 100%;
  }
  
  .cta-content {
    flex: 1 1 100%;
    order: 2;
  }
  
  .final-cta__desktop-title {
    display: none;
  }
  
  .final-cta__mobile-title {
    display: block;
    font-size: clamp(24px, 6vw, 32px);
  }
  
  .final-cta__subtitle {
    font-size: clamp(18px, 4.5vw, 22px);
  }
  
  /* Ensure price and CTA remain visible */
  .final-cta__price,
  .final-cta button,
  .final-cta a.btn {
    margin-top: 1rem;
  }
}