/* =============================================================
   Flotulip UI refresh v20261016a
   Loaded after main.css so these win.
   Product cards and the hero slider are intentionally untouched.
   ============================================================= */

:root {
  --ui-pink: hsl(var(--base-h) var(--base-s) var(--base-l));
  --ui-dark: hsl(var(--base-two-h) var(--base-two-s) var(--base-two-l));
  --ui-grad: linear-gradient(135deg, var(--ui-pink) 0%, var(--ui-dark) 100%);
  --ui-radius: 20px;
  --ui-shadow-sm: 0 6px 18px hsl(var(--black) / 0.07);
  --ui-shadow-md: 0 18px 40px hsl(var(--black) / 0.12);
}

body {
  letter-spacing: 0.01em;
}

/* ============================================================
   "View All" buttons — white text on the existing gradient
   (button colour stays exactly as the theme defines it)
   ============================================================ */
.btn.view__btn,
.view__btn {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn.view__btn i,
.view__btn i {
  color: #fff !important;
}
.btn.view__btn:hover,
.view__btn:hover {
  color: #fff !important;
  transform: translateY(-3px);
  filter: brightness(1.06);
}

/* ============================================================
   Section headings — clearly restyled
   ============================================================ */
.section-heading .section-heading__subtitle {
  display: inline-flex !important;
  align-items: center;
  background: var(--ui-grad) !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800 !important;
  font-size: 12px;
  padding: 8px 20px;
  border-radius: 50px;
  box-shadow: 0 12px 24px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.30);
}
.section-heading .section-heading__subtitle::before,
.section-heading .section-heading__subtitle::after {
  display: none !important;
}

.section-heading .section-heading__title {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.12;
  color: hsl(var(--dark));
  margin-bottom: 16px !important;
  padding-bottom: 16px;
}
.section-heading .section-heading__title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--ui-grad);
}

.section-heading__desc {
  max-width: 620px;
  margin: 12px auto 0;
  font-size: 15px;
  opacity: 0.75;
}

/* ============================================================
   "New Arrived" section — distinct fresh band
   ============================================================ */
main > section:nth-of-type(6) {
  background: linear-gradient(180deg,
      hsl(var(--base-h) var(--base-s) var(--base-l) / 0.08) 0%,
      hsl(var(--base-two-h) var(--base-two-s) var(--base-two-l) / 0.06) 100%);
  border-radius: 34px;
  margin: 24px 14px;
  padding: 56px 0;
}

/* ============================================================
   Category / occasion / pick tiles (not product cards)
   ============================================================ */
.occasion__item,
.flower-collection-card {
  border-radius: var(--ui-radius) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.occasion__item:hover,
.flower-collection-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-shadow-md);
}

/* ============================================================
   Footer polish
   ============================================================ */
.footer__area {
  border-top: 3px solid hsl(var(--base-h) var(--base-s) var(--base-l) / 0.18);
}
.footer__area .footer__bottom {
  font-weight: 600;
}

/* ============================================================
   Cart / checkout / dashboard polish
   ============================================================ */
.checkout__card,
.common__card,
.dashboard__card {
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-sm);
}