/** Shopify CDN: Minification failed

Line 5732:0 Expected "}" to go with "{"

**/
/*
==========================================================================
   0. FONT FACE — Proxima Nova (self-hosted; loaded via this file)
   ==========================================================================
 */

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — serif display headings (Bouqs-style serif/sans pairing) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
==========================================================================
   1. DESIGN TOKENS — :root custom properties
   ==========================================================================
 */

:root {
  /* === Color — Text === */
  --color-text-primary: #333333;
  --color-text-secondary: #144b3c;
  --color-text-tertiary: #ffffff;
  --color-text-body: #3b3b3b;
  --color-text-muted: #7b7b7b;

  /* === Color — Surface === */
  --color-surface-base: #000000;
  --color-surface-raised: #214b37;
  --color-surface-strong: #8fc9ff;
  --color-bg-ivory: #fff9f8;
  --color-bg-white: #fff;

  /* === Color — Border === */
  --color-border-default: #bbc3ce;
  --color-border-sand: rgb(235 235 235);

  /* === Color — Brand === */
  --color-brand-accent: #9f6e62;
  --color-brand-secondary: #594951;
  --color-accent-dark: #8c4e43;
  --color-accent-light: #ffb4a8;
  --price-color-regular: #8e5659;
  --price-color-sale: #8e5659;

  /* === Color — Brand Refinements (muted, cohesive; clean/professional) === */
  --brand-refined: #9a6a60; /* primary actions: primary button, hero CTA, sticky ATC */
  --brand-refined-hover: #7f4d44; /* hover / pressed depth */
  --brand-tint: #f6efec; /* soft warm surface: upsell bg, picker selected fill */
  --brand-tint-border: #e8dcd6; /* hairline on warm tint */
  --badge-bg: #efe5e1; /* badge background — muted blush */
  --badge-text: #855044; /* badge text — deep rose */
  --announcement-bg: #8f6f69; /* refined muted mauve-brown (cohesive w/ brand) */
  --announcement-text: #fdfbfa; /* near-white */

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

  /* === Font Family === */
  --font-family-primary: proxima-nova;
  --font-family-stack: proxima-nova, sans-serif;
  --font-family-display: "Cormorant Garamond", georgia, serif;
  --font-family-heading: "Cormorant Garamond", georgia, serif;
  --font-family-body: proxima-nova, sans-serif;
  --font-stack-base: proxima-nova, sans-serif;
  --font-stack-header: "Cormorant Garamond", georgia, serif;
  --font-stack-body: proxima-nova, sans-serif;
  --font-body-family: proxima-nova, sans-serif;
  --font-heading-family: "Cormorant Garamond", georgia, serif;
  --font-primary:
    proxima-nova, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    sans-serif;
  --font-accent: "Cormorant Garamond", georgia, serif;

  /* === Typography Scale === */
  --font-size-base: 16px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 18.72px;
  --font-size-2xl: 24px;
  --font-size-3xl: 40px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --font-size-body: 16px;
  --font-weight-base: 400;
  --font-weight-body: 400;
  --font-weight-heading: 600;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --line-height-base: 24px;
  --line-height-body: 1.45;
  --line-height-heading: 1.3;

  /* Fluid Type Scale */
  --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);

  /* === Spacing Scale === */
  --space-1: 5.56px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 72px;
  --space-6: 91.67px;
  --space-7: 94.05px;
  --space-8: 109px;
  --space-s: clamp(0.75rem, 1vw + 0.5rem, 1rem);
  --space-m: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
  --space-l: clamp(2rem, 4vw + 1rem, 3rem);
  --space-xl: clamp(3rem, 5vw + 1.5rem, 4.5rem);

  /* === Visual Effects === */
  --radius-card: 8px;
  --shadow-soft:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --shadow-hover: 0 8px 25px rgb(0 0 0 / 8%);
  --shadow-glow: 0 8px 20px rgb(232 139 127 / 30%);
  --transition-base: all 0.3s ease;

  /* === Motion === */
  --motion-duration-instant: 200ms;

  /* === Layout === */
  --container-max: 1200px;
  --container-max-width: 1440px;
  --container-padding: var(--space-s);
  --container-gutter: max(5vw, 20px);
}

/* 
==========================================================================
   2. GLOBAL RESET
   ==========================================================================
 */

/* ==================================================
   🪶 GLOBAL RESET
   ================================================== */

/*
==========================================================================
   0. FONT FACE — Proxima Nova (self-hosted; loaded via this file)
   ==========================================================================
 */

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: proxima-nova;
  src: url("proxima-nova-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — serif display headings (Bouqs-style serif/sans pairing) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
==========================================================================
   1. DESIGN TOKENS — :root custom properties
   ==========================================================================
 */


 /*
==========================================================================
   1. DESIGN TOKENS — :root custom properties
   ==========================================================================
 */
:root {
  /* === Color — Text === */
  --color-text-primary: #333333;
  --color-text-secondary: #144b3c;
  --color-text-tertiary: #ffffff;
  --color-text-body: #3b3b3b;
  --color-text-muted: #7b7b7b;

  /* === Color — Surface === */
  --color-surface-base: #000000;
  --color-surface-raised: #214b37;
  --color-surface-strong: #8fc9ff;
  --color-bg-ivory: #fff9f8;
  --color-bg-white: #fff;

  /* === Color — Border === */
  --color-border-default: #bbc3ce;
  --color-border-sand: rgb(235 235 235);

  /* === Color — Brand === */
  --color-brand-accent: #9f6e62;
  --color-brand-secondary: #594951;
  --color-accent-dark: #8c4e43;
  --color-accent-light: #ffb4a8;
  --price-color-regular: #8e5659;
  --price-color-sale: #8e5659;

  /* === Color — Brand Refinements (muted, cohesive; clean/professional) === */
  --brand-refined: #9a6a60; /* primary actions: primary button, hero CTA, sticky ATC */
  --brand-refined-hover: #7f4d44; /* hover / pressed depth */
  --brand-tint: #f6efec; /* soft warm surface: upsell bg, picker selected fill */
  --brand-tint-border: #e8dcd6; /* hairline on warm tint */
  --badge-bg: #efe5e1; /* badge background — muted blush */
  --badge-text: #855044; /* badge text — deep rose */
  --announcement-bg: #8f6f69; /* refined muted mauve-brown (cohesive w/ brand) */
  --announcement-text: #fdfbfa; /* near-white */

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

  /* === Font Family === */
  --font-family-primary: proxima-nova;
  --font-family-stack: proxima-nova, sans-serif;
  --font-family-display: "Cormorant Garamond", georgia, serif;
  --font-family-heading: "Cormorant Garamond", georgia, serif;
  --font-family-body: proxima-nova, sans-serif;
  --font-stack-base: proxima-nova, sans-serif;
  --font-stack-header: "Cormorant Garamond", georgia, serif;
  --font-stack-body: proxima-nova, sans-serif;
  --font-body-family: proxima-nova, sans-serif;
  --font-heading-family: "Cormorant Garamond", georgia, serif;
  --font-primary:
    proxima-nova, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    sans-serif;
  --font-accent: "Cormorant Garamond", georgia, serif;

  /* === Typography Scale === */
  --font-size-base: 16px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 18.72px;
  --font-size-2xl: 24px;
  --font-size-3xl: 40px;
  --font-size-small: 14px;
  --font-size-large: 18px;
  --font-size-body: 16px;
  --font-weight-base: 400;
  --font-weight-body: 400;
  --font-weight-heading: 600;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --line-height-base: 24px;
  --line-height-body: 1.45;
  --line-height-heading: 1.3;

  /* Fluid Type Scale */
  --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);

  /* === Spacing Scale === */
  --space-1: 5.56px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 72px;
  --space-6: 91.67px;
  --space-7: 94.05px;
  --space-8: 109px;
  --space-s: clamp(0.75rem, 1vw + 0.5rem, 1rem);
  --space-m: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
  --space-l: clamp(2rem, 4vw + 1rem, 3rem);
  --space-xl: clamp(3rem, 5vw + 1.5rem, 4.5rem);

  /* === Visual Effects === */
  --radius-card: 8px;
  --shadow-soft:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --shadow-hover: 0 8px 25px rgb(0 0 0 / 8%);
  --shadow-glow: 0 8px 20px rgb(232 139 127 / 30%);
  --transition-base: all 0.3s ease;

  /* === Motion === */
  --motion-duration-instant: 200ms;

  /* === Layout === */
  --container-max: 1200px;
  --container-max-width: 1440px;
  --container-padding: var(--space-s);
  --container-gutter: max(5vw, 20px);
}

/* 
==========================================================================
   2. GLOBAL RESET
   ==========================================================================
 */

/* ==================================================
   🪶 GLOBAL RESET
   ================================================== */

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  background-color: var(--color-bg-ivory);
  background: var(--color-bg-ivory);
  line-height: var(--line-height-base); /*  */
  font-size: var(--font-size-base); /*  */
  color: var(--color-text-body);
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
}

.global-media-settings {
  border-radius: var(--radius-card);
}

.color-background-1,
.gradient {
  background-color: #fff;
  background-image: none;
}

/* === 🪶 TYPOGRAPHY SYSTEM === */

body,
.text-body,
p,
a,
div,
li,
input,
textarea,
select {
  font-family: var(--font-family-body);
  letter-spacing: 0.01em;
  font-size: 15px;
}

.page-width,
.container {
  max-width: var(--container-max);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  margin: 0 auto;
}

/* 🔹 Universal section padding (EXCLUDES header and announcement bar) */

/* ==================================================
   🛍 PRODUCT CARD STYLING
   ================================================== */

.full-unstyled-link {
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===============================
   🌷 Product Description Preview
   =============================== */

/* ==================================================
 * === V3.1 Testimonials (Third-Party App) Styling ===
 * ==================================================
*/

div.VtlsTestimonialBlock__Content {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border-sand);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.VtlsTestimonialBlock:hover div.VtlsTestimonialBlock__Content {
  box-shadow: var(--shadow-hover); /*  */
  transform: translateY(-4px);
}

.VtlsTestimonialBlockStarShape svg path {
  fill: var(--color-brand-accent); /*  */
}

vtls-expandable-text-testimonials.VtlsTestimonialBlockText {
  font-family: var(--font-family-body); /*  */
  color: var(--color-text-body); /*  */
  line-height: var(--line-height-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
}

div.VtlsTestimonialBlockAuthor__AuthorName {
  font-family: var(--font-family-body); /*  */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small); /*  */
  color: var(--color-text-primary); /*  */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.button:disabled,
.button[disabled],
input[type="submit"]:disabled,
button[type="submit"]:disabled {
  background-color: #ede6e4;
  color: #9b9b9b;
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* === Secondary Button === */

button.button.button--secondary {
  background-color: transparent;
  color: var(--color-brand-accent);
  border: 2px solid var(--color-brand-accent);
  border-radius: var(--radius-card, 12px); /*  */
  padding: calc(var(--space-s, 0.75rem) - 2px)
    calc(var(--space-m, 1.25rem) - 2px);
  font-family: var(--font-family-body, proxima-nova, sans-serif);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-body, 1rem);
  transition: var(--transition-base, all 0.3s ease);
  cursor: pointer;
  letter-spacing: 0.3px;
  margin-top: var(--space-s);

  /* consolidated */
  text-shadow: 0 1px 3px rgb(0 0 0 / 10%);

  /* consolidated */
}

button.button.button--secondary:hover {
  background-color: var(--color-brand-accent);
  color: var(--color-bg-white, #fff);
  border-color: var(--color-brand-accent);
  box-shadow: var(--shadow-hover, 0 8px 25px rgb(0 0 0 / 8%));
  transform: translateY(-2px);
}

button.button.button--secondary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
}

button.button.button--secondary:disabled,
button.button.button--secondary[disabled] {
  background-color: transparent;
  color: var(--color-text-muted, #555);
  border-color: var(--color-text-muted, #555);
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.icon_icon-caret {
  display: none;
}

/* Prevent horizontal shaking on mobile */

html {
  overflow-x: hidden;
}

html,
body {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

svg.icon.icon-remove,
a.button.button--tertiary {
  color: #999;
  background-color: transparent; /*  */
}

.gf-button {
  border: 0.8px solid;
  border-radius: 50px;
  padding: 5px; /*  */
}

/* ==================================================
   🪶 GLOBAL RESET
   ================================================== */

/* === 🪶 TYPOGRAPHY SYSTEM === */

body,
.text-body,
p,
a,
span,
div,
li,
input,
textarea,
select {
  font-family: var(--font-family-body);
  letter-spacing: 0.01em;
  font-size: 15px;
}

/* ==================================================
   🛍 PRODUCT CARD STYLING
   ================================================== */

/* ===============================
   🌷 Product Description Preview
   =============================== */

.description-preview {
  display: grid;
  grid-template-rows: 120px;
  transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

/* Expanded */

.description-preview.expanded {
  grid-template-rows: 1fr;
}

/* No-JS fallback: show full product description when JavaScript is unavailable */
.no-js .description-preview {
  grid-template-rows: 1fr;
  overflow: visible;
}

.description-preview__inner {
  min-height: 0;
  overflow: hidden;
}

/* Optional: remove fade if using clamp */

.description-preview::after {
  display: none;
}

/* Button style */

.see-more-btn {
  margin-top: 1px;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px; /*  */
  font-weight: 500;
  color: #5c3a42;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0;
  margin-left: 8px; /*  */
}

/* Dito lang gagana ang Hover/Animation para hindi magulo sa cellphone */

.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.4;
  color: var(--color-text-body);
}

/* Your brand accent */

p .benefit-list li:last-child {
  margin-bottom: 0;
}

.perfect-for-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.perfect-for-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================
   🛒 STICKY ADD TO CART (MOBILE)
   ========================= */

/* =========================
   ⚡ MICRO-OPTIMIZATIONS
   ========================= */

/* 1. Urgency Pulse Animation */

@keyframes pulse-orange {
  0% {
    box-shadow: 0 0 0 0 rgb(255 152 0 / 40%);
  }

  70% {
    box-shadow: 0 0 0 6px rgb(255 152 0 / 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(255 152 0 / 0%);
  }
}

/* ==================================================
   ? CSS-FIRST ANIMATIONS - " The Bloom Edit\
 Premium Micro-Interactions Without JavaScript
 ================================================== */

/* Fade In Up Animation for Product Cards */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle Pulse for \Sale\ Badges */

@keyframes gentlePulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Sale Badge Pulse — desktop only */

.badge--bottom-left,
.badge {
  animation: gentlePulse 1.2s ease-in-out 1;
  animation-fill-mode: none;
}

/* Disable badge animation on mobile — prevents off-screen composite layer repaints */

@media (max-width: 768px) {
  .badge--bottom-left,
  .badge,
  .fc-bestseller-badge {
    animation: none;
    will-change: auto;
  }
}

/* Price Highlight Animation */

/* Reduce Motion for Accessibility */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms; /*  */
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ==================================================
 END OF \THE BLOOM EDIT\ REDESIGN
 ================================================== */

/* ==================================================
   Ag-4: UX REFINEMENTS & 8PX GRID IMPLEMENTATION (RESPONSIBLE)
   Validated by: Agent 3 | Fixed for Mobile
   ================================================= */

/* 2. Product Card Rhythm (Global)
   Fix: Title & Price disconnected */

/* ==================================================
   📱 MOBILE SETTINGS (Default: Compact & Fast)
   Screen width < 750px
   ================================================== */

[class*="section-template--"][class*="featured_collection"] {
  padding-top: var(--space-32); /* 32px lang sa mobile */
  padding-bottom: var(--space-32); /*  */
}

/* ==================================================
   💻 DESKTOP SETTINGS (Override: Airy & Premium)
   Screen width >= 750px
   ================================================== */

@media screen and (width >= 750px) {
  [class*="section-template--"][class*="featured_collection"] {
    padding-top: var(--space-80); /* Balik sa 80px pag Desktop */
    padding-bottom: var(--space-80); /*  */
  }
}

/* ==================================================
   🖥️ LARGE DESKTOP (990px+): tighter top padding
   Reduces the section-to-section gap between Shop by
   Occasion and Flowers for Every Occasion from 136px
   to ~88px while keeping the bottom padding spacious.
   ================================================== */

@media screen and (width >= 990px) {
  [class*="section-template--"][class*="featured_collection"] {
    padding-top: 56px;
  }
}

/* =========================================================
Cart PAge
   ========================================================= */

/* ==============================
   GLOBAL TYPOGRAPHY & PRICE CSS
   Ready for Antigravity Injection
   ============================== */

/* 2. Global Body & Inputs */

body,
p,
li,
label,
input,
textarea,
select,
button,
.body {
  font-family: var(--font-stack-base); /*  */
  font-size: var(--font-size-body); /*  */
  line-height: var(--line-height-body); /*  */
  font-weight: var(--font-weight-body); /*  */
  color: #222; /*  */

  /* Primary text */
}

/* Force Messenger Icon to be Black */

.icon-messenger {
  fill: #fff; /*  */ /* O kaya 'currentColor' para sumunod sa theme color */
  color: #000; /*  */
  stroke: #333; /*  */
}

/* ============================= */

/* SECONDARY BUTTON */

/* ============================= */

.button--secondary {
  background-color: #4a3f42; /*  */
  border-color: #2f2a2c; /*  */
  color: #fff; /*  */
}

.button--secondary:hover {
  background-color: #2f2a2c; /*  */
  border-color: #1f1c1d; /*  */
  color: #fff; /*  */
}

/* ============================= */

/* OUTLINE BUTTON STYLE */

/* ============================= */

.button--outline {
  background-color: transparent; /*  */
  border: 1px solid var(--color-brand-accent); /*  */
  color: var(--color-brand-accent); /*  */
}

.button--outline:hover {
  background-color: var(--color-brand-accent); /*  */
  color: #fff; /*  */
}

/*  Clip horizontal overflow from app animations — clip is safe for fixed children unlike hidden  */

/* ===== ACCENT FONT (Optional) ===== */

.section-heading,
.hero__title,
.banner__heading,
.title-wrapper .title,
.section-header .title,
.rich-text__heading,
h2.title,
h1.title {
  font-family: var(--font-family-display);
  font-weight: 600; /*  */
  line-height: 1.15; /*  */
  letter-spacing: 0.25px;
}

/* === Bouqs-style serif display scale (mobile-first; clamp scales to desktop) === */
/* Hero — largest display heading, tight tracking at size */
body.template-index .banner__heading {
  font-size: clamp(32px, 6.5vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}

/* Section titles — one step below the hero */
body.template-index .title-wrapper .title,
body.template-index .section-header .title,
body.template-index .rich-text__heading,
.section-heading {
  font-size: clamp(25px, 4.2vw, 38px);
  letter-spacing: 0.3px;
}

/* Keep product card titles + compact UI in sans — Bouqs uses serif for display headings only */
.card__heading,
.card__heading a,
.card-information .card__heading,
.product-card__title,
h2.product-title {
  font-family: var(--font-family-body);
}

/* === Airy section rhythm — Bouqs-style breathing room (mobile-first; homepage only).
   Tokens are clamp-based so they scale up on desktop automatically. === */
body.template-index #MainContent > .shopify-section + .shopify-section {
  padding-top: var(--space-l);
}

body.template-index #MainContent > .shopify-section:last-child {
  padding-bottom: var(--space-l);
}

body.template-index #MainContent .title-wrapper,
body.template-index #MainContent .section-header {
  margin-bottom: var(--space-m);
}

/* === Refined announcement bar — cohesive muted brand tone === */
.utility-bar,
.announcement-bar {
  background: var(--announcement-bg);
}

.utility-bar .announcement-bar__message,
.utility-bar a,
.announcement-bar__message,
.announcement-bar a {
  color: var(--announcement-text);
}

/* ===== BUTTON TEXT ===== */

button,
.button,
a.button,
input[type="button"],
input[type="submit"] {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600; /*  */
  font-size: 14px; /*  */
  line-height: 1.5;
}

/* ===== FORM INPUTS ===== */

input,
textarea,
select {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.5; /*  */
}

/* ===== ACCESSIBILITY ===== */

small,
.text-small {
  font-size: 13px;
  line-height: 1.5;
}

a,
button,
input,
select,
textarea,
label,
summary {
  touch-action: manipulation;
}

body.template-index .testimonial-carousel-v2 {
  padding-top: 28px;
  padding-bottom: 36px; /*  */
}

@media screen and (width >= 750px) {
  body.template-index .testimonial-carousel-v2 {
    padding-top: 56px;
    padding-bottom: 40px; /*  */
  }
}

@media screen and (width >= 990px) {
  body.template-index .testimonial-carousel-v2 {
    padding-top: 60px;
    padding-bottom: 44px; /*  */
  }
}

body.template-index #shopify-section-17715761038c3c3e6b,
body.template-index #shopify-section-177157643681fb7a7c {
  margin-top: 0; /*  */
  margin-bottom: 0; /*  */
}

/* Testimonials bottom — second pass */

@media screen and (width >= 990px) {
  .tc-heading {
    font-size: 28px; /*  */
  }
}

/* ── Social platform badges — brand-aligned warm tint
   Liquid section selector: #testimonial-carousel-{id} .tc-platform-badge--{X}
   Specificity (1,1,0). Override at (1,2,0) by chaining .tc-platform-badge. */

#testimonial-carousel-template--19876689805499__testimonial_carouselv2_j4jeHA
  .tc-platform-badge--facebook.tc-platform-badge,
#testimonial-carousel-template--19876689805499__testimonial_carouselv2_j4jeHA
  .tc-platform-badge--messenger.tc-platform-badge {
  background: var(--brand-tint);
  color: var(--brand-refined);
  border-color: var(--brand-tint-border);
}

/* ── 9. Accordion: Visual card frame without icon conflict
   .accordion confirmed in component-accordion.css:22
   .accordion details[open] confirmed in component-accordion.css:45
   We do NOT add ::after +/- content — Dawn uses .icon-caret SVG.
   ─────────────────────────────────────────────────────── */

.accordion {
  border: 1px solid var(--color-border-sand);
  border-radius: var(--radius-card);
  margin-bottom: 0.6rem;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
  overflow: hidden;
}

.accordion details[open] {
  background-color: var(--color-bg-ivory);
  border-color: var(--color-brand-accent);
}

.accordion summary {
  transition: color 0.2s ease;
}

.accordion summary:hover {
  color: var(--color-accent-dark);
}

/* ── 11. Social links: Hover circle background ──────────
   .list-social__link confirmed in component-list-social.css:18
   SVG icons use fill not color — target the svg path.
   We add a circular bg on hover without breaking icon size.
   ─────────────────────────────────────────────────────── */

.list-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.list-social__link:hover {
  background-color: var(--color-bg-ivory);
  transform: translateY(-2px);
}

/* ── 12. Focus-visible: Brand-colored outline ───────────
   Replaces browser default blue outline site-wide.
   ─────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-brand-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 13. Reduced motion: Respect user preference ────────
   Disable transforms/transitions for users who opt-out.
   Does NOT disable Dawn's JS-based animations (those need JS).
   ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .product-card-wrapper,
  .product-card-wrapper:hover,
  .product-card-wrapper .card__media .media img,
  .section-collection-list .collection-list__item,
  .header__menu-item::after,
  .list-social__link,
  .accordion,
  .accordion summary,
  .button,
  .product-form__submit {
    transition: none; /*  */
    transform: none; /*  */
    animation: none; /*  */
  }
}

/* Suppress sticky hover-lift on touch devices */

@media (hover: none) {
  .product-card-wrapper:hover .card,
  .product-card-wrapper:active .card,
  .card-wrapper:hover .card,
  .card-wrapper:active .card {
    transform: none; /*  */
    box-shadow:
      0 1px 2px rgb(132 90 96 / 4%),
      0 6px 18px rgb(132 90 96 / 7%); /*  */
  }
}

/* 
==========================================================================
   3. TYPOGRAPHY
   ==========================================================================
 */

.rte p,
.rte li {
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
  font-size: 15px;
  margin: 0;
  max-width: 65ch;
  color: var(--color-text-body);
}

/* === Headings === */

h1,
h2,
h3 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  letter-spacing: 0.02em;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
}

h3,
h4,
h5,
h6 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
}

/* ==============================================
   🚀 CRO UPDATE: PRODUCT PAGE ADD-TO-CART
   Priority: High | Device: Mobile First
   ============================================== */

/* --- ADD-ONS SECTION CLEANUP --- */

/* * MOD: Tighten the spacing and normalize typography for a cleaner, faster read.
 * Reduces the visual weight of the add-on title and clarifies its purpose.
 */

h3.inline-richtext {
  font-size: 14px; /*  */

  /* Smaller, less intrusive heading */
  color: var(--color-text-body); /*  */
  margin-bottom: 8px; /*  */
}

/* 3. Headings */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-family-display); /* serif display headings */
  font-weight: var(--font-weight-heading); /*  */
  line-height: 1.2; /*  */
  color: #111; /*  */
}

/* ============================= */

/* TEXT LINKS */

/* ============================= */

a {
  color: var(--color-brand-accent);
}

a:hover {
  color: var(--price-color-regular); /*  */
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-display);
  line-height: var(--line-height-heading); /*  */
}

/* 
==========================================================================
   4. HEADER & NAVIGATION
   ==========================================================================
 */

.top-info-bar1,
.info-item1 {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-family-body);
  font-weight: var(--fw-regular);
}

/* === Top info bar === */

.top-info-bar1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  padding: 8px 0;
  flex-wrap: wrap;
}

/* ===== NAVIGATION ===== */

nav,
.navigation,
.header__menu,
.menu {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px; /*  */
  font-weight: 600; /*  */
}

/* ==================================================
   HEADER SYSTEM RESET
   Single source of truth for header + announcement bar
   ================================================== */

.header-wrapper {
  --lpc-header-padding-x: 1.6rem;
  --lpc-header-padding-y: 0.45rem;
  --lpc-header-min-height: 4.8rem;
  --lpc-header-icon-size: 3.2rem;
  --lpc-header-logo-max-height: 4.6rem;
  --lpc-announcement-padding-x: 1rem;
  --lpc-announcement-padding-y: 0.45rem;
  --lpc-announcement-font-size: 1.3rem;
  --lpc-announcement-line-height: 1.25;

  background-color: rgb(var(--color-background));
  box-shadow: var(
    --shadow-1
  ); /* was 0 7px 13px -11px (colorless → currentColor) */
}

.header-wrapper .header,
.header-wrapper .header__inner {
  align-items: center;
}

.header-wrapper .header {
  min-height: var(--lpc-header-min-height);
  padding: var(--lpc-header-padding-y) var(--lpc-header-padding-x);
  column-gap: 0.4rem;
}

.header .header__heading {
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0;
  min-height: var(--lpc-header-icon-size);
}

.header .header__heading-link,
.header .header__heading a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  padding: 3px;
  line-height: 0;
  min-height: auto;
}

.header .header__heading-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--lpc-header-logo-max-height);
}

.header .header__icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  margin: 0;
  padding-right: 0;
  min-height: var(--lpc-header-icon-size);
}

.header .header__icon,
.header .header__icon--cart,
.header .header__icon--menu,
.icon-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lpc-header-icon-size);
  height: var(--lpc-header-icon-size);
  min-width: var(--lpc-header-icon-size);
  min-height: var(--lpc-header-icon-size);
  margin: 0;
  padding: 0;
  line-height: 1;
}

.header .header__icon .icon,
.header .header__icon--cart .icon,
.header .header__icon--menu .icon,
.icon-cart .icon,
svg.icon.icon-cart {
  width: 1.9rem;
  height: 1.9rem;
}

.header .header__icon--cart {
  margin-right: 5px;
}

.header-wrapper #cart-icon-bubble .cart-count-bubble {
  inset: 0.15rem 0.05rem auto auto;
  min-width: 1.3rem;
  width: auto;
  height: 1.3rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}

.header .header__icon--menu {
  margin-left: 5px;
}

/* Announcement bar */

.announcement-bar {
  min-height: 0;
  padding: 0;
}

.announcement-bar__message {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  min-height: 0;
  padding: var(--lpc-announcement-padding-y) var(--lpc-announcement-padding-x);
  max-width: 100%;
  text-align: center;
  font-size: var(--lpc-announcement-font-size);
  line-height: var(--lpc-announcement-line-height);
  letter-spacing: 0.02em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

.announcement-bar__message span,
.announcement-bar__message p,
.announcement-bar__message a {
  line-height: inherit;
}

.announcement-bar__message a {
  text-decoration-thickness: 0.08rem;
  text-underline-offset: 0.15rem;
}

.header__active-menu-item {
  color: var(--brand-refined);
  font-weight: 700;
}

.link--text,
.header__menu-item,
.link {
  color: #000;
  font-size: 14px;
}

.header-wrapper header-drawer .menu-drawer__menu-item-icon {
  display: none;
}

/* Menu drawer — social links styled as labelled rows matching account link */
.menu-drawer__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-drawer__social-list li {
  margin: 0;
}

.menu-drawer__social-list .svg-wrapper {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-drawer__social-list .svg-wrapper svg {
  width: 100%;
  height: 100%;
}

/* ==================================================
   DESKTOP HEADER PREMIUM POLISH
   Applied at min-width: 990px — no mobile/tablet impact
   ================================================== */

@media screen and (width >= 990px) {
  /* --- Desktop token overrides --- */
  .header-wrapper {
    --lpc-header-min-height: 5.4rem;
    --lpc-header-logo-max-height: 5rem;

    box-shadow:
      0 2px 8px rgb(0 0 0 / 4%),
      0 1px 0 rgb(0 0 0 / 5%);
  }

  /* --- Breathable header + smooth compact transition --- */
  .header-wrapper .header {
    column-gap: 2.4rem;
    transition:
      min-height 0.2s ease,
      padding 0.2s ease;
  }

  /* --- Logo smooth scale --- */
  .header .header__heading-logo {
    transition: max-height 0.2s ease;
  }

  /* --- Icon cluster: refined gap --- */
  .header .header__icons {
    gap: 0.6rem;
    align-items: center;
  }

  /* --- Nav: single row, no wrapping at desktop --- */
  .header__inline-menu .list-menu--inline {
    flex-wrap: nowrap;
  }

  /* --- Nav link baseline refinement --- */
  .header__inline-menu .header__menu-item.list-menu__item {
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    position: relative;
    transition: opacity 0.2s ease;
  }

  /* --- Premium hover underline accent --- */
  .header__inline-menu .header__menu-item.list-menu__item::after {
    content: "";
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    right: 0;
    height: 0.12rem;
    background: currentcolor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  .header__inline-menu .header__menu-item.list-menu__item:hover::after,
  .header__inline-menu .header__menu-item.list-menu__item:focus-visible::after {
    opacity: 0.45;
    transform: scaleX(1);
  }

  /* --- Same Day: primary nav item --- */
  li.nav-item--primary .header__menu-item {
    font-weight: 600;
    color: rgb(126 84 49);
  }

  li.nav-item--primary .header__menu-item::after {
    opacity: 0.25;
    transform: scaleX(0.65);
    background: rgb(126 84 49);
  }

  li.nav-item--primary .header__menu-item:hover::after,
  li.nav-item--primary .header__menu-item:focus-visible::after {
    opacity: 0.65;
    transform: scaleX(1);
  }

  /* --- Announcement bar desktop refinement --- */
  .announcement-bar__message {
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: 1.38rem;
  }
}

/* ==================================================
   AUDIT REFINEMENTS v1 — Verified Safe CSS Only
   All selectors confirmed against actual theme files.
   No Liquid changes. No . No fake content.
   Compatible with Dawn's existing animation/editor system.
   ================================================== */

/* ── 1. Header: Sticky scroll elevation ────────────────
   .header-wrapper confirmed in base.css:2347
   .shopify-section-header-sticky confirmed in base.css:2321
   Additive shadow — does not override Dawn's own sticky logic.
   ─────────────────────────────────────────────────────── */

.shopify-section-header-sticky .header-wrapper {
  box-shadow: 0 2px 14px rgb(0 0 0 / 7%);
  transition: box-shadow 0.3s ease;
}

/* ── 2. Nav: Animated underline on hover ────────────────
   .header__menu-item confirmed in base.css:2798
   Dawn already uses ::after on .header__menu-item (base.css:2865)
   for submenu items. We scope this to the top-level only
   using :not() to avoid colliding with submenus.
   ─────────────────────────────────────────────────────── */

.header__menu-item:not(.header__submenu .header__menu-item) {
  position: relative;
}

.header__menu-item:not(.header__submenu .header__menu-item)::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--brand-refined);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
  border-radius: 2px;
}

.header__menu-item:not(.header__submenu .header__menu-item):hover::after {
  transform: scaleX(1);
}

/* Active item — always show underline */

.header__active-menu-item::after {
  transform: scaleX(1); /*  */
}

/* ── Search modal — brand-styled field + top-aligned ──────────────
   Was: .search-modal__content centered the form, so the input floated
   mid-screen in a white void; the input used the UA-default grey inset
   border. Top-align gives predictive results room; the .field wrapper
   becomes one soft brand pill. Global (header search), token-based. */
.search-modal__content.search-modal__content-top {
  align-items: flex-start;
  padding-top: var(--space-48);
}

/* predictive-search was position:static, so its absolute results panel
   anchored to .search-modal__content (full height) and rendered at top:100%
   = off-screen below the fold. Anchor it to the field instead so results
   drop directly under the input. */
.search-modal predictive-search {
  position: relative;
  display: block;
  width: 100%;
}

.search-modal .field {
  min-height: var(--field-min-height);
  border: var(--stroke-hairline) solid var(--brand-tint-border);
  border-radius: var(--radius-pill);
  background: var(--field-bg);
  overflow: hidden;
}

.search-modal .field:focus-within {
  border-color: var(--field-border-color-focus);
  box-shadow: var(--shadow-focus);
}

.search-modal .search__input.field__input {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* 
==========================================================================
   5. CART & CHECKOUT
   ==========================================================================
 */

/* Mobile-first: Default styles for mobile */

/* --- UPDATED TRUST SIGNALS (Mobile & Desktop Balanced) --- */

/* ==================================================
   MOBILE TRUST SIGNALS (FINAL & CLEAN)
   Target: Mobile only (max-width: 767px)
   Result: Compact Rows, Icon Left, Text Right
   ================================================== */

/* =========================
   BUTTON SYSTEM
   ========================= */

.button,
.shopify-payment-button__button,
input[type="submit"],
button[type="submit"],
.cart__checkout-button,
.product-form__submit {
  background-color: var(--brand-refined);
  color: var(--color-bg-white, #fff);
  border: none;
  border-radius: var(--radius-card, 12px);
  padding: var(--space-s, 0.75rem) var(--space-m, 1.25rem);
  font-family: var(--font-family-body, proxima-nova, sans-serif);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-body, 1rem);
  transition: var(--transition-base, all 0.3s ease);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.3px;
}

.button:hover,
.shopify-payment-button__button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.cart__checkout-button:hover,
.product-form__submit:hover {
  background-color: var(--color-accent-dark, #b18c85);
  box-shadow: var(--shadow-hover, 0 8px 25px rgb(0 0 0 / 8%));
  transform: translateY(-2px);
}

.button:active,
.shopify-payment-button__button:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
}

/* Prevent horizontal shaking on mobile */

/* ==============================================
   🚀 CRO UPDATE: PRODUCT PAGE ADD-TO-CART
   Priority: High | Device: Mobile First
   ============================================== */

/* 2. BUTTON DIMENSIONS & TYPOGRAPHY */

.product-form__submit,
.cart__checkout-button {
  width: 100%; /*  */

  /* Full width of container for max visibility */
  max-width: 400px;

  /* Prevents it from looking huge on desktop */
  font-weight: 700; /*  */

  /* Boldest weight */
  text-transform: uppercase; /*  */

  /* Increases urgency */
}

/* Smooth Button Transitions */

.button,
.shopify-payment-button__button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover,
.shopify-payment-button__button:hover {
  transform: translateY(-2px) scale(1.02); /*  */
}

/* --- 8px Grid System & Typography Override --- */

.quantity__label.form__label {
  display: none;
}

/* Override specific elements that were using Inter/Playfair */

/* ============================= */

/* PRIMARY BUTTON (Main CTA) */

/* ============================= */

.button,
.button--primary,
.shopify-payment-button__button--unbranded {
  background-color: var(--brand-refined); /* refined primary */
  border-color: var(--brand-refined); /* refined primary */
  color: #fff; /*  */
}

.button:hover,
.button--primary:hover,
.shopify-payment-button__button--unbranded:hover {
  background-color: var(--brand-refined-hover); /* refined primary hover */
  border-color: var(--brand-refined-hover); /* refined primary hover */
  color: #fff; /*  */
}

/* =======================================================
   FLOWERCART CTA (FINAL BRAND VERSION)
   Clean • Premium • High Conversion
======================================================= */

/* Primary CTA only (SAFE - no cart utility buttons) */

.product-form__submit,
.cart__checkout-button,
.rb-button,
.button--primary {
  /* Brand color (matches header/footer tone) */
  background-color: #6b3d41; /*  */

  /* Readability */
  color: var(--text-on-accent); /*  */
  font-weight: 700; /*  */
  letter-spacing: 0.04em; /*  */
  border: none; /*  */
  border-radius: var(--buttons-radius); /*  */

  /* Premium feel */
  transition: all 0.25s ease; /*  */
  box-shadow: 0 4px 14px rgb(140 95 95 / 25%); /*  */
}

/* Hover */

.product-form__submit:hover,
.cart__checkout-button:hover,
.rb-button:hover,
.button--primary:hover {
  background-color: #744c4c; /*  */
  transform: translateY(-2px); /*  */
  box-shadow: 0 6px 18px rgb(116 76 76 / 32%); /*  */
}

/* Active (click) */

.product-form__submit:active,
.cart__checkout-button:active,
.rb-button:active,
.button--primary:active {
  background-color: #5f3e3e; /*  */
  transform: translateY(0); /*  */
  box-shadow: 0 3px 10px rgb(95 62 62 / 25%); /*  */
}

/* ── 8. UPSELL / ADD-ONS ─────────────────────────────────────
   Snippet: snippets/product-upsell-addons.liquid
   Renders ABOVE buy-buttons inside the buy_buttons block.
   The snippet's own scoped CSS uses .main-product which has no
   HTML match — those rules are dead. We activate clean styles here.
   Wrapper: <div class="cart-upsell-wrapper" data-upsell-root> */

product-info .cart-upsell-wrapper[data-upsell-root] {
  margin-top: 0; /*  */
  margin-bottom: 1rem; /*  */
  background: #fbf8f7; /*  */
  border: 1px solid rgb(132 90 96 / 12%); /*  */
  border-radius: 14px; /*  */
  overflow: hidden; /*  */
  box-shadow: none; /*  */
}

product-info .cart-upsell-inner {
  padding: 14px 14px 12px; /*  */
}

/* 
==========================================================================
   6. PRODUCT PAGE
   ==========================================================================
 */

.star-rating {
  color: #f6c100;
  font-size: 12px;
}

/* ==============================================
   💎 CRO UPDATE: PREMIUM SVG TOGGLE
   Style: Text Link + SVG Chevron Icon
   ============================================== */

#toggleDescBtn,
.button#toggleDescBtn {
  /* 1. TEXT STYLING */
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin-top: 5px;
  color: var(--color-brand-accent);
  font-family: var(--font-family-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: none;

  /* Editorial Underline Style */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(159, 110, 98, 0.5);

  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* Interaction */
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  letter-spacing: 0;
}

/* 2. THE SVG ICON (Encoded in CSS) */

#toggleDescBtn::after {
  content: ""; /*  */
  display: block; /*  */
  width: 12px; /*  */
  height: 12px; /*  */

  /* SVG Code: Chevron Down (Color: #9B5A4F) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239B5A4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /*  */
  background-size: contain; /*  */
  background-repeat: no-repeat; /*  */
  background-position: center; /*  */

  /* Animation setup */
  transition: transform 0.2s ease; /*  */
}

/* 3. MICRO-INTERACTION (Hover Animation) */

#toggleDescBtn:hover {
  color: var(--color-accent-dark); /*  */
  text-decoration-thickness: 2px; /*  */
}

#toggleDescBtn:hover::after {
  transform: translateY(3px); /*  */
}

/* Hide SVG chevron in Show Less state — prevents duplicate with innerHTML arrow span */

/* =========================
   ✨ NEW CONVERSION ELEMENTS
   ========================= */

/* --- Trust Signals (Header) --- */

.product__trust-signals-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
  margin-top: 5px;
  background-color: rgb(238 148 65 / 10%);
  border: 1px solid rgb(238 148 65 / 30%);
  border-radius: 8px;
  padding: 10px;
  justify-content: space-between;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 4px;
}

.star-icon {
  color: #ffc107;

  /* Gold */
  font-size: 14px;
}

.product__trust-signals-header,
.rating-count {
  font-size: 12px; /*  */
  color: var(--color-text-muted);
}

.freshness-badge {
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* --- Benefit Text (Hero) --- */

.product__benefit-text {
  font-family: var(--font-family-body);
  color: var(--color-brand-secondary);
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* --- Benefit Bullets (Below Price) --- */

.product__benefit-bullets {
  margin: 15px 0;
  padding: 12px;
  background: var(--color-bg-ivory);
  border: 1px solid var(--color-border-sand);
  border-radius: 8px;
}

.check-icon {
  color: #d8aba0;
}

/* --- Delivery Timer --- */

.product__delivery-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  padding: 10px 12px;
  background-color: #f7eae3; /*  */

  /* Soft orange/alert bg */
  border-left: 3px solid var(--color-brand-accent);
  border-radius: 4px;
  animation: pulse-orange 2s infinite;
  margin-top: 10px;
  margin-bottom: 20px;
}

.timer-icon {
  font-size: 18px;
}

.timer-text {
  font-size: 13px;
  color: #663c00;
  font-weight: 500;
}

.countdown-timer {
  font-weight: 700;
  color: var(--color-brand-accent);
}

/* --- Perfect For Badges --- */

.product__perfect-for {
  margin: 20px 0;
}

.perfect-for-tag {
  background: #f5f5f5;
  color: var(--color-text-body);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/*
==========================================================================
   HOMEPAGE REFINEMENT — Featured Collection card title↔price rhythm
   (2026-06-11) — typography + spacing pass.

   These live in custom-override.css (loads BEFORE override2.css) but win on
   specificity: body.template-index .featured-collection__grid .card__heading
   = (0,3,1) beats override2's .featured-collection__grid .card__heading
   = (0,2,0). No !important needed. Homepage-scoped via body.template-index.
   ==========================================================================
 */

/* Title→price gap was 4px (override2 line 1640): the price sat almost touching
   the title. 6px gives a cleaner two-tier read without loosening the card. */
body.template-index .featured-collection__grid .card__heading {
  margin-bottom: 6px;
  line-height: 1.35; /* was 1.3 — balances titles that wrap to two lines */
}
.perfect-for-tag:hover {
  border-color: var(--color-brand-accent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgb(0 0 0 / 5%);
  background-color: #fff0f0;
}

/* Product Card Entrance Animation */

.product-card-wrapper {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* overrides Dawn base.css */
  animation-fill-mode: both; /* overrides Dawn base.css */
}

.product-card-wrapper:nth-child(1) {
  animation-delay: 0.1s;
}

.product-card-wrapper:nth-child(2) {
  animation-delay: 0.15s;
}

.product-card-wrapper:nth-child(3) {
  animation-delay: 0.2s;
}

.product-card-wrapper:nth-child(4) {
  animation-delay: 0.25s;
}

.product-card-wrapper:nth-child(5) {
  animation-delay: 0.3s;
}

.product-card-wrapper:nth-child(6) {
  animation-delay: 0.35s;
}

/* Enhanced Card Hover Effect */

.card-wrapper:hover .card,
.product-card-wrapper:hover .card {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  transition: var(--transition-base);
}

/* --- 3.3 DESCRIPTION FORMATTING --- */

/* Highlight key info in description */

.product__description strong {
  font-weight: 700; /* overrides Dawn base.css */
  text-transform: uppercase; /* overrides Dawn base.css */
  font-size: inherit; /* overrides Dawn base.css */
  letter-spacing: 0.02em; /* overrides Dawn base.css */
  line-height: 1.6; /* overrides Dawn base.css */
  margin: 0; /* overrides Dawn base.css */
  padding: 0; /* overrides Dawn base.css */
}

.product__media-list {
  gap: 0; /* overrides Dawn base.css */
}

/* Reduce spacing above/below titles, price, description */

.product__title,
.product__price,
.product__description {
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

@media screen and (width >= 749px) {
  .product__info-container > * + * {
    margin-top: 8px; /* overrides Dawn base.css */
  }
}

/* 4. Price Styling */

/* 5. Buttons & CTAs */

button,
.btn,
.product-form__submit {
  font-family: var(--font-stack-base); /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  font-size: var(--font-size-body); /* overrides Dawn base.css */
  line-height: var(--line-height-body); /* overrides Dawn base.css */
}

.upsell-add-btn {
  color: var(--color-brand-accent); /* overrides Dawn base.css */
}

/* ===== MOBILE BODY TEXT READABILITY FIX ===== */

p,
.product__description,
.rte,
.text-body,
body {
  font-size: 15px; /* overrides Dawn base.css */
  line-height: 1.6; /* overrides Dawn base.css */
}

/* ===== PRODUCT TITLE CONSISTENCY ===== */

.card__heading,
.product-card__title,
.product__title,
h2.product-title {
  font-family: var(
    --font-family-body
  ); /* keep product titles sans (Bouqs-style) */
  font-weight: 600; /* overrides Dawn base.css */
  line-height: 1.4; /* overrides Dawn base.css */
}

@media (width >= 769px) {
  .card__heading,
  .product-card__title {
    font-size: 16px; /* overrides Dawn base.css */
  }

  .product__title,
  h1.product__title {
    font-size: 42px; /* overrides Dawn base.css */
  }
}

/* ===== Variant Pills (Arrangement) - Smaller Size ===== */

.product-form__input--pill input[type="radio"] + label {
  font-size: 1.2rem; /* overrides Dawn base.css */ /* default ~1.4–1.6 */
  padding: 6px 12px; /* overrides Dawn base.css */ /* smaller height */
  border-radius: 20px; /* overrides Dawn base.css */ /* pill shape */
  min-height: auto; /* overrides Dawn base.css */
  line-height: 1.2; /* overrides Dawn base.css */
}

/* spacing between buttons */

.product-form__input--pill label {
  margin: 0 6px 6px 0; /* overrides Dawn base.css */
  border: 1.5px solid #e6d6d8; /* overrides Dawn base.css */
  border-radius: 999px; /* overrides Dawn base.css */
  background: #fff; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  padding: 6px 14px; /* overrides Dawn base.css */
  font-size: 13px; /* overrides Dawn base.css */
}

/* selected state (keep your brand color) */

.product-form__input--pill input[type="radio"]:checked + label {
  background-color: var(--color-brand-accent); /* overrides Dawn base.css */
  color: #fff; /* overrides Dawn base.css */
}

/* hover (optional, subtle) */

.product-form__input--pill input[type="radio"] + label:hover {
  opacity: 0.85;
}

.product__description p {
  margin-bottom: 12px; /* overrides Dawn base.css */
}

.product-specs {
  list-style: none; /* overrides Dawn base.css */
  padding-left: 0; /* overrides Dawn base.css */
  margin-top: 16px; /* overrides Dawn base.css */
}

.product-specs li {
  position: relative; /* overrides Dawn base.css */
  padding-left: 14px; /* overrides Dawn base.css */
  margin-bottom: 10px; /* overrides Dawn base.css */
  line-height: 1.5; /* overrides Dawn base.css */
}

.product-specs li strong {
  font-weight: 700; /* overrides Dawn base.css */
  text-transform: uppercase; /* overrides Dawn base.css */
  font-size: inherit; /* overrides Dawn base.css */
  letter-spacing: 0.02em; /* overrides Dawn base.css */
  opacity: 0.8;
}

.product-specs li::before {
  content: "•"; /* overrides Dawn base.css */
  position: absolute; /* overrides Dawn base.css */
  left: 0; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
}

.template-product .product__description .product-description {
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.template-product .product__description .product-description p {
  margin-top: 0;
}

.template-product .product__description .product-description strong {
  font-weight: 700; /* overrides Dawn base.css */
  text-transform: uppercase;
  font-size: inherit;
  letter-spacing: 0.02em;
}

.template-product .product__description .product-description ul.product-specs {
  list-style: none;
}

.template-product
  .product__description
  .product-description
  ul.product-specs
  li::before {
  content: "•";
  font-weight: 700;
}

.template-product .product__description .product-description li {
  list-style: none;
}

/* =========================
   DAWN 15.5.1 — PRODUCT PAGE
   ========================= */

/* =========================
   PRODUCT PAGE (PRICE)
========================= */

/* =========================
   VARIANT PILLS
========================= */

.product-form__input--pill {
  border: none; /* overrides Dawn base.css */
  padding: 0; /* overrides Dawn base.css */
  margin-bottom: 10px; /* overrides Dawn base.css */
}

.product-form__input--pill input:checked + label {
  background: var(--color-brand-accent); /* overrides Dawn base.css */
  color: #fff; /* overrides Dawn base.css */
}

.product-form__submit {
  background: #6b3d41; /* overrides Dawn base.css */
}

/* =========================
   PRODUCT TITLE + SPACING
========================= */

.product__title h1 {
  font-size: 22px; /* overrides Dawn base.css */
}

.product__description {
  max-width: 650px; /* overrides Dawn base.css */
}

/* REGULAR PRICE */

.card .price:not(.price--on-sale) .price-item--regular {
  color: var(--color-text-primary); /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
}

/* SALE PRICE */

.card .price--on-sale .price-item--sale {
  color: var(--color-text-primary); /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
}

/* STRIKETHROUGH */

.card .price--on-sale s .price-item--regular {
  color: var(--color-text-muted); /* overrides Dawn base.css */
}

/* =========================================
   PRODUCT PAGE PRICE HIERARCHY (SAFE EDIT)
   Scope: Product page only (.product__info-container)
   Goal: Make sale price dominant, compare price secondary
========================================= */

/* ---- PRICE WRAPPER (ALIGNMENT + SPACING) ---- */

.product__info-container .price {
  display: flex; /* overrides Dawn base.css */ /* keep prices inline */
  align-items: center; /* overrides Dawn base.css */ /* vertical alignment */
  gap: 6px; /* overrides Dawn base.css */ /* spacing between prices */
  margin: 6px 0 12px; /* overrides Dawn base.css */ /* space below product title */
}

/* ---- SALE PRICE (PRIMARY FOCUS) ---- */

.product__info-container .price--on-sale .price-item--sale {
  font-size: 22px; /* overrides Dawn base.css */ /* biggest size */
  font-weight: 700; /* overrides Dawn base.css */ /* bold */
  color: #985d62; /* overrides Dawn base.css */ /* strong color */
  line-height: 1.2; /* overrides Dawn base.css */
}

/* ---- COMPARE PRICE (STRIKETHROUGH / SECONDARY) ---- */

.product__info-container .price--on-sale s .price-item--regular {
  font-size: 14px; /* overrides Dawn base.css */ /* smaller than sale */
  color: var(--color-text-muted); /* overrides Dawn base.css */ /* muted */
  font-weight: 400; /* overrides Dawn base.css */
  margin-left: 8px; /* overrides Dawn base.css */ /* spacing from sale price */
}

/* =========================
PRODUCT PAGE CLEAN SYSTEM
========================= */

/* title */

.main-product .product__title h1 {
  font-size: 26px; /* overrides Dawn base.css */
  line-height: 1.2; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  margin: 0; /* overrides Dawn base.css */
}

/* price */

.main-product .price {
  margin: 0; /* overrides Dawn base.css */
}

.main-product .price-item--regular,
.main-product .price-item--sale {
  font-size: 22px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
}

.main-product .price--on-sale s .price-item--regular {
  font-size: 14px; /* overrides Dawn base.css */
  opacity: 0.6; /* overrides Dawn base.css */
}

/* section divider style */

.main-product .product__description,
.main-product .product-form,
.main-product .product-form__input--pill {
  padding-top: 16px;
  border-top: 1px solid #eee;
}

/* description */

.main-product .product__description {
  font-size: 14px; /* overrides Dawn base.css */
  line-height: 1.6; /* overrides Dawn base.css */
}

.main-product .product__description p {
  margin-bottom: 12px; /* overrides Dawn base.css */
}

/* product specs */

.main-product .product-specs {
  list-style: none; /* overrides Dawn base.css */
  padding: 0; /* overrides Dawn base.css */
  margin-top: 12px; /* overrides Dawn base.css */
}

.main-product .product-specs li {
  padding-left: 14px; /* overrides Dawn base.css */
  position: relative; /* overrides Dawn base.css */
  margin-bottom: 8px; /* overrides Dawn base.css */
}

.main-product .product-specs li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-text-primary);
}

/* variant pills */

.main-product .product-form__input--pill label {
  border-radius: 999px; /* overrides Dawn base.css */
  padding: 8px 14px; /* overrides Dawn base.css */
  font-size: 13px; /* overrides Dawn base.css */
}

.main-product .product-form__input--pill input:checked + label {
  background: #cba69f; /* overrides Dawn base.css */
  color: #fff; /* overrides Dawn base.css */
}

/* CTA */

.main-product .product-form__submit {
  height: 52px; /* overrides Dawn base.css */
  font-size: 15px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  border-radius: 0.85rem; /* overrides Dawn base.css */
  background: #6b3d41; /* overrides Dawn base.css */
}

/* ============================================================
   DEFAULT PRODUCT PAGE — VISUAL HIERARCHY (ALL PRODUCTS)
   Scope: product-info custom element (only rendered in main-product.liquid,
   so it is product-page-safe with no further body-class guard needed).

   Specificity design:
     This block uses product-info + class = (0,0,1,1) to (0,0,1,2).
     Handle-specific rules above use product-info[attr] = (0,0,2,x)
     and win where they overlap — intended.
   ============================================================ */

/* ── 0. INFO-CONTAINER RHYTHM ────────────────────────────────
   Dawn default: > * + * { margin: 1.5rem 0 }
   Override: tighter, consistent gap for all product pages. */

product-info .product__info-container > * + * {
  margin-top: 0.8rem; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

product-info .product__info-container > *:first-child {
  margin-top: 0; /* overrides Dawn base.css */
}

/* Dawn also sets 2.5rem for .product__description and .product-form */

product-info .product__info-container .product__description,
product-info .product__info-container .product-form {
  margin-top: 0.8rem; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* ── 1. PRODUCT TITLE ────────────────────────────────────────
   h1 is currently 22px via line ~3524 (.product__title h1 rule).
   Lift to 26px mobile / 32px desktop for a dominant hierarchy. */

product-info .product__title {
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 0.3rem; /* overrides Dawn base.css */
  padding-bottom: 0; /* overrides Dawn base.css */
}

product-info .product__title h1 {
  font-size: 26px; /* overrides Dawn base.css */
  line-height: 1.18; /* overrides Dawn base.css */
  letter-spacing: -0.02em; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  margin: 0; /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  product-info .product__title h1 {
    font-size: 36px; /* overrides Dawn base.css */
    line-height: 1.12; /* overrides Dawn base.css */
  }
}

/* ── 2. RATING ROW ───────────────────────────────────────────
   Keep tight, no extra block-level margins. */

product-info .rating-wrapper {
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
  display: flex; /* overrides Dawn base.css */
  align-items: center; /* overrides Dawn base.css */
  gap: 6px; /* overrides Dawn base.css */
  flex-wrap: wrap; /* overrides Dawn base.css */
}

/* ── 3. PRICE BLOCK ──────────────────────────────────────────
   Goal: sale price is the visually dominant element after the title.
   Compare-at (regular) price fades to a quiet secondary role. */

product-info .price__container {
  margin-top: 0.3rem; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* Sale price — dominant */

product-info .price--large .price-item--sale,
product-info .price__container .price-item--sale {
  font-size: 22px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  letter-spacing: -0.02em; /* overrides Dawn base.css */
  line-height: 1.2; /* overrides Dawn base.css */
}

/* Regular price when NOT on sale — same prominence as sale price */

product-info .price:not(.price--on-sale) .price-item--regular {
  font-size: 22px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  letter-spacing: -0.02em; /* overrides Dawn base.css */
  line-height: 1.2; /* overrides Dawn base.css */
}

/* Compare-at when ON sale — muted strikethrough */

product-info .price--on-sale .price-item--regular {
  font-size: 1.3rem; /* overrides Dawn base.css */
  font-weight: 400; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
  color: var(--color-text-muted); /* overrides Dawn base.css */
  text-decoration: line-through; /* overrides Dawn base.css */
  text-decoration-color: currentcolor; /* inherits text color — eliminates warm-brown mismatch */
  opacity: 1; /* overrides Dawn base.css */
  letter-spacing: 0; /* overrides Dawn base.css */
}

/* Tighten horizontal gap between sale and compare-at */

product-info .price--on-sale {
  gap: 6px; /* overrides Dawn base.css */
  align-items: baseline; /* overrides Dawn base.css */
}

/* ── 4. DESCRIPTION ──────────────────────────────────────────
   DOM: product-info > .product__description.rte
          > .product-description
              > .description-preview
                  > p  /  ul.product-specs
          > .see-more-btn

   Specificity note:
   - Global `p, .product__description { 15px/16px  }` has (0,1,0).
   - `product-info .product__description p` has (0,1,1) and wins at both
     breakpoints, giving us full control over font-size on desktop + mobile.
   - `.product-specs` bare rules (padding-left: 0) are overridden by the
     product-info scoped ul rule — fixed below with ul:not(.product-specs).
   ──────────────────────────────────────────────────────── */

/* Outer wrapper — spacing only */

product-info .product__description {
  margin-top: 0.8rem; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* Inner content div — desktop typography baseline */

product-info .product-description {
  font-size: 15px; /* overrides Dawn base.css */
  line-height: 1.75; /* overrides Dawn base.css */
  color: var(--color-text-body); /* overrides Dawn base.css */
}

/* Paragraphs — inherit from parent, control rhythm */

product-info .product__description p {
  font-size: inherit; /* overrides Dawn base.css */
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 0.6rem; /* overrides Dawn base.css */
}

product-info .product__description p:last-child {
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* Standard lists (not .product-specs) */

product-info .product__description ul:not(.product-specs),
product-info .product__description ol {
  padding-left: 1.2rem; /* overrides Dawn base.css */
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 0.6rem; /* overrides Dawn base.css */
}

product-info .product__description li {
  margin-bottom: 0.3rem; /* overrides Dawn base.css */
  line-height: 1.65; /* overrides Dawn base.css */
}

/* ── Product specs list ──────────────────────────────────────
   ul.product-specs uses a ::before bullet — needs padding: 0 on
   the ul and padding-left on li for the bullet offset. */

product-info .product__description ul.product-specs {
  list-style: none; /* overrides Dawn base.css */
  padding: 0; /* overrides Dawn base.css */
  margin: 0.4rem 0 0.6rem; /* overrides Dawn base.css */
}

product-info .product__description .product-specs li {
  position: relative; /* overrides Dawn base.css */
  padding-left: 14px; /* overrides Dawn base.css */
  margin-bottom: 0.4rem; /* overrides Dawn base.css */
  font-size: inherit; /* overrides Dawn base.css */
  line-height: 1.6; /* overrides Dawn base.css */
}

product-info .product__description .product-specs li strong {
  font-weight: 700; /* overrides Dawn base.css */
  text-transform: uppercase; /* overrides Dawn base.css */
  font-size: inherit; /* overrides Dawn base.css */
  letter-spacing: 0.02em; /* overrides Dawn base.css */
}

product-info .product__description .product-specs li::before {
  content: "•"; /* overrides Dawn base.css */
  position: absolute; /* overrides Dawn base.css */
  left: 0; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  font-size: 0.9em; /* overrides Dawn base.css */
  line-height: inherit; /* overrides Dawn base.css */
}

/* ── Show-more / see-more toggle ─────────────────────────────
   <button class="see-more-btn"> rendered inside .product-description */

product-info .see-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(159, 110, 98, 0.5);
  padding: 0;
  margin-top: 8px;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--color-brand-accent);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  opacity: 1;
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease;
}

product-info .see-more-btn:hover {
  color: var(--color-accent-dark);
  text-decoration-color: rgba(140, 78, 67, 0.7);
}

/* ── 5. DESCRIPTION SECTION HEADING (.product-description-title) ─
   Custom liquid block: <h3 class="product-description-title">
   Inline \3c style> in the block sets font-family + 16px (specificity 0,1,0).
   product-info .product-description-title = (0,1,1) — wins unconditionally. */

product-info .product-description-title {
  margin-top: 0; /* overrides Dawn base.css */
  margin-bottom: 12px; /* overrides Dawn base.css */
  font-family: var(--font-family-primary); /* overrides Dawn heading font */
  font-size: 15px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  letter-spacing: 0.06em; /* overrides Dawn base.css */
  text-transform: uppercase; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
}

/* ── 6. DIVIDERS ─────────────────────────────────────────────
   .homepage-divider: rendered by custom_liquid blocks. */

product-info .homepage-divider {
  margin: 12px 0;
  border-color: rgb(0 0 0 / 8%);
}

product-info .custom-divider {
  margin: 0.35rem 0; /* overrides Dawn base.css */
  padding: 0; /* overrides Dawn base.css */
}

/* ── 7. CTA / ADD TO CART ────────────────────────────────────
   product-form > product-form__buttons > product-form__submit
   Goal: prominent, full-width, strong visual weight. */

product-info .product-form {
  margin-top: 1rem; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

product-info .product-form__buttons {
  display: flex; /* overrides Dawn base.css */
  flex-direction: column;
  gap: 8px; /* overrides Dawn base.css */
  margin-top: 0; /* overrides Dawn base.css */
}

product-info .product-form__submit {
  width: 100%; /* overrides Dawn base.css */
  min-height: 50px; /* overrides Dawn base.css */
  padding: 14px 24px; /* overrides Dawn base.css */
  font-size: 15px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  letter-spacing: 0.04em; /* overrides Dawn base.css */
  text-transform: uppercase; /* overrides Dawn base.css */
  border-radius: 0.85rem; /* overrides Dawn base.css */
  background-color: var(--brand-refined); /* overrides Dawn color scheme */
  color: #fff; /* overrides Dawn base.css */
}

product-info .product-form__submit:not([disabled]):hover {
  background-color: var(--brand-refined-hover); /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  product-info .product-form {
    margin-top: 1.2rem; /* overrides Dawn base.css */
  }

  product-info .product-form__submit {
    min-height: 52px; /* overrides Dawn base.css */
  }
}

product-info .upsell-heading {
  font-family: var(--font-family-primary); /* overrides Dawn base.css */
  font-size: 13px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  letter-spacing: 0; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  margin: 0 0 10px; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
}

product-info .upsell-grid {
  gap: 10px; /* overrides Dawn base.css */
  padding: 2px 2px 8px; /* overrides Dawn base.css */
}

product-info .upsell-item {
  flex: 0 0 136px; /* overrides Dawn base.css */
  border-radius: 10px; /* overrides Dawn base.css */
  padding: 8px; /* overrides Dawn base.css */
  border: 1px solid var(--brand-tint-border); /* overrides Dawn base.css */
  background: var(--brand-tint); /* overrides Dawn base.css */
  box-shadow: none; /* overrides Dawn base.css */
}

product-info .upsell-item.is-selected {
  border-color: var(--color-brand-accent); /* overrides Dawn base.css */
  background: #fffafb; /* overrides Dawn base.css */
  box-shadow: 0 0 0 1px rgb(132 90 96 / 18%); /* overrides Dawn base.css */
}

product-info .upsell-item:hover {
  transform: none; /* overrides Dawn base.css */
  background: var(--brand-tint); /* overrides Dawn base.css */
  box-shadow: var(--shadow-soft); /* overrides Dawn base.css */
}

product-info .upsell-title {
  font-size: 11.5px; /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
}

product-info .upsell-price {
  font-size: 12.5px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  product-info .cart-upsell-wrapper[data-upsell-root] {
    border-radius: 16px; /* overrides Dawn base.css */
  }

  product-info .cart-upsell-inner {
    padding: 18px 16px 14px; /* overrides Dawn base.css */
  }

  product-info .upsell-heading {
    font-size: 14px; /* overrides Dawn base.css */
  }

  product-info .upsell-item {
    flex: 0 0 158px; /* overrides Dawn base.css */
    padding: 10px; /* overrides Dawn base.css */
    border-radius: 12px; /* overrides Dawn base.css */
  }

  product-info .upsell-title {
    font-size: 12px; /* overrides Dawn base.css */
  }

  product-info .upsell-price {
    font-size: 13px; /* overrides Dawn base.css */
  }
}

/* ================================================================
   FEATURED COLLECTION — Desktop Visual Hierarchy
   @target  : 990px+ (Dawn's desktop threshold)
   @scope   : .collection .product-grid — scoped to collection
              sections only, no bleed into other sections
   @note    :  required — existing rules in this file
              already use  on the same properties.
   ================================================================ */

@media screen and (width >= 990px) {
  /* 1 ▸ Section heading → grid: premium separation for 4-col layout */
  .collection .collection__title {
    margin-bottom: 4rem; /* overrides Dawn base.css */
  }

  /* 2 ▸ Card content top: consistent 14px across all breakpoints */
  .collection .product-grid .card__content {
    padding-top: 14px;
  }

  /* 3 ▸ Product title: line-clamp prevents ragged card heights in 4-col
         grid. Without this, short vs long titles break row alignment. */
  .collection .product-grid .card .card__heading {
    line-height: 1.45; /* overrides Dawn base.css */
    margin-bottom: 8px; /* overrides Dawn base.css */
    display: -webkit-box; /* overrides Dawn base.css */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; /* overrides Dawn base.css */
    white-space: normal; /* overrides Dawn base.css */
  }

  .card__content {
    padding: 0 12px; /* overrides Dawn base.css */
  }
}

.card-wrapper,
.product-card-wrapper {
  position: relative; /* overrides Dawn base.css */
  overflow: hidden; /* overrides Dawn base.css */
  border-radius: var(--radius-card); /* overrides Dawn base.css */
  box-shadow: var(--shadow-soft); /* overrides Dawn base.css */
}

/* Current / regular price — dominant */

.featured-collection__grid .price:not(.price--on-sale) .price-item--regular,
.featured-collection__grid .price--on-sale .price-item--sale {
  font-size: 14px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  letter-spacing: 0; /* overrides Dawn base.css */
}

/* Sale price — brand-rose emphasis so the discount reads at a glance.
   Matches the PDP sale-price treatment (#985d62); non-sale regular price
   stays neutral (#333) above, so only discounted items pop. */
.featured-collection__grid .price--on-sale .price-item--sale {
  color: #985d62; /* overrides Dawn base.css */
}

/* Compare-at price — muted, thin strikethrough */

.featured-collection__grid .price--on-sale .price-item--regular {
  font-size: 12px; /* overrides Dawn base.css */
  font-weight: 400; /* overrides Dawn base.css */
  color: var(--color-text-muted); /* overrides Dawn base.css */
  text-decoration: line-through; /* overrides Dawn base.css */
  text-decoration-color: #bbb;
  text-decoration-thickness: 1px; /* overrides Dawn base.css */
  margin-right: 0; /* overrides Dawn base.css */
}

/* ==================================================
   END: FEATURED COLLECTION CARD REFINEMENT
   ================================================== */

/* ==================================================
   🛒 PRODUCT PAGE — CONVERSION POLISH
   Scope : body.template-product
   Touch : CSS only (sticky bar JS inline in section)
   ================================================== */

/* ── STICKY MOBILE ATC BAR ────────────────────────
   Mobile only — hidden via JS intersection observer
   when main Add to Cart is in viewport.
   ────────────────────────────────────────────────── */

/* ── STICKY MOBILE ATC BAR ────────────────────────
   Mobile only — hidden via JS IntersectionObserver
   when main Add to Cart is in viewport.
   Full-width single button: icon + label + sep + price.
   ────────────────────────────────────────────────── */

body.template-product .product-sticky-atc {
  display: none; /* shown only on mobile */
}

/* ── 3. Product cards: Hover lift + image zoom ──────────
   .product-card-wrapper confirmed in base.css:15
   .card__media confirmed in component-card.css:96
   We do NOT override border or border-radius (editor-controlled
   via --border-width / --border-radius CSS vars).
   We do NOT set border:none.
   ─────────────────────────────────────────────────────── */

@media (width >= 750px) {
  .product-card-wrapper {
    transition: transform 0.3s ease;
  }

  .product-card-wrapper:hover {
    transform: translateY(-5px);
  }

  .product-card-wrapper:hover .card {
    box-shadow: 0 16px 36px -20px rgb(0 0 0 / 22%);
    transition: box-shadow 0.3s ease;
  }

  /* Image zoom — scoped to product cards only */
  .product-card-wrapper .card__media .media {
    overflow: hidden;
  }

  .product-card-wrapper .card__media .media img {
    transition: transform 0.55s ease;
  }

  .product-card-wrapper:hover .card__media .media img {
    transform: scale(1.05);
  }
}

/* ── 4. Card badge: Move to top-left ────────────────────
   Dawn's .card__badge uses CSS grid placement.
   .card__badge.top confirmed in component-card.css:279.
   We target the default badge (align-self:flex-end) and
   move it to top without using position:absolute.
   ─────────────────────────────────────────────────────── */

.product-card-wrapper .card__badge {
  align-self: flex-start;
  grid-row-start: 1;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ── 6. CTA button: Enhanced shadow depth on hover ──────
   .button, .product-form__submit already have hover transforms
   in custom-override.css. We only add a brand-colored glow
   that doesn't duplicate existing transform logic.
   ─────────────────────────────────────────────────────── */

.button--primary:hover,
.product-form__submit:not([disabled], [aria-disabled="true"]):hover {
  box-shadow: 0 12px 28px -14px rgb(230 161 152 / 70%);
}

/* ── 8. Product page thumbnails: Active outline ─────────
   .product__media-item confirmed in section-main-product.css:413
   .thumbnail-list__item confirmed present in same file.
   We use outline (not box-shadow) to stay outside the box model.
   ─────────────────────────────────────────────────────── */

.thumbnail-list__item button:focus-visible,
.thumbnail-list__item button[aria-current="true"],
.thumbnail[aria-current],
.product__media-list .product__media-item.is-active .thumbnail {
  outline: 2px solid var(--brand-refined);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==================================================
   END AUDIT REFINEMENTS v1
   ================================================== */

/* ── FlowerCart: Featured Collection product grid/cards (mobile polish) ── */

/* Remove hard borders; add soft 2-layer shadow + unified radius */

.product-card-wrapper .card,
.product-card-wrapper .card-wrapper,
.card-wrapper .card,
.featured-collection .card {
  border: 0; /* overrides Dawn base.css */
  border-radius: var(--radius-card); /* overrides Dawn base.css */
  background: #fff; /* overrides Dawn base.css */
  box-shadow:
    0 1px 2px rgb(132 90 96 / 4%),
    0 6px 18px rgb(132 90 96 / 7%); /* overrides Dawn base.css */

  overflow: hidden;
}

/* Card info padding */

.product-card-wrapper .card__information,
.featured-collection .card__information {
  padding: 8px 12px 10px; /* overrides Dawn base.css */
}

/* Product title */

.product-card-wrapper .card__heading,
.featured-collection .card__heading {
  font-size: 0.95rem; /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
  letter-spacing: 0.005em; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  margin: 0 0 4px; /* overrides Dawn base.css */
}

/* Price — mauve-700 */

.product-card-wrapper .price,
.featured-collection .price,
.product-card-wrapper .price-item,
.featured-collection .price-item {
  font-size: 1rem; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */
  color: #6f4248; /* overrides Dawn base.css */
  letter-spacing: 0.01em; /* overrides Dawn base.css */
}

/* Strikethrough price (on-sale original) */

.product-card-wrapper .price--on-sale .price-item--regular,
.featured-collection .price--on-sale .price-item--regular {
  color: var(--color-text-muted); /* overrides Dawn base.css */
  font-weight: 500; /* overrides Dawn base.css */
}

.collection .product-grid .card-wrapper {
  border-radius: 10px; /* overrides Dawn base.css */
  border: 1px solid var(--color-brand-sand); /* overrides Dawn base.css */
  box-shadow: var(--shadow-soft); /* overrides Dawn base.css */
}

/* 
==========================================================================
   7. COLLECTION & GRID
   ==========================================================================
 */

/* ==================================================
   SOLID "SHOW MORE" BUTTON
   Goal: Increase click-through rate by making the CTA pop
   ================================================== */

/* Target the specific element for Show More */

collection-show-more .button,
/* Target generic secondary buttons that usually look like outlines */
.button.button--secondary {
  background-color: var(--color-brand-accent); /* overrides Dawn base.css */

  /* Rose Gold Background */
  color: #fff; /* overrides Dawn base.css */

  /* White Text */
  border: none; /* overrides Dawn base.css */

  /* Alisin ang outline border */

  font-weight: 700; /* overrides Dawn base.css */

  /* Bold text */
  letter-spacing: 0;
  text-transform: uppercase;

  /* Lagyan ng konting shadow para umangat */
  box-shadow: 0 4px 10px rgb(186 138 127 / 30%); /* overrides Dawn base.css */
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hover Effect (Optional for Desktop) */

collection-show-more .button:hover,
.button.button--secondary:hover {
  background-color: var(--color-accent-dark); /* overrides Dawn base.css */

  /* Mas dark pag tinutok */
  transform: translateY(-2px);

  /* Aangat ng konti */
  box-shadow: 0 6px 14px rgb(186 138 127 / 40%); /* overrides Dawn base.css */
}

/* Show More — loading state spinner */
collection-show-more .button.is-loading {
  color: transparent;
  pointer-events: none;
  position: relative;
}

collection-show-more .button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fc-btn-spin 0.65s linear infinite;
}

@keyframes fc-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================================================
   TRUST SIGNALS / MULTICOLUMN OVERRIDE (FRESH START)
   ================================================== */

/* --- 1. GLOBAL CARD STYLE (Applies to both Mobile & Desktop) --- */

.multicolumn-card,
div.multicolumn-card {
  /* Gawing magkatabi ang Icon at Text (Row) */
  display: flex; /* overrides Dawn base.css */
  flex-direction: row;
  align-items: center; /* overrides Dawn base.css */

  /* Gitna ang vertical alignment */
  justify-content: flex-start; /* overrides Dawn base.css */
  text-align: center; /* overrides Dawn base.css */

  /* Gaya ng nasa image (Light Gray Background & Rounded) */

  border: none; /* overrides Dawn base.css */

  /* Walang border base sa image */
  border-radius: 12px; /* overrides Dawn base.css */

  /* Mas rounded na corners */
  padding: 20px; /* overrides Dawn base.css */
  box-shadow: none; /* overrides Dawn base.css */

  /* Walang shadow o very subtle lang */
  margin-bottom: 0; /* overrides Dawn base.css */
  height: 100%; /* overrides Dawn base.css */

  /* Pantay ang height */
}

/* --- 2. ICON STYLING (Fixed Size & Left Side) --- */

.multicolumn-card__image-wrapper {
  width: 80px; /* overrides Dawn base.css */

  /* Fixed size ng icon */
  flex: 0 0 80px; /* overrides Dawn base.css */

  /* Huwag hayaang lumaki o lumit */
  margin: 0 20px 0 0; /* overrides Dawn base.css */

  /* Space sa kanan ng icon */
}

.multicolumn-card__image-wrapper img {
  width: 100%; /* overrides Dawn base.css */
  height: auto; /* overrides Dawn base.css */
  object-fit: contain; /* overrides Dawn base.css */
}

/* --- 3. TEXT STYLING --- */

.multicolumn-card__info {
  padding: 0; /* overrides Dawn base.css */
  flex: 1; /* overrides Dawn base.css */

  /* Sakupin ang natitirang space */
  padding-right: 16px; /* overrides Dawn base.css */
  text-align: left; /* overrides Dawn base.css */
}

/* Title (e.g., Fast Delivery) */

.multicolumn-card__info h3.inline-richtext {
  display: block; /* overrides Dawn base.css */

  /* Siguraduhing nakikita */
  font-size: 16px; /* overrides Dawn base.css */
  font-weight: 700; /* overrides Dawn base.css */

  /* Bold */
  margin: 0 0 4px; /* overrides Dawn base.css */

  /* Konting space sa baba */
  color: var(--color-text-primary); /* overrides Dawn base.css */

  /* Dark text */
  letter-spacing: 0; /* overrides Dawn base.css */
}

/* Description text */

.multicolumn-card__info p,
.multicolumn-card__info .rte {
  font-size: 14px; /* overrides Dawn base.css */
  line-height: 1.4; /* overrides Dawn base.css */
  margin: 0; /* overrides Dawn base.css */
  color: var(--color-brand-secondary); /* overrides Dawn base.css */

  /* Grayish text para sa description */
  width: 100%;
}

/* --- 4. LAYOUT ADJUSTMENTS --- */

/* Siguraduhing vertical stack ang itsura sa list kung gusto mo dikit-dikit (Optional) */

.multicolumn-list {
  gap: 16px; /* overrides Dawn base.css */

  /* Space between cards */
}

/* Siguraduhin na pantay ang lapad ng cards */

.multicolumn-list__item,
.multicolumn-card {
  width: 100%; /* overrides Dawn base.css */
  max-width: 100%; /* overrides Dawn base.css */
  margin-left: auto; /* overrides Dawn base.css */
  margin-right: auto; /* overrides Dawn base.css */
}

/* Ayusin ang padding para hindi dikit masyado sa gilid pero pantay */

/* --- GLOBAL STYLES (Mobile & Desktop) --- */

/* 1. Base Card Style */

.card-wrapper {
  background-color: #fff; /* overrides Dawn base.css */
  border: 1px solid #eee; /* overrides Dawn base.css */
  border-radius: var(--radius-card); /* overrides Dawn base.css */

  box-shadow: var(--shadow-soft); /* overrides Dawn base.css */
  overflow: hidden; /* overrides Dawn base.css */
  height: 100%;
  position: relative;
  transition: all 0.2s ease; /* overrides Dawn base.css */

  /* Smooth transition */
}

/* 2. Compact Spacing (Para wala masyadong puti sa ilalim) */

.card__content {
  padding: 0 12px; /* overrides Dawn base.css */

  /* Siksik pero malinis */
  text-align: center;
}

/* 3. Typography */

.card__heading {
  font-size: 15px; /* overrides Dawn base.css */
  font-weight: 500; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  margin-bottom: var(--space-8); /* overrides Dawn base.css */

  /* Dikit sa price */
  line-height: 1.3;
  opacity: 0.9; /* overrides Dawn base.css */
}

/* Tanggalin ang extra space sa ilalim ng price */

.card-information {
  padding-bottom: 0; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* --- DESKTOP ONLY (Min-width: 768px) --- */

/* Dito lang gagana ang Hover/Animation para hindi magulo sa cellphone */

@media screen and (width >= 768px) {
  .card-wrapper:hover {
    transform: translateY(-4px); /* overrides Dawn base.css */

    /* Aangat lang sa computer */
    box-shadow: 0 10px 25px rgb(0 0 0 / 8%); /* overrides Dawn base.css */
    border-color: var(--color-brand-accent); /* overrides Dawn base.css */
  }
}

/* General section spacing - conversion optimized */

@media screen and (width >= 750px) {
  .multicolumn-list {
    display: flex; /* overrides Dawn base.css */
    flex-direction: row;
    justify-content: center; /* overrides Dawn base.css */
    gap: 1rem; /* overrides Dawn base.css */
  }

  .multicolumn-list__item {
    flex: 0 1 auto; /* overrides Dawn base.css */
    max-width: 300px; /* overrides Dawn base.css */
  }
}

/* Image Zoom on Hover */

.card__media img,
.media img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* overrides Dawn base.css */
}

.card:hover .card__media img,
.card:hover .media img {
  transform: scale(1.08); /* overrides Dawn base.css */
}

.card-wrapper:hover {
  transform: translateY(-4px); /* overrides Dawn base.css */
  box-shadow: 0 8px 20px rgb(0 0 0 / 8%); /* overrides Dawn base.css */
  border-color: var(--color-brand-blush); /* overrides Dawn base.css */
}

.card__media {
  background: #fafafa; /* overrides Dawn base.css */
}

.card-wrapper,
.card {
  border-radius: var(--radius-card); /* overrides Dawn base.css */
}

/* =========================
   FEATURED COLLECTION CARDS
========================= */

/* TITLE */

.card .card__heading {
  text-align: center; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  font-weight: 500; /* overrides Dawn base.css */
  margin-bottom: 6px; /* overrides Dawn base.css */
}

/* =========================
   HOVER EFFECT
========================= */

/* Card shadow like screenshot */

.card {
  box-shadow:
    0 4px 10px rgb(0 0 0 / 5%),
    0 8px 20px rgb(0 0 0 / 4%); /* overrides Dawn base.css */

  border-radius: 14px; /* overrides Dawn base.css */
}

/* TITLE */

/* PRICE CONTAINER */

.card .price {
  display: flex; /* overrides Dawn base.css */
  justify-content: center; /* overrides Dawn base.css */
  gap: 8px; /* overrides Dawn base.css */
}

/* ── SHOP BY OCCASION: BASE / MOBILE ────────────────────────
   Tighter vertical section padding, compact header area,
   readable label text. Section's {% style %} has no 
   so our declarations win at any specificity. */

.sbo-section {
  margin-top: var(--spacing-sections-desktop); /* overrides Dawn base.css */
  padding-top: 26px;
  padding-bottom: 22px; /* overrides Dawn base.css */
}

.custom-faq-wrapper {
  margin-top: var(--spacing-sections-desktop); /* overrides Dawn base.css */
}

.sbo-header {
  margin-bottom: 16px; /* overrides Dawn base.css */
}

.sbo-heading {
  font-size: var(
    --font-size-section-title-desktop
  ); /* overrides Dawn base.css */
  letter-spacing: -0.01em; /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
  line-height: 1.15; /* overrides Dawn base.css */
}

.sbo-subheading {
  margin-top: 5px; /* overrides Dawn base.css */
  font-size: 0.88rem; /* overrides Dawn base.css */
  line-height: 1.45; /* overrides Dawn base.css */
}

/* Scroll list: tighten gap between circles on mobile */

.sbo-list {
  gap: 16px; /* overrides Dawn base.css */
  padding: 4px 4px 10px; /* overrides Dawn base.css */
}

/* Item: reduce gap between circle and label */

.sbo-item {
  gap: 8px; /* overrides Dawn base.css */
}

/* Label: bump from 12px to 12.5px for cleaner readability */

.sbo-label {
  font-size: 12.5px; /* overrides Dawn base.css */
  font-weight: 500; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
  letter-spacing: 0; /* overrides Dawn base.css */
}

.sbo-label.highlight {
  font-weight: 700; /* overrides Dawn base.css */
}

/* ── SHOP BY OCCASION: MOBILE (max 749px) ───────────────────
   Scale down heading and section spacing for small screens. */

@media screen and (max-width: 749px) {
  .sbo-section {
    margin-top: 16px;
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .sbo-heading {
    font-size: 1.5rem;
  }

  .custom-faq-wrapper {
    margin-top: 16px;
  }
}

/* ── SHOP BY OCCASION: DESKTOP (768px+) ─────────────────────
   Tighter section padding, larger labels for clarity.
   Flex-wrap grid layout with justify-content: center. */

@media screen and (width >= 768px) {
  .sbo-section {
    padding-top: 38px;
    padding-bottom: 32px; /* overrides Dawn base.css */
  }

  .sbo-header {
    margin-bottom: 22px; /* overrides Dawn base.css */
  }

  .sbo-heading {
    font-size: clamp(1.45rem, 2vw, 1.9rem); /* overrides Dawn base.css */
  }

  .sbo-subheading {
    font-size: 0.92rem; /* overrides Dawn base.css */
  }

  .sbo-list {
    gap: 10px; /* overrides Dawn base.css */
  }

  .sbo-item {
    gap: 10px; /* overrides Dawn base.css */
  }

  .sbo-label {
    font-size: 13px; /* overrides Dawn base.css */
  }
}

/* ── SHOP BY OCCASION: LARGE DESKTOP (1024px+) ──────────────
   Restore comfortable spacing now that the full container
   width (≥984px) fits 6 × 140px items at 24px gaps (960px). */

@media screen and (width >= 1024px) {
  .sbo-list {
    gap: 24px; /* overrides Dawn base.css */
  }
}

/* ================================================================
   HOMEPAGE — Section Rhythm & Visual Hierarchy
   @scope   : body.template-index (all rules homepage-only)
   @target  : SHOW MORE button gap, testimonial padding,
              empty-block phantom margin, FAQ inner padding
   @cascade :  required throughout — section inline
              \3c style> blocks load after external CSS in document
              order. Our  beats their non-
              declarations regardless of selector specificity.
   @verified: selectors confirmed in live Liquid source files.
   ================================================================ */

/* ── 1. FEATURED COLLECTION: SHOW MORE button top gap ────────
   .collection__show-more renders inside the <ul> product grid
   (featured-collection.liquid line 140). Explicit margin-top
   separates the CTA from the last product row. */

body.template-index .collection__show-more {
  margin-top: 20px; /* overrides Dawn base.css */
}

/* ==================================================
   🌷 FEATURED COLLECTION — PREMIUM CARD REFINEMENT
   Scope : .featured-collection__grid (homepage featured section)
   Method: Override existing Dawn + prior custom-override rules
           via cascade position (last rule wins) + 
           where needed to beat earlier specificity.
   Touch : CSS only — no Liquid / markup changes.
   ================================================== */

/* ── CARD CONTAINER ───────────────────────────────────────── */

.featured-collection__grid .card-wrapper {
  border-radius: var(--radius-card); /* overrides Dawn base.css */
  border: 1px solid rgb(0 0 0 / 5%); /* overrides Dawn base.css */
  box-shadow: var(--shadow-soft); /* overrides Dawn base.css */
  overflow: hidden; /* overrides Dawn base.css */
  height: 100%; /* overrides Dawn base.css */
  background: #fff; /* overrides Dawn base.css */
  transition: border-color 0.28s ease; /* overrides Dawn base.css */
}

/* Subtle resting elevation so cards read as interactive product tiles
   (previously flat: box-shadow none). Shadow + transform are transitioned
   here so the hover lift grows and recedes smoothly. */

.featured-collection__grid .card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); /* overrides Dawn base.css */
  border-radius: var(--radius-card); /* overrides Dawn base.css */
  height: 100%; /* overrides Dawn base.css */
  transition:
    box-shadow 0.3s cubic-bezier(0, 0, 0.3, 1),
    transform 0.3s cubic-bezier(0, 0, 0.3, 1); /* overrides Dawn base.css */
}

/* ── CARD HOVER (desktop only — no accidental lift on touch) ─ */

@media screen and (width >= 750px) {
  .featured-collection__grid .card-wrapper:hover {
    border-color: rgb(159 110 98 / 22%); /* overrides Dawn base.css */
  }

  .featured-collection__grid .card-wrapper:hover .card {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    transition: var(--transition-base);
  }
}

/* ── IMAGE AREA ───────────────────────────────────────────── */

/* Kill image-padding so product photo fills the full card width */

.featured-collection__grid .card__inner,
.featured-collection__grid .card--standard .card__inner {
  --image-padding: 0px;
}

.featured-collection__grid .card__media {
  margin: 0; /* overrides Dawn base.css */
  width: 100%; /* overrides Dawn base.css */
  overflow: hidden; /* overrides Dawn base.css */
}

/* Smooth zoom on hover — override the earlier scale(1.08) */

.featured-collection__grid .card__media img,
.featured-collection__grid .card .media img {
  transition: var(--transition-base); /* overrides Dawn base.css */
}

.featured-collection__grid .card-wrapper:hover .card__media img,
.featured-collection__grid .card-wrapper:hover .media img {
  transform: scale(1.06); /* overrides Dawn base.css */
}

/* ── CARD CONTENT SPACING ─────────────────────────────────── */

/* Remove grid padding from .card__content; control via .card__information */

.featured-collection__grid .card__content {
  padding: 0; /* overrides Dawn base.css */
}

.featured-collection__grid .card__information {
  padding: 10px 12px 12px; /* overrides Dawn base.css */
}

/* Remove extra bottom margin/padding from the card-information wrapper */

.featured-collection__grid .card-information {
  padding-bottom: 0; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

/* ── TITLE ────────────────────────────────────────────────── */

.featured-collection__grid .card__heading {
  font-size: 14px; /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
  color: var(--color-text-primary); /* overrides Dawn base.css */
  margin-bottom: 4px; /* overrides Dawn base.css */
  line-height: 1.3; /* overrides Dawn base.css */
  text-align: center; /* overrides Dawn base.css */
  opacity: 1; /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  .featured-collection__grid .card__heading {
    font-size: 14.5px; /* overrides Dawn base.css */
  }
}

/* ── PRICE HIERARCHY ──────────────────────────────────────── */

.featured-collection__grid .price {
  display: flex;
  justify-content: center; /* overrides Dawn base.css */
  align-items: baseline; /* overrides Dawn base.css */
  gap: 5px; /* overrides Dawn base.css */
  flex-wrap: wrap; /* overrides Dawn base.css */
  margin: 0; /* overrides Dawn base.css */
  width: 100%; /* overrides Dawn base.css */
}

/* ── GRID ROW GAP ─────────────────────────────────────────── */

.featured-collection__grid.grid {
  row-gap: 1.6rem; /* overrides Dawn base.css */
}

/* ── EQUAL-HEIGHT CARDS ───────────────────────────────────── */

/* Ensure every grid item stretches to match the tallest sibling */

.featured-collection__grid .grid__item {
  display: flex;
  flex-direction: column;
}

.featured-collection__grid .grid__item .card-wrapper {
  flex: 1 1 auto; /* overrides Dawn base.css */
}

/* ── SECTION HEADER ───────────────────────────────────────── */

/* Tighten top gap and add a subtle accent divider under the heading */

.featured-collection__title.title-wrapper {
  padding-top: 0;
  margin-bottom: 2rem; /* overrides Dawn base.css */
  text-align: center; /* overrides Dawn base.css */
}

.featured-collection__title .title {
  display: inline-block; /* overrides Dawn base.css */
  position: relative; /* overrides Dawn base.css */
  padding-bottom: 12px; /* overrides Dawn base.css */
  margin-bottom: 0; /* overrides Dawn base.css */
}

@media screen and (width >= 990px) {
  .featured-collection__title .title {
    font-size: 28px; /* overrides Dawn base.css */
  }
}

.featured-collection__title .title::after {
  content: ""; /* overrides Dawn base.css */
  display: block; /* overrides Dawn base.css */
  width: 44px; /* overrides Dawn base.css */
  height: 2px; /* overrides Dawn base.css */
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-brand-primary) 40%,
    var(--color-brand-primary) 60%,
    transparent 100%
  ); /* overrides Dawn base.css */

  margin: 8px auto 0; /* overrides Dawn base.css */
  border-radius: 2px; /* overrides Dawn base.css */
}

/* ── SHOW MORE BUTTON ─────────────────────────────────────── */

/* Spacing wrapper — unchanged */

.featured-collection-section .collection__show-more {
  margin-top: 24px; /* overrides Dawn base.css */
  text-align: center; /* overrides Dawn base.css */
}

/*
  Ghost / secondary CTA — transparent bg, rose border + text.
  Selector (0,3,0) +  beats the global collection-show-more .button
  rules at (0,1,0). No section-ID override needed — the blocking
  .button--secondary rule has been removed from the section Custom CSS.
*/

.featured-collection-section .collection__show-more .button {
  background-color: transparent; /* overrides Dawn base.css */
  color: var(--color-brand-accent); /* overrides Dawn base.css */
  border: 1.5px solid var(--color-brand-accent); /* overrides Dawn base.css */
  border-radius: 12px; /* overrides Dawn base.css */
  font-size: 1.2rem; /* overrides Dawn base.css */
  font-weight: 600; /* overrides Dawn base.css */
  letter-spacing: 0.02em; /* overrides Dawn base.css */
  text-transform: none; /* overrides Dawn base.css */
  padding: 13px 16px; /* overrides Dawn base.css */
  width: 100%; /* overrides Dawn base.css */
  box-shadow: none; /* overrides Dawn base.css */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease; /* overrides Dawn base.css */
}

.featured-collection-section .collection__show-more .button:hover {
  background-color: rgb(154 106 106 / 7%); /* overrides Dawn base.css */
  border-color: #7a5252; /* overrides Dawn base.css */
  color: #7a5252; /* overrides Dawn base.css */
}

/* ── 5. Hero banner heading: Fluid scale on desktop ─────
   .banner__heading confirmed in section-image-banner.css:436
   Guard with min-width to avoid breaking mobile stack.
   ─────────────────────────────────────────────────────── */

@media (width >= 750px) {
  .banner__heading {
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.1;
  }
}

/* ── 7. Collection circles: Hover lift ──────────────────
   .collection-list__item confirmed in section-collection-list.css:27
   Scoped to collection-list section only.
   ─────────────────────────────────────────────────────── */

@media (width >= 750px) {
  .section-collection-list .collection-list__item {
    transition: transform 0.3s ease;
  }

  .section-collection-list .collection-list__item:hover {
    transform: translateY(-4px);
  }
}

/* Grid gap — tight on mobile, comfortable on desktop */

.featured-collection .grid,
.featured-collection ul.grid,
.featured-collection .grid--2-col-tablet-down {
  gap: 10px; /* overrides Dawn base.css */
  row-gap: 20px; /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  .featured-collection .grid,
  .featured-collection ul.grid {
    gap: 24px; /* overrides Dawn base.css */
    row-gap: 28px; /* overrides Dawn base.css */
  }
}

/* Section heading inline blocker (custom_css injects border-bottom) */

.shopify-section .featured-collection .title,
.shopify-section .featured-collection h2 {
  border-bottom: 0; /* overrides Dawn base.css */
  padding-bottom: 0; /* overrides Dawn base.css */
  text-decoration: none; /* overrides Dawn base.css */
}

.shopify-section .featured-collection .page-width {
  padding-left: 14px; /* overrides Dawn base.css */
  padding-right: 14px; /* overrides Dawn base.css */
}

@media screen and (width >= 750px) {
  .shopify-section .featured-collection .page-width {
    padding-left: 24px; /* overrides Dawn base.css */
    padding-right: 24px; /* overrides Dawn base.css */
  }
}

/* 
==========================================================================
   8. FOOTER
   ==========================================================================
 */

/* === Headings === */

/* 🔹 Universal section padding (EXCLUDES header and announcement bar) */

.badge-section,
.footer__content-top {
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
}

.footer {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  background-color: #f7eae3;
  border-top: 1px solid var(--color-border-sand);
}

/* ===== FOOTER ===== */

footer,
.footer {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px; /* overrides Dawn base.css */
  line-height: 1.6; /* overrides Dawn base.css */
}

/* ── 10. Footer: Top separator + link hover ─────────────
   .footer confirmed in section-footer.css
   .footer__column confirmed in section-footer.css:89
   .footer__column h2 — Dawn uses h2 for column headings
   ─────────────────────────────────────────────────────── */

.footer__column h2 {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.footer__column a {
  transition: color 0.2s ease;
}

.footer__column a:hover {
  color: var(--color-brand-accent);
}

/* 
==========================================================================
   9. MOBILE OVERRIDES  (@media max-width)
   ==========================================================================
 */

@media (width <= 768px) {
  .top-info-bar1 {
    font-size: 10px;
  }
}

/* ==================================================
   FOOTER BOTTOM: COMPACT & CLEAN
   ================================================== */

@media screen and (width <= 767px) {
  /* 1. Tighten the Container */
  .footer__content-bottom {
    padding-top: 15px;
    padding-bottom: 30px; /* overrides Dawn base.css */
    border-top: 1px solid rgb(186 138 127 / 15%);

    /* Subtle rose gold line separator */
    padding: 0;
  }

  .footer__content-bottom-wrapper {
    display: flex; /* overrides Dawn base.css */
    flex-direction: column;
    justify-content: center; /* overrides Dawn base.css */
    align-items: center; /* overrides Dawn base.css */
    gap: 15px; /* overrides Dawn base.css */

    /* Space between Social icons and Copyright */
  }

  /* 2. Fix the Policy Links (Privacy, Terms, etc.) */

  /* This forces the vertical list to become a horizontal cluster */
  .footer__content-bottom .policies,
  .footer__content-bottom ul {
    display: flex; /* overrides Dawn base.css */
    flex-wrap: wrap; /* overrides Dawn base.css */

    /* Allows items to wrap nicely to the next line */
    justify-content: center; /* overrides Dawn base.css */
    align-items: center; /* overrides Dawn base.css */
    gap: 10px 15px; /* overrides Dawn base.css */

    /* 10px vertical gap, 15px horizontal gap */
    margin: 0; /* overrides Dawn base.css */
    padding: 0; /* overrides Dawn base.css */
    width: 100%; /* overrides Dawn base.css */
  }

  /* 3. Target the specific list items */
  .footer__content-bottom li {
    display: inline-block; /* overrides Dawn base.css */
    width: auto; /* overrides Dawn base.css */

    /* Stops them from taking full width */
    margin: 0; /* overrides Dawn base.css */
    padding: 0;
  }

  /* 4. Style the Links (Make them neat and accessible) */
  .footer__content-bottom a {
    font-family: "Plus Jakarta Sans", sans-serif; /* overrides Dawn base.css */
    font-size: 13px; /* overrides Dawn base.css */

    /* Increased for readability */
    color: #555; /* overrides Dawn base.css */
    text-transform: capitalize; /* overrides Dawn base.css */

    /* Easier to read than uppercase */
    letter-spacing: 0.3px; /* overrides Dawn base.css */
    text-decoration: none; /* overrides Dawn base.css */
    opacity: 1;
    padding: 8px 10px; /* overrides Dawn base.css */

    /* Larger tap targets */
    display: inline-block; /* overrides Dawn base.css */

    /* Required for padding to work */
  }

  /* 5. Hide those awkward stacking dots */

  /* If the dots are created by pseudo-elements, this hides them */
  .footer__content-bottom li::before,
  .footer__content-bottom li::after {
    display: none; /* overrides Dawn base.css */
  }

  /* 6. Copyright Text Polish */
  .footer__copyright {
    margin-top: 0; /* overrides Dawn base.css */
    font-size: 12px; /* overrides Dawn base.css */
    color: var(--color-brand-secondary); /* overrides Dawn base.css */

    /* Your brand secondary color */
    padding: 0;
  }
}

/* ==================================================
   FOOTER: TIGHTEN VERTICAL GAPS
   ================================================== */

@media screen and (width <= 767px) {
  .footer__content-top {
    padding-bottom: 0; /* overrides Dawn base.css */

    /* Reduces space below the main links */
  }

  .footer__list-social {
    margin-bottom: 15px; /* overrides Dawn base.css */

    /* Pulls the divider line closer to icons */
    padding: 0;
  }
}

/* --- MOBILE ONLY ADJUSTMENTS (Max-width: 767px) --- */

@media screen and (width <= 767px) {
  .card__content {
    padding: 8px; /* overrides Dawn base.css */

    /* Mas maliit na padding sa cellphone para maximize ang screen */
  }

  .card__heading {
    font-size: 14px; /* overrides Dawn base.css */

    /* Slightly smaller text para di sumakop ng 2 lines */
  }
}

/* --- Mobile View Optimization (flowercart.store) --- */

/* Mobile Layout & Typography Overrides (Revised) */

/* Breakdown:
   1. Typography Hierarchy: Uses rem units for responsiveness.
   2. Buttons: 44px+ touch targets using rem.
   3. Spacing: 24px global section padding, tighter for dense grids.
   4. Readability: Scoped word-break fixes.
*/
@media screen and (width <= 768px) {
  /* -------------------------
     1. Global Typography (rem based)
     ------------------------- */

  /* Body text base size: 16px (approx 16px) */
  body,
  .body,
  .rte {
    font-size: 16px; /* overrides Dawn base.css */
    line-height: 1.5; /* overrides Dawn base.css */
  }

  /* Headings Hierarchy */
  h1,
  .h1 {
    font-size: 28px; /* overrides Dawn base.css */

    /* ~28px */
    line-height: 1.2; /* overrides Dawn base.css */
    margin-bottom: 12px; /* overrides Dawn base.css */

    /* ~12px */
  }

  h2,
  .h2,
  .title,
  .section-header__title {
    font-size: 24px; /* overrides Dawn base.css */

    /* ~24px */
    line-height: 1.3; /* overrides Dawn base.css */
    margin-bottom: 16px; /* overrides Dawn base.css */

    /* ~16px */
  }

  h3,
  .h3,
  .card__heading {
    font-size: 18px; /* overrides Dawn base.css */

    /* ~18px */
    line-height: 1.4; /* overrides Dawn base.css */
  }

  /* -------------------------
     2. Buttons & Inputs
     ------------------------- */

  .button,
  .btn,
  .shopify-payment-button__button {
    min-height: 48px; /* overrides Dawn base.css */

    /* ~48px */
    font-size: 16px; /* overrides Dawn base.css */
    padding: 12px 24px; /* overrides Dawn base.css */

    /* ~12px 24px */
  }

  /* -------------------------
      4. Product Grid
      ------------------------- */

  .card-wrapper {
    margin-bottom: 0; /* overrides Dawn base.css */
  }

  /* Price styling for readability */

  /* -------------------------
     5. Specific Readability Fixes
     ------------------------- */

  /* Fix testimonial text wrapping - Scoped strictly */
  .testimonial-card__text,
  .quote-text,
  .multicolumn-card__info .rte {
    word-break: normal; /* overrides Dawn base.css */
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%; /* overrides Dawn base.css */
  }

  /* Footer mobile toggle spacing */
  .footer-block__heading {
    padding-top: 16px;
    padding-bottom: 16px; /* overrides Dawn base.css */
  }
}

/* Improve mobile readability for product cards */

@media screen and (width <= 749px) {
  /* Make product titles more prominent */
  .card__heading {
    font-size: 1.3rem; /* overrides Dawn base.css */
    font-weight: 500; /* overrides Dawn base.css */
   
  }

  /* Emphasize the Sale Price */

 
@media screen and (width <= 749px) {
  /* Reduce Featured Collection section padding */
  .section-template--18453732196539__featured_collection_E8wYd7 {
    padding-top: 0;
    padding-bottom: 0; /* overrides Dawn base.css */
  }

  /* Reduce container padding inside */
  .featured-collection .page-width {
    padding-left: 3px; /* overrides Dawn base.css */
    padding-right: 3px; /* overrides Dawn base.css */
  }
}

/* ==================================================
 * === V3.1 Testimonials (Third-Party App) Styling ===
 * ==================================================
*/

/* Mobile-first: Default styles for mobile */

/* --- UPDATED TRUST SIGNALS (Mobile & Desktop Balanced) --- */

/* ==================================================
   MOBILE TRUST SIGNALS (FINAL & CLEAN)
   Target: Mobile only (max-width: 767px)
   Result: Compact Rows, Icon Left, Text Right
   ================================================== */

/* =========================
   BUTTON SYSTEM
   ========================= */

/* === Secondary Button === */

/* === Top info bar === */

/* MOBILE TESTIMONIAL UPDATE: MAGAZINE OVERLAY (REFINED) */

@media screen and (width <= 767px) {
  .VtlsCarousel {
    padding-bottom: 0; /* overrides Dawn base.css */

    /* This pulls the next section upwards. 
         If space remains, increase to -80px or -100px */
    margin-bottom: -100px; /* overrides Dawn base.css */
    min-height: 0; /* overrides Dawn base.css */
  }

  /* 1. Constrain the Image Height */
  .VtlsTestimonialBlock__Media {
    height: 320px; /* overrides Dawn base.css */
    overflow: hidden; /* overrides Dawn base.css */
    border-radius: 12px 12px 0 0;
  }

  .VtlsTestimonialBlock__Media img {
    height: 100%; /* overrides Dawn base.css */
    width: 100%; /* overrides Dawn base.css */
    object-fit: cover; /* overrides Dawn base.css */
  }

  /* 2. Pull the Text Box Up & Fix Spacing */
  .VtlsTestimonialBlock__Content {
    position: relative;
    z-index: 2;

    /* Positioning: Pulls box up over image */
    margin-top: -50px; /* overrides Dawn base.css */
    width: 90%; /* overrides Dawn base.css */
    margin-left: auto; /* overrides Dawn base.css */
    margin-right: auto; /* overrides Dawn base.css */

    /* Visual Polish */
    background-color: #fff; /* overrides Dawn base.css */
    box-shadow: 0 10px 25px rgb(0 0 0 / 15%); /* overrides Dawn base.css */
    border: 1px solid var(--color-border-sand, #e5e5e5); /* overrides Dawn base.css */

    /* Fallback color added */
    border-radius: 8px; /* overrides Dawn base.css */

    /* Adds slight curve to text box corners */

    /* --- SPACING ADJUSTMENTS --- */
    height: auto; /* overrides Dawn base.css */

    /* Forces box to shrink to fit text */
    min-height: unset; /* overrides Dawn base.css */

    /* Removes any minimum height forcing gaps */
    padding: 1.5rem; /* overrides Dawn base.css */

    /* Flexbox to control gap between Stars, Text, and Author */
    display: flex; /* overrides Dawn base.css */
    flex-direction: column;
    justify-content: center; /* overrides Dawn base.css */
    gap: 0.75rem; /* overrides Dawn base.css */
  }

  /* 3. Text Clean up */
  .VtlsTestimonialBlockText {
    margin-bottom: 0; /* overrides Dawn base.css */
  }
}

/* ==================================================
   FOOTER BOTTOM: COMPACT & CLEAN
   ================================================== */

/* ==================================================
   FOOTER: TIGHTEN VERTICAL GAPS
   ================================================== */

/* --- MOBILE ONLY ADJUSTMENTS (Max-width: 767px) --- */

/* Mobile Layout & Typography Overrides (Revised) */

/* Breakdown:
   1. Typography Hierarchy: Uses rem units for responsiveness.
   2. Buttons: 44px+ touch targets using rem.
   3. Spacing: 24px global section padding, tighter for dense grids.
   4. Readability: Scoped word-break fixes.
*/

/* Improve mobile readability for product cards */

/* 3. Perfect For Hover Lift */

@media screen and (width <= 768px) {
  product-info .product__title h1 {
    font-size: 24px; /* overrides Dawn base.css */
  }

  /* Make CTA visible above fold by reducing image height */

  /* This selector is quite specific to the product page media container */
  .product-media-container.constrain-height.media-fit-contain {
    --ratio-percent: 80%;
  }

  /* 2. Price Visuals - Scoped to Large Price (Main Product) */
}

/* --- 3. TRUST & DELIVERY SIGNALS --- */

/* Modern "Safe" Badge Style for the Header */

/* Green Text for "Freshness Guaranteed" */

/* Delivery Timer Box: Standardizes look with brand secondary color */

/* Timer Countdown Text */

/* ==================================================
   MOBILE COLLECTION BANNER OPTIMIZATION
   ================================================== */

@media screen and (width <= 749px) {
  /* Restrict banner height on mobile to prevent scroll fatigue */
  .collection-hero__image-container {
    max-height: 35vh; /* overrides Dawn base.css */
    min-height: 220px; /* overrides Dawn base.css */
    overflow: hidden; /* overrides Dawn base.css */
  }

  .collection-hero__image-container img {
    height: 100%; /* overrides Dawn base.css */
    width: 100%; /* overrides Dawn base.css */
    object-fit: cover; /* overrides Dawn base.css */
    object-position: center center; /* overrides Dawn base.css */
  }

  /* Ensure header text doesn't take up too much vertical space */
  .collection-hero__title {
    font-size: 2rem; /* overrides Dawn base.css */
    margin-bottom: 0.5rem; /* overrides Dawn base.css */
  }

  .collection-hero__description {
    font-size: 1.4rem; /* overrides Dawn base.css */
    margin-top: 0; /* overrides Dawn base.css */
  }
}

/* 7. Responsive Adjustments */

@media screen and (width <= 768px) {
  body,
  p,
  li,
  label,
  input,
  textarea,
  select,
  button,
  .body {
    font-size: 15px; /* overrides Dawn base.css */
    line-height: 1.45; /* overrides Dawn base.css */
  }

  h1 {
    font-size: 28px; /* overrides Dawn base.css */
  }

  h2 {
    font-size: 24px; /* overrides Dawn base.css */
  }

  h3 {
    font-size: 22px; /* overrides Dawn base.css */
  }

  h4 {
    font-size: 20px; /* overrides Dawn base.css */
  }

  h5 {
    font-size: 18px; /* overrides Dawn base.css */
  }

  h6 {
    font-size: 16px; /* overrides Dawn base.css */
  }

  button#ProductSubmitButton-template--18556573384891__main,
  .sticky-add-btn,
  button#CartDrawer-Checkout {
    color: #fff; /* overrides Dawn base.css */
    background-color: var(--color-brand-accent); /* overrides Dawn base.css */
  }
}

@media (width <= 768px) {
  p,
  .product__description,
  .rte,
  .text-body,
  body {
    font-size: 16px; /* overrides Dawn base.css */
    line-height: 1.7; /* overrides Dawn base.css */
  }
}

@media (width <= 768px) {
  .card__heading,
  .product-card__title {
    font-size: 14px; /* overrides Dawn base.css */
  }

  .product__title,
  h1.product__title {
    font-size: 28px; /* overrides Dawn base.css */
  }
}

@media (width <= 768px) {
  .product__price {
    font-size: 16px;
  }
}

@media screen and (width <= 749px) {
  .product__media-item,
  .product__media-wrapper,
  .slideshow__slide,
  .product-media-container {
    padding-top: 0;
    padding-bottom: 0; /* overrides Dawn base.css */
    margin-top: 0; /* overrides Dawn base.css */
    margin-bottom: 0; /* overrides Dawn base.css */
  }

  .product__media-wrapper {
    overflow-x: hidden;
  }

  .product__media-list {
    overscroll-behavior-x: contain;
  }
}

/* =========================
   MOBILE (STRONGER VISIBILITY)
========================= */

@media screen and (width <= 749px) {
  .product-form__submit,
  .cart__checkout-button,
  .rb-button,
  .button--primary {
    font-size: 1.6rem; /* overrides Dawn base.css */
    padding: 18px 20px; /* overrides Dawn base.css */
    width: 100%; /* overrides Dawn base.css */
    border-radius: var(--buttons-radius); /* overrides Dawn base.css */

    /* stronger contrast on mobile */
    background-color: var(--brand-refined); /* overrides Dawn base.css */
    box-shadow: 0 6px 16px rgb(var(--color-button), 0.3); /* overrides Dawn base.css */
  }
}

@media screen and (width <= 749px) {
  .product-form__input--pill input[type="radio"] + label {
    font-size: 1.1rem; /* overrides Dawn base.css */
    padding: 5px 10px; /* overrides Dawn base.css */
  }
}

@media (width <= 768px) {
  .card-wrapper {
    border-radius: 10px; /* overrides Dawn base.css */
  }

  .card-wrapper:hover {
    transform: none; /* overrides Dawn base.css */ /* remove hover sa mobile */
    box-shadow: 0 4px 10px rgb(0 0 0 / 6%); /* overrides Dawn base.css */
  }

  .card__heading {
    font-size: 14px; /* overrides Dawn base.css */
  }
}

@media screen and (width <= 749px) {
  h3.product-description-title {
    font-size: 14px; /* overrides Dawn base.css */
    text-transform: uppercase; /* overrides Dawn base.css */
  }
}

/* PRICE CONTAINER */

/* REGULAR PRICE */

/* SALE PRICE */

/* STRIKETHROUGH */

/* =========================
   MOBILE
========================= */

@media (width <= 749px) {
  .card .card__heading {
    font-size: 14px; /* overrides Dawn base.css */
    margin-bottom: 4px; /* overrides Dawn base.css */
    line-height: 1.25; /* overrides Dawn base.css */
  }
}

@media (width <= 749px) {
  .card__content {
    padding: 10px 12px 12px; /* overrides Dawn base.css */
  }
}

/* =========================
   MOBILE
========================= */

@media (width <= 749px) {
  .card .price {
    flex-direction: column;
    gap: 4px; /* overrides Dawn base.css */
    margin-top: 0; /* overrides Dawn base.css */
  }
}

/* =========================
   HOVER EFFECT
========================= */

/* Card shadow like screenshot */

/* =========================================
   MOBILE OPTIMIZATION (<= 749px)
   Slightly reduce sizes for small screens
========================================= */

@media screen and (width <= 749px) {
  /* Sale price */
  .product__info-container .price--on-sale .price-item--sale {
    font-size: 20px; /* overrides Dawn base.css */
    font-variant-numeric: tabular-nums;
  }

  /* Regular price */
  .product__info-container .price:not(.price--on-sale) .price-item--regular {
    font-size: 18px; /* overrides Dawn base.css */
  }

  /* Compare price — s.price-item--regular targets the <s> element itself (not a descendant inside it) */
  .product__info-container .price--on-sale s.price-item--regular {
    font-size: 13px; /* overrides Dawn base.css */
    color: rgb(var(--color-foreground), 0.3); /* overrides Dawn base.css */
    text-decoration-color: rgb(var(--color-foreground), 0.2);
    font-weight: 400; /* overrides Dawn base.css */
    letter-spacing: 0.01em; /* overrides Dawn base.css */
  }

  /* Sale price — lock crisp number rendering */
}

/* mobile */

@media (width <= 749px) {
  .main-product .product__title h1 {
    font-size: 23px; /* overrides Dawn base.css */
  }

  .main-product .price-item--regular,
  .main-product .price-item--sale {
    font-size: 20px; /* overrides Dawn base.css */
  }

  .main-product .product-form__submit {
    height: 50px; /* overrides Dawn base.css */
  }
}

@media screen and (width <= 749px) {
  /* remove spacing coming from global rule */
  .main-product .product__info-container .price {
    margin-top: -10px; /* overrides Dawn base.css */
  }

  /* tighten title spacing */
  .main-product .product__title {
    margin-bottom: 0; /* overrides Dawn base.css */
  }

  .price__container,
  .product__price,
  .price {
    margin-top: 0; /* overrides Dawn base.css */
    padding-top: 0;
  }
}

@media screen and (width <= 989px) {
  .header-wrapper {
    --lpc-header-padding-x: 0.9rem;
    --lpc-header-padding-y: 0.3rem;
    --lpc-header-min-height: 4.2rem;
    --lpc-header-icon-size: 3rem;
    --lpc-header-logo-max-height: 3.15rem;
    --lpc-announcement-padding-x: 0.8rem;
    --lpc-announcement-padding-y: 0.4rem;
    --lpc-announcement-font-size: 1.2rem;
    --lpc-announcement-line-height: 1.3;
  }

  .header-wrapper .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header .header__heading {
    justify-self: center;
    justify-content: center;
  }

  .header .header__icons {
    gap: 0.1rem;
  }

  .announcement-bar__message {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (width <= 749px) {
  .header-wrapper {
    --lpc-header-padding-x: 0.75rem;
    --lpc-header-padding-y: 0.25rem;
    --lpc-header-min-height: 4rem;
    --lpc-header-icon-size: 2.8rem;
    --lpc-header-logo-max-height: 2.95rem;
    --lpc-announcement-padding-x: 0.75rem;
    --lpc-announcement-padding-y: 0.35rem;
    --lpc-announcement-font-size: 1.15rem;
  }

  .announcement-bar__message {
    letter-spacing: 0.01em;
  }

  .header-wrapper header-drawer > details[open] > .header__icon--menu::before {
    background: linear-gradient(
      90deg,
      rgb(var(--color-foreground), 0.05) 0%,
      rgb(var(--color-foreground), 0.1) 62%,
      rgb(var(--color-foreground), 0.16) 100%
    );
  }

  .header-wrapper header-drawer > details > .menu-drawer {
    width: min(82vw, 36rem);
    filter: none;
    border-right: 1px solid rgb(var(--color-foreground), 0.05);
    box-shadow: 0.95rem 0 2.6rem rgb(var(--color-shadow), 0.14);
  }

  .header-wrapper header-drawer .menu-drawer__navigation {
    padding: 2.1rem 0 1.15rem;
  }

  .header-wrapper header-drawer .menu-drawer__menu-item {
    padding: 0.92rem 2.2rem;
    line-height: 1.34;
    /* Unify primary nav weight (links were 500, the "Shop All" summary 400) and
       make it dominate the smaller 600-weight utility links (Log in / socials),
       fixing the hierarchy inversion in the drawer. */
    font-weight: var(--fw-semibold, 600);
  }

  /* Active page row: warm brand tint + brand text instead of the neutral grey. */
  .header-wrapper header-drawer .menu-drawer__menu-item--active {
    background: var(--brand-tint);
    color: var(--brand-refined);
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > .menu-drawer__menu-item,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details
    > .menu-drawer__menu-item {
    padding-left: 1.7rem;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile {
    --inline-mobile-submenu-duration: 320ms;
    --inline-mobile-submenu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__submenu {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transform: translateY(-0.4rem);
    transform-origin: top center;
    background: transparent;
    z-index: auto;
    overflow: hidden;
    pointer-events: none;
    will-change: max-height, opacity, transform;
    transition:
      max-height var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      opacity 240ms ease-out,
      transform var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      margin-top var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      visibility 0s linear var(--inline-mobile-submenu-duration);
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__submenu {
    margin-top: 0.3rem;
    opacity: 1;
    visibility: visible;
    max-height: 60rem;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      max-height var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      opacity 240ms ease-out,
      transform var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      margin-top var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      visibility 0s linear 0s;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__submenu
    .menu-drawer__inner-submenu {
    height: auto;
    overflow: visible;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__submenu
    .menu-drawer__close-button {
    display: none;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details
    > .menu-drawer__submenu
    .menu-drawer__menu
    a.menu-drawer__menu-item {
    font-size: 1.2rem;
    line-height: 1.3;
    padding-top: 0.42rem;
    padding-bottom: 0.42rem;
    font-weight: 360;
    margin-left: 1.8rem;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__menu-item--with-icon
    .menu-drawer__menu-item-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__menu-item--with-icon
    .menu-drawer__menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    color: rgb(var(--color-foreground), 0.72);
  }

  .header-wrapper
    header-drawer
    .menu-drawer__menu-item--with-icon
    .menu-drawer__menu-item-icon
    svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .header-wrapper header-drawer .menu-drawer summary.menu-drawer__menu-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-right: 2.2rem;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__menu-item,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__menu-item
    .menu-drawer__menu-item-label,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__menu-item
    .menu-drawer__menu-item-icon {
    transition: color 220ms ease-out;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile
    > .menu-drawer__menu-item
    > .menu-drawer__menu-item-label
    + .svg-wrapper {
    transition:
      transform var(--inline-mobile-submenu-duration)
        var(--inline-mobile-submenu-ease),
      color 220ms ease-out;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__menu-item
    > .menu-drawer__menu-item-label
    + .svg-wrapper {
    transform: rotate(90deg);
  }

  .header-wrapper header-drawer .menu-drawer__menu-item--active {
    font-weight: 500;
    background-color: rgb(var(--color-foreground), 0.032);
  }

  .header-wrapper header-drawer .menu-drawer__menu-item--active:hover {
    background-color: rgb(var(--color-foreground), 0.05);
  }

  .header-wrapper
    header-drawer
    .menu-drawer
    summary.menu-drawer__menu-item
    > .menu-drawer__menu-item-label
    + .svg-wrapper {
    position: static;
    width: 1.4rem;
    margin-left: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground), 0.62);
  }

  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__menu-item,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__menu-item
    .menu-drawer__menu-item-label,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__menu-item
    .menu-drawer__menu-item-icon,
  .header-wrapper
    header-drawer
    .menu-drawer__navigation
    > .menu-drawer__menu
    > li
    > details.menu-drawer__details--inline-mobile[open]
    > .menu-drawer__menu-item
    > .menu-drawer__menu-item-label
    + .svg-wrapper {
    color: var(--color-brand-accent, var(--color-brand-primary));
  }

  .js
    .header-wrapper
    header-drawer
    .menu-drawer
    summary.menu-drawer__menu-item
    > .svg-wrapper:last-of-type {
    display: none;
  }

  .header-wrapper header-drawer .menu-drawer__close-button {
    margin-top: 0.6rem;
    margin-bottom: 0.3rem;
    padding: 1rem 2.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground), 0.72);
    background: rgb(var(--color-foreground), 0.035);
  }

  .header-wrapper header-drawer .menu-drawer__close-button .svg-wrapper {
    margin-right: 0.85rem;
  }

  .header-wrapper header-drawer .menu-drawer__navigation-container {
    grid-template-rows: auto auto;
    /* was align-content:center — centered the short menu and left a ~170px void
       under the header. space-between top-aligns the nav, keeps the utility
       footer pinned to the bottom. Collapses to start when the menu is tall. */
    align-content: space-between;
  }

  .header-wrapper header-drawer .menu-drawer__utility-links {
    display: grid;
    gap: 0.45rem;
    padding: 1.35rem 2.2rem 1.45rem;
    border-top: 1px solid rgb(var(--color-foreground), 0.055);
    background: linear-gradient(
      180deg,
      rgb(var(--color-foreground), 0.018) 0%,
      rgb(var(--color-foreground), 0.04) 100%
    );
  }

  .header-wrapper header-drawer .menu-drawer__account {
    gap: 0.8rem;
    padding: 0.45rem 0 0.2rem;
    font-size: 1.32rem;
    font-family: var(--font-family-body);
  }

  .header-wrapper header-drawer .menu-drawer__account > .svg-wrapper,
  .header-wrapper
    header-drawer
    .menu-drawer__account
    account-icon
    > .svg-wrapper,
  .header-wrapper header-drawer .menu-drawer__social-list .svg-wrapper {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0;
  }

  .header-wrapper
    header-drawer
    .menu-drawer__localization
    .localization-form__select {
    padding: 0.85rem 3rem 0.85rem 0;
  }

  .header-wrapper header-drawer .menu-drawer .list-social {
    gap: 0.1rem;
    margin-left: -0.45rem;
  }

  .header-wrapper header-drawer .menu-drawer .list-social__link {
    padding: 0.72rem;
  }

  /* Labeled social links (Facebook & Instagram) in mobile drawer */
  .header-wrapper header-drawer .menu-drawer .list-social__link--labeled {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.72rem;
    border-radius: 0.5rem;
  }

  .header-wrapper header-drawer .menu-drawer .list-social__label {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: var(--font-family-body);
    color: rgb(var(--color-foreground));
    line-height: 1;
    white-space: nowrap;
  }
}

@media screen and (width <= 480px) {
  .header-wrapper {
    --lpc-announcement-padding-x: 0.6rem;
    --lpc-announcement-padding-y: 0.32rem;
    --lpc-announcement-font-size: 1.08rem;
    --lpc-announcement-line-height: 1.28;
  }

  .announcement-bar__message {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

/* MOBILE */

@media (width <= 768px) {
  button.quantity__button,
  .quantity__input {
    color: rgb(var(--color-foreground), 0.75); /* overrides Dawn base.css */
    opacity: 1;
  }

  .cart-item__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  h1.title.title--primary {
    font-size: 20px;
    margin-top: 2rem;
    letter-spacing: 0;
    font-weight: 700; /* overrides Dawn base.css */
  }

  .title-wrapper-with-link {
    margin: 0;
  }

  a.underlined-link,
  th.caption-with-letter-spacing {
    display: none;
  }
}

@media screen and (width <= 749px) {
  product-info .product__info-container > * + * {
    margin-top: 0.6rem; /* overrides Dawn base.css */
  }

  product-info .product__info-container .product__description,
  product-info .product__info-container .product-form {
    margin-top: 0.6rem; /* overrides Dawn base.css */
  }
}

/* ── Mobile: 16px text ───────────────────────────────────────
   Beats the global `p { 16px  }` rule via higher
   specificity (product-info .product-description = 0,1,1 vs p = 0,0,1). */

@media screen and (width <= 749px) {
  product-info .product-description {
    font-size: 16px; /* overrides Dawn base.css */
    line-height: 1.72; /* overrides Dawn base.css */
  }

  product-info .product__description p {
    margin-bottom: 0.65rem; /* overrides Dawn base.css */
  }
}

@media screen and (width <= 749px) {
  product-info .product-form__submit {
    min-height: 48px; /* overrides Dawn base.css */
    padding: 13px 20px; /* overrides Dawn base.css */
    font-size: 14.5px; /* overrides Dawn base.css */
    display: none;
  }
}

/* Mobile only: add extra breathing room above CTA */

@media screen and (width <= 749px) {
  body.template-index .hero-homepage__cta {
    margin-top: var(--space-16); /* overrides Dawn base.css */
  }
}

/* ================================================================
   FEATURED COLLECTION — Mobile Visual Hierarchy
   @target  : screens ≤ 749px only — desktop untouched
   @scope   : .collection .product-grid (scoped to collection
              sections; avoids bleeding into unrelated sections)
   @note    :  required — existing rules in this file
              already use  on the same properties
   ================================================================ */

@media screen and (width <= 749px) {
  /* 1 ▸ Section heading → product grid: clearer visual separation */
  .collection .collection__title {
    margin-bottom: 3.6rem; /* overrides Dawn base.css */
  }

  /* 2 ▸ Product title: better line-height + 2-line cap
         — long titles no longer get single-line truncation
         — both columns lock to the same title block height */
  .full-unstyled-link .card__heading {
    display: -webkit-box; /* overrides Dawn base.css */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; /* overrides Dawn base.css */
    white-space: normal; /* overrides Dawn base.css */
  }

  /* 3 ▸ Price stack: readable gap between sale price and compare-at */
  .collection .product-grid .card .price {
    gap: 1px; /* overrides Dawn base.css */
  }

  /* 4 ▸ Compare-at price: visually subordinate so sale price reads first */
  .collection .product-grid .card .price--on-sale s .price-item--regular {
    font-size: 11px; /* overrides Dawn base.css */
    opacity: 0.55; /* overrides Dawn base.css */
  }

  /* 5 ▸ Card content top: more image-to-title breathing room */
  .collection .product-grid .card__content {
    padding-top: 0;
  }
}

/* ================================================================
   FEATURED COLLECTION — Tablet Visual Hierarchy
   @target  : 750px – 989px (Dawn's tablet-down threshold)
   @scope   : .collection .product-grid — scoped to collection
              sections only, no bleed into other sections
   @note    :  required — existing rules in this file
              already use  on the same properties.
              Source-order wins over earlier same-weight rules.
   ================================================================ */

@media screen and (width >= 750px) and (width <= 989px) {
  /* 1 ▸ Section heading → grid: intentional separation for 2-col */
  .collection .collection__title {
    margin-bottom: 3.8rem; /* overrides Dawn base.css */
  }

  /* 2 ▸ Card content top: consistent 14px across all breakpoints */
  .collection .product-grid .card__content {
    padding-top: 14px;
  }

  /* 3 ▸ Product title: consistent line-height + 2-line cap
         Prevents unequal row heights across 2-col tablet grid */
  .collection .product-grid .card .card__heading {
    line-height: 1.45; /* overrides Dawn base.css */
    margin-bottom: 8px; /* overrides Dawn base.css */
    display: -webkit-box; /* overrides Dawn base.css */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; /* overrides Dawn base.css */
    white-space: normal; /* overrides Dawn base.css */
  }

  .card__content {
    padding: 0 12px; /* overrides Dawn base.css */
  }
}

/* ── MOBILE ADJUSTMENTS ───────────────────────────────────── */

@media screen and (width <= 749px) {
  .featured-collection__grid .card-wrapper {
    border-radius: 8px; /* overrides Dawn base.css */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* subtle shadow for contrast */
    border: 1px solid rgba(0, 0, 0, 0.08); /* subtle border for separation */
  }

  /* No hover lift on touch — avoids sticky hover states */
  .featured-collection__grid .card-wrapper:hover {
    transform: none; /* overrides Dawn base.css */
    box-shadow: 0 2px 10px rgb(0 0 0 / 4.5%); /* overrides Dawn base.css */
  }

  .featured-collection__grid .card__information {
    padding: 6px 10px 8px; /* overrides Dawn base.css */
  }

  .featured-collection__grid .card__heading {
    font-size: 13px; /* overrides Dawn base.css */
    margin-bottom: 3px; /* overrides Dawn base.css */
  }

  .featured-collection__grid .price:not(.price--on-sale) .price-item--regular {
    font-size: 13px; /* overrides Dawn base.css */
  }

  .featured-collection__grid .price--on-sale .price-item--sale {
    font-size: 14px; /* overrides Dawn base.css */
  }

  .featured-collection__grid .price--on-sale .price-item--regular {
    font-size: 11.5px; /* overrides Dawn base.css */
  }

  .featured-collection__grid.grid {
    row-gap: 1.1rem; /* overrides Dawn base.css */
  }

  .featured-collection__title.title-wrapper {
    margin-bottom: 1.4rem; /* overrides Dawn base.css */
  }

  .featured-collection__grid .price__container {
    width: 100%; /* overrides Dawn base.css */
  }
}

@media screen and (width <= 749px) {
  body.template-product .product-sticky-atc {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border-top: 1px solid rgb(0 0 0 / 6%);
    box-shadow: 0 -7px 13px -11px rgb(0 0 0 / 43.2%);
    padding: var(--space-12) var(--space-12)
      calc(var(--space-12) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  body.template-product .product-sticky-atc:not([hidden]) {
    transform: translateY(0);
  }

  body.template-product .product-sticky-atc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: var(--button-min-height);
    background: var(--brand-refined); /* overrides hardcoded #6b3d41 */
    padding: 1.3rem 1.8rem;
    color: var(--text-on-accent);
    border: 0;
    border-radius: var(--radius-12);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    /* Real elevation: neutral-warm brand-dark shadow (not pale blush) so the
       CTA lifts off the white bar and reads as the strongest element.
        + higher specificity beats global .button--primary shadow (line ~414). */
    box-shadow: 0 6px 18px rgba(34, 20, 24, 0.24); /* overrides .button--primary  */
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease;
  }

  body.template-product .product-sticky-atc__btn:active {
    transform: scale(0.985);
    box-shadow: 0 2px 8px rgba(34, 20, 24, 0.18); /* pressed — same family as resting elevation */
    filter: brightness(0.98);
  }

  body.template-product .product-sticky-atc__icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
  }

  body.template-product .product-sticky-atc__label {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0.01em;
    margin-left: 0;
  }

  body.template-product .product-sticky-atc__sep {
    opacity: 0.28;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
  }

  body.template-product .product-sticky-atc__price {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    opacity: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
}

/* ==================================================
   END: FEATURED COLLECTION CARD REFINEMENT
   ================================================== */

/* ==================================================
   END: FEATURED COLLECTION CARD REFINEMENT
   ================================================== */

/* ==================================================
   MOBILE HERO: Image Banner Text Hierarchy
   max-width 749px only — zero desktop impact
   ================================================== */

@media screen and (width <= 749px) {
  .banner__heading {
    font-size: 26px; /* overrides Dawn base.css */ /* 34px → 26px: 4 single-word lines → balanced 2-line "Metro Manila / Flower Delivery" */
    margin-bottom: 18px; /* overrides Dawn base.css */ /* heading → subtext breathing room */
    font-weight: var(
      --fw-bold
    ); /* overrides Dawn base.css — better hierarchy vs subtext and more impact on mobile */
  }

  .banner__text {
    opacity: 0.72; /* de-emphasise subtext vs heading */
  }

  .banner__text p {
    font-size: 15px; /* overrides Dawn base.css */ /* 16px → 15px: 3-line orphan → balanced 2-line "For birthdays, anniversaries, / and surprises" */
  }

  .banner__buttons {
    margin-top: 22px; /* overrides Dawn base.css */ /* subtext → CTA breathing room */
  }
}

/* ==================================================
   MOBILE SBO: Right-edge scroll fade
   .sbo-list-wrap wraps .sbo-list (overflow-x: auto)
   position: relative already live; adding overflow: hidden
   and ::after gradient to hint scrollability
   ================================================== */

@media screen and (width <= 749px) {
  .sbo-list-wrap {
    overflow: hidden; /* clip the ::after gradient to container bounds */
  }

  .sbo-list-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(to right, transparent, #fcfcfc);
    pointer-events: none;
    z-index: 2;
  }
}

/* --- Spacing Reset for Mobile Product Pages (No CLS/Lighthouse Issues) --- */
@media screen and (max-width: 749px) {
  .template-product .main-product-section,
  .template-product main#MainContent,
  .template-product [class*="product-section"] {
    padding-top: 0;
    margin-top: 0;
  }
  .template-product .section-header,
  .template-product [class*="header"]:not([class*="trust-signals"]) {
    margin-bottom: 0;
  }
}

/* ── MOBILE ANIMATION KILL — Disable scroll-trigger on small screens ─────── */

@media (max-width: 768px) {
  .scroll-trigger {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── TESTIMONIAL CLS FIX — Reserve height before JS initializes ─────────── */

#shopify-section-template--19769726697659__testimonial_carouselv2_j4jeHA {
  min-height: 420px;
}

/* ── SCROLL / TOUCH — Prevent horizontal containers hijacking main scroll ─── */

.tc-carousel-wrap,
.tc-track {
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
}

/* Momentum scrolling on iOS for overflow-x: auto containers */
.menu-drawer__navigation-container,
.predictive-search,
.sbo-list {
  -webkit-overflow-scrolling: touch;
}

/* ── CONTENT VISIBILITY — Skip rendering off-screen sections ─────────────── */

.shopify-section:not(:first-child):not(:nth-child(2)):not(.section-header):not(
    .shopify-section-group-header-group
  ) {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

.featured-collection-section,
.testimonial-carousel-v2,
section[class*="faq"],
section[class*="footer"] {
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
}

/* ── MOBILE CARD LIMITING — Hide cards 9+ on mobile until "Show more" ─────── */

@media (max-width: 749px) {
  .hidden-mobile {
    display: none;
  }
}

/* Prevent content-visibility: auto from clipping the mobile menu drawer on the header section */
.section-header,
.shopify-section-group-header-group {
  content-visibility: visible;
}
#toggleDescBtn {
  display: inline-flex;
}
#menu-drawer {
  /* Calculate height: 100% of viewport height minus the header height */
  /* Assuming your header is roughly 82px tall based on the layout */
  height: calc(100vh - 78px);

  /* Or more dynamically if the top offset is consistent: */
  /* height: calc(100vh - 100%); */

  max-height: calc(100vh - 78px);
  overflow-y: hidden; /* Allow scrolling if content is long */
}

/* ============================================================
   MOBILE AUDIT FIXES — 2026-05-31
   Issues: quantity touch targets, remove button, cart whitespace
   ============================================================ */

/* Fix 1 — Quantity +/- buttons: bump to 44px minimum tap target */
@media screen and (max-width: 749px) {
  body.template-cart .cart-item__quantity .quantity__button {
    min-width: 4.4rem;
    min-height: 4.4rem;
    width: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.template-cart .cart-item__quantity .quantity {
    min-height: 4.4rem;
  }
}

/* Fix 2 — Remove/trash button: bump to 44px minimum tap target */
body.template-cart cart-remove-button .button,
body.template-cart .cart-item cart-remove-button .button {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

/* Fix 3 — Cart whitespace gap between add-ons and payment icons */
@media screen and (max-width: 749px) {
  .cart__complementary-products,
  .complementary-products,
  .cart-page-complementary {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .cart__payment-icons,
  .payment-icons,
  [class*="payment-icon"] {
    padding-top: 1.6rem;
    margin-top: 0;
  }
}

/* Fix 4 — Search modal renders off-screen when page is scrolled.
   .modal__content (Dawn core) is position:absolute, so its containing
   block is the document and it scrolls away with the page. Pin it to
   the viewport so it always covers the visible screen on open. */
.search-modal {
  position: fixed;
}
/* Title→price gap was 4px (override2 line 1640): the price sat almost touching
   the title. 6px gives a cleaner two-tier read without loosening the card. */
body.template-index .featured-collection__grid .card__heading {
  margin-bottom: 6px;
  line-height: 1.35; /* was 1.3 — balances titles that wrap to two lines */
}
@media screen and (max-width: 749px) {
  slider-component.page-width {
    padding-top: 0px;
    padding-right: 0.1rem;
    padding-bottom: 0px;
    padding-left: 0.1rem;
  }
}