/* =========================================================
   HOMEPAGE REDESIGN
   Scoped to the storefront homepage so catalog, checkout,
   invoice, admin, and shared product preview behavior stay intact.
   ========================================================= */

.storefront-homepage {
  --home-canvas: #f7f9f6;
  --home-surface: #ffffff;
  --home-surface-soft: #eef3ee;
  --home-surface-muted: #e6eee8;
  --home-text: #19241f;
  --home-text-soft: #405148;
  --home-text-muted: #5e6d64;
  --home-primary: #2f674f;
  --home-primary-hover: #24513f;
  --home-border: #dbe3dc;
  --home-border-strong: #c9d5cc;
  --home-display: 'Source Serif 4', Georgia, serif;
  --home-sans: 'Manrope', sans-serif;

  color: var(--home-text);
  background: var(--home-canvas);
  font-family: var(--home-sans);
}

.storefront-homepage main {
  overflow: clip;
}

.storefront-homepage .font-figures,
.storefront-homepage .storefront-hero-description,
.storefront-homepage .storefront-hero-note,
.storefront-homepage .storefront-section-description,
.storefront-homepage .storefront-benefit-title,
.storefront-homepage .storefront-benefit-description,
.storefront-homepage .storefront-testimonial-name,
.storefront-homepage .storefront-testimonial-role,
.storefront-homepage .storefront-faq-question,
.storefront-homepage .storefront-faq-answer,
.storefront-homepage .storefront-featured-card,
.storefront-homepage .storefront-catalog-button,
.storefront-homepage .storefront-primary-button,
.storefront-homepage .storefront-secondary-button {
  font-family: var(--home-sans);
}

.storefront-homepage .storefront-hero-title,
.storefront-homepage .storefront-section-title {
  font-family: var(--home-display);
  font-style: normal;
}





.storefront-homepage .nav-link {
  color: #526159;
  font-family: var(--home-sans);
  font-weight: 650;
}

.storefront-homepage .nav-link:hover {
  color: var(--home-primary);
}

.storefront-homepage .storefront-home-band {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .storefront-home-shell {
  width: min(100%, 72rem);
  margin-inline: auto;
  padding: 4.75rem 2rem;
}

.storefront-homepage .storefront-home-band-muted {
  border-block: 1px solid var(--home-border);
  background: var(--home-surface-soft);
}

/* Hero */
.storefront-homepage .storefront-hero {
  min-height: auto;
  border-bottom: 1px solid var(--home-border);
  background:
    radial-gradient(circle at 76% 38%, rgba(204, 224, 211, 0.62), transparent 26rem),
    linear-gradient(180deg, #fbfcfa 0%, #f4f8f4 100%);
}

.storefront-homepage .storefront-hero-inner {
  width: min(100%, 72rem);
  padding-top: clamp(2.4rem, 4.5vw, 4rem);
  padding-bottom: clamp(3.25rem, 5vw, 4.75rem);
}

.storefront-homepage .storefront-hero > .relative > div {
  gap: clamp(2rem, 4vw, 4rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .storefront-hero-orb,
.storefront-homepage .storefront-leaf {
  opacity: 0.42;
}

.storefront-homepage .storefront-hero-orb-one {
  background: rgba(169, 205, 181, 0.36);
}

.storefront-homepage .storefront-hero-orb-two {
  background: rgba(223, 232, 224, 0.54);
}

.storefront-homepage .storefront-leaf {
  color: rgba(47, 103, 79, 0.08);
}

.storefront-homepage .storefront-eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--home-primary);
  background: transparent;
  box-shadow: none;
  font-family: var(--home-sans);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.storefront-homepage .storefront-hero-title {
  max-width: 12.8ch;
  margin-top: 0.9rem;
  color: var(--home-text);
  font-size: clamp(2.9rem, 4.65vw, 4.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: pretty;
}

.storefront-homepage .storefront-hero-title span {
  display: inline;
  color: inherit;
  font: inherit;
  font-style: normal;
  font-weight: inherit;
}

.storefront-homepage .storefront-primary-button,
.storefront-homepage .storefront-secondary-button {
  min-height: 2.9rem;
  padding: 0.72rem 1.25rem;
  border-radius: 0.72rem;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 750;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.storefront-homepage .storefront-primary-button {
  color: #fff;
  border: 1px solid var(--home-primary);
  background: var(--home-primary);
}

.storefront-homepage .storefront-primary-button:hover {
  border-color: var(--home-primary-hover);
  background: var(--home-primary-hover);
  box-shadow: none;
  transform: none;
}

.storefront-homepage .storefront-secondary-button {
  color: var(--home-text);
  border: 1px solid var(--home-border-strong);
  background: rgba(255, 255, 255, 0.68);
}

.storefront-homepage .storefront-secondary-button:hover {
  color: var(--home-primary);
  border-color: #aabdb0;
  background: #fff;
  transform: none;
}

.storefront-homepage .storefront-hero-visual {
  min-height: 27rem;
}

.storefront-homepage .storefront-character-glow {
  inset: 14% 8% 10%;
  background: radial-gradient(circle, rgba(207, 224, 212, 0.82), rgba(231, 239, 233, 0.34) 48%, transparent 72%);
  filter: blur(20px);
}

.storefront-homepage .storefront-character-image {
  max-width: 32rem;
  filter: drop-shadow(0 18px 24px rgba(39, 69, 53, 0.09));
}

/* Shared section typography */
.storefront-homepage .storefront-home-section-header {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0 0 1.35rem;
  border: 0;
  border-bottom: 1px solid var(--home-border);
  text-align: left;
}

.storefront-homepage .storefront-section-title,
.storefront-homepage .storefront-home-section-header .storefront-section-title {
  max-width: 25ch;
  margin: 0;
  color: var(--home-text);
  font-size: clamp(1.8rem, 2.8vw, 2.55rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-align: left;
  text-wrap: balance;
}

.storefront-homepage .storefront-section-title span,
.storefront-homepage .storefront-home-section-header .storefront-section-title span {
  display: inline;
  color: inherit;
  font: inherit;
  font-style: normal;
}

.storefront-homepage .storefront-catalog-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.1rem;
  border: 1px solid var(--home-border-strong);
  border-radius: 0.7rem;
  color: var(--home-text);
  background: var(--home-surface);
  box-shadow: none;
  font-family: var(--home-sans);
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.storefront-homepage .storefront-catalog-button svg {
  width: 1rem;
  height: 1rem;
}

/* Featured products: one clean card, no decorative layer inside another layer */
.storefront-homepage .storefront-featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.storefront-homepage .storefront-featured-card.product-showcase-card,
.storefront-homepage .storefront-product-card.product-card-v2 {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: 1rem;
  background: var(--home-surface);
  box-shadow: none;
  transform: translateY(0);
  isolation: isolate;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 260ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-media,
.storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--home-border);
  background: #f1f5f1;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-media::after,
.storefront-homepage .storefront-featured-card .product-showcase-card-spotlight,
.storefront-homepage .storefront-featured-card .product-showcase-card-stage {
  display: none;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-image-wrap {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-image-wrap img,
.storefront-homepage .storefront-featured-card .product-showcase-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: none;
  transform: none;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront-homepage .storefront-featured-card:hover .product-showcase-card-image-wrap img {
  filter: none;
  transform: scale(1.03);
}

.storefront-homepage .storefront-featured-card .product-card-v2-placeholder,
.storefront-homepage .storefront-featured-card .storefront-product-placeholder {
  color: var(--home-primary);
  font-family: var(--home-display);
  font-style: normal;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-body,
.storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
  padding: 1rem;
  background: var(--home-surface);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-description,
.storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description {
  min-height: 3.15em;
  margin-top: 0.45rem;
  color: var(--home-text-soft);
  font-family: var(--home-sans);
  font-size: 0.73rem;
  line-height: 1.58;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-price-panel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-price-label {
  color: var(--home-text-muted);
  font-family: var(--home-sans);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-price,
.storefront-homepage .storefront-featured-card .product-card-v2-price.product-showcase-card-price {
  color: var(--home-primary);
  font-family: var(--home-sans);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy,
.storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
  min-height: 2.35rem;
  border-radius: 0.65rem;
  box-shadow: none;
  font-family: var(--home-sans);
  font-size: 0.64rem;
  font-weight: 750;
  transform: translateY(0);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail {
  color: #536159;
  border: 1px solid var(--home-border-strong);
  background: #fff;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-buy {
  color: #fff;
  border: 1px solid var(--home-primary);
  background: var(--home-primary);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover {
  box-shadow: none;
  transform: translateY(-1px);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover {
  color: var(--home-primary);
  border-color: #afc0b3;
  background: var(--home-surface-soft);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover {
  border-color: var(--home-primary-hover);
  background: var(--home-primary-hover);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .product-preview-v2,
.storefront-homepage .product-preview-showcase,
.storefront-homepage .product-preview-v2-title,
.storefront-homepage .product-preview-showcase-title,
.storefront-homepage .product-preview-v2-description,
.storefront-homepage .product-preview-showcase-description,
.storefront-homepage .product-preview-v2-price,
.storefront-homepage .product-preview-showcase-price {
  font-family: var(--home-sans);
}

/* Benefits: a single full-width strip, not four cards inside a card */
.storefront-homepage .storefront-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.storefront-homepage .storefront-benefit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 0.35rem 1.5rem 0.35rem 0;
  border: 0;
  border-right: 1px solid var(--home-border-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.storefront-homepage .storefront-benefit-card + .storefront-benefit-card {
  padding-left: 1.5rem;
}

.storefront-homepage .storefront-benefit-card:last-child {
  padding-right: 0;
  border-right: 0;
}

.storefront-homepage .storefront-benefit-card:hover {
  border-color: var(--home-border-strong);
  box-shadow: none;
  transform: none;
}

.storefront-homepage .storefront-benefit-icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid #bfd0c3;
  border-radius: 0.65rem;
  color: var(--home-primary);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.storefront-homepage .storefront-benefit-title {
  margin: 0.05rem 0 0;
  color: var(--home-text);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
}

.storefront-homepage .storefront-benefit-description {
  margin-top: 0.35rem;
  color: var(--home-text-soft);
  font-size: 0.69rem;
  line-height: 1.58;
}

/* Testimonials */
.storefront-homepage .storefront-testimonial-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.storefront-homepage .storefront-testimonial-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--home-border);
  border-radius: 1rem;
  background: var(--home-surface);
  box-shadow: none;
  text-align: left;
  transform: translateY(0);
  transition: border-color 200ms ease, transform 240ms ease;
}

.storefront-homepage .storefront-testimonial-card::before {
  display: none;
}

.storefront-homepage .storefront-testimonial-card:hover {
  border-color: #b8c9bd;
  box-shadow: none;
  transform: translateY(-2px);
}

.storefront-homepage .storefront-testimonial-quote {
  margin: 0.9rem 0 0;
  color: var(--home-text);
  font-family: var(--home-sans);
  font-size: 0.88rem;
  font-weight: 550;
  line-height: 1.62;
  letter-spacing: -0.01em;
}

.storefront-homepage .storefront-testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.35rem;
}

.storefront-homepage .storefront-testimonial-avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #c8d5cb;
  border-radius: 50%;
  color: var(--home-primary);
  background: #edf3ee;
  box-shadow: none;
  font-family: var(--home-sans);
  font-size: 0.7rem;
  font-weight: 800;
}

.storefront-homepage .storefront-testimonial-name {
  color: var(--home-text);
  font-size: 0.76rem;
  font-weight: 750;
}

.storefront-homepage .storefront-testimonial-role {
  margin-top: 0.12rem;
  color: var(--home-text-muted);
  font-size: 0.66rem;
}

/* FAQ: copy at left, border-only accordion at right */
.storefront-homepage .storefront-home-band-faq {
  border-top: 1px solid var(--home-border);
  background: #fbfcfa;
}

.storefront-homepage .storefront-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.storefront-homepage .storefront-faq-copy {
  position: static;
}

.storefront-homepage .storefront-faq-copy .storefront-section-title {
  max-width: 18ch;
}

.storefront-homepage .storefront-faq-list {
  max-width: none;
  margin: 0;
  border-top: 1px solid var(--home-border-strong);
}

.storefront-homepage .storefront-faq-item {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--home-border-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.storefront-homepage .storefront-faq-item:hover,
.storefront-homepage .storefront-faq-item[open] {
  border-color: var(--home-border-strong);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.storefront-homepage .storefront-faq-item summary {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 1rem 0;
  cursor: pointer;
}

.storefront-homepage .storefront-faq-question {
  color: var(--home-text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.storefront-homepage .storefront-faq-chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--home-primary);
}

.storefront-homepage .storefront-faq-answer {
  max-width: 42rem;
  padding: 0 2.5rem 1.45rem 0;
  color: var(--home-text-soft);
  font-size: 0.81rem;
  line-height: 1.68;
}

.storefront-homepage .storefront-faq-cta {
  display: block;
  margin-top: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.storefront-homepage .storefront-faq-cta p {
  margin-bottom: 0.75rem;
  color: var(--home-text-soft);
  font-family: var(--home-sans);
  font-size: 0.78rem;
}



/* Dark theme keeps the new layout, but uses restrained contrast. */
html[data-theme='dark'] .storefront-homepage {
  --home-canvas: #17211b;
  --home-surface: #202d25;
  --home-surface-soft: #1c2921;
  --home-surface-muted: #26372c;
  --home-text: #edf3ee;
  --home-text-soft: #bdc9c0;
  --home-text-muted: #8f9e93;
  --home-primary: #93b79d;
  --home-primary-hover: #a8c8af;
  --home-border: #34473a;
  --home-border-strong: #44594a;

  background: var(--home-canvas);
}



html[data-theme='dark'] .storefront-homepage .storefront-hero {
  background:
    radial-gradient(circle at 76% 38%, rgba(74, 109, 84, 0.34), transparent 27rem),
    linear-gradient(180deg, #1a261f 0%, #17211b 100%);
}

html[data-theme='dark'] .storefront-homepage .storefront-secondary-button,
html[data-theme='dark'] .storefront-homepage .storefront-benefit-icon {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme='dark'] .storefront-homepage .storefront-featured-card .product-showcase-card-media,
html[data-theme='dark'] .storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
  background: #1a261f;
}

html[data-theme='dark'] .storefront-homepage .storefront-catalog-button {
  background: var(--home-surface);
}

html[data-theme='dark'] .storefront-homepage .storefront-featured-card .product-showcase-card-body,
html[data-theme='dark'] .storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body,
html[data-theme='dark'] .storefront-homepage .storefront-featured-card .product-showcase-card-detail {
  background: var(--home-surface);
}

html[data-theme='dark'] .storefront-homepage .storefront-home-band-faq {
  background: #19241e;
}



@media (max-width: 1023px) {
  .storefront-homepage .storefront-home-shell {
    padding-block: 4rem;
  }

  .storefront-homepage .storefront-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storefront-homepage .storefront-benefit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .storefront-homepage .storefront-benefit-card:nth-child(2) {
    border-right: 0;
  }

  .storefront-homepage .storefront-benefit-card:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .storefront-homepage .storefront-hero-copy {
    text-align: left;
  }

  .storefront-homepage .storefront-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0.55rem;
  }

  .storefront-homepage .storefront-hero-actions > a,
  .storefront-homepage .storefront-hero-action-button {
    width: 100%;
    min-width: 0;
  }

  .storefront-homepage .storefront-home-section-header,
  .storefront-homepage .storefront-home-section-header-split,
  .storefront-homepage .storefront-home-section-header-compact {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding-bottom: 1.15rem;
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card,
  .storefront-homepage .storefront-product-card.product-card-v2 {
    display: grid;
    grid-template-columns: minmax(7.8rem, 0.42fr) minmax(0, 0.58fr);
  }

  .storefront-homepage .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card + .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card:nth-child(3) {
    padding: 1.2rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--home-border-strong);
  }

  .storefront-homepage .storefront-benefit-card:first-child {
    padding-top: 0;
  }

  .storefront-homepage .storefront-benefit-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .storefront-homepage .storefront-faq-copy {
    position: static;
  }

}

@media (max-width: 420px) {
  .storefront-homepage .storefront-hero-actions {
    grid-template-columns: 1fr;
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card,
  .storefront-homepage .storefront-product-card.product-card-v2 {
    grid-template-columns: 1fr;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-media,
  .storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-right: 0;
    border-bottom: 1px solid var(--home-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-homepage .storefront-featured-card.product-showcase-card,
  .storefront-homepage .storefront-featured-card .product-showcase-card-image-wrap img,
  .storefront-homepage .storefront-catalog-button,
  .storefront-homepage .storefront-testimonial-card {
    transition: none;
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card:hover,
  .storefront-homepage .storefront-catalog-button:hover,
  .storefront-homepage .storefront-testimonial-card:hover {
    transform: none;
  }
}

/* =========================================================
   HOMEPAGE V3 — NAVIGATION, CONTROLS, AND PRODUCT INTERACTION
   ========================================================= */













































.storefront-homepage .storefront-primary-button,
.storefront-homepage .storefront-secondary-button,
.storefront-homepage .storefront-catalog-button,
.storefront-homepage .product-preview-v2-chat,
.storefront-homepage .product-preview-v2-checkout,
.storefront-homepage .product-preview-showcase-chat,
.storefront-homepage .product-preview-showcase-checkout {
  font-family: var(--home-sans);
  box-shadow: none;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}

.storefront-homepage .storefront-primary-button:hover,
.storefront-homepage .storefront-secondary-button:hover,
.storefront-homepage .storefront-catalog-button:hover,
.storefront-homepage .product-preview-v2-chat:hover,
.storefront-homepage .product-preview-v2-checkout:hover,
.storefront-homepage .product-preview-showcase-chat:hover,
.storefront-homepage .product-preview-showcase-checkout:hover {
  transform: translateY(-2px);
}

.storefront-homepage .storefront-primary-button:hover,
.storefront-homepage .product-preview-v2-checkout:hover,
.storefront-homepage .product-preview-showcase-checkout:hover {
  box-shadow: 0 9px 20px rgba(31, 64, 48, 0.13);
}

.storefront-homepage .storefront-secondary-button:hover,
.storefront-homepage .storefront-catalog-button:hover,
.storefront-homepage .product-preview-v2-chat:hover,
.storefront-homepage .product-preview-showcase-chat:hover {
  box-shadow: 0 8px 18px rgba(31, 64, 48, 0.08);
}

.storefront-homepage .storefront-primary-button:active,
.storefront-homepage .storefront-secondary-button:active,
.storefront-homepage .storefront-catalog-button:active,
.storefront-homepage .product-preview-v2-chat:active,
.storefront-homepage .product-preview-v2-checkout:active,
.storefront-homepage .product-preview-showcase-chat:active,
.storefront-homepage .product-preview-showcase-checkout:active {
  box-shadow: none;
  transform: translateY(0) scale(0.98);
}


.storefront-homepage .product-preview-v2-close {
  color: var(--home-text-soft);
  border: 1px solid var(--home-border-strong);
  background: var(--home-surface);
  box-shadow: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.storefront-homepage .product-preview-v2-close:hover {
  color: var(--home-primary);
  border-color: #a7baab;
  background: var(--home-surface-soft);
  box-shadow: none;
  transform: rotate(0deg) scale(1.04);
}

.storefront-homepage .storefront-mobile-whatsapp {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: var(--home-primary);
  box-shadow: 0 8px 20px rgba(31, 64, 48, 0.16);
  transition:
    background-color 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}

.storefront-homepage .storefront-mobile-whatsapp:hover {
  background: var(--home-primary-hover);
  box-shadow: 0 12px 24px rgba(31, 64, 48, 0.2);
  transform: translateY(-3px) scale(1.03);
}

.storefront-homepage .storefront-featured-card.product-showcase-card,
.storefront-homepage .storefront-product-card.product-card-v2 {
  will-change: transform;
  transition:
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms ease,
    box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 240ms ease;
}

.storefront-homepage .storefront-featured-card.product-showcase-card::before,
.storefront-homepage .storefront-featured-card.product-card-v2::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--home-primary), #9cb6a2 52%, transparent 100%);
  opacity: 0;
  transform: scaleX(0.22);
  transform-origin: left center;
  transition:
    opacity 220ms ease,
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.storefront-homepage .storefront-featured-card.product-showcase-card::after,
.storefront-homepage .storefront-featured-card.product-card-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 24%, rgba(255, 255, 255, 0.44) 47%, transparent 68%);
  opacity: 0;
  transform: translateX(-135%);
  transition:
    opacity 180ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-media,
.storefront-homepage .storefront-featured-card .product-showcase-card-body {
  position: relative;
  z-index: 1;
  transition:
    background-color 260ms ease,
    border-color 260ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-copy,
.storefront-homepage .storefront-featured-card .product-showcase-card-footer {
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-title,
.storefront-homepage .storefront-featured-card .product-showcase-card-price {
  transition:
    color 220ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy,
.storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
  overflow: hidden;
  border-radius: 0.68rem;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .storefront-homepage .storefront-featured-card.product-showcase-card:hover::before,
  .storefront-homepage .storefront-featured-card.product-card-v2:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card:hover::after,
  .storefront-homepage .storefront-featured-card.product-card-v2:hover::after {
    opacity: 0.72;
    transform: translateX(135%);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-copy {
    transform: translateY(-2px);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-footer {
    transform: translateY(-1px);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-title {
    color: var(--home-primary);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover {
    box-shadow: 0 7px 16px rgba(31, 64, 48, 0.1);
    transform: translateY(-2px);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover .product-showcase-card-detail-icon {
    transform: translateX(3px);
  }
}











html[data-theme='dark'] .storefront-homepage .storefront-featured-card.product-showcase-card:hover,
html[data-theme='dark'] .storefront-homepage .storefront-product-card.product-card-v2:hover {
  background: var(--home-surface);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.14);
}

html[data-theme='dark'] .storefront-homepage .storefront-featured-card.product-showcase-card::after,
html[data-theme='dark'] .storefront-homepage .storefront-featured-card.product-card-v2::after {
  background: linear-gradient(118deg, transparent 24%, rgba(205, 225, 211, 0.11) 47%, transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  .storefront-homepage .storefront-primary-button,
.storefront-homepage .storefront-secondary-button,
.storefront-homepage .storefront-catalog-button,
.storefront-homepage .product-preview-v2-chat,
.storefront-homepage .product-preview-v2-checkout,
.storefront-homepage .product-preview-v2-close,
.storefront-homepage .storefront-mobile-whatsapp,
.storefront-homepage .storefront-featured-card.product-showcase-card,
.storefront-homepage .storefront-featured-card.product-showcase-card::before,
.storefront-homepage .storefront-featured-card.product-showcase-card::after,
.storefront-homepage .storefront-featured-card .product-showcase-card-copy,
.storefront-homepage .storefront-featured-card .product-showcase-card-footer,
.storefront-homepage .storefront-featured-card .product-showcase-card-image-wrap img,
.storefront-homepage .storefront-featured-card .product-showcase-card-detail,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy{
    transition: none;
  }

  .storefront-homepage .storefront-primary-button:hover,
.storefront-homepage .storefront-secondary-button:hover,
.storefront-homepage .storefront-catalog-button:hover,
.storefront-homepage .product-preview-v2-chat:hover,
.storefront-homepage .product-preview-v2-checkout:hover,
.storefront-homepage .product-preview-v2-close:hover,
.storefront-homepage .storefront-mobile-whatsapp:hover,
.storefront-homepage .storefront-featured-card.product-showcase-card:hover,
.storefront-homepage .storefront-product-card.product-card-v2:hover,
.storefront-homepage .storefront-featured-card:hover .product-showcase-card-copy,
.storefront-homepage .storefront-featured-card:hover .product-showcase-card-footer,
.storefront-homepage .storefront-featured-card:hover .product-showcase-card-image-wrap img,
.storefront-homepage .storefront-featured-card:hover .product-showcase-card-media > img,
.storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover{
    transform: none;
  }
}

/* =========================================================
   PRODUCT SHOWCASE + CLEAN PRODUCT PREVIEW — V4
   ========================================================= */

.storefront-homepage .storefront-featured-card .product-showcase-card-badges {
  inset: 0.72rem auto auto 0.72rem;
  justify-content: flex-start;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment {
  min-height: 1.55rem;
  padding: 0.32rem 0.52rem;
  border-radius: 999px;
  box-shadow: 0 7px 16px rgba(32, 55, 42, 0.1);
  font-family: var(--home-sans);
  font-size: 0.53rem;
  letter-spacing: 0.035em;
  transition:
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 260ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-footer,
.storefront-homepage .storefront-featured-card .product-card-v2-footer.product-showcase-card-footer {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin-top: 0.62rem;
  padding-top: 0;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-actions,
.storefront-homepage .storefront-featured-card .product-card-v2-actions.product-showcase-card-actions {
  margin-top: auto;
  padding-top: 0.78rem;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-media,
.storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
  transition:
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms ease;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-body,
.storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
  transition:
    background-color 320ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .storefront-homepage .storefront-featured-card.product-showcase-card:hover,
  .storefront-homepage .storefront-product-card.product-card-v2:hover {
    border-color: #8fa999;
    background: #fff;
    box-shadow:
      0 32px 68px rgba(31, 64, 48, 0.18),
      0 10px 22px rgba(31, 64, 48, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: translateY(-11px) scale(1.02);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-media,
  .storefront-homepage .storefront-featured-card:hover .storefront-product-image.product-showcase-card-media {
    filter: saturate(1.035) contrast(1.025);
    transform: translateY(-2px) scale(1.012);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-image-wrap img,
  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-media > img {
    filter: saturate(1.045) contrast(1.025);
    transform: scale(1.095);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card:hover .product-card-v2-body.product-showcase-card-body {
    background: linear-gradient(180deg, #fff 0%, #fbfdfb 100%);
    transform: translateY(-2px);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-fulfillment {
    box-shadow: 0 10px 24px rgba(32, 55, 42, 0.15);
    transform: translateY(-2px);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-title {
    transform: translateY(-1px);
  }

  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-price {
    color: #235e43;
    transform: translateY(-2px) scale(1.025);
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card:hover::before,
  .storefront-homepage .storefront-featured-card.product-card-v2:hover::before {
    filter: drop-shadow(0 3px 7px rgba(47, 103, 79, 0.22));
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card:hover::after,
  .storefront-homepage .storefront-featured-card.product-card-v2:hover::after {
    opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment,
  .storefront-homepage .storefront-featured-card .product-showcase-card-media,
  .storefront-homepage .storefront-featured-card .product-showcase-card-body {
    transition: none;
  }
}

/* =========================================================
   HOMEPAGE DARK THEME V6
   Scoped exclusively to the homepage. The palette follows the
   clean light redesign instead of the legacy muted card system.
   ========================================================= */









html[data-theme='dark'] body.storefront-homepage .storefront-leaf {
  color: rgba(155, 200, 170, 0.08);
}

html[data-theme='dark'] body.storefront-homepage .storefront-character-image {
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.22));
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover {
  border-color: #acd5b8;
  background: #acd5b8;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment.is-instant {
  border-color: rgba(155, 200, 170, 0.28);
  color: #b8ddc2;
  background: rgba(83, 126, 96, 0.28);
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment.is-manual {
  border-color: rgba(211, 174, 111, 0.28);
  color: #e2c28b;
  background: rgba(129, 92, 42, 0.24);
}

@media (hover: hover) and (pointer: fine) {
}

html[data-theme='dark'] body.storefront-homepage .storefront-testimonial-card:hover {
  border-color: #496453;
}

html[data-theme='dark'] body.storefront-homepage .storefront-home-band-faq {
  border-top-color: var(--home-border);
  background: #111a15;
}






html[data-theme='dark'] body.storefront-homepage .storefront-mobile-whatsapp {
  border-color: rgba(188, 224, 198, 0.2);
  color: #0f1b14;
  background: #9bc8aa;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   HOMEPAGE DARK V7 — one cohesive surface system
   Remove unrelated green panels and hard section bands while
   preserving hierarchy through spacing, borders, and card surfaces.
   ========================================================= */
.storefront-homepage .storefront-featured-card .product-showcase-card-detail,
.storefront-homepage .storefront-featured-card .product-showcase-card-buy,
.storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail-label {
  position: static;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: none;
}

.storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
  position: static;
  flex: 0 0 auto;
  transform: none;
}

html[data-theme='dark'] body.storefront-homepage {
  --home-canvas: #0a1510;
  --home-surface: #111f18;
  --home-surface-soft: #0e1b14;
  --home-surface-muted: #15261c;
  --home-text: #eff6f1;
  --home-text-soft: #b6c4bb;
  --home-text-muted: #89998f;
  --home-primary: #a2cfaf;
  --home-primary-hover: #b7ddc1;
  --home-border: #223429;
  --home-border-strong: #30483a;

  color: var(--home-text);
  background:
    radial-gradient(circle at 78% 4rem, rgba(63, 105, 76, 0.12), transparent 28rem),
    var(--home-canvas);
}

html[data-theme='dark'] body.storefront-homepage .storefront-home-band-muted {
  border-block: 0;
}













html[data-theme='dark'] body.storefront-homepage .storefront-hero {
  border-bottom-color: transparent;
  background:
    radial-gradient(circle at 76% 38%, rgba(78, 126, 93, 0.18), transparent 26rem),
    linear-gradient(180deg, rgba(17, 32, 23, 0.72) 0%, rgba(10, 21, 16, 0) 100%);
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero-orb-one {
  background: rgba(96, 148, 111, 0.13);
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero-orb-two {
  background: rgba(114, 151, 125, 0.07);
}

html[data-theme='dark'] body.storefront-homepage .storefront-character-glow {
  background: radial-gradient(circle, rgba(88, 137, 103, 0.2), rgba(44, 78, 56, 0.07) 52%, transparent 74%);
}

html[data-theme='dark'] body.storefront-homepage .storefront-primary-button{
  border-color: var(--home-primary);
  color: #0c1711;
  background: var(--home-primary);
}

html[data-theme='dark'] body.storefront-homepage .storefront-primary-button:hover{
  border-color: var(--home-primary-hover);
  background: var(--home-primary-hover);
}

html[data-theme='dark'] body.storefront-homepage .storefront-secondary-button,
html[data-theme='dark'] body.storefront-homepage .storefront-catalog-button{
  border-color: var(--home-border-strong);
  color: var(--home-text);
  background: #122018;
}

html[data-theme='dark'] body.storefront-homepage .storefront-secondary-button:hover,
html[data-theme='dark'] body.storefront-homepage .storefront-catalog-button:hover{
  border-color: #466552;
  color: #d6eadc;
  background: #17271d;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-detail:hover {
  border-color: #4b6a56;
  color: #e0f0e5;
  background: #182a20;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
  border-color: #503b38;
  color: #d8aaa5;
  background: #231918;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefit-icon,
html[data-theme='dark'] body.storefront-homepage .storefront-testimonial-avatar {
  border-color: var(--home-border-strong);
  color: var(--home-primary);
  background: var(--home-surface);
}

html[data-theme='dark'] body.storefront-homepage .storefront-mobile-whatsapp {
  border-color: rgba(162, 207, 175, 0.18);
  color: #0c1711;
  background: var(--home-primary);
}

@media (hover: hover) and (pointer: fine) {
}

/* =========================================================
   HOMEPAGE DARK V8 — unified canvas, no legacy panel bands
   ========================================================= */
html[data-theme='dark'] body.storefront-homepage main,
html[data-theme='dark'] body.storefront-homepage .storefront-hero,
html[data-theme='dark'] body.storefront-homepage .storefront-hero > .relative > div,
html[data-theme='dark'] body.storefront-homepage .storefront-products,
html[data-theme='dark'] body.storefront-homepage .storefront-featured-products,
html[data-theme='dark'] body.storefront-homepage .storefront-benefits,
html[data-theme='dark'] body.storefront-homepage .storefront-testimonials,
html[data-theme='dark'] body.storefront-homepage .storefront-faq,
html[data-theme='dark'] body.storefront-homepage .storefront-home-band,
html[data-theme='dark'] body.storefront-homepage .storefront-home-band-muted,
html[data-theme='dark'] body.storefront-homepage .storefront-home-band-faq{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero {
  padding-inline: 0 !important;
  background:
    radial-gradient(circle at 76% 30%, rgba(73, 116, 86, 0.17), transparent 28rem),
    linear-gradient(180deg, rgba(16, 29, 22, 0.62) 0%, rgba(9, 19, 14, 0) 100%) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero > .relative > div {
  padding-inline: 0 !important;
  border: 0 !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefit-strip {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefit-card,
html[data-theme='dark'] body.storefront-homepage .storefront-benefit-card:hover {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right-color: var(--home-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefit-card:last-child {
  border-right: 0 !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefit-icon {
  border-color: var(--home-border-strong) !important;
  color: var(--home-primary) !important;
  background: var(--home-surface) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card.product-showcase-card,
html[data-theme='dark'] body.storefront-homepage .storefront-product-card.product-card-v2,
html[data-theme='dark'] body.storefront-homepage .storefront-testimonial-card {
  border-color: var(--home-border) !important;
  background: var(--home-surface) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-media,
html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
  border-bottom-color: var(--home-border) !important;
  background: #0b1610 !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-showcase-card-body,
html[data-theme='dark'] body.storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
  background: var(--home-surface) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-faq-list,
html[data-theme='dark'] body.storefront-homepage .storefront-faq-item,
html[data-theme='dark'] body.storefront-homepage .storefront-faq-item:hover,
html[data-theme='dark'] body.storefront-homepage .storefront-faq-item[open] {
  border-color: var(--home-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme='dark'] body.storefront-homepage .storefront-featured-card.product-showcase-card:hover,
  html[data-theme='dark'] body.storefront-homepage .storefront-product-card.product-card-v2:hover {
    border-color: #456550 !important;
    background: #13231a !important;
    box-shadow:
      0 26px 58px rgba(0, 0, 0, 0.32),
      0 7px 18px rgba(0, 0, 0, 0.14) !important;
  }

  html[data-theme='dark'] body.storefront-homepage .storefront-featured-card:hover .product-showcase-card-body,
  html[data-theme='dark'] body.storefront-homepage .storefront-featured-card:hover .product-card-v2-body.product-showcase-card-body {
    background: #13231a !important;
  }
}

/* =========================================================
   HOMEPAGE DARK V9 — hero eyebrow normalization
   The legacy global dark selector is more specific than the
   homepage base rule, so explicitly return this label to the
   clean editorial treatment used by the redesigned homepage.
   ========================================================= */
html[data-theme='dark'] body.storefront-homepage .storefront-hero .storefront-eyebrow {
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: var(--home-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

/* =========================================================
   HOMEPAGE MOBILE V11 — compact, touch-first, and symmetrical
   Homepage-only responsive pass. Shared catalog and checkout
   layouts remain untouched.
   ========================================================= */
@media (max-width: 767px) {
  body.storefront-homepage {
    --home-mobile-gutter: clamp(0.9rem, 4vw, 1.2rem);
    overflow-x: hidden;
  }

  /* Compact sticky header. */












  /* Hero stays one-column through the whole mobile range, including 640–767px. */
  .storefront-homepage .storefront-hero-inner {
    padding: 1.85rem var(--home-mobile-gutter) 2.6rem;
  }

  .storefront-homepage .storefront-hero > .storefront-hero-inner > div,
  .storefront-homepage .storefront-hero > .relative > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.55rem;
  }

  .storefront-homepage .storefront-hero-copy,
  .storefront-homepage .storefront-hero-visual {
    min-width: 0;
  }

  .storefront-homepage .storefront-hero-title {
    max-width: 10ch;
    margin-top: 0.75rem;
    font-size: clamp(2.55rem, 12.4vw, 3.5rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }

  .storefront-homepage .storefront-hero-description {
    max-width: 34rem;
    margin-top: 1rem;
    font-size: 0.84rem;
    line-height: 1.65;
  }

  .storefront-homepage .storefront-hero-actions {
    width: 100%;
    margin-top: 1.25rem !important;
    gap: 0.55rem !important;
  }

  .storefront-homepage .storefront-hero-actions > a,
  .storefront-homepage .storefront-hero-action-button {
    min-height: 2.9rem;
    padding: 0.68rem 0.85rem;
    border-radius: 0.72rem;
    font-size: 0.75rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .storefront-homepage .storefront-hero-visual {
    width: min(100%, 23rem);
    min-height: 0;
    margin-inline: auto;
  }

  .storefront-homepage .storefront-character-glow {
    inset: 14% 9% 7%;
    filter: blur(15px);
  }

  .storefront-homepage .storefront-character-image {
    width: min(100%, 22rem);
    max-width: 22rem;
  }

  /* Shared section rhythm. */
  .storefront-homepage .storefront-home-shell {
    padding: 3.15rem var(--home-mobile-gutter);
  }

  .storefront-homepage .storefront-home-section-header,
  .storefront-homepage .storefront-home-section-header-split,
  .storefront-homepage .storefront-home-section-header-compact {
    gap: 0.42rem;
    padding-bottom: 0.95rem;
  }

  .storefront-homepage .storefront-section-title,
  .storefront-homepage .storefront-home-section-header .storefront-section-title {
    max-width: 20ch;
    font-size: clamp(1.62rem, 7.4vw, 2.05rem);
    line-height: 1.08;
  }

  .storefront-homepage .storefront-home-section-content,
  .storefront-homepage .storefront-featured-products .storefront-featured-grid {
    margin-top: 1.15rem;
  }

  /* Four featured products become a stable 2×2 mobile grid. */
  .storefront-homepage .storefront-featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 0.7rem;
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card,
  .storefront-homepage .storefront-product-card.product-card-v2 {
    display: flex !important;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    border-radius: 0.9rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-media,
  .storefront-homepage .storefront-featured-card .storefront-product-image.product-showcase-card-media {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: 4 / 3;
    border-right: 0 !important;
    border-bottom: 1px solid var(--home-border);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-badges {
    inset: 0.5rem auto auto 0.5rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment {
    min-height: 1.3rem;
    padding: 0.27rem 0.4rem;
    box-shadow: 0 4px 10px rgba(32, 55, 42, 0.08);
    font-size: 0.44rem;
    letter-spacing: 0.025em;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-fulfillment svg {
    width: 0.65rem;
    height: 0.65rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.72rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-title,
  .storefront-homepage .storefront-featured-card .product-card-v2-title.product-showcase-card-title {
    display: -webkit-box;
    min-height: 2.5em;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-description,
  .storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description {
    display: -webkit-box;
    min-height: 1.4em;
    margin-top: 0.25rem;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.4;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-footer,
  .storefront-homepage .storefront-featured-card .product-card-v2-footer.product-showcase-card-footer {
    min-height: 0;
    margin-top: 0.52rem;
    padding-top: 0;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price-label {
    font-size: 0.46rem;
    letter-spacing: 0.065em;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy,
  .storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
    min-height: 2.25rem;
    padding: 0.46rem 0.36rem;
    border-radius: 0.62rem;
    font-size: 0.55rem;
    line-height: 1.15;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail {
    justify-content: center;
    gap: 0.22rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail-label {
    flex: 0 1 auto;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
  }

  .storefront-homepage .storefront-catalog-action {
    margin-top: 1.25rem;
  }

  .storefront-homepage .storefront-catalog-button {
    width: min(100%, 20rem);
    min-height: 2.85rem;
    padding-inline: 1rem;
    font-size: 0.72rem;
    touch-action: manipulation;
  }

  /* Benefits stay compact as a divider-only 2×2 matrix. */
  .storefront-homepage .storefront-benefit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .storefront-homepage .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card + .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card:nth-child(3) {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    min-width: 0;
    padding: 0.95rem 0.75rem !important;
    border: 0 !important;
  }

  .storefront-homepage .storefront-benefit-card:nth-child(odd) {
    border-right: 1px solid var(--home-border-strong) !important;
  }

  .storefront-homepage .storefront-benefit-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--home-border-strong) !important;
  }

  .storefront-homepage .storefront-benefit-icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 0.58rem;
  }

  .storefront-homepage .storefront-benefit-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .storefront-homepage .storefront-benefit-title {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  /* Testimonials use a native, touch-friendly snap rail instead of three tall rows. */
  .storefront-homepage .storefront-testimonial-layout {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 19rem);
    gap: 0.7rem;
    margin-right: calc(-1 * var(--home-mobile-gutter));
    margin-left: calc(-1 * var(--home-mobile-gutter));
    padding: 0 var(--home-mobile-gutter) 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--home-mobile-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .storefront-homepage .storefront-testimonial-layout::-webkit-scrollbar {
    display: none;
  }

  .storefront-homepage .storefront-testimonial-card {
    min-width: 0;
    padding: 1.1rem;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  .storefront-homepage .storefront-testimonial-quote {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    line-height: 1.58;
  }

  .storefront-homepage .storefront-testimonial-person {
    margin-top: 1rem;
  }

  /* FAQ remains vertical, but tighter and easier to scan on touch. */
  .storefront-homepage .storefront-faq-copy .storefront-section-title {
    max-width: 18ch;
  }

  .storefront-homepage .storefront-faq-cta .storefront-primary-button {
    width: 100%;
    min-height: 2.85rem;
  }

  .storefront-homepage .storefront-faq-item summary {
    min-height: 3.75rem;
    gap: 0.75rem;
    padding: 0.82rem 0;
  }

  .storefront-homepage .storefront-faq-question {
    font-size: 0.76rem;
    line-height: 1.45;
  }

  /* Compact footer and safe-area-aware floating action. */




  .storefront-homepage .storefront-mobile-whatsapp {
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    width: 3rem;
    height: 3rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile reveal is shorter and does not retain desktop stagger delays. */
  .storefront-homepage .reveal {
    transition-duration: 420ms;
  }

  .storefront-homepage .reveal[style] {
    transition-delay: 0ms !important;
  }

  .storefront-homepage .reveal[data-reveal-ready]:not(.is-visible) {
    transform: translateY(12px);
  }
}

@media (max-width: 520px) {
  .storefront-homepage .storefront-hero-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .storefront-homepage .storefront-hero-actions > a,
  .storefront-homepage .storefront-hero-action-button {
    width: 100%;
  }

  .storefront-homepage .storefront-character-image {
    width: min(100%, 20rem);
  }
}

@media (max-width: 359px) {






  .storefront-homepage .storefront-hero-title {
    font-size: 2.35rem;
  }

  .storefront-homepage .storefront-featured-grid {
    gap: 0.5rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy,
  .storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
    min-height: 2.1rem;
    padding-inline: 0.24rem;
    font-size: 0.5rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
    display: none;
  }

  .storefront-homepage .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card + .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card:nth-child(3) {
    padding-inline: 0.58rem !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .storefront-homepage .storefront-featured-card.product-showcase-card:hover,
  .storefront-homepage .storefront-product-card.product-card-v2:hover,
  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-media,
  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card:hover .product-showcase-card-image-wrap img,
  .storefront-homepage .storefront-primary-button:hover,
  .storefront-homepage .storefront-secondary-button:hover,
  .storefront-homepage .storefront-catalog-button:hover {
    box-shadow: none;
    transform: none;
  }

  .storefront-homepage .storefront-featured-card.product-showcase-card:active,
  .storefront-homepage .storefront-product-card.product-card-v2:active {
    border-color: var(--home-border-strong);
    box-shadow: 0 8px 20px rgba(31, 64, 48, 0.08);
    transform: scale(0.985);
  }

  .storefront-homepage .storefront-featured-card:active .product-showcase-card-image-wrap img {
    transform: scale(1.035);
  }

  .storefront-homepage .storefront-primary-button:active,
  .storefront-homepage .storefront-secondary-button:active,
  .storefront-homepage .storefront-catalog-button:active,
  .storefront-homepage .storefront-featured-card .product-showcase-card-detail:active,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy:active {
    box-shadow: none;
    transform: scale(0.975);
  }
}

/* =========================================================
   HOMEPAGE MOBILE V12 — FAQ flow, header utility, full labels
   ========================================================= */

.storefront-homepage .storefront-faq-layout {
  grid-template-areas:
    'copy list'
    'cta list';
  row-gap: 1.35rem;
}

.storefront-homepage .storefront-faq-copy {
  grid-area: copy;
}

.storefront-homepage .storefront-faq-list {
  grid-area: list;
}

.storefront-homepage .storefront-faq-cta {
  grid-area: cta;
  margin-top: 0;
  align-self: start;
}

.storefront-homepage .storefront-header-whatsapp {
  display: none;
}

@media (max-width: 767px) {


  .storefront-homepage .storefront-header-whatsapp {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--home-border-strong);
    border-radius: 999px;
    color: #fff;
    background: var(--home-primary);
    box-shadow: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      transform 180ms ease;
  }

  .storefront-homepage .storefront-header-whatsapp svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .storefront-homepage .storefront-header-whatsapp:active {
    transform: scale(0.94);
  }

  .storefront-homepage .storefront-mobile-whatsapp {
    display: none !important;
  }

  .storefront-homepage .storefront-faq-layout {
    grid-template-areas:
      'copy'
      'list'
      'cta';
    grid-template-columns: minmax(0, 1fr);
    gap: 1.45rem;
  }

  .storefront-homepage .storefront-faq-cta p {
    margin-bottom: 0.7rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-actions,
  .storefront-homepage .storefront-featured-card .product-card-v2-actions.product-showcase-card-actions {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail {
    gap: 0;
    overflow: visible;
    padding-inline: 0.3rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail-label {
    display: block;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail-icon {
    display: none;
  }
}

@media (max-width: 359px) {


  .storefront-homepage .storefront-header-whatsapp {
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy,
  .storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
    font-size: 0.49rem;
  }
}

@media (min-width: 640px) {
  .storefront-homepage .storefront-header-whatsapp {
    display: none;
  }
}

/* =========================================================
   HOMEPAGE FINAL MOBILE V13 — compact copy and aligned benefits
   ========================================================= */

.storefront-homepage .storefront-benefit-card > div:last-child {
  min-width: 0;
  text-align: left;
}

.storefront-homepage .storefront-benefit-title,
.storefront-homepage .storefront-benefit-description {
  text-align: left;
}

@media (max-width: 767px) {
  .storefront-homepage .storefront-featured-card .product-showcase-card-description,
  .storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description {
    margin-top: 0.08rem;
  }

  .storefront-homepage .storefront-faq-layout {
    gap: 1rem;
  }

  .storefront-homepage .storefront-faq-item summary {
    min-height: 3.15rem;
    padding: 0.66rem 0;
  }

  .storefront-homepage .storefront-faq-item[open] summary {
    padding-bottom: 0.42rem;
  }

  .storefront-homepage .storefront-faq-answer {
    padding: 0 1.4rem 0.82rem 0;
    font-size: 0.68rem;
    line-height: 1.52;
  }

  .storefront-homepage .storefront-faq-cta {
    margin-top: 0;
    padding-top: 0.1rem;
  }

  .storefront-homepage .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card + .storefront-benefit-card,
  .storefront-homepage .storefront-benefit-card:nth-child(3) {
    align-items: start;
    gap: 0.5rem;
    padding: 0.82rem 0.65rem !important;
  }

  .storefront-homepage .storefront-benefit-description {
    margin-top: 0.18rem;
    line-height: 1.42;
  }
}

/* =========================================================
   HOMEPAGE FINAL V14 — wider hero copy, stronger secondary text,
   and visible dark-theme section rhythm. Homepage only.
   ========================================================= */
@media (min-width: 768px) {
  .storefront-homepage .storefront-hero > .relative > div {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .storefront-homepage .storefront-hero-copy {
    max-width: 36rem;
  }
}

.storefront-homepage .storefront-featured-card .product-showcase-card-description,
.storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description,
.storefront-homepage .storefront-testimonial-role{
  color: var(--home-text-soft);
}

html[data-theme='dark'] body.storefront-homepage {
  --home-canvas: #08130e;
  --home-surface: #111f18;
  --home-surface-soft: #0d1b14;
  --home-surface-muted: #16271d;
  --home-text: #f0f6f2;
  --home-text-soft: #c7d3cb;
  --home-text-muted: #a6b5ac;
  --home-border: #294035;
  --home-border-strong: #3a5647;

  background:
    radial-gradient(circle at 78% 3rem, rgba(79, 128, 94, 0.16), transparent 30rem),
    linear-gradient(180deg, #0a1711 0%, var(--home-canvas) 38%, #09150f 100%) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero {
  border-bottom: 1px solid var(--home-border) !important;
  background:
    radial-gradient(circle at 76% 36%, rgba(88, 139, 104, 0.2), transparent 27rem),
    linear-gradient(180deg, rgba(18, 34, 25, 0.96) 0%, rgba(10, 22, 16, 0.78) 100%) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-products {
  border-top: 0 !important;
  border-bottom: 1px solid var(--home-border) !important;
  background: rgba(8, 19, 14, 0.42) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-benefits {
  border-block: 1px solid var(--home-border) !important;
  background: rgba(16, 31, 23, 0.72) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-testimonials {
  border-bottom: 1px solid var(--home-border) !important;
  background:
    linear-gradient(180deg, rgba(9, 21, 15, 0.2), rgba(14, 28, 20, 0.52)) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-faq {
  border-top: 1px solid var(--home-border) !important;
  border-bottom: 1px solid var(--home-border) !important;
  background: rgba(13, 27, 20, 0.82) !important;
}



html[data-theme='dark'] body.storefront-homepage .storefront-home-section-header,
html[data-theme='dark'] body.storefront-homepage .storefront-faq-list,
html[data-theme='dark'] body.storefront-homepage .storefront-faq-item,
html[data-theme='dark'] body.storefront-homepage .storefront-benefit-card {
  border-color: var(--home-border) !important;
}

@media (max-width: 767px) {
  .storefront-homepage .storefront-hero-description {
    color: var(--home-text-soft);
    font-size: 0.79rem;
    line-height: 1.62;
  }

  .storefront-homepage .storefront-benefit-description {
    color: var(--home-text-soft);
    font-size: 0.65rem;
  }

  .storefront-homepage .storefront-faq-answer {
    color: var(--home-text-soft);
    font-size: 0.74rem;
    line-height: 1.56;
  }
}

/* =========================================================
   HOMEPAGE MOBILE V15 — opaque sticky header, focused section
   headings, and a restrained premium hero eyebrow.
   ========================================================= */
@keyframes storefrontEyebrowSheen {
  0%, 72%, 100% {
    opacity: 0;
    transform: translateX(-145%);
  }

  8% {
    opacity: 0.62;
  }

  22% {
    opacity: 0;
    transform: translateX(145%);
  }
}

.storefront-homepage .storefront-eyebrow {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: 1.85rem;
  align-items: center;
  overflow: hidden;
  padding: 0.46rem 0.72rem;
  border: 1px solid var(--home-border-strong);
  border-radius: 999px;
  background: linear-gradient(120deg, var(--home-surface-soft), var(--home-surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  isolation: isolate;
}

.storefront-homepage .storefront-eyebrow::after {
  content: '';
  position: absolute;
  inset: -30% -22%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.7) 50%, transparent 62%);
  opacity: 0;
  transform: translateX(-145%);
  animation: storefrontEyebrowSheen 5.4s ease-in-out 1.1s infinite;
  pointer-events: none;
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero .storefront-eyebrow {
  min-height: 1.85rem;
  padding: 0.46rem 0.72rem !important;
  border: 1px solid var(--home-border-strong) !important;
  border-radius: 999px;
  color: var(--home-text) !important;
  background: linear-gradient(120deg, var(--home-surface-muted), var(--home-surface)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] body.storefront-homepage .storefront-hero .storefront-eyebrow::after {
  background: linear-gradient(105deg, transparent 38%, rgba(199, 211, 203, 0.16) 50%, transparent 62%);
}

@media (max-width: 767px) {
  body.storefront-homepage #home,
  body.storefront-homepage #produk,
  body.storefront-homepage #keunggulan,
  body.storefront-homepage #testimoni,
  body.storefront-homepage #faq {
    scroll-margin-top: 4.75rem;
  }

  /* A translucent sticky header made section headings readable through it. */




  .storefront-homepage .storefront-eyebrow {
    min-height: 1.7rem;
    padding: 0.4rem 0.62rem;
    font-size: 0.59rem;
    letter-spacing: 0.1em;
  }

  /* On mobile the headings stand on their own; supporting copy is intentionally removed. */
  .storefront-homepage .storefront-products .storefront-home-section-header,
  .storefront-homepage .storefront-benefits .storefront-home-section-header,
  .storefront-homepage .storefront-testimonials .storefront-home-section-header,
  .storefront-homepage .storefront-faq-copy {
    gap: 0.34rem;
    padding-bottom: 0.72rem;
  }

  .storefront-homepage .storefront-products .storefront-featured-grid,
  .storefront-homepage .storefront-benefits .storefront-home-section-content,
  .storefront-homepage .storefront-testimonials .storefront-home-section-content {
    margin-top: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront-homepage .storefront-eyebrow::after {
    animation: none;
  }
}

/* =========================================================
   HOMEPAGE MOBILE V16 — give product copy a stable vertical
   rhythm inside the compact 2×2 featured grid.
   ========================================================= */
@media (max-width: 767px) {
  .storefront-homepage .storefront-featured-card .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
    gap: 0;
    padding: 0.72rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-copy {
    display: grid;
    grid-template-rows: minmax(2.55em, auto) minmax(2.9em, auto);
    gap: 0.38rem;
    min-width: 0;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-title,
  .storefront-homepage .storefront-featured-card .product-card-v2-title.product-showcase-card-title {
    min-height: 2.55em;
    margin: 0;
    font-size: clamp(0.76rem, 3.2vw, 0.84rem);
    line-height: 1.275;
    letter-spacing: -0.014em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-footer,
  .storefront-homepage .storefront-featured-card .product-card-v2-footer.product-showcase-card-footer {
    margin-top: 0.58rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--home-border);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price-label {
    font-size: 0.47rem;
    line-height: 1.2;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price,
  .storefront-homepage .storefront-featured-card .product-card-v2-price.product-showcase-card-price {
    width: 100%;
    font-size: clamp(0.8rem, 3.45vw, 0.9rem);
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-actions,
  .storefront-homepage .storefront-featured-card .product-card-v2-actions.product-showcase-card-actions {
    gap: 0.4rem;
    margin-top: 0.58rem;
    padding-top: 0;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-detail,
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy,
  .storefront-homepage .storefront-featured-card .product-showcase-card-stock-out {
    min-height: 2.35rem;
    font-size: clamp(0.52rem, 2.15vw, 0.58rem);
  }
}

@media (max-width: 359px) {
  .storefront-homepage .storefront-featured-card .product-showcase-card-title,
  .storefront-homepage .storefront-featured-card .product-card-v2-title.product-showcase-card-title {
    font-size: 0.72rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price,
  .storefront-homepage .storefront-featured-card .product-card-v2-price.product-showcase-card-price {
    font-size: 0.78rem;
  }
}

/* =========================================================
   HOMEPAGE MOBILE V17 — tighter featured-card rhythm, restored
   mobile WhatsApp utility, and matching checkout hover.
   ========================================================= */
@media (max-width: 767px) {








  .storefront-homepage .storefront-header-whatsapp {
    position: relative;
    z-index: 2;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
    padding: 0.66rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-title,
  .storefront-homepage .storefront-featured-card .product-card-v2-title.product-showcase-card-title {
    min-height: 2.28em;
    font-size: clamp(0.75rem, 3.1vw, 0.82rem);
    line-height: 1.24;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-description,
  .storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description {
    display: -webkit-box;
    min-height: 1.36em;
    max-height: 1.36em;
    margin: 0;
    overflow: hidden;
    color: var(--home-text-soft);
    font-size: clamp(0.62rem, 2.45vw, 0.67rem);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: -0.008em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-footer,
  .storefront-homepage .storefront-featured-card .product-card-v2-footer.product-showcase-card-footer {
    margin-top: 0.4rem;
    padding-top: 0.42rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-price-panel {
    gap: 0.08rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-actions,
  .storefront-homepage .storefront-featured-card .product-card-v2-actions.product-showcase-card-actions {
    gap: 0.38rem;
    margin-top: 0.42rem;
  }
}

@media (max-width: 359px) {


  .storefront-homepage .storefront-featured-card .product-showcase-card-body,
  .storefront-homepage .storefront-featured-card .product-card-v2-body.product-showcase-card-body {
    padding: 0.56rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-copy {
    grid-template-rows: minmax(2.22em, auto) 1.34em;
    gap: 0.16rem;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-description,
  .storefront-homepage .storefront-featured-card .product-card-v2-description.product-showcase-card-description {
    min-height: 1.34em;
    max-height: 1.34em;
    font-size: 0.59rem;
    line-height: 1.34;
  }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .storefront-homepage .storefront-featured-card .product-showcase-card-buy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 240ms ease;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-buy::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.16) 48%, transparent 78%);
    transform: translateX(-115%);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover {
    border-color: var(--home-primary-hover);
    background: var(--home-primary-hover);
    box-shadow: 0 12px 25px rgba(36, 81, 63, 0.2);
    transform: translateY(-3px);
  }

  .storefront-homepage .storefront-featured-card .product-showcase-card-buy:hover::before {
    transform: translateX(115%);
  }
}