/*
Theme Name: Boba's Plants
Theme URI: https://bobasplants.com
Description: Custom WordPress theme for Boba's Plants
Author: Boba & Grandt
Version: 2.0
Text Domain: bobas-plants
*/

/* =============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Edit these to change site-wide colours, fonts, spacing.
   These override the compiled base values from bobas-base.min.css.
   ============================================================= */

:root {
    --font-heading: 'Bubblegum Sans', cursive;
    --font-body: 'Nunito', sans-serif;
    --col-green-100: #f4f9f4; /* Very light grayish lime green almost white */
    --col-green-200: #e8f3e8; /* Light grayish lime green visible*/
    --col-green-300: #d1e7d1; /* Light grayish lime green */
    --col-green-400: #88bc88; /* Slightly desaturated lime green. */
    --col-green-500: #3a5a3d; /* Very dark desaturated lime green */
    --col-green-900: #143223; /* Very dark (mostly black) cyan - lime green */
    --col-accent-400: #8B3F5D; /* Dark moderate pink (Bobas Plum buttons) */
    --col-real-plum: #8E4585;
    --col-tan: #E3E3D8; /* Light grayish yellow */
    --col-muted: #6c757d; /* Dark grayish blue */
    --col-white: #ffffff; /* White */
    --col-black: #000000; /* Black */
    --fs-section-title: var(--fs-700);   /* overridden by PHP */
    --col-heading: var(--col-green-500); /* overridden by PHP */
}

/* =============================================================
   2. COLOUR & TYPOGRAPHY UTILITIES
   ============================================================= */

/* .bobas_bg_color {} */
.bg_col-white { background-color: var(--col-white) !important; }
.bg_col-tan { background-color: var(--col-tan) !important; }
.bg_col-green-100 { background-color: var(--col-green-100) !important; }
.bg_col-green-200 { background-color: var(--col-green-200) !important; }
.bg_col-green-300 { background-color: var(--col-green-300) !important; }
.bg_col-green-400 { background-color: var(--col-green-400) !important; }
.bg_col-green-500 { background-color: var(--col-green-500) !important; }
.bg_col-green-900 { background-color: var(--col-green-900) !important; }
.bg_col-green-100 { background-color: var(--col-green-100) !important; }
.bg_col-accent-400 { background-color: var(--col-accent-400) !important; }
.bg_col-muted { background-color: var(--col-muted) !important; }

/* .bobas_text_color {} */
.text_col-white { color: var(--col-white) !important; }
.text_col-black { color: var(--col-black) !important; }
.text_col-muted { color: var(--col-muted) !important; }
.text_col-green-900 { color: var(--col-green-900) !important; }

/* =============================================================
   3. COMPILED THEME STYLES
   Expanded from SCSS partials (typography, buttons, header, footer,
   forms, blog, plant guide, WooCommerce, BPC, blocks).
   To update: edit src/sass/theme/*.scss, run npm run css, extract
   the custom portion (Bubblegum Sans @font-face to end of bpc_landing)
   and fix url(../fonts/ → url(fonts/ and url(../img/ → url(img/
   ============================================================= */

/* bubblegum-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Bubblegum Sans";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/bubblegum-sans-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/nunito-sans-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/nunito-sans-v15-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  font-variant-ligatures: none;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-400);
  font-size: var(--fs-400);
  line-height: 1.4;
  font-style: normal;
  color: var(--col-darkest);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-400);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: 0.5em;
}

h1,
.h1 {
  font-size: var(--fs-900);
  color: var(--col-green-500);
}

h2,
.h2 {
  font-size: var(--fs-800);
  color: var(--col-green-500);
}

h3,
.h3 {
  font-size: var(--fs-700);
  color: var(--col-green-500);
}

small, .small,
.has-small-font-size,
.fs-200 {
  font-size: var(--fs-200);
}

.fs-400 {
  font-size: var(--fs-400);
}

.has-medium-font-size {
  font-size: var(--fs-500);
}

.fs-600 {
  font-size: var(--fs-600);
}

.has-large-font-size,
.fs-700 {
  font-size: var(--fs-700);
}

.fw-400 {
  font-weight: var(--fw-400);
}

strong,
.fw-bold,
.fw-700 {
  font-weight: var(--fw-700);
}

.text-balance {
  text-wrap: balance;
}

.ff-heading {
  font-family: var(--ff-heading);
}

.w-constrained {
  max-width: 65ch;
}

/* Colour Classes */
.has-green-100-color,
.text--green-100 {
  color: var(--col-green-100);
}

.has-green-100-background-color,
.bg--green-100 {
  background-color: var(--col-green-100);
}

.has-green-200-color,
.text--green-200 {
  color: var(--col-green-200);
}

.has-green-200-background-color,
.bg--green-200 {
  background-color: var(--col-green-200);
}

.has-green-300-color,
.text--green-300 {
  color: var(--col-green-300);
}

.has-green-300-background-color,
.bg--green-300 {
  background-color: var(--col-green-300);
}

.has-green-400-color,
.text--green-400 {
  color: var(--col-green-400);
}

.has-green-400-background-color,
.bg--green-400 {
  background-color: var(--col-green-400);
}

.has-green-500-color,
.text--green-500 {
  color: var(--col-green-500);
}

.has-green-500-background-color,
.bg--green-500 {
  background-color: var(--col-green-500);
}

.has-green-900-color,
.text--green-900 {
  color: var(--col-green-900);
}

.has-green-900-background-color,
.bg--green-900 {
  background-color: var(--col-green-900);
}

.has-accent-400-color,
.text--accent-400 {
  color: var(--col-accent-400);
}

.has-accent-400-background-color,
.bg--accent-400 {
  background-color: var(--col-accent-400);
}

/* ILLUSTRATIONS */
.illustration-bg-1,
.illustration-bg-2,
.illustration-bg-3 {
  background-repeat: no-repeat;
}

.illustration-left {
  background-position: left center;
}

.illustration-right {
  background-position: right center;
}

.illustration-bg-1 {
  background-image: url(img/bg-1.svg);
}

.illustration-bg-2 {
  background-image: url(img/bg-2.svg);
}

.illustration-bg-3 {
  background-image: url(img/bg-3.svg);
}

.button, .bpc-members-nav-btn > a.nav-link, .wp-block-search__button, .blog_index__categories a, header .nav-button > a.nav-link, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: inline-block;
  padding: 12px 28px;
  align-self: center;
  text-align: center;
  text-decoration: none;
  border-radius: 0 20px 0 20px;
  font-weight: var(--fw-700);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  transition: background-color var(--transition), border-color var(--transition), border-radius var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.button:disabled, .bpc-members-nav-btn > a.nav-link:disabled, .wp-block-search__button:disabled, .blog_index__categories a:disabled, header .nav-button > a.nav-link:disabled, .wc-block-cart__submit-button:disabled,
.wc-block-components-checkout-place-order-button:disabled {
  border-color: var(--col-grey-200);
  background-color: var(--col-grey-200);
}

.button-primary, .bpc-members-nav-btn > a.nav-link, header .nav-button > a.nav-link, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border: 2px solid var(--col-accent-400);
  background-color: var(--col-accent-400);
  color: white;
  box-shadow: var(--shadow-lg);
}
.button-primary:hover, .bpc-members-nav-btn > a.nav-link:hover, header .nav-button > a.nav-link:hover, .wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  color: white;
  background-color: #4a5d23;
  border-color: #4a5d23;
  border-radius: 20px 0 20px 0;
  transform: translateY(-2px);
}

.woocommerce .filter-button {
  display: inline-block;
  padding: 0.5rem 0rem;
  align-self: center;
  text-align: center;
  text-decoration: none;
  height: 36px;
  border-radius: 0 18px 0 18px;
  font-weight: var(--fw-700);
  line-height: 1;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  border-color: var(--col-accent-400);
  background-color: var(--col-accent-400);
  color: white;
  box-shadow: var(--shadow-lg);
  width: min(90vw, 100%);
  margin-inline: auto;
}
.woocommerce .filter-button:disabled {
  border-color: var(--col-grey-200);
  background-color: var(--col-grey-200);
}
.woocommerce .filter-button:hover {
  color: white;
  background-color: color-mix(in srgb, var(--col-accent-400), white 10%);
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}

header {
  background-color: white;
  transition: var(--transition);
}
header .navbar {
  box-shadow: var(--shadow-lg);
}
header a.nav-link {
  color: var(--col-green-900);
  font-size: var(--fs-400);
  font-weight: var(--fw-700);
  transition: var(--transition);
  white-space: nowrap;
}
@media (min-width: 992px) {
  header a.nav-link:hover {
    color: var(--col-green-400);
  }
}
header li.nav-button {
  align-self: center;
}
header .nav-button > a.nav-link {
  padding-inline: 2rem !important;
  height: 18px !important;
  border-radius: 0 9px 0 9px;
  padding-block: 0 !important;
}
@media (max-width: 991px) {
  header .nav-button > a.nav-link {
    margin-bottom: 1.5rem;
  }
}
header .logo {
  background-image: url(img/boba-wide.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  aspect-ratio: 427/117;
  max-width: 100%;
  width: 180px;
}
@media (min-width: 992px) {
  header .logo {
    margin-right: 3rem;
    width: 210px;
  }
}
@media (min-width: 1200px) {
  header .logo {
    margin-right: 5rem;
    width: 240px;
  }
}
header.hide {
  transform: translateY(-100%);
}
@media (max-width: 991px) {
  .bobas-header-search {
    width: 100%;
    padding-bottom: 1rem;
  }
  .bobas-header-search .input-group {
    width: 100% !important;
  }
}
header .dropdown-menu {
  border-color: transparent;
  border-radius: 0;
  background-color: var(--col-green-400);
}
header .dropdown-menu a {
  color: var(--col-dark);
}
header .dropdown-menu .dropdown-item {
  padding: 0 1rem;
  line-height: 24px;
  padding-block: 5px;
  transition: background-color var(--transition), color var(--transition);
}
header .dropdown-menu .dropdown-item:hover {
  color: white;
  background-color: var(--col-green-400);
  opacity: 1;
}
header .current-menu-item,
header .current_page_parent,
header .dropdown.current-page-ancestor,
header .dropdown.current-menu-item {
  position: relative;
}
header .current-menu-item::after,
header .current_page_parent::after,
header .dropdown.current-page-ancestor::after,
header .dropdown.current-menu-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  display: block;
  background-color: var(--col-green-400);
  margin-top: 18px;
}
@media (max-width: 991px) {
  header .current-menu-item::after,
  header .current_page_parent::after,
  header .dropdown.current-page-ancestor::after,
  header .dropdown.current-menu-item::after {
    display: none;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.footer {
    font-size: var(--fs-300);
    background-color: var(--col-green-300);
    color: var(--col-green-900);
    border-top: 3px solid var(--col-green-400);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.footer a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.footer a:hover {
    color: var(--col-green-500);
    text-decoration: underline;
}

/* Column — vertical rule between each on desktop */
.footer__col + .footer__col {
    border-top: 1px solid rgba(20, 50, 35, 0.2);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 992px) {
    .footer__col + .footer__col {
        border-top: none;
        border-left: 1px solid rgba(20, 50, 35, 0.18);
        padding-top: 0;
        margin-top: 0;
        padding-left: 2rem;
    }
}

/* Column heading — uppercase label with bottom rule */
.footer__col-heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.65rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(20, 50, 35, 0.25);
}

/* Sub-heading inside a column (e.g. "Connect" under contact) */
.footer__col-subheading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

/* Logo */
.footer__logo {
    width: min(200px, 40vw);
    display: block;
    margin-inline: auto;
}
@media (min-width: 992px) {
    .footer__logo {
        margin-inline: 0;
    }
}

/* Nav menu */
.footer__menu ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
    columns: 2;
    -moz-columns: 2;
}
.footer__menu li {
    margin-bottom: 0.45rem;
}
.footer__menu a {
    font-size: 0.82rem;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.footer__menu a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Contact */
.footer__contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* Social icons — circled */
.footer__socials {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
@media (min-width: 992px) {
    .footer__socials {
        justify-content: flex-start;
    }
}
.footer__socials a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.9rem;
    opacity: 0.7;
    color: inherit;
    text-decoration: none !important;
    transition: opacity 0.15s, background 0.15s;
}
.footer__socials a:hover {
    opacity: 1;
    background: rgba(20, 50, 35, 0.1);
    text-decoration: none !important;
}

/* ── Colophon ────────────────────────────────────────────────────────────────── */
.colophon {
    background-color: var(--col-green-900);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-200);
}
.colophon a {
    color: var(--col-green-300);
    text-decoration: none;
    transition: color 0.15s;
}
.colophon a:hover {
    color: #fff;
    text-decoration: underline;
}
.colophon .footer-payment-icons i {
    transition: color 0.15s, opacity 0.15s;
    opacity: 0.8;
}
.colophon .footer-payment-icons i:hover {
    opacity: 1;
    color: #fff !important;
}

.acf-field .acf-label label {
  font-weight: var(--fw-700) !important;
}

.blog_index {
  background-color: var(--col-green-100);
}
.blog_index__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blog_index__categories a {
  height: 36px;
  border-radius: 0 18px;
  padding-block: 10px;
  border: 1px solid var(--col-green-400);
  color: var(--col-green-400);
  background-color: var(--col-green-200);
  transition: color var(--transition), background-color var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-lg);
  width: 100%;
}
.blog_index__categories a:hover {
  background-color: white;
  color: var(--col-green-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}
.blog_index__categories a.active {
  background-color: var(--col-green-900);
  border-color: var(--col-green-900);
  color: white;
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}
@media (min-width: 576px) {
  .blog_index__categories a {
    width: auto;
  }
}
.blog_index__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 3rem;
}
@media (min-width: 1200px) {
  .blog_index__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.blog_index__card {
  text-decoration: none;
  --_pad: 0.75rem;
  --_br1: 2rem;
  --_br2: calc(var(--_br1) - var(--_pad));
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: white;
  padding: var(--_pad);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
  display: grid;
  gap: 1rem;
}
.blog_index__card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}
.blog_index__card .blog_index__image {
  border-radius: 0 var(--_br2) 0 var(--_br2);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 9/6;
}
.blog_index__card .blog_index__inner {
  color: var(--col-green-900);
}
.blog_index__card .blog_index__inner h2, .blog_index__card .blog_index__inner .h2 {
  color: var(--col-green-500);
}
.blog_index__meta {
  display: flex;
  font-size: var(--fs-200);
  gap: 0.5rem;
}
@media (min-width: 1200px) {
  .blog_index__card:first-of-type {
    grid-column: span 2;
  }
}
@media (min-width: 768px) {
  .blog_index__card:first-of-type {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .blog_index__card:not(:first-of-type) {
    grid-template-columns: 1fr 1fr;
  }
}
.blog_index__card:not(:first-of-type) .blog_index__image {
  aspect-ratio: 9/6;
}
@media (min-width: 1200px) {
  .blog_index__card:not(:first-of-type) .blog_index__image {
    aspect-ratio: 6/9;
  }
}
.blog_index__card:not(:first-of-type) .blog_index__inner h2, .blog_index__card:not(:first-of-type) .blog_index__inner .h2 {
  font-size: var(--fs-700);
}

.index_intro {
  background-color: white;
  --_pad: 0.75rem;
  --_br1: 2rem;
  --_br2: calc(var(--_br1) - var(--_pad));
  border-radius: 0 var(--_br1) 0 var(--_br1);
  padding: 1.5rem;
  padding-bottom: 0.5rem;
  box-shadow: var(--shadow-sm);
}

.single {
  background-color: var(--col-green-100);
  --_pad: 0.75rem;
  --_br1: 2rem;
  --_br2: calc(var(--_br1) - var(--_pad));
}
.single__content {
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: white;
  padding: var(--_pad);
  box-shadow: var(--shadow-sm);
}
.single__title {
  font-size: var(--fs-800);
}
.single__image {
  border-radius: 0 var(--_br2) 0 var(--_br2);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 16/9;
  margin-bottom: 1rem;
}

.related {
  --_pad: 0.5rem;
  --_br1: 1rem;
  --_br2: calc(var(--_br1) - var(--_pad));
}
.related__card {
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: white;
  padding: var(--_pad);
  box-shadow: var(--shadow-lg);
  margin-bottom: 1rem;
  text-decoration: none;
  color: var(--col-green-500);
  transition: box-shadow var(--transition), transform var(--transition);
}
.related__card h3, .related__card .h3 {
  font-size: var(--fs-600);
}
.related__card:hover {
  transform: translateY(2px);
  box-shadow: var(--shadow-sm);
  color: var(--col-green-500);
}
.related__image {
  border-radius: 0 var(--_br2) 0 var(--_br2);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 16/9;
  margin-bottom: 0.5rem;
}

.page_hero {
  min-height: 400px;
  display: flex;
  align-items: start;
  background-color: var(--col-green-200);
}
.page_hero__grid {
  display: grid;
  grid-template-areas: "stack" "inner";
  isolation: isolate;
}
.page_hero__title {
  grid-area: stack;
  z-index: 2;
  justify-self: center;
  align-self: center;
  filter: drop-shadow(0px 1px 1px var(--col-green-900));
  font-size: 4rem;
  margin-bottom: 0;
}
.page_hero__inner {
  grid-area: inner;
  padding-inline: 1rem;
  padding-block: 1rem;
}
.page_hero__cta {
  grid-area: stack;
  z-index: 2;
  justify-self: center;
  align-self: flex-end;
}
.page_hero__slider {
  grid-area: stack;
}
.page_hero__title, .page_hero__cta, .page_hero__slider {
  position: relative;
}
.page_hero .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: 1;
}
@media (min-width: 768px) {
  .page_hero .page_hero__grid {
    grid-template-areas: "title slider" "inner slider" "cta slider";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    align-content: center;
  }
  .page_hero .page_hero__title {
    grid-area: title;
    align-self: end;
    justify-self: start;
    padding-inline: 1rem;
    filter: none;
  }
  .page_hero .page_hero__inner {
    padding-block: 0;
  }
  .page_hero .page_hero__cta {
    grid-area: cta;
    align-self: start;
    justify-self: start;
    padding-inline: 1rem;
  }
  .page_hero .page_hero__slider {
    grid-area: slider;
  }
  .page_hero .overlay {
    display: none;
  }
  .page_hero .page_hero__left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    gap: 2rem; /* Optional: Adds spacing between elements */
  }
}
.page_hero #page-hero-carousel .splide__track {
  overflow: hidden;
}
.page_hero .splide__slide {
  width: 100%; /* Ensure images fill slides */
  height: 260px;
}
@media (min-width: 576px) {
  .page_hero .splide__slide { height: 350px; }
}
@media (min-width: 768px) {
  .page_hero .splide__slide { height: 450px; }
}
.page_hero .splide__slide img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.upcoming_events__list {
  background-color: white;
  border-radius: 0 24px 0 24px;
  padding: 1rem 2rem;
  margin-inline: min(2rem, 4vw);
  box-shadow: var(--shadow-lg);
}

.event_row {
  display: grid;
  grid-template-areas: "date" "title" "address" "detail";
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  align-items: center;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--col-green-200);
}
@media (min-width: 768px) {
  .event_row {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "date title address" "detail detail detail";
  }
}
.event_row:last-child {
  border-bottom: none;
}

.event_title {
  font-weight: var(--fw-700);
  grid-area: title;
  font-size: var(--fs-500);
}

.all_events .event_title {
  font-size: var(--fs-600);
}

.event_date {
  grid-area: date;
}

.event_address {
  grid-area: address;
}
.event_address a {
  color: var(--col-green-400);
  font-weight: var(--fw-700);
  text-decoration: none;
  transition: color var(--transition);
}

.event_detail {
  grid-area: detail;
  padding-top: 1rem;
}
.event_detail a {
  text-decoration: none;
  transition: color var(--transition);
}

.text_image__image img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0 24px 0 24px;
  box-shadow: var(--shadow-lg);
}

.latest_blogs .blog__grid {
  display: grid;
  grid-template-areas: "feature" "first" "second" "third";
  -moz-column-gap: 3rem;
  column-gap: 3rem;
  row-gap: 1.5rem;
}
@media (min-width: 992px) {
  .latest_blogs .blog__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: "feature first" "feature second" "feature third";
  }
}
.latest_blogs .blog__card:nth-of-type(1) {
  grid-area: feature;
}
.latest_blogs .blog__card:nth-of-type(2) {
  grid-area: first;
}
.latest_blogs .blog__card:nth-of-type(3) {
  grid-area: second;
}
.latest_blogs .blog__card:nth-of-type(4) {
  grid-area: third;
}
.latest_blogs .blog__card {
  --_pad: 0.75rem;
  text-decoration: none;
  background-color: white;
  padding: var(--_pad);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
  --_br2: calc(var(--_br1) - var(--_pad));
  border-radius: 0 var(--_br1) 0 var(--_br1);
  display: grid;
  gap: 1rem;
}
.latest_blogs .blog__card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}
.latest_blogs .blog__card .blog__image {
  border-radius: 0 var(--_br2) 0 var(--_br2);
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.latest_blogs .blog__card .blog__content {
  color: var(--col-green-900);
}
.latest_blogs .blog__card .blog__content h3, .latest_blogs .blog__card .blog__content .h3 {
  color: var(--col-green-500);
}
.latest_blogs .blog__card:nth-of-type(1) {
  --_br1: 2rem;
}
.latest_blogs .blog__card:nth-of-type(1) .blog__image {
  aspect-ratio: 9/6;
}
.latest_blogs .blog__card:nth-of-type(1) .blog__content {
  margin-block: auto;
}
@media (min-width: 768px) {
  .latest_blogs .blog__card:nth-of-type(1) {
    grid-template-columns: 1fr 1fr;
  }
  .latest_blogs .blog__card:nth-of-type(1) .blog__image {
    aspect-ratio: unset;
    height: 100%;
    max-height: 408px;
  }
}
.latest_blogs .blog__card:not(:nth-of-type(1)) {
  --_br1: 1.25rem;
  grid-template-columns: 25% 75%;
}
.latest_blogs .blog__card:not(:nth-of-type(1)) .blog__image {
  aspect-ratio: 9/6;
}
.latest_blogs .blog__card:not(:nth-of-type(1)) .blog__content h3, .latest_blogs .blog__card:not(:nth-of-type(1)) .blog__content .h3 {
  font-size: var(--fs-600);
}

.recent_posts {
  --_pad: 0.75rem;
  --_br1: 2rem;
}
.recent_posts__card {
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
  display: grid;
  grid-template-areas: "stack";
  --_br2: calc(var(--_br1) - var(--_pad));
  border-radius: 0 var(--_br1) 0 var(--_br1);
  display: grid;
  gap: 1rem;
  overflow: hidden;
}
.recent_posts__card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
}
.recent_posts__card .recent_posts__image {
  grid-area: stack;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 1;
}
.recent_posts__card h3, .recent_posts__card .h3 {
  grid-area: stack;
  background-color: white;
  place-self: end;
  padding: var(--_pad) calc(var(--_pad) * 2);
  font-size: var(--fs-500);
  margin-bottom: 0;
  border-radius: 0 var(--_br1) 0 var(--_br1);
  color: var(--col-green-500);
  width: 100%;
}

.product {
  --_pad: 0.75rem;
  --_br1: 2rem;
}
.product__card {
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
  display: grid;
  grid-template-areas: "stack";
  color: var(--col-green-900);
  --_br2: calc(var(--_br1) - var(--_pad));
  border-radius: 0 var(--_br1) 0 var(--_br1);
  display: grid;
  gap: 1rem;
  overflow: hidden;
}
.product__card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
  color: var(--col-green-900);
}
.product__card:hover .product__detail {
  transform: translateY(0);
}
.product__card:hover .product__price {
  opacity: 1;
}
.product__image {
  grid-area: stack;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 5/6;
}
.product__detail {
  grid-area: stack;
  background-color: var(--col-green-100);
  height: -moz-max-content;
  height: max-content;
  display: grid;
  align-self: end;
  justify-items: start;
  padding: var(--_pad) calc(var(--_pad) * 2);
}
.product__detail h3, .product__detail .h3 {
  font-size: var(--fs-500);
  margin-bottom: 0.5rem;
}
@media (hover: hover) and (pointer: fine) {
  .product__detail {
    transform: translateY(100%);
    transition: transform var(--transition);
  }
}
.product .reserve {
  background-color: var(--col-accent-400);
  color: white;
  font-size: var(--fs-300);
  font-weight: var(--fw-700);
  justify-self: end;
  padding-inline: 1.5rem;
  padding-block: 0.5rem;
  border-radius: 0 var(--_br2) 0 var(--_br2);
}
.product__price {
  grid-area: stack;
  margin-top: var(--_pad);
  margin-left: var(--_pad);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  background-color: var(--col-green-100);
  padding-inline: 0.5rem;
  color: var(--col-green-900);
  transition: opacity var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .product__price {
    opacity: 0;
  }
}

.beyond_showcase .splide__slide img {
  aspect-ratio: 4/3;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0 24px 0 24px;
  box-shadow: var(--shadow-lg);
}

.az-filter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
}
@media (min-width: 576px) {
  .az-filter {
    grid-template-columns: repeat(13, 1fr);
  }
}
.az-filter .show-all {
  grid-column: span 7;
  font-weight: bold;
  margin-top: 0.5rem;
}
@media (min-width: 576px) {
  .az-filter .show-all {
    margin-top: 0;
    grid-column: span 13;
  }
}

.az-filter a {
  font-weight: var(--fw-700);
  background-color: var(--col-green-500);
  display: grid;
  place-content: center;
  border-radius: 0 17px 0 17px;
  color: white;
  height: 35px;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.az-filter a:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
  color: white;
}

.az-filter a:not(.show-all) {
  aspect-ratio: 1;
  width: 35px;
}

.az-filter a.active {
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
  background-color: var(--col-accent-400);
}

.az-filter a.inactive {
  opacity: 0.3;
  font-weight: var(--fw-400);
  pointer-events: none;
}

.plant-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plant-item {
  border-bottom: 1px solid var(--col-green-200);
  transition: background-color 0.2s ease-in-out;
}

.plant-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "image common" "image scientific" "aka aka";
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  row-gap: 0.25rem;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.plant-thumb {
  grid-area: image;
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 5px;
}

/* Name & Latin Name */
.plant-name {
  grid-area: common;
  font-weight: bold;
  font-size: 1.1rem;
}

.plant-scientific {
  grid-area: scientific;
  font-style: italic;
  color: #666;
}

/* Alternative Names */
.plant-alternative {
  grid-area: aka;
  font-size: 0.875rem;
  color: #888;
}

/* Tablet & Larger Screens: Keep "aka" beside image */
@media (min-width: 576px) {
  .plant-link {
    grid-template-areas: "image common" "image scientific" "image aka";
  }
}
/* Improve UX: Add Hover Effect */
.plant-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.plant-image {
  position: relative;
  margin-bottom: 1rem;
}
.plant-image img {
  margin-bottom: 0;
}

.plant-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #000;
  font-size: 0.75rem;
  padding-inline: 10px;
}

.photo-attribution {
  color: #aaa;
  text-decoration: none;
}

.photo-attribution:hover {
  color: #fff;
}

/* plant info table */
.plant-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-bottom: 1rem;
  font-size: var(--fs-500);
}

/* Each row now acts as a flex container */
.plant-info__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--col-green-300);
}

/* Remove border from last row */
.plant-info__row:last-child {
  border-bottom: none;
}

/* Ensure first column is bold */
.plant-info__title {
  font-weight: var(--fw-700);
  white-space: nowrap;
}

.splide__slide {
  background: none !important; /* Remove background images */
  display: flex !important;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#product-gallery .splide__slide {
  border-bottom-left-radius: 2rem;
  border-top-right-radius: 2rem;
}

#product-thumbnails .splide__slide {
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.splide__slide img {
  display: block !important; /* Ensure visibility */
  max-width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 1/1; /* Enforce square images */
}

.woocommerce div.product .col-md-6 {
  float: none !important; /* Kill legacy float */
  display: flex !important;
  flex-direction: column;
}

.product-container {
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: white;
  padding: var(--_pad);
  box-shadow: var(--shadow-sm);
}

#stickyCart {
  --_br1: 1rem;
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  width: 100%;
  display: flex;
  justify-content: center;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
  z-index: 999;
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: var(--col-green-400);
  color: white;
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition), background-color var(--transition);
}
@media (min-width: 768px) {
  #stickyCart {
    top: 15vh;
    right: 0;
    bottom: unset;
    width: -moz-max-content;
    width: max-content;
    display: block;
  }
  #stickyCart div {
    margin-bottom: 0.25rem;
  }
}
#stickyCart:hover {
  color: white;
  box-shadow: var(--shadow-sm);
  transform: translateY(2px);
  background-color: var(--col-green-500);
}

.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  border-radius: 0 var(--_br1) 0 var(--_br1);
  background-color: var(--col-green-100);
  color: var(--col-green-900);
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.woocommerce-LoopProduct-link:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(2px);
}
.woocommerce-LoopProduct-link .product-image-wrapper {
  display: grid;
  grid-template-areas: "stack";
}
.woocommerce-LoopProduct-link .product-image-wrapper img {
  grid-area: stack;
  margin-bottom: 0 !important;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 1;
}
.woocommerce-LoopProduct-link .product-image-wrapper .product-price {
  grid-area: stack;
  margin-top: var(--_pad);
  margin-left: var(--_pad);
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  background-color: var(--col-green-100);
  padding-inline: 0.5rem;
  color: var(--col-green-900);
}
.woocommerce-LoopProduct-link .product-details {
  background-color: var(--col-green-100);
  height: -moz-max-content;
  height: max-content;
  align-self: end;
  justify-items: start;
  padding: var(--_pad) calc(var(--_pad) * 2);
  color: var(--col-green-900);
}
.woocommerce-LoopProduct-link .product-details h3, .woocommerce-LoopProduct-link .product-details .h3 {
  color: var(--col-green-500);
  font-size: var(--fs-500);
  margin-bottom: 0.5rem;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  float: none;
  width: auto;
}

#product-results {
  min-height: 50vh;
}

#product-filter-form label {
  cursor: pointer;
}

.products-archive {
  background-color: var(--col-green-100);
}

.woocommerce-products-header {
  background-color: unset;
}

#product-filter-container {
  --_pad: 1rem;
  --_br1: 1rem;
  background-color: white;
  padding: var(--_pad) calc(var(--_pad) * 2);
  border-radius: 0 var(--_br1) 0 var(--_br1);
  box-shadow: var(--shadow-sm);
}
#product-filter-container .h3 {
  font-size: var(--fs-500);
}

#active-filters {
  margin-top: 10px;
  font-size: 14px;
}

#active-filters .badge {
  margin-right: 5px;
  padding: 5px 10px;
  font-weight: bold;
}

input[type=checkbox] {
  pointer-events: all !important;
  position: relative !important;
  z-index: 10 !important;
  opacity: 1 !important;
  width: 16px;
  height: 16px;
}

main {
  margin-top: var(--h-top);
}
@media (min-width: 576px) {
  main {
    margin-top: var(--h-top-md);
  }
}
@media (min-width: 992px) {
  main {
    margin-top: var(--h-top-lg);
  }
}
@media (min-width: 1200px) {
  main {
    margin-top: var(--h-top-xl);
  }
}
main a {
  display: inline-block;
  font-weight: var(--fw-900);
  transition: color var(--transition);
}
main a:hover, main a:focus-visible, main a:active {
  color: inherit;
}
main a {
  text-decoration: underline;
  color: var(--col-green-400);
  transition: opacity var(--transition);
  font-weight: var(--fw-600);
}
main a:hover {
  text-decoration: none;
}
main .noline,
main .noline > * {
  text-decoration: none;
}
main a.anchor {
  display: block;
  position: relative;
  top: calc(var(--h-top) * -1);
  visibility: hidden;
}
@media (min-width: 576px) {
  main a.anchor { top: calc(var(--h-top-md) * -1); }
}
@media (min-width: 992px) {
  main a.anchor { top: calc(var(--h-top-lg) * -1); }
}
@media (min-width: 1200px) {
  main a.anchor { top: calc(var(--h-top-xl) * -1); }
}
main a.arrow-link {
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
main a.arrow-link::before, main a.arrow-link::after {
  position: absolute;
  transition: opacity var(--transition);
  width: 22px;
  height: 16px;
  right: -2rem;
}
main a.arrow-link::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.5 16.28'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %235d7f9c; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg%3E%3Ccircle class='cls-1' cx='12.94' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='15.46' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='17.98' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='20.5' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='10.44' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='7.98' cy='8.22' r='.83'/%3E%3Ccircle class='cls-1' cx='5.46' cy='8.22' r='.66'/%3E%3Ccircle class='cls-1' cx='2.89' cy='8.22' r='.66'/%3E%3Ccircle class='cls-1' cx='.5' cy='8.22' r='.5'/%3E%3Ccircle class='cls-1' cx='12.94' cy='5.76' r='1'/%3E%3Ccircle class='cls-1' cx='15.46' cy='5.76' r='1'/%3E%3Ccircle class='cls-1' cx='17.98' cy='5.76' r='.83'/%3E%3Ccircle class='cls-1' cx='10.44' cy='5.76' r='1'/%3E%3Ccircle class='cls-1' cx='7.98' cy='5.76' r='.83'/%3E%3Ccircle class='cls-1' cx='5.46' cy='5.76' r='.66'/%3E%3Ccircle class='cls-1' cx='2.89' cy='5.76' r='.66'/%3E%3Ccircle class='cls-1' cx='.5' cy='5.76' r='.5'/%3E%3Ccircle class='cls-1' cx='12.94' cy='10.69' r='1'/%3E%3Ccircle class='cls-1' cx='15.46' cy='10.69' r='1'/%3E%3Ccircle class='cls-1' cx='17.98' cy='10.69' r='.83'/%3E%3Ccircle class='cls-1' cx='10.44' cy='10.69' r='1'/%3E%3Ccircle class='cls-1' cx='7.98' cy='10.69' r='.83'/%3E%3Ccircle class='cls-1' cx='5.46' cy='10.69' r='.66'/%3E%3Ccircle class='cls-1' cx='2.89' cy='10.69' r='.66'/%3E%3Ccircle class='cls-1' cx='.5' cy='10.69' r='.5'/%3E%3Ccircle class='cls-1' cx='12.94' cy='3.29' r='1'/%3E%3Ccircle class='cls-1' cx='12.94' cy='.83' r='.83'/%3E%3Ccircle class='cls-1' cx='12.94' cy='15.45' r='.83'/%3E%3Ccircle class='cls-1' cx='15.46' cy='3.29' r='.83'/%3E%3Ccircle class='cls-1' cx='12.94' cy='13.15' r='1'/%3E%3Ccircle class='cls-1' cx='15.46' cy='13.15' r='.83'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0;
}
main a.arrow-link::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.5 16.28'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %235d7f9c; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg%3E%3Ccircle class='cls-1' cx='12.94' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='15.46' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='17.98' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='20.5' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='10.44' cy='8.22' r='1'/%3E%3Ccircle class='cls-1' cx='7.98' cy='8.22' r='.83'/%3E%3Ccircle class='cls-1' cx='5.46' cy='8.22' r='.66'/%3E%3Ccircle class='cls-1' cx='2.89' cy='8.22' r='.66'/%3E%3Ccircle class='cls-1' cx='.5' cy='8.22' r='.5'/%3E%3Ccircle class='cls-1' cx='17.98' cy='5.76' r='.83'/%3E%3Ccircle class='cls-1' cx='17.98' cy='10.69' r='.83'/%3E%3Ccircle class='cls-1' cx='12.94' cy='.83' r='.83'/%3E%3Ccircle class='cls-1' cx='12.94' cy='15.45' r='.83'/%3E%3Ccircle class='cls-1' cx='15.46' cy='3.29' r='.83'/%3E%3Ccircle class='cls-1' cx='15.46' cy='13.15' r='.83'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
main a.arrow-link:hover::after {
  opacity: 0;
}
main a.arrow-link:hover::before {
  opacity: 1;
}

@media (min-width: 992px) {
  .cols-lg-2 {
    -moz-columns: 2;
    columns: 2;
  }
  .cols-lg-3 {
    -moz-columns: 3;
    columns: 3;
  }
}
.sticky {
  position: sticky;
  top: var(--h-top);
  background-color: #fff;
  z-index: 1000;
}
@media (min-width: 576px) {
  .sticky { top: var(--h-top-md); }
}
@media (min-width: 992px) {
  .sticky { top: var(--h-top-lg); }
}
@media (min-width: 1200px) {
  .sticky { top: var(--h-top-xl); }
}

/* ── Breadcrumbs ── */
p#breadcrumbs,
.woocommerce-breadcrumb,
.boba-breadcrumb {
    font-size: var(--fs-300);
    color: #888;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-top: 0 !important; /* WooCommerce injects padding-top:40px — neutralise it */
}

p#breadcrumbs a,
.woocommerce-breadcrumb a,
.boba-breadcrumb a {
    color: #8B3F5D !important;
    text-decoration: none !important;
}

p#breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover,
.boba-breadcrumb a:hover {
    color: #2d4a22 !important;
    text-decoration: underline !important;
}

.icon-download::after {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.2929 7.29289L11 10.5858V0H9V10.5858L5.70711 7.29289L4.29289 8.70711L10 14.4142L15.7071 8.70711L14.2929 7.29289ZM20 18V14H18V18H2V14H0V18C0 19.1046 0.89543 20 2 20H18C19.1046 20 20 19.1046 20 18Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
}

.icon-first::after {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9677 -1.77666e-07L18 2.1L11.3226 9L18 15.9L15.9677 18L7.25807 9L15.9677 -1.77666e-07ZM2.90323 -1.3198e-06L2.90323 18L0 18L1.57361e-06 -1.57361e-06L2.90323 -1.3198e-06Z' fill='%23244062'/%3E%3C/svg%3E%0A");
}

.icon-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.96774 -1.77666e-07L11 2.1L4.32258 9L11 15.9L8.96774 18L0.258066 9L8.96774 -1.77666e-07Z' fill='%23244062'/%3E%3C/svg%3E%0A");
}

.icon-next::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.03226 18L0 15.9L6.67742 9L0 2.1L2.03226 0L10.7419 9L2.03226 18Z' fill='%23244062'/%3E%3C/svg%3E%0A");
}

.icon-last::after {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.03226 18L0 15.9L6.67742 9L0 2.1L2.03226 0L10.7419 9L2.03226 18ZM15.0968 18V0H18V18H15.0968Z' fill='%23244062'/%3E%3C/svg%3E%0A");
}

.icon-search::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4351 10.0629H10.7124L10.4563 9.81589C11.3528 8.77301 11.8925 7.4191 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.4191 11.8925 8.77301 11.3528 9.81589 10.4563L10.0629 10.7124V11.4351L14.6369 16L16 14.6369L11.4351 10.0629ZM5.94625 10.0629C3.66838 10.0629 1.82962 8.22413 1.82962 5.94625C1.82962 3.66838 3.66838 1.82962 5.94625 1.82962C8.22413 1.82962 10.0629 3.66838 10.0629 5.94625C10.0629 8.22413 8.22413 10.0629 5.94625 10.0629Z' fill='black'/%3E%3C/svg%3E%0A");
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pagination > * {
  width: 32px;
  height: 32px;
  display: grid;
  place-content: center;
}
@media (min-width: 768px) {
  .pagination {
    gap: 1rem;
  }
  .pagination > * {
    width: 44px;
    height: 44px;
  }
}
.pagination .page-link {
  background-color: transparent;
  border: none;
}

.page-numbers:not(.prev):not(.next),
.page-item {
  position: relative;
  text-decoration: none;
  border: 2px solid var(--col-blue-700);
  border-radius: 100vw;
}
.page-numbers:not(.prev):not(.next).current, .page-numbers:not(.prev):not(.next).active,
.page-item.current,
.page-item.active {
  background-color: var(--col-blue-700);
  color: white;
}

.page-numbers:not(.current):not(.dots) {
  transition: background-color var(--transition);
}
.page-numbers:not(.current):not(.dots):hover {
  background-color: var(--col-blue-200);
}

.col-gap-3 {
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.row-gap-3 {
  row-gap: 1rem;
}

.wp-block-list li {
  margin-bottom: 1em;
}

.form-control, .acf-field .acf-input input[type=text],
.acf-field .acf-input input[type=email],
.acf-field .acf-input input[type=number],
.acf-field .acf-input input[type=url],
.acf-field .acf-input input[type=password],
.acf-field .acf-input textarea {
  border-radius: 0 0.75rem 0 0.75rem;
}

.wp-block-search__label {
  margin-bottom: 0.5rem;
  font-weight: var(--fw-500);
}

/*
var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
    rect = all[i].getBoundingClientRect();
    if (rect.right > docWidth || rect.left < 0){
        console.log(all[i]);
        all[i].style.borderTop = '1px solid red';
    }
}
*/
li.bpc-members-nav-btn {
  align-self: center;
}

.bpc-members-nav-btn > a.nav-link {
  background-color: var(--col-accent-400) !important;
  border-color: var(--col-accent-400) !important;
  color: #fff !important;
  padding-inline: 1.4rem !important;
  height: 18px !important;
  border-radius: 0 9px 0 9px;
  padding-block: 0 !important;
}
.bpc-members-nav-btn > a.nav-link:hover {
  background-color: #4a5d23 !important;
  border-color: #4a5d23 !important;
  border-radius: 20px 0 20px 0 !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}
@media (max-width: 991px) {
  .bpc-members-nav-btn > a.nav-link {
    margin-bottom: 1.5rem;
  }
}

@keyframes bpc-spin {
  to {
    transform: rotate(360deg);
  }
}
.bpc-login-section,
.bpc-signup-section {
  font-family: var(--ff-body, "Nunito Sans", sans-serif);
}

.bpc-login-card {
  background: var(--col-white, #fff);
  border-radius: 0 32px 0 32px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.1));
  padding: 48px 44px;
  max-width: 480px;
  width: 100%;
}
@media (max-width: 540px) {
  .bpc-login-card {
    padding: 32px 24px;
    border-radius: 0 20px 0 20px;
  }
}

/* Card header */
.bpc-login-card__header {
  margin-bottom: 32px;
  text-align: center;
}

.bpc-login-card__heading {
  font-family: var(--ff-heading, "Bubblegum Sans", sans-serif);
  font-size: var(--fs-700, 1.75rem);
  color: var(--col-green-900, #143223);
  margin: 0 0 8px;
  line-height: 1.2;
}

.bpc-login-card__sub {
  color: var(--col-muted, #6c757d);
  font-size: var(--fs-300, 0.875rem);
  margin: 0;
}

/* Status message */
.bpc-login-msg {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: var(--fs-300, 0.875rem);
  line-height: 1.5;
}
.bpc-login-msg--error {
  background: #fdecea;
  border-left: 3px solid #ef4444;
  color: #7f1d1d;
}
.bpc-login-msg--success {
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
  color: #14532d;
}

/* Fields */
.bpc-field {
  margin-bottom: 20px;
}

.bpc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.bpc-label-row .bpc-label {
  margin-bottom: 0;
}

.bpc-label {
  display: block;
  font-size: var(--fs-300, 0.875rem);
  font-weight: var(--fw-700, 700);
  color: var(--col-green-900, #143223);
  margin-bottom: 6px;
}

.bpc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--col-green-300, #e4e4d9);
  border-radius: 0 10px 0 10px;
  padding: 11px 14px;
  font-size: var(--fs-400, 1rem);
  font-family: var(--ff-body, inherit);
  color: var(--col-green-900, #143223);
  background: var(--col-white, #fff);
  transition: border-color var(--transition, 200ms ease-in-out), box-shadow var(--transition, 200ms ease-in-out);
  outline: none;
}
.bpc-input:focus {
  border-color: var(--col-green-500, #3a5a3d);
  box-shadow: 0 0 0 3px hsl(var(--hsl-green-500, 126 22% 29%)/0.15);
}
.bpc-input.bpc-input--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Password show/hide */
.bpc-password-wrap {
  position: relative;
}
.bpc-password-wrap .bpc-input {
  padding-right: 44px;
}

.bpc-pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--col-muted, #6c757d);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition, 200ms);
}
.bpc-pw-toggle:hover {
  color: var(--col-green-500, #3a5a3d);
}

.bpc-eye-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.bpc-field-err {
  display: block;
  font-size: var(--fs-200, 0.75rem);
  color: #dc2626;
  margin-top: 5px;
  min-height: 16px;
}

/* Password complexity indicator */
.bpc-pw-strength {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.8rem;
}
.bpc-pw-strength li {
  color: var(--col-muted, #6c757d);
}
.bpc-pw-strength li.met {
  color: #2d5a27;
}
.bpc-pw-strength li.met::before {
  content: '✓ ';
}
.bpc-pw-strength li:not(.met)::before {
  content: '✗ ';
}

/* Forgot link */
.bpc-forgot-link {
  font-size: var(--fs-200, 0.75rem);
  color: var(--col-muted, #6c757d);
  text-decoration: none;
  transition: color var(--transition, 200ms);
}
.bpc-forgot-link:hover {
  color: var(--col-accent-400, #8B3F5D);
}

/* Remember me */
.bpc-remember-row {
  margin-bottom: 24px;
}

.bpc-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-300, 0.875rem);
  color: var(--col-muted, #6c757d);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.bpc-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--col-green-500, #3a5a3d);
  cursor: pointer;
  flex-shrink: 0;
}

/* Submit button */
.bpc-login-btn {
  width: 100%;
  height: 52px;
  font-size: var(--fs-400, 1rem);
  font-family: var(--ff-body, inherit);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 2rem;
}
.bpc-login-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none !important;
}

/* Card footer */
.bpc-login-card__footer {
  margin-top: 28px;
  text-align: center;
  font-size: var(--fs-300, 0.875rem);
  color: var(--col-muted, #6c757d);
  border-top: 1px solid var(--col-green-300, #e4e4d9);
  padding-top: 20px;
}
.bpc-login-card__footer p {
  margin: 0;
}

.bpc-join-link {
  color: var(--col-accent-400, #8B3F5D);
  font-weight: var(--fw-700, 700);
  text-decoration: none;
  transition: color var(--transition, 200ms);
}
.bpc-join-link:hover {
  color: color-mix(in srgb, var(--col-accent-400, #8B3F5D), black 15%);
  text-decoration: underline;
}

.bpc-address-group {
  border: 2px solid var(--col-green-300, #e4e4d9);
  border-radius: 0 12px 0 12px;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--col-green-100, #f8f8f5);
}
.bpc-address-group .bpc-field {
  margin-bottom: 14px;
}
.bpc-address-group .bpc-field:last-child {
  margin-bottom: 0;
}
.bpc-address-group .row:last-child .bpc-field {
  margin-bottom: 0;
}

.bpc-address-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.bpc-section-label {
  font-family: var(--ff-heading, "Bubblegum Sans", sans-serif);
  font-size: var(--fs-400, 1rem);
  color: var(--col-green-900, #143223);
  font-weight: var(--fw-700, 700);
}

.bpc-checkout-hint {
  font-size: var(--fs-200, 0.75rem);
  color: var(--col-green-500, #3a5a3d);
  background: color-mix(in srgb, var(--col-green-400, #99b964) 15%, white);
  border: 1px solid color-mix(in srgb, var(--col-green-400, #99b964) 30%, white);
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: var(--fw-700, 700);
}

.bpc-select {
  cursor: pointer;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

.bpc-required {
  color: var(--col-accent-400, #8B3F5D);
  font-weight: var(--fw-700, 700);
}

.bpc-optional {
  font-weight: var(--fw-400, 400);
  font-size: var(--fs-200, 0.75rem);
  color: var(--col-muted, #6c757d);
}

.bpc-privacy-note {
  font-size: var(--fs-200, 0.75rem);
  color: var(--col-muted, #6c757d);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

/* Signup success state */
.bpc-signup-success .bpc-signup-form {
  display: none;
}
.bpc-signup-success .bpc-login-msg {
  display: block !important;
  text-align: center;
  padding: 32px 20px;
  font-size: var(--fs-500, 1.1rem);
}

/* BPC Members subnav */
.bpc-members-subnav {
    background: #fff;
    border-bottom: 2px solid #f0ece6;
}
.bpc-subnav-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.bpc-subnav-link {
    display: inline-block;
    padding: 7px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: #555;
    transition: background 0.15s, color 0.15s;
}
.bpc-subnav-link:hover { background: #f0f7ee; color: #2d5a27; }
.bpc-subnav-link--active { background: #2d5a27; color: #fff; }
.bpc-subnav-link--active:hover { background: #1e3d1a; color: #fff; }

.bpc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.bpc-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.bpc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.bpc-card--coming-soon {
  opacity: 0.88;
}

.bpc-card-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
}

.bpc-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d5a27;
  margin: 0 0 10px;
}

.bpc-card-desc {
  font-size: 0.88rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

.bpc-coming-soon-badge {
  display: inline-block;
  background-color: #ece5d6;
  color: #666666;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.bpc-members-cta {
  background: linear-gradient(135deg, #2d5a27 0%, #1e3d1a 100%);
  color: #ffffff;
  border-radius: 14px;
  padding: 48px 36px;
  text-align: center;
}
.bpc-members-cta h2, .bpc-members-cta .h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
}
.bpc-members-cta p {
  font-size: 1rem;
  opacity: 0.9;
  margin: 0 0 28px;
}

.bpc-cta-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #2d5a27;
  border-radius: 0 16px 0 16px;
  padding: 13px 28px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  margin: 6px;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.bpc-cta-btn:hover {
  background-color: #f5f0e8;
  color: #1e3d1a;
  transform: translateY(-2px);
}
.bpc-cta-btn--secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.bpc-cta-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.bpc-notice {
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.bpc-notice--info {
  background-color: #e8f4fd;
  border-left: 4px solid #3b82f6;
  color: #1e3a5f;
}
.bpc-notice--warning {
  background-color: #fef9e7;
  border-left: 4px solid #f59e0b;
  color: #7c4a00;
}
.bpc-notice--danger {
  background-color: #fdecea;
  border-left: 4px solid #ef4444;
  color: #7f1d1d;
}
.bpc-notice--success {
  background-color: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #14532d;
}

@media (max-width: 600px) {
  .bpc-members-cta {
    padding: 36px 24px;
  }
}
.bpc-landing-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--col-green-100, #f8f8f5);
  font-family: var(--ff-body, "Nunito Sans", sans-serif);
  color: var(--col-green-900, #143223);
}

.bpc-landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bpc-logo-link {
  display: block;
  text-decoration: none;
}

.bpc-logo {
  height: 36px;
  width: auto;
}

.bpc-logo-text {
  font-family: var(--ff-heading, "Bubblegum Sans", cursive);
  font-size: 1.3rem;
  color: var(--col-green-900, #143223);
}

.bpc-back-link {
  font-size: 0.85rem;
  color: var(--col-green-900, #143223);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity var(--transition, 200ms);
  white-space: nowrap;
}
.bpc-back-link:hover {
  opacity: 1;
}

.bpc-landing-main {
  flex: 1;
}

.bpc-hero {
  background: var(--col-green-900, #143223);
  color: white;
  padding: 64px 24px;
  text-align: center;
}

.bpc-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.bpc-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.bpc-hero-title {
  font-family: var(--ff-heading, "Bubblegum Sans", cursive);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.15;
  color: white;
  margin: 0 0 16px;
}

.bpc-hero-sub {
  font-size: 1rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.6;
}

.bpc-content-area {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}

.bpc-notice {
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.bpc-notice--info {
  background: #e8f4fd;
  border-left: 4px solid #3b82f6;
  color: #1e3a5f;
}
.bpc-notice--warning {
  background: #fef9e7;
  border-left: 4px solid #f59e0b;
  color: #7c4a00;
}
.bpc-notice--danger {
  background: #fdecea;
  border-left: 4px solid #ef4444;
  color: #7f1d1d;
}
.bpc-notice--success {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #14532d;
}

.bpc-portal-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}
@media (max-width: 767px) {
  .bpc-portal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.bpc-portal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}
.bpc-portal-divider span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--col-green-900, #143223);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .bpc-portal-divider {
    padding-top: 0;
  }
  .bpc-portal-divider span {
    width: 100%;
    height: auto;
    background: none;
    color: var(--col-muted, #6c757d);
    font-size: 0.85rem;
  }
}

.bpc-panel {
  background: white;
  border-radius: 0 24px 0 24px;
  padding: 36px 32px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.1));
}
@media (max-width: 540px) {
  .bpc-panel {
    padding: 28px 20px;
    border-radius: 0 16px 0 16px;
  }
}

.bpc-panel-header {
  text-align: center;
  margin-bottom: 28px;
}

.bpc-panel-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
}

.bpc-panel-title {
  font-family: var(--ff-heading, "Bubblegum Sans", cursive);
  font-size: 1.5rem;
  color: var(--col-green-900, #143223);
  margin: 0 0 6px;
}

.bpc-panel-sub {
  color: var(--col-muted, #6c757d);
  font-size: 0.875rem;
  margin: 0;
}

.bpc-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.bpc-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .bpc-form-row--half {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.bpc-form-group {
  margin-bottom: 18px;
}
.bpc-form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-700, 700);
  color: var(--col-green-900, #143223);
  margin-bottom: 6px;
}
.bpc-form-group input[type=text],
.bpc-form-group input[type=email],
.bpc-form-group input[type=tel],
.bpc-form-group input[type=password],
.bpc-form-group select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 2px solid var(--col-green-300, #e4e4d9);
  border-radius: 0 10px 0 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--col-green-900, #143223);
  background: white;
  transition: border-color var(--transition, 200ms), box-shadow var(--transition, 200ms);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bpc-form-group input[type=text]:focus,
.bpc-form-group input[type=email]:focus,
.bpc-form-group input[type=tel]:focus,
.bpc-form-group input[type=password]:focus,
.bpc-form-group select:focus {
  outline: none;
  border-color: var(--col-green-500, #3a5a3d);
  box-shadow: 0 0 0 3px rgba(58, 90, 61, 0.12);
}
.bpc-form-group select {
  cursor: pointer;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

.bpc-required {
  color: var(--col-accent-400, #8B3F5D);
  font-weight: var(--fw-700, 700);
}

.bpc-optional {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--col-muted, #6c757d);
}

.bpc-field-error {
  display: block;
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 4px;
  min-height: 14px;
}

.bpc-submit-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--col-accent-400, #8B3F5D);
  color: white;
  border: none;
  border-radius: 0 20px 0 20px;
  font-size: 1rem;
  font-weight: var(--fw-700, 700);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition, 200ms), transform var(--transition, 200ms);
}
.bpc-submit-btn:hover {
  background: color-mix(in srgb, var(--col-accent-400, #8B3F5D), black 15%);
  transform: translateY(-1px);
}
.bpc-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.bpc-form-message {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.bpc-form-message--success {
  background: #f0fdf4;
  border-left: 3px solid #22c55e;
  color: #14532d;
}
.bpc-form-message--error {
  background: #fdecea;
  border-left: 3px solid #ef4444;
  color: #7f1d1d;
}

.bpc-privacy-note {
  font-size: 0.75rem;
  color: var(--col-muted, #6c757d);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.5;
}

.bpc-lost-password {
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
}
.bpc-lost-password a {
  color: var(--col-muted, #6c757d);
  text-decoration: none;
}
.bpc-lost-password a:hover {
  color: var(--col-accent-400, #8B3F5D);
  text-decoration: underline;
}

#bpc-login-form p {
  margin-bottom: 16px;
}
#bpc-login-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-700, 700);
  color: var(--col-green-900, #143223);
  margin-bottom: 6px;
}
#bpc-login-form .input-text,
#bpc-login-form .bpc-wp-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 2px solid var(--col-green-300, #e4e4d9);
  border-radius: 0 10px 0 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--col-green-900, #143223);
  background: white;
  -webkit-appearance: none;
}
#bpc-login-form .input-text:focus,
#bpc-login-form .bpc-wp-input:focus {
  outline: none;
  border-color: var(--col-green-500, #3a5a3d);
  box-shadow: 0 0 0 3px rgba(58, 90, 61, 0.12);
}
#bpc-login-form .forgetmenot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--col-muted, #6c757d);
  margin-bottom: 18px;
  font-weight: 400;
}
#bpc-login-form .bpc-login-submit,
#bpc-login-form input[type=submit] {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: var(--col-green-900, #143223);
  color: white;
  border: none;
  border-radius: 0 20px 0 20px;
  font-size: 1rem;
  font-weight: var(--fw-700, 700);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition, 200ms);
}
#bpc-login-form .bpc-login-submit:hover,
#bpc-login-form input[type=submit]:hover {
  background: var(--col-green-500, #3a5a3d);
}

.bpc-benefits-strip {
  margin-top: 8px;
}

.bpc-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.bpc-benefit-card {
  background: white;
  border-radius: 0 16px 0 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.bpc-benefit-card h3, .bpc-benefit-card .h3 {
  font-size: 0.95rem;
  font-weight: var(--fw-700, 700);
  color: var(--col-green-900, #143223);
  margin: 8px 0 6px;
}
.bpc-benefit-card p {
  font-size: 0.85rem;
  color: var(--col-muted, #6c757d);
  margin: 0;
  line-height: 1.5;
}

.bpc-benefit-icon {
  display: block;
  font-size: 2rem;
}

.bpc-landing-footer {
  background: var(--col-green-900, #143223);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 24px;
  font-size: 0.85rem;
}
.bpc-landing-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.bpc-landing-footer a:hover {
  color: white;
  text-decoration: underline;
}
.bpc-landing-footer p {
  margin: 0 0 4px;
}

.bpc-footer-copy {
  font-size: 0.75rem;
  opacity: 0.6;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .bpc-hero {
    padding: 40px 16px;
  }
  .bpc-content-area {
    padding: 28px 16px;
  }
  .bpc-portal-grid {
    margin-bottom: 32px;
  }
  .bpc-benefits-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .bpc-benefit-card {
    padding: 18px 14px;
  }
}
@media (max-width: 360px) {
  .bpc-benefits-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================================
   4. RUNTIME OVERRIDES & LAYOUT FIXES
   Hand-written CSS — edit directly here, no npm step needed.
   ============================================================= */

/* Admin Bar */
.admin-bar #page {
    min-height: calc(100vh - 32px);
}


/*
 * <--- WEBSITE STYLING --->
 *
*/
html {
    margin-top: 0 !important;
    scrollbar-gutter: stable; /* reserve scrollbar space permanently — prevents layout jump when navigating between pages */
}

html, body {
    position: relative;
    padding: 0;
    height: auto !important;
    margin-top: 0 !important;
    margin: 0;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
body {
    padding-top: 0px !important;
}

#wrapper-navbar {
    margin-bottom: 0 !important;
}

#page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100%
}

#content,
.site-content {
    flex: 1 0 auto !important;
}

footer.footer {
    width: 100% !important;
    margin-top: auto !important;
}

.colophon {
    width: 100% !important;
    margin-top: auto !important;
}


.site-footer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 40px 0;
}

footer.footer, 
.colophon {
    flex-shrink: 0 !important;
}

#content.site-content,
#primary.site-main {
    overflow: visible !important;
    display: block !important;
    flex: 1 0 auto !important;
}

/* * BOBA CLEAN HEADER 
 * Resets default containers for a minimalist look 
 */
.boba-clean-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center; /* Ensures the H1 stays centered */
}

/* <------- NAVIGATION CONTROLS -----------> */

/* Header nav buttons: Contact Us + Members — keep slim */
header li.nav-button,
li.bpc-members-nav-btn {
    align-self: center;
}
header .nav-button > a.nav-link,
.bpc-members-nav-btn > a.nav-link {
    height: 18px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



.boba-hub-nav .btn-boba-hub {
    margin-bottom: 5px;
    font-size: 0.85rem; /* Slightly smaller to accommodate more tags */
    padding: 6px 15px;
}

/* Container to hide the scrollbar but keep functionality */
.tag-scroll-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* 1. The Container: Ensure vertical centering and smooth scrolling */
.boba-tag-scroll {
    display: flex !important;
    align-items: center !important; /* Perfect vertical centering */
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Smooth mobile scroll */
    scrollbar-width: thin; /* Optional: adds a subtle scrollbar for desktop visibility */
    scrollbar-color: #3d5a35 transparent; 
    padding: 10px 0;
    cursor: grab;
    user-select: none;
    height: 60px;
}

.boba-tag-scroll:active {
    cursor: grabbing;
}

/* 2. The Buttons: Fix the "Top-Heavy" text */
.boba-tag-scroll .btn-boba-hub {
    padding: 0 15px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle;
    flex-shrink: 0;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 1 !important;
    font-size: 0.85rem !important;
    text-transform: capitalize;
}

.boba-tag-scroll .btn-boba-hub::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/* 3. Desktop Trick: Enable mouse-wheel horizontal scrolling */
/* Most modern mice/trackpads do this naturally, but this ensures no clipping */
.tag-scroll-container {
    cursor: grab;
}
.tag-scroll-container:active {
    cursor: grabbing;
}

.boba-tag-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Ensure buttons don't squash and stay on one line */
.boba-tag-scroll .btn-boba-hub {
    white-space: nowrap;
    display: inline-block;
    font-size: 0.8rem;
    padding: 5px 15px;
}

/* 1. Icons for Sub-menu Items */
.dropdown-menu a[href*="basket"]::before {
    content: "\1f6d2 ";
    margin-right: 8px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.dropdown-menu a[href*="checkout"]::before {
    content: "\1f4b0\fe0f ";
    margin-right: 8px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.dropdown-menu a[href*="account"]::before {
    content: "\1F4D6 ";
    margin-right: 8px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

/* Hide the Understrap active indicator on submenu items */
.dropdown-menu .current-menu-item.nav-item::after,
.dropdown-menu .current_page_item.nav-item::after,
.dropdown-menu .nav-link::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
}

/* Ensure the parent link also doesn't show a line when the submenu is active */
.navbar-nav .current-menu-ancestor > a::after {
    display: none !important;
}

/* Ensure the Plum line is the only one visible */
#navbarr > .nav-item.current-menu-item > .nav-link {
    border: none !important;
}

/* Target the active/current page indicator — desktop only */
@media (min-width: 992px) {
  .navbar-nav .current-menu-item > .nav-link,
  .navbar-nav .active > .nav-link {
      border-bottom: 3px solid #2d5a27 !important; /* Boba Green indicator */
      margin-bottom: -3px; /* Keeps the height from jumping */
  }
  .navbar-nav .current-menu-item > .nav-link {
      border-bottom-color: #8B3F5D !important;
  }
}
/* Clean up borders ONLY on dropdowns, not the main nav level */
.dropdown-menu, 
.dropdown-item {
    border: none !important;
    box-shadow: none !important;
}
/* Unify height and alignment for all top-level main navigation links */
#navbarr > .nav-item > .nav-link {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
}

/****************************************************************************
.dropdown-menu .nav-link::before {
    font-size: 1.1rem;
    vertical-align: middle;
}
/* Remove the active/current link green accent line */
.dropdown > a::after,
.nav-menu ul li.current-menu-item > a::after,
.nav-menu ul li.current-ancestor > a::after,
.nav-menu ul li.active > a::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Also ensure no border-bottom is being used as an accent */
.nav.navbar.navbar-expapnded-lg-p-0,
.navbar-nav,
.nav-menu ul li.current-menu-item > a {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* 2. Global Dropdown Cleanup (Kills the nasty lines) */
.nav.navbar.navbar-expapnded-lg-p-0,
.dropdown,
.dropdown-menu, 
.dropdown-item, 
.navbar-nav,
.nav-link,
.nav-menu ul li ul,
.nav-menu ul li ul li a {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* 3. Dropdown Container Styling */
.dropdown-menu {
    background-color: #ffffff !important; /* Pure white background */
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
    padding: 10px 0 !important;
}

/* 4. Desktop Hover Reveal */
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block !important;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        animation: fadeIn 0.3s;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 5. Link Typography & Hover Colors */
.dropdown-menu .nav-link {
    color: #333333 !important; /* Dark grey text so it shows on white */
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    padding: 10px 20px !important;
}

.dropdown-menu .nav-link:hover {
    background-color: #f4f9f4 !important; /* Soft mint green highlight */
    color: #2d5a27 !important;           /* Deep Boba green text */
}

/* 6. Mobile Formatting */
@media (max-width: 991px) {
    .navbar-collapse .dropdown-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding-left: 1.5rem !important;
    }
    
    .navbar-collapse .dropdown-menu .nav-link {
        color: #333 !important;
        padding: 10px 0 !important;
    }
}
****************************************************************************/


/*
 * <--- HOME HERO STYLING --->
 *
*/
section.home-hero .col-md-10 {
    width: 83.33333333% !important;
}
/*
section.home-hero .container-xl {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    position: relative !important;
    z-index: 2 !important;
}
.home-hero .container,
.home-hero > .row{
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
*/
/* =============================================================
   BOBA'S HERO SLIDER - 4K & ULTRA-WIDE OPTIMIZATION
   ============================================================= */

.home-hero .bobas-native-slider {
    /* Remove fixed heights */
    height: auto !important;
    min-height: 0 !important;
    
    /* Force a consistent shape */
    aspect-ratio: 1 / 1; /* Change to 16 / 9 if you prefer widescreen */
    
    /* Constrain the maximum size so it doesn't take over the whole 4k screen */
    max-width: 800px !important; 
    margin: 0 auto !important;
    
    overflow: hidden;
    border-radius: 15px;
    background: transparent !important;
}

/* Ensure the images fill the aspect-ratio box without distorting */
.home-hero .bobas-native-slider .splide__slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* This ensures the image fills the square perfectly */
    display: block;
}

/* Fix for Splide's internal track height */
.home-hero .splide__track {
    height: 100% !important;
}

@media (max-width: 768px) {
    .home-hero .bobas-native-slider {
        max-width: 100% !important;
        aspect-ratio: 1 / 1; /* Keeps it square on mobile too */
    }
}

/*
 * <--- LATEST PRODUCTS STYLING --->
 *
*/
.latest_products {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


.latest_products,
.upcoming_events,
[data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
}

.latest_products .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.button-primary {
    background-color: #8B3F5D !important;
    border: 2px solid #8B3F5D !important;
    border-radius: 0 20px 0 20px !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
                border-radius 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}
.button-primary:hover {
    background-color: #4a5d23 !important;
    border-color: #4a5d23 !important;
    border-radius: 20px 0 20px 0 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* ── Events: compact action buttons (Add to Calendar / Directions) ── */
.btn-boba-compact {
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 0 20px 0 20px !important;
    border: 2px solid #8B3F5D !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
                border-radius 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}
.btn-boba-compact.btn-boba-reverse {
    background-color: transparent !important;
    color: #8B3F5D !important;
}
.btn-boba-compact.btn-boba-solid {
    background-color: #8B3F5D !important;
    color: #ffffff !important;
}
.btn-boba-compact:hover {
    background-color: #4a5d23 !important;
    border-color: #4a5d23 !important;
    border-radius: 20px 0 20px 0 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Ensure product details are always visible */
.product__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    border-radius: 0 30px 0 30px !important; /* The signature leaf shape */
    display: flex;
    /* flex-direction: column; */
}

/* Remove any "hidden" states that might have been there */
.product__card .product__detail {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* padding: 1.25rem; */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 20px !important;
    justify-content: space-between;
}
/* 2. Force the info block (Title + Desc) to stay at the top */
.product__info {
    flex-grow: 1; /* Allows this section to fill available space */
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

/* 3. The Magic Fix: Set a minimum height for the title area */
/* This prevents 1-line titles from shifting the description up */
.product__card-title {
    min-height: 3em; /* Adjust this: 3em usually covers 2-3 lines of text */
    display: -webkit-box !important;
    -webkit-line-clamp: 2; /* Limits title to 2 lines then adds ... */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px !important;
}

/* 4. Optional: Limit the description height as well */
.product__description {
    font-size: 0.9rem;
    color: var(--col-muted);
    min-height: 4.5em; /* Ensures description area is always the same size */
    overflow: hidden;
}

.product__card .product__detail .small {
    text-align: center !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 20px !important;
}

/* Instead of revealing text, let's make the card lift slightly on hover */
.product__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    text-decoration: none;
}

/* Ensure the title and price stand out */
.product__title-mini,
.product__card h3 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-align: inherit !important; 
    display: block !important;
    width: 100%;
}

.product__card-title {
    text-align: inherit !important; /* Forces title to follow parent alignment */
    width: 100% !important;
    display: block !important;
}
.product__price {
    font-size: 0.9rem;
    z-index: 2;
}

/* Make the "View Details" call to action look like a permanent part of the design */
.product__card .reserve {
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    margin-top: 15px;
    transition: color 0.2s ease;
}

//.product__card:hover .reserve {
//    color: var(--bs-primary); /* Or your specific Boba Green */
//}

/* Force browser to use better scaling for shop images */
.product__image-wrap img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0); /* Hardware acceleration */
}

/*
 * <--- BOBAS PLANTS HOME STYLING--->
 *
*/
.page-template-default.page-id-10 .entry-content,
.page-id-10 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Ensures no legacy floats are pulling it left */
    display: block !important;
}

.page-id-10 h1.entry-title,
.page-id-10 .entry-header,
.page-id-10 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.bobas-slider-container {
    display: grid !important;
    grid-template-areas: "stack";
    height: auto;
    aspect-ratio: 1 / 1;
    background: #f9f9f9;
    transition: opacity 0.6s ease-in-out;
}

.bobas-slider-container > * {
    grid-area: stack;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Prevent the slider from collapsing before JS kicks in */
.bobas-native-slider {
    min-height: 300px;
    background: #f4f4f4;
}

/* Ensure the Splide track takes up the full wrapper space */
.text_image__media-wrapper .splide__track {
    height: 100% !important;
}

/* Fix for the stacking issue if JS fails */
.bobas-native-slider:not(.is-initialized) .splide__list {
    display: flex;
    overflow: hidden;
}

.bobas-native-slider:not(.is-initialized) .splide__slide:not(:first-child) {
    display: none;
}


#side-cart, 
.xoo-wsc-modal, 
.elementor-menu-cart__container, 
.cart-sidebar {
    z-index: 999999 !important; 
    display: block !important;
    visibility: visible !important;
}

html, body {
    overflow-x: visible !important;
}

.cart-overlay, .xoo-wsc-opac {
    z-index: 999998 !important;
}


/*
 * <--- CONTACT FORM STYLING--->
 *
*/
.page-template-default.page-id-35 .entry-content, 
.page-id-35 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Ensures no legacy floats are pulling it left */
    display: block !important;
}

.page-id-35 h1.entry-title,
.page-id-35 .entry-header,
.page-id-35 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#boba_email.form-control.boba-input,
#boba_name.form-control.boba-input,
#boba_message.form-control.boba-input {
    border-color: #3A5A3D !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Focus States & Interactions */
.boba-input {
    border: 2px solid #f0f0f0 !important; /* Slightly thicker but lighter */
    border-radius: 12px !important;
    padding: 12px 16px !important;
    background-color: #f9f9f9;
}

.boba-input:focus {
    background-color: #fff;
    border-color: #000 !important; /* Sharp black focus */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

#boba-submit {
    background-color: #8B3F5D !important;
    color: #ffffff !important;
    padding: 12px 10px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;

    /* The Leaf Shape - forces the corners */
    border-radius: 0px 20px 0px 20px !important;
    border: none !important;
    text-decoration: none !important;

    transition: transform 0.2s, background-color 0.2s;
    letter-spacing: 0.5px;
}

#boba-submit:hover {
    transform: translateY(-2px);
    background-color: #333;
}

/* Ensure the success message doesn't shift the layout too much */
.form-status-msg {
    min-height: 50px;
    transition: all 0.3s ease;
}

@keyframes bobaShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.alert-danger {
    animation: bobaShake 0.4s ease-in-out;
    border-left: 4px solid #dc3545;
}

.alert-success {
    border-left: 4px solid #28a745;
    background-color: #f8fff9;
    color: #155724;
    font-weight: 500;
}

#boba-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/*
 * <--- BEYOND BOBA STYLING--->
 *
*/
.page-template-default.page-id-24 .entry-content,
.page-id-24 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Ensures no legacy floats are pulling it left */
    display: block !important;
}

.page-id-24 h1.entry-title,
.page-id-24 .entry-header,
.page-id-24 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*
 * <--- EVENTS STYLING--->
 *
*/
.page-template-default.page-id-20 .entry-content,
.page-id-20 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Ensures no legacy floats are pulling it left */
    display: block !important;
}

.page-id-20 h1.entry-title,
.page-id-20 .entry-header,
.page-id-20 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*
 * <--- ABOUT US STYLING--->
 *
*/
.page-template-default.page-id-26 .entry-content,
.page-id-26 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* Ensures no legacy floats are pulling it left */
    display: block !important;
}

.page-id-26 h1.entry-title,
.page-id-26 .entry-header, 
.page-id-26 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*
 * <--- SHOP STYLING--->
 *
*/
.post-type-archive-product .site-main,
.tax-product_cat .site-main {
    padding-bottom: 50px;
}

ul.products li.product {
    background: #ffffff !important;
    border-radius: 0 30px 0 30px !important; /* The signature leaf shape */
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    transition: transform 0.3s ease !important;
    border: 1px solid #f0f0f0 !important;
}

ul.products li.product:hover {
    transform: translateY(-5px) !important;
    border-color: #8da48d !important; /* Subtle green border on hover */
}

ul.products li.product .woocommerce-loop-product__title {
    font-family: inherit; /* Uses your brand font */
    color: #2d4a2d !important; /* Brand Dark Green */
    font-size: 1.25rem !important;
    margin-top: 15px !important;
}

ul.products li.product .price {
    color: #6a7d6a !important;
    font-weight: 600 !important;
}

ul.products li.product .button {
    background-color: #8da48d !important; /* Your brand green */
    color: #fff !important;
    border-radius: 0 15px 0 15px !important; /* Leaf shape */
    padding: 10px 20px !important;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
}

ul.products li.product .button:hover {
    background-color: #2d4a2d !important; /* Darker green on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

span.onsale {
    background-color: #d2b48c !important; /* Tan color */
    border-radius: 50% !important;
    min-height: 3.5em !important;
    line-height: 3.5em !important;
}

.woocommerce-result-count {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 20px;
}

/* 0. Override WooCommerce float grid — flexbox is required for equal-height rows */
ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* all cards in a row stretch to same height */
}
/* Remove WooCommerce's float clearfix pseudo-elements — they become rogue flex items */
ul.products::before,
ul.products::after {
    display: none !important;
}
ul.products li.product {
    float: none !important; /* kill WooCommerce's float: left */
}

/* 1. Standardize the Product Card Height */
ul.products li.product,
.product__card {
    display: flex !important;
    flex-direction: column !important;
    /* No height: 100% — in a flex container with height:auto, 100% resolves to auto
       and defeats align-items: stretch. Let flexbox handle equal heights. */
    justify-content: flex-start;
}

/* 2. Create the "Absolute" Image Box */
ul.products li.product .product__image-wrap,
ul.products li.product a img {
    aspect-ratio: 1 / 1 !important; /* Forces a perfect square */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* Centers image and fits it without cropping */
    background-color: #f9fbf9 !important; /* Optional: light background for empty space */
    padding: 10px; /* Gives the leaves some breathing room */
}

/* 3. The Content Area — anchor is the real flex child, not the title inside it */
ul.products li.product > a.woocommerce-LoopProduct-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* anchor fills li, pushing button to bottom */
    text-decoration: none !important;
}
.product__card .product__detail {
    flex-grow: 1 !important;
}

/* 4. The "Select Options" / "Add to Cart" Button alignment */
ul.products li.product .button,
.product__card .reserve {
    margin-top: auto !important; /* The Magic: Locks button to the absolute bottom */
    width: calc(100% - 40px) !important; /* 20px margin each side */

    /* VERTICAL CENTERING FIX */
    display: inline-flex !important;
    align-items: center !important;     /* Centers vertically */
    justify-content: center !important;  /* Centers horizontally */
    height: 45px !important;            /* Giving it a fixed height helps centering */
    line-height: 1 !important;          /* Prevents text from being pushed down/up */
    padding: 0 15px !important;         /* Horizontal padding only since height is fixed */
    
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;

}

/**
 * UNBREAKABLE BOBA PAGINATION
 * Forces Tag pages and Shop pages to look identical.
 */

/* 1. Center the container */
.custom-shop-pagination .woocommerce-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
}

/* 2. Reset the UL */
.custom-shop-pagination ul.page-numbers {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px; /* Space between boxes */
}

/* 3. Style the individual boxes (Links and Current Span) */
.custom-shop-pagination ul.page-numbers li span.page-numbers,
.custom-shop-pagination ul.page-numbers li a.page-numbers {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 10px;
    text-decoration: none !important;
    border: 1px solid #dee2e6; /* Light gray border */
    border-radius: 8px; /* Boba's rounded look */
    background-color: #ffffff;
    color: #333;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* 4. The Active / Current Page (Boba Green) */
.custom-shop-pagination ul.page-numbers li span.current {
    background-color: #3d5a35 !important; /* Your specific Green */
    color: #ffffff !important;
    border-color: #3d5a35 !important;
}

/* 5. Hover State */
.custom-shop-pagination ul.page-numbers li a:hover {
    background-color: #f1f1f1;
    border-color: #3d5a35;
    color: #3d5a35;
}

/* 6. Arrow Styling */
.custom-shop-pagination .next, .custom-shop-pagination .prev {
    font-size: 1.2rem;
}

/*
 * <--- BOBAS WOOCOMMERCE STYLING--->
 *
*/
.page-template-default.page-id-3 .entry-content,
.page-template-default.page-id-19 .entry-content,
.page-template-default.page-id-997 .entry-content,
.page-template-default.page-id-1810 .entry-content,
.page-template-default.page-id-1812 .entry-content,
.page-template-default.page-id-1814 .entry-content,
.page-template-default.page-id-1817 .entry-content,
.page-id-3 .entry-content,
.page-id-190 .entry-content,
.page-id-997 .entry-content,
.page-id-1810 .entry-content,
.page-id-1812 .entry-content,
.page-id-1814 .entry-content,
.page-id-1817 .entry-content {
    width: 83.33333333% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
}

.page-id-3 h1.entry-title,
.page-id-19 h1.entry-title,
.page-id-997 h1.entry-title,
.page-id-1810 h1.entry-title,
.page-id-1812 h1.entry-title,
.page-id-1814 h1.entry-title,
.page-id-1817 h1.entry-title,
.page-id-3 .entry-header,
.page-id-19 .entry-header,
.page-id-997 .entry-header,
.page-id-1810 .entry-header,
.page-id-1812 .entry-header,
.page-id-1814 .entry-header,
.page-id-1817 .entry-header,
.page-id-3 .page-header,
.page-id-19 .page-header,
.page-id-997 .page-header,
.page-id-1810 .page-header,
.page-id-1812 .page-header,
.page-id-1814 .page-header,
.page-id-1817 .page-header {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Add breathing room between the navigation and the product content */
.woocommerce-single-product {
    margin-top: 4rem !important;
    margin-bottom: 5rem !important;
}

/* Single product — price/stock status panel */
.summary.entry-summary > .price,
.summary.entry-summary > .stock { display: none !important; }

.bobas-status-container {
    display: block !important;
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #8B3F5D;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}
.bobas-status-container .price {
    font-size: 2.2rem !important;
    font-weight: 800;
    color: #2d4a22 !important;
    display: block !important;
}

/* Single product — related product cards */
.product__image-wrap { aspect-ratio: 1 / 1; overflow: hidden; position: relative; }
.product__image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product__detail { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.product__title-mini { font-size: 0.95rem; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; }

/* Variation description injected by JS */
.woocommerce-variation-description { margin-bottom: 15px; }

/* Variation description injected by JS is already below */

@media (max-width: 768px) {
    .woocommerce-single-product {
        margin-top: 1.5rem !important; /* Slightly smaller gap for mobile */
    }
}


.woocommerce-cart, .woocommerce-checkout, .woocommerce-account {
    width: 83.33333333% !important;
    margin: 40px auto;
    padding: 0 20px;
    font-family: sans-serif; /* Change to your theme font */
}

.wc-block-components-button:hover {
    background-color: #3e7a36 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.bobas-woocommerce-wrapper, .woocommerce-cart {
    margin: 0 auto;
    padding: 40px 20px;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
    overflow: hidden;
}

.bobas-woocommerce-wrapper button.button,
.bobas-woocommerce-wrapper a.button.wc-backward,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #8B3F5D !important;
    border: 2px solid #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important;
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;

}

.bobas-woocommerce-wrapper input#coupon_code.input-text {
    width: 200px;
}

.bobas-woocommerce-wrapper .cart-collaterals div.cart_totals.calculated_shipping {
    width: 100%;
}

.bobas-woocommerce-wrapper .woocommerce-info::before,
.bobas-woocommerce-wrapper div.cart-empty.woocommerce-info::before {
    color: var(--col-accent-400);
}

.bobas-woocommerce-wrapper div.woocommerce-form-coupon-toggle,
.bobas-woocommerce-wrapper div.cart-empty.woocommerce-info {
    border-top-color: var(--col-accent-400) !important;
}
/* Style the WooCommerce 'View Cart' success message */
.woocommerce-message .button.wc-forward {
    background-color: #2d5a27 !important; /* Boba Green */
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    float: right;
    margin-top: -5px;
}

/* Styling the WooCommerce 'Product Added' message */
.woocommerce-message {
    border-top: 3px solid #2d5a27 !important; /* Boba Green */
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 20px 20px 20px 50px !important;
    margin-bottom: 30px !important;
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    line-height: 1.5 !important;
}

/* Ensure the tick icon sits comfortably in that left padding */
.woocommerce-message::before {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Style the "Undo?" link to look like a clean text-button */
.woocommerce-message .restore-item {
    background: #8B3F5D !important; /* Plum color */
    color: #fff !important;
    border-radius: 0 20px 0 20px !important;
    padding: 20px 20px 20px 20px !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    justify-content: space-between !important;
    transition: background 0.3s ease;
}

.woocommerce-message .restore-item:hover {
    background: #2d5a27 !important; /* Boba Green */
}

/* Style the 'View Basket' button inside that banner */
.woocommerce-message .button {
    background-color: #2d5a27 !important;
    color: #fff !important;
    border-radius: 5px;
    padding: 10px 20px !important;
    transition: 0.3s;
}

.woocommerce-message .button:hover {
    background-color: #b5c4b1 !important; /* Sage Green hover */
}
/* Style the View Basket link to look like a premium button */
.boba-basket-link {
    display: inline-block;
    margin-left: 15px;
    padding: 10px 20px;
    background-color: transparent;
    color: #2d5a27; /* Boba Green */
    border: 2px solid #2d5a27;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    vertical-align: middle;
    text-decoration: none !important;
}

.boba-basket-link:hover {
    background-color: #2d5a27;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Adjust layout for mobile so buttons don't overlap */
@media (max-width: 768px) {
    .boba-basket-link {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }
}


/* Hide the success link by default unless the URL has add-to-cart */
.boba-cart-notice-wrapper {
    display: none;
    margin-top: 20px;
    clear: both;
}

.boba-cart-notice-wrapper.is-visible {
    display: block;
    animation: slideDown 0.4s ease-out;
}

.boba-success-link {
    background: #f4f9f3;
    border: 1px solid #2d5a27;
    padding: 15px;
    border-radius: 8px;
    color: #2d5a27;
    font-weight: 600;
}

.boba-basket-link, .boba-checkout-link {
    margin-left: 10px;
    text-decoration: underline;
    font-weight: 800;
    color: #2d5a27 !important;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Target both the main Add to Cart and your new custom links */
.single_add_to_cart_button, 
.boba-basket-link, 
.boba-checkout-link {
    position: relative;
    background-color: #8B3F5D !important;
    border: 2px solid #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important; /* Boba leaf shape */
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hover effect: Subtle "growing" animation */
.single_add_to_cart_button:hover, 
.boba-basket-link:hover, 
.boba-checkout-link:hover {
    background-color: #2d5a27 !important; /* Boba Green on hover */
    transform: scale(1.05);
    border-radius: 0 20px 0 20px !important; /* Boba leaf shape */
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;

}

/* Specific styling for your custom inline notice link */
.boba-inline-notice .btn {
    border-radius: 0 20px 0 20px !important; /* Boba leaf shape */
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;

}

/* Hide the default WooCommerce "Product Added" notice when it contains the View Basket button */
.woocommerce-message:has(.wc-forward) {
    display: none !important;
}

/* Alternative for older browsers if :has isn't supported */
.woocommerce-notices-wrapper:has(.button.wc-forward) {
    display: none !important;
}

/* Container for the new buttons within the LI */
.boba-card-completion-links {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
    padding-bottom: 10px;
}

/* Base style for mini leaf buttons */
.boba-mini-btn {
    font-size: 0.7rem !important;
    padding: 6px 14px !important;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border-radius: 0 20px 0 20px !important;    
}

.boba-mini-plum {
    background-color: #8B3F5D !important; /* Boba Plum */
}

.boba-mini-green {
    background-color: #2d5a27 !important; /* Boba Green */
}

.boba-mini-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
/* Center the empty cart container */
.boba-empty-cart-container {
    text-align: center;
    padding: 60px 20px;
    background: #fdfdfd;
    border-radius: 20px;
    border: 2px dashed #e0e0e0;
    margin-bottom: 30px;
}

/* Style the icon */
.boba-empty-icon {
    font-size: 80px;
    width: 80px;
    height: 80px;
    color: #8B3F5D; /* Boba Plum */
    margin-bottom: 20px;
    display: inline-block;
}

/* Style the text */
.boba-empty-title {
    color: #2d5a27; /* Boba Green */
    font-weight: 700;
    margin-bottom: 10px;
}

.boba-empty-text {
    color: #666;
    max-width: 500px;
    margin: 0 auto 30px auto;
}


/* Center the WooCommerce Return to Shop button */
.woocommerce .return-to-shop {
    text-align: center;
    margin: 3rem 0; /* Adds some breathing room */
}

/* Optional: Styling the button to match your primary theme buttons */
.woocommerce .return-to-shop a.button.wc-backward {
    padding: 12px 32px;
    border-radius: 50px; /* If you're going for the rounded look */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Style the "Return to Shop" button below our custom message */
.woocommerce-cart .return-to-shop .button {
    background-color: #8B3F5D !important;
    border-radius: 0 30px 0 30px !important; /* Soft Leaf Shape */
    padding: 15px 40px !important;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.woocommerce-cart .return-to-shop .button:hover {
    background-color: #2d5a27 !important;
    transform: translateY(-3px);
}

/* Related Products Specific Styling */
.related-products-wrapper .product__card {
    background: #fff;
    border: 1px solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
    border-radius: 8px;
    overflow: hidden;
}

.related-products-wrapper .product__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Force Image Container to be uniform */
.related-products-wrapper .product__image-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background: #f9f9f9;
}

.related-products-wrapper .product__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text Truncation Logic */
.product__title-mini {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    /* The Magic Ellipsis: */
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Limits to 1 line */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* The SOLD Banner Styling */
.sold-banner {
    background-color: #8B3F5D !important; /* Matches your Plum/Leaf button */
    color: #ffffff !important;
    padding: 10px 15px;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;
    margin-top: 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Optional: Make the variation description stand out */
.variation-short-desc {
    border-left: 3px solid #e0e0e0;
    padding-left: 15px;
    margin-bottom: 20px;
    font-style: italic;
    color: #555;
}

/* Mobile Specific Tweaks */
@media (max-width: 767px) {
    .related-products-wrapper h2 { font-size: 1.2rem; }
    .related-mini-card .product__detail { padding: 8px !important; }
    .related-mini-card .reserve { font-size: 0.7rem; }
    
    /* Center the row on small screens */
    .related-products-wrapper .row {
        justify-content: center;
    }
}

/* "View Details" Mini-Button Styling */
.related-mini-card .reserve {
    background-color: #8E4585; /* Your Plum color */
    color: #ffffff !important; /* Force white text */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 10px;
    width: 100%; /* Makes the button fill the card width for a cleaner look */
    transition: background-color 0.2s ease;
}

/* Subtle hover state */
.related-mini-card:hover .reserve {
    background-color: #72376a; /* A slightly darker plum on hover */
    color: #ffffff !important;
}

/* Ensure the detail container handles the button well */
.related-mini-card .product__detail {
    padding: 12px 10px !important;
    background-color: #ffffff;
}

/* Product Price & Stock Box */
.bobas-product-status-box {
    background: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #8E4585; /* Plum accent line */
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.03);
}

/* Price Styling */
.summary .price {
    font-size: 2rem !important;
    font-weight: 800;
    color: #2d4a22 !important; /* Deep Forest Green */
    display: block;
    margin-bottom: 0.5rem;
}

.summary .price ins {
    text-decoration: none;
}

/* Stock Message Styling */
.stock {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 50px;
}

/* In Stock - Sage Green Theme */
.stock.in-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Low Stock - Warning Theme */
.stock.low-stock {
    background-color: #fff3e0;
    color: #ef6c00;
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Hide any price that ISN'T inside our status box */
.summary.entry-summary > .price {
    display: none !important;
}

/* Ensure the one inside our box is visible */
.bobas-product-status-box .price {
    display: block !important;
}

/* GLOBAL PRODUCT CARD STYLING */
.product__card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}

/* The Unified Plum Button */
//.product__card .reserve {
//    background-color: #8E4585 !important; /* Plum */
//    color: #ffffff !important;
//    padding: 10px 15px;
//    border-radius: 4px;
//    font-size: 0.75rem;
//    font-weight: 700;
//    text-transform: uppercase;
//    letter-spacing: 1px;
//    display: block;
//    width: 100%; /* Full width of the card padding */
//    margin-top: auto; /* Pushes to bottom */
//    text-align: center;
//    transition: background-color 0.2s ease;
//}

//.product__card:hover .reserve {
//   background-color: #72376a !important; /* Slightly darker plum */
//}

/* Title Ellipsis - Applied to all mini cards */
.product__title-mini, .product__card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}

/* Mobile Consistency */
@media (max-width: 767px) {
    .product__card .product__detail {
        padding: 10px !important;
    }
    .product__card .reserve {
        padding: 8px 5px;
        font-size: 0.7rem;
    }
}

/* The Unified Boba Button Styling */
//.product__card .reserve {
//    background-color: #8B3F5D !important; /* Your specific Plum */
//    color: #ffffff !important;
//    padding: 12px 15px;
//    font-size: 0.75rem;
//    font-weight: 700;
//    text-transform: uppercase;
//    letter-spacing: 1px;
//    text-align: center;
    
    /* The Leaf Shape: Top-Right and Bottom-Left rounded */
//    border-radius: 0px 20px 0px 20px; 
    
//    width: 100%; /* Spans full width of the card */
//    margin-top: auto; /* Sticks to the bottom of the card */
//    transition: all 0.3s ease;
//}

//.product__card:hover .reserve {
//    background-color: #6e324a !important; /* Slightly darker plum */
//    border-radius: 20px 0px 20px 0px; /* Swaps the leaf direction on hover for a "flicker" effect */
//}

/* Ensure the card itself doesn't cut off the leaf corners too harshly */
.product__card {
    overflow: hidden;
    border-radius: 8px; /* Main card rounding */
}

/* Fix the Double Arrow and add internal spacing */
.variations select {
    padding: 10px 15px !important; /* This creates the left-side buffer */
    padding-right: 35px !important; /* Keeps text from hitting the arrow */
    height: auto !important;
    min-height: 48px !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-size: 1rem !important;
    
    /* Remove the browser's default arrow to stop the doubling */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* Add ONE clean custom arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important;
    background-size: 12px !important;
}

/* Fix for Firefox which sometimes ignores 'appearance: none' */
.variations select::-ms-expand {
    display: none !important;
}

/* 1. Force the Global Background Color */
/* This ensures the 'minefield' of different wrappers all use the Boba color */
main#primary,
archive,
.archive,
blog_index,
.blog_index,
blog single,
.blog single,
.wp-singular,
.page-template,
.page-template-page-templates,
.page-template-template_carbon,
.page-template-page-templates,
.template_carbon-php,
.page,
wp-singular,
.wp-singular,
.single,
.wp-theme-bobas-plants,
.theme-bobas-plants,
.page-template-template_carbon .entry-content
.plant-guide-template-default,
.post-type-archive-product #primary, 
.tax-product_cat #primary, 
.tax-product_tag #primary, 
.tax-product_shipping_class #primary,
.post-type-archive-product .site-content,
.post-type-archive-product #main,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.archive.post-type-archive-product main#primary,
body.archive.post-type-archive-product #primary.bg_col-white,
#page.site {
    display: block !important;
    background-color: var(--col-tan) !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
    min-height: 75vh !important;
    height: auto !important;
}

/* Make the product grid items look like clean cards */
.archive.woocommerce-page ul.products li.product {
    background: #ffffff !important;
    padding: 15px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(45, 90, 39, 0.05) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    transition: transform 0.3s ease;
}

.archive.woocommerce-page ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07) !important;
}

body.woocommerce-cart #page,
body.woocommerce-checkout #page,
body.woocommerce-page #page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}


/* FORCE BOBA LEAF BUTTONS */
.product__card .reserve {
    //background-color: #8B3F5D !important; 
    background-color: #8da48d !important; 
    color: #ffffff !important;
    padding: 12px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    
    /* The Leaf Shape - forces the corners */
    border-radius: 0px 20px 0px 20px !important; 
    border: none !important;
    text-decoration: none !important;
}

/* Hover swap for the leaf */
.product__card:hover .reserve {
    //background-color: #6e324a !important;
    background-color: #2d4a2d !important;
    border-radius: 20px 0px 20px 0px !important; 
}

/* /////////////////////////////// */
/* --- FIX LEAF SHAPE CLIPPING --- */
/* /////////////////////////////// */

ul.products li.product {
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

ul.products li.product .price,
ul.products li.product .button {
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 2 !important;
}

ul.products li.product img {
    margin-bottom: 20px !important;
    border-radius: 0 20px 0 20px !important; /* Optional: matches the outer leaf */
}

ul.products li.product .woocommerce-loop-product__title {
    margin-left: 20px !important;
    margin-right: 20px !important; /* Keeps it balanced */
}

/* Clamp all product loop titles to exactly 2 lines — equalises card heights */
ul.products li.product .woocommerce-loop-product__title {
    line-height: 1.5 !important;
    height: 4rem !important; /* 2 lines at 1.25rem/1.5lh = 3.75rem + breathing room */
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 0.75rem !important;
}

@media (max-width: 767px) {
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.875rem !important;
        height: 2.8rem !important; /* 2 lines at 0.875rem/1.5lh = 2.625rem + breathing room */
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}


h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--font-heading);
    background-color: transparent !important;
    background: none !important;
}

body {
    font-family: var(--font-body);
    font-weight: 400; /* Regular Nunito */
}

strong, b, .fw-bold {
    font-weight: 700; /* Bold Nunito */
}


/* 1. THE PLUM LEAF BUTTON FIX (Targeting the Link itself) */
a.btn.btn-primary.btn-lg,
html body #page .lc-tt-cta a,
html body #page .bobas-tt-cta a,
html body #page .bobas-ti-cta a,
html body #page .page_hero__cta a, page_hero__cta a,
html body #page .wpcf7-submit,
html body #page .btn-primary,
html body #page .btn {
    background-color: #8B3F5D !important;
    border: 2px solid #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important; /* Boba leaf shape */
    padding: 14px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 1b. PLUM LEAF BUTTON — HOVER STATE (must match specificity of block above) */
a.btn.btn-primary.btn-lg:hover,
html body #page .lc-tt-cta a:hover,
html body #page .bobas-tt-cta a:hover,
html body #page .bobas-ti-cta a:hover,
html body #page .page_hero__cta a:hover,
html body #page .btn-primary:hover,
html body #page .btn:hover {
    background-color: #4a5d23 !important;
    border-color: #4a5d23 !important;
    border-radius: 20px 0 20px 0 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}


/* ── Block section headings ── */
.block-title {
    font-family: var(--ff-heading);
    font-size: var(--fs-section-title);
    color: var(--col-heading);
    font-weight: var(--fw-700);
    line-height: 1.1;
    text-wrap: balance;
    margin-bottom: 0.5em;
}
/* Heading colour cascades from section text colour when no explicit override is set */
.text_col-white .block-title { color: var(--col-white); }
.text_col-black .block-title { color: var(--col-black); }
.text_col-green-900 .block-title { color: var(--col-green-900); }

/* ── Page/hero titles ── */
.page-title {
    font-family: var(--ff-heading);
    font-size: var(--fs-900);
    color: var(--col-heading);
    font-weight: var(--fw-700);
    line-height: 1.1;
    text-wrap: balance;
}

/* ── Native headings consume --col-heading ── */
h1, .h1, h2, .h2, h3, .h3 {
    color: var(--col-heading);
}

/* ── Testimonial tokens (replacing inline styles) ── */
.review-quote {
    font-size: var(--fs-400);
    line-height: 1.75;
    color: #444;
    font-style: italic;
    border: none;
    padding: 0;
    margin: 0;
}
.review-author {
    font-weight: var(--fw-700);
    color: var(--col-green-900);
    font-size: var(--fs-300);
    text-decoration: none;
}
.review-stars {
    color: var(--col-accent-400);
    font-size: var(--fs-500);
    letter-spacing: 2px;
}

/* --- Boba's Illustration Engine - Desktop Optimized --- */

.beyond_showcase, 
.page_hero,
.bobas-title-text-block {
    position: relative !important;
    overflow: hidden; /* Prevents horizontal scroll on desktop */
}

/* Universal Illustration Base */
/* Colour Classes */
.has-green-100-color,
.text--green-100 {
  color: var(--col-green-100);
}
.has-green-100-background-color,
.bg--green-100 {
  background-color: var(--col-green-100);
}

.has-green-200-color,
.text--green-200 {
  color: var(--col-green-200);
}
.has-green-200-background-color,
.bg--green-200 {
  background-color: var(--col-green-200);
}

.has-green-300-color,
.text--green-300 {
  color: var(--col-green-300);
}
.has-green-300-background-color,
.bg--green-300 {
  background-color: var(--col-green-300);
}

.has-green-400-color,
.text--green-400 {
  color: var(--col-green-400);
}
.has-green-400-background-color,
.bg--green-400 {
  background-color: var(--col-green-400);
}

.has-green-500-color,
.text--green-500 {
  color: var(--col-green-500);
}
.has-green-500-background-color,
.bg--green-500 {
  background-color: var(--col-green-500);
}

.has-green-900-color,
.text--green-900 {
  color: var(--col-green-900);
}
.has-green-900-background-color,
.bg--green-900 {
  background-color: var(--col-green-900);
}

.has-accent-400-color,
.text--accent-400 {
  color: var(--col-accent-400);
}
.has-accent-400-background-color,
.bg--accent-400 {
  background-color: var(--col-accent-400);
}

.bg-light-green { background-color: #E3E3D8 !important; }

.bg-light-green h1, 
.bg-light-green h2, 
.bg-light-green h3 { 
    color: #2d5a27; 
}

/* ILLUSTRATIONS */
.illustration-bg-1,
.illustration-bg-2,
.illustration-bg-3 {
  background-repeat: no-repeat;
  background-size: contain;
/*  z-index: 0;
  pointer-events: none;
  opacity: 0.12; */

}
.illustration-left {
  background-position: left center;
}
.illustration-left::before {
    left: -5%; /* Pulls slightly off-screen but stays visible */
    top: 50%;
    transform: translateY(-50%);
}

.illustration-right {
  background-position: right center;
}
.illustration-right::before {
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
}

.illustration-bg-1 {
  background-image: url('img/bg-1.svg');
}
.illustration-bg-1::before {
    background-image: url('img/bg-1.svg');
}

.illustration-bg-2 {
  background-image: url('img/bg-2.svg');
}
.illustration-bg-2::before {
    background-image: url('img/bg-2.svg');
}

.illustration-bg-3 {
  background-image: url('img/bg-3.svg');
}
.illustration-bg-3::before {
    background-image: url('img/bg-3.svg');
}

[class*="illustration-bg-"]::before {
    content: "";
    position: absolute;
    width: 150px;  /* Increased for desktop visibility */
    height: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0; /* Sit between background and content */
    pointer-events: none;
    opacity: 0.12;
    transition: all 0.3s ease;
}

/* Ensure the section is the 'anchor' */
.position-relative {
    position: relative !important;
}

/* Showcase Styling */
.showcase-img-card {
    position: relative;
    background: #f8f9fa;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-img-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1) !important;
}

.showcase-zoom {
    transition: transform 0.5s ease;
}

.showcase-img-card:hover .showcase-zoom {
    transform: scale(1.08);
}

.brand-item {
    transition: all 0.3s ease;
}

.brand-item:hover {
    border-color: var(--wp--preset--color--green-600) !important;
    background-color: #f0fdf4 !important; /* Very light green hint */
}

/* --- Showcase Layout Fixes --- */
.beyond_showcase {
    background-color: #fafafa; /* Light subtle contrast like your other sections */
}

.brand-card {
    min-height: 180px; /* Better vertical breathing room */
    border: 1px solid #eee !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.brand-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    border-color: #d1d1d1 !important;
}

.brand-logo {
    max-height: 55px;
    width: auto;
    margin: 0 auto;
    display: block;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brand-card:hover .brand-logo {
    filter: grayscale(0%);
    opacity: 1;
}

.cta-link {
    color: var(--wp--preset--color--green-600); /* Use your brand green --col-accent-400 is plum */
    display: inline-block;
    margin-top: 10px;
    position: relative;
}

.letter-spacing-1 {
    letter-spacing: 0.05rem;
}

/* --- Showcase Specific Styles --- */
.beyond_showcase .brand-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beyond_showcase .brand-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

.beyond_showcase .brand-item img {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.beyond_showcase .brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Matching the lead text from your Text & Image block */
.showcase__intro p {
    margin-bottom: 0;
}

.brand-card-link {
    display: block;
    height: 100%;
}

.brand-card-link:hover .brand-item {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
    border-color: var(--wp--preset--color--green-300) !important;
}

.brand-card-link .brand-item span {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(5px);
}

.brand-card-link:hover .brand-item span {
    opacity: 1;
    transform: translateY(0);
}

.brand-card-link:hover .brand-item img {
    filter: grayscale(0%) !important;
}


/* 3. PLANT GUIDE & A-Z FILTER DO NOT TOUCH */
.az-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.az-filter a {
    background-color: #3a5a3d;
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 0 10px;
    font-weight: bold;
    text-decoration: none;
}

.plant-link {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-areas: "image common" "image scientific" !important;
    gap: 0 1rem;
    padding: 15px;
    border-bottom: 1px solid #f1f1ec;
    text-decoration: none;
}
.plant-thumb { grid-area: image; width: 80px; height: 80px; object-fit: cover; border-radius: 0 12px 0 12px; } 
.plant-item {
    display: flex;
    flex-direction: column;
}
.plant-name { grid-area: common; font-weight: 700; color: #143223; }
.plant-scientific { grid-area: scientific; font-style: italic; opacity: 0.8; font-size: 0.9rem; color: #4a4a4a; }
.plant-info {
    background: #fdfdfd;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #f0f0f0; /* Very faint border */
}

.plant-info__row {
    display: flex;
    justify-content: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f9f9f9;
}

.plant-info__row:last-child {
    border-bottom: none;
}

.plant-info__title {
    font-weight: 700;
    width: 180px;
    color: #2d5a27; /* Boba Green */
    font-size: 0.9rem;
}

.plant-info__scientific em {
    font-style: italic;
    color: #666;
}
/* Ensure the main plant image shows in full without cropping */
.plant-image {
    background-color: #f9f9f9; /* Optional: light grey background for empty space */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single__image {
    width: 100% !important;
    height: auto !important; /* Forces the image to keep its natural proportions */
    object-fit: contain !important; 
    max-height: 600px; /* Adjust this to your preferred maximum height */
}

/* Styling Related Plant Cards */
.related__card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.related__card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(45, 90, 39, 0.1);
}

.related__title {
    font-size: 1rem !important;
    padding: 10px;
    text-align: center;
    color: #2d5a27;
}
/* Fix Related Plants Thumbnails */
.related__image {
    width: 100% !important;
    height: 200px !important; /* Keeps the sidebar uniform */
    object-fit: contain !important; /* Shows the whole image */
    background: #ffffff; /* Contrast for the plant shape */
    padding: 10px; /* Gives the plant some breathing room in the block */
}

.related__card {
    border: 1px solid #eee; /* Adds a subtle frame */
    transition: all 0.3s ease;
}

/* 4. BLOG GRID  */
.blog__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 2rem; }
.blog__card { background-color: transparent; padding: 0.75rem; border-radius: 0 2rem 0 2rem; box-shadow: 0 10px 15px rgba(0,0,0,0.05); }


/* Target the link inside our specific Title Text block */
.lc-tt-cta a, 
.bobas-cta a, 
.bobas-tt-cta a, 
.bobas-ti-cta a, 
page_hero__cta a,
.page_hero__cta a,
.lc-title-text-cta a,
.bobas-title-text-cta a,
.title-text-block a {
    background-color: #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important; /* The Plum Leaf */
    padding: 12px 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.lc-tt-cta a:hover,
.bobas-cta a:hover,
.bobas-tt-cta a:hover,
.bobas-ti-cta a:hover,
.page_hero__cta a:hover,
.lc-title-text-cta a:hover,
.bobas-title-text-cta a:hover,
.title-text-block a:hover {
    background-color: #4a5d23 !important;
    border-color: #4a5d23 !important;
    border-radius: 20px 0 20px 0 !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

/* 1. The Grid: 13 Columns */
.az-filter {
    display: grid !important;
    grid-template-columns: repeat(13, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto !important; /* Centered container */
    padding: 0 15px !important;
}

/* 2. The Letters */
.az-filter a:not(.show-all) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: #8B3F5D !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700;
    border-radius: 0 10px 0 10px !important; 
    font-size: 16px; 
}

/* 3. The "Show All" Button: Fixed Centering & Size */
.az-filter a.show-all {
    /* BREAK OUT OF GRID FLOW */
    grid-column: 1 / -1 !important; 
    justify-self: center !important; 
    
    /* SIZE & STYLE */
    display: inline-flex !important;
    width: 180px !important; /* Fixed desktop size */
    height: 44px !important;
    margin: 30px auto 0 auto !important; /* Forced centering via margin */
    
    background-color: #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
}
/* The "Show All" Button: Centered with Breathing Room */
.az-filter a.show-all {
    grid-column: 1 / -1 !important; 
    justify-self: center !important; 
    
    display: inline-flex !important;
    width: 180px !important; 
    height: 44px !important;
    
    /* ADDED SPACING: 30px top (from letters) and 50px bottom (from next heading) */
    margin: 30px auto 50px auto !important; 
    
    background-color: #8B3F5D !important;
    color: #ffffff !important;
    border-radius: 0 20px 0 20px !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
}

/* Ensure the next heading doesn't try to float up */
.az-filter + h1, 
.az-filter + h2, 
.az-filter + .section-title {
    margin-top: 20px !important;
    clear: both !important;
}


/* Leave the below Alone! */
.page_hero__cta {
    width: 100%;
    display: flex;
}
.align-content-center .page_hero__cta { justify-content: center; }
.align-content-right .page_hero__cta { justify-content: flex-end; }
/* Leave the above Alone! */



.page_hero {
    padding-bottom: 0 !important;
}

/* --- 1. Force the Grid Structure --- */

.page_hero__grid {
    display: grid !important;
    min-height: auto !important; 
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.page_hero .metaslider {
    margin-bottom: 0 !important;
}
.page_hero__slider {
    display: flex;
    align-items: center; /* Keeps the slider vertically centered with the text */
}

.metaslider {
    width: 100% !important;
}

/* Custom Spacing Overrides */
.page_hero.pt-0 { padding-top: 0 !important; }
.page_hero.pt-2 { padding-top: 1rem !important; }
.page_hero.pt-4 { padding-top: 3rem !important; }
.page_hero.pt-5 { padding-top: 5rem !important; }

.page_hero.pb-0 { padding-bottom: 0 !important; }
.page_hero.pb-2 { padding-bottom: 1rem !important; }
.page_hero.pb-4 { padding-bottom: 3rem !important; }
.page_hero.pb-5 { padding-bottom: 5rem !important; }

@media (min-width: 992px) {
    .page_hero__grid {
        grid-template-columns: 1fr 1fr !important; /* Side by side on desktop */
        min-height: auto !important;
        align-items: center;
    }

    .page_hero__shortcode_visual .metaslider {
        margin: 0 !important;
    }

    /* Assign Areas */
    .page_hero__content-wrapper {
        grid-area: text-col !important;
        padding-bottom: 0 !important;
    }
    .page_hero__slider          { grid-area: slide-col !important; }

    /* Layout: Text Left / Slider Right */
    .page_hero__grid.text-left {
        grid-template-areas: "text-col slide-col" !important;
    }

    /* Layout: Slider Left / Text Right */
    .page_hero__grid.text-right {
        grid-template-areas: "slide-col text-col" !important;
    }

    /* Layout: Centered */
    .page_hero__grid.centered {
        grid-template-columns: 1fr !important;
        grid-template-areas: "text-col" "slide-col" !important;
    }
}

/* --- 2. Fix the "Events" Title & Content Center --- */
.align-content-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.align-content-center .page_hero__title h1 {
    text-align: center !important;
    width: 100%;
}

.align-content-center .page_hero__cta {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Fix for the Plant Guide Grid Expansion */
.plant-link {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-areas: 
        "image common" 
        "image scientific" !important;
    align-items: center; /* Keeps things neat */
    min-height: 110px; /* Ensures consistent row height */
}

/* Ensure the span doesn't overflow its area */
.plant-name, .plant-scientific {
    display: block;
    width: 100%;
}

/* Force the alternative name to stay with the scientific name area */
.plant-alternative {
    display: block;
    font-size: 0.8rem;
    margin-top: 4px;
    line-height: 1.2;
}

.archive-pagination, 
.pagination-wrapper {
    width: 100% !important;
    clear: both !important;
    display: block !important;
    margin-top: 3rem;
}

/* --- Pagination Spanning & Styling --- */
.archive-pagination .nav-links {
    display: flex !important;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.archive-pagination .page-numbers {
    background-color: #f1f1ec;
    color: #3a5a3d;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 10px 0 10px; /* Matching your leaf/A-Z style */
    font-weight: 600;
    transition: all 0.3s ease;
}

.archive-pagination .page-numbers.current,
.archive-pagination .page-numbers:hover {
    background-color: #8B3F5D !important; /* Plum leaf color */
    color: #ffffff !important;
}

.archive-pagination .dots {
    background: transparent;
    padding: 8px 5px;
}

/* --- Boba Slider Native Integration --- */
.boba-hero-slider .splide__slide {
    height: 70vh; /* Dynamic height based on screen */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* The Overlay - matching your brand's subtle dark green/black tones */
.boba-hero-slider .splide__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(20, 50, 35, 0.7) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

/* Centered Layout Overlay */
.boba-hero-slider .justify-content-center .splide__slide::after {
    background: rgba(20, 50, 35, 0.4);
}

.slide-content {
    position: relative;
    z-index: 10;
}

/* Customize Splide Arrows to match your Plum Leaf theme */
.splide__arrow {
    background: #8B3F5D !important;
    opacity: 1 !important;
}
.splide__arrow svg { fill: #fff !important; }

.splide__pagination__page.is-active {
    background: #8B3F5D !important;
}

/* 4. MOBILE POLISH */
@media (max-width: 768px) {
    html {
        margin-top: 0 !important;
    }
    #wpadminbar {
        position: static !important;
    }

    .beyond_showcase .pe-lg-5 {
        padding-right: 0 !important;
    }

    [class*="illustration-bg-"]::before {
        width: 180px;
        height: 180px;
        opacity: 0.1;
    }
    .illustration-left::before { left: -30px; }
    .illustration-right::before { right: -30px; }

    .admin-bar #page {
        min-height: calc(100vh - 46px);
    }
    .az-filter {
        grid-template-columns: repeat(13, auto) !important;
        justify-content: center !important;
        gap: 3px !important;
    }
    .az-filter a:not(.show-all) {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        border-radius: 0 6px 0 6px !important;
    }
    .az-filter a.show-all {
        width: 140px !important; /* Slightly smaller for mobile */
        height: 36px !important;
        margin-top: 20px !important;
    }
    .woocommerce-cart, .woocommerce-checkout, .woocommerce-account {
        width: 100% !important;
        margin: 1px auto;
        padding: 0 1px;
        font-family: sans-serif; /* Change to your theme font */
    }
}


/* Center the Product Tag Archive content */
.tax-product_tag .site-main {
    padding-top: 140px !important; /* Move it below the menu */
    max-width: 1200px;
    margin: 0 auto;
}

/* Hide the "Showing the single result" and "Default sorting" on tag pages */
.tax-product_tag .woocommerce-result-count, 
.tax-product_tag .woocommerce-ordering {
    display: none !important;
}

/* Center the Title */
.tax-product_tag .page-title {
    text-align: center !important;
    color: #2d5a27;
    font-weight: 700;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Make the product grid on tag pages center-aligned if there is only 1-2 items */
.tax-product_tag ul.products {
    display: flex !important;
    justify-content: center !important;
    padding: 0;
}

.tax-product_tag ul.products li.product {
    float: none !important;
    margin: 0 auto !important;
}

/* Archive/Taxonomy pages: content width is handled by container-xl inside site-main */

/* Hide the messy sidebar/widgets on these pages */
.archive.woocommerce-page #secondary {
    display: none !important;
}


/* ============================================================
   UNIFIED BOBA SEARCH STYLING 🌴
   Targets: Plant Search, Shop Search, AWS, and Custom Forms
   ============================================================ */

/* 1. Global Search Container Fix */
.plant-search-form,
.aws-container .aws-search-form,
.shop-search-wrapper .shop-search-form,
.boba-shop-topbar__search .shop-search-form,
.boba-custom-search-form .input-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevents squishing/stacking */
    width: 100% !important;
    margin-bottom: 30px;
    gap: 0; /* Keeps input and button joined */
}

/* 2. Unified Input Field Styling */
.plant-search-form input[type="search"],
.aws-search-field,
.shop-search-wrapper .search-field,
.boba-shop-topbar__search .search-field,
.boba-custom-search-form input,
.boba-custom-search-form .form-control {
    background-color: #fcfaf3 !important; /* Boba Tan */
    border: 1px solid #d1cec0 !important;
    border-right: none !important; /* flush join with the button */
    padding: 12px 15px !important;
    border-radius: 20px 0 0 20px !important; /* Standard Leaf Left */
    flex-grow: 1 !important;
    min-width: 0; /* Prevents horizontal overflow */
    height: 42px !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    -webkit-appearance: none !important; /* Kills iOS default styling */
    appearance: none !important;
}

/* 3. Unified Button Styling (Plum) */
.plant-search-form button,
.aws-search-button,
.shop-search-wrapper .search-submit,
.boba-shop-topbar__search .search-submit,
.boba-custom-search-form button,
.btn-boba-plum {
    background-color: var(--col-accent-400) !important;
    color: #ffffff !important;
    padding: 0 25px !important;
    border: none !important;
    cursor: pointer;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 42px !important;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out !important;

    /* The Leaf Shape */
    border-radius: 0 20px 0 20px !important;

    /* Mobile Reset: Kills the Blue Button bug */
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 4. Hover State (Boba Green) */
.plant-search-form button:hover,
.aws-search-button:hover,
.shop-search-wrapper .search-submit:hover,
.boba-shop-topbar__search .search-submit:hover,
.boba-custom-search-form button:hover,
.btn-boba-plum:hover {
    background-color: #4a5d23 !important; /* Signature Green */
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 5. Search Results Page Layout */
body.search-results #page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* 6. Shop Topbar — search + quick links on one row (desktop) */
.boba-shop-topbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 20px;
}
.boba-shop-topbar__search {
    flex: 1;
    min-width: 0;
}
.boba-shop-topbar__search .shop-search-form {
    margin-bottom: 0;
}
.boba-shop-topbar__links {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
/* Quick-link buttons in the topbar: match search button height + typography */
.boba-shop-topbar .btn-boba-hub,
.boba-shop-topbar .search-submit {
    height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
}
/* Topbar: full pill input + button overlaps right end ("blends in behind") */
.boba-shop-topbar__search .search-field {
    border-radius: 20px !important;   /* full pill — right end curves */
    border-right: 1px solid #d1cec0 !important; /* restore right border (hidden under button) */
    padding-right: 40px !important;   /* prevent text running under the button */
}
.boba-shop-topbar__search .search-submit {
    margin-left: -30px !important;    /* sit over the input's right rounded end */
    position: relative !important;
    z-index: 2 !important;
}
/* Stack vertically on mobile */
@media (max-width: 767px) {
    .boba-shop-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .boba-shop-topbar__search .shop-search-form {
        height: auto;
    }
    .boba-shop-topbar__links {
        flex-wrap: wrap;
    }
    .boba-shop-topbar .btn-boba-hub {
        flex: 1 1 auto !important;
    }
}

/* 7. Mobile Specific Refinement */
@media (max-width: 782px) {
    .boba-custom-search-form,
    .shop-search-wrapper {
        padding: 0 10px;
    }

    /* Column Reordering Fix */
    .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
    }

    .wp-block-columns > .wp-block-column:nth-child(2) {
        order: -1 !important;
        margin-bottom: 1.5rem !important;
    }

    .wp-block-columns > .wp-block-column:nth-child(1) {
        order: 1 !important;
    }
}






/* DEBUGGING
#page { border: 5px solid red !important; }
#primary { border: 5px solid blue !important; }
footer { border: 5px solid green !important; }
*/

/* --- GLOBAL HUB NAVIGATION (shop topbar, cart, checkout, account pages) --- */
.boba-hub-wrapper {
    text-align: center;
    background: transparent;
    width: 100%;
    clear: both;
}
.boba-top-hub {
    margin: -10px 0 30px 0;
    padding: 0;
}
.boba-bottom-hub {
    margin: 60px 0 30px 0;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.boba-hub-title {
    font-size: 1.4rem;
    color: #2d5a27;
    margin: 0 0 15px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.boba-hub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.btn-boba-hub {
    background-color: #8B3F5D;
    color: #ffffff !important;
    padding: 12px 22px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 20px 0 20px;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
}
.btn-boba-hub:hover {
    background-color: #2d5a27;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: #fff !important;
}
.woocommerce-products-header,
.woocommerce-account .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
    margin-bottom: 5px !important;
}
@media (max-width: 600px) {
    .boba-top-hub {
        margin: -20px 0 20px 0;
    }
    .boba-hub-title {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .boba-hub-nav {
        gap: 8px;
    }
    .btn-boba-hub {
        flex: 1 1 42%;
        padding: 8px 10px;
        font-size: 0.75rem !important;
        border-radius: 0 12px 0 12px;
    }
}

/* Recent Posts block — card hover */
.recent_posts__card .transition-transform { transition: transform 0.3s ease-in-out; }
.recent_posts__card:hover .transition-transform { transform: scale(1.05); }