/* ==========================================================================
   StaveBank Florist - Homepage Styles (WordPress Page Template)
   Scoped under .sb-homepage to avoid conflicts with Elementor
   Fonts loaded via wp_enqueue_style in template-homepage-fall.php
   ========================================================================== */

/* CSS Variables */
:root {
  --sb-color-primary: #d9e167;
  --sb-color-primary-dark: #c5cd4d;
  --sb-color-primary-light: #e8ed9c;
  --sb-color-black: #1a1a1a;
  --sb-color-dark: #2d2d2d;
  --sb-color-gray: #666666;
  --sb-color-gray-light: #999999;
  --sb-color-gray-lighter: #e5e5e5;
  --sb-color-off-white: #f8f8f6;
  --sb-color-white: #ffffff;
  --sb-color-dark-gray-bg: #4a4a4a;

  --sb-font-heading: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --sb-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --sb-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sb-shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --sb-shadow-lg: 0 8px 40px rgba(0,0,0,0.16);

  --sb-transition-fast: 0.2s ease;
  --sb-transition-base: 0.3s ease;
  --sb-transition-slow: 0.5s ease;

  --sb-header-height: 150px;

  --sb-container-max: 1280px;
  --sb-container-padding: 24px;
}

/* ==========================================================================
   Scoped Base Styles
   ========================================================================== */

.sb-homepage {
  font-family: var(--sb-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sb-color-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sb-homepage *,
.sb-homepage *::before,
.sb-homepage *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sb-homepage img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sb-homepage a {
  text-decoration: none;
  color: inherit;
  transition: color var(--sb-transition-fast);
}

.sb-homepage ul {
  list-style: none;
}

.sb-homepage h1,
.sb-homepage h2,
.sb-homepage h3,
.sb-homepage h4,
.sb-homepage h5,
.sb-homepage h6 {
  font-family: var(--sb-font-heading);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sb-color-black);
  letter-spacing: 0.03em;
}

/* Container */
.sb-homepage .container {
  max-width: var(--sb-container-max);
  margin: 0 auto;
  padding: 0 var(--sb-container-padding);
}

/* ==========================================================================
   Typography
   ========================================================================== */

.sb-homepage .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.sb-homepage .section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sb-color-primary-dark);
  margin-bottom: 12px;
}

.sb-homepage .section-title {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 16px;
}

.sb-homepage .section-subtitle {
  font-size: 16px;
  color: var(--sb-color-gray);
  max-width: 500px;
  margin: 0 auto;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.sb-homepage .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sb-font-body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 32px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all var(--sb-transition-base);
}

.sb-homepage .btn-primary {
  background-color: var(--sb-color-primary);
  color: var(--sb-color-black);
  border-color: var(--sb-color-primary);
}

.sb-homepage .btn-primary:hover {
  background-color: var(--sb-color-primary-dark);
  border-color: var(--sb-color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

.sb-homepage .btn-outline {
  background-color: transparent;
  color: var(--sb-color-black);
  border-color: var(--sb-color-black);
}

.sb-homepage .btn-outline:hover {
  background-color: var(--sb-color-black);
  color: var(--sb-color-white);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.sb-homepage .hero {
  position: relative;
  height: 100vh !important;
  min-height: 600px;
  overflow: hidden;
}

.sb-homepage .hero-slider {
  height: 100%;
}

.sb-homepage .hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

.sb-homepage .hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.sb-homepage .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 100%);
}

.sb-homepage .hero-content {
  position: absolute;
  top: calc(50% + var(--sb-header-height) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--sb-color-white);
  z-index: 2;
  max-width: 700px;
  padding: 0 24px;
}

.sb-homepage .hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sb-color-primary);
  margin-bottom: 20px;
  padding: 8px 20px;
  border: 1px solid var(--sb-color-primary);
}

.sb-homepage .hero-title {
  font-family: var(--sb-font-heading);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--sb-color-white);
  margin-bottom: 20px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}

.sb-homepage .hero-text {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 32px;
  opacity: 0.9;
}

/* Breaks out of .hero-content's 700px cap so all three CTAs sit on one line,
   then wraps naturally once they no longer fit the viewport. */
.sb-homepage .hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: max-content;
  max-width: min(920px, 92vw);
  margin-left: 50%;
  transform: translateX(-50%);
}

.sb-homepage .btn-white {
  border-color: var(--sb-color-white);
  color: var(--sb-color-white);
}

.sb-homepage .btn-white:hover {
  background-color: var(--sb-color-white);
  color: var(--sb-color-black);
}

.sb-homepage .hero-nav {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.sb-homepage .hero-nav-btn {
  width: 12px;
  height: 12px;
  border: 2px solid var(--sb-color-white);
  background: transparent;
  cursor: pointer;
  transition: all var(--sb-transition-base);
  opacity: 0.6;
}

.sb-homepage .hero-nav-btn:hover,
.sb-homepage .hero-nav-btn.active {
  background-color: var(--sb-color-primary);
  border-color: var(--sb-color-primary);
  opacity: 1;
}

.sb-homepage .hero-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 10;
  pointer-events: none;
}

.sb-homepage .hero-arrow {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--sb-color-white);
  cursor: pointer;
  transition: all var(--sb-transition-base);
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

.sb-homepage .hero-arrow:hover {
  background-color: var(--sb-color-primary);
  border-color: var(--sb-color-primary);
  color: var(--sb-color-black);
}

/* ==========================================================================
   Categories Section
   ========================================================================== */

.sb-homepage .categories {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

.sb-homepage .category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
}

.sb-homepage .category-card-wide {
  grid-column: span 2;
}

.sb-homepage .category-card {
  position: relative;
  overflow: hidden;
  display: block;
}

.sb-homepage .category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sb-transition-slow);
}

.sb-homepage .category-card:hover img {
  transform: scale(1.08);
}

.sb-homepage .category-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%);
  transition: background var(--sb-transition-base);
}

.sb-homepage .category-card:hover .category-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
}

.sb-homepage .category-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  color: var(--sb-color-white);
  z-index: 2;
}

.sb-homepage .category-card-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sb-color-primary);
  margin-bottom: 8px;
}

.sb-homepage .category-card-title {
  font-family: var(--sb-font-heading);
  font-size: 28px;
  color: var(--sb-color-white);
  margin-bottom: 8px;
}

.sb-homepage .category-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-color-white);
  transition: all var(--sb-transition-base);
}

.sb-homepage .category-card-link svg {
  transition: transform var(--sb-transition-base);
}

.sb-homepage .category-card:hover .category-card-link {
  color: var(--sb-color-primary);
}

.sb-homepage .category-card:hover .category-card-link svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Delivery Banner
   ========================================================================== */

.sb-homepage .delivery-banner {
  padding: 80px 0;
  background-color: var(--sb-color-off-white);
  text-align: center;
}

.sb-homepage .delivery-banner h1,
.sb-homepage .delivery-banner h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  margin-bottom: 20px;
}

.sb-homepage .delivery-banner p {
  font-size: 16px;
  color: var(--sb-color-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ==========================================================================
   Product Cards (Simplified)
   ========================================================================== */

.sb-homepage .best-sellers {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

.sb-homepage .products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.sb-homepage a.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sb-homepage .product-card {
  background-color: var(--sb-color-white);
  transition: all var(--sb-transition-base);
}

.sb-homepage .product-card:hover {
  box-shadow: var(--sb-shadow-lg);
}

.sb-homepage .product-image {
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}

.sb-homepage .product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sb-transition-slow);
}

.sb-homepage .product-card:hover .product-image img {
  transform: scale(1.05);
}

.sb-homepage .product-info {
  text-align: center;
  padding: 16px 20px;
}

.sb-homepage .product-name {
  font-family: var(--sb-font-heading);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}

.sb-homepage .product-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--sb-color-gray);
}

.sb-homepage .section-cta {
  text-align: center;
  margin-top: 50px;
}

/* ==========================================================================
   What Makes Stavebank Special (Split Content)
   ========================================================================== */

.sb-homepage .what-makes-special {
  padding: 100px 0;
  background-color: var(--sb-color-off-white);
}

.sb-homepage .split-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.sb-homepage .split-content-reverse {
  direction: rtl;
}

.sb-homepage .split-content-reverse > * {
  direction: ltr;
}

.sb-homepage .split-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sb-homepage .split-text .section-tag {
  display: inline-block;
  margin-bottom: 12px;
}

.sb-homepage .split-text h2 {
  font-size: clamp(26px, 3.5vw, 38px);
  margin-bottom: 20px;
}

.sb-homepage .split-text p {
  font-size: 16px;
  color: var(--sb-color-gray);
  line-height: 1.8;
  margin-bottom: 20px;
}

.sb-homepage .split-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.sb-homepage .split-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--sb-color-dark);
}

.sb-homepage .split-list li svg {
  flex-shrink: 0;
  color: var(--sb-color-primary-dark);
}

/* ==========================================================================
   Birthday Flowers Section
   ========================================================================== */

.sb-homepage .birthday-flowers {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

/* ==========================================================================
   Why Choose Banner (Dark Gray Bar)
   ========================================================================== */

.sb-homepage .why-choose-banner {
  padding: 60px 0;
  background-color: var(--sb-color-dark-gray-bg);
}

.sb-homepage .why-choose-banner .section-header {
  margin-bottom: 40px;
}

.sb-homepage .why-choose-banner .section-title {
  color: var(--sb-color-white);
}

.sb-homepage .why-choose-banner .section-tag {
  color: var(--sb-color-primary);
}

.sb-homepage .why-choose-banner-items {
  display: flex;
  justify-content: center;
  gap: 60px;
}

.sb-homepage .why-choose-banner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 260px;
}

.sb-homepage .why-choose-banner-item svg {
  margin-bottom: 16px;
  color: var(--sb-color-primary);
}

.sb-homepage .why-choose-banner-item h3 {
  font-family: var(--sb-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--sb-color-white);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.sb-homepage .why-choose-banner .why-choose-banner-item p {
  font-size: 14px;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.6;
}

/* ==========================================================================
   Designed With Care (Split Content)
   ========================================================================== */

.sb-homepage .designed-by-mona {
  padding: 100px 0;
  background-color: var(--sb-color-off-white);
}

/* ==========================================================================
   Testimonials / Reviews Section (Elfsight widget)
   ========================================================================== */

.sb-homepage .testimonials {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

/* ==========================================================================
   Blog Posts Section
   ========================================================================== */

.sb-homepage .blog-posts {
  padding: 100px 0;
  background-color: var(--sb-color-off-white);
}

.sb-homepage .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.sb-homepage a.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sb-homepage .blog-card {
  background-color: var(--sb-color-white);
  transition: all var(--sb-transition-base);
  overflow: hidden;
}

.sb-homepage .blog-card:hover {
  box-shadow: var(--sb-shadow-lg);
}

.sb-homepage .blog-card-image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.sb-homepage .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sb-transition-slow);
}

.sb-homepage .blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.sb-homepage .blog-card-content {
  padding: 24px;
}

.sb-homepage .blog-card-date {
  font-size: 13px;
  color: var(--sb-color-gray-light);
  margin-bottom: 10px;
}

.sb-homepage .blog-card-title {
  font-family: var(--sb-font-heading);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 14px;
  line-height: 1.4;
}

.sb-homepage .blog-card-link {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-color-primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--sb-transition-base);
}

.sb-homepage .blog-card:hover .blog-card-link {
  gap: 10px;
}

/* ==========================================================================
   Sympathy & Funeral Flowers
   ========================================================================== */

.sb-homepage .sympathy-flowers {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.sb-homepage .faq-section {
  padding: 100px 0;
  background-color: var(--sb-color-off-white);
}

.sb-homepage .faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.sb-homepage .faq-item {
  border: 1px solid var(--sb-color-gray-lighter);
  margin-bottom: -1px;
}

.sb-homepage .faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sb-font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--sb-color-black);
  text-align: left;
  letter-spacing: 0.02em;
  transition: background-color var(--sb-transition-fast);
}

.sb-homepage .faq-question:hover {
  background-color: var(--sb-color-off-white);
}

.sb-homepage .faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 16px;
}

.sb-homepage .faq-icon::before,
.sb-homepage .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--sb-color-black);
  transition: transform var(--sb-transition-base);
}

.sb-homepage .faq-icon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.sb-homepage .faq-icon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.sb-homepage .faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sb-homepage .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.sb-homepage .faq-answer p {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--sb-color-gray);
  line-height: 1.7;
}

/* ==========================================================================
   SEO Text Block
   ========================================================================== */

.sb-homepage .seo-text {
  padding: 100px 0;
  background-color: var(--sb-color-white);
}

.sb-homepage .seo-text .section-header {
  margin-bottom: 40px;
}

.sb-homepage .seo-text-body {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.sb-homepage .seo-text-content p {
  font-size: 15px;
  color: var(--sb-color-gray);
  line-height: 1.8;
  margin-bottom: 16px;
}

.sb-homepage .seo-text-expanded {
  display: none;
}

.sb-homepage .seo-text-body.expanded .seo-text-expanded {
  display: block;
}

.sb-homepage .seo-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sb-font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-color-primary-dark);
  cursor: pointer;
  transition: color var(--sb-transition-fast);
}

.sb-homepage .seo-read-more-btn:hover {
  color: var(--sb-color-black);
}

/* ==========================================================================
   Animations
   ========================================================================== */

.sb-homepage .animate-ready {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sb-homepage .animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for grid items */
.sb-homepage .category-grid .animate-ready:nth-child(1) { transition-delay: 0s; }
.sb-homepage .category-grid .animate-ready:nth-child(2) { transition-delay: 0.1s; }
.sb-homepage .category-grid .animate-ready:nth-child(3) { transition-delay: 0.2s; }
.sb-homepage .category-grid .animate-ready:nth-child(4) { transition-delay: 0.3s; }
.sb-homepage .category-grid .animate-ready:nth-child(5) { transition-delay: 0s; }
.sb-homepage .category-grid .animate-ready:nth-child(6) { transition-delay: 0.1s; }

.sb-homepage .products-grid .animate-ready:nth-child(1) { transition-delay: 0s; }
.sb-homepage .products-grid .animate-ready:nth-child(2) { transition-delay: 0.1s; }
.sb-homepage .products-grid .animate-ready:nth-child(3) { transition-delay: 0.2s; }
.sb-homepage .products-grid .animate-ready:nth-child(4) { transition-delay: 0.3s; }

.sb-homepage .blog-grid .animate-ready:nth-child(1) { transition-delay: 0s; }
.sb-homepage .blog-grid .animate-ready:nth-child(2) { transition-delay: 0.1s; }
.sb-homepage .blog-grid .animate-ready:nth-child(3) { transition-delay: 0.2s; }

.sb-homepage .why-choose-banner-items .animate-ready:nth-child(1) { transition-delay: 0s; }
.sb-homepage .why-choose-banner-items .animate-ready:nth-child(2) { transition-delay: 0.1s; }
.sb-homepage .why-choose-banner-items .animate-ready:nth-child(3) { transition-delay: 0.2s; }
.sb-homepage .why-choose-banner-items .animate-ready:nth-child(4) { transition-delay: 0.3s; }

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1024px) {
  .sb-homepage .category-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .sb-homepage .category-card {
    min-height: 280px;
  }

  .sb-homepage .category-card-wide {
    grid-column: span 1;
  }

  .sb-homepage .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb-homepage .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb-homepage .split-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sb-homepage .split-content-reverse {
    direction: ltr;
  }

  .sb-homepage .why-choose-banner-items {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --sb-container-padding: 20px;
    --sb-header-height: 120px;
  }

  .sb-homepage .hero {
    height: 100vh;
    height: 100svh;
    min-height: 400px;
  }

  .sb-homepage .hero-content {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    top: calc(50% + var(--sb-header-height) / 2);
  }

  .sb-homepage .hero-text {
    margin-bottom: 24px;
  }

  .sb-homepage .hero-ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
  }

  .sb-homepage .hero-ctas .btn {
    width: 100%;
  }

  .sb-homepage .hero-nav {
    bottom: 20px;
  }

  .sb-homepage .hero-title {
    font-size: 36px;
  }

  .sb-homepage .hero-arrows {
    display: none;
  }

  .sb-homepage .category-grid {
    grid-template-columns: 1fr;
  }

  .sb-homepage .category-card {
    min-height: 300px;
  }

  .sb-homepage .products-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .sb-homepage .blog-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  .sb-homepage .why-choose-banner-items {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .sb-homepage .faq-question {
    font-size: 15px;
    padding: 18px 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --sb-header-height: 100px;
  }

  .sb-homepage .hero {
    height: 100vh;
    height: 100svh;
    min-height: 320px;
  }

  .sb-homepage .hero-content {
    top: calc(50% + var(--sb-header-height) / 2);
    padding: 0 16px;
  }

  .sb-homepage .hero-tag {
    font-size: 11px;
    padding: 6px 14px;
    margin-bottom: 14px;
  }

  .sb-homepage .hero-title {
    font-size: 28px;
    margin-bottom: 12px;
  }

  .sb-homepage .hero-text {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .sb-homepage .hero-nav {
    bottom: 16px;
  }

  .sb-homepage .btn {
    padding: 12px 24px;
    font-size: 13px;
  }

  .sb-homepage .hero-ctas {
    gap: 10px;
  }

  .sb-homepage .section-header {
    margin-bottom: 40px;
  }

  .sb-homepage .categories,
  .sb-homepage .best-sellers,
  .sb-homepage .birthday-flowers,
  .sb-homepage .testimonials,
  .sb-homepage .blog-posts,
  .sb-homepage .sympathy-flowers,
  .sb-homepage .seo-text {
    padding: 60px 0;
  }

  .sb-homepage .what-makes-special,
  .sb-homepage .designed-by-mona {
    padding: 60px 0;
  }

  .sb-homepage .delivery-banner {
    padding: 50px 0;
  }

  .sb-homepage .why-choose-banner {
    padding: 40px 0;
  }

  .sb-homepage .faq-section {
    padding: 60px 0;
  }
}

/* ==========================================================================
   AUTUMN SEASONAL LAYER
   Scoped to the hero and the two new seasonal sections only. The rest of the
   homepage keeps the standard Stavebank palette, so the brand identity,
   navigation and footer are untouched.
   Gold is used as the bridge tone — it sits next to the brand lime (#d9e167)
   so the handoff from the seasonal sections into the existing ones reads as
   deliberate rather than as two different sites.
   ========================================================================== */

:root {
  /* Deep olive is the brand lime (#d9e167, hue 66) darkened to the same hue as
     the foliage in the autumn photography, so the seasonal sections read as the
     same brand rather than a different one. */
  --sb-autumn-olive: #4e5519;
  --sb-autumn-olive-dark: #3a3f12;
  /* Burnt orange is the dominant tone of the hero photograph and runs analogous
     to the lime through the yellows. */
  --sb-autumn-orange: #b35309;
  --sb-autumn-orange-dark: #8f4207;
  --sb-autumn-gold: #c9962c;
  --sb-autumn-gold-dark: #ac7d1d;
  --sb-autumn-cream: #faf5ec;
  --sb-autumn-cream-dark: #f1e7d5;
  --sb-autumn-ink: #3b2318;
}

/* Autumn buttons ---------------------------------------------------------- */

/* Gold — for use on dark photography, where the olive and orange sink in. */
.sb-homepage .btn-autumn {
  background-color: var(--sb-autumn-gold);
  color: var(--sb-autumn-ink);
  border-color: var(--sb-autumn-gold);
}

.sb-homepage .btn-autumn:hover {
  background-color: var(--sb-autumn-gold-dark);
  border-color: var(--sb-autumn-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

/* Burgundy — for use on the cream panels, where gold would wash out. */
.sb-homepage .btn-autumn-deep {
  background-color: var(--sb-autumn-orange);
  color: var(--sb-color-white);
  border-color: var(--sb-autumn-orange);
}

.sb-homepage .btn-autumn-deep:hover {
  background-color: var(--sb-autumn-orange-dark);
  border-color: var(--sb-autumn-orange-dark);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

.sb-homepage .btn-outline-autumn {
  background-color: transparent;
  color: var(--sb-autumn-olive);
  border-color: var(--sb-autumn-olive);
}

.sb-homepage .btn-outline-autumn:hover {
  background-color: var(--sb-autumn-olive);
  color: var(--sb-color-white);
}

/* Autumn hero ------------------------------------------------------------- */

/* Warm-tinted overlay replaces the neutral black one so the photography reads
   amber rather than grey. */
.sb-homepage .hero-autumn .hero-overlay {
  background: linear-gradient(135deg,
    rgba(58, 20, 20, 0.64) 0%,
    rgba(96, 42, 16, 0.38) 55%,
    rgba(22, 12, 8, 0.52) 100%);
}

.sb-homepage .hero-autumn .hero-tag {
  color: var(--sb-autumn-gold);
  border-color: var(--sb-autumn-gold);
}

/* Trust strip ------------------------------------------------------------- */

.sb-homepage .trust-strip {
  background-color: var(--sb-autumn-cream);
  border-bottom: 1px solid var(--sb-autumn-cream-dark);
  padding: 22px 0;
}

.sb-homepage .trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sb-homepage .trust-strip-item,
.sb-homepage .trust-strip-review {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* The three reassurance items size to their text so each label stays on one
   line; the two review quotes absorb the remaining width. */
.sb-homepage .trust-strip-item {
  flex: 0 1 auto;
}

.sb-homepage .trust-strip-review {
  flex: 1 1 180px;
}

.sb-homepage .trust-strip-item + .trust-strip-item,
.sb-homepage .trust-strip-review {
  border-left: 1px solid var(--sb-autumn-cream-dark);
  padding-left: 24px;
}

.sb-homepage .trust-strip-item svg {
  flex-shrink: 0;
  color: var(--sb-autumn-olive);
}

.sb-homepage .trust-strip-item span {
  font-family: var(--sb-font-heading);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--sb-autumn-ink);
  line-height: 1.35;
}

.sb-homepage .trust-strip-review {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sb-homepage .trust-stars {
  color: var(--sb-autumn-gold);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.sb-homepage .trust-strip-review p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sb-color-gray);
  font-style: italic;
}

.sb-homepage .trust-strip-review cite {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--sb-color-gray-light);
}

/* Florist's Autumn Picks -------------------------------------------------- */

.sb-homepage .autumn-picks {
  padding: 90px 0;
  background-color: var(--sb-autumn-cream);
}

.sb-homepage .autumn-picks .section-tag {
  color: var(--sb-autumn-orange);
}

.sb-homepage .autumn-picks .section-title {
  color: var(--sb-autumn-olive);
}

.sb-homepage .autumn-picks .section-subtitle {
  max-width: 560px;
}

.sb-homepage .autumn-picks .product-card {
  background-color: var(--sb-color-white);
  border: 1px solid var(--sb-autumn-cream-dark);
}

.sb-homepage .autumn-picks .product-price {
  color: var(--sb-autumn-olive);
  font-weight: 600;
}

/* Autumn Colour Story ----------------------------------------------------- */

.sb-homepage .colour-story {
  background-color: var(--sb-autumn-cream-dark);
}

.sb-homepage .colour-story-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 520px;
}

/* Shares a single grid cell with the photograph, exactly as the hero does, so
   the image spans the full section width and feathers out beneath the copy
   instead of meeting it at a hard seam. */
.sb-homepage .colour-story-text {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: transparent;
  padding: 80px 60px;
}

/* Caps the measure and lines the text up with the site container on wide
   screens, so the panel does not read as a full-bleed block of copy. */
.sb-homepage .colour-story-text-inner {
  max-width: 520px;
}

.sb-homepage .colour-story .section-tag {
  color: var(--sb-autumn-orange);
}

.sb-homepage .colour-story h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--sb-autumn-olive);
  margin-bottom: 20px;
}

.sb-homepage .colour-story p {
  font-size: 16px;
  color: var(--sb-color-gray);
  margin-bottom: 32px;
  line-height: 1.75;
}

.sb-homepage .colour-story-image {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 520px;
}

/* Same left-edge feather as the hero, but ramping to the section's deeper cream
   (#f1e7d5) so this band still separates itself from the Autumn Picks block
   above. Zero-alpha cream rather than the "transparent" keyword, which resolves
   to transparent black and would grey the ramp. */
.sb-homepage .colour-story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right,
    rgba(241, 231, 213, 0.93) 0%,
    rgba(241, 231, 213, 0.93) 25%,
    rgba(241, 231, 213, 0.88) 33%,
    rgba(241, 231, 213, 0.5) 41%,
    rgba(241, 231, 213, 0.12) 49%,
    rgba(241, 231, 213, 0) 56%);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .sb-homepage .trust-strip-inner {
    flex-wrap: wrap;
    gap: 20px 24px;
  }

  /* Three reassurance items share the top row, the two reviews drop beneath. */
  .sb-homepage .trust-strip-item {
    flex: 1 1 28%;
  }

  .sb-homepage .trust-strip-review {
    flex: 1 1 44%;
  }

  .sb-homepage .trust-strip-item + .trust-strip-item,
  .sb-homepage .trust-strip-review {
    padding-left: 24px;
  }

  .sb-homepage .colour-story-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked: each takes its own row, since order is inert once grid-row and
     grid-column are set explicitly on the desktop rules above. */
  .sb-homepage .colour-story-text {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    padding: 60px 40px;
  }

  .sb-homepage .colour-story-image {
    grid-column: 1;
    grid-row: 1;
    min-height: 340px;
  }

  /* The feather turns bottom-to-top once stacked, softening the photograph into
     the copy below it rather than across it. */
  .sb-homepage .colour-story-image::after {
    background: linear-gradient(to bottom,
      rgba(241, 231, 213, 0) 60%,
      rgba(241, 231, 213, 0.65) 85%,
      rgb(241, 231, 213) 100%);
  }
}

@media (max-width: 768px) {
  .sb-homepage .trust-strip {
    padding: 18px 0;
  }

  .sb-homepage .trust-strip-inner {
    gap: 16px;
  }

  .sb-homepage .trust-strip-item {
    flex: 1 1 100%;
    justify-content: center;
    text-align: left;
  }

  /* Dividers become horizontal rules once the strip is stacked. */
  .sb-homepage .trust-strip-item + .trust-strip-item,
  .sb-homepage .trust-strip-review {
    border-left: 0;
    border-top: 1px solid var(--sb-autumn-cream-dark);
    padding-left: 0;
    padding-top: 16px;
  }

  /* Inset the quotes from the container edge so they do not run edge-to-edge
     against the reassurance items above them. */
  .sb-homepage .trust-strip-review {
    flex: 1 1 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .sb-homepage .autumn-picks {
    padding: 60px 0;
  }

  .sb-homepage .colour-story-text {
    padding: 48px 24px;
  }

  .sb-homepage .colour-story-image {
    min-height: 260px;
  }
}

/* Split autumn hero ------------------------------------------------------- */

/* Overrides the full-bleed hero: copy sits on a cream panel beside the
   photography rather than over it, per the autumn mockup. The .hero-slide
   markup is unchanged, so adding further slides still cycles the image side. */
.sb-homepage .hero-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  height: auto !important;
  min-height: 0;
  background-color: var(--sb-autumn-cream);

  /* The Elementor header is position: fixed and transparent, so the page
     starts underneath it. This is the measured distance from the top of the
     viewport to the bottom of the nav on production: 189px wide, 211px once
     the promo bar wraps to two lines on narrow screens. The photograph still
     runs up behind the header, as it does on the live homepage; only the copy
     is pushed clear of it. Desktop only: once stacked, the copy sits below the
     photograph and the @media block below resets the padding. */
  --sb-hero-clear: 189px;
}

/* Text and image share one grid cell: the photograph spans the full hero and
   the copy sits on top of its faded left side, so there is no seam or flat band
   between the two halves. */
.sb-homepage .hero-split .hero-split-text {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: transparent;
  padding: calc(var(--sb-hero-clear) + 28px) 56px 90px;
}

.sb-homepage .hero-split .hero-split-text-inner {
  max-width: 545px;
}

.sb-homepage .hero-split .hero-title {
  color: var(--sb-autumn-olive);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.12;
  text-align: left;
  text-shadow: none;
  margin-bottom: 18px;
}

.sb-homepage .hero-split .hero-ornament {
  display: block;
  color: var(--sb-autumn-gold);
  margin-bottom: 22px;
}

.sb-homepage .hero-split .hero-text {
  color: var(--sb-color-gray);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  opacity: 1;
  margin-bottom: 30px;
  max-width: 380px;
}

/* Resets the centring transform the full-bleed hero uses for its CTA row. */
.sb-homepage .hero-split .hero-ctas {
  justify-content: flex-start;
  width: auto;
  max-width: none;
  margin-left: 0;
  transform: none;
  gap: 12px;
}

.sb-homepage .hero-split .btn {
  font-size: 11.5px;
  padding: 13px 18px;
  letter-spacing: 0.07em;
}

.sb-homepage .hero-split .hero-slider {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  min-height: 560px;
}

/* Feathers the left edge of the photograph into the cream copy panel, per the
   mockup, so the two halves read as one surface rather than a hard seam.
   The left end holds at 0.93 rather than going fully opaque, so roughly 7% of
   the photograph still shows through behind the copy and the panel does not
   end on a hard edge.
   The final stop is the cream colour at zero alpha rather than the "transparent"
   keyword, which resolves to transparent black and would grey the ramp. */
.sb-homepage .hero-split .hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right,
    rgba(250, 245, 236, 0.93) 0%,
    rgba(250, 245, 236, 0.93) 25%,
    rgba(250, 245, 236, 0.88) 33%,
    rgba(250, 245, 236, 0.5) 41%,
    rgba(250, 245, 236, 0.12) 49%,
    rgba(250, 245, 236, 0) 56%);
}

/* Slides are absolutely positioned by the base hero rules, which still applies
   here — they now fill the image column instead of the whole section. */
.sb-homepage .hero-split .hero-slide {
  background-position: center;
}

@media (max-width: 1024px) {
  .sb-homepage .hero-split {
    grid-template-columns: 1fr;
  }

  /* Stacked: the explicit grid placement used on desktop would otherwise leave
     the copy sitting on top of the photograph, so each takes its own row here.
     (order has no effect once grid-row/grid-column are set explicitly.) */
  .sb-homepage .hero-split .hero-split-text {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    padding: 56px 40px;
  }

  .sb-homepage .hero-split .hero-split-text-inner {
    max-width: 560px;
  }

  .sb-homepage .hero-split .hero-slider {
    grid-column: 1;
    grid-row: 1;
    min-height: 380px;
  }

  /* The fade runs bottom-to-top once stacked, softening the image into the
     copy below it rather than across it. */
  .sb-homepage .hero-split .hero-slider::after {
    background: linear-gradient(to bottom,
      rgba(250, 245, 236, 0) 60%,
      rgba(250, 245, 236, 0.65) 85%,
      rgb(250, 245, 236) 100%);
  }
}

@media (max-width: 768px) {
  /* Centred once stacked, so the copy block reads as its own panel beneath the
     photograph rather than hugging the left edge. */
  .sb-homepage .hero-split .hero-split-text {
    padding: 44px 24px;
    justify-content: center;
    text-align: center;
  }

  .sb-homepage .hero-split .hero-title {
    text-align: center;
  }

  .sb-homepage .hero-split .hero-ornament {
    margin-left: auto;
    margin-right: auto;
  }

  .sb-homepage .hero-split .hero-text {
    max-width: none;
  }

  .sb-homepage .hero-split .hero-ctas {
    align-items: center;
  }

  .sb-homepage .hero-split .hero-slider {
    min-height: 300px;
  }

  .sb-homepage .hero-split .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Mockup alignment: section ornaments and Autumn Picks card treatment --------
   The mockup sets the seasonal cards apart from the standard Best Sellers grid:
   a cream info panel rather than white, the price in rust, and a taller image
   crop that keeps more of the arrangement in frame. */

.sb-homepage .autumn-ornament {
  display: block;
  color: var(--sb-autumn-gold);
  margin: 0 auto 14px;
  width: 88px;
}

.sb-homepage .colour-story .autumn-ornament {
  margin-left: 0;
  margin-right: 0;
}

.sb-homepage .autumn-picks .section-tag {
  margin-bottom: 14px;
}

.sb-homepage .autumn-picks .product-image {
  /* 4:5 rather than the square crop used elsewhere, so the portrait product
     photography is not cut off at the top and bottom. */
  padding-bottom: 125%;
}

.sb-homepage .autumn-picks .product-info {
  background-color: var(--sb-autumn-cream);
  border-top: 1px solid var(--sb-autumn-cream-dark);
  padding: 18px 16px;
}

/* "Harvest Sunflower Jardin" wrapped to two lines at the shared 18px size,
   which made its card taller than the other three. The grid stretches every
   card to the tallest, so the other three were left with dead white space
   under their price. Slightly smaller type and tighter tracking keep all four
   names on one line, so the info panels match and the gap disappears. */
.sb-homepage .autumn-picks .product-name {
  color: var(--sb-autumn-ink);
  font-size: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: 8px;
}

.sb-homepage .autumn-picks .product-price {
  color: var(--sb-autumn-orange);
  font-size: 15px;
  font-weight: 500;
}

.sb-homepage .autumn-picks .product-card:hover {
  box-shadow: 0 10px 30px rgba(78, 85, 25, 0.18);
}

/* Four columns get too narrow below this for the longest name to hold a single
   line, and shrinking the type further would make it unreadable. The seasonal
   row goes two-up instead; the standard product grids are untouched.
   The lower bound matters: this selector is more specific than the shared
   .products-grid rules, so without it this would also override the one-column
   mobile layout further down. */
@media (max-width: 1244px) and (min-width: 769px) {
  .sb-homepage .autumn-picks .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}