/* ============================================================================
   SIMPLY ARI — HOMEPAGE STYLESHEET
   ----------------------------------------------------------------------------
   Styles scoped exclusively to the homepage (page-id-3347).
   Loaded only on the homepage via functions.php conditional enqueue.

   MAINTENANCE NOTES
   - Edit this file for any homepage-specific styling.
   - Bump the version in functions.php after every change so caches refresh.
   - This file is intentionally separate from simply-ari.css so homepage
     changes cannot affect other pages.

   SECTION INDEX
     1. INSTAGRAM SECTION
     2. HOMEPAGE — full-bleed sections, Astra resets, design tokens
     3. HOMEPAGE — hero + trust bar
     4. HOMEPAGE — new this season (dynamic WooCommerce grid, 8 products even fill)
        SAVED DESIGN — "see all" gradient card commented out below section 4
     5. HOMEPAGE — celebrate your nature
     6. NEWSLETTER (SureForms)
   ============================================================================ */


/* ============================================================================
   2. INSTAGRAM SECTION
   ============================================================================ */

.sa-ig { background:#fdf9f6; padding:60px 40px; }
.sa-ig .wp-block-gallery { max-width:1096px; margin:0 auto; }
.sa-ig .wp-block-gallery img {
  border-radius:8px;
  transition:transform .4s ease;
}
.sa-ig .wp-block-gallery figure { overflow:hidden; border-radius:8px; }
.sa-ig .wp-block-gallery figure:hover img { transform:scale(1.06); }
.sa-ig .ig-handle {
  font-size:20px; font-weight:800; letter-spacing:.04em; text-align:center;
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sa-ig .ig-eyebrow {
  text-align:center; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#2c8b87;
}
@media (max-width:800px){ .sa-ig { padding:48px 20px; } }


/* ============================================================================
   3. HOMEPAGE — Full-bleed sections, Astra resets, design tokens
   ============================================================================ */

/* Let the homepage sections run full-bleed */
.sa-home {
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* Kill Astra's container side padding for this page only */
.page-id-3347 .site-content > .ast-container,
.page-id-3347 .ast-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* Remove the entry title gap if the template still prints one */
.page-id-3347 .entry-header,
.page-id-3347 .ast-no-title { display: none; }

/* Neutralise Astra's heading rules */
.sa-home :where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--text, #2d2233) !important;
  margin: 0;
}

/* Re-assert display heading sizes so Astra's fixed px sizes cannot win */
.sa-home .hero-h1   { font-size: clamp(38px, 6vw, 78px) !important; line-height: 1.05 !important; }
.sa-home .stitle    { font-size: clamp(28px, 3.5vw, 46px) !important; }
.sa-home .sale-title{ font-size: clamp(32px, 4vw, 52px) !important; }
.sa-home .nl-title  { font-size: clamp(28px, 3.5vw, 42px) !important; }

/* Body text + links */
.sa-home,
.sa-home p {
  font-family: 'Nunito Sans', sans-serif;
}
.sa-home p { margin-bottom: 0; }
.sa-home a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}
.sa-home a:hover { color: inherit; }

/* Block-editor padding leaks */
.sa-home .wp-block-html,
.sa-home > .wp-block-group,
.sa-home .entry-content > * { margin: 0; padding: 0; }

/* Image defaults */
.sa-home img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Design tokens (scoped to .sa-home) */
.sa-home {
  --teal:        #3a9c8e;
  --teal-light:  #e1f5ee;
  --teal-mid:    #9ed8d0;
  --green:       #2d8a50;
  --green-light: #eaf5ee;
  --pink:        #e05a9a;
  --pink-light:  #fce8f3;
  --pink-dark:   #c03878;
  --dark:        #1a2440;
  --text:        #2d2233;
  --muted:       #7a6e82;
  --cream:       #fdf9f6;
  --cream-dark:  #f5f0eb;
  --border:      rgba(58,156,142,0.15);
  --shadow:      0 4px 20px rgba(58,156,142,0.07);
  --shadow-h:    0 14px 40px rgba(58,156,142,0.15);
  --r:           16px;
  --pill:        40px;
}


/* ============================================================================
   4. HOMEPAGE — Hero + Trust Bar
   ============================================================================ */

.sa-home.hero,
.sa-home.trust {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

.sa-home .hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 6vw, 78px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin-bottom: 28px;
  max-width: 700px;
}
.sa-home .hero-h1 em {
  color: #fce8f3 !important;
  font-style: italic;
}

.sa-home.hero {
  position: relative;
  overflow: hidden;
  min-height: 94vh;
  display: flex;
  align-items: center;
  background-color: #1e0e28;
  background-image: url(https://staging.simplyari.com/wp-content/uploads/2026/04/updatedstrawberrySplash.png);
  background-size: cover;
  background-position: center center;
}
.sa-home .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,14,40,0.72) 0%, rgba(30,14,40,0.18) 55%, transparent 100%);
}
.sa-home .hero-content {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  padding: 80px 40px;
}
.sa-home .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 40px;
  margin-bottom: 18px;
}
.sa-home .btn-hero {
  display: inline-block;
  background: #ffffff;
  color: #2d2233 !important;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 44px;
  border-radius: 40px;
  text-decoration: none !important;
  transition: opacity 0.15s, transform 0.12s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.sa-home .btn-hero:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.sa-home.trust {
  background: #1a2440;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.sa-home .ti {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sa-home .td {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}

@media (max-width: 768px) {
  .sa-home .hero-content { padding: 48px 20px; }
  .sa-home.hero { min-height: 70vh; }
}
@media (max-width: 600px) {
  .sa-home .td { display: none; }
  .sa-home.trust { gap: 16px; padding: 12px 16px; }
}


/* ============================================================================
   5. HOMEPAGE — New This Season (dynamic WooCommerce product grid)
   ============================================================================

   HOW THIS WORKS
   The hardcoded product cards have been replaced by a WooCommerce shortcode:
     [products limit="7" columns="4" visibility="featured"]
   Star any product in Products → All Products to include it.
   To swap a collection: unstar old products, star new ones. Done.

   The CSS below targets WooCommerce's own rendered classes so prices,
   stock badges, sale prices, and images all update automatically.
   The "See all products" card remains a hardcoded Custom HTML block
   placed immediately after the shortcode block in the page editor.
   ============================================================================ */

/* ── Section wrapper ── */
.sa-na-wrap {
  background: linear-gradient(180deg, #fff5fa 0%, #fdf9f6 70%);
  padding: 80px 40px 0;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.sa-na-head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 1096px;
  margin-left: auto;
  margin-right: auto;
}
.sa-na-wrap .sa-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #2c8b87;
  margin-bottom: 8px;
}
.sa-na-wrap .sa-eline {
  flex: 0 0 28px;
  height: 1px;
  background: #2c8b87;
  opacity: 0.4;
  display: block;
}
.sa-na-wrap .sa-stitle {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(36px, 4.5vw, 54px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #2b2b2b !important;
  margin: 8px 0 0 !important;
}
.sa-na-wrap .sa-stitle em {
  color: #e05a9a !important;
  font-style: italic;
}

/* ── WooCommerce product grid — HOMEPAGE ONLY ─────────────────────────────
   All selectors are prefixed with .page-id-3347 so they ONLY apply to the
   homepage and cannot affect the shop, product, or any other WC page.
   ───────────────────────────────────────────────────────────────────────── */

/* Grid container + pink-wash background */
.page-id-3347 .woocommerce ul.products,
.page-id-3347 .woocommerce-page ul.products {
  max-width: 1096px;
  margin: 0 auto !important;
  padding: 0 40px 0 !important;
  background: linear-gradient(180deg, #fff5fa 0%, #fdf9f6 100%);
}

/* Card shell */
.page-id-3347 .woocommerce ul.products li.product,
.page-id-3347 .woocommerce-page ul.products li.product {
  text-align: center !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(224,90,154,0.1) !important;
  box-shadow: 0 4px 18px rgba(224,90,154,0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  background: #ffffff !important;
}
.page-id-3347 .woocommerce ul.products li.product:hover,
.page-id-3347 .woocommerce-page ul.products li.product:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 44px rgba(224,90,154,0.13) !important;
}

/* Product image zoom on hover */
.page-id-3347 .woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
.page-id-3347 .woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap img {
  transition: transform 0.4s ease !important;
}
.page-id-3347 .woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img,
.page-id-3347 .woocommerce-page ul.products li.product:hover .astra-shop-thumbnail-wrap img {
  transform: scale(1.04) !important;
}

/* Product summary area */
.page-id-3347 .woocommerce ul.products li.product .astra-shop-summary-wrap,
.page-id-3347 .woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 14px 15px 17px !important;
  text-align: center !important;
}

/* Product title */
.page-id-3347 .woocommerce ul.products li.product .woocommerce-loop-product__title,
.page-id-3347 .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2d2233 !important;
  margin-bottom: 5px !important;
  line-height: 1.35 !important;
}

/* Price — pink */
.page-id-3347 .woocommerce ul.products li.product .price,
.page-id-3347 .woocommerce-page ul.products li.product .price {
  color: #e05a9a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 11px !important;
  display: block !important;
}
.page-id-3347 .woocommerce ul.products li.product .price del,
.page-id-3347 .woocommerce-page ul.products li.product .price del {
  color: #7a6e82 !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  margin-right: 3px;
}

/* Add to cart button — teal outline, fills teal on hover */
.page-id-3347 .woocommerce ul.products li.product .button,
.page-id-3347 .woocommerce ul.products li.product .add_to_cart_button,
.page-id-3347 .woocommerce ul.products li.product .product_type_variable,
.page-id-3347 .woocommerce-page ul.products li.product .button,
.page-id-3347 .woocommerce-page ul.products li.product .add_to_cart_button {
  display: block !important;
  width: calc(100% - 30px) !important;
  margin: 0 15px 17px !important;
  background: transparent !important;
  border: 1.5px solid #3a9c8e !important;
  color: #3a9c8e !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  padding: 9px !important;
  border-radius: 40px !important;
  transition: background 0.18s, color 0.18s !important;
}
.page-id-3347 .woocommerce ul.products li.product .button:hover,
.page-id-3347 .woocommerce ul.products li.product .add_to_cart_button:hover,
.page-id-3347 .woocommerce-page ul.products li.product .button:hover,
.page-id-3347 .woocommerce-page ul.products li.product .add_to_cart_button:hover {
  background: #3a9c8e !important;
  color: #ffffff !important;
}

/* Sale + New badge — homepage only.
   Astra sets right:0 which stretches the badge full card width.
   Unsetting right and anchoring to top-left collapses it to a pill. */
.page-id-3347 .woocommerce span.onsale {
  display: inline-block !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;       /* ← this is the key fix — removes the stretch */
  margin: 0 !important;
  width: auto !important;
  min-width: auto !important;
  min-height: auto !important;
  background: #3a9c8e !important;
  border-radius: 40px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  line-height: 1.6 !important;
  transform: none !important;
  white-space: nowrap !important;
}

/* Mobile — homepage grid only */
@media (max-width: 900px) {
  .page-id-3347 .woocommerce ul.products,
  .page-id-3347 .woocommerce-page ul.products { padding: 0 20px 0 !important; }
}

/* ── Product grid bottom padding (8 products fills grid evenly, no card) ── */
@media (max-width: 900px) {
  .sa-na-wrap { padding: 60px 20px 0; }
  .page-id-3347 .woocommerce ul.products,
  .page-id-3347 .woocommerce-page ul.products { padding: 0 20px 0 !important; }
}


/* ============================================================================
   SAVED DESIGN — "See all products" gradient card
   ============================================================================
   NOT ACTIVE. Removed from the homepage product grid (shortcode now shows
   8 products filling the 4×2 grid evenly, no 8th card slot needed).

   KEEP THIS — the pink-to-green gradient design is well liked and earmarked
   for reuse elsewhere (e.g. a featured banner, a sale callout, a category
   tile, a CTA block on the shop page).

   TO REUSE:
   1. Uncomment the rules below.
   2. Add the class "sa-gradient-card" to whatever element you want styled.
   3. The inner elements use sa-gradient-card__icon, __title, __sub.
      Swap in any emoji or SVG for the icon.

   EXAMPLE HTML:
   <a href="/shop/" class="sa-gradient-card">
     <div class="sa-gradient-card__icon">✦</div>
     <div class="sa-gradient-card__title">See all products</div>
     <div class="sa-gradient-card__sub">Explore the full collection →</div>
   </a>

   DESIGN NOTES:
   - Gradient: pink #fce8f3 → teal/green #e1f5ee (135deg)
   - Border: 1px rgba(224,90,154,0.15) — soft pink, barely visible
   - Hover: lifts 6px, casts a warm pink shadow
   - Title font: Cormorant Garamond serif, teal #3a9c8e
   - Works equally well as a full card, a wide banner, or a sidebar CTA.
   ============================================================================ */

/*
.sa-gradient-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid rgba(224,90,154,0.15);
  background: linear-gradient(135deg, #fce8f3 0%, #e1f5ee 100%);
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sa-gradient-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px rgba(224,90,154,0.13);
}
.sa-gradient-card__icon {
  font-size: 30px;
}
.sa-gradient-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: #3a9c8e;
  line-height: 1.2;
}
.sa-gradient-card__sub {
  font-size: 12px;
  color: #7a6e82;
}
*/



/* ============================================================================
   6. HOMEPAGE — Celebrate Your Nature
   ============================================================================ */

.sa-home.nature-wrap {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  background: #fdf9f6;
}
.sa-home .section-sm {
  padding: 52px 40px;
}
.sa-home .nature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1096px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(58,156,142,0.07);
}
.sa-home .nat-img {
  position: relative;
  min-height: 440px;
}
.sa-home .nat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.sa-home .nat-content {
  padding: 60px 52px;
  background: #fdf9f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.sa-home .nat-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3a9c8e;
}
.sa-home .nat-content .eline {
  width: 28px;
  height: 1px;
  background: #3a9c8e;
  opacity: 0.4;
}
.sa-home .nat-content .stitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.5vw, 46px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #2d2233 !important;
}
.sa-home .nat-content .stitle em {
  color: #3a9c8e !important;
  font-style: italic;
}
.sa-home .nat-desc {
  font-size: 15px;
  color: #7a6e82;
  line-height: 1.8;
}
.sa-home .nat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sa-home .nat-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1px solid rgba(58,156,142,0.15);
  border-radius: 40px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #2d2233;
}
.sa-home .nat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.sa-home .btn-teal {
  display: inline-block;
  background: #3a9c8e;
  color: #ffffff !important;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 13px 36px;
  border-radius: 40px;
  text-decoration: none !important;
  transition: opacity 0.15s;
}
.sa-home .btn-teal:hover {
  opacity: 0.88;
}
@media (max-width: 800px) {
  .sa-home .nature { grid-template-columns: 1fr; }
  .sa-home .nat-img { min-height: 260px; }
  .sa-home .nat-content { padding: 36px 28px; }
}


/* ============================================================================
   7. NEWSLETTER (SureForms)
   ============================================================================ */

.sa-nl {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  background: linear-gradient(135deg, #e1f5ee 0%, #eaf5ee 100%);
  padding: 80px 20px;
  text-align: center !important;
}
.sa-nl .sa-nl-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3a9c8e;
  margin-bottom: 10px;
  text-align: center !important;
}
.sa-nl .sa-nl-eyebrow::before,
.sa-nl .sa-nl-eyebrow::after {
  content: "" !important;
  display: inline-block !important;
  width: 28px !important;
  height: 1px !important;
  background: #3a9c8e !important;
  opacity: 0.4 !important;
  flex: 0 0 auto !important;
}
.sa-nl h2.wp-block-heading,
.sa-nl .wp-block-heading,
div.sa-nl h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 600 !important;
  color: #2d2233 !important;
  line-height: 1.15 !important;
  margin: 0 auto 12px !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}
.sa-nl h2.wp-block-heading em,
.sa-nl .wp-block-heading em {
  color: #3a9c8e !important;
  font-style: italic !important;
}
.sa-nl > p,
.sa-nl p.has-text-align-center {
  font-size: 14px;
  color: #7a6e82;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 28px !important;
  text-align: center !important;
}
/* ── NEWSLETTER FORM — stacked layout ────────────────────────────────────
   Full-width column stack: input → Turnstile → button.
   Each element is the same width on its own row — nothing can break
   regardless of whether Turnstile is active or hidden.
   ────────────────────────────────────────────────────────────────────── */

/* Form container */
.sa-nl .srfm-form-container {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

/* Form — full-width column, centred */
.sa-nl form.srfm-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  gap: 12px !important;
}

/* Email block — full width */
.sa-nl .srfm-email-block-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sa-nl .srfm-email-block,
.sa-nl .srfm-block-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Email input — full width rounded pill */
.sa-nl input.srfm-input-email {
  height: 54px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 22px !important;
  border: 1.5px solid rgba(58,156,142,0.3) !important;
  border-radius: 40px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 15px !important;
  background: #ffffff !important;
  color: #2d2233 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.sa-nl input.srfm-input-email:focus {
  border-color: #3a9c8e !important;
  box-shadow: none !important;
  outline: none !important;
}
.sa-nl input.srfm-input-email::placeholder {
  color: #b0a8b8 !important;
}

/* Submit container — full width column
   DOM order: .cf-turnstile → br.cf-turnstile-br → button
   We keep this order — Turnstile above button looks intentional */
.sa-nl .srfm-submit-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Turnstile widget — centred, full row */
.sa-nl .cf-turnstile {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Hide the <br> SureForms injects */
.sa-nl .cf-turnstile-br {
  display: none !important;
}

/* wp-block-button wrapper — full width */
.sa-nl .srfm-submit-container .wp-block-button {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Subscribe button — full width rounded pill */
.sa-nl button#srfm-submit-btn,
.sa-nl .srfm-button {
  background: #3a9c8e !important;
  color: #ffffff !important;
  border: none !important;
  height: 54px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 32px !important;
  border-radius: 40px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin: 0 !important;
  display: block !important;
  transition: background 0.18s !important;
}
.sa-nl button#srfm-submit-btn:hover,
.sa-nl .srfm-button:hover {
  background: #2d8a50 !important;
}
.sa-nl .srfm-submit-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sa-nl .srfm-error-wrap {
  position: absolute !important;
  pointer-events: none !important;
}
.sa-nl .srfm-validation-error {
  text-align: center !important;
  font-size: 12px !important;
}