/**
 * Stupina — Ultra-modern section blocks (EmpireX / Iunia-style rhythm)
 */

:root {
  --sp-radius-2xl: 1.35rem;
  --sp-radius-3xl: 1.75rem;
  --sp-block-pad: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  --sp-mesh-url: url("../images/home/section-honey-mesh.jpg");
}

/* ——— Section shell ——— */
.sp-block {
  position: relative;
  isolation: isolate;
}

.sp-block--inset > .sp-container {
  padding: var(--sp-block-pad);
  border-radius: var(--sp-radius-3xl);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  box-shadow: var(--sp-shadow-md);
}

.sp-block--mesh {
  background-color: var(--sp-cream);
  background-image:
    linear-gradient(180deg, rgba(247, 242, 232, 0.92), rgba(253, 251, 247, 0.88)),
    var(--sp-mesh-url);
  background-size: cover;
  background-position: center;
}

.sp-block--mesh.sp-block--inset > .sp-container {
  background: rgba(255, 252, 247, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sp-block--surface {
  background: var(--sp-warm-white);
}

.sp-block--forest-glass {
  background: var(--sp-texture-forest);
  color: #f7f2e8;
}

.sp-block--forest-glass .sp-promo__title,
.sp-block--forest-glass .sp-promo__text {
  color: inherit;
}

.sp-block--forest-glass .sp-promo__text {
  opacity: 0.88;
}

/* Section index (Iunia-style editorial) */
.sp-section-head--indexed {
  position: relative;
  text-align: left;
  max-width: 42rem;
  margin-inline: 0;
  margin-bottom: var(--sp-space-9);
}

.sp-section-head--indexed::before {
  content: attr(data-section-index);
  display: block;
  margin-bottom: var(--sp-space-3);
  font-family: var(--sp-font-body);
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-semibold);
  letter-spacing: 0.2em;
  color: var(--sp-honey);
}

.sp-block--forest-glass .sp-section-head--indexed::before {
  color: var(--sp-cta-hover);
}

/* ——— Bento categories ——— */
@media (min-width: 64rem) {
  .sp-categories__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(9.5rem, auto);
    gap: var(--sp-space-4);
  }

  .sp-category-card--featured {
    grid-column: span 7;
    grid-row: span 2;
    min-height: 18rem;
  }

  .sp-category-card:not(.sp-category-card--featured) {
    grid-column: span 5;
  }

  .sp-categories__grid .sp-category-card:nth-child(2) {
    grid-column: 8 / span 5;
  }

  .sp-categories__grid .sp-category-card:nth-child(3) {
    grid-column: 8 / span 5;
  }

  .sp-categories__grid .sp-category-card:nth-child(n + 4) {
    grid-column: span 4;
  }
}

.sp-category-card {
  border-radius: var(--sp-radius-2xl);
  overflow: hidden;
  transition: box-shadow 180ms ease;
}

.sp-category-card:hover {
  box-shadow: var(--sp-shadow-md);
}

.sp-category-card--photo .sp-category-card__media {
  background-image:
    linear-gradient(
      165deg,
      rgba(17, 41, 27, 0.58) 0%,
      rgba(17, 41, 27, 0.12) 42%,
      rgba(17, 41, 27, 0.72) 100%
    ),
    var(--sp-category-photo);
  background-size: cover;
  background-position: center;
  transition: transform 180ms ease;
}

.sp-category-card--photo:hover .sp-category-card__media {
  transform: scale(1.03);
}

.sp-header--empire,
.sp-header--empire.is-scrolled,
.sp-header--empire.is-sticky {
  background: #ffffff;
}

.sp-header--empire .sp-header__nav-wrap {
  background-color: var(--sp-ultra-forest-nav);
}

.sp-header--empire .sp-header__search .sp-search-form {
  border-radius: 26px;
}

/* ——— Premium product grid (homepage) ——— */
.sp-product-grid--premium .sp-product-card,
.sp-product-grid--premium li.product {
  border-radius: var(--sp-radius-2xl);
  border-color: rgba(30, 71, 56, 0.1);
  box-shadow: var(--sp-shadow-sm);
}

.sp-product-grid--premium .sp-product-card__body,
.sp-product-grid--premium li.product .sp-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  padding: var(--sp-space-5);
}

.sp-product-grid--premium .sp-product-card__title,
.sp-product-grid--premium li.product .woocommerce-loop-product__title {
  font-family: var(--sp-font-display);
  font-size: var(--sp-fs-lg);
  line-height: var(--sp-lh-tight);
}

.sp-product-grid--premium .button,
.sp-product-grid--premium .add_to_cart_button {
  width: 100%;
  margin-top: var(--sp-space-2);
  border-radius: var(--sp-radius-pill) !important;
  background: var(--sp-cta) !important;
  color: var(--sp-cta-text) !important;
  font-weight: var(--sp-fw-semibold);
  min-height: var(--sp-btn-h-sm);
  transition:
    background var(--sp-duration-fast) var(--sp-ease),
    transform var(--sp-duration-fast) var(--sp-ease);
}

.sp-product-grid--premium .button:hover,
.sp-product-grid--premium .add_to_cart_button:hover {
  background: var(--sp-cta-hover) !important;
  transform: translateY(-1px);
}

.sp-product-grid--premium .sp-wishlist-toggle {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ——— Honey types glass cards ——— */
.sp-honey-type {
  border-radius: var(--sp-radius-xl);
  background: rgba(255, 252, 247, 0.72);
  border: 1px solid rgba(30, 71, 56, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sp-shadow-sm);
  transition:
    border-color var(--sp-duration-fast) var(--sp-ease),
    box-shadow var(--sp-duration-fast) var(--sp-ease);
}

.sp-honey-type:hover {
  border-color: var(--sp-honey-mid);
  box-shadow: var(--sp-shadow-md);
}

/* ——— Story split modern ——— */
.sp-story.sp-block--split .sp-story__media {
  border-radius: var(--sp-radius-3xl);
  overflow: hidden;
  box-shadow: var(--sp-shadow-lg);
}

.sp-story.sp-block--split .sp-story__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 28rem;
}

.sp-promo__inner {
  border-radius: var(--sp-radius-2xl);
  padding: var(--sp-block-pad);
  border: 1px solid rgba(201, 168, 76, 0.22);
  background: rgba(17, 41, 27, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sp-promo__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4b56a;
}

.sp-rail {
  padding-block: var(--sp-section-y);
}

.sp-rail + .sp-rail {
  border-top: 1px solid var(--sp-border);
}

.sp-mega__count {
  margin-left: 0.25rem;
  font-weight: 500;
  color: var(--sp-text-muted);
  font-size: 0.75rem;
}

.sp-mega__product-price {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sp-deep-honey);
}