/* ==========================================================
   RENVIK FARM — brand styles
   ========================================================== */

@font-face{
  font-family:'Loubag';
  src:url('http://renvikfarm.com/wp-content/uploads/2026/08/Loubag-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
}

:root{
  --bb-cream:#F6EFE1;
  --bb-cream-deep:#E5DAC6;
  --bb-ink:#1C1A15;
  --bb-ink-soft:#6A6152;
  --bb-line:#DDD0B3;
  --bb-white:#FFFFFF;
  --bb-navy:#7C944C;       /* primary brand green */
  --bb-navy-deep:#5F7238;  /* dark green */
  --bb-sand:#E8B84B;       /* gold accent (was sand) */
  --bb-sand-deep:#C9971F;  /* deep gold */
  --bb-red:#8B2E2A;        /* accent used for badges/sale */
  --bb-font-display:'Loubag', 'Bricolage Grotesque', sans-serif;
  --bb-font-sans:'Bricolage Grotesque', sans-serif;

  /* Shop page product card — these have safe fallback defaults here,
     and get overridden site-wide by Settings > BB Shop Card Design
     (see includes/shop-card-settings.php), which prints its saved
     values as an inline <style> block in wp_head. */
  --bb-shop-card-bg: var(--bb-cream-deep);
  --bb-shop-card-radius: 16px;
  --bb-shop-image-ratio: 1/1;
  --bb-shop-title-color: var(--bb-ink);
  --bb-shop-price-color: var(--bb-ink);
  --bb-shop-cart-bg: var(--bb-navy);
  --bb-shop-cart-icon: var(--bb-white);
  --bb-shop-badge-bg: var(--bb-red);
  --bb-shop-badge-color: var(--bb-white);
}

body, p, li, a, span, input, button, select, textarea{
  font-family: var(--bb-font-sans);
  color: var(--bb-ink);
}
h1, h2, h3, h4, .site-title, .woocommerce-loop-product__title, .product_title{
  font-family: var(--bb-font-display);
  font-weight: 600;
  color: var(--bb-ink);
}
body{ background: var(--bb-cream); }
a{ color: var(--bb-navy); }
a:hover{ color: var(--bb-navy-deep); }

/* Buttons site-wide */
.button, button, input[type="submit"], .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce-page a.button{
  background: var(--bb-navy);
  color: var(--bb-white);
  border: none;
  border-radius: 999px;
  font-family: var(--bb-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce #respond input#submit:hover{
  background: var(--bb-navy-deep);
  color: var(--bb-white);
  transform: translateY(-1px);
}

/* ==========================================================
   PRODUCT CARD (shop / category grid + carousel widget)
   ========================================================== */
ul.products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:22px; list-style:none; margin:0; padding:0; }
ul.products li.product{ margin:0 !important; padding:0 !important; }

.bb-card{
  background: var(--bb-shop-card-bg);
  border-radius: var(--bb-shop-card-radius);
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
  height: 100%;
  box-sizing: border-box;
}

.bb-card__img-wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--bb-shop-image-ratio);
  overflow: hidden;
  background: transparent;
}
.bb-card__img-wrap img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain;
  padding: 22px;
  box-sizing: border-box;
}
.bb-card__sale{
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--bb-shop-badge-bg);
  color: var(--bb-shop-badge-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
}

.bb-card__body{ padding: 12px 16px 18px; position: relative; }
.bb-card__type{ font-size: 11px; color: var(--bb-ink-soft); margin: 0 0 2px; text-transform: capitalize; }
.bb-card__name-link{ text-decoration: none; }
.bb-card__name{
  font-family: var(--bb-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bb-shop-title-color);
  margin: 0 0 6px;
  max-width: var(--bb-title-max-width, 100%);
  min-height: calc(1.3em * var(--bb-title-lines, 2));
  display: -webkit-box;
  -webkit-line-clamp: var(--bb-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bb-card__price{ font-family: var(--bb-font-sans); font-size: 13px; color: var(--bb-shop-price-color); margin: 0; }
.bb-card__price del{ color: var(--bb-ink-soft); font-weight: 400; margin-right: 6px; }
.bb-card__price ins{ text-decoration: none; }

/* --- actions cluster: cart + wishlist, stacked, wishlist reveals on hover --- */
.bb-card__actions{
  position: absolute !important;
  right: var(--bb-actions-offset, 16px);
  bottom: var(--bb-actions-offset, 16px);
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  gap: 8px;
  z-index: 3 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bb-card__actions.bb-pos-bottom-left{ right: auto; left: var(--bb-actions-offset, 16px); }
.bb-card__actions.bb-pos-top-right{ bottom: auto; top: var(--bb-actions-offset, 16px); flex-direction: column !important; }
.bb-card__actions.bb-pos-top-left{ bottom: auto; top: var(--bb-actions-offset, 16px); left: var(--bb-actions-offset, 16px); right: auto; flex-direction: column !important; }

.bb-card__cart{
  width: 36px; height: 36px;
  border-radius: 50% !important;
  background: var(--bb-shop-cart-bg);
  color: var(--bb-shop-cart-icon);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-card__cart:hover{ transform: scale(1.08) !important; filter: brightness(0.9); }
.bb-card__cart svg{ width: 16px; height: 16px; }
.bb-card__cart.added::after{ display: none; }
.bb-card__cart.loading{ opacity: 0.6; pointer-events: none; }

.bb-card__wishlist{
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: var(--bb-white);
  border: 1px solid var(--bb-line) !important;
  color: var(--bb-navy);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  opacity: 0 !important;
  transform: scale(0.7) !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-card:hover .bb-card__wishlist,
.bb-card:focus-within .bb-card__wishlist{
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.bb-card__wishlist:hover{ background: var(--bb-cream-deep); }
.bb-card__wishlist svg{ width: 14px; height: 14px; }
.bb-card__wishlist.active svg{ fill: var(--bb-red); stroke: var(--bb-red); }

.bb-no-wishlist .bb-card__wishlist{ display: none !important; }
.bb-no-sale-badge .bb-card__sale{ display: none; }
.bb-no-category .bb-card__type{ display: none; }

/* --- LAYOUT: LIST (image left, content right) --- */
.bb-layout-list .bb-card{ display: flex; flex-direction: row; align-items: stretch; }
.bb-layout-list .bb-card__img-wrap{ width: 140px; flex-shrink: 0; aspect-ratio: 1/1; }
.bb-layout-list .bb-card__body{ flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bb-layout-list .bb-card__actions{ position: static !important; flex-direction: row-reverse !important; margin-top: 10px; right: auto; bottom: auto; }
.bb-layout-list .bb-card__wishlist{ opacity: 1 !important; transform: none !important; pointer-events: auto !important; }


/* ==========================================================
   SINGLE PRODUCT PAGE
   ========================================================== */
.woocommerce-breadcrumb{
  font-size: 12px;
  color: var(--bb-ink-soft);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a{ color: var(--bb-ink-soft); text-decoration: none; }

.bb-badge{
  display: inline-block;
  background: var(--bb-cream-deep);
  color: var(--bb-sand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.product_title.entry-title{ font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 12px; }

.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family: var(--bb-font-sans);
  font-size: 22px;
  color: var(--bb-ink);
  margin-bottom: 16px;
}

.woocommerce-product-details__short-description{
  font-size: 14px;
  line-height: 1.6;
  color: var(--bb-ink-soft);
  max-width: 520px;
  margin-bottom: 20px;
}

/* variation swatches (size/shade buttons) */
table.variations{ margin-bottom: 16px; }
table.variations select{
  border: 1.5px solid var(--bb-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--bb-font-sans);
  background: var(--bb-white);
}

.stock.in-stock{
  color: #2E7D46;
  font-size: 13px;
  font-weight: 600;
}
.stock.out-of-stock{
  color: var(--bb-red);
  font-size: 13px;
  font-weight: 600;
}

/* quantity + add to cart row */
form.cart{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.quantity .qty{
  width: 64px;
  padding: 12px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--bb-line);
  text-align: center;
  font-family: var(--bb-font-sans);
}
.single_add_to_cart_button{
  background: var(--bb-ink) !important;
  color: var(--bb-white) !important;
  flex: 1;
  min-width: 180px;
}

.bb-buy-now-btn{
  display: block;
  width: 100%;
  background: var(--bb-sand);
  color: var(--bb-white);
  border: none;
  border-radius: 999px;
  font-family: var(--bb-font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 15px;
  margin: 10px 0 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.bb-buy-now-btn:hover{ background: var(--bb-sand-deep); }

/* trust badges row */
.bb-trust-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--bb-line);
  padding-top: 20px;
  margin-top: 8px;
  text-align: center;
}
.bb-trust-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bb-ink-soft);
}
.bb-trust-icon{ font-size: 20px; }

/* ==========================================================
   STICKY / PERSISTENT CART BAR
   ========================================================== */
.bb-sticky-cart{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(28,39,57,0.16);
  padding: 10px 10px 10px 20px;
  max-width: calc(100% - 32px);
}
.bb-sticky-cart__info{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bb-font-sans);
  font-size: 13px;
  color: var(--bb-ink);
  white-space: nowrap;
}
.bb-sticky-cart__count{
  background: var(--bb-navy);
  color: var(--bb-white);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.bb-sticky-cart__btn{
  background: var(--bb-navy);
  color: var(--bb-white) !important;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bb-sticky-cart__btn:hover{ background: var(--bb-navy-deep); }

@media(max-width:480px){
  .bb-sticky-cart{ left: 16px; right: 16px; transform: none; justify-content: space-between; }
}

/* ==========================================================
   RITUAL CAROUSEL — [bb_ritual_carousel] shortcode
   ========================================================== */
.bb-ritual{ padding: 40px 0; }
.bb-ritual__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.bb-ritual__title{ font-family: var(--bb-font-display); font-size: clamp(24px,3vw,32px); color: var(--bb-ink); margin: 0; }
.bb-ritual__tabs{ display: flex; gap: 8px; }
.bb-ritual .bb-tab{
  font-family: var(--bb-font-sans) !important;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid var(--bb-line);
  color: var(--bb-ink-soft) !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bb-ritual .bb-tab.active{ background: var(--bb-ink) !important; border-color: var(--bb-ink); color: var(--bb-white) !important; }

.bb-ritual__track{
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.bb-ritual__track::-webkit-scrollbar{ display: none; }
.bb-ritual__track .bb-card{ margin: 0; }

.bb-ritual__footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.bb-progress{ width: 120px; height: 2px; background: var(--bb-line); position: relative; }
.bb-progress__bar{ position: absolute; left: 0; top: 0; height: 100%; width: 35%; background: var(--bb-ink); transition: width 0.3s ease; }
.bb-arrows{ display: flex; gap: 8px; }
.bb-arrow{
  width: 34px; height: 34px;
  border-radius: 50% !important;
  border: 1px solid var(--bb-line);
  background: var(--bb-white);
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.bb-arrow svg{ width: 14px; height: 14px; }

/* --- LAYOUT: GRID (auto-responsive) --- */
.bb-layout-grid .bb-ritual__track,
.bb-ritual__grid{
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(var(--bb-columns, 4), 1fr);
  gap: 20px;
  overflow: visible !important;
}

/* Cap the column count as the screen shrinks, without ever exceeding
   what the user picked in "Columns per row" */
@media(max-width:900px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: repeat(min(3, var(--bb-columns, 4)), 1fr); }
}
@media(max-width:600px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: repeat(min(2, var(--bb-columns, 4)), 1fr); gap: 14px; }
}
@media(max-width:400px){
  .bb-layout-grid .bb-ritual__track,
  .bb-ritual__grid{ grid-template-columns: 1fr; }
}

/* --- LAYOUT: SLIDER (default, horizontal scroll) --- */
.bb-layout-slider .bb-ritual__track{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
}
@media(max-width:600px){
  .bb-layout-slider .bb-ritual__track{ grid-auto-columns: minmax(170px, 1fr); gap: 14px; }
}

/* --- LAYOUT: LIST (auto-responsive: stacks on small screens) --- */
@media(max-width:600px){
  .bb-layout-list .bb-card{ flex-direction: column; }
  .bb-layout-list .bb-card__img-wrap{ width: 100%; }
  .bb-layout-list .bb-card__actions{ flex-direction: row !important; margin-top: 12px; }
}

/* --- Head row + tabs wrap nicely on small screens --- */
@media(max-width:480px){
  .bb-ritual__head{ flex-direction: column; align-items: flex-start; }
  .bb-ritual__tabs{ flex-wrap: wrap; }
}


/* ==========================================================
   CATEGORY BANNER — [BB Category Banner] widget
   ========================================================== */
.bb-banner{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px;
  display: block !important;
  text-decoration: none !important;
  color: inherit;
}
.bb-banner__img-wrap{ position: absolute; inset: 0; }
.bb-banner__img-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease, object-position 0.3s ease;
}
.bb-banner__scrim{ position: absolute; inset: 0; pointer-events: none; }
.bb-banner__content{ position: relative; z-index: 2; }
.bb-banner__badge{
  display: inline-block;
  font-family: var(--bb-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.bb-banner__title{ font-family: var(--bb-font-display); margin: 0 0 8px; }
.bb-banner__sub{ font-family: var(--bb-font-sans); margin: 0 0 14px; }
.bb-banner__link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  font-family: var(--bb-font-sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline !important;
}

/* Layout 1: Overlay — full bg image, text bottom, gradient scrim */
.bb-banner--overlay{ aspect-ratio: var(--bb-banner-ratio, 4/5); }
.bb-banner--overlay .bb-banner__content{ position: absolute; left: 28px; right: 28px; bottom: 28px; }

/* Layout 2: Split — image half, text half on a color block */
.bb-banner--split{ display: grid !important; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 320px; }
.bb-banner--split .bb-banner__img-wrap{ position: relative; height: 100%; }
.bb-banner--split .bb-banner__content{ display: flex; flex-direction: column; justify-content: center; padding: 36px; background: var(--bb-banner-bg, var(--bb-cream-deep)); }
@media(max-width:600px){ .bb-banner--split{ grid-template-columns: 1fr; } .bb-banner--split .bb-banner__img-wrap{ aspect-ratio: 4/3; } }

/* Layout 3: Centered — full image, centered text + badge */
.bb-banner--centered{ aspect-ratio: var(--bb-banner-ratio, 16/9); text-align: center; }
.bb-banner--centered .bb-banner__content{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; }

/* Layout 4: Card — image top (rounded), text block below */
.bb-banner--card{ display: block; }
.bb-banner--card .bb-banner__img-wrap{ position: relative; aspect-ratio: 1/1; border-radius: 16px 16px 0 0; overflow: hidden; }
.bb-banner--card .bb-banner__content{ padding: 22px; background: var(--bb-banner-bg, var(--bb-white)); border-radius: 0 0 16px 16px; }

/* Layout 5: Minimal — small square image + text row, list-style */
.bb-banner--minimal{ display: flex !important; align-items: center !important; gap: 20px; padding: 16px; background: var(--bb-banner-bg, var(--bb-cream-deep)); }
.bb-banner--minimal .bb-banner__img-wrap{ position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.bb-banner--minimal .bb-banner__content{ flex: 1; }
.bb-banner--minimal .bb-banner__title{ margin-bottom: 2px; }
.bb-banner--minimal .bb-banner__sub{ margin-bottom: 0; }
.bb-banner--minimal .bb-banner__link{ margin-left: auto; flex-shrink: 0; }

/* ==========================================================
   OFFER CARD — [BB Offer Card] widget
   ========================================================== */
.bb-offer{
  position: relative !important;
  border-radius: 16px;
  overflow: hidden !important;
  aspect-ratio: var(--bb-offer-ratio, 4/3);
}
.bb-offer__img-wrap{ position: absolute; inset: 0; }
.bb-offer__img-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.bb-offer__arrow{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px; height: 34px;
  border-radius: 50% !important;
  background: var(--bb-white);
  color: var(--bb-ink);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3;
}
.bb-offer__arrow svg{ width: 15px; height: 15px; }

.bb-offer__card{
  position: absolute;
  z-index: 2;
  background: var(--bb-white);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 260px;
  box-shadow: 0 12px 30px rgba(28,39,57,0.14);
}
.bb-offer__card.bb-pos-bottom-left{ left: 20px; bottom: 20px; }
.bb-offer__card.bb-pos-bottom-right{ right: 20px; bottom: 20px; }
.bb-offer__card.bb-pos-top-left{ left: 20px; top: 20px; }
.bb-offer__card.bb-pos-top-right{ right: 20px; top: 20px; }
.bb-offer__card.bb-pos-bottom-center{ left: 50%; bottom: 20px; transform: translateX(-50%); }

.bb-offer__badge{
  display: inline-block;
  font-family: var(--bb-font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.bb-offer__title{ font-family: var(--bb-font-display); font-size: 18px; margin: 0 0 8px; color: var(--bb-ink); }
.bb-offer__price{ font-family: var(--bb-font-sans); font-size: 16px; font-weight: 700; color: var(--bb-ink); margin: 0 0 14px; }
.bb-offer__price del{ color: var(--bb-ink-soft); font-weight: 400; font-size: 13px; margin-right: 6px; }
.bb-offer__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bb-navy);
  color: var(--bb-white) !important;
  font-family: var(--bb-font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px !important;
  text-decoration: none !important;
}
.bb-offer__btn:hover{ background: var(--bb-navy-deep); }

@media(max-width:480px){
  .bb-offer__card{ max-width: calc(100% - 40px); padding: 14px 16px; }
  .bb-offer__title{ font-size: 16px; }
}

/* ==========================================================
   FEATURE CARDS — [BB Feature Cards] widget
   ========================================================== */
.bb-features{ padding: 0; }
.bb-features__head{ max-width: 1200px; margin: 0 auto 44px; text-align: center; }
.bb-features__eyebrow{
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bb-ink-soft); margin: 0 0 14px;
}
.bb-features__heading{ font-family: var(--bb-font-sans); font-weight: 700; font-size: clamp(24px,3.2vw,34px); color: var(--bb-ink); margin: 0 auto; max-width: 560px; }

.bb-features__grid{
  max-width: 1200px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(var(--bb-feat-columns, 4), 1fr);
  gap: 18px;
}
.bb-features__card{
  background: #FAFAF9;
  border: 1px solid #ECEAE6;
  border-radius: 16px !important;
  padding: 26px 22px;
  text-align: left;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bb-features__card.bb-features__hover-yes:hover{ box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px); }

.bb-features__icon{
  width: 40px; height: 40px;
  border-radius: 10px !important;
  background: #171717;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 22px;
  flex-shrink: 0;
}
.bb-features__icon svg{ width: 18px; height: 18px; }

.bb-features__title{ font-family: var(--bb-font-sans); font-weight: 700; font-size: 16px; color: #171717; margin: 0 0 8px; }
.bb-features__text{ font-family: var(--bb-font-sans); font-size: 13px; line-height: 1.6; color: #6B7280; margin: 0; }

@media(max-width: 900px){
  .bb-features__grid{ grid-template-columns: repeat(min(2, var(--bb-feat-columns, 4)), 1fr); }
}
@media(max-width: 480px){
  .bb-features__head{ margin-bottom: 32px; }
  .bb-features__grid{ grid-template-columns: 1fr; gap: 14px; }
  .bb-features__card{ padding: 22px 20px; }
}

/* ==========================================================
   TESTIMONIALS — [BB Testimonials] widget
   ========================================================== */
.bb-testi{ padding: 0; }
.bb-testi__head{ max-width: 1200px; margin: 0 auto 48px; text-align: center; }
.bb-testi__eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ink-soft); margin: 0 0 14px; }
.bb-testi__heading{ font-family: var(--bb-font-display); font-size: clamp(26px,3.4vw,38px); color: var(--bb-ink); margin: 0 auto; max-width: 520px; }

.bb-testi__stars{ display: flex; gap: 2px; margin-bottom: 12px; }
.bb-testi__stars svg{ width: var(--bb-testi-star-size, 13px); height: var(--bb-testi-star-size, 13px); }

.bb-testi__quote-mark{ font-family: Georgia, serif; font-size: 40px; line-height: 1; margin: 0 0 8px; opacity: 0.35; }

/* --- GRID layout --- */
.bb-testi__grid{
  max-width: 1200px; margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(var(--bb-testi-columns, 3), 1fr);
  gap: var(--bb-testi-card-gap, 20px);
}
.bb-testi__card{
  border-radius: 16px !important;
  padding: var(--bb-testi-card-padding, 26px 24px);
  text-align: left;
}
.bb-testi__quote{ font-size: 14px; line-height: 1.65; margin: 0 0 16px; }
.bb-testi__author{ font-size: 13px; font-weight: 700; margin: 0; }

@media(max-width: 900px){ .bb-testi__grid{ grid-template-columns: repeat(min(2, var(--bb-testi-columns, 3)), 1fr); } }
@media(max-width: 480px){ .bb-testi__grid{ grid-template-columns: 1fr; gap: 16px; } }

/* --- STACKED layout (overlapping, tilted; intensity is adjustable) --- */
.bb-testi__stack{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 400px;
  padding-top: 20px;
}
.bb-testi__stack-inner{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  transform: translate(var(--bb-stack-offset-x, 0px), var(--bb-stack-offset-y, 0px));
}
.bb-testi__stack-inner .bb-testi__card{
  position: absolute;
  width: var(--bb-stack-width, 240px);
  box-shadow: 0 16px 40px rgba(28,39,57,0.14);
  transition: transform 0.25s ease, z-index 0s;
}
.bb-testi__stack-inner .bb-testi__card:hover{ transform: translateY(-6px) rotate(0deg) !important; z-index: 20 !important; }

.bb-testi__stack-inner .bb-testi__card:nth-child(1){ left: 0%;  top: calc(var(--bb-stack-scale, 1) * 40px);  transform: rotate(calc(var(--bb-stack-scale, 1) * -7deg)); z-index: 1; }
.bb-testi__stack-inner .bb-testi__card:nth-child(2){ left: 22%; top: 0;     transform: rotate(calc(var(--bb-stack-scale, 1) * 4deg));  z-index: 3; }
.bb-testi__stack-inner .bb-testi__card:nth-child(3){ left: 44%; top: calc(var(--bb-stack-scale, 1) * 30px);  transform: rotate(calc(var(--bb-stack-scale, 1) * -3deg)); z-index: 2; }
.bb-testi__stack-inner .bb-testi__card:nth-child(4){ left: 34%; top: calc(var(--bb-stack-scale, 1) * 90px);  transform: rotate(calc(var(--bb-stack-scale, 1) * 6deg));  z-index: 4; }
.bb-testi__stack-inner .bb-testi__card:nth-child(5){ left: 62%; top: calc(var(--bb-stack-scale, 1) * 20px);  transform: rotate(calc(var(--bb-stack-scale, 1) * -5deg)); z-index: 2; }
.bb-testi__stack-inner .bb-testi__card:nth-child(6){ left: 8%;  top: calc(var(--bb-stack-scale, 1) * 130px); transform: rotate(calc(var(--bb-stack-scale, 1) * 5deg));  z-index: 5; }
.bb-testi__stack-inner .bb-testi__card:nth-child(7){ left: 52%; top: calc(var(--bb-stack-scale, 1) * 110px); transform: rotate(calc(var(--bb-stack-scale, 1) * -6deg)); z-index: 3; }
.bb-testi__stack-inner .bb-testi__card:nth-child(8){ left: 30%; top: calc(var(--bb-stack-scale, 1) * -10px); transform: rotate(calc(var(--bb-stack-scale, 1) * 7deg));  z-index: 6; }
.bb-testi__stack-inner .bb-testi__card:nth-child(n+9){ display: none; }

@media(max-width: 768px){
  .bb-testi__stack{ min-height: 0; }
  .bb-testi__stack-inner{
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    transform: none !important;
  }
  .bb-testi__stack-inner .bb-testi__card{
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }
}

/* --- CAROUSEL layout (single spotlight, arrows + dots) --- */
.bb-testi__carousel{ max-width: 680px; margin: 0 auto; text-align: center; position: relative; }
.bb-testi__carousel .bb-testi__card{ display: none; padding: var(--bb-testi-card-padding, 40px 32px); }
.bb-testi__carousel .bb-testi__card.bb-testi__is-active{ display: block; animation: bbTestiFade 0.4s ease; }
@keyframes bbTestiFade{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
.bb-testi__carousel .bb-testi__stars{ justify-content: center; }
.bb-testi__carousel .bb-testi__quote{ font-size: 18px; }
.bb-testi__carousel-nav{ display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px; margin-top: 24px; }
.bb-testi__arrow{
  width: 36px; height: 36px; border-radius: 50% !important;
  border: 1px solid var(--bb-line); background: var(--bb-white);
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer; padding: 0 !important;
}
.bb-testi__arrow svg{ width: 14px; height: 14px; }
.bb-testi__dots{ display: flex !important; gap: 6px; }
.bb-testi__dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--bb-line);
  cursor: pointer; border: none !important; padding: 0 !important; transition: all 0.2s ease;
}
.bb-testi__dot.bb-testi__is-active{ background: var(--bb-navy); width: 20px; border-radius: 4px !important; }

/* --- MARQUEE layout (auto-scrolling ticker) --- */
.bb-testi__marquee{
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bb-testi__marquee-track{
  display: flex !important; gap: var(--bb-testi-card-gap, 20px); width: max-content;
  animation: bbMarquee var(--bb-marquee-speed, 30s) linear infinite;
}
.bb-testi__marquee.bb-testi__marquee-paused:hover .bb-testi__marquee-track{ animation-play-state: paused; }
.bb-testi__marquee .bb-testi__card{ width: 280px; flex-shrink: 0; }
@keyframes bbMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================
   TIMELINE — [BB Timeline] widget
   ========================================================== */
.bb-timeline{ padding: 0; }
.bb-timeline__head{ text-align: center; margin-bottom: 56px; }
.bb-timeline__eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-navy); margin: 0 0 14px; }
.bb-timeline__heading{ font-family: var(--bb-font-display); font-size: clamp(28px, 4vw, 44px); color: var(--bb-navy); margin: 0; }

.bb-timeline__grid{ max-width: 1200px; margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.bb-timeline__list{ position: relative; padding-left: 26px; }
.bb-timeline__list::before{ content:''; position: absolute; left: 4px; top: 6px; bottom: 6px; border-left: 1.5px dashed var(--bb-line); }
.bb-timeline__item{ position: relative; padding-bottom: 46px; }
.bb-timeline__item:last-child{ padding-bottom: 0; }
.bb-timeline__dot{ position: absolute; left: -26px; top: 8px; width: 9px; height: 9px; border-radius: 50% !important; background: var(--bb-navy); }
.bb-timeline__badge{ display: inline-block; background: #E3E9D3; color: var(--bb-navy); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 5px 14px; border-radius: 999px !important; margin-bottom: 14px; }
.bb-timeline__title{ font-family: var(--bb-font-display); font-size: 22px; color: var(--bb-navy); margin: 0 0 10px; }
.bb-timeline__text{ font-family: var(--bb-font-sans); font-size: 13.5px; line-height: 1.65; color: var(--bb-ink-soft); max-width: 340px; margin: 0; }

.bb-timeline__visual{ position: relative; max-width: 440px; margin: 0 auto; }
.bb-timeline__img-main{ width: 100%; aspect-ratio: 4/5; border-radius: 20px !important; overflow: hidden; background: #E3E9D3; }
.bb-timeline__img-main img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.bb-timeline__img-sub{ position: absolute; right: -8%; bottom: -10%; width: 46%; aspect-ratio: 1/1; border-radius: 16px !important; overflow: hidden; background: #FFFDFA; box-shadow: 0 20px 40px rgba(28,39,57,0.16); }
.bb-timeline__img-sub img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

.bb-timeline__stamp{ position: absolute; top: -6%; right: 6%; width: 110px; height: 110px; }
.bb-timeline__stamp svg{ width: 100%; height: 100%; }
.bb-timeline__stamp-text{ font-family: Arial, sans-serif; font-size: 9.2px; font-weight: 700; letter-spacing: 0.5px; fill: var(--bb-navy); }
.bb-timeline__stamp-heart{ fill: none; stroke: var(--bb-navy); stroke-width: 1.6; }

.bb-timeline__cta-wrap{ text-align: center; margin-top: 60px; }
.bb-timeline__cta{ display: inline-flex !important; align-items: center !important; gap: 10px; background: #E3E9D3; color: var(--bb-navy); font-family: var(--bb-font-sans); font-weight: 700; font-size: 14px; padding: 8px 8px 8px 22px; border-radius: 999px !important; text-decoration: none !important; }
.bb-timeline__cta-arrow{ width: 28px; height: 28px; border-radius: 50% !important; background: var(--bb-navy); color: #fff; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; }
.bb-timeline__cta-arrow svg{ width: 12px; height: 12px; }

@media(max-width: 900px){
  .bb-timeline__grid{ grid-template-columns: 1fr; gap: 48px; }
  .bb-timeline__visual{ order: -1; max-width: 380px; margin: 0 auto; }
}
@media(max-width: 480px){
  .bb-timeline__head{ margin-bottom: 40px; }
  .bb-timeline__title{ font-size: 19px; }
  .bb-timeline__stamp{ width: 84px; height: 84px; top: -4%; right: 2%; }
  .bb-timeline__img-sub{ width: 42%; right: -6%; bottom: -8%; }
}

/* --- LAYOUT: CENTERED (alternating vertical timeline, no side image) --- */
.bb-timeline--centered .bb-timeline__center-list{ position: relative; max-width: 720px; margin: 0 auto; }
.bb-timeline--centered .bb-timeline__center-list::before{
  content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1.5px;
  background: var(--bb-line); transform: translateX(-50%);
}
.bb-timeline--centered .bb-timeline__center-item{ position: relative; width: 50%; padding: 0 40px 50px; box-sizing: border-box; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(odd){ margin-left: 0; text-align: right; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(even){ margin-left: 50%; text-align: left; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(odd) .bb-timeline__dot{ right: -5px; left: auto; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(even) .bb-timeline__dot{ left: -5px; }
.bb-timeline--centered .bb-timeline__center-item .bb-timeline__text{ margin-left: auto; margin-right: auto; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(odd) .bb-timeline__text{ margin-right: 0; }
.bb-timeline--centered .bb-timeline__center-item:nth-child(even) .bb-timeline__text{ margin-left: 0; }

@media(max-width: 700px){
  .bb-timeline--centered .bb-timeline__center-list::before{ left: 4px; }
  .bb-timeline--centered .bb-timeline__center-item{ width: 100%; margin-left: 26px !important; text-align: left !important; padding: 0 0 40px; }
  .bb-timeline--centered .bb-timeline__center-item .bb-timeline__dot{ left: -26px !important; right: auto !important; }
  .bb-timeline--centered .bb-timeline__center-item .bb-timeline__text{ margin: 0 !important; }
}

/* --- LAYOUT: HORIZONTAL (steps in a row, connecting line) --- */
.bb-timeline--horizontal .bb-timeline__h-row{
  display: flex !important; gap: 0; position: relative; max-width: 1100px; margin: 0 auto;
}
.bb-timeline--horizontal .bb-timeline__h-item{ flex: 1; text-align: center; padding: 0 18px; position: relative; }
.bb-timeline--horizontal .bb-timeline__h-line{ position: absolute; top: 5px; left: 5%; right: 5%; height: 1.5px; background: var(--bb-line); z-index: 0; }
.bb-timeline--horizontal .bb-timeline__h-dot{
  width: 10px; height: 10px; border-radius: 50% !important; background: var(--bb-navy);
  margin: 0 auto 22px; position: relative; z-index: 1;
}
.bb-timeline--horizontal .bb-timeline__badge{ margin-bottom: 12px; }
.bb-timeline--horizontal .bb-timeline__text{ margin-left: auto; margin-right: auto; }

@media(max-width: 800px){
  .bb-timeline--horizontal .bb-timeline__h-row{ flex-direction: column; gap: 40px; }
  .bb-timeline--horizontal .bb-timeline__h-line{ display: none; }
  .bb-timeline--horizontal .bb-timeline__h-item{ text-align: left; padding: 0; }
  .bb-timeline--horizontal .bb-timeline__h-dot{ margin: 0 0 16px; }
  .bb-timeline--horizontal .bb-timeline__text{ margin: 0; }
}

/* ==========================================================
   STATS — [BB Stats] widget
   ========================================================== */
.bb-stats{ padding: 70px 6vw; text-align: center; }
.bb-stats__eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-ink-soft); margin: 0 0 14px; }
.bb-stats__heading{ font-family: var(--bb-font-display); font-size: clamp(26px,3.6vw,40px); color: var(--bb-ink); margin: 0 auto 44px; max-width: 560px; }
.bb-stats__footnote{ font-family: var(--bb-font-sans); font-size: 12px; color: var(--bb-ink-soft); max-width: 560px; margin: 32px auto 0; line-height: 1.6; }

/* --- LAYOUT: CARDS --- */
.bb-stats--cards .bb-stats__grid{
  max-width: 1200px; margin: 0 auto;
  display: grid !important;
  grid-template-columns: repeat(var(--bb-stats-columns, 4), 1fr);
  gap: 18px;
}
.bb-stats--cards .bb-stats__item{
  background: #FFFDFA;
  border-radius: 16px !important;
  padding: 34px 20px;
}
.bb-stats--cards .bb-stats__num{ font-family: var(--bb-font-display); font-size: clamp(38px,4.4vw,54px); color: var(--bb-ink); margin: 0 0 14px; line-height: 1; }
.bb-stats--cards .bb-stats__text{ font-family: var(--bb-font-sans); font-size: 13px; line-height: 1.55; color: var(--bb-ink-soft); margin: 0; }

@media(max-width: 900px){ .bb-stats--cards .bb-stats__grid{ grid-template-columns: repeat(min(2, var(--bb-stats-columns, 4)), 1fr); } }
@media(max-width: 480px){ .bb-stats--cards .bb-stats__grid{ grid-template-columns: 1fr; gap: 14px; } }

/* --- LAYOUT: MINIMAL (no card boxes, inline with dividers) --- */
.bb-stats--minimal .bb-stats__grid{
  max-width: 1100px; margin: 0 auto;
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
}
.bb-stats--minimal .bb-stats__item{
  flex: 1; min-width: 140px;
  padding: 0 28px;
  border-left: 1px solid var(--bb-line);
}
.bb-stats--minimal .bb-stats__item:first-child{ border-left: none; }
.bb-stats--minimal .bb-stats__num{ font-family: var(--bb-font-display); font-size: clamp(32px,3.8vw,46px); color: var(--bb-ink); margin: 0 0 10px; line-height: 1; }
.bb-stats--minimal .bb-stats__text{ font-family: var(--bb-font-sans); font-size: 12.5px; line-height: 1.5; color: var(--bb-ink-soft); margin: 0; }

@media(max-width: 700px){
  .bb-stats--minimal .bb-stats__item{ border-left: none; border-top: 1px solid var(--bb-line); flex: 0 0 100%; padding: 22px 0; }
  .bb-stats--minimal .bb-stats__item:first-child{ border-top: none; }
}

/* --- LAYOUT: SPOTLIGHT (one big stat, dots to switch) --- */
.bb-stats--spotlight .bb-stats__grid{ max-width: 480px; margin: 0 auto; position: relative; }
.bb-stats--spotlight .bb-stats__item{ display: none; }
.bb-stats--spotlight .bb-stats__item.bb-stats__is-active{ display: block; animation: bbStatsFade 0.4s ease; }
@keyframes bbStatsFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.bb-stats--spotlight .bb-stats__num{ font-family: var(--bb-font-display); font-size: clamp(56px,8vw,84px); color: var(--bb-ink); margin: 0 0 16px; line-height: 1; }
.bb-stats--spotlight .bb-stats__text{ font-family: var(--bb-font-sans); font-size: 14px; line-height: 1.6; color: var(--bb-ink-soft); max-width: 340px; margin: 0 auto; }
.bb-stats__dots{ display: flex !important; justify-content: center; gap: 6px; margin-top: 28px; }
.bb-stats__dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--bb-line); cursor: pointer; border: none !important; padding: 0 !important; transition: all 0.2s ease; }
.bb-stats__dot.bb-stats__is-active{ background: var(--bb-ink); width: 20px; border-radius: 4px !important; }

/* ==========================================================
   PRODUCT HIGHLIGHT — [BB Product Highlight] widget
   ========================================================== */
.bb-highlight{ position: relative; border-radius: 20px !important; overflow: hidden !important; min-height: 560px; }
.bb-highlight__bg{ position: absolute; inset: 0; }
.bb-highlight__bg img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.bb-highlight__scrim{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55) 20%, transparent 65%); }
.bb-highlight__content{ position: relative; z-index: 2; padding: 60px; max-width: 560px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.bb-highlight__eyebrow{ font-family: var(--bb-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin: 0 0 20px; }
.bb-highlight__heading-line{ font-family: var(--bb-font-display); font-size: clamp(30px,4.4vw,52px); line-height: 1.05; color: rgba(255,255,255,0.55); margin: 0; }
.bb-highlight__heading-line.bb-highlight__is-accent{ color: #fff; font-style: italic; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1.5px; margin-top: 6px; }
.bb-highlight__desc{ font-family: var(--bb-font-sans); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 380px; margin: 26px 0 30px; }
.bb-highlight__btn{ display: inline-flex !important; align-items: center !important; gap: 10px; background: #E9F0C7; color: #1a1a1a; font-family: var(--bb-font-sans); font-weight: 700; font-size: 14px; padding: 8px 8px 8px 22px; border-radius: 999px !important; text-decoration: none !important; width: fit-content; }
.bb-highlight__btn-arrow{ width: 30px; height: 30px; border-radius: 50% !important; background: #1a1a1a; color: #fff; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; }
.bb-highlight__btn-arrow svg{ width: 13px; height: 13px; }

.bb-highlight__card{ position: absolute; z-index: 3; background: #fff; border-radius: 20px !important; padding: 24px; width: 320px; box-shadow: 0 24px 50px rgba(0,0,0,0.2); }
.bb-highlight__card.bb-pos-bottom-right{ right: 30px; bottom: 30px; }
.bb-highlight__card.bb-pos-bottom-left{ left: 30px; bottom: 30px; }
.bb-highlight__card.bb-pos-center{ left: 50%; top: 50%; transform: translate(-50%,-50%); }
.bb-highlight__card-img{ background: #F2F2F2; border-radius: 14px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; overflow: hidden; }
.bb-highlight__card-img img{ width: 60% !important; height: 60% !important; object-fit: contain !important; }
.bb-highlight__card-title{ font-family: var(--bb-font-display); font-size: 19px; color: var(--bb-ink); margin: 0 0 10px; }
.bb-highlight__card-desc{ font-family: var(--bb-font-sans); font-size: 13px; line-height: 1.55; color: var(--bb-ink-soft); margin: 0 0 16px; }
.bb-highlight__card-list{ list-style: none; margin: 0; padding: 0; }
.bb-highlight__card-list li{ display: flex; align-items: center; gap: 10px; font-family: var(--bb-font-sans); font-size: 13px; color: var(--bb-ink); margin-bottom: 10px; }
.bb-highlight__card-check{ width: 22px; height: 22px; border-radius: 50%; background: #F2F2F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bb-highlight__card-check svg{ width: 11px; height: 11px; }

/* Layout: split (image left, content on plain bg right) */
.bb-highlight--split{ display: grid !important; grid-template-columns: 1fr 1fr; min-height: 0; border-radius: 0 !important; }
.bb-highlight--split .bb-highlight__bg{ position: relative; aspect-ratio: 4/5; }
.bb-highlight--split .bb-highlight__bg img{ border-radius: 20px !important; }
.bb-highlight--split .bb-highlight__scrim{ display: none; }
.bb-highlight--split .bb-highlight__content{ position: static; padding: 40px; max-width: 460px; }
.bb-highlight--split .bb-highlight__heading-line{ color: var(--bb-ink); }
.bb-highlight--split .bb-highlight__heading-line.bb-highlight__is-accent{ color: var(--bb-navy); }
.bb-highlight--split .bb-highlight__eyebrow{ color: var(--bb-ink-soft); }
.bb-highlight--split .bb-highlight__desc{ color: var(--bb-ink-soft); }
.bb-highlight--split .bb-highlight__card{ position: static; box-shadow: none; padding: 24px 0 0; width: 100%; margin-top: 16px; }

/* Layout: minimal (no floating card at all) */
.bb-highlight--minimal .bb-highlight__card{ display: none; }

@media(max-width: 900px){
  .bb-highlight--split{ grid-template-columns: 1fr; }
  .bb-highlight__card{ position: static !important; transform: none !important; width: 100%; margin-top: -20px; }
  .bb-highlight{ min-height: 0; }
  .bb-highlight__content{ padding: 40px 24px; }
}
@media(max-width: 480px){
  .bb-highlight__content{ padding: 30px 20px; }
  .bb-highlight__heading-line{ font-size: clamp(24px,8vw,32px); }
  .bb-highlight__card{ padding: 20px; width: calc(100% - 40px); }
}

/* ==========================================================
   BEFORE / AFTER — [BB Before After] widget
   ========================================================== */
.bb-ba{ padding: 0; }
.bb-ba__grid{ max-width: 1200px; margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.bb-ba__slider{ position: relative; aspect-ratio: 4/5; border-radius: 20px !important; overflow: hidden !important; cursor: ew-resize; }
.bb-ba__img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-ba__img img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.bb-ba__img--after{ clip-path: inset(0 0 0 50%); }
.bb-ba__handle{ position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); }
.bb-ba__handle-grip{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; gap: 3px; }
.bb-ba__handle-grip svg{ width: 12px; height: 12px; }
.bb-ba__tag{ position: absolute; bottom: 16px; font-family: var(--bb-font-sans); font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 999px; }
.bb-ba__tag--before{ left: 16px; }
.bb-ba__tag--after{ right: 16px; }

.bb-ba__eyebrow{ font-family: var(--bb-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ink-soft); margin: 0 0 14px; }
.bb-ba__heading{ font-family: var(--bb-font-display); font-size: clamp(28px,3.6vw,42px); color: var(--bb-ink); margin: 0 0 26px; line-height: 1.15; }
.bb-ba__variants{ display: flex; gap: 12px; margin-bottom: 24px; }
.bb-ba__variant{ width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid transparent; padding: 3px; cursor: pointer; background: none; }
.bb-ba__variant img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bb-ba__variant.bb-ba__is-active{ border-color: var(--bb-ink); }
.bb-ba__divider{ border: none; border-top: 1px solid var(--bb-line); margin: 0 0 24px; }
.bb-ba__product-name{ font-family: var(--bb-font-display); font-size: 22px; color: var(--bb-ink); margin: 0 0 18px; }
.bb-ba__list{ list-style: none; margin: 0 0 28px; padding: 0; }
.bb-ba__list li{ display: flex; align-items: center; gap: 12px; font-family: var(--bb-font-sans); font-size: 14px; color: var(--bb-ink); margin-bottom: 14px; }
.bb-ba__check{ width: 24px; height: 24px; border-radius: 50%; background: var(--bb-cream-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bb-ba__check svg{ width: 12px; height: 12px; }
.bb-ba__btn{ display: inline-flex !important; align-items: center !important; gap: 10px; background: #E9F0C7; color: #1a1a1a; font-family: var(--bb-font-sans); font-weight: 700; font-size: 14px; padding: 10px 10px 10px 24px; border-radius: 999px !important; text-decoration: none !important; }
.bb-ba__btn-arrow{ width: 32px; height: 32px; border-radius: 50% !important; background: #1a1a1a; color: #fff; display: flex !important; align-items: center !important; justify-content: center !important; }
.bb-ba__btn-arrow svg{ width: 13px; height: 13px; }

/* Layout: side-by-side (no drag, two static images) */
.bb-ba--sidebyside .bb-ba__slider{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; cursor: default; aspect-ratio: 8/5; }
.bb-ba--sidebyside .bb-ba__img{ position: relative; inset: auto; }
.bb-ba--sidebyside .bb-ba__img--after{ clip-path: none; }
.bb-ba--sidebyside .bb-ba__handle{ display: none; }

/* Layout: toggle (button switches with fade) */
.bb-ba--toggle .bb-ba__slider{ cursor: default; }
.bb-ba--toggle .bb-ba__img--after{ clip-path: none; opacity: 0; transition: opacity 0.3s ease; }
.bb-ba--toggle .bb-ba__img--after.bb-ba__is-shown{ opacity: 1; }
.bb-ba--toggle .bb-ba__handle{ display: none; }
.bb-ba__toggle-btns{ display: none; gap: 8px; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); }
.bb-ba--toggle .bb-ba__toggle-btns{ display: flex; }
.bb-ba__toggle-btn{ font-family: var(--bb-font-sans); font-size: 11px; font-weight: 700; padding: 6px 16px; border-radius: 999px; border: none !important; background: rgba(255,255,255,0.7); color: #1a1a1a; cursor: pointer; }
.bb-ba__toggle-btn.bb-ba__is-active{ background: #1a1a1a; color: #fff; }
.bb-ba--toggle .bb-ba__tag{ display: none; }

@media(max-width: 900px){
  .bb-ba__grid{ grid-template-columns: 1fr; gap: 36px; }
}

/* ==========================================================
   NEWSLETTER — [BB Newsletter] widget
   ========================================================== */
.bb-news{ padding: 64px 6vw; text-align: center; border-radius: 0; position: relative; overflow: hidden; }
.bb-news__heading{ font-family: var(--bb-font-display); font-size: clamp(24px,3.2vw,36px); color: var(--bb-ink); margin: 0 auto 28px; max-width: 560px; position: relative; z-index: 1; }
.bb-news__form{ display: flex !important; max-width: 480px; margin: 0 auto 16px; background: #fff; border-radius: 999px; padding: 6px; position: relative; z-index: 1; }
.bb-news__input{ flex: 1; border: none !important; background: transparent !important; padding: 12px 18px; font-family: var(--bb-font-sans); font-size: 14px; outline: none; }
.bb-news__submit{ width: 40px; height: 40px; border-radius: 50% !important; background: #1a1a1a; color: #fff; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; flex-shrink: 0; }
.bb-news__submit svg{ width: 14px; height: 14px; }
.bb-news__terms{ font-family: var(--bb-font-sans); font-size: 12px; color: var(--bb-ink-soft); position: relative; z-index: 1; }
.bb-news__terms a{ color: var(--bb-ink-soft); text-decoration: underline; }
.bb-news__thanks{ display: none; font-family: var(--bb-font-sans); font-size: 14px; font-weight: 700; color: var(--bb-ink); position: relative; z-index: 1; }

/* Layout: split (heading left, form right) */
.bb-news--split{ text-align: left; }
.bb-news--split .bb-news__inner{ max-width: 1100px; margin: 0 auto; display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bb-news--split .bb-news__heading{ margin: 0; }
.bb-news--split .bb-news__form{ margin: 0 0 12px; }
@media(max-width: 700px){ .bb-news--split .bb-news__inner{ grid-template-columns: 1fr; } }

/* Layout: inline (compact single row) */
.bb-news--inline .bb-news__inner{ max-width: 900px; margin: 0 auto; display: flex !important; align-items: center; gap: 20px; text-align: left; flex-wrap: wrap; }
.bb-news--inline .bb-news__heading{ margin: 0; flex-shrink: 0; }
.bb-news--inline .bb-news__form{ margin: 0; flex: 1; min-width: 260px; }
.bb-news--inline .bb-news__terms{ display: none; }

@media(max-width: 480px){
  .bb-news{ padding: 48px 6vw; }
  .bb-news__form{ flex-direction: column; border-radius: 20px; padding: 10px; }
  .bb-news__submit{ width: 100%; border-radius: 999px !important; margin-top: 8px; }
}

/* ==========================================================
   SITE HEADER — sticky header injected via wp_body_open
   ========================================================== */
.bb-site-header{
  position: sticky !important;
  top: 0;
  z-index: 999;
  background: var(--bb-header-bg, #FFFFFF);
  border-bottom: 1px solid var(--bb-ivory-deep, #EAE2D0);
  font-family: var(--bb-font-sans);
}
.bb-site-header__row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
  padding: 14px 5vw;
}
.bb-site-header__row--mobile{ display: none; }

.bb-site-header__logo{ display: flex !important; align-items: center !important; flex-shrink: 0; text-decoration: none !important; }
.bb-site-header__logo img{ height: 36px; width: auto; display: block !important; }
.bb-site-header__logo-text{ font-family: var(--bb-font-display); font-size: 18px; font-weight: 600; color: var(--bb-header-text, #7C944C); }

.bb-site-header__search{
  flex: 1;
  max-width: 520px;
  position: relative;
  display: flex !important;
}
.bb-site-header__search input{
  width: 100%;
  border: none !important;
  background: var(--bb-header-search-bg, #F1F1EF);
  border-radius: 999px !important;
  padding: 11px 46px 11px 20px;
  font-family: var(--bb-font-sans);
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
}
.bb-site-header__search button{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: var(--bb-header-text, #7C944C);
  padding: 0 !important;
}
.bb-site-header__search button svg{ width: 17px; height: 17px; }

.bb-site-header__icons{ display: flex !important; align-items: center !important; gap: 18px; flex-shrink: 0; }
.bb-site-header__icon{
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bb-header-text, #7C944C);
  text-decoration: none !important;
}
.bb-site-header__icon svg{ width: 21px; height: 21px; }
.bb-site-header__avatar{
  width: 30px; height: 30px;
  border-radius: 50% !important;
  background: var(--bb-header-avatar-bg, #DCD8D4);
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.bb-site-header__avatar svg{ width: 15px; height: 15px; color: var(--bb-header-bg, #fff); }
.bb-site-header__badge{
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  border-radius: 999px !important;
  background: var(--bb-header-badge-bg, #7C944C);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px;
}

/* --- Mobile: logo+icons row, then a full-width search row below --- */
@media(max-width: 700px){
  .bb-site-header__row--desktop{ display: none; }
  .bb-site-header__row--mobile{ display: block; }

  .bb-site-header__top{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 5vw 0;
  }
  .bb-site-header__mobile-search{ padding: 12px 5vw 14px; }
  .bb-site-header__mobile-search .bb-site-header__search{ max-width: 100%; }
  .bb-site-header__logo img{ height: 30px; }
}

/* ==========================================================
   HEADER WIDGET — [BB Header] widget
   ========================================================== */
.bb-header-w{
  background: var(--bb-hw-bg, #FFFFFF);
  font-family: var(--bb-font-sans);
}
.bb-header-w--bordered{ border-bottom: 1px solid var(--bb-hw-border, #EAE2D0); }

.bb-header-w__row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--bb-hw-gap, 24px);
  padding: var(--bb-hw-padding-y, 14px) var(--bb-hw-padding-x, 5vw);
}
.bb-header-w__row--mobile{ display: none; }

.bb-header-w__logo{ display: flex !important; align-items: center !important; flex-shrink: 0; text-decoration: none !important; }
.bb-header-w__logo img{ height: var(--bb-hw-logo-height, 36px); width: auto; display: block !important; }
.bb-header-w__logo-text{ font-family: var(--bb-font-display); font-size: 18px; font-weight: 600; color: var(--bb-hw-text, #7C944C); }

.bb-header-w__search{ flex: 1; max-width: 520px; position: relative; display: flex !important; }
.bb-header-w--stacked .bb-header-w__search{ max-width: 100%; }
.bb-header-w__search input{
  width: 100%;
  border: none !important;
  background: var(--bb-hw-search-bg, #F1F1EF);
  border-radius: 999px !important;
  padding: 11px 46px 11px 20px;
  font-family: var(--bb-font-sans);
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
}
.bb-header-w__search button{
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
  color: var(--bb-hw-text, #7C944C);
  padding: 0 !important;
}
.bb-header-w__search button svg{ width: var(--bb-hw-icon-size, 17px); height: var(--bb-hw-icon-size, 17px); }

.bb-header-w__icons{ display: flex !important; align-items: center !important; gap: 18px; flex-shrink: 0; }
.bb-header-w__icon{ position: relative; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--bb-hw-text, #7C944C); text-decoration: none !important; }
.bb-header-w__icon svg{ width: var(--bb-hw-icon-size, 21px); height: var(--bb-hw-icon-size, 21px); }
.bb-header-w__avatar{ width: 30px; height: 30px; border-radius: 50% !important; background: var(--bb-hw-avatar-bg, #DCD8D4); display: flex !important; align-items: center !important; justify-content: center !important; }
.bb-header-w__avatar svg{ width: 15px; height: 15px; color: var(--bb-hw-bg, #fff); }
.bb-header-w__badge{
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  border-radius: 999px !important;
  background: var(--bb-hw-badge-bg, #7C944C);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 4px;
}

/* Layout: stacked — logo+icons row, then search full row below, on ALL sizes */
.bb-header-w--stacked .bb-header-w__row--desktop{ display: none; }
.bb-header-w--stacked .bb-header-w__row--mobile{ display: block; }

/* Layout: minimal — no search row at all */
.bb-header-w--minimal .bb-header-w__search{ display: none !important; }

/* Responsive: center/minimal layouts collapse to stacked treatment under 700px */
@media(max-width: 700px){
  .bb-header-w--center .bb-header-w__row--desktop,
  .bb-header-w--minimal .bb-header-w__row--desktop{ display: none; }
  .bb-header-w--center .bb-header-w__row--mobile,
  .bb-header-w--minimal .bb-header-w__row--mobile{ display: block; }

  .bb-header-w__top{ display: flex !important; align-items: center !important; justify-content: space-between !important; padding: var(--bb-hw-padding-y, 14px) var(--bb-hw-padding-x, 5vw) 0; }
  .bb-header-w__mobile-search{ padding: 12px var(--bb-hw-padding-x, 5vw) var(--bb-hw-padding-y, 14px); }
  .bb-header-w__logo img{ height: 30px; }
}
.bb-header-w--stacked .bb-header-w__top{ display: flex !important; align-items: center !important; justify-content: space-between !important; padding: var(--bb-hw-padding-y, 14px) var(--bb-hw-padding-x, 5vw) 0; }
.bb-header-w--stacked .bb-header-w__mobile-search{ padding: 12px var(--bb-hw-padding-x, 5vw) var(--bb-hw-padding-y, 14px); }