/** Shopify CDN: Minification failed

Line 16:9 Expected ":"
Line 19:2 Expected ":"
Line 20:2 Expected ":"
Line 21:2 Expected ":"
Line 22:2 Expected ":"
Line 23:2 Expected ":"
Line 24:2 Expected ":"
Line 25:2 Expected ":"
Line 26:2 Expected ":"
Line 28:2 Expected ":"
... and 87 more hidden warnings

**/
:root { 
  /* === Brand Palette (UPDATED from Logo) === */
  --color-brand-accent: #CBA69F;     /* Eto na yung Petals color (Pinalitan ang #d8aba0) */
  --color-accent-dark: #b18c85;       /* Eto na yung bagong hover color (Pinalitan ang #c79b91) */
  --color-brand-secondary: #977b8a;  /* DINAGDAG: Eto yung Leaves color */
  --color-bg-ivory: #fff9f8;
  --color-bg-white: #ffffff;
  --color-text-primary: #2f2f2f;
  --color-text-body: #3a3a3a;
  --color-text-muted: #666666;
  --color-border-sand: #f2e7e4;

  /* === Alert Colors === */
  --color-error-bg: #fde8e8;
  --color-error-border: #eac6c6;
  --color-error-text: #a13d3d;
  --color-warning-bg: #fff8e1;
  --color-warning-border: #ffecb3;
  --color-warning-text: #8d6e00;

  /* === Fonts === */
  --font-family-heading: 'Ovo', serif;
  --font-family-body: 'Karla', sans-serif;

  /* === Fluid Font Sizes (Responsive) === */
  --fs-h1: clamp(2.4rem, 5vw + 1rem, 3.4rem);
  --fs-h2: clamp(1.9rem, 4vw + 1rem, 2.6rem);
  --fs-h3: clamp(1.5rem, 3vw + 0.8rem, 1.9rem);
  --fs-body: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  --fs-small: clamp(0.875rem, 0.5vw + 0.5rem, 0.95rem);

  /* === Font Weights === */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Layout Rhythm === */
  --line-height-body: 1.6;
  --line-height-heading: 1.25;
  --letter-spacing-body: 0.01em;
  --letter-spacing-heading: 0.03em;
  --spacing-unit: 8px; /* Base unit */

  /* NEW: Fluid Spacing Variables */
  --space-s: clamp(0.75rem, 1vw + 0.5rem, 1rem);      /* approx 12px-16px */
  --space-m: clamp(1.25rem, 2vw + 0.75rem, 1.75rem); /* approx 20px-28px */
  --space-l: clamp(2rem, 4vw + 1rem, 3rem);          /* approx 32px-48px */

  /* === Radius & Shadow === */
  --radius-card: 10px;
  --shadow-soft: 0 4px 10px rgba(0,0,0,0.05);
  --shadow-hover: 0 8px 20px rgba(0,0,0,0.08);
  --transition-base: all 0.3s ease;

  /* === Theme Alpha/Opacity Variables === */
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;

  --container-max: 1200px;
  --container-padding: var(--space-m);
}

/* === Base Resets === */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 100%; /* Ensures 'rem' units scale with user's browser settings */
}
*, *::before, *::after {
  box-sizing: inherit;
}
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 40%;
  height: 2px;
  background-color: var(--color-brand-accent); /* Awtomatikong gagamitin nito ang #CBA69F */
  border-radius: 1px;
}

/* === Body === */
body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-body);
  background-color: var(--color-bg-ivory);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

/* === Paragraphs === */
p {
  margin-top: 0;
  margin-bottom: var(--space-m); /* UPDATED: Now uses fluid spacing */
  max-width: 65ch;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-text-primary);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin: var(--space-l) 0 var(--space-s); /* UPDATED: Now uses fluid spacing */
  text-transform: none;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-regular) !important; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium) !important; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold) !important; }

/* === Links (IMPROVED for Accessibility) === */
a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-accent); /* Awtomatikong gagamitin nito ang #CBA69F */
  text-underline-offset: 4px;
  transition: var(--transition-base);
  font-weight: var(--fw-medium);
  border-radius: 2px; /* Helps style the focus-visible outline */
}

a:hover {
  color: var(--color-brand-accent); /* Magiging #CBA69F */
  text-decoration-color: var(--color-accent-dark); /* Magiging #b18c85 */
}

/* NEW: Modern focus state for keyboard/accessibility users */
a:focus-visible {
  color: var(--color-brand-accent); /* Magiging #CBA69F */
  text-decoration-color: var(--color-accent-dark); /* Magiging #b18c85 */
  outline: 2px solid var(--color-brand-accent); /* Magiging #CBA69F */
  outline-offset: 4px;
}

/* NEW: Responsive Media (Best Practice) */
img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block; /* Removes bottom space */
}

/* === Accessibility === */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Ito ay para siguradong pati 'yung classes ay susunod */
.h0, .h1, .h2, .h3, .h4, .h5,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading) !important;
}

body,
.text-body,
p, a, span, div, li,
input, textarea, button,
select {
  font-family: var(--font-family-body) !important;
}
/* ==================================================
 * === V3.1 Global Button Styling ===
 * (Mobile-First & Branded)
 * ==================================================
*/

/*
 * 1. Base Button Style (Ang Pundasyon)
 * Ito ang nag-se-set ng font, shape, at padding para sa LAHAT ng buttons.
 */
.button,
.product-form__submit,
input[type="submit"] {
  font-family: var(--font-family-body); /* Karla - mas readable sa button */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  
  border-radius: var(--radius-card); /* 10px rounded corners */
  padding: 0.9rem 1.75rem;
  cursor: pointer;
  text-align: center;
  
  /* Para sa smooth hover effect */
  transition: var(--transition-base);
  
  /* Tinitiyak na tama ang sukat */
  box-sizing: border-box; 
  
  /* Inaalis ang default style ng theme */
  box-shadow: none;
}

/*
 * 2. Primary Button Style (Ang "Solid" Button)
 * Ito ang default style para sa "Add to Cart", "Check Out", atbp.
 */
.button--primary,
.product-form__submit,
input[type="submit"] {
  background-color: var(--color-brand-accent);
  color: var(--color-bg-white);
  border: 2px solid var(--color-brand-accent);
}

/* Hover effect for Primary Button */
.button--primary:hover,
.product-form__submit:hover,
input[type="submit"]:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-bg-white);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/*
 * 3. Secondary Button Style (Ang "Outline" Button)
 * Ginagamit para sa "View All" or less important actions.
 */
.button--secondary {
  background-color: transparent;
  color: var(--color-brand-accent);
  border: 2px solid var(--color-brand-accent);
  box-shadow: none;
}

/* Hover effect for Secondary Button */
.button--secondary:hover {
  background-color: var(--color-brand-accent);
  color: var(--color-bg-white);
  border-color: var(--color-brand-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* ==================================================
 * === V3.1 Announcement Bar (Logo-Aligned) ===
 * ==================================================
*/

.announcement-bar {
  /* Gagamitin natin ang "secret weapon" color mo (galing sa dahon) */
  background-color: var(--color-brand-secondary); 
  color: var(--color-bg-white);
  
  font-family: var(--font-family-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  text-align: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Tiyakin na ang text (kahit <p> or <div>) ay puti */
.announcement-bar p,
.announcement-bar .announcement-bar__message {
   color: var(--color-bg-white);
}

/* I-style din natin ang link sa loob nito */
.announcement-bar a,
.announcement-bar .link {
  color: var(--color-bg-white);
  text-decoration: underline;
  text-decoration-color: var(--color-bg-white);
  text-underline-offset: 4px;
  transition: var(--transition-base);
  font-weight: var(--fw-semibold); /* Para mas pansin ang link */
}

.announcement-bar a:hover,
.announcement-bar .link:hover {
  /* * Eto ang "premium" detail: 
   * On hover, ang kulay ng underline ay magiging 
   * main accent color mo! (yung kulay ng petals)
   */
  text-decoration-color: var(--color-brand-accent); 
}

/* ==================================================
 * === V3.1 "On Sale" Badge (Logo-Aligned) ===
 * ==================================================
*/

/*
 * Ito ang mag-o-override sa default "Sale" badge ng Dawn theme.
 * Papalitan natin ang kulay pula ng brand color mo.
 */
.badge.badge--on-sale,
.product-card-wrapper .badge { 
  background-color: var(--color-brand-secondary); /* Eto yung kulay ng dahon! */
  color: var(--color-bg-white);
  
  font-family: var(--font-family-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  
  border-radius: 4px; /* Mas malinis tingnan kaysa sa malaking radius */
  padding: 0.3em 0.7em; /* Mas proportional sa font size */
  
  /* Inaalis ang default border at shadow ng Dawn */
  border: none;
  box-shadow: none;
}