/* ============================================================
   GREENBUNCH — Site styles (consolidated snippet)
   ------------------------------------------------------------
   SCOPE: this file now spans more than the shop. It must load
   SITE-WIDE (not just shop/archive) for everything to apply:
     · Section 1  Beaver Builder buttons ............ global
     · Section 2  WooCommerce buttons ............... global
     · Section 3  Homepage hero flower .............. front page
     · Section 4  Variation swatches ................ single product
     · Section 5  PowerPack product cards ........... shop + carousel
     · Section 6  Grid / list view toggle ........... shop / archive
     · Section 7  Mobile filter button + flyout ..... shop / archive
     · Section 8  WP Grid Builder facet controls .... shop / archive
     · Section 9  Reduced-motion overrides .......... global

   Brand tokens (theme globals):
     --fl-global-fern        #1F7A5C   (primary green)
     --fl-global-forest      #12442F   (hover / deep green)
     --fl-global-bunch-green #37BC91   (accent green)
     --fl-global-mist        #E4F2EA   (pale green)
     --fl-global-ink         #1F1D1A   (body text)
   ============================================================ */


/* ============================================================
   1. BEAVER BUILDER BUTTONS  (.fl-button)  ·  global
   "Fun but classy" — lift + deepen + soft sheen sweep.
   ============================================================ */

.fl-button-wrap a.fl-button,
.fl-button-wrap a.fl-button:visited {
  position: relative;
  overflow: hidden;                 /* clips the sheen sweep */
  border-radius: 30px;              /* pill */
  background: var(--fl-global-fern);
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  transition:
    transform .28s cubic-bezier(.2,.7,.3,1),
    background-color .28s ease,
    box-shadow .28s ease;
  will-change: transform;
}

/* Inner label + icon sit above the sheen */
.fl-button-wrap a.fl-button > * { position: relative; z-index: 2; }

/* Icon (Font Awesome) */
.fl-button-wrap a.fl-button i { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.fl-button-icon { font-size: 12px !important; }

/* Hover — lift + deepen + soft forest-tinted shadow */
.fl-button-wrap a.fl-button:hover,
.fl-button-wrap a.fl-button:focus-visible {
  background: var(--fl-global-forest);
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px -6px rgba(18, 68, 47, .45),
    0 2px 4px rgba(18, 68, 47, .18);
  color: #fff;
  text-decoration: none !important;
}

/* Sheen sweep */
.fl-button-wrap a.fl-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(228, 242, 234, .35) 50%,   /* mist, translucent */
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.fl-button-wrap a.fl-button:hover::before { transform: translateX(120%); }
.fl-button-wrap a.fl-button:hover i { transform: translateX(3px); }

/* Pressed — settle back down */
.fl-button-wrap a.fl-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(18, 68, 47, .4);
}

/* Keyboard focus ring */
.fl-button-wrap a.fl-button:focus-visible {
  outline: 2px solid var(--fl-global-bunch-green);
  outline-offset: 3px;
}

/* Ghost / outline variant — add class "gb-btn-ghost" */
.fl-button-wrap a.fl-button.gb-btn-ghost,
.fl-button-wrap a.fl-button.gb-btn-ghost:visited {
  background: transparent;
  color: var(--fl-global-fern);
  box-shadow: inset 0 0 0 1.5px var(--fl-global-fern);
}
.fl-button-wrap a.fl-button.gb-btn-ghost:hover {
  background: var(--fl-global-fern);
  color: #fff;
  box-shadow:
    inset 0 0 0 1.5px var(--fl-global-fern),
    0 8px 18px -6px rgba(31, 122, 92, .45);
}


/* ============================================================
   2. WOOCOMMERCE BUTTONS  ·  global
   Match the fl-button language: solid fern → forest on hover.
   Covers product, cart, checkout and Woo block buttons.
   Typography/radius pulled from the BB GLOBAL BUTTON VARS (with the
   current live values as fallbacks: Lato / 400 / 12px / 1.2px /
   UPPERCASE / square) so every Woo button matches the fl-buttons and
   follows automatically if the global button style changes again.
   (Ilana, Jul 2026 — Lato + uppercase everywhere, no border radius) */

.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .checkout-button,
.woocommerce-page .checkout-button,
.woocommerce #place_order,
.woocommerce-page #place_order,
.woocommerce .added_to_cart,
.wc-block-components-button,
.wc-block-cart__submit-button {
  background-color: var(--fl-global-fern) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;           /* square, matches fl-buttons */
  font-family: var(--fl-global-button-font-family, Lato, sans-serif) !important;
  font-weight: var(--fl-global-button-font-weight, 400) !important;
  font-size: var(--fl-global-button-font-size, 12px) !important;
  letter-spacing: var(--fl-global-button-letter-spacing, 1.2px) !important;
  text-transform: var(--fl-global-button-text-transform, uppercase) !important;
  padding: 12px 24px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .added_to_cart:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
  background-color: var(--fl-global-forest) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(18, 68, 47, .45) !important;
}

/* Disabled (e.g. Add to cart before a variation is chosen) */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce .single_add_to_cart_button.disabled {
  background-color: #9cc2b5 !important;   /* muted fern */
  color: #fff !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Single-product "Add to cart" — match the brand fl-button exactly
   (8px radius, regular weight, same padding/tracking), not the pill.
   Extra selectors raise specificity over the Beaver Builder Woo
   Cart Button module so the look matches on publish, not just in builder. */
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt,
.fl-module-fl-woo-cart-button .single_add_to_cart_button,
.fl-module-content .single_add_to_cart_button,
body .woocommerce div.product form.cart .single_add_to_cart_button {
  /* Match the Beaver Builder global FL button exactly. The theme skin styles
     Woo buttons at higher specificity than BB's button rule, so the
     add-to-cart wouldn't follow the FL buttons without these. Typography now
     reads the BB GLOBAL BUTTON VARS (fallbacks = live values Jul 2026:
     Lato / 12px / 400 / UPPERCASE / 1.2px / square) so it tracks any future
     global button change automatically. (Ilana, Jul 2026) */
  border-radius: 0 !important;
  font-family: var(--fl-global-button-font-family, Lato, sans-serif) !important;
  font-size: var(--fl-global-button-font-size, 12px) !important;
  font-weight: var(--fl-global-button-font-weight, 400) !important;
  text-transform: var(--fl-global-button-text-transform, uppercase) !important;
  letter-spacing: var(--fl-global-button-letter-spacing, 1.2px) !important;
  padding: 12px 24px !important;
  background-color: var(--fl-global-fern, #1F7A5C) !important;
  color: #fff !important;
  border: 0 !important;
}


/* ============================================================
   3. HOMEPAGE — hero / main banner
   Intentionally left empty: all banner CSS removed (Ilana, Jun 2026)
   so the hero row is controlled entirely from Beaver Builder.
   Previous rules (flower overlay + content-wrap overflow/positioning)
   are preserved in shop.css.bak-* if they ever need restoring.
   ============================================================ */


/* ============================================================
   4. SINGLE PRODUCT — variation swatches  (.gb-swatch)
   - no card border / green fill (that came from the global
     fl-button styling bleeding onto the <button> swatches)
   - keep the image + rounded corners
   - labels as body text (fern when selected)
   - collapse the Woo variations table so the row sits flush left
   - hover: lift + soft shadow
   ============================================================ */

.woocommerce table.variations,
.woocommerce table.variations tbody,
.woocommerce table.variations tr,
.woocommerce table.variations th.label,
.woocommerce table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.woocommerce table.variations th.label { margin-bottom: 8px; }

.gb-swatches { gap: 18px; margin: 8px 0 4px; }

.gb-swatches .gb-swatch {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease;
}
.gb-swatches .gb-swatch__img {
  display: block;
  background: #FBFAF7 !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow .2s ease;
}
.gb-swatches .gb-swatch__img img { display: block; border-radius: 10px; }

.gb-swatches .gb-swatch__label {
  display: block;
  margin: 0;
  background: transparent !important;
  color: var(--fl-global-ink, #1F1D1A) !important;
  padding: 6px 4px 0 !important;
  text-align: center;
}

.gb-swatches .gb-swatch:hover { transform: translateY(-4px); }
.gb-swatches .gb-swatch:hover .gb-swatch__img { box-shadow: 0 8px 20px rgba(20, 18, 16, .12); }

/* Selected — subtle fern ring (no full border) + fern label */
.gb-swatches .gb-swatch.is-active .gb-swatch__img { box-shadow: 0 0 0 2px var(--fl-global-fern, #1F7A5C) !important; }
.gb-swatches .gb-swatch.is-active .gb-swatch__label {
  color: var(--fl-global-fern, #1F7A5C) !important;
}

/* Tighten the attribute selector spacing.
   - smaller margins around the variations table
   - lift the "Clear" (reset_variations) link out of flow so it stops
     reserving an empty row between the label and the swatches */
.woocommerce div.product form.variations_form { margin-top: 0 !important; }
.woocommerce table.variations { position: relative; margin: 0 0 12px !important; }
.woocommerce table.variations th.label { margin-bottom: 6px !important; text-align: left !important; }
.woocommerce table.variations td.value { padding-bottom: 0 !important; }
.gb-swatches { gap: 12px; margin: 4px 0 2px; }
.woocommerce table.variations .reset_variations {
  position: absolute; top: 2px; right: 0;
  margin: 0 !important; padding: 0 !important;
  font-size: 13px; line-height: 1.4;
}


/* ============================================================
   5. SHOP / CAROUSEL — PowerPack product cards
   .pp-content-post is shared by the shop grid
   (.pp-content-grid-post) and the home carousel
   (.pp-content-carousel-post), so this styles both.
   ============================================================ */

.pp-content-post {
  --pg-radius: 0px;        /* square image tiles per client (was 16px) */
  --pg-ink: #1c1b1a;
  --pg-muted: #8a8784;
  --pg-sale: #c0392b;
  --pg-shadow: 0 10px 30px rgba(20,18,16,.10);
  --pg-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Image frame ---------- */
.pp-content-grid-post-image.pg-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--pg-radius);
  overflow: hidden;
  background: #f3f1ee;
  box-shadow: none;
  transition: transform .4s var(--pg-ease);
}
/* Hover: keep the gentle lift, NO shadow (client, 2 Jul 2026) */
.pp-content-post:hover .pg-media {
  transform: translateY(-4px);
}

/* ---------- Gallery hover image swap (no slide) ----------
   Frames are stacked; the primary image shows by default and crossfades
   to the secondary image on hover. No horizontal movement (client request). */
.pg-media .pg-strip-link { position: absolute; inset: 0; display: block; }
.pg-media .pg-strip { position: absolute; inset: 0; }
.pg-media .pg-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  opacity: 0;
  transition: opacity .35s var(--pg-ease);
}
.pg-media .pg-strip img:first-child { opacity: 1; }            /* primary image */
.pp-content-post:hover .pg-media .pg-strip img:first-child { opacity: 0; }
.pp-content-post:hover .pg-media .pg-strip img:nth-child(2) { opacity: 1; }
/* single-image products: nothing to swap to — keep the image visible */
.pg-media .pg-strip img:only-child { opacity: 1 !important; }

/* ---------- Sale flash (Woo .onsale) ---------- */
.pg-media .onsale {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  margin: 0; min-width: 0; min-height: 0; line-height: 1;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; color: #fff; background: var(--pg-sale);
}

/* ---------- Out of stock (Woo .outofstock) ----------
   The crossfade rules above set img:only-child / :first-child opacity:1
   (one with !important), which was cancelling the washed-out look on
   single-image OOS products. Re-assert the dimming with !important so
   "Back soon" products stay washed out in both grid and carousel, and
   don't reveal a pristine second image on hover. */
.pp-content-post.outofstock .pg-media .pg-strip img,
.pp-content-post.outofstock .pg-media .pg-strip img:first-child,
.pp-content-post.outofstock .pg-media .pg-strip img:only-child { opacity: .45 !important; filter: grayscale(.6); }
.pp-content-post.outofstock:hover .pg-media .pg-strip img:first-child { opacity: .45 !important; }
.pp-content-post.outofstock .pg-media .pg-strip img:nth-child(2) { opacity: 0 !important; }
.pp-content-post.outofstock .pg-media { cursor: not-allowed; }
.pp-content-post.outofstock .pg-media::after {
  content: "Back soon";
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; color: #5b5854;
  background: rgba(255,255,255,.82); backdrop-filter: blur(2px);
}
.pp-content-post.outofstock .pp-content-grid-post-title,
.pp-content-post.outofstock .pp-content-grid-post-price { color: var(--pg-muted); }

/* ---------- Bestseller badge (deal taxonomy term) ----------
   Matches the "Back soon" badge shape + position (top-right pill) but in
   brand green, per client. The deal-* class is emitted by post_class(). */
.pp-content-post.deal-bestsellers .pg-media::before,
.pp-content-post.deal-bestseller  .pg-media::before {
  content: "Bestseller";
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  background: var(--fl-global-fern, #1F7A5C); color: #fff;
  box-shadow: 0 1px 3px rgba(20, 18, 16, .18);
  pointer-events: none;
}

/* ---------- Title + price (centred under the image) ---------- */
.pp-content-grid-post-text { padding: 14px 2px 0; text-align: center; }
.pp-content-grid-post-title { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
.pp-content-grid-post-title a { color: inherit; text-decoration: none; }
.pp-content-grid-post-title a:hover { text-decoration: underline; }
/* Price sits lighter (grey) than the black title — client, 2 Jul 2026 */
.pp-content-grid-post-price .price {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 13px !important; color: var(--fl-global-slate, #6B675F);
}
.pp-content-grid-post-price .price .amount,
.pp-content-grid-post-price .price bdi,
.pp-content-grid-post-price .price ins { color: var(--fl-global-slate, #6B675F); }
.pp-content-grid-post-price .price .amount,
.pp-content-grid-post-price .price ins,
.pp-content-grid-post-price .price del { font-size: 13px !important; }
.pp-content-grid-post-price .price ins { text-decoration: none; }
.pp-content-grid-post-price .price del { color: var(--pg-muted); opacity: 1; }
.pp-content-grid-post-price .price del .amount { text-decoration: line-through; }

/* short description — hidden in grid view, shown only in list view */
.pp-content-grid-post-desc { display: none; }


/* ============================================================
   6. SHOP — grid / list view toggle  (.pg-view-btn → .pg-view--list)
   ============================================================ */

.pg-view-toggle {
  display: flex; justify-content: flex-start; gap: 16px; padding: 0; margin: 0 0 22px;
  border: 0; background: none;
}
@media (max-width: 768px) { .pg-view-toggle { justify-content: flex-end; margin-bottom: 0; } }

/* !important resets so the global button styling can't reach the toggle */
.pg-view-toggle .pg-view-btn {
  display: inline-flex !important; align-items: center; gap: 8px;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; outline: 0 !important;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; padding: 0 !important; margin: 0 !important;
  min-height: 0 !important; line-height: 1.3;
  font: inherit; font-size: 15px;
  color: var(--fl-global-ink) !important;
}
.pg-view-toggle .pg-view-btn:hover,
.pg-view-toggle .pg-view-btn:focus { background: none !important; color: var(--fl-global-ink) !important; }
.pg-view-toggle .pg-view-btn .fa {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 13px; line-height: 1;
  background: var(--fl-global-mist) !important; color: var(--fl-global-fern) !important;
  transition: background .2s, color .2s;
}
.pg-view-toggle .pg-view-label { color: var(--fl-global-ink) !important; }
.pg-view-toggle .pg-view-btn:hover .fa,
.pg-view-toggle .pg-view-btn.is-active .fa { background: var(--fl-global-fern) !important; color: #fff !important; }

/* ---- list view: override the CSS grid into stacked rows ---- */
.pg-view--list .pp-content-post-grid {
  display: block !important;
  grid-template-columns: none !important;
}
/* kill PowerPack's per-item gutter padding (the "big gap on the left") */
.pg-view--list .pp-content-posts,
.pg-view--list .pp-content-post-grid { padding-left: 0 !important; padding-right: 0 !important; }
/* hide injected schema <meta> / empty wrapper divs so only image + text are flex items */
.pg-view--list .pp-content-grid-post > *:not(.pp-content-grid-post-image):not(.pp-content-grid-post-text) {
  display: none !important;
}
.pg-view--list .pp-content-grid-post {
  display: flex !important;
  align-items: center;
  gap: 24px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid #ececea;
}
.pg-view--list .pp-content-grid-post:first-child { border-top: 1px solid #ececea; }
.pg-view--list .pp-content-post:hover .pg-media { transform: none; }
.pg-view--list .pp-content-grid-post-image.pg-media { flex: 0 0 120px; width: 120px; aspect-ratio: 1 / 1; }
.pg-view--list .pp-content-post:hover .pg-media .pg-strip { animation: none !important; }
.pg-view--list .pp-content-grid-post-text { flex: 1 1 auto; padding: 0; text-align: left; }
.pg-view--list .pp-content-grid-post-title { font-size: 17px; }
.pg-view--list .pp-content-grid-post-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pg-muted);
}
.pg-view--list .pp-content-grid-post-desc p { margin: 0; }
@media (max-width: 480px) {
  .pg-view--list .pp-content-grid-post-image.pg-media { flex-basis: 88px; width: 88px; }
}


/* ============================================================
   7. SHOP — mobile "Filter Results" button + flyout panel
   JS toggles .is-open on .mobile-filter-toggle (icon swap)
   and .open on #mobile-filters (slide-in).
   ============================================================ */

.mobile-filter-toggle { text-align: left; margin: 0 !important; line-height: 1; }
.mobile-filter-toggle a.fl-button,
.mobile-filter-toggle .fl-button {
  display: inline-flex !important; align-items: center; gap: 8px;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; outline: 0 !important;
  padding: 0 !important; min-height: 0 !important; line-height: 1 !important;
  font: inherit; font-size: 15px !important;
  color: var(--fl-global-ink) !important; text-decoration: none !important;
}
.mobile-filter-toggle .fl-button i,
.mobile-filter-toggle .toggle-icon-on,
.mobile-filter-toggle .toggle-icon-off {
  align-items: center; justify-content: center;
  width: 28px !important; height: 28px !important; border-radius: 8px !important;
  font-size: 13px !important; line-height: 1 !important;
  background: var(--fl-global-mist) !important; color: var(--fl-global-fern) !important;
  transition: background .2s, color .2s;
}
/* The markup ships fa-toggle-* icons, which don't match the grid/list
   icons — force a filter glyph (and an xmark when the panel is open). */
.mobile-filter-toggle .toggle-icon-off::before { content: "\f0b0" !important; font-family: "Font Awesome 7 Pro" !important; font-weight: 900 !important; }
.mobile-filter-toggle .toggle-icon-on::before  { content: "\f00d" !important; font-family: "Font Awesome 7 Pro" !important; font-weight: 900 !important; }
.mobile-filter-toggle .fl-button:hover i { background: var(--fl-global-fern) !important; color: #fff !important; }
/* icon swap */
.mobile-filter-toggle .toggle-icon-on { display: none; }
.mobile-filter-toggle .toggle-icon-off { display: inline-flex; }
.mobile-filter-toggle.is-open .toggle-icon-on { display: inline-flex; }
.mobile-filter-toggle.is-open .toggle-icon-off { display: none; }

/* flyout close button */
.mobile-filters-close {
  display: none;                 /* only shown inside the mobile flyout */
  position: sticky; top: 12px; z-index: 1;
  margin: 12px 12px 0 auto;
  align-items: center; justify-content: center; gap: 12px;
  width: auto; height: auto; min-width: 0;
  padding: 8px 14px 8px 18px !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
  border-radius: 99px !important;
  background: var(--fl-global-mist) !important;
  color: var(--fl-global-fern) !important;
  font-size: 28px !important; line-height: 1; cursor: pointer;   /* the × cross, enlarged */
  transition: background .2s, color .2s;
}
/* label sits to the left of the × */
.mobile-filters-close::before {
  content: "Close and show results";
  font-size: 14px !important; font-weight: 600; letter-spacing: .01em;
}
#mobile-filters .mobile-filters-close:hover { background: var(--fl-global-fern) !important; color: #fff !important; }

@media (max-width: 768px) {
  #mobile-filters {
    position: fixed; top: 0; left: -100%;
    width: 85% !important; max-width: none !important; height: 100%;
    background: #fff; z-index: 9999;
    overflow-y: auto;
    transition: left .3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,.15);
  }
  #mobile-filters.open { left: 0; }
  .mobile-filter-toggle { position: static; }
  #mobile-filters .mobile-filters-close { display: flex; }
}


/* ============================================================
   8. SHOP — WP Grid Builder facet controls
   Reset/clear buttons matched to the "Load More" button.
   ============================================================ */

.wpgb-facet .wpgb-button,
.wpgb-facet .wpgb-reset,
.wpgb-facet .wpgb-clear-button,
.wpgb-facet .wpgb-range-clear {
  background: #fbfaf7 !important;
  color: var(--fl-global-ink, #1f1d1a) !important;
  border: 1px solid #f0eadd !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  transition: background .2s, border-color .2s, color .2s;
}
.wpgb-facet .wpgb-button:hover,
.wpgb-facet .wpgb-reset:hover,
.wpgb-facet .wpgb-clear-button:hover,
.wpgb-facet .wpgb-range-clear:hover {
  background: #f3f1ee !important;
  border-color: #e3ddcf !important;
  color: var(--fl-global-ink, #1f1d1a) !important;
}
/* facet spacing */
.wpgb-facet > fieldset:last-child { margin-bottom: 20px !important; }
.wpgb-facet-title { padding-bottom: 10px !important; }


/* ============================================================
   9. REDUCED MOTION  ·  global
   Honour users who prefer less motion.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Beaver Builder buttons */
  .fl-button-wrap a.fl-button,
  .fl-button-wrap a.fl-button i,
  .fl-button-wrap a.fl-button::before { transition: background-color .2s ease; }
  .fl-button-wrap a.fl-button:hover { transform: none; }
  .fl-button-wrap a.fl-button:hover::before { transform: translateX(-120%); }
  .fl-button-wrap a.fl-button:hover i { transform: none; }

  /* Product cards */
  .pp-content-post:hover .pg-media .pg-strip { animation: none; }
  .pg-media, .pg-media .pg-strip img { transition: none; }
}


/* ============================================================
   10. PRODUCT — "Complete a gift" + "Add a Gift Card" carousels
   (.add-on-grid and .card-add-on-grid — both styled identically;
   Ilana 7 Jul 2026)
   PowerPack Owl carousel of compact product cards (desktop + mobile):
   a paper card with a border like the attribute swatches, centred
   content, image on top, title + price, and a compact add-to-cart
   pinned to the bottom.
   ============================================================ */

/* Card — image flush to the edges, the "Add" button overlaid on the
   image bottom. CSS grid overlaps the image + cart in one cell without
   touching the markup; title + price sit in the row below. */
:is(.add-on-grid, .card-add-on-grid) .pp-content-carousel-post {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-areas: "media" "text";
  grid-template-rows: auto 1fr;
  background: var(--fl-global-paper, #FBFAF7);
  border: 1px solid var(--fl-global-stone, #DAD7CF);
  border-radius: 0;          /* square corners per client */
  overflow: hidden;
  padding: 0 !important;
  text-align: center !important;
  height: 100%;
}
:is(.add-on-grid, .card-add-on-grid) .pp-content-carousel-post > meta,
:is(.add-on-grid, .card-add-on-grid) .pp-content-carousel-post > link { display: none; }

/* Image — flush, square, fills the media cell */
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-image {
  grid-area: media;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-image a { display: block; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}

/* Title + price — below the image, just a little padding */
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-text { grid-area: text; width: 100%; padding: 6px 13px 9px; text-align: center; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-title { margin: 0 0 1px; padding: 0; text-align: center; font-size: 13px; line-height: 1.25; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-title a { color: var(--fl-global-forest, #12442F); text-decoration: none; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-title a:hover { color: var(--fl-global-fern, #1F7A5C); text-decoration: none !important; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-price { text-align: center; margin: 0; font-size: 13px; }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-price,
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-price .woocommerce-Price-amount,
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-price bdi { color: var(--fl-global-slate, #6B675F); }
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-price del { opacity: .6; margin-right: 6px; }

/* "Add" button — thin solid-green pill sitting on the image bottom */
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart {
  grid-area: media;
  align-self: end;
  justify-self: center;
  z-index: 3;
  margin: 0 0 8px;
  width: auto;
}
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .fl-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 16px !important;
  font-size: 0 !important;                 /* hide the original "Add to cart" label */
  letter-spacing: 0 !important;            /* the hidden label kept ~13px of letter-spacing
                                              width even at font-size:0, leaving a phantom
                                              gap to the right of "Add" — zero it out. The
                                              ::before "Add" sets its own tracking below. */
  background: var(--fl-global-fern, #1F7A5C) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(18, 68, 47, .25);
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .2s ease;
}
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .fl-button::before {
  content: "Add";
  font-size: 12px; letter-spacing: .02em;
}
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .fl-button:hover { background: var(--fl-global-forest, #12442F) !important; }
/* Added state — tick + "Added" (WooCommerce adds .added after ajax) */
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .fl-button.added::before,
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .fl-button.gb-added::before { content: "\2713 Added"; }
/* Hide the "View cart" link Woo injects next to the button */
:is(.add-on-grid, .card-add-on-grid) .pp-content-grid-post-cart .added_to_cart { display: none !important; }


/* ============================================================
   11. SINGLE PRODUCT — out-of-stock treatment + price
   ============================================================ */

/* Square the product-gallery images (the <img> carried a 10px radius);
   matches the squared product tiles elsewhere on the site (Ilana, Jun 2026). */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 0 !important;
}

/* Greyed gallery + "Product back soon" badge, mirroring the shop grid.
   div.product gets the .outofstock class from post_class(). */
.woocommerce div.product.outofstock .woocommerce-product-gallery { position: relative; }
.woocommerce div.product.outofstock .woocommerce-product-gallery img {
  filter: grayscale(.5); opacity: .6;
}
.woocommerce div.product.outofstock .woocommerce-product-gallery::after {
  content: "Product back soon";
  position: absolute; top: 16px; left: 16px; z-index: 5;
  background: rgba(255,255,255,.92); color: #5b5854;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(20,18,16,.18); pointer-events: none;
}

/* Utility — hide any Beaver Builder row/module on out-of-stock products.
   Add the class "gb-hide-oos" to the section in Beaver Builder; the body
   class gb-product-oos is added by gb-shop-functions.php. */
body.gb-product-oos .gb-hide-oos { display: none !important; }

/* Hide the in-stock quantity line ("X in stock") site-wide — stock is kept
   deliberately low online (client). The PHP filter blanks the text; this
   removes the empty element so it leaves no gap. "Back soon" (OOS) stays. */
.woocommerce p.stock.in-stock,
.woocommerce .stock.in-stock { display: none !important; }

/* Single product price — ONLY in the title section (module class
   .product-title), so related/add-on grid prices are left alone. */
.product-title .price,
.product-title .price *,
.product-title .woocommerce-Price-amount,
.product-title .woocommerce-Price-amount bdi {
  color: #666666 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

/* ============================================================
   11. PRODUCT CAROUSEL — Owl nav arrows (.pp-content-grid carousels)
   Round, borderless, soft drop shadow. Hidden by default and
   revealed only while hovering the carousel (Ilana, Jun 2026).
   ============================================================ */
.pp-content-posts .owl-nav.pp-carousel-nav button.owl-prev,
.pp-content-posts .owl-nav.pp-carousel-nav button.owl-next {
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--fl-global-forest, #12442F) !important;
  box-shadow: 0 4px 14px rgba(20,18,16,.20) !important;
  transition: opacity .25s var(--pg-ease), visibility .25s var(--pg-ease),
              box-shadow .2s var(--pg-ease), transform .15s var(--pg-ease);
}
.pp-content-posts .owl-nav.pp-carousel-nav button.owl-prev:hover,
.pp-content-posts .owl-nav.pp-carousel-nav button.owl-next:hover {
  box-shadow: 0 6px 20px rgba(20,18,16,.28) !important;
}
/* Reveal on carousel hover only where hover is supported (desktop);
   touch devices have no hover, so leave the arrows visible there. */
@media (hover: hover) {
  .pp-content-posts .owl-nav.pp-carousel-nav button.owl-prev,
  .pp-content-posts .owl-nav.pp-carousel-nav button.owl-next {
    opacity: 0;
    visibility: hidden;
  }
  .pp-content-posts:hover .owl-nav.pp-carousel-nav button.owl-prev,
  .pp-content-posts:hover .owl-nav.pp-carousel-nav button.owl-next {
    opacity: 1;
    visibility: visible;
  }
  /* Never reveal a disabled (start/end) arrow on hover */
  .pp-content-posts:hover .owl-nav.pp-carousel-nav button.owl-prev.disabled,
  .pp-content-posts:hover .owl-nav.pp-carousel-nav button.owl-next.disabled {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* ============================================================
   12. HOMEPAGE CAROUSELS — full-width, image flush to heading
   Every PowerPack carousel post carries a ~31px L/R margin (the
   inter-card gutter), so the leftmost card's image sat ~31px to
   the RIGHT of the section heading. Pull the owl clip window
   (.owl-carousel, overflow:hidden) left by that gutter so the
   leftmost image lines up under the heading, and widen it so the
   track also reaches the content's right edge — a true full-width
   carousel. Robust to owl's looping/clones (we move the clip
   window, not individual cards — no reflow).
   Scoped to body.home so it applies to ALL homepage carousels
   (Hampers, Plants, and any added later) but never to the
   product-page "Complete a gift" add-on grid. (Ilana, Jun 2026)
   ============================================================ */
body.home .pp-content-posts .pp-content-post.pp-content-carousel-post {
  margin-left: 31px !important;
  margin-right: 31px !important;
}
/* Left edge: image meets the heading at every width (no overflow) */
body.home .pp-content-posts .owl-carousel {
  margin-left: -31px !important;
  width: calc(100% + 31px) !important;
}
/* Wide screens only: extend the track past the right content edge
   (into the page gutter) so the next card peeks in — full-width feel.
   Gated at 1200px so it never spills past the viewport on tablet/mobile. */
@media (min-width: 1200px) {
  body.home .pp-content-posts .owl-carousel {
    width: calc(100% + 62px) !important;
  }
}


/* ============================================================
   13. HOMEPAGE — Trustindex Google Reviews widget (Ilana, 7 Jul 2026)
   Restyle the third-party widget (layout 13 "slider", drop-shadow
   preset) to match the site: paper cards with 1px stone borders and
   square corners (like the product/mega cards), theme typography via
   font-family:inherit (no hardcoded fonts), forest/slate text, and the
   "Write a review" link styled from the BB global button vars.
   Selector .ti-widget.ti-widget.ti-widget.ti-widget is repeated to out-rank the preset's !important
   rules. Google stars + verified badge left untouched (trust marks).
   ============================================================ */

.ti-widget.ti-widget.ti-widget.ti-widget, .ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget *:not(img) { font-family: inherit !important; }

.ti-widget.ti-widget.ti-widget.ti-widget .ti-review-item .ti-inner {
  background: var(--fl-global-paper, #FBFAF7) !important;
  border: 1px solid var(--fl-global-stone, #DAD7CF) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ti-widget.ti-widget.ti-widget.ti-widget .ti-name { color: var(--fl-global-forest, #12442F) !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-date { color: var(--fl-global-slate, #6B675F) !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-review-text-container { color: var(--fl-global-slate, #6B675F) !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-read-more { color: var(--fl-global-fern, #1F7A5C) !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-profile-details { color: var(--fl-global-slate, #6B675F) !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-profile-details .ti-name { color: var(--fl-global-forest, #12442F) !important; }

/* "Write a review" — match the live BB global button (reads the vars,
   so future global button changes propagate; same approach as §2). */
.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget a.ti-header-write-btn {
  background: var(--fl-global-button-background, #1F7A5C) !important;
  color: var(--fl-global-button-color, #fff) !important;
  border: 1px solid var(--fl-global-button-border-color, #37BC91) !important;
  border-radius: 0 !important;
  font-family: var(--fl-global-button-font-family, inherit) !important;
  font-size: var(--fl-global-button-font-size, 12px) !important;
  font-weight: var(--fl-global-button-font-weight, 400) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 10px 22px !important;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}
.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget.ti-widget a.ti-header-write-btn:hover {
  background: var(--fl-global-button-hover-background, #37BC91) !important;
  border-color: var(--fl-global-button-hover-background, #37BC91) !important;
  color: var(--fl-global-button-hover-color, #fff) !important;
}

/* Slider dots — squared, brand greens */
.ti-widget.ti-widget.ti-widget.ti-widget .ti-controls-line .dot { background: var(--fl-global-stone, #DAD7CF) !important; border-radius: 0 !important; }
.ti-widget.ti-widget.ti-widget.ti-widget .ti-controls-line .dot.active,
.ti-widget.ti-widget.ti-widget.ti-widget .ti-controls-line .dot.selected { background: var(--fl-global-fern, #1F7A5C) !important; }